@motifx-community/ui 0.1.0-beta.0 → 0.1.0-beta.2

package/llms-full.txt

@@ -1,6 +1,6 @@
 # @motifx-community/ui
 
-> UI components for MotifJS (@motifx/core) on the MotifJS design system. Version 0.1.0-beta.0: a preview, its API may still change before 1.0.
+> UI components for MotifJS (@motifx/core) on the MotifJS design system. Version 0.1.0-beta.2: a preview, its API may still change before 1.0.
 
 Built on MotifJS (`@motifx/core`): a component is an object, made in JSX or with `new`, whose every prop takes a value or a function (`Bind<T>`); `x-model` binds a value two-way. The look is the design system’s (`@motifx-community/design-system`): five design languages (`data-identity`), light and dark themes, density.
 
@@ -18,6 +18,7 @@ Built on MotifJS (`@motifx/core`): a component is an object, made in JSX or with
 
 - [Control](docs/control.md): The base of every control in the package. It gives each one the same `text`, `enabled`, `visible` and `tabStop`, and the same focus methods, whether the…
 - [Keyboard and focus](docs/keyboard.md): The rules every control follows: Tab order, the active control of a container, focus that never falls to `<body>`, `&File` access keys and app-wide shortcuts.
+- [Language](docs/language.md): The texts the controls write, the locale their dates and numbers follow, and the direction: one `uiLocale` for the kit, with a pack per language loaded as…
 
 ## Buttons
 
@@ -32,10 +33,12 @@ Built on MotifJS (`@motifx/core`): a component is an object, made in JSX or with
 - [TextArea](docs/textarea.md): A text field of several lines: a box that grows with the text or that the user drags bigger, a character counter, a clear button, Ctrl+Enter to send, and…
 - [NumberBox](docs/numberbox.md): A number field: arrow keys, PageUp / PageDown and spin buttons that repeat while held, bounds, a step without float noise, a format for display (currency,…
 - [DateBox](docs/datebox.md): A date, a time or both. It is typed in the order of the locale through a mask, or picked from a calendar and a list of times; `min`, `max` and…
+- [DateRangeBox](docs/daterangebox.md): A start and an end date in one field: typed through two masks, or picked on two months side by side, from ready-made ranges, within the dates and the span…
 - [ColorBox and ColorPicker](docs/colorbox.md): A colour as a field, with a picker in a popup; or the picker on its own. The picker has an area of saturation and brightness, a hue strip, an opacity strip,…
 - [Calendar](docs/calendar.md): A month of days to pick a date from, with a year and a decade view to get far quickly. It is the picker of DateBox, and it works on its own.
 - [Slider](docs/slider.md): A value picked on a track by dragging a thumb or with the keys: one number, or a range with two thumbs. Steps, marks with labels, a value bubble, a vertical…
 - [Rating](docs/rating.md): A row of stars to give a score or to show one, whole or by halves. It is a field: label, help text, rules and `x-model` work as in every field.
+- [FileUploader](docs/fileuploader.md): Files chosen with a button or dropped on the box, listed with their size and what happens to them: uploaded as they come, on a button or from code, with…
 
 ## Choice
 
@@ -50,6 +53,8 @@ Built on MotifJS (`@motifx/core`): a component is an object, made in JSX or with
 
 - [ProgressBar and Spinner](docs/progress.md): ProgressBar shows how far some work is, as a line or a circle, or that it runs when that is not known. Spinner says "busy, wait": a turning ring, alone or…
 - [Tooltip](docs/tooltip.md): A short description shown next to an element: after the pointer rests on it, when it gets keyboard focus, or from code. It can be hovered, Escape hides it,…
+- [Popover](docs/popover.md): Content next to the element it belongs to: a title, a close button, a form, a card. It opens on a press or while the pointer rests on its target, follows…
+- [LoadPanel](docs/loadpanel.md): A “loading” layer over a container or the whole page: a shade, a pane with the kit’s spinner and a message, a Cancel button when the work can be stopped.…
 - [Toast](docs/toast.md): Short notifications at an edge of the window: four tones, an action such as Undo, a time of their own or none, six positions and a limit on how many show at…
 
 ## Display
@@ -65,12 +70,16 @@ Built on MotifJS (`@motifx/core`): a component is an object, made in JSX or with
 - [Tabs](docs/tabs.md): Tabs show one panel at a time under a strip of tabs: from JSX or from code, closable, with icons and badges, scroll buttons when the tabs do not fit, four…
 - [Breadcrumb](docs/breadcrumb.md): The way to the current page: each step a link or a button, the current page last. Steps that do not fit go into a menu after the first.
 - [Pagination](docs/pagination.md): Moving through pages of items: the sizes to choose from, where the page stands, the steps and a button per page around the current one. It turns compact…
+- [Stepper](docs/stepper.md): The steps of a longer task and where the user stands in them: an indicator and a text per step, a line between them, the steps before the current one…
+- [Wizard](docs/wizard.md): A task in steps: a [Stepper](stepper.md) above or beside one page per step, and the Back and Next buttons under them. Next validates the page first; on the…
 - [Accordion](docs/accordion.md): An accordion opens and closes sections under their headers: one at a time or several, kept open, with icons, three looks and sections built when they are…
 - [Window and dialog](docs/window.md): A window or a dialog on a native `<dialog>`: one form, shown modeless or modal by whoever shows it. It has a title bar, moves, resizes, minimizes and…
 - [BottomSheet](docs/bottomsheet.md): A panel that comes up from the bottom of the page or of a container and stops at a few heights: a peek, half, full, as tall as its content, or heights of…
 - [Drawer](docs/drawer.md): A panel that slides in from an edge of the page or of a container, over the content or pushing it aside. A finger swipes it in from the edge and back again;…
 - [ActionSheet](docs/actionsheet.md): A list of commands that comes up from the bottom, made of the kit's menu items and large enough for a finger, with a title, a message and a cancel button…
 - [Layout](docs/layout.md): Containers that place controls: `Stack` (a row or a column), `Grid` (rows and columns), `Panel` (a plain box that can scroll), `GroupBox` (a titled frame),…
+- [ScrollView](docs/scrollview.md): Content that scrolls in a box of its own: the bars shown as told, a pull from the top that asks for what is new, a reach near the end that asks for more.…
+- [Sortable](docs/sortable.md): Items the user puts in order by dragging them, with the pointer or a finger, or with the keys; lists of one group take each other’s items. A drop moves the…
 - [FormLayout](docs/formlayout.md): Lays out the fields of a data object on a grid. Each field gets an editor — by name, or by the type of its value — bound to the object both ways; groups,…
 
 ## Data
@@ -240,7 +249,7 @@ tokens, with examples.
 
 # @motifx-community/ui
 
-> Get started · @motifx-community/ui 0.1.0-beta.0
+> Get started · @motifx-community/ui 0.1.0-beta.2
 
 Components for MotifJS that work the way desktop UI does — created when needed, shown anywhere, closed and disposed like windows — drawn from the MotifJS design system's tokens.
 
@@ -298,7 +307,7 @@ The look comes from `@motifx-community/design-system`: its tokens, three themes,
 
 # Showcase: an order screen
 
-> Get started · @motifx-community/ui 0.1.0-beta.0
+> Get started · @motifx-community/ui 0.1.0-beta.2
 
 An order screen built with the kit, the way a MotifJS app is built: the state and the operations live in a model (`OrderModel`), the page binds to it. The customer list is a data source of 5,000 rows that answers like a server.
 
@@ -307,7 +316,7 @@ An order screen built with the kit, the way a MotifJS app is built: the state an
 
 # Design tokens
 
-> Get started · @motifx-community/ui 0.1.0-beta.0
+> Get started · @motifx-community/ui 0.1.0-beta.2
 
 Five layers. The first four — primitives, the design language's own scales, semantic tokens per theme, density — come from `@motifx-community/design-system` and are listed here for reference. The fifth, the component tokens, is this kit's own: a knob per component, each referencing a design-system token, written in `@layer mx.components`. Every design language gives every one of them its own value.
 
@@ -444,19 +453,19 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `avatar.avatar.accent.bg` | `--mx-avatar-avatar-accent-bg` | `color.accent.subtle` | `#fbe6de` |
 | `avatar.avatar.accent.color` | `--mx-avatar-avatar-accent-color` | `color.accent.on-subtle` | `#983318` |
 | `avatar.avatar.success.bg` | `--mx-avatar-avatar-success-bg` | `color.success.subtle` | `#dff6dd` |
-| `avatar.avatar.success.color` | `--mx-avatar-avatar-success-color` | `color.success.fg` | `#0c6a0c` |
+| `avatar.avatar.success.color` | `--mx-avatar-avatar-success-color` | `color.success.fg` | `#006402` |
 | `avatar.avatar.caution.bg` | `--mx-avatar-avatar-caution-bg` | `color.caution.subtle` | `#fff4ce` |
-| `avatar.avatar.caution.color` | `--mx-avatar-avatar-caution-color` | `color.caution.fg` | `#845000` |
+| `avatar.avatar.caution.color` | `--mx-avatar-avatar-caution-color` | `color.caution.fg` | `#754702` |
 | `avatar.avatar.danger.bg` | `--mx-avatar-avatar-danger-bg` | `color.danger.subtle` | `#fde7e9` |
-| `avatar.avatar.danger.color` | `--mx-avatar-avatar-danger-color` | `color.danger.fg` | `#b3261a` |
+| `avatar.avatar.danger.color` | `--mx-avatar-avatar-danger-color` | `color.danger.fg` | `#b03659` |
 | `avatar.avatar.info.bg` | `--mx-avatar-avatar-info-bg` | `` | `initial` |
 | `avatar.avatar.info.color` | `--mx-avatar-avatar-info-color` | `` | `initial` |
 | `avatar.status.radius` | `--mx-avatar-status-radius` | `radius.full` | `9999px` |
 | `avatar.status.border-width` | `--mx-avatar-status-border-width` | `border.width.2` | `2px` |
 | `avatar.status.border-color` | `--mx-avatar-status-border-color` | `color.bg.surface` | `#f8f7f3` |
-| `avatar.status.online.bg` | `--mx-avatar-status-online-bg` | `color.success.solid` | `#0c6a0c` |
-| `avatar.status.away.bg` | `--mx-avatar-status-away-bg` | `color.caution.solid` | `#845000` |
-| `avatar.status.busy.bg` | `--mx-avatar-status-busy-bg` | `color.danger.solid` | `#b3261a` |
+| `avatar.status.online.bg` | `--mx-avatar-status-online-bg` | `color.success.solid` | `#006402` |
+| `avatar.status.away.bg` | `--mx-avatar-status-away-bg` | `color.caution.solid` | `#754702` |
+| `avatar.status.busy.bg` | `--mx-avatar-status-busy-bg` | `color.danger.solid` | `#b03659` |
 | `avatar.status.offline.bg` | `--mx-avatar-status-offline-bg` | `color.fg.tertiary` | `#8c8a82` |
 | `avatar.status.offline.border-color` | `--mx-avatar-status-offline-border-color` | `` | `initial` |
 | `avatar.status-icon.online.display` | `--mx-avatar-status-icon-online-display` | `` | `initial` |
@@ -493,11 +502,11 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `badge.badge.accent.color` | `--mx-badge-badge-accent-color` | `color.accent.on-solid` | `#ffffff` |
 | `badge.badge.info.bg` | `--mx-badge-badge-info-bg` | `color.info.solid` | `#5e5c55` |
 | `badge.badge.info.color` | `--mx-badge-badge-info-color` | `color.info.on-solid` | `#e1e0da` |
-| `badge.badge.success.bg` | `--mx-badge-badge-success-bg` | `color.success.solid` | `#0c6a0c` |
+| `badge.badge.success.bg` | `--mx-badge-badge-success-bg` | `color.success.solid` | `#006402` |
 | `badge.badge.success.color` | `--mx-badge-badge-success-color` | `color.success.on-solid` | `#ffffff` |
-| `badge.badge.caution.bg` | `--mx-badge-badge-caution-bg` | `color.caution.solid` | `#845000` |
+| `badge.badge.caution.bg` | `--mx-badge-badge-caution-bg` | `color.caution.solid` | `#754702` |
 | `badge.badge.caution.color` | `--mx-badge-badge-caution-color` | `color.caution.on-solid` | `#ffffff` |
-| `badge.badge.danger.bg` | `--mx-badge-badge-danger-bg` | `color.danger.solid` | `#b3261a` |
+| `badge.badge.danger.bg` | `--mx-badge-badge-danger-bg` | `color.danger.solid` | `#b03659` |
 | `badge.badge.danger.color` | `--mx-badge-badge-danger-color` | `color.danger.on-solid` | `#ffffff` |
 | `badge.badge.subtle.bg` | `--mx-badge-badge-subtle-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
 | `badge.badge.subtle.color` | `--mx-badge-badge-subtle-color` | `color.fg.primary` | `#1d1c1a` |
@@ -506,11 +515,11 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `badge.badge.subtle-info.bg` | `--mx-badge-badge-subtle-info-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
 | `badge.badge.subtle-info.color` | `--mx-badge-badge-subtle-info-color` | `color.fg.primary` | `#1d1c1a` |
 | `badge.badge.subtle-success.bg` | `--mx-badge-badge-subtle-success-bg` | `color.success.subtle` | `#dff6dd` |
-| `badge.badge.subtle-success.color` | `--mx-badge-badge-subtle-success-color` | `color.success.fg` | `#0c6a0c` |
+| `badge.badge.subtle-success.color` | `--mx-badge-badge-subtle-success-color` | `color.success.fg` | `#006402` |
 | `badge.badge.subtle-caution.bg` | `--mx-badge-badge-subtle-caution-bg` | `color.caution.subtle` | `#fff4ce` |
-| `badge.badge.subtle-caution.color` | `--mx-badge-badge-subtle-caution-color` | `color.caution.fg` | `#845000` |
+| `badge.badge.subtle-caution.color` | `--mx-badge-badge-subtle-caution-color` | `color.caution.fg` | `#754702` |
 | `badge.badge.subtle-danger.bg` | `--mx-badge-badge-subtle-danger-bg` | `color.danger.subtle` | `#fde7e9` |
-| `badge.badge.subtle-danger.color` | `--mx-badge-badge-subtle-danger-color` | `color.danger.fg` | `#b3261a` |
+| `badge.badge.subtle-danger.color` | `--mx-badge-badge-subtle-danger-color` | `color.danger.fg` | `#b03659` |
 | `badge.badge.outline.bg` | `--mx-badge-badge-outline-bg` | `` | `rgb(0 0 0 / 0)` |
 | `badge.badge.outline.color` | `--mx-badge-badge-outline-color` | `color.fg.secondary` | `#5e5c55` |
 | `badge.badge.outline.border-width` | `--mx-badge-badge-outline-border-width` | `border.width.1` | `1px` |
@@ -519,12 +528,12 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `badge.badge.outline-accent.border-color` | `--mx-badge-badge-outline-accent-border-color` | `color.accent.fg` | `#983318` |
 | `badge.badge.outline-info.color` | `--mx-badge-badge-outline-info-color` | `color.fg.secondary` | `#5e5c55` |
 | `badge.badge.outline-info.border-color` | `--mx-badge-badge-outline-info-border-color` | `color.fg.secondary` | `#5e5c55` |
-| `badge.badge.outline-success.color` | `--mx-badge-badge-outline-success-color` | `color.success.fg` | `#0c6a0c` |
-| `badge.badge.outline-success.border-color` | `--mx-badge-badge-outline-success-border-color` | `color.success.fg` | `#0c6a0c` |
-| `badge.badge.outline-caution.color` | `--mx-badge-badge-outline-caution-color` | `color.caution.fg` | `#845000` |
-| `badge.badge.outline-caution.border-color` | `--mx-badge-badge-outline-caution-border-color` | `color.caution.fg` | `#845000` |
-| `badge.badge.outline-danger.color` | `--mx-badge-badge-outline-danger-color` | `color.danger.fg` | `#b3261a` |
-| `badge.badge.outline-danger.border-color` | `--mx-badge-badge-outline-danger-border-color` | `color.danger.fg` | `#b3261a` |
+| `badge.badge.outline-success.color` | `--mx-badge-badge-outline-success-color` | `color.success.fg` | `#006402` |
+| `badge.badge.outline-success.border-color` | `--mx-badge-badge-outline-success-border-color` | `color.success.fg` | `#006402` |
+| `badge.badge.outline-caution.color` | `--mx-badge-badge-outline-caution-color` | `color.caution.fg` | `#754702` |
+| `badge.badge.outline-caution.border-color` | `--mx-badge-badge-outline-caution-border-color` | `color.caution.fg` | `#754702` |
+| `badge.badge.outline-danger.color` | `--mx-badge-badge-outline-danger-color` | `color.danger.fg` | `#b03659` |
+| `badge.badge.outline-danger.border-color` | `--mx-badge-badge-outline-danger-border-color` | `color.danger.fg` | `#b03659` |
 | `badge.badge.dot.padding-inline` | `--mx-badge-badge-dot-padding-inline` | `space.0` | `0px` |
 | `breadcrumb.font-size.sm` | `--mx-breadcrumb-font-size-sm` | `font.size.caption` | `0.75rem` |
 | `breadcrumb.font-size.md` | `--mx-breadcrumb-font-size-md` | `font.size.body` | `0.875rem` |
@@ -602,8 +611,8 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `button.face.accent.border-color` | `--mx-button-face-accent-border-color` | `color.accent.solid` | `#c24523` |
 | `button.face.accent.border-bottom-color` | `--mx-button-face-accent-border-bottom-color` | `color.stroke.on-accent-bottom` | `rgb(0 0 0 / 0.4)` |
 | `button.face.accent.color` | `--mx-button-face-accent-color` | `color.accent.on-solid` | `#ffffff` |
-| `button.face.danger.bg` | `--mx-button-face-danger-bg` | `color.danger.solid` | `#b3261a` |
-| `button.face.danger.border-color` | `--mx-button-face-danger-border-color` | `color.danger.solid` | `#b3261a` |
+| `button.face.danger.bg` | `--mx-button-face-danger-bg` | `color.danger.solid` | `#b03659` |
+| `button.face.danger.border-color` | `--mx-button-face-danger-border-color` | `color.danger.solid` | `#b03659` |
 | `button.face.danger.border-bottom-color` | `--mx-button-face-danger-border-bottom-color` | `color.stroke.on-accent-bottom` | `rgb(0 0 0 / 0.4)` |
 | `button.face.danger.color` | `--mx-button-face-danger-color` | `color.danger.on-solid` | `#ffffff` |
 | `button.face.outline.bg` | `--mx-button-face-outline-bg` | `` | `rgb(0 0 0 / 0)` |
@@ -612,7 +621,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `button.face.outline.shadow` | `--mx-button-face-outline-shadow` | `` | `0 0 #0000` |
 | `button.face.outline.color` | `--mx-button-face-outline-color` | `color.fg.primary` | `#1d1c1a` |
 | `button.face.outline-accent.color` | `--mx-button-face-outline-accent-color` | `color.accent.fg` | `#983318` |
-| `button.face.outline-danger.color` | `--mx-button-face-outline-danger-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.outline-danger.color` | `--mx-button-face-outline-danger-color` | `color.danger.fg` | `#b03659` |
 | `button.face.ghost.bg` | `--mx-button-face-ghost-bg` | `` | `rgb(0 0 0 / 0)` |
 | `button.face.ghost.border-bottom-width` | `--mx-button-face-ghost-border-bottom-width` | `border.width.1` | `1px` |
 | `button.face.ghost.border-color` | `--mx-button-face-ghost-border-color` | `` | `rgb(0 0 0 / 0)` |
@@ -620,7 +629,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `button.face.ghost.shadow` | `--mx-button-face-ghost-shadow` | `` | `0 0 #0000` |
 | `button.face.ghost.color` | `--mx-button-face-ghost-color` | `color.fg.primary` | `#1d1c1a` |
 | `button.face.ghost-accent.color` | `--mx-button-face-ghost-accent-color` | `color.accent.fg` | `#983318` |
-| `button.face.ghost-danger.color` | `--mx-button-face-ghost-danger-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.ghost-danger.color` | `--mx-button-face-ghost-danger-color` | `color.danger.fg` | `#b03659` |
 | `button.face.hover.bg` | `--mx-button-face-hover-bg` | `color.fill.control.secondary` | `#ebeae5` |
 | `button.face.hover.border-bottom-color` | `--mx-button-face-hover-border-bottom-color` | `color.stroke.control.edge` | `rgb(0 0 0 / 0.3)` |
 | `button.face.hover.image` | `--mx-button-face-hover-image` | `` | `initial` |
@@ -628,30 +637,30 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `button.face.accent-hover.bg` | `--mx-button-face-accent-hover-bg` | `color.accent.solid-hover` | `#b43f20` |
 | `button.face.accent-hover.border-bottom-color` | `--mx-button-face-accent-hover-border-bottom-color` | `color.stroke.on-accent-bottom` | `rgb(0 0 0 / 0.4)` |
 | `button.face.accent-hover.color` | `--mx-button-face-accent-hover-color` | `color.accent.on-solid` | `#ffffff` |
-| `button.face.danger-hover.bg` | `--mx-button-face-danger-hover-bg` | `color.danger.solid-hover` | `#c42b1c` |
+| `button.face.danger-hover.bg` | `--mx-button-face-danger-hover-bg` | `color.danger.solid-hover` | `#c13b61` |
 | `button.face.danger-hover.border-bottom-color` | `--mx-button-face-danger-hover-border-bottom-color` | `color.stroke.on-accent-bottom` | `rgb(0 0 0 / 0.4)` |
 | `button.face.danger-hover.color` | `--mx-button-face-danger-hover-color` | `color.danger.on-solid` | `#ffffff` |
 | `button.face.outline-hover.bg` | `--mx-button-face-outline-hover-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
 | `button.face.outline-hover.border-color` | `--mx-button-face-outline-hover-border-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `button.face.outline-hover.color` | `--mx-button-face-outline-hover-color` | `` | `initial` |
 | `button.face.outline-accent-hover.color` | `--mx-button-face-outline-accent-hover-color` | `color.accent.fg` | `#983318` |
-| `button.face.outline-danger-hover.color` | `--mx-button-face-outline-danger-hover-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.outline-danger-hover.color` | `--mx-button-face-outline-danger-hover-color` | `color.danger.fg` | `#b03659` |
 | `button.face.ghost-hover.bg` | `--mx-button-face-ghost-hover-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
 | `button.face.ghost-hover.border-color` | `--mx-button-face-ghost-hover-border-color` | `` | `rgb(0 0 0 / 0)` |
 | `button.face.ghost-hover.color` | `--mx-button-face-ghost-hover-color` | `` | `initial` |
 | `button.face.ghost-accent-hover.color` | `--mx-button-face-ghost-accent-hover-color` | `color.accent.fg` | `#983318` |
-| `button.face.ghost-danger-hover.color` | `--mx-button-face-ghost-danger-hover-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.ghost-danger-hover.color` | `--mx-button-face-ghost-danger-hover-color` | `color.danger.fg` | `#b03659` |
 | `button.face.toggled-hover.bg` | `--mx-button-face-toggled-hover-bg` | `color.fill.control.secondary` | `#ebeae5` |
 | `button.face.accent-toggled-hover.bg` | `--mx-button-face-accent-toggled-hover-bg` | `color.accent.solid-hover` | `#b43f20` |
-| `button.face.danger-toggled-hover.bg` | `--mx-button-face-danger-toggled-hover-bg` | `color.danger.solid-hover` | `#c42b1c` |
+| `button.face.danger-toggled-hover.bg` | `--mx-button-face-danger-toggled-hover-bg` | `color.danger.solid-hover` | `#c13b61` |
 | `button.face.outline-toggled-hover.bg` | `--mx-button-face-outline-toggled-hover-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
 | `button.face.outline-toggled-hover.color` | `--mx-button-face-outline-toggled-hover-color` | `` | `initial` |
 | `button.face.outline-accent-toggled-hover.color` | `--mx-button-face-outline-accent-toggled-hover-color` | `color.accent.fg` | `#983318` |
-| `button.face.outline-danger-toggled-hover.color` | `--mx-button-face-outline-danger-toggled-hover-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.outline-danger-toggled-hover.color` | `--mx-button-face-outline-danger-toggled-hover-color` | `color.danger.fg` | `#b03659` |
 | `button.face.ghost-toggled-hover.bg` | `--mx-button-face-ghost-toggled-hover-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
 | `button.face.ghost-toggled-hover.color` | `--mx-button-face-ghost-toggled-hover-color` | `` | `initial` |
 | `button.face.ghost-accent-toggled-hover.color` | `--mx-button-face-ghost-accent-toggled-hover-color` | `color.accent.fg` | `#983318` |
-| `button.face.ghost-danger-toggled-hover.color` | `--mx-button-face-ghost-danger-toggled-hover-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.ghost-danger-toggled-hover.color` | `--mx-button-face-ghost-danger-toggled-hover-color` | `color.danger.fg` | `#b03659` |
 | `button.face.pressed.bg` | `--mx-button-face-pressed-bg` | `color.fill.control.tertiary` | `#e1e0da` |
 | `button.face.pressed.border-bottom-color` | `--mx-button-face-pressed-border-bottom-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `button.face.pressed.shadow` | `--mx-button-face-pressed-shadow` | `` | `0 0 #0000` |
@@ -660,19 +669,19 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `button.face.accent-pressed.bg` | `--mx-button-face-accent-pressed-bg` | `color.accent.solid-pressed` | `#a1381c` |
 | `button.face.accent-pressed.border-bottom-color` | `--mx-button-face-accent-pressed-border-bottom-color` | `color.accent.solid` | `#c24523` |
 | `button.face.accent-pressed.color` | `--mx-button-face-accent-pressed-color` | `color.accent.on-solid` | `#ffffff` |
-| `button.face.danger-pressed.bg` | `--mx-button-face-danger-pressed-bg` | `color.danger.solid-hover` | `#c42b1c` |
-| `button.face.danger-pressed.border-bottom-color` | `--mx-button-face-danger-pressed-border-bottom-color` | `color.danger.solid` | `#b3261a` |
+| `button.face.danger-pressed.bg` | `--mx-button-face-danger-pressed-bg` | `color.danger.solid-hover` | `#c13b61` |
+| `button.face.danger-pressed.border-bottom-color` | `--mx-button-face-danger-pressed-border-bottom-color` | `color.danger.solid` | `#b03659` |
 | `button.face.danger-pressed.color` | `--mx-button-face-danger-pressed-color` | `color.danger.on-solid` | `#ffffff` |
 | `button.face.outline-pressed.bg` | `--mx-button-face-outline-pressed-bg` | `color.fill.subtle.tertiary` | `rgb(0 0 0 / 0.0241)` |
 | `button.face.outline-pressed.border-color` | `--mx-button-face-outline-pressed-border-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `button.face.outline-pressed.color` | `--mx-button-face-outline-pressed-color` | `` | `initial` |
 | `button.face.outline-accent-pressed.color` | `--mx-button-face-outline-accent-pressed-color` | `color.accent.fg` | `#983318` |
-| `button.face.outline-danger-pressed.color` | `--mx-button-face-outline-danger-pressed-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.outline-danger-pressed.color` | `--mx-button-face-outline-danger-pressed-color` | `color.danger.fg` | `#b03659` |
 | `button.face.ghost-pressed.bg` | `--mx-button-face-ghost-pressed-bg` | `color.fill.subtle.tertiary` | `rgb(0 0 0 / 0.0241)` |
 | `button.face.ghost-pressed.border-color` | `--mx-button-face-ghost-pressed-border-color` | `` | `rgb(0 0 0 / 0)` |
 | `button.face.ghost-pressed.color` | `--mx-button-face-ghost-pressed-color` | `` | `initial` |
 | `button.face.ghost-accent-pressed.color` | `--mx-button-face-ghost-accent-pressed-color` | `color.accent.fg` | `#983318` |
-| `button.face.ghost-danger-pressed.color` | `--mx-button-face-ghost-danger-pressed-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.ghost-danger-pressed.color` | `--mx-button-face-ghost-danger-pressed-color` | `color.danger.fg` | `#b03659` |
 | `button.face.focus.glow` | `--mx-button-face-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
 | `button.face.focus.outline-width` | `--mx-button-face-focus-outline-width` | `focus.ring.width` | `2px` |
 | `button.face.focus.outline-color` | `--mx-button-face-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
@@ -687,19 +696,19 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `button.face.accent-toggled.bg` | `--mx-button-face-accent-toggled-bg` | `color.accent.solid-pressed` | `#a1381c` |
 | `button.face.accent-toggled.border-bottom-color` | `--mx-button-face-accent-toggled-border-bottom-color` | `color.accent.solid` | `#c24523` |
 | `button.face.accent-toggled.color` | `--mx-button-face-accent-toggled-color` | `color.accent.on-solid` | `#ffffff` |
-| `button.face.danger-toggled.bg` | `--mx-button-face-danger-toggled-bg` | `color.danger.solid-hover` | `#c42b1c` |
-| `button.face.danger-toggled.border-bottom-color` | `--mx-button-face-danger-toggled-border-bottom-color` | `color.danger.solid` | `#b3261a` |
+| `button.face.danger-toggled.bg` | `--mx-button-face-danger-toggled-bg` | `color.danger.solid-hover` | `#c13b61` |
+| `button.face.danger-toggled.border-bottom-color` | `--mx-button-face-danger-toggled-border-bottom-color` | `color.danger.solid` | `#b03659` |
 | `button.face.danger-toggled.color` | `--mx-button-face-danger-toggled-color` | `color.danger.on-solid` | `#ffffff` |
 | `button.face.outline-toggled.bg` | `--mx-button-face-outline-toggled-bg` | `color.fill.subtle.tertiary` | `rgb(0 0 0 / 0.0241)` |
 | `button.face.outline-toggled.border-color` | `--mx-button-face-outline-toggled-border-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `button.face.outline-toggled.color` | `--mx-button-face-outline-toggled-color` | `` | `initial` |
 | `button.face.outline-accent-toggled.color` | `--mx-button-face-outline-accent-toggled-color` | `color.accent.fg` | `#983318` |
-| `button.face.outline-danger-toggled.color` | `--mx-button-face-outline-danger-toggled-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.outline-danger-toggled.color` | `--mx-button-face-outline-danger-toggled-color` | `color.danger.fg` | `#b03659` |
 | `button.face.ghost-toggled.bg` | `--mx-button-face-ghost-toggled-bg` | `color.fill.subtle.tertiary` | `rgb(0 0 0 / 0.0241)` |
 | `button.face.ghost-toggled.border-color` | `--mx-button-face-ghost-toggled-border-color` | `` | `rgb(0 0 0 / 0)` |
 | `button.face.ghost-toggled.color` | `--mx-button-face-ghost-toggled-color` | `` | `initial` |
 | `button.face.ghost-accent-toggled.color` | `--mx-button-face-ghost-accent-toggled-color` | `color.accent.fg` | `#983318` |
-| `button.face.ghost-danger-toggled.color` | `--mx-button-face-ghost-danger-toggled-color` | `color.danger.fg` | `#b3261a` |
+| `button.face.ghost-danger-toggled.color` | `--mx-button-face-ghost-danger-toggled-color` | `color.danger.fg` | `#b03659` |
 | `button.face.disabled.bg` | `--mx-button-face-disabled-bg` | `color.fill.control.disabled` | `#ebeae5` |
 | `button.face.disabled.border-color` | `--mx-button-face-disabled-border-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `button.face.disabled.border-bottom-color` | `--mx-button-face-disabled-border-bottom-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
@@ -738,10 +747,10 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `button.spinner.danger.color` | `--mx-button-spinner-danger-color` | `color.danger.on-solid` | `#ffffff` |
 | `button.spinner.outline.color` | `--mx-button-spinner-outline-color` | `color.fg.primary` | `#1d1c1a` |
 | `button.spinner.outline-accent.color` | `--mx-button-spinner-outline-accent-color` | `color.accent.fg` | `#983318` |
-| `button.spinner.outline-danger.color` | `--mx-button-spinner-outline-danger-color` | `color.danger.fg` | `#b3261a` |
+| `button.spinner.outline-danger.color` | `--mx-button-spinner-outline-danger-color` | `color.danger.fg` | `#b03659` |
 | `button.spinner.ghost.color` | `--mx-button-spinner-ghost-color` | `color.fg.primary` | `#1d1c1a` |
 | `button.spinner.ghost-accent.color` | `--mx-button-spinner-ghost-accent-color` | `color.accent.fg` | `#983318` |
-| `button.spinner.ghost-danger.color` | `--mx-button-spinner-ghost-danger-color` | `color.danger.fg` | `#b3261a` |
+| `button.spinner.ghost-danger.color` | `--mx-button-spinner-ghost-danger-color` | `color.danger.fg` | `#b03659` |
 | `button.divider.width` | `--mx-button-divider-width` | `border.width.1` | `1px` |
 | `button.divider.bg` | `--mx-button-divider-bg` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `button.divider.accent.bg` | `--mx-button-divider-accent-bg` | `color.stroke.on-accent-bottom` | `rgb(0 0 0 / 0.4)` |
@@ -797,6 +806,15 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `calendar.cell.selected.color` | `--mx-calendar-cell-selected-color` | `color.accent.on-solid` | `#ffffff` |
 | `calendar.cell.selected.shadow` | `--mx-calendar-cell-selected-shadow` | `` | `initial` |
 | `calendar.cell.selected-hover.bg` | `--mx-calendar-cell-selected-hover-bg` | `color.accent.solid` | `#c24523` |
+| `calendar.cell.range-start.bg` | `--mx-calendar-cell-range-start-bg` | `color.accent.solid` | `#c24523` |
+| `calendar.cell.range-start.color` | `--mx-calendar-cell-range-start-color` | `color.accent.on-solid` | `#ffffff` |
+| `calendar.cell.range-end.bg` | `--mx-calendar-cell-range-end-bg` | `color.accent.solid` | `#c24523` |
+| `calendar.cell.range-end.color` | `--mx-calendar-cell-range-end-color` | `color.accent.on-solid` | `#ffffff` |
+| `calendar.cell.range-single.bg` | `--mx-calendar-cell-range-single-bg` | `color.accent.solid` | `#c24523` |
+| `calendar.cell.range-single.color` | `--mx-calendar-cell-range-single-color` | `color.accent.on-solid` | `#ffffff` |
+| `calendar.cell.range-in.bg` | `--mx-calendar-cell-range-in-bg` | `color.accent.subtle` | `#fbe6de` |
+| `calendar.cell.range-in.color` | `--mx-calendar-cell-range-in-color` | `color.accent.on-subtle` | `#983318` |
+| `calendar.cell.range-in.radius` | `--mx-calendar-cell-range-in-radius` | `radius.none` | `0px` |
 | `calendar.cell.disabled.color` | `--mx-calendar-cell-disabled-color` | `color.fg.disabled` | `#a2a098` |
 | `calendar.today.padding-block` | `--mx-calendar-today-padding-block` | `space.1` | `0.25rem` |
 | `calendar.today.padding-inline` | `--mx-calendar-today-padding-inline` | `space.3` | `0.75rem` |
@@ -906,15 +924,15 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `checkbox.box.mixed.bg` | `--mx-checkbox-box-mixed-bg` | `color.accent.solid` | `#c24523` |
 | `checkbox.box.mixed.border-color` | `--mx-checkbox-box-mixed-border-color` | `color.accent.solid` | `#c24523` |
 | `checkbox.box.mixed.shadow` | `--mx-checkbox-box-mixed-shadow` | `` | `inset 0px 1px 0px 0px rgb(255 255 255 / 0.7), 0 1px 0 rgb(0 0 0 / 0.4)` |
-| `checkbox.box.invalid.border-color` | `--mx-checkbox-box-invalid-border-color` | `color.danger.solid` | `#b3261a` |
-| `checkbox.box.invalid.shadow` | `--mx-checkbox-box-invalid-shadow` | `` | `inset 0px 1px 0px 0px rgb(255 255 255 / 0.7), 0 1px 0 #b3261a` |
+| `checkbox.box.invalid.border-color` | `--mx-checkbox-box-invalid-border-color` | `color.danger.solid` | `#b03659` |
+| `checkbox.box.invalid.shadow` | `--mx-checkbox-box-invalid-shadow` | `` | `inset 0px 1px 0px 0px rgb(255 255 255 / 0.7), 0 1px 0 #b03659` |
 | `checkbox.box.hover.bg` | `--mx-checkbox-box-hover-bg` | `color.fill.control.secondary` | `#ebeae5` |
 | `checkbox.box.hover.border-color` | `--mx-checkbox-box-hover-border-color` | `` | `initial` |
 | `checkbox.box.checked-hover.bg` | `--mx-checkbox-box-checked-hover-bg` | `color.accent.solid-hover` | `#b43f20` |
 | `checkbox.box.checked-hover.border-color` | `--mx-checkbox-box-checked-hover-border-color` | `` | `initial` |
 | `checkbox.box.mixed-hover.bg` | `--mx-checkbox-box-mixed-hover-bg` | `color.accent.solid-hover` | `#b43f20` |
 | `checkbox.box.mixed-hover.border-color` | `--mx-checkbox-box-mixed-hover-border-color` | `` | `initial` |
-| `checkbox.box.invalid-hover.border-color` | `--mx-checkbox-box-invalid-hover-border-color` | `color.danger.solid` | `#b3261a` |
+| `checkbox.box.invalid-hover.border-color` | `--mx-checkbox-box-invalid-hover-border-color` | `color.danger.solid` | `#b03659` |
 | `checkbox.box.pressed.bg` | `--mx-checkbox-box-pressed-bg` | `color.fill.control.tertiary` | `#e1e0da` |
 | `checkbox.box.pressed.border-color` | `--mx-checkbox-box-pressed-border-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `checkbox.box.pressed.shadow` | `--mx-checkbox-box-pressed-shadow` | `` | `0 0 #0000` |
@@ -924,7 +942,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `checkbox.box.mixed-pressed.bg` | `--mx-checkbox-box-mixed-pressed-bg` | `color.accent.solid-pressed` | `#a1381c` |
 | `checkbox.box.mixed-pressed.border-color` | `--mx-checkbox-box-mixed-pressed-border-color` | `color.accent.solid` | `#c24523` |
 | `checkbox.box.mixed-pressed.shadow` | `--mx-checkbox-box-mixed-pressed-shadow` | `` | `0 0 #0000` |
-| `checkbox.box.invalid-pressed.border-color` | `--mx-checkbox-box-invalid-pressed-border-color` | `color.danger.solid` | `#b3261a` |
+| `checkbox.box.invalid-pressed.border-color` | `--mx-checkbox-box-invalid-pressed-border-color` | `color.danger.solid` | `#b03659` |
 | `checkbox.box.focus.outline-width` | `--mx-checkbox-box-focus-outline-width` | `focus.ring.width` | `2px` |
 | `checkbox.box.focus.outline-color` | `--mx-checkbox-box-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
 | `checkbox.box.focus.outline-offset` | `--mx-checkbox-box-focus-outline-offset` | `focus.ring.offset` | `1px` |
@@ -939,7 +957,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `checkbox.box.mixed-pressed-focus.glow` | `--mx-checkbox-box-mixed-pressed-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
 | `checkbox.box.mixed-pressed-focus.shadow` | `--mx-checkbox-box-mixed-pressed-focus-shadow` | `` | `inset 0px 1px 0px 0px rgb(255 255 255 / 0.7), 0 1px 0 rgb(0 0 0 / 0.4)` |
 | `checkbox.box.invalid-pressed-focus.glow` | `--mx-checkbox-box-invalid-pressed-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
-| `checkbox.box.invalid-pressed-focus.shadow` | `--mx-checkbox-box-invalid-pressed-focus-shadow` | `` | `inset 0px 1px 0px 0px rgb(255 255 255 / 0.7), 0 1px 0 #b3261a` |
+| `checkbox.box.invalid-pressed-focus.shadow` | `--mx-checkbox-box-invalid-pressed-focus-shadow` | `` | `inset 0px 1px 0px 0px rgb(255 255 255 / 0.7), 0 1px 0 #b03659` |
 | `checkbox.box.disabled.bg` | `--mx-checkbox-box-disabled-bg` | `color.fill.control.disabled` | `#ebeae5` |
 | `checkbox.box.disabled.border-color` | `--mx-checkbox-box-disabled-border-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `checkbox.box.disabled.shadow` | `--mx-checkbox-box-disabled-shadow` | `` | `0 0 #0000` |
@@ -990,17 +1008,17 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `chip.chip.outline-accent.color` | `--mx-chip-chip-outline-accent-color` | `color.accent.fg` | `#983318` |
 | `chip.chip.outline-accent.border-color` | `--mx-chip-chip-outline-accent-border-color` | `color.accent.fg` | `#983318` |
 | `chip.chip.success.bg` | `--mx-chip-chip-success-bg` | `color.success.subtle` | `#dff6dd` |
-| `chip.chip.success.color` | `--mx-chip-chip-success-color` | `color.success.fg` | `#0c6a0c` |
-| `chip.chip.outline-success.color` | `--mx-chip-chip-outline-success-color` | `color.success.fg` | `#0c6a0c` |
-| `chip.chip.outline-success.border-color` | `--mx-chip-chip-outline-success-border-color` | `color.success.fg` | `#0c6a0c` |
+| `chip.chip.success.color` | `--mx-chip-chip-success-color` | `color.success.fg` | `#006402` |
+| `chip.chip.outline-success.color` | `--mx-chip-chip-outline-success-color` | `color.success.fg` | `#006402` |
+| `chip.chip.outline-success.border-color` | `--mx-chip-chip-outline-success-border-color` | `color.success.fg` | `#006402` |
 | `chip.chip.caution.bg` | `--mx-chip-chip-caution-bg` | `color.caution.subtle` | `#fff4ce` |
-| `chip.chip.caution.color` | `--mx-chip-chip-caution-color` | `color.caution.fg` | `#845000` |
-| `chip.chip.outline-caution.color` | `--mx-chip-chip-outline-caution-color` | `color.caution.fg` | `#845000` |
-| `chip.chip.outline-caution.border-color` | `--mx-chip-chip-outline-caution-border-color` | `color.caution.fg` | `#845000` |
+| `chip.chip.caution.color` | `--mx-chip-chip-caution-color` | `color.caution.fg` | `#754702` |
+| `chip.chip.outline-caution.color` | `--mx-chip-chip-outline-caution-color` | `color.caution.fg` | `#754702` |
+| `chip.chip.outline-caution.border-color` | `--mx-chip-chip-outline-caution-border-color` | `color.caution.fg` | `#754702` |
 | `chip.chip.danger.bg` | `--mx-chip-chip-danger-bg` | `color.danger.subtle` | `#fde7e9` |
-| `chip.chip.danger.color` | `--mx-chip-chip-danger-color` | `color.danger.fg` | `#b3261a` |
-| `chip.chip.outline-danger.color` | `--mx-chip-chip-outline-danger-color` | `color.danger.fg` | `#b3261a` |
-| `chip.chip.outline-danger.border-color` | `--mx-chip-chip-outline-danger-border-color` | `color.danger.fg` | `#b3261a` |
+| `chip.chip.danger.color` | `--mx-chip-chip-danger-color` | `color.danger.fg` | `#b03659` |
+| `chip.chip.outline-danger.color` | `--mx-chip-chip-outline-danger-color` | `color.danger.fg` | `#b03659` |
+| `chip.chip.outline-danger.border-color` | `--mx-chip-chip-outline-danger-border-color` | `color.danger.fg` | `#b03659` |
 | `chip.chip.selected.bg` | `--mx-chip-chip-selected-bg` | `color.accent.subtle` | `#fbe6de` |
 | `chip.chip.selected.color` | `--mx-chip-chip-selected-color` | `color.accent.on-subtle` | `#983318` |
 | `chip.chip.selected.border-color` | `--mx-chip-chip-selected-border-color` | `` | `rgb(0 0 0 / 0)` |
@@ -1115,7 +1133,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `datagrid.range-anchor-fill` | `--mx-datagrid-range-anchor-fill` | `color.bg.surface` | `#f8f7f3` |
 | `datagrid.row-run-border-color` | `--mx-datagrid-row-run-border-color` | `color.accent.solid` | `#c24523` |
 | `datagrid.row-run-border-width` | `--mx-datagrid-row-run-border-width` | `border.width.2` | `2px` |
-| `datagrid.search-mark-line` | `--mx-datagrid-search-mark-line` | `color.caution.fg` | `#845000` |
+| `datagrid.search-mark-line` | `--mx-datagrid-search-mark-line` | `color.caution.fg` | `#754702` |
 | `datagrid.search-mark-thickness` | `--mx-datagrid-search-mark-thickness` | `border.width.2` | `2px` |
 | `datagrid.search-mark-offset` | `--mx-datagrid-search-mark-offset` | `border.width.2` | `2px` |
 | `datagrid.filter-text-underline-width` | `--mx-datagrid-filter-text-underline-width` | `border.width.1` | `1px` |
@@ -1281,7 +1299,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `datagrid.changed.border-top-color` | `--mx-datagrid-changed-border-top-color` | `color.accent.solid` | `#c24523` |
 | `datagrid.changed.border-color` | `--mx-datagrid-changed-border-color` | `` | `rgb(0 0 0 / 0)` |
 | `datagrid.invalid.border-width` | `--mx-datagrid-invalid-border-width` | `border.width.2` | `2px` |
-| `datagrid.invalid.border-color` | `--mx-datagrid-invalid-border-color` | `color.danger.solid` | `#b3261a` |
+| `datagrid.invalid.border-color` | `--mx-datagrid-invalid-border-color` | `color.danger.solid` | `#b03659` |
 | `datagrid.placeholder.bg` | `--mx-datagrid-placeholder-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
 | `datagrid.placeholder.radius` | `--mx-datagrid-placeholder-radius` | `radius.sm` | `0.25rem` |
 | `datagrid.header-cell.padding-inline` | `--mx-datagrid-header-cell-padding-inline` | `control.padding.sm` | `0.5rem` |
@@ -1371,11 +1389,11 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `datagrid.ghost-rows.bg` | `--mx-datagrid-ghost-rows-bg` | `color.bg.surface` | `#f8f7f3` |
 | `datagrid.status-mark.font-size` | `--mx-datagrid-status-mark-font-size` | `font.size.caption` | `0.75rem` |
 | `datagrid.status-mark.font-weight` | `--mx-datagrid-status-mark-font-weight` | `font.weight.bold` | `700` |
-| `datagrid.status-symbol.new.color` | `--mx-datagrid-status-symbol-new-color` | `color.success.fg` | `#0c6a0c` |
+| `datagrid.status-symbol.new.color` | `--mx-datagrid-status-symbol-new-color` | `color.success.fg` | `#006402` |
 | `datagrid.status-symbol.changed.color` | `--mx-datagrid-status-symbol-changed-color` | `color.accent.fg` | `#983318` |
 | `datagrid.status-symbol.removed.color` | `--mx-datagrid-status-symbol-removed-color` | `color.fg.secondary` | `#5e5c55` |
 | `datagrid.status-symbol.saving.color` | `--mx-datagrid-status-symbol-saving-color` | `color.accent.fg` | `#983318` |
-| `datagrid.status-symbol.failed.color` | `--mx-datagrid-status-symbol-failed-color` | `color.danger.fg` | `#b3261a` |
+| `datagrid.status-symbol.failed.color` | `--mx-datagrid-status-symbol-failed-color` | `color.danger.fg` | `#b03659` |
 | `datagrid.check.size` | `--mx-datagrid-check-size` | `` | `0.875rem` |
 | `datagrid.check.bg` | `--mx-datagrid-check-bg` | `color.fill.control.default` | `#f5f4f0` |
 | `datagrid.check.border-width` | `--mx-datagrid-check-border-width` | `border.width.1` | `1px` |
@@ -1426,7 +1444,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `datagrid.form.padding` | `--mx-datagrid-form-padding` | `space.3` | `0.75rem` |
 | `datagrid.form.gap` | `--mx-datagrid-form-gap` | `space.3` | `0.75rem` |
 | `datagrid.form.popup.padding` | `--mx-datagrid-form-popup-padding` | `` | `0px` |
-| `datagrid.form-message.color` | `--mx-datagrid-form-message-color` | `color.danger.fg` | `#b3261a` |
+| `datagrid.form-message.color` | `--mx-datagrid-form-message-color` | `color.danger.fg` | `#b03659` |
 | `datagrid.form-buttons.gap` | `--mx-datagrid-form-buttons-gap` | `space.3` | `0.75rem` |
 | `datagrid.form-label.color` | `--mx-datagrid-form-label-color` | `color.fg.secondary` | `#5e5c55` |
 | `datagrid.form-label.font-size` | `--mx-datagrid-form-label-font-size` | `font.size.caption` | `0.75rem` |
@@ -1440,9 +1458,9 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `datagrid.state.padding-inline` | `--mx-datagrid-state-padding-inline` | `space.3` | `0.75rem` |
 | `datagrid.state.gap` | `--mx-datagrid-state-gap` | `space.2` | `0.5rem` |
 | `datagrid.state.color` | `--mx-datagrid-state-color` | `color.fg.secondary` | `#5e5c55` |
-| `datagrid.state.danger.color` | `--mx-datagrid-state-danger-color` | `color.danger.fg` | `#b3261a` |
+| `datagrid.state.danger.color` | `--mx-datagrid-state-danger-color` | `color.danger.fg` | `#b03659` |
 | `datagrid.note.gap` | `--mx-datagrid-note-gap` | `space.2` | `0.5rem` |
-| `datagrid.note.danger.color` | `--mx-datagrid-note-danger-color` | `color.danger.fg` | `#b3261a` |
+| `datagrid.note.danger.color` | `--mx-datagrid-note-danger-color` | `color.danger.fg` | `#b03659` |
 | `datagrid.load-more.margin-bottom` | `--mx-datagrid-load-more-margin-bottom` | `space.2` | `0.5rem` |
 | `datagrid.load-more.padding-block` | `--mx-datagrid-load-more-padding-block` | `space.1` | `0.25rem` |
 | `datagrid.load-more.padding-inline` | `--mx-datagrid-load-more-padding-inline` | `space.3` | `0.75rem` |
@@ -1453,7 +1471,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `datagrid.load-more.radius` | `--mx-datagrid-load-more-radius` | `radius.sm` | `0.25rem` |
 | `datagrid.load-more.shadow` | `--mx-datagrid-load-more-shadow` | `elevation.popup` | `0px 8px 16px 0px rgb(0 0 0 / 0.14), 0px 0px 2px 0px rgb(0 0 0 / 0.12)` |
 | `datagrid.load-more.color` | `--mx-datagrid-load-more-color` | `color.fg.secondary` | `#5e5c55` |
-| `datagrid.load-more.failed.color` | `--mx-datagrid-load-more-failed-color` | `color.danger.fg` | `#b3261a` |
+| `datagrid.load-more.failed.color` | `--mx-datagrid-load-more-failed-color` | `color.danger.fg` | `#b03659` |
 | `datagrid.export-panel.padding` | `--mx-datagrid-export-panel-padding` | `space.3` | `0.75rem` |
 | `datagrid.export-panel.gap` | `--mx-datagrid-export-panel-gap` | `space.3` | `0.75rem` |
 | `datagrid.export-panel.bg` | `--mx-datagrid-export-panel-bg` | `color.bg.surface` | `#f8f7f3` |
@@ -1496,8 +1514,8 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `datagrid.page-sizes.margin-end` | `--mx-datagrid-page-sizes-margin-end` | `space.2` | `0.5rem` |
 | `datagrid.page-gap.padding-inline` | `--mx-datagrid-page-gap-padding-inline` | `space.1` | `0.25rem` |
 | `datagrid.page-info.margin-end` | `--mx-datagrid-page-info-margin-end` | `space.2` | `0.5rem` |
-| `datagrid.tip.error.border-color` | `--mx-datagrid-tip-error-border-color` | `color.danger.solid` | `#b3261a` |
-| `datagrid.tip.error.color` | `--mx-datagrid-tip-error-color` | `color.danger.fg` | `#b3261a` |
+| `datagrid.tip.error.border-color` | `--mx-datagrid-tip-error-border-color` | `color.danger.solid` | `#b03659` |
+| `datagrid.tip.error.color` | `--mx-datagrid-tip-error-color` | `color.danger.fg` | `#b03659` |
 | `date-box.popup-gap` | `--mx-date-box-popup-gap` | `space.1` | `0.25rem` |
 | `date-box.calendar.container.padding` | `--mx-date-box-calendar-container-padding` | `space.2` | `0.5rem` |
 | `date-box.times.min-width` | `--mx-date-box-times-min-width` | `` | `6rem` |
@@ -1509,6 +1527,22 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `date-box.times.beside.padding-start` | `--mx-date-box-times-beside-padding-start` | `space.1` | `0.25rem` |
 | `date-box.times.beside.border-start-width` | `--mx-date-box-times-beside-border-start-width` | `border.width.1` | `1px` |
 | `date-box.times.beside.border-start-color` | `--mx-date-box-times-beside-border-start-color` | `color.stroke.divider` | `rgb(0 0 0 / 0.1)` |
+| `date-range-box.popup-gap` | `--mx-date-range-box-popup-gap` | `space.1` | `0.25rem` |
+| `date-range-box.field.width` | `--mx-date-range-box-field-width` | `` | `20rem` |
+| `date-range-box.calendar.container.padding` | `--mx-date-range-box-calendar-container-padding` | `space.2` | `0.5rem` |
+| `date-range-box.separator.icon` | `--mx-date-range-box-separator-icon` | `` | `var(--mx-icon-dash)` |
+| `date-range-box.separator.bg` | `--mx-date-range-box-separator-bg` | `color.fg.tertiary` | `#8c8a82` |
+| `date-range-box.separator.size` | `--mx-date-range-box-separator-size` | `` | `1rem` |
+| `date-range-box.separator.margin-inline` | `--mx-date-range-box-separator-margin-inline` | `space.1` | `0.25rem` |
+| `date-range-box.presets.min-width` | `--mx-date-range-box-presets-min-width` | `` | `9rem` |
+| `date-range-box.presets.max-height` | `--mx-date-range-box-presets-max-height` | `` | `18rem` |
+| `date-range-box.presets.focus.outline-width` | `--mx-date-range-box-presets-focus-outline-width` | `focus.ring.width` | `2px` |
+| `date-range-box.presets.focus.outline-color` | `--mx-date-range-box-presets-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
+| `date-range-box.presets.focus.outline-offset` | `--mx-date-range-box-presets-focus-outline-offset` | `` | `calc(-1 * 2px)` |
+| `date-range-box.presets.focus.glow` | `--mx-date-range-box-presets-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
+| `date-range-box.presets.beside.padding-start` | `--mx-date-range-box-presets-beside-padding-start` | `space.1` | `0.25rem` |
+| `date-range-box.presets.beside.border-start-width` | `--mx-date-range-box-presets-beside-border-start-width` | `border.width.1` | `1px` |
+| `date-range-box.presets.beside.border-start-color` | `--mx-date-range-box-presets-beside-border-start-color` | `color.stroke.divider` | `rgb(0 0 0 / 0.1)` |
 | `disabled.element.color` | `--mx-disabled-element-color` | `color.fg.disabled` | `#a2a098` |
 | `drawer.font-family` | `--mx-drawer-font-family` | `font.family.sans` | `Archivo, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif` |
 | `drawer.size` | `--mx-drawer-size` | `` | `20rem` |
@@ -1586,11 +1620,19 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `drop-down.search.variant` | `--mx-drop-down-search-variant` | `` | `outline` |
 | `drop-down.search.size` | `--mx-drop-down-search-size` | `` | `sm` |
 | `drop-down.value.placeholder.color` | `--mx-drop-down-value-placeholder-color` | `color.fg.secondary` | `#5e5c55` |
+| `drop-down.value.missing.color` | `--mx-drop-down-value-missing-color` | `color.fg.secondary` | `#5e5c55` |
+| `drop-down.value.missing.text-decoration` | `--mx-drop-down-value-missing-text-decoration` | `` | `underline` |
 | `drop-down.chevron.size` | `--mx-drop-down-chevron-size` | `icon.size.sm` | `0.75rem` |
 | `drop-down.chevron.color` | `--mx-drop-down-chevron-color` | `color.fg.secondary` | `#5e5c55` |
 | `drop-down.chevron.icon` | `--mx-drop-down-chevron-icon` | `` | `var(--mx-icon-chevron-down)` |
 | `drop-down.chevron.open.rotate` | `--mx-drop-down-chevron-open-rotate` | `` | `0.5turn` |
 | `drop-down.chevron.disabled.color` | `--mx-drop-down-chevron-disabled-color` | `color.fg.disabled` | `#a2a098` |
+| `drop-down.spinner.size` | `--mx-drop-down-spinner-size` | `icon.size.sm` | `0.75rem` |
+| `drop-down.spinner.border-width` | `--mx-drop-down-spinner-border-width` | `border.width.2` | `2px` |
+| `drop-down.spinner.border-end-color` | `--mx-drop-down-spinner-border-end-color` | `` | `rgb(0 0 0 / 0)` |
+| `drop-down.spinner.radius` | `--mx-drop-down-spinner-radius` | `radius.full` | `9999px` |
+| `drop-down.spinner.color` | `--mx-drop-down-spinner-color` | `color.fg.secondary` | `#5e5c55` |
+| `drop-down.spinner-shape.display` | `--mx-drop-down-spinner-shape-display` | `` | `initial` |
 | `field.width` | `--mx-field-width` | `` | `16rem` |
 | `field.variant` | `--mx-field-variant` | `` | `outline` |
 | `field.label-mode` | `--mx-field-label-mode` | `` | `top` |
@@ -1669,11 +1711,13 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `field.box.underline-readonly-invalid-focus.shadow` | `--mx-field-box-underline-readonly-invalid-focus-shadow` | `` | `initial` |
 | `field.box.pressed.bg` | `--mx-field-box-pressed-bg` | `` | `initial` |
 | `field.box.pressed.color` | `--mx-field-box-pressed-color` | `` | `initial` |
+| `field.box.border-style` | `--mx-field-box-border-style` | `` | `initial` |
+| `field.box.border-color` | `--mx-field-box-border-color` | `` | `initial` |
 | `field.frame.border-color` | `--mx-field-frame-border-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `field.frame.focus.border-bottom-color` | `--mx-field-frame-focus-border-bottom-color` | `color.accent.solid` | `#c24523` |
 | `field.frame.focus.border-color` | `--mx-field-frame-focus-border-color` | `` | `initial` |
 | `field.frame.focus.border-width` | `--mx-field-frame-focus-border-width` | `` | `initial` |
-| `field.frame.invalid.border-color` | `--mx-field-frame-invalid-border-color` | `color.danger.solid` | `#b3261a` |
+| `field.frame.invalid.border-color` | `--mx-field-frame-invalid-border-color` | `color.danger.solid` | `#b03659` |
 | `field.frame.readonly-focus.border-bottom-color` | `--mx-field-frame-readonly-focus-border-bottom-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `field.frame.readonly-focus.border-width` | `--mx-field-frame-readonly-focus-border-width` | `` | `initial` |
 | `field.frame.filled.border-color` | `--mx-field-frame-filled-border-color` | `` | `rgb(0 0 0 / 0)` |
@@ -1681,7 +1725,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `field.frame.filled-focus.border-bottom-color` | `--mx-field-frame-filled-focus-border-bottom-color` | `color.accent.solid` | `#c24523` |
 | `field.frame.filled-focus.border-color` | `--mx-field-frame-filled-focus-border-color` | `` | `initial` |
 | `field.frame.filled-focus.border-width` | `--mx-field-frame-filled-focus-border-width` | `` | `initial` |
-| `field.frame.filled-invalid.border-color` | `--mx-field-frame-filled-invalid-border-color` | `color.danger.solid` | `#b3261a` |
+| `field.frame.filled-invalid.border-color` | `--mx-field-frame-filled-invalid-border-color` | `color.danger.solid` | `#b03659` |
 | `field.frame.filled-readonly-focus.border-bottom-color` | `--mx-field-frame-filled-readonly-focus-border-bottom-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `field.frame.filled-readonly-focus.border-width` | `--mx-field-frame-filled-readonly-focus-border-width` | `` | `initial` |
 | `field.frame.filled-disabled.border-color` | `--mx-field-frame-filled-disabled-border-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
@@ -1689,7 +1733,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `field.frame.underline.border-bottom-color` | `--mx-field-frame-underline-border-bottom-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `field.frame.underline-focus.border-bottom-color` | `--mx-field-frame-underline-focus-border-bottom-color` | `color.accent.solid` | `#c24523` |
 | `field.frame.underline-focus.border-width` | `--mx-field-frame-underline-focus-border-width` | `` | `initial` |
-| `field.frame.underline-invalid.border-bottom-color` | `--mx-field-frame-underline-invalid-border-bottom-color` | `color.danger.solid` | `#b3261a` |
+| `field.frame.underline-invalid.border-bottom-color` | `--mx-field-frame-underline-invalid-border-bottom-color` | `color.danger.solid` | `#b03659` |
 | `field.frame.underline-readonly-focus.border-bottom-color` | `--mx-field-frame-underline-readonly-focus-border-bottom-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `field.frame.underline-readonly-focus.border-width` | `--mx-field-frame-underline-readonly-focus-border-width` | `` | `initial` |
 | `field.frame.underline-disabled.border-color` | `--mx-field-frame-underline-disabled-border-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
@@ -1718,14 +1762,14 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `field.frame.display` | `--mx-field-frame-display` | `` | `initial` |
 | `field.indicator.radius` | `--mx-field-indicator-radius` | `` | `calc(0.375rem - 1px)` |
 | `field.indicator.focus.shadow` | `--mx-field-indicator-focus-shadow` | `` | `inset 0 -1px 0 0 #c24523` |
-| `field.indicator.invalid-focus.shadow` | `--mx-field-indicator-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 #b3261a` |
+| `field.indicator.invalid-focus.shadow` | `--mx-field-indicator-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 #b03659` |
 | `field.indicator.readonly-focus.shadow` | `--mx-field-indicator-readonly-focus-shadow` | `` | `inset 0 -1px 0 0 rgb(0 0 0 / 0.4458)` |
 | `field.indicator.filled-focus.shadow` | `--mx-field-indicator-filled-focus-shadow` | `` | `inset 0 -1px 0 0 #c24523` |
-| `field.indicator.filled-invalid-focus.shadow` | `--mx-field-indicator-filled-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 #b3261a` |
+| `field.indicator.filled-invalid-focus.shadow` | `--mx-field-indicator-filled-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 #b03659` |
 | `field.indicator.filled-readonly-focus.shadow` | `--mx-field-indicator-filled-readonly-focus-shadow` | `` | `inset 0 -1px 0 0 rgb(0 0 0 / 0.4458)` |
 | `field.indicator.underline.radius` | `--mx-field-indicator-underline-radius` | `` | `0px` |
 | `field.indicator.underline-focus.shadow` | `--mx-field-indicator-underline-focus-shadow` | `` | `inset 0 -1px 0 0 #c24523` |
-| `field.indicator.underline-invalid-focus.shadow` | `--mx-field-indicator-underline-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 #b3261a` |
+| `field.indicator.underline-invalid-focus.shadow` | `--mx-field-indicator-underline-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 #b03659` |
 | `field.indicator.underline-readonly-focus.shadow` | `--mx-field-indicator-underline-readonly-focus-shadow` | `` | `inset 0 -1px 0 0 rgb(0 0 0 / 0.4458)` |
 | `field.indicator.readonly-invalid-focus.shadow` | `--mx-field-indicator-readonly-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 rgb(0 0 0 / 0.4458)` |
 | `field.indicator.filled-readonly-invalid-focus.shadow` | `--mx-field-indicator-filled-readonly-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 rgb(0 0 0 / 0.4458)` |
@@ -1741,7 +1785,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `field.label.floating-focus.color` | `--mx-field-label-floating-focus-color` | `` | `initial` |
 | `field.label.floating-invalid.color` | `--mx-field-label-floating-invalid-color` | `` | `initial` |
 | `field.required.margin-start` | `--mx-field-required-margin-start` | `space.1` | `0.25rem` |
-| `field.required.color` | `--mx-field-required-color` | `color.danger.fg` | `#b3261a` |
+| `field.required.color` | `--mx-field-required-color` | `color.danger.fg` | `#b03659` |
 | `field.icon.color` | `--mx-field-icon-color` | `color.fg.secondary` | `#5e5c55` |
 | `field.prefix.color` | `--mx-field-prefix-color` | `color.fg.secondary` | `#5e5c55` |
 | `field.suffix.color` | `--mx-field-suffix-color` | `color.fg.secondary` | `#5e5c55` |
@@ -1766,7 +1810,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `field.foot.color` | `--mx-field-foot-color` | `color.fg.secondary` | `#5e5c55` |
 | `field.foot.shown.padding-top` | `--mx-field-foot-shown-padding-top` | `space.1` | `0.25rem` |
 | `field.foot.display` | `--mx-field-foot-display` | `` | `initial` |
-| `field.message.invalid.color` | `--mx-field-message-invalid-color` | `color.danger.fg` | `#b3261a` |
+| `field.message.invalid.color` | `--mx-field-message-invalid-color` | `color.danger.fg` | `#b03659` |
 | `field.frame-start.focus.border-block-width` | `--mx-field-frame-start-focus-border-block-width` | `` | `initial` |
 | `field.frame-start.focus.border-start-width` | `--mx-field-frame-start-focus-border-start-width` | `` | `initial` |
 | `field.frame-start.invalid-focus.border-block-width` | `--mx-field-frame-start-invalid-focus-border-block-width` | `` | `initial` |
@@ -1787,6 +1831,71 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `field.frame-end.readonly-focus.border-end-width` | `--mx-field-frame-end-readonly-focus-border-end-width` | `` | `initial` |
 | `field.frame-end.readonly-invalid-focus.border-block-width` | `--mx-field-frame-end-readonly-invalid-focus-border-block-width` | `` | `initial` |
 | `field.frame-end.readonly-invalid-focus.border-end-width` | `--mx-field-frame-end-readonly-invalid-focus-border-end-width` | `` | `initial` |
+| `file-uploader.box-gap` | `--mx-file-uploader-box-gap` | `space.3` | `0.75rem` |
+| `file-uploader.button-gap` | `--mx-file-uploader-button-gap` | `space.2` | `0.5rem` |
+| `file-uploader.item-gap` | `--mx-file-uploader-item-gap` | `space.2` | `0.5rem` |
+| `file-uploader.field.width` | `--mx-file-uploader-field-width` | `` | `26rem` |
+| `file-uploader.field.box.border-style` | `--mx-file-uploader-field-box-border-style` | `` | `dashed` |
+| `file-uploader.field.box.border-color` | `--mx-file-uploader-field-box-border-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
+| `file-uploader.field.box.radius` | `--mx-file-uploader-field-box-radius` | `radius.lg` | `0.625rem` |
+| `file-uploader.field.box.hover.bg` | `--mx-file-uploader-field-box-hover-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
+| `file-uploader.field.border-width` | `--mx-file-uploader-field-border-width` | `border.width.1` | `1px` |
+| `file-uploader.field.padding.sm` | `--mx-file-uploader-field-padding-sm` | `space.2` | `0.5rem` |
+| `file-uploader.field.padding.md` | `--mx-file-uploader-field-padding-md` | `space.3` | `0.75rem` |
+| `file-uploader.field.padding.lg` | `--mx-file-uploader-field-padding-lg` | `space.4` | `1rem` |
+| `file-uploader.action.variant` | `--mx-file-uploader-action-variant` | `` | `ghost` |
+| `file-uploader.over.bg` | `--mx-file-uploader-over-bg` | `color.accent.subtle` | `#fbe6de` |
+| `file-uploader.over.border-color` | `--mx-file-uploader-over-border-color` | `color.accent.solid` | `#c24523` |
+| `file-uploader.select.padding-block` | `--mx-file-uploader-select-padding-block` | `space.1` | `0.25rem` |
+| `file-uploader.select.padding-inline` | `--mx-file-uploader-select-padding-inline` | `space.3` | `0.75rem` |
+| `file-uploader.select.radius` | `--mx-file-uploader-select-radius` | `radius.sm` | `0.25rem` |
+| `file-uploader.select.color` | `--mx-file-uploader-select-color` | `color.fg.primary` | `#1d1c1a` |
+| `file-uploader.select.font-weight` | `--mx-file-uploader-select-font-weight` | `font.weight.semibold` | `600` |
+| `file-uploader.select.bg` | `--mx-file-uploader-select-bg` | `color.fill.control.default` | `#f5f4f0` |
+| `file-uploader.select.border-width` | `--mx-file-uploader-select-border-width` | `border.width.1` | `1px` |
+| `file-uploader.select.border-color` | `--mx-file-uploader-select-border-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
+| `file-uploader.select.hover.bg` | `--mx-file-uploader-select-hover-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
+| `file-uploader.select.hover.cursor` | `--mx-file-uploader-select-hover-cursor` | `` | `pointer` |
+| `file-uploader.select.pressed.bg` | `--mx-file-uploader-select-pressed-bg` | `color.fill.subtle.tertiary` | `rgb(0 0 0 / 0.0241)` |
+| `file-uploader.select.focus.glow` | `--mx-file-uploader-select-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
+| `file-uploader.select.focus.outline-width` | `--mx-file-uploader-select-focus-outline-width` | `focus.ring.width` | `2px` |
+| `file-uploader.select.focus.outline-color` | `--mx-file-uploader-select-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
+| `file-uploader.select.focus.outline-offset` | `--mx-file-uploader-select-focus-outline-offset` | `focus.ring.offset` | `1px` |
+| `file-uploader.select.disabled.color` | `--mx-file-uploader-select-disabled-color` | `color.fg.disabled` | `#a2a098` |
+| `file-uploader.select.disabled.border-color` | `--mx-file-uploader-select-disabled-border-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
+| `file-uploader.upload.padding-block` | `--mx-file-uploader-upload-padding-block` | `space.1` | `0.25rem` |
+| `file-uploader.upload.padding-inline` | `--mx-file-uploader-upload-padding-inline` | `space.3` | `0.75rem` |
+| `file-uploader.upload.radius` | `--mx-file-uploader-upload-radius` | `radius.sm` | `0.25rem` |
+| `file-uploader.upload.color` | `--mx-file-uploader-upload-color` | `color.accent.on-solid` | `#ffffff` |
+| `file-uploader.upload.font-weight` | `--mx-file-uploader-upload-font-weight` | `font.weight.semibold` | `600` |
+| `file-uploader.upload.bg` | `--mx-file-uploader-upload-bg` | `color.accent.solid` | `#c24523` |
+| `file-uploader.upload.border-width` | `--mx-file-uploader-upload-border-width` | `border.width.1` | `1px` |
+| `file-uploader.upload.border-color` | `--mx-file-uploader-upload-border-color` | `color.accent.solid` | `#c24523` |
+| `file-uploader.upload.hover.bg` | `--mx-file-uploader-upload-hover-bg` | `color.accent.solid-hover` | `#b43f20` |
+| `file-uploader.upload.hover.cursor` | `--mx-file-uploader-upload-hover-cursor` | `` | `pointer` |
+| `file-uploader.upload.pressed.bg` | `--mx-file-uploader-upload-pressed-bg` | `color.accent.solid-hover` | `#b43f20` |
+| `file-uploader.upload.focus.glow` | `--mx-file-uploader-upload-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
+| `file-uploader.upload.focus.outline-width` | `--mx-file-uploader-upload-focus-outline-width` | `focus.ring.width` | `2px` |
+| `file-uploader.upload.focus.outline-color` | `--mx-file-uploader-upload-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
+| `file-uploader.upload.focus.outline-offset` | `--mx-file-uploader-upload-focus-outline-offset` | `focus.ring.offset` | `1px` |
+| `file-uploader.hint.color` | `--mx-file-uploader-hint-color` | `color.fg.secondary` | `#5e5c55` |
+| `file-uploader.list.margin-top` | `--mx-file-uploader-list-margin-top` | `space.2` | `0.5rem` |
+| `file-uploader.list.gap` | `--mx-file-uploader-list-gap` | `space.1` | `0.25rem` |
+| `file-uploader.item.padding-block` | `--mx-file-uploader-item-padding-block` | `space.1` | `0.25rem` |
+| `file-uploader.item.padding-inline` | `--mx-file-uploader-item-padding-inline` | `space.2` | `0.5rem` |
+| `file-uploader.item.radius` | `--mx-file-uploader-item-radius` | `radius.sm` | `0.25rem` |
+| `file-uploader.item.error.bg` | `--mx-file-uploader-item-error-bg` | `color.danger.subtle` | `#fde7e9` |
+| `file-uploader.item.invalid.bg` | `--mx-file-uploader-item-invalid-bg` | `color.danger.subtle` | `#fde7e9` |
+| `file-uploader.icon.icon` | `--mx-file-uploader-icon-icon` | `` | `var(--mx-icon-file)` |
+| `file-uploader.icon.bg` | `--mx-file-uploader-icon-bg` | `color.fg.secondary` | `#5e5c55` |
+| `file-uploader.icon.size` | `--mx-file-uploader-icon-size` | `` | `1.25rem` |
+| `file-uploader.name.color` | `--mx-file-uploader-name-color` | `color.fg.primary` | `#1d1c1a` |
+| `file-uploader.size.color` | `--mx-file-uploader-size-color` | `color.fg.secondary` | `#5e5c55` |
+| `file-uploader.size.font-size` | `--mx-file-uploader-size-font-size` | `font.size.caption` | `0.75rem` |
+| `file-uploader.state.color` | `--mx-file-uploader-state-color` | `color.fg.secondary` | `#5e5c55` |
+| `file-uploader.state.font-size` | `--mx-file-uploader-state-font-size` | `font.size.caption` | `0.75rem` |
+| `file-uploader.state.done.color` | `--mx-file-uploader-state-done-color` | `color.success.fg` | `#006402` |
+| `file-uploader.state.error.color` | `--mx-file-uploader-state-error-color` | `color.danger.fg` | `#b03659` |
 | `filterbuilder.indent` | `--mx-filterbuilder-indent` | `space.6` | `1.5rem` |
 | `filterbuilder.line-width` | `--mx-filterbuilder-line-width` | `border.width.1` | `1px` |
 | `filterbuilder.line-color` | `--mx-filterbuilder-line-color` | `color.stroke.divider` | `rgb(0 0 0 / 0.1)` |
@@ -1953,7 +2062,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `listbox.field.frame.disabled.border-color` | `--mx-listbox-field-frame-disabled-border-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `listbox.field.indicator.radius` | `--mx-listbox-field-indicator-radius` | `` | `calc(0.375rem - 1px)` |
 | `listbox.field.indicator.focus.shadow` | `--mx-listbox-field-indicator-focus-shadow` | `` | `inset 0 -1px 0 0 #c24523` |
-| `listbox.field.indicator.invalid-focus.shadow` | `--mx-listbox-field-indicator-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 #b3261a` |
+| `listbox.field.indicator.invalid-focus.shadow` | `--mx-listbox-field-indicator-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 #b03659` |
 | `listbox.field.indicator.readonly-focus.shadow` | `--mx-listbox-field-indicator-readonly-focus-shadow` | `` | `inset 0 -1px 0 0 rgb(0 0 0 / 0.4458)` |
 | `listbox.field.indicator.readonly-invalid-focus.shadow` | `--mx-listbox-field-indicator-readonly-invalid-focus-shadow` | `` | `inset 0 -1px 0 0 rgb(0 0 0 / 0.4458)` |
 | `listbox.search.variant` | `--mx-listbox-search-variant` | `` | `outline` |
@@ -1984,6 +2093,20 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `listbox.keys.outline-offset` | `--mx-listbox-keys-outline-offset` | `` | `calc(-1 * 2px)` |
 | `listbox.idle.bg` | `--mx-listbox-idle-bg` | `` | `rgb(0 0 0 / 0)` |
 | `listbox.container.margin` | `--mx-listbox-container-margin` | `` | `initial` |
+| `load-panel.padding` | `--mx-load-panel-padding` | `space.4` | `1rem` |
+| `load-panel.gap` | `--mx-load-panel-gap` | `space.3` | `0.75rem` |
+| `load-panel.cancel.variant` | `--mx-load-panel-cancel-variant` | `` | `outline` |
+| `load-panel.shade.shaded.bg` | `--mx-load-panel-shade-shaded-bg` | `color.bg.smoke` | `rgb(0 0 0 / 0.3)` |
+| `load-panel.pane.shown.bg` | `--mx-load-panel-pane-shown-bg` | `color.bg.surface` | `#f8f7f3` |
+| `load-panel.pane.shown.border-width` | `--mx-load-panel-pane-shown-border-width` | `border.width.1` | `1px` |
+| `load-panel.pane.shown.border-color` | `--mx-load-panel-pane-shown-border-color` | `color.stroke.surface` | `rgb(117 117 117 / 0.4)` |
+| `load-panel.pane.shown.radius` | `--mx-load-panel-pane-shown-radius` | `radius.lg` | `0.625rem` |
+| `load-panel.pane.shown.shadow` | `--mx-load-panel-pane-shown-shadow` | `elevation.popup` | `0px 8px 16px 0px rgb(0 0 0 / 0.14), 0px 0px 2px 0px rgb(0 0 0 / 0.12)` |
+| `load-panel.pane.shown.padding-block` | `--mx-load-panel-pane-shown-padding-block` | `space.4` | `1rem` |
+| `load-panel.pane.shown.padding-inline` | `--mx-load-panel-pane-shown-padding-inline` | `space.5` | `1.25rem` |
+| `load-panel.pane.shown.min-width` | `--mx-load-panel-pane-shown-min-width` | `` | `10rem` |
+| `load-panel.message.color` | `--mx-load-panel-message-color` | `color.fg.primary` | `#1d1c1a` |
+| `load-panel.message.font-size` | `--mx-load-panel-message-font-size` | `font.size.body` | `0.875rem` |
 | `lookup.popup-width` | `--mx-lookup-popup-width` | `` | `28rem` |
 | `lookup.column-gap` | `--mx-lookup-column-gap` | `space.3` | `0.75rem` |
 | `lookup.header.padding-block` | `--mx-lookup-header-padding-block` | `space.1` | `0.25rem` |
@@ -2010,9 +2133,9 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `menu.item.focus.outline-offset` | `--mx-menu-item-focus-outline-offset` | `focus.ring.offset` | `1px` |
 | `menu.item.disabled.color` | `--mx-menu-item-disabled-color` | `color.fg.disabled` | `#a2a098` |
 | `menu.item.accent.color` | `--mx-menu-item-accent-color` | `color.accent.fg` | `#983318` |
-| `menu.item.success.color` | `--mx-menu-item-success-color` | `color.success.fg` | `#0c6a0c` |
-| `menu.item.caution.color` | `--mx-menu-item-caution-color` | `color.caution.fg` | `#845000` |
-| `menu.item.danger.color` | `--mx-menu-item-danger-color` | `color.danger.fg` | `#b3261a` |
+| `menu.item.success.color` | `--mx-menu-item-success-color` | `color.success.fg` | `#006402` |
+| `menu.item.caution.color` | `--mx-menu-item-caution-color` | `color.caution.fg` | `#754702` |
+| `menu.item.danger.color` | `--mx-menu-item-danger-color` | `color.danger.fg` | `#b03659` |
 | `menu.item.checked.bg` | `--mx-menu-item-checked-bg` | `` | `initial` |
 | `menu.item.first.radius-top` | `--mx-menu-item-first-radius-top` | `` | `initial` |
 | `menu.item.last.radius-bottom` | `--mx-menu-item-last-radius-bottom` | `` | `initial` |
@@ -2021,9 +2144,9 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `menu.check.disabled.color` | `--mx-menu-check-disabled-color` | `` | `initial` |
 | `menu.icon.size` | `--mx-menu-icon-size` | `icon.size.md` | `1rem` |
 | `menu.icon.accent.color` | `--mx-menu-icon-accent-color` | `color.accent.fg` | `#983318` |
-| `menu.icon.success.color` | `--mx-menu-icon-success-color` | `color.success.fg` | `#0c6a0c` |
-| `menu.icon.caution.color` | `--mx-menu-icon-caution-color` | `color.caution.fg` | `#845000` |
-| `menu.icon.danger.color` | `--mx-menu-icon-danger-color` | `color.danger.fg` | `#b3261a` |
+| `menu.icon.success.color` | `--mx-menu-icon-success-color` | `color.success.fg` | `#006402` |
+| `menu.icon.caution.color` | `--mx-menu-icon-caution-color` | `color.caution.fg` | `#754702` |
+| `menu.icon.danger.color` | `--mx-menu-icon-danger-color` | `color.danger.fg` | `#b03659` |
 | `menu.icon.color` | `--mx-menu-icon-color` | `` | `initial` |
 | `menu.icon.disabled.color` | `--mx-menu-icon-disabled-color` | `` | `initial` |
 | `menu.check-mark.icon` | `--mx-menu-check-mark-icon` | `` | `var(--mx-icon-check)` |
@@ -2090,6 +2213,36 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `pagination.info.color` | `--mx-pagination-info-color` | `color.fg.secondary` | `#5e5c55` |
 | `pagination.info.font-size` | `--mx-pagination-info-font-size` | `font.size.body` | `0.875rem` |
 | `pagination.info.padding-inline` | `--mx-pagination-info-padding-inline` | `space.2` | `0.5rem` |
+| `popover.offset` | `--mx-popover-offset` | `space.2` | `0.5rem` |
+| `popover.enter-offset` | `--mx-popover-enter-offset` | `` | `4px` |
+| `popover.header-gap` | `--mx-popover-header-gap` | `space.2` | `0.5rem` |
+| `popover.close.variant` | `--mx-popover-close-variant` | `` | `ghost` |
+| `popover.surface.bg` | `--mx-popover-surface-bg` | `color.bg.surface` | `#f8f7f3` |
+| `popover.surface.border-width` | `--mx-popover-surface-border-width` | `border.width.1` | `1px` |
+| `popover.surface.border-color` | `--mx-popover-surface-border-color` | `color.stroke.surface` | `rgb(117 117 117 / 0.4)` |
+| `popover.surface.radius` | `--mx-popover-surface-radius` | `radius.lg` | `0.625rem` |
+| `popover.surface.shadow` | `--mx-popover-surface-shadow` | `elevation.popup` | `0px 8px 16px 0px rgb(0 0 0 / 0.14), 0px 0px 2px 0px rgb(0 0 0 / 0.12)` |
+| `popover.surface.color` | `--mx-popover-surface-color` | `color.fg.primary` | `#1d1c1a` |
+| `popover.surface.font-size` | `--mx-popover-surface-font-size` | `font.size.body` | `0.875rem` |
+| `popover.surface.line-height` | `--mx-popover-surface-line-height` | `font.line.body` | `1.25rem` |
+| `popover.surface.max-width` | `--mx-popover-surface-max-width` | `` | `24rem` |
+| `popover.surface.focus.glow` | `--mx-popover-surface-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
+| `popover.surface.focus.outline-width` | `--mx-popover-surface-focus-outline-width` | `focus.ring.width` | `2px` |
+| `popover.surface.focus.outline-color` | `--mx-popover-surface-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
+| `popover.surface.focus.outline-offset` | `--mx-popover-surface-focus-outline-offset` | `focus.ring.offset` | `1px` |
+| `popover.arrow.display` | `--mx-popover-arrow-display` | `` | `block` |
+| `popover.arrow.size` | `--mx-popover-arrow-size` | `` | `0.75rem` |
+| `popover.arrow.bg` | `--mx-popover-arrow-bg` | `color.bg.surface` | `#f8f7f3` |
+| `popover.arrow.border-width` | `--mx-popover-arrow-border-width` | `border.width.1` | `1px` |
+| `popover.arrow.border-color` | `--mx-popover-arrow-border-color` | `color.stroke.surface` | `rgb(117 117 117 / 0.4)` |
+| `popover.header.padding-block` | `--mx-popover-header-padding-block` | `space.2` | `0.5rem` |
+| `popover.header.padding-start` | `--mx-popover-header-padding-start` | `space.3` | `0.75rem` |
+| `popover.header.padding-end` | `--mx-popover-header-padding-end` | `space.2` | `0.5rem` |
+| `popover.header.border-bottom-width` | `--mx-popover-header-border-bottom-width` | `border.width.1` | `1px` |
+| `popover.header.border-bottom-color` | `--mx-popover-header-border-bottom-color` | `color.stroke.divider` | `rgb(0 0 0 / 0.1)` |
+| `popover.title.font-weight` | `--mx-popover-title-font-weight` | `font.weight.semibold` | `600` |
+| `popover.title.color` | `--mx-popover-title-color` | `color.fg.primary` | `#1d1c1a` |
+| `popover.body.padding` | `--mx-popover-body-padding` | `space.3` | `0.75rem` |
 | `popup.offset` | `--mx-popup-offset` | `space.1` | `0.25rem` |
 | `popup.list-box.box.bg` | `--mx-popup-list-box-box-bg` | `` | `rgb(0 0 0 / 0)` |
 | `popup.list-box.box.hover.bg` | `--mx-popup-list-box-box-hover-bg` | `` | `rgb(0 0 0 / 0)` |
@@ -2168,11 +2321,11 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `progress.accent-subtle` | `--mx-progress-accent-subtle` | `color.accent.subtle` | `#fbe6de` |
 | `progress.neutral` | `--mx-progress-neutral` | `color.fg.secondary` | `#5e5c55` |
 | `progress.neutral-subtle` | `--mx-progress-neutral-subtle` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
-| `progress.success` | `--mx-progress-success` | `color.success.fg` | `#0c6a0c` |
+| `progress.success` | `--mx-progress-success` | `color.success.fg` | `#006402` |
 | `progress.success-subtle` | `--mx-progress-success-subtle` | `color.success.subtle` | `#dff6dd` |
-| `progress.caution` | `--mx-progress-caution` | `color.caution.fg` | `#845000` |
+| `progress.caution` | `--mx-progress-caution` | `color.caution.fg` | `#754702` |
 | `progress.caution-subtle` | `--mx-progress-caution-subtle` | `color.caution.subtle` | `#fff4ce` |
-| `progress.danger` | `--mx-progress-danger` | `color.danger.solid` | `#b3261a` |
+| `progress.danger` | `--mx-progress-danger` | `color.danger.solid` | `#b03659` |
 | `progress.danger-subtle` | `--mx-progress-danger-subtle` | `color.danger.subtle` | `#fde7e9` |
 | `progress.track.bg` | `--mx-progress-track-bg` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `progress.track.radius` | `--mx-progress-track-radius` | `radius.full` | `9999px` |
@@ -2248,21 +2401,21 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `radiogroup.circle.checked.bg` | `--mx-radiogroup-circle-checked-bg` | `color.accent.solid` | `#c24523` |
 | `radiogroup.circle.checked.border-color` | `--mx-radiogroup-circle-checked-border-color` | `color.accent.solid` | `#c24523` |
 | `radiogroup.circle.checked.shadow` | `--mx-radiogroup-circle-checked-shadow` | `` | `0 1px 0 rgb(0 0 0 / 0.3)` |
-| `radiogroup.circle.invalid.border-color` | `--mx-radiogroup-circle-invalid-border-color` | `color.danger.solid` | `#b3261a` |
-| `radiogroup.circle.invalid.shadow` | `--mx-radiogroup-circle-invalid-shadow` | `` | `inset 0px 1px 0px 0px rgb(255 255 255 / 0.7), 0 1px 0 #b3261a` |
-| `radiogroup.circle.checked-invalid.shadow` | `--mx-radiogroup-circle-checked-invalid-shadow` | `` | `0 1px 0 #b3261a` |
+| `radiogroup.circle.invalid.border-color` | `--mx-radiogroup-circle-invalid-border-color` | `color.danger.solid` | `#b03659` |
+| `radiogroup.circle.invalid.shadow` | `--mx-radiogroup-circle-invalid-shadow` | `` | `inset 0px 1px 0px 0px rgb(255 255 255 / 0.7), 0 1px 0 #b03659` |
+| `radiogroup.circle.checked-invalid.shadow` | `--mx-radiogroup-circle-checked-invalid-shadow` | `` | `0 1px 0 #b03659` |
 | `radiogroup.circle.hover.bg` | `--mx-radiogroup-circle-hover-bg` | `color.fill.control.secondary` | `#ebeae5` |
 | `radiogroup.circle.hover.border-color` | `--mx-radiogroup-circle-hover-border-color` | `` | `initial` |
 | `radiogroup.circle.checked-hover.bg` | `--mx-radiogroup-circle-checked-hover-bg` | `color.accent.solid-hover` | `#b43f20` |
 | `radiogroup.circle.checked-hover.border-color` | `--mx-radiogroup-circle-checked-hover-border-color` | `color.accent.solid-hover` | `#b43f20` |
-| `radiogroup.circle.invalid-hover.border-color` | `--mx-radiogroup-circle-invalid-hover-border-color` | `color.danger.solid` | `#b3261a` |
+| `radiogroup.circle.invalid-hover.border-color` | `--mx-radiogroup-circle-invalid-hover-border-color` | `color.danger.solid` | `#b03659` |
 | `radiogroup.circle.pressed.bg` | `--mx-radiogroup-circle-pressed-bg` | `color.fill.control.tertiary` | `#e1e0da` |
 | `radiogroup.circle.pressed.border-color` | `--mx-radiogroup-circle-pressed-border-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `radiogroup.circle.pressed.shadow` | `--mx-radiogroup-circle-pressed-shadow` | `` | `0 0 #0000` |
 | `radiogroup.circle.checked-pressed.bg` | `--mx-radiogroup-circle-checked-pressed-bg` | `color.accent.solid-hover` | `#b43f20` |
 | `radiogroup.circle.checked-pressed.border-color` | `--mx-radiogroup-circle-checked-pressed-border-color` | `color.accent.solid-hover` | `#b43f20` |
 | `radiogroup.circle.checked-pressed.shadow` | `--mx-radiogroup-circle-checked-pressed-shadow` | `` | `0 0 #0000` |
-| `radiogroup.circle.invalid-pressed.border-color` | `--mx-radiogroup-circle-invalid-pressed-border-color` | `color.danger.solid` | `#b3261a` |
+| `radiogroup.circle.invalid-pressed.border-color` | `--mx-radiogroup-circle-invalid-pressed-border-color` | `color.danger.solid` | `#b03659` |
 | `radiogroup.circle.focus.outline-width` | `--mx-radiogroup-circle-focus-outline-width` | `focus.ring.width` | `2px` |
 | `radiogroup.circle.focus.outline-color` | `--mx-radiogroup-circle-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
 | `radiogroup.circle.focus.outline-offset` | `--mx-radiogroup-circle-focus-outline-offset` | `focus.ring.offset` | `1px` |
@@ -2528,9 +2681,9 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `scheduler.cell.line-hour.border-start-color` | `--mx-scheduler-cell-line-hour-border-start-color` | `color.stroke.divider` | `rgb(0 0 0 / 0.1)` |
 | `scheduler.cell.line-day.border-start-color` | `--mx-scheduler-cell-line-day-border-start-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `scheduler.now.height` | `--mx-scheduler-now-height` | `border.width.2` | `2px` |
-| `scheduler.now.bg` | `--mx-scheduler-now-bg` | `color.danger.solid` | `#b3261a` |
+| `scheduler.now.bg` | `--mx-scheduler-now-bg` | `color.danger.solid` | `#b03659` |
 | `scheduler.now-dot.size` | `--mx-scheduler-now-dot-size` | `` | `0px` |
-| `scheduler.now-dot.bg` | `--mx-scheduler-now-dot-bg` | `color.danger.solid` | `#b3261a` |
+| `scheduler.now-dot.bg` | `--mx-scheduler-now-dot-bg` | `color.danger.solid` | `#b03659` |
 | `scheduler.now-dot.radius` | `--mx-scheduler-now-dot-radius` | `` | `50%` |
 | `scheduler.weekdays.bg` | `--mx-scheduler-weekdays-bg` | `color.bg.surface` | `#f8f7f3` |
 | `scheduler.weekdays.border-bottom-width` | `--mx-scheduler-weekdays-border-bottom-width` | `border.width.1` | `1px` |
@@ -2559,7 +2712,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `scheduler.appointment.draft.cursor` | `--mx-scheduler-appointment-draft-cursor` | `` | `grabbing` |
 | `scheduler.appointment.invalid.outline-style` | `--mx-scheduler-appointment-invalid-outline-style` | `` | `dashed` |
 | `scheduler.appointment.invalid.outline-width` | `--mx-scheduler-appointment-invalid-outline-width` | `border.width.2` | `2px` |
-| `scheduler.appointment.invalid.outline-color` | `--mx-scheduler-appointment-invalid-outline-color` | `color.danger.solid` | `#b3261a` |
+| `scheduler.appointment.invalid.outline-color` | `--mx-scheduler-appointment-invalid-outline-color` | `color.danger.solid` | `#b03659` |
 | `scheduler.appointment.invalid.cursor` | `--mx-scheduler-appointment-invalid-cursor` | `` | `not-allowed` |
 | `scheduler.appointment.saving.opacity` | `--mx-scheduler-appointment-saving-opacity` | `` | `0.7` |
 | `scheduler.appointment.saving.cursor` | `--mx-scheduler-appointment-saving-cursor` | `` | `progress` |
@@ -2652,7 +2805,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `scheduler.state.bg` | `--mx-scheduler-state-bg` | `color.bg.surface` | `#f8f7f3` |
 | `scheduler.state.radius` | `--mx-scheduler-state-radius` | `radius.md` | `0.375rem` |
 | `scheduler.state.shadow` | `--mx-scheduler-state-shadow` | `elevation.popup` | `0px 8px 16px 0px rgb(0 0 0 / 0.14), 0px 0px 2px 0px rgb(0 0 0 / 0.12)` |
-| `scheduler.state.danger.color` | `--mx-scheduler-state-danger-color` | `color.danger.fg` | `#b3261a` |
+| `scheduler.state.danger.color` | `--mx-scheduler-state-danger-color` | `color.danger.fg` | `#b03659` |
 | `scheduler.timeline-row.border-top-width` | `--mx-scheduler-timeline-row-border-top-width` | `border.width.1` | `1px` |
 | `scheduler.timeline-row.border-color` | `--mx-scheduler-timeline-row-border-color` | `color.stroke.divider` | `rgb(0 0 0 / 0.1)` |
 | `scheduler.timeline-row.first.border-top-width` | `--mx-scheduler-timeline-row-first-border-top-width` | `` | `0px` |
@@ -2770,6 +2923,17 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `scheduler.swipe-icon.height` | `--mx-scheduler-swipe-icon-height` | `icon.size.md` | `1rem` |
 | `scheduler.swipe-icon.icon` | `--mx-scheduler-swipe-icon-icon` | `` | `var(--mx-icon-chevron-end)` |
 | `scheduler.swipe-icon.previous.icon` | `--mx-scheduler-swipe-icon-previous-icon` | `` | `var(--mx-icon-chevron-start)` |
+| `scroll-view.panel-height` | `--mx-scroll-view-panel-height` | `` | `3rem` |
+| `scroll-view.panel-gap` | `--mx-scroll-view-panel-gap` | `space.2` | `0.5rem` |
+| `scroll-view.box.focus.glow` | `--mx-scroll-view-box-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
+| `scroll-view.box.focus.outline-width` | `--mx-scroll-view-box-focus-outline-width` | `focus.ring.width` | `2px` |
+| `scroll-view.box.focus.outline-color` | `--mx-scroll-view-box-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
+| `scroll-view.box.focus.outline-offset` | `--mx-scroll-view-box-focus-outline-offset` | `focus.ring.offset` | `1px` |
+| `scroll-view.pull.color` | `--mx-scroll-view-pull-color` | `color.fg.secondary` | `#5e5c55` |
+| `scroll-view.pull.font-size` | `--mx-scroll-view-pull-font-size` | `font.size.caption` | `0.75rem` |
+| `scroll-view.pull.refreshing.color` | `--mx-scroll-view-pull-refreshing-color` | `color.fg.primary` | `#1d1c1a` |
+| `scroll-view.bottom.color` | `--mx-scroll-view-bottom-color` | `color.fg.secondary` | `#5e5c55` |
+| `scroll-view.bottom.font-size` | `--mx-scroll-view-bottom-font-size` | `font.size.caption` | `0.75rem` |
 | `sheet.font-family` | `--mx-sheet-font-family` | `font.family.sans` | `Archivo, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif` |
 | `sheet.inset` | `--mx-sheet-inset` | `` | `0px` |
 | `sheet.top-gap` | `--mx-sheet-top-gap` | `space.10` | `2.5rem` |
@@ -2956,6 +3120,20 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `slider.stop.radius` | `--mx-slider-stop-radius` | `` | `initial` |
 | `slider.stop.bg` | `--mx-slider-stop-bg` | `` | `initial` |
 | `slider.stop.active.bg` | `--mx-slider-stop-active-bg` | `` | `initial` |
+| `sortable.gap` | `--mx-sortable-gap` | `space.1` | `0.25rem` |
+| `sortable.container.target.bg` | `--mx-sortable-container-target-bg` | `color.accent.subtle` | `#fbe6de` |
+| `sortable.item.sortable.cursor` | `--mx-sortable-item-sortable-cursor` | `` | `grab` |
+| `sortable.item.dragging.opacity` | `--mx-sortable-item-dragging-opacity` | `` | `0.4` |
+| `sortable.item.focus.glow` | `--mx-sortable-item-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
+| `sortable.item.focus.outline-width` | `--mx-sortable-item-focus-outline-width` | `focus.ring.width` | `2px` |
+| `sortable.item.focus.outline-color` | `--mx-sortable-item-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
+| `sortable.item.focus.outline-offset` | `--mx-sortable-item-focus-outline-offset` | `focus.ring.offset` | `1px` |
+| `sortable.line.height` | `--mx-sortable-line-height` | `` | `2px` |
+| `sortable.line.radius` | `--mx-sortable-line-radius` | `radius.full` | `9999px` |
+| `sortable.line.bg` | `--mx-sortable-line-bg` | `color.accent.solid` | `#c24523` |
+| `sortable.ghost.radius` | `--mx-sortable-ghost-radius` | `radius.md` | `0.375rem` |
+| `sortable.ghost.shadow` | `--mx-sortable-ghost-shadow` | `elevation.popup` | `0px 8px 16px 0px rgb(0 0 0 / 0.14), 0px 0px 2px 0px rgb(0 0 0 / 0.12)` |
+| `sortable.ghost.opacity` | `--mx-sortable-ghost-opacity` | `` | `0.9` |
 | `spinner.gap` | `--mx-spinner-gap` | `space.2` | `0.5rem` |
 | `spinner.cover-padding` | `--mx-spinner-cover-padding` | `space.4` | `1rem` |
 | `spinner.cover-background` | `--mx-spinner-cover-background` | `color.bg.glass` | `rgb(248 247 243 / 0.78)` |
@@ -2971,9 +3149,9 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `spinner.track-color` | `--mx-spinner-track-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
 | `spinner.accent` | `--mx-spinner-accent` | `color.accent.solid` | `#c24523` |
 | `spinner.neutral` | `--mx-spinner-neutral` | `color.fg.secondary` | `#5e5c55` |
-| `spinner.success` | `--mx-spinner-success` | `color.success.fg` | `#0c6a0c` |
-| `spinner.caution` | `--mx-spinner-caution` | `color.caution.fg` | `#845000` |
-| `spinner.danger` | `--mx-spinner-danger` | `color.danger.solid` | `#b3261a` |
+| `spinner.success` | `--mx-spinner-success` | `color.success.fg` | `#006402` |
+| `spinner.caution` | `--mx-spinner-caution` | `color.caution.fg` | `#754702` |
+| `spinner.danger` | `--mx-spinner-danger` | `color.danger.solid` | `#b03659` |
 | `spinner.radius` | `--mx-spinner-radius` | `radius.full` | `9999px` |
 | `spinner.cover-fg` | `--mx-spinner-cover-fg` | `color.fg.primary` | `#1d1c1a` |
 | `spinner.focus-width` | `--mx-spinner-focus-width` | `focus.ring.width` | `2px` |
@@ -3000,6 +3178,63 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `spinner.shape.display` | `--mx-spinner-shape-display` | `` | `initial` |
 | `spinner.shape.contained.bg` | `--mx-spinner-shape-contained-bg` | `` | `initial` |
 | `spinner.shape.contained.scale` | `--mx-spinner-shape-contained-scale` | `` | `initial` |
+| `stepper.font-size.sm` | `--mx-stepper-font-size-sm` | `font.size.caption` | `0.75rem` |
+| `stepper.font-size.md` | `--mx-stepper-font-size-md` | `font.size.body` | `0.875rem` |
+| `stepper.font-size.lg` | `--mx-stepper-font-size-lg` | `` | `1rem` |
+| `stepper.description-font-size` | `--mx-stepper-description-font-size` | `font.size.caption` | `0.75rem` |
+| `stepper.gap` | `--mx-stepper-gap` | `space.2` | `0.5rem` |
+| `stepper.line-gap` | `--mx-stepper-line-gap` | `space.2` | `0.5rem` |
+| `stepper.line-min-length` | `--mx-stepper-line-min-length` | `` | `1rem` |
+| `stepper.size.sm` | `--mx-stepper-size-sm` | `` | `1.5rem` |
+| `stepper.size.md` | `--mx-stepper-size-md` | `` | `1.75rem` |
+| `stepper.size.lg` | `--mx-stepper-size-lg` | `` | `2.25rem` |
+| `stepper.padding.sm` | `--mx-stepper-padding-sm` | `` | `0.25rem` |
+| `stepper.padding.md` | `--mx-stepper-padding-md` | `` | `0.375rem` |
+| `stepper.padding.lg` | `--mx-stepper-padding-lg` | `` | `0.5rem` |
+| `stepper.step.radius` | `--mx-stepper-step-radius` | `radius.sm` | `0.25rem` |
+| `stepper.step.color` | `--mx-stepper-step-color` | `color.fg.secondary` | `#5e5c55` |
+| `stepper.step.hover.bg` | `--mx-stepper-step-hover-bg` | `color.fill.subtle.secondary` | `rgb(0 0 0 / 0.0373)` |
+| `stepper.step.hover.cursor` | `--mx-stepper-step-hover-cursor` | `` | `pointer` |
+| `stepper.step.pressed.bg` | `--mx-stepper-step-pressed-bg` | `color.fill.subtle.tertiary` | `rgb(0 0 0 / 0.0241)` |
+| `stepper.step.focus.glow` | `--mx-stepper-step-focus-glow` | `focus.ring.halo` | `0px 0px 0px 1px rgb(255 255 255 / 0.7)` |
+| `stepper.step.focus.outline-width` | `--mx-stepper-step-focus-outline-width` | `focus.ring.width` | `2px` |
+| `stepper.step.focus.outline-color` | `--mx-stepper-step-focus-outline-color` | `focus.ring.color` | `#1d1c1a` |
+| `stepper.step.focus.outline-offset` | `--mx-stepper-step-focus-outline-offset` | `focus.ring.offset` | `1px` |
+| `stepper.step.disabled.color` | `--mx-stepper-step-disabled-color` | `color.fg.disabled` | `#a2a098` |
+| `stepper.step.current.color` | `--mx-stepper-step-current-color` | `color.fg.primary` | `#1d1c1a` |
+| `stepper.step.done.color` | `--mx-stepper-step-done-color` | `color.fg.primary` | `#1d1c1a` |
+| `stepper.indicator.radius` | `--mx-stepper-indicator-radius` | `radius.full` | `9999px` |
+| `stepper.indicator.bg` | `--mx-stepper-indicator-bg` | `color.fill.control.default` | `#f5f4f0` |
+| `stepper.indicator.border-width` | `--mx-stepper-indicator-border-width` | `` | `1px` |
+| `stepper.indicator.border-color` | `--mx-stepper-indicator-border-color` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
+| `stepper.indicator.color` | `--mx-stepper-indicator-color` | `color.fg.secondary` | `#5e5c55` |
+| `stepper.indicator.font-size` | `--mx-stepper-indicator-font-size` | `font.size.caption` | `0.75rem` |
+| `stepper.indicator.font-weight` | `--mx-stepper-indicator-font-weight` | `font.weight.semibold` | `600` |
+| `stepper.indicator.current.bg` | `--mx-stepper-indicator-current-bg` | `color.accent.solid` | `#c24523` |
+| `stepper.indicator.current.border-color` | `--mx-stepper-indicator-current-border-color` | `color.accent.solid` | `#c24523` |
+| `stepper.indicator.current.color` | `--mx-stepper-indicator-current-color` | `color.accent.on-solid` | `#ffffff` |
+| `stepper.indicator.done.bg` | `--mx-stepper-indicator-done-bg` | `color.accent.solid` | `#c24523` |
+| `stepper.indicator.done.border-color` | `--mx-stepper-indicator-done-border-color` | `color.accent.solid` | `#c24523` |
+| `stepper.indicator.done.color` | `--mx-stepper-indicator-done-color` | `color.accent.on-solid` | `#ffffff` |
+| `stepper.indicator.error.bg` | `--mx-stepper-indicator-error-bg` | `color.danger.solid` | `#b03659` |
+| `stepper.indicator.error.border-color` | `--mx-stepper-indicator-error-border-color` | `color.danger.solid` | `#b03659` |
+| `stepper.indicator.error.color` | `--mx-stepper-indicator-error-color` | `color.danger.on-solid` | `#ffffff` |
+| `stepper.indicator.disabled.border-color` | `--mx-stepper-indicator-disabled-border-color` | `color.stroke.control.default` | `rgb(0 0 0 / 0.12)` |
+| `stepper.indicator.disabled.color` | `--mx-stepper-indicator-disabled-color` | `color.fg.disabled` | `#a2a098` |
+| `stepper.indicator.disabled.bg` | `--mx-stepper-indicator-disabled-bg` | `` | `initial` |
+| `stepper.mark.done.icon` | `--mx-stepper-mark-done-icon` | `` | `var(--mx-icon-check)` |
+| `stepper.mark.done.bg` | `--mx-stepper-mark-done-bg` | `color.accent.on-solid` | `#ffffff` |
+| `stepper.mark.error.icon` | `--mx-stepper-mark-error-icon` | `` | `var(--mx-icon-danger)` |
+| `stepper.mark.error.bg` | `--mx-stepper-mark-error-bg` | `color.danger.on-solid` | `#ffffff` |
+| `stepper.label.current.font-weight` | `--mx-stepper-label-current-font-weight` | `font.weight.semibold` | `600` |
+| `stepper.label.error.color` | `--mx-stepper-label-error-color` | `color.danger.fg` | `#b03659` |
+| `stepper.description.color` | `--mx-stepper-description-color` | `color.fg.secondary` | `#5e5c55` |
+| `stepper.description.disabled.color` | `--mx-stepper-description-disabled-color` | `color.fg.disabled` | `#a2a098` |
+| `stepper.note.color` | `--mx-stepper-note-color` | `color.fg.secondary` | `#5e5c55` |
+| `stepper.line.height` | `--mx-stepper-line-height` | `` | `2px` |
+| `stepper.line.bg` | `--mx-stepper-line-bg` | `color.stroke.control.secondary` | `rgb(0 0 0 / 0.2)` |
+| `stepper.line.done.bg` | `--mx-stepper-line-done-bg` | `color.accent.solid` | `#c24523` |
+| `stepper.line.radius` | `--mx-stepper-line-radius` | `` | `initial` |
 | `switch.thumb-inset` | `--mx-switch-thumb-inset` | `space.1` | `0.25rem` |
 | `switch.gap` | `--mx-switch-gap` | `space.2` | `0.5rem` |
 | `switch.text-padding` | `--mx-switch-text-padding` | `space.2` | `0.5rem` |
@@ -3034,7 +3269,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `switch.track.radius` | `--mx-switch-track-radius` | `radius.full` | `9999px` |
 | `switch.track.checked.bg` | `--mx-switch-track-checked-bg` | `color.accent.solid` | `#c24523` |
 | `switch.track.checked.border-color` | `--mx-switch-track-checked-border-color` | `color.accent.solid` | `#c24523` |
-| `switch.track.invalid.border-color` | `--mx-switch-track-invalid-border-color` | `color.danger.solid` | `#b3261a` |
+| `switch.track.invalid.border-color` | `--mx-switch-track-invalid-border-color` | `color.danger.solid` | `#b03659` |
 | `switch.track.hover.bg` | `--mx-switch-track-hover-bg` | `color.fill.control.secondary` | `#ebeae5` |
 | `switch.track.checked-hover.bg` | `--mx-switch-track-checked-hover-bg` | `color.accent.solid-hover` | `#b43f20` |
 | `switch.track.pressed.bg` | `--mx-switch-track-pressed-bg` | `color.fill.control.secondary` | `#ebeae5` |
@@ -3182,9 +3417,9 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `tabdocs.indicator.selected.bg` | `--mx-tabdocs-indicator-selected-bg` | `color.stroke.control.strong` | `rgb(0 0 0 / 0.4458)` |
 | `tabdocs.indicator.active.bg` | `--mx-tabdocs-indicator-active-bg` | `color.accent.solid` | `#c24523` |
 | `tabdocs.indicator.title.bg` | `--mx-tabdocs-indicator-title-bg` | `` | `initial` |
-| `tabdocs.title.warning.color` | `--mx-tabdocs-title-warning-color` | `color.caution.fg` | `#845000` |
-| `tabdocs.title.danger.color` | `--mx-tabdocs-title-danger-color` | `color.danger.fg` | `#b3261a` |
-| `tabdocs.title.success.color` | `--mx-tabdocs-title-success-color` | `color.success.fg` | `#0c6a0c` |
+| `tabdocs.title.warning.color` | `--mx-tabdocs-title-warning-color` | `color.caution.fg` | `#754702` |
+| `tabdocs.title.danger.color` | `--mx-tabdocs-title-danger-color` | `color.danger.fg` | `#b03659` |
+| `tabdocs.title.success.color` | `--mx-tabdocs-title-success-color` | `color.success.fg` | `#006402` |
 | `tabdocs.title.accent.color` | `--mx-tabdocs-title-accent-color` | `color.accent.fg` | `#983318` |
 | `tabdocs.letter.font-weight` | `--mx-tabdocs-letter-font-weight` | `font.weight.semibold` | `600` |
 | `tabdocs.pin.radius` | `--mx-tabdocs-pin-radius` | `radius.sm` | `0.25rem` |
@@ -3205,16 +3440,16 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `tabdocs.badge.dot.padding-inline` | `--mx-tabdocs-badge-dot-padding-inline` | `` | `0px` |
 | `tabdocs.badge.dot.bg` | `--mx-tabdocs-badge-dot-bg` | `color.accent.solid` | `#c24523` |
 | `tabdocs.badge.warning.bg` | `--mx-tabdocs-badge-warning-bg` | `color.caution.subtle` | `#fff4ce` |
-| `tabdocs.badge.warning.color` | `--mx-tabdocs-badge-warning-color` | `color.caution.fg` | `#845000` |
+| `tabdocs.badge.warning.color` | `--mx-tabdocs-badge-warning-color` | `color.caution.fg` | `#754702` |
 | `tabdocs.badge.danger.bg` | `--mx-tabdocs-badge-danger-bg` | `color.danger.subtle` | `#fde7e9` |
-| `tabdocs.badge.danger.color` | `--mx-tabdocs-badge-danger-color` | `color.danger.fg` | `#b3261a` |
+| `tabdocs.badge.danger.color` | `--mx-tabdocs-badge-danger-color` | `color.danger.fg` | `#b03659` |
 | `tabdocs.badge.success.bg` | `--mx-tabdocs-badge-success-bg` | `color.success.subtle` | `#dff6dd` |
-| `tabdocs.badge.success.color` | `--mx-tabdocs-badge-success-color` | `color.success.fg` | `#0c6a0c` |
+| `tabdocs.badge.success.color` | `--mx-tabdocs-badge-success-color` | `color.success.fg` | `#006402` |
 | `tabdocs.badge.accent.bg` | `--mx-tabdocs-badge-accent-bg` | `color.accent.subtle` | `#fbe6de` |
 | `tabdocs.badge.accent.color` | `--mx-tabdocs-badge-accent-color` | `color.accent.fg` | `#983318` |
-| `tabdocs.badge.warning-dot.bg` | `--mx-tabdocs-badge-warning-dot-bg` | `color.caution.fg` | `#845000` |
-| `tabdocs.badge.danger-dot.bg` | `--mx-tabdocs-badge-danger-dot-bg` | `color.danger.fg` | `#b3261a` |
-| `tabdocs.badge.success-dot.bg` | `--mx-tabdocs-badge-success-dot-bg` | `color.success.fg` | `#0c6a0c` |
+| `tabdocs.badge.warning-dot.bg` | `--mx-tabdocs-badge-warning-dot-bg` | `color.caution.fg` | `#754702` |
+| `tabdocs.badge.danger-dot.bg` | `--mx-tabdocs-badge-danger-dot-bg` | `color.danger.fg` | `#b03659` |
+| `tabdocs.badge.success-dot.bg` | `--mx-tabdocs-badge-success-dot-bg` | `color.success.fg` | `#006402` |
 | `tabdocs.badge.accent-dot.bg` | `--mx-tabdocs-badge-accent-dot-bg` | `color.accent.fg` | `#983318` |
 | `tabdocs.close.radius` | `--mx-tabdocs-close-radius` | `radius.sm` | `0.25rem` |
 | `tabdocs.close.color` | `--mx-tabdocs-close-color` | `color.fg.secondary` | `#5e5c55` |
@@ -3616,9 +3851,9 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `toast.surface.danger.bg` | `--mx-toast-surface-danger-bg` | `` | `initial` |
 | `toast.icon.size` | `--mx-toast-icon-size` | `icon.size.md` | `1rem` |
 | `toast.icon.color` | `--mx-toast-icon-color` | `color.fg.secondary` | `#5e5c55` |
-| `toast.icon.success.color` | `--mx-toast-icon-success-color` | `color.success.fg` | `#0c6a0c` |
-| `toast.icon.caution.color` | `--mx-toast-icon-caution-color` | `color.caution.fg` | `#845000` |
-| `toast.icon.danger.color` | `--mx-toast-icon-danger-color` | `color.danger.fg` | `#b3261a` |
+| `toast.icon.success.color` | `--mx-toast-icon-success-color` | `color.success.fg` | `#006402` |
+| `toast.icon.caution.color` | `--mx-toast-icon-caution-color` | `color.caution.fg` | `#754702` |
+| `toast.icon.danger.color` | `--mx-toast-icon-danger-color` | `color.danger.fg` | `#b03659` |
 | `toast.mark.icon` | `--mx-toast-mark-icon` | `` | `var(--mx-icon-info)` |
 | `toast.mark.success.icon` | `--mx-toast-mark-success-icon` | `` | `var(--mx-icon-success)` |
 | `toast.mark.caution.icon` | `--mx-toast-mark-caution-icon` | `` | `var(--mx-icon-caution)` |
@@ -3747,7 +3982,7 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `treeview.mark.size` | `--mx-treeview-mark-size` | `icon.size.sm` | `0.75rem` |
 | `treeview.icon.size` | `--mx-treeview-icon-size` | `icon.size.md` | `1rem` |
 | `treeview.error.gap` | `--mx-treeview-error-gap` | `space.1` | `0.25rem` |
-| `treeview.error.color` | `--mx-treeview-error-color` | `color.danger.fg` | `#b3261a` |
+| `treeview.error.color` | `--mx-treeview-error-color` | `color.danger.fg` | `#b03659` |
 | `treeview.error.font-size` | `--mx-treeview-error-font-size` | `font.size.caption` | `0.75rem` |
 | `treeview.retry.padding-inline` | `--mx-treeview-retry-padding-inline` | `space.1` | `0.25rem` |
 | `treeview.retry.radius` | `--mx-treeview-retry-radius` | `radius.sm` | `0.25rem` |
@@ -3829,9 +4064,18 @@ Source: `tokens/schema/*.json` (names and types) and `tokens/languages/<language
 | `window.message.gap` | `--mx-window-message-gap` | `space.3` | `0.75rem` |
 | `window.message-icon.size` | `--mx-window-message-icon-size` | `icon.size.lg` | `1.25rem` |
 | `window.message-icon.color` | `--mx-window-message-icon-color` | `color.accent.fg` | `#983318` |
-| `window.message-icon.success.color` | `--mx-window-message-icon-success-color` | `color.success.fg` | `#0c6a0c` |
-| `window.message-icon.caution.color` | `--mx-window-message-icon-caution-color` | `color.caution.fg` | `#845000` |
-| `window.message-icon.danger.color` | `--mx-window-message-icon-danger-color` | `color.danger.fg` | `#b3261a` |
+| `window.message-icon.success.color` | `--mx-window-message-icon-success-color` | `color.success.fg` | `#006402` |
+| `window.message-icon.caution.color` | `--mx-window-message-icon-caution-color` | `color.caution.fg` | `#754702` |
+| `window.message-icon.danger.color` | `--mx-window-message-icon-danger-color` | `color.danger.fg` | `#b03659` |
+| `wizard.gap` | `--mx-wizard-gap` | `space.4` | `1rem` |
+| `wizard.bar-gap` | `--mx-wizard-bar-gap` | `space.2` | `0.5rem` |
+| `wizard.rail-width` | `--mx-wizard-rail-width` | `` | `14rem` |
+| `wizard.previous.variant` | `--mx-wizard-previous-variant` | `` | `outline` |
+| `wizard.next.variant` | `--mx-wizard-next-variant` | `` | `solid` |
+| `wizard.next.tone` | `--mx-wizard-next-tone` | `` | `accent` |
+| `wizard.bar.padding-top` | `--mx-wizard-bar-padding-top` | `space.3` | `0.75rem` |
+| `wizard.bar.border-top-width` | `--mx-wizard-bar-border-top-width` | `` | `1px` |
+| `wizard.bar.border-top-color` | `--mx-wizard-bar-border-top-color` | `color.stroke.divider` | `rgb(0 0 0 / 0.1)` |
 
 ## Semantic ({semantic.length} per theme)
 
@@ -3846,13 +4090,13 @@ The theme's language, the only layer a theme redefines — switch the theme abov
 | `color.accent.fg` | `--mx-color-accent-fg` | `#983318` | `#ffb89c` | `#c7c7ff` |
 | `color.accent.subtle` | `--mx-color-accent-subtle` | `#fbe6de` | `#45271d` | `#000000` |
 | `color.accent.on-subtle` | `--mx-color-accent-on-subtle` | `#983318` | `#ffb89c` | `#c7c7ff` |
-| `color.success.fg` | `--mx-color-success-fg` | `#0c6a0c` | `#6ccb5f` | `#3ff23f` |
+| `color.success.fg` | `--mx-color-success-fg` | `#006402` | `#6dc43a` | `#3ff23f` |
 | `color.success.subtle` | `--mx-color-success-subtle` | `#dff6dd` | `#393d1b` | `#000000` |
-| `color.success.solid` | `--mx-color-success-solid` | `#0c6a0c` | `#6ccb5f` | `#3ff23f` |
+| `color.success.solid` | `--mx-color-success-solid` | `#006402` | `#6dc43a` | `#3ff23f` |
 | `color.success.on-solid` | `--mx-color-success-on-solid` | `#ffffff` | `#000000` | `#000000` |
-| `color.caution.fg` | `--mx-color-caution-fg` | `#845000` | `#fce100` | `#ffee32` |
+| `color.caution.fg` | `--mx-color-caution-fg` | `#754702` | `#fce100` | `#ffee32` |
 | `color.caution.subtle` | `--mx-color-caution-subtle` | `#fff4ce` | `#433519` | `#000000` |
-| `color.caution.solid` | `--mx-color-caution-solid` | `#845000` | `#fce100` | `#ffee32` |
+| `color.caution.solid` | `--mx-color-caution-solid` | `#754702` | `#fce100` | `#ffee32` |
 | `color.caution.on-solid` | `--mx-color-caution-on-solid` | `#ffffff` | `#000000` | `#000000` |
 | `color.bg.canvas` | `--mx-color-bg-canvas` | `#e1e0da` | `#232220` | `#000000` |
 | `color.bg.layer` | `--mx-color-bg-layer` | `#ebeae5` | `#2b2a27` | `#000000` |
@@ -3894,10 +4138,10 @@ The theme's language, the only layer a theme redefines — switch the theme abov
 | `color.stroke.surface` | `--mx-color-stroke-surface` | `rgb(117 117 117 / 0.4)` | `rgb(117 117 117 / 0.4)` | `#ffffff` |
 | `color.stroke.divider` | `--mx-color-stroke-divider` | `rgb(0 0 0 / 0.1)` | `rgb(255 255 255 / 0.0837)` | `#ffffff` |
 | `color.highlight.control` | `--mx-color-highlight-control` | `rgb(255 255 255 / 0.7)` | `rgb(255 255 255 / 0.06)` | `#000000` |
-| `color.danger.solid` | `--mx-color-danger-solid` | `#b3261a` | `#ff99a4` | `#ff8080` |
-| `color.danger.solid-hover` | `--mx-color-danger-solid-hover` | `#c42b1c` | `#e98d97` | `#ffa0a0` |
+| `color.danger.solid` | `--mx-color-danger-solid` | `#b03659` | `#ff99a4` | `#ff8080` |
+| `color.danger.solid-hover` | `--mx-color-danger-solid-hover` | `#c13b61` | `#e98d97` | `#ffa0a0` |
 | `color.danger.on-solid` | `--mx-color-danger-on-solid` | `#ffffff` | `#000000` | `#000000` |
-| `color.danger.fg` | `--mx-color-danger-fg` | `#b3261a` | `#ff99a4` | `#ffbcbc` |
+| `color.danger.fg` | `--mx-color-danger-fg` | `#b03659` | `#ff99a4` | `#ffbcbc` |
 | `color.danger.subtle` | `--mx-color-danger-subtle` | `#fde7e9` | `#442726` | `#000000` |
 | `color.info.subtle` | `--mx-color-info-subtle` | `#ebeae5` | `#2b2a27` | `#000000` |
 | `color.info.solid` | `--mx-color-info-solid` | `#5e5c55` | `#d0cfc9` | `#ffffff` |
@@ -4035,17 +4279,17 @@ The shared palette and scales, the same in every design language. Themes and com
 | `color.accent.light3` | color | `--mx-color-accent-light3` | `#ffb89c` |
 | `color.accent.tint-light` | color | `--mx-color-accent-tint-light` | `#fbe6de` |
 | `color.accent.tint-dark` | color | `--mx-color-accent-tint-dark` | `#45271d` |
-| `color.critical.light` | color | `--mx-color-critical-light` | `#b3261a` |
-| `color.critical.light-hover` | color | `--mx-color-critical-light-hover` | `#c42b1c` |
+| `color.critical.light` | color | `--mx-color-critical-light` | `#b03659` |
+| `color.critical.light-hover` | color | `--mx-color-critical-light-hover` | `#c13b61` |
 | `color.critical.light-bg` | color | `--mx-color-critical-light-bg` | `#fde7e9` |
 | `color.critical.dark` | color | `--mx-color-critical-dark` | `#ff99a4` |
 | `color.critical.dark-hover` | color | `--mx-color-critical-dark-hover` | `#e98d97` |
 | `color.critical.dark-bg` | color | `--mx-color-critical-dark-bg` | `#442726` |
-| `color.success.light` | color | `--mx-color-success-light` | `#0c6a0c` |
+| `color.success.light` | color | `--mx-color-success-light` | `#006402` |
 | `color.success.light-bg` | color | `--mx-color-success-light-bg` | `#dff6dd` |
-| `color.success.dark` | color | `--mx-color-success-dark` | `#6ccb5f` |
+| `color.success.dark` | color | `--mx-color-success-dark` | `#6dc43a` |
 | `color.success.dark-bg` | color | `--mx-color-success-dark-bg` | `#393d1b` |
-| `color.caution.light` | color | `--mx-color-caution-light` | `#845000` |
+| `color.caution.light` | color | `--mx-color-caution-light` | `#754702` |
 | `color.caution.light-bg` | color | `--mx-color-caution-light-bg` | `#fff4ce` |
 | `color.caution.dark` | color | `--mx-color-caution-dark` | `#fce100` |
 | `color.caution.dark-bg` | color | `--mx-color-caution-dark-bg` | `#433519` |
@@ -4214,7 +4458,7 @@ cssVar('color.accent.solid');  // 'var(--mx-color-accent-solid)' — a design-sy
 
 # Control
 
-> Foundations · @motifx-community/ui 0.1.0-beta.0
+> Foundations · @motifx-community/ui 0.1.0-beta.2
 
 The base of every control in the package. It gives each one the same `text`, `enabled`, `visible` and `tabStop`, and the same focus methods, whether the control is written in JSX and bound to state or created with `new` and changed from code.
 
@@ -4450,7 +4694,7 @@ The base adds no listeners per control and pays only for what is used.
 
 # Keyboard and focus
 
-> Foundations · @motifx-community/ui 0.1.0-beta.0
+> Foundations · @motifx-community/ui 0.1.0-beta.2
 
 The rules every control follows: Tab order, the active control of a container, focus that never falls to `<body>`, `&File` access keys and app-wide shortcuts.
 
@@ -4638,11 +4882,244 @@ export default function FocusGuard() {
 Controls: see `Control` for `tabStop`, `tabIndex`, `focus()`, `onAccessKey()` and `FocusContainer`.
 
 
+---
+
+# Language
+
+> Foundations · @motifx-community/ui 0.1.0-beta.2
+
+The texts the controls write, the locale their dates and numbers follow, and the direction: one `uiLocale` for the kit, with a pack per language loaded as it is asked for.
+
+## Import
+
+```tsx
+import { uiLocale, connectI18n } from '@motifx-community/ui';
+```
+
+## Switching the language
+
+`uiLocale.use('tr')` loads the Turkish pack the first time, then every control on the page draws its texts and formats again. The Language menu in the header of these docs does the same.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, DateBox, NumberBox, Pagination, Stack, uiLocale } from '@motifx-community/ui';
+import { kitTexts } from '../../../shared/kit-texts';
+
+/** The kit's language switched live: the pack is loaded first, then every control draws its texts and formats again. */
+export default function Switch() {
+    const s = reactive({ price: 1234.5, when: new Date(2026, 2, 18) as Date | null });
+    return (
+        <Stack gap="md">
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="English" variant="outline" onclick={() => void uiLocale.use('en')} />
+                <Button text="Türkçe" variant="outline" onclick={() => void uiLocale.use('tr')} />
+                <span>
+                    In use: <output class="lang-locale">{() => kitTexts.locale}</output>
+                </span>
+            </Stack>
+            <Stack orientation="horizontal" wrap align="center">
+                <NumberBox label="Price" x-model={() => s.price} format={{ style: 'currency', currency: 'EUR' }} />
+                <DateBox label="When" x-model={() => s.when} clearButton />
+            </Stack>
+            <Pagination total={95} pageSizes={[10, 20, 50]} label="Orders" />
+        </Stack>
+    );
+}
+```
+
+## The rules
+
+| Rule | How |
+| --- | --- |
+| `Start` | The page’s `<html lang>`, else the browser’s language. Set `lang` before the first control is made; `uiLocale.ready` settles once that language is in. |
+| `Texts` | Every text a control writes itself (a button’s name, a message, “No items”) comes from the pack of the language in use; English fills what the pack leaves out. |
+| `Formats` | Dates, numbers, the first day of the week and 12 or 24 hours follow `uiLocale.locale`; a control’s own `locale` prop wins for that control. |
+| `Direction` | `uiLocale.dir` is `rtl` for Arabic, Hebrew, Persian, Urdu…; the controls lay themselves out from `<html dir>`, which `@motifx-community/i18n` keeps in step. |
+| `Nothing follows` | A change is one event, `onChanged`: the controls draw again on it, and so can your own texts. No binding reads `uiLocale`. |
+| `Plurals` | A text with a count is an ICU message, `{count, plural, one {# record} other {# records}}`; a pack writes it the way its language counts. |
+
+## Packs
+
+| Pack | Where it comes from |
+| --- | --- |
+| `English` | Built in. What a pack leaves out is shown in English. |
+| `Turkish` | `uiLocale.use('tr')` loads it the first time, as a chunk of the package. |
+| `@motifx-community/ui/locales/<language>.json` | The same packs as files, for an app that bundles or serves them its own way: `uiLocale.add('tr', pack)`. |
+| `uiLocale.loader` | Where the kit asks for a pack it does not have: `(language) => fetch(`/i18n/ui/${language}.json`).then((r) => r.json())`. A language without a pack keeps the English texts. |
+
+A pack of your own is a plain object of the kit’s texts: `uiLocale.add` gives a language its texts, `use` switches to it. A few texts are enough to start; the rest stay English until the pack has them.
+
+```tsx
+import { Button, DropDown, Stack, uiLocale } from '@motifx-community/ui';
+
+// A few German texts; what is left out stays English.
+uiLocale.add('de', {
+    close: 'Schließen',
+    clear: 'Leeren',
+    search: 'Suchen',
+    noItems: 'Keine Einträge',
+    loading: 'Wird geladen…',
+    ok: 'OK',
+    cancel: 'Abbrechen',
+});
+
+/** A pack of your own: `uiLocale.add` gives a language its texts, `use` switches to it. */
+export default function OwnPack() {
+    return (
+        <Stack gap="md">
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Deutsch" variant="outline" onclick={() => void uiLocale.use('de')} />
+                <Button text="English" variant="outline" onclick={() => void uiLocale.use('en')} />
+            </Stack>
+            <DropDown label="Empty list" items={[]} placeholder="Open me" />
+        </Stack>
+    );
+}
+```
+
+## With your app’s translations
+
+An app translated with `@motifx-community/i18n` has one locale already. `connectI18n(i18n)` makes the kit follow it: when the app switches, the kit loads its own pack and switches too. The link is undone by what it returns.
+
+```tsx
+import { Component } from '@motifx/core';
+import { createI18n } from '@motifx-community/i18n';
+import { Button, connectI18n, Stack, TextBox } from '@motifx-community/ui';
+
+// The app's own translations; the kit follows their locale.
+const i18n = createI18n({
+    locale: 'en',
+    messages: {
+        en: { greeting: 'Hello {name}', hint: 'The clear button is named by the kit' },
+        tr: { greeting: 'Merhaba {name}', hint: 'Temizle düğmesini kit adlandırır' },
+    },
+    dom: false,
+});
+
+/** One locale for the app and the kit: `connectI18n` switches the kit whenever the app's translations switch. */
+export default class Connect extends Component<HTMLDivElement> {
+    override onBuilt(): void {
+        this.motif.setDisposable(connectI18n(i18n));
+    }
+
+    override view() {
+        return (
+            <Stack gap="md">
+                <Stack orientation="horizontal" wrap align="center">
+                    <Button text="English" variant="outline" onclick={() => void i18n.setLocale('en')} />
+                    <Button text="Türkçe" variant="outline" onclick={() => void i18n.setLocale('tr')} />
+                </Stack>
+                <p class="lang-greeting">{() => i18n.t('greeting', { name: 'Ada' })}</p>
+                <TextBox label={() => i18n.t('hint')} value="Clear me" clearButton />
+            </Stack>
+        );
+    }
+}
+```
+
+## Your own texts that follow
+
+The kit follows nothing: a change of language is told once, through `uiLocale.onChanged`. Keep your own texts with it, and fill the kit’s own texts with `uiLocale.text`, plurals included.
+
+```tsx
+import { Component, reactive } from '@motifx/core';
+import { Button, NumberBox, Stack, uiLocale } from '@motifx-community/ui';
+
+const OWN = {
+    en: { title: 'Orders', hint: 'Written by the app, kept with the kit’s language' },
+    tr: { title: 'Siparişler', hint: 'Uygulama yazar, kitin diliyle birlikte değişir' },
+};
+
+/** Your own texts drawn again on `uiLocale.onChanged`, and the kit's plural texts filled with `uiLocale.text`. */
+export default class OwnTexts extends Component<HTMLDivElement> {
+    s = reactive({ count: 3, title: '', hint: '', records: '' });
+
+    override onBuilt(): void {
+        this.motif.register(uiLocale.onChanged(() => this.draw()));
+        this.draw();
+    }
+
+    draw(): void {
+        const own = uiLocale.locale.startsWith('tr') ? OWN.tr : OWN.en;
+        this.s.title = own.title;
+        this.s.hint = own.hint;
+        this.s.records = uiLocale.text('gridRecords', { count: this.s.count });
+    }
+
+    override view() {
+        return (
+            <Stack gap="md">
+                <Stack orientation="horizontal" wrap align="center">
+                    <Button text="English" variant="outline" onclick={() => void uiLocale.use('en')} />
+                    <Button text="Türkçe" variant="outline" onclick={() => void uiLocale.use('tr')} />
+                </Stack>
+                <p>
+                    <strong class="lang-own-title">{this.s.title}</strong>
+                </p>
+                <p>{this.s.hint}</p>
+                <Stack orientation="horizontal" wrap align="center">
+                    <NumberBox label="Count" min={0} max={99} x-model={() => this.s.count} onValueChanged={() => this.draw()} />
+                    <output class="lang-records">{this.s.records}</output>
+                </Stack>
+            </Stack>
+        );
+    }
+}
+```
+
+## Formats of one control
+
+Dates and numbers follow the kit’s locale. A control given a `locale` of its own writes that one, whatever the kit’s language is.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { DateBox, NumberBox, Stack } from '@motifx-community/ui';
+
+/** A control's own `locale` wins over the kit's: these write German and Japanese whatever the kit's language is. */
+export default function Formats() {
+    const s = reactive({ amount: 98765.43, day: new Date(2026, 2, 18) as Date | null });
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <NumberBox label="Betrag" locale="de-DE" format={{ style: 'currency', currency: 'EUR' }} x-model={() => s.amount} />
+            <DateBox label="日付" locale="ja-JP" x-model={() => s.day} />
+            <NumberBox label="The kit's locale" format={{ style: 'currency', currency: 'EUR' }} x-model={() => s.amount} />
+        </Stack>
+    );
+}
+```
+
+## Checking a pack
+
+In the repository, `npm run locales` checks every pack the kit ships, and `npm run locales -- path/to/de.json` one of your own. The texts themselves are in `src/locales/en.json`; a pack is the same keys in another language.
+
+| Check | What it means |
+| --- | --- |
+| `Every text` | A pack names every text of `en.json`; one it leaves out is shown in English, and the check says which. |
+| `Only the kit’s texts` | A key `en.json` does not have is a typo. |
+| `The same arguments` | A text fills the same `{values}` as the English one, in ICU; the plural forms are the language’s own. |
+| `The interface` | `UiStrings` and `en.json` name the same keys. |
+
+## API reference
+
+| Member | Type | Description |
+| --- | --- | --- |
+| `uiLocale.use(locale)` | `Promise<void>` | Switches to `locale` (`tr`, `tr-TR`): its pack is loaded first when it is not there, then every control draws again. A later call wins over one still loading. |
+| `uiLocale.locale` | `string` | The locale in use. |
+| `uiLocale.dir` | `'ltr' \| 'rtl'` | The direction of the locale in use. |
+| `uiLocale.strings` | `UiStrings` | The texts in use. Assigning a set changes the texts and keeps the locale: `uiLocale.strings = { ...uiLocale.strings, close: 'Shut' }`. |
+| `uiLocale.text(key, values)` | `string` | A text of the kit with its values filled in: `uiLocale.text('gridRecords', { count: 3 })`. |
+| `uiLocale.add(language, pack)` | `void` | Adds the pack of a language, or more texts to it; a language in use shows them at once. |
+| `uiLocale.loader` | `(language) => Promise<UiPackModule>` | Where packs come from; the package by default. |
+| `uiLocale.ready` | `Promise<void>` | Settles once the starting language is in. |
+| `uiLocale.onChanged` | event | Raised once the language changed, with `locale` and `previous`. |
+| `connectI18n(i18n)` | `() => void` | Keeps the kit’s language with your app’s translations (`@motifx-community/i18n`, or anything with `locale` and `onLocaleChanged`); returns what stops it. |
+
+
 ---
 
 # Button
 
-> Buttons · @motifx-community/ui 0.1.0-beta.0
+> Buttons · @motifx-community/ui 0.1.0-beta.2
 
 A native `<button>` drawn from the design tokens: three variants, three tones, three sizes, an icon, an `&` access key. It can be a toggle, show that work is running, and open a menu or any content — from the whole button, or with `split` from an arrow next to it while the button keeps its own action.
 
@@ -4946,7 +5423,7 @@ The only text a button writes itself is the name of a split button's arrow. It c
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** The name of a split button's arrow, from uiLocale: a shipped language or a text of your own. */
@@ -4955,7 +5432,7 @@ export default function Localization() {
 
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
 
   return (
@@ -5062,7 +5539,7 @@ The menu and the surface it opens on are shared parts, `MenuList` and `Popup`, e
 
 # ButtonGroup
 
-> Buttons · @motifx-community/ui 0.1.0-beta.0
+> Buttons · @motifx-community/ui 0.1.0-beta.2
 
 Buttons that belong together: a segmented choice of one or several, or a row of actions. The buttons are the kit’s own, touching by default.
 
@@ -5207,7 +5684,7 @@ export default function Looks() {
 
 # Toolbar
 
-> Buttons · @motifx-community/ui 0.1.0-beta.0
+> Buttons · @motifx-community/ui 0.1.0-beta.2
 
 A bar of commands: buttons, toggle buttons, menus and fields in groups between separators. It is one Tab stop and the arrow keys move inside it; items that do not fit move into a “more” menu at the end. Items come as data, as JSX children, or both.
 
@@ -5374,7 +5851,7 @@ The only text a toolbar writes itself is the name of its “more” button, from
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of the kit; the “more” buttons take the new name at once. */
@@ -5382,7 +5859,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -5673,7 +6150,7 @@ export default function SizeAndOrientation() {
 
 # MenuBar and ContextMenu
 
-> Buttons · @motifx-community/ui 0.1.0-beta.0
+> Buttons · @motifx-community/ui 0.1.0-beta.2
 
 A menu bar of an app (File, Edit, View) and the menu that opens on a right-click. Both show the same menu items: submenus, check and radio items, shortcuts, access keys.
 
@@ -5989,7 +6466,7 @@ Menus write no text of their own: every label, shortcut and name comes from your
 
 # TextBox
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A one-line text field with its label, help text and error: placeholder, prefix and suffix, buttons in the box, a clear button, a password that can be shown, a character counter, an input mask and validation — alone, in a group, or every field in a panel.
 
@@ -6305,7 +6782,7 @@ The names of the clear and password buttons and every validation message come fr
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of every field on the page; errors already shown follow too. */
@@ -6313,7 +6790,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -6442,7 +6919,7 @@ The frame (`Field`), the mask (`InputMask`, which works on any `<input>`) and va
 
 # TextArea
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A text field of several lines: a box that grows with the text or that the user drags bigger, a character counter, a clear button, Ctrl+Enter to send, and the label, help text and validation every field has.
 
@@ -6659,7 +7136,7 @@ The name of the clear button and the validation messages come from `uiLocale.str
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of every field on the page, the clear button's name included. */
@@ -6667,7 +7144,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -6751,7 +7228,7 @@ TextArea uses the field tokens (`field.*`, see TextBox) and has none of its own:
 
 # NumberBox
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A number field: arrow keys, PageUp / PageDown and spin buttons that repeat while held, bounds, a step without float noise, a format for display (currency, percent) and typing in the locale’s own way.
 
@@ -6963,7 +7440,7 @@ The names of the spin buttons and the range messages come from `uiLocale.strings
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the names of the spin buttons and the range messages. */
@@ -6972,7 +7449,7 @@ export default function Localization() {
 
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
 
   return (
@@ -7064,7 +7541,7 @@ export default function Localization() {
 
 # DateBox
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A date, a time or both. It is typed in the order of the locale through a mask, or picked from a calendar and a list of times; `min`, `max` and `disabledDates` limit both ways.
 
@@ -7210,14 +7687,14 @@ Button names and messages come from `uiLocale.strings`; dates and names from `lo
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 
 /** Switches the button names and messages of every date box on the page. */
 export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return <Button text={() => (s.lang === 'en' ? 'Language: English' : 'Dil: Türkçe')} variant="outline" onclick={toggle} />;
 }
@@ -7265,11 +7742,207 @@ export default function Localization() {
 The date helpers are shared: `datePatternOf(locale, kind)`, `dateToDigits`, `digitsToDate`.
 
 
+---
+
+# DateRangeBox
+
+> Editors · @motifx-community/ui 0.1.0-beta.2
+
+A start and an end date in one field: typed through two masks, or picked on two months side by side, from ready-made ranges, within the dates and the span allowed. The value is a `[start, end]` pair.
+
+## Import
+
+```tsx
+import { DateRangeBox, type DateRange } from '@motifx-community/ui';
+```
+
+## From JSX and from code
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, DateRangeBox, Stack, type DateRange } from '@motifx-community/ui';
+
+const say = (d: Date | null) => (d ? d.toLocaleDateString('en-GB') : '—');
+
+/** A range bound with x-model, and one made from code and read through its properties. */
+export default function FromCode() {
+    const s = reactive({ stay: [new Date(2026, 2, 10), new Date(2026, 2, 14)] as DateRange, told: '' });
+    const coded = new DateRangeBox({ label: 'Report period', clearButton: true, onValueChanged: e => (s.told = `${say(e.value[0])} to ${say(e.value[1])}`) });
+
+    return (
+        <Stack gap="md">
+            <Stack orientation="horizontal" wrap align="center">
+                <DateRangeBox label="Stay" x-model={() => s.stay} clearButton />
+                <output class="dr-stay">{() => `${say(s.stay[0])} to ${say(s.stay[1])}`}</output>
+            </Stack>
+            <Stack orientation="horizontal" wrap align="center">
+                <span onConfig={c => c.controls.add(coded)} />
+                <Button text="This week" variant="outline" onclick={() => (coded.value = [new Date(2026, 2, 16), new Date(2026, 2, 22)])} />
+                <output class="dr-told">{() => s.told}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Presets
+
+`presets` puts ready-made ranges beside the calendars: `true` for the kit’s, or your own, each made when it is chosen. `calendars={1}` shows one month.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { DateRangeBox, Stack, type DateRange, type DateRangePreset } from '@motifx-community/ui';
+
+const day = (offset: number) => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + offset);
+    return d;
+};
+
+// Ranges of our own, made when chosen so they are about today.
+const QUARTERS: DateRangePreset[] = [
+    { text: 'Next 3 days', range: () => [day(0), day(2)] },
+    { text: 'Next week', range: () => [day(1), day(7)] },
+    { text: 'Next 90 days', range: () => [day(0), day(89)] }
+];
+
+/** The kit's presets beside the calendars, and presets of your own. */
+export default function Presets() {
+    const s = reactive({ sales: [null, null] as DateRange, plan: [null, null] as DateRange });
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <DateRangeBox label="Sales period" presets x-model={() => s.sales} />
+            <DateRangeBox label="Planning" presets={QUARTERS} calendars={1} x-model={() => s.plan} />
+        </Stack>
+    );
+}
+```
+
+## Limits
+
+`min`, `max` and `disabledDates` bound both ends, typed or picked; `minDays` and `maxDays` bound the span, and the calendars offer only the days within while the end is being picked. A failed rule says which.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, DateRangeBox, Stack, type DateRange } from '@motifx-community/ui';
+
+const today = new Date();
+const inMonths = (n: number) => new Date(today.getFullYear(), today.getMonth() + n, today.getDate());
+
+/** A stay of one to fourteen nights, within the next six months, never starting on a Sunday; the message says which rule failed. */
+export default function Limits() {
+    const s = reactive({ stay: [null, null] as DateRange, told: '' });
+    let box!: DateRangeBox;
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <DateRangeBox
+                ref={(b: DateRangeBox) => (box = b)}
+                label="Stay"
+                min={today}
+                max={inMonths(6)}
+                minDays={1}
+                maxDays={14}
+                disabledDates={d => d.getDay() === 0}
+                required
+                x-model={() => s.stay}
+            />
+            <Button text="Check" variant="outline" onclick={() => void box.validate().then(ok => (s.told = ok ? 'Fine.' : box.validationMessage))} />
+            <output class="dr-check">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## With a time, and in another locale
+
+```tsx
+import { reactive } from '@motifx/core';
+import { DateRangeBox, Stack, type DateRange } from '@motifx-community/ui';
+
+/** Date and time on both ends: the time is typed after the date, the calendars keep it; one box in Turkish. */
+export default function DateTime() {
+    const s = reactive({ shift: [new Date(2026, 2, 10, 8, 30), new Date(2026, 2, 10, 17, 0)] as DateRange, trip: [null, null] as DateRange });
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <DateRangeBox label="Shift" type="datetime" x-model={() => s.shift} displayFormat={{ dateStyle: 'short', timeStyle: 'short' }} />
+            <DateRangeBox label="Seyahat" locale="tr-TR" showWeekNumbers x-model={() => s.trip} startPlaceholder="gidiş" endPlaceholder="dönüş" />
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Typing` | Each side is a masked input in the locale’s order (`22.11.2006`); a whole, real date is taken as it is finished, an emptied side becomes `null`. Tab moves from the start to the end. |
+| `Picking` | On the popup the first pick is the start, the second the end: an earlier second pick becomes the start. With both chosen, the next pick starts a new range. While the end is being picked, the pointer shows the range it would make. |
+| `Two months` | The calendars show the start’s month and the next; paging one pages the other with it. |
+| `Presets` | A list beside the calendars; a press takes the range and closes. |
+| `Keyboard` | Alt+Down opens the popup; in it the calendars take the arrow keys, Enter picks; Escape closes, and clears the field when `clearButton` is on and the popup is closed. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Inputs` | Two text boxes named “<label>, Start date” and “<label>, End date” in the kit language; the field’s label marks the start. |
+| `Popup` | A dialog named “Choose date”; the calendars are the kit’s grids, the presets a list box. |
+| `Messages` | The rules speak in the kit language; a rule of your own in yours. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-date-range-box` | The field. `data-type`. |
+| `.mx-date-range-box__start, .mx-date-range-box__end, .mx-date-range-box__separator` | The inputs and the glyph between them. |
+| `.mx-date-range-box__toggle, .mx-date-range-box__clear` | The buttons in the box. |
+| `.mx-date-range-box__popup, .mx-date-range-box__calendar, .mx-date-range-box__presets` | The popup, each calendar, the presets. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `date-range-box.separator, .presets` | Units: the glyph between the inputs (`icon`, `bg`), the list of presets (`focus`, `beside`). |
+| `date-range-box.calendar` | Place: a calendar on the popup. |
+| `date-range-box.popup-gap` | Between the calendars and the presets. |
+| `calendar.cell range-start, range-end, range-single, range-in` | The calendar’s cells in a range: its ends and the days between, drawn by each language. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `Bind<DateRange>` | `[null, null]` | The `[start, end]` pair; either `null` while not chosen. `x-model` binds it two-way. |
+| `type` | `Bind<'date' \| 'datetime'>` | `'date'` | With `datetime` the time is typed after the date; the calendars keep it. |
+| `min, max, disabledDates` | `Bind<Date \| null>`, `Bind<(d: Date) => boolean>` | — | The dates allowed, on both ends, typed or picked. |
+| `minDays, maxDays` | `Bind<number \| null>` | `null` | The least and the most days a range may span, the end counted from the start; while the end is picked the calendars offer only days within. |
+| `presets` | `Bind<readonly DateRangePreset[] \| boolean>` | `false` | `true`: the kit’s ready-made ranges beside the calendars (today, yesterday, the last 7 and 30 days, this and last month); your own as `{ text, range: () => DateRange }`. |
+| `calendars` | `Bind<1 \| 2>` | `2` | Months side by side on the popup; two stay a month apart as one is paged. |
+| `closeOnComplete` | `Bind<boolean>` | `true` | The popup closes once both ends are picked. |
+| `locale, displayFormat, firstDayOfWeek, showWeekNumbers, showSeconds` |  |  | As on the `DateBox`. |
+| `startPlaceholder, endPlaceholder` | `Bind<string>` | `''` | Shown in an empty box. |
+| `clearButton, showPickerButton` | `Bind<boolean>` | `false`, `true` | The clear button; the button that opens the calendars. |
+| `label, helpText, required, rules, readOnly, size, variant…` |  |  | The field props, as on every editor. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `startDate, endDate` | `Date \| null` | The ends as properties of their own. |
+| `inputElement, endInputElement` | read-only | The start’s and the end’s inputs. |
+| `open(), close(), opened` | `boolean` / `void` | The popup with the calendars; `onOpened`, `onClosed`. |
+| `clear()` | `void` | Empties both ends. |
+| `validate(), validationMessage, isValid` |  | As on every field: an unfinished date, a date outside `min`, `max` or `disabledDates`, a start after the end, a span under `minDays` or over `maxDays`. |
+| `onValueChanged` | event | The pair changed (`value`, `previousValue`, `byUser`). |
+
+
 ---
 
 # ColorBox and ColorPicker
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A colour as a field, with a picker in a popup; or the picker on its own. The picker has an area of saturation and brightness, a hue strip, an opacity strip, inputs for the channels and preset colours.
 
@@ -7426,7 +8099,7 @@ export default function Buttons() {
 
 # Calendar
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A month of days to pick a date from, with a year and a decade view to get far quickly. It is the picker of DateBox, and it works on its own.
 
@@ -7566,7 +8239,7 @@ export default function Views() {
 
 # Slider
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A value picked on a track by dragging a thumb or with the keys: one number, or a range with two thumbs. Steps, marks with labels, a value bubble, a vertical form and number formatting, with the label, help line and validation every field has.
 
@@ -7813,7 +8486,7 @@ The names of the two thumbs of a range come from `uiLocale.strings` (`minimum`,
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, Slider, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, Slider, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the names of the thumbs; the price slider writes its numbers in the chosen language. */
@@ -7821,7 +8494,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -7931,7 +8604,7 @@ export default function Localization() {
 
 # Rating
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A row of stars to give a score or to show one, whole or by halves. It is a field: label, help text, rules and `x-model` work as in every field.
 
@@ -8055,11 +8728,216 @@ export default function Icons() {
 | `label, helpText, readOnly, required, rules, size…` | see Field |  | Everything a field has: a rating is one. |
 
 
+---
+
+# FileUploader
+
+> Editors · @motifx-community/ui 0.1.0-beta.2
+
+Files chosen with a button or dropped on the box, listed with their size and what happens to them: uploaded as they come, on a button or from code, with progress, cancel, retry and remove on each. Files outside the limits are listed with the reason.
+
+## Import
+
+```tsx
+import { FileUploader } from '@motifx-community/ui';
+```
+
+## Choosing, dropping, uploading
+
+`upload` is your own way to send a file: report progress, stop on the signal, resolve to the response. With `uploadUrl` instead, the uploader sends the file itself, in one piece or in chunks (`chunkSize`).
+
+```tsx
+import { reactive } from '@motifx/core';
+import { FileUploader, Stack } from '@motifx-community/ui';
+
+// Stands in for a server: takes two seconds per megabyte, reports as it goes, stops on the signal.
+const send = (file: File, report: (fraction: number) => void, signal: AbortSignal) =>
+    new Promise<string>((resolve, reject) => {
+        const steps = 20;
+        const wait = Math.max(600, Math.min(4000, (file.size / 1_000_000) * 2000)) / steps;
+        let step = 0;
+        const timer = setInterval(() => {
+            step++;
+            report(step / steps);
+            if (step === steps) {
+                clearInterval(timer);
+                resolve(`id-${file.name}`);
+            }
+        }, wait);
+        signal.addEventListener('abort', () => {
+            clearInterval(timer);
+            reject(new Error('stopped'));
+        });
+    });
+
+/** Files chosen or dropped go up as they come, through your own upload; each row shows progress, cancel, retry, remove. */
+export default function Basic() {
+    const s = reactive({ files: [] as readonly File[], told: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <FileUploader
+                label="Attachments"
+                helpText="Any files; a stand-in server takes them."
+                upload={send}
+                x-model={() => s.files}
+                onUploaded={e => (s.told = `${e.file.name} is up as ${String(e.item.response)}.`)}
+                onUploadAborted={e => (s.told = `${e.file.name} was stopped.`)}
+            />
+            <output class="fu-told">{() => s.told || `${s.files.length} file(s) taken`}</output>
+        </Stack>
+    );
+}
+```
+
+## Limits
+
+```tsx
+import { reactive } from '@motifx/core';
+import { FileUploader, Stack } from '@motifx-community/ui';
+
+/** Only pictures and PDFs, up to 2 MB each and three in all; a file outside is listed with the reason. */
+export default function Limits() {
+    const s = reactive({ files: [] as readonly File[], refused: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <FileUploader
+                label="Documents"
+                accept=".pdf,image/*"
+                maxFileSize={2_000_000}
+                maxFiles={3}
+                required
+                x-model={() => s.files}
+                onFilesAdded={e => (s.refused = e.refused.length ? e.refused.map(r => r.message).join(' ') : '')}
+            />
+            <output class="fu-refused">{() => s.refused}</output>
+        </Stack>
+    );
+}
+```
+
+## When files go up
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, FileUploader, Stack } from '@motifx-community/ui';
+
+const quick = (file: File, report: (fraction: number) => void) =>
+    new Promise<void>(resolve => {
+        let step = 0;
+        const timer = setInterval(() => {
+            report(++step / 10);
+            if (step === 10) {
+                clearInterval(timer);
+                resolve();
+            }
+        }, 120);
+    });
+
+/** An Upload button sends what was chosen; or nothing goes until code says so. One file only, no dropping. */
+export default function Modes() {
+    const s = reactive({ one: [] as readonly File[] });
+    let manual!: FileUploader;
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <FileUploader label="Photo" multiple={false} allowDrop={false} accept="image/*" upload={quick} uploadMode="button" x-model={() => s.one} />
+            <Stack orientation="horizontal" wrap align="center">
+                <FileUploader ref={(u: FileUploader) => (manual = u)} label="Logs" accept=".log,.txt" upload={quick} uploadMode="manual" />
+                <Button text="Send the logs" variant="outline" onclick={() => void manual.upload()} />
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Sending to a server
+
+The uploader posts a form with the file in `uploadField` (`file` by default) to `uploadUrl`, with `uploadHeaders`; a 2xx answer is the item’s `response`, JSON parsed when it is JSON. With `chunkSize` each piece carries `Content-Range` and the fields `chunkIndex` and `chunkCount`.
+
+```tsx
+<FileUploader
+  label="Attachments"
+  uploadUrl="/api/files"
+  uploadHeaders={{ Authorization: 'Bearer ' + token }}
+  chunkSize={1_000_000}
+  onUploaded={(e) => this.attachments.push(e.item.response as Attachment)}
+/>
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Choosing` | The button opens the file dialog; files may be dropped on the box too, which lights up while they are over it. |
+| `Refusing` | A file outside `accept`, the sizes or `maxFiles` is listed as refused with the reason, and is not in the value. |
+| `Uploading` | As chosen, on the Upload button, or from code. A row shows the progress and a Cancel button meanwhile; afterwards “Uploaded”, or the failure with Retry. The server’s answer is the item’s `response` (JSON parsed). |
+| `Chunks` | With `chunkSize` the file goes in pieces, each a request with `Content-Range: bytes start-end/total`; progress runs over the whole. |
+| `Removing` | Each row has a remove button; a running upload is stopped first. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Button` | The select button is the field’s control: the label marks it, Space and Enter open the dialog. |
+| `List` | A list of rows: the name, the size and the state as text; the progress bar named after the file; the buttons named “Cancel the upload of …”, “Retry”, “Remove …”. |
+| `Messages` | The reasons a file was refused and the failures speak in the kit language, or in the server’s words. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-file-uploader` | The field. `data-dragover` while files are over it. |
+| `.mx-file-uploader__select, .mx-file-uploader__drop, .mx-file-uploader__upload` | The select button, the hint, the Upload button. |
+| `.mx-file-uploader__list, .mx-file-uploader__item` | The list and each row. `data-status` on the row. |
+| `.mx-file-uploader__icon, __name, __size, __state, __progress, __actions, __action` | The parts of a row. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `file-uploader.over, .select, .upload, .hint, .list, .item, .icon, .name, .size, .state` | Units: the box with files over it, the two buttons (`hover`, `pressed`, `focus`, `disabled`), the hint, the list, a row per status, the file glyph, the texts. |
+| `file-uploader.field, .action` | Places: the field’s box as a drop zone (a dashed frame, its corners, its padding); the row’s buttons. |
+| `file-uploader.box-gap, .button-gap, .item-gap` | The spaces in the box, in a button and in a row. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `Bind<readonly File[]>` | `[]` | The files taken (the refused ones are not in it). `x-model` binds it two-way. |
+| `multiple` | `Bind<boolean>` | `true` | Several files at once; `false` keeps one, the newest. |
+| `accept` | `Bind<string>` | `''` | What may be chosen, as for `<input type="file">`: `.png,.jpg`, `image/*`, `application/pdf`. |
+| `maxFileSize, minFileSize` | `Bind<number \| null>` | `null` | Bytes. A file outside is listed as refused, with the reason. |
+| `maxFiles` | `Bind<number \| null>` | `null` | How many files may be taken in all. |
+| `allowDrop` | `Bind<boolean>` | `true` | Files may be dropped on the box. |
+| `uploadMode` | `Bind<UploadMode>` | `instant` / `manual` | `instant`: as chosen; `button`: an Upload button; `manual`: `upload()` from code. Default `instant` with `uploadUrl` or `upload`, else `manual`. |
+| `uploadUrl, uploadMethod, uploadHeaders, uploadField` | `Bind<string \| null>`, … | `null`, `POST`, `null`, `file` | Where and how the uploader itself sends a file (XMLHttpRequest, with progress), as a form with the file in `uploadField`. |
+| `chunkSize` | `Bind<number \| null>` | `null` | Bytes per request: the file goes in pieces, each with its `Content-Range` and `chunkIndex` / `chunkCount` fields; the last answer is the response. |
+| `upload` | `(file, report, signal) => Promise<unknown>` | — | Your own upload instead of `uploadUrl`: call `report(0…1)` as it goes, stop on `signal`; what it resolves to is the response. |
+| `selectText, dropText, uploadText` | `Bind<string>` | the kit’s | The button, the hint beside it, the Upload button. |
+| `showFileList` | `Bind<boolean>` | `true` | The list of files under the box. |
+| `label, helpText, required, rules, readOnly, size, variant…` |  |  | The field props, as on every editor. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `items` | read-only | Every file in the list with what happened to it: `file`, `status` (`ready`, `uploading`, `done`, `error`, `aborted`, `invalid`), `progress`, `response`, `message`. |
+| `isUploading` | read-only | An upload is running. |
+| `openDialog()` | `void` | Opens the browser’s file dialog, as the button does. |
+| `addFiles(files)` | `void` | Takes files as if chosen: the limits apply, `onFilesAdded` is asked, uploads start as the mode says. |
+| `upload(item?)` | `Promise<void>` | Uploads the files waiting, or one of them; what `manual` mode calls. |
+| `abort(item?), remove(item), clear()` | `void` | Stops an upload (the file stays, cancelled); takes a file out; takes every file out. |
+| `onFilesAdded` | event | Files were chosen or dropped (`files`, `refused`); `cancel = true` takes none. |
+| `onFileRemoved, onUploadStarted, onProgress, onUploaded, onUploadError, onUploadAborted` | event | One file’s way through: each with `item` and `file`, a failure with `error`. |
+| `onValueChanged` | event | The files taken changed. |
+
+
 ---
 
 # CheckBox
 
-> Choice · @motifx-community/ui 0.1.0-beta.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 A checkbox with its caption: checked, unchecked or indeterminate, three states on request, read-only, required and checked with its group. A native checkbox underneath, drawn from the design tokens.
 
@@ -8303,7 +9181,7 @@ The checkbox writes no text of its own; the `required` message comes from `uiLoc
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of every field on the page; a required message already shown follows too. */
@@ -8311,7 +9189,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -8399,7 +9277,7 @@ export default function Localization() {
 
 # Switch
 
-> Choice · @motifx-community/ui 0.1.0-beta.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 An on / off switch with its caption: a track with a thumb that slides, an optional on / off text inside or next to it, read-only and required. A native checkbox with the switch role underneath.
 
@@ -8645,7 +9523,7 @@ The switch writes no text of its own: `onText` and `offText` are yours, and can
 
 # RadioGroup
 
-> Choice · @motifx-community/ui 0.1.0-beta.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 A set of options of which one is chosen: from plain values, from your own objects or from a live list; one under the other, side by side or in columns; options that are disabled, hidden or carry a help line; one Tab stop and the arrow keys.
 
@@ -8973,7 +9851,7 @@ The group writes no text of its own: the option texts are yours (functions of yo
 
 # DropDown
 
-> Choice · @motifx-community/ui 0.1.0-beta.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 Picks one item from a list. The field shows the chosen item; the list opens below it with the keyboard or a press, can be searched, grouped and drawn your way, and stays fast with thousands of items.
 
@@ -9121,21 +9999,22 @@ export const cities = ['Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Kon
 | `Groups` | Each group is `role="group"` named by its header. |
 | `Long lists` | Only the rows in view are drawn; each option says where it is with `aria-posinset` and `aria-setsize`. |
 | `Search` | The search box controls the list and names the highlighted option the same way. |
+| `Waiting` | While the value's item is asked for, the combobox is `aria-busy` and its text says "Loading…" to screen readers; a key the source does not have carries the reason as its title. |
 
 ## Localization
 
-The search box, the clear button and the empty list text come from `uiLocale.strings`.
+The search box, the clear button, the empty list text, the wait (`loading`) and the reason a key is marked (`notInList`, `loadFailed`) come from `uiLocale.strings`.
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, DropDown, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, DropDown, uiLocale } from '@motifx-community/ui';
 
 /** Switches the texts of every drop-down on the page: the search box, the clear button, the empty list. */
 export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -9150,8 +10029,9 @@ export default function Localization() {
 
 | Hook | What it is |
 | --- | --- |
-| `.mx-drop-down` | Added to the field. `data-open` while the list is open; the field attributes of TextBox. |
-| `.mx-drop-down__display, .mx-drop-down__text, .mx-drop-down__chevron` | The combobox, the chosen text (`data-placeholder` when empty), the arrow. |
+| `.mx-drop-down` | Added to the field. `data-open` while the list is open, `data-loading` while the value's item is asked for; the field attributes of TextBox. |
+| `.mx-drop-down__display, .mx-drop-down__text, .mx-drop-down__chevron` | The combobox, the chosen text (`data-placeholder` when empty, `data-missing` for a key the source does not have), the arrow. |
+| `.mx-drop-down__spinner` | The spinner in the arrow's place while the value's item is asked for. |
 | `.mx-drop-down__popup, .mx-drop-down__search` | The popup and its search box. |
 | `.mx-list, .mx-list__item, .mx-list__header` | The list (shared), its options (`data-active`, `data-selected`) and group headers. |
 
@@ -9160,6 +10040,7 @@ export default function Localization() {
 | Token | What it sets |
 | --- | --- |
 | `field.*` | The field, as for TextBox. |
+| `drop-down.value, drop-down.chevron, drop-down.spinner, drop-down.spinner-shape` | Units: the chosen text (`placeholder`, `missing`, `disabled`), the arrow (`open`, `disabled`), the ring that turns while the value's item is asked for and the shape a language may draw instead (with the spinner's shapes and timing). |
 | `list.item-height, list.item` | The options: their row height, and the item unit in each state (`hover`, `pressed`, `active`, `selected`, `selected-hover`, `selected-pressed`, `disabled`, `next`, `select-all`). |
 | `list.indicator, list.check, list.mark, list.icon, list.text` | Units: the bar on the chosen option (`multiple`), the check of a list of several choices and its mark, an icon, the text. |
 | `list.container, list.group, list.header, list.select-all-divider, list.empty` | Units: the list (its space and most height), a group, group headers, the line under "Select all", the empty text. |
@@ -9172,6 +10053,9 @@ export default function Localization() {
 | --- | --- | --- | --- |
 | `value` | `Bind<V \| null>` | `null` | The value of the chosen item. `x-model` binds it two-way. |
 | `items` | `Bind<readonly T[]>` | `[]` | Plain values, `DropDownItem`s (`{ value, text, icon?, group?, enabled? }`) or objects of your own. A function is followed; items changed in place show after `refresh()`. |
+| `dataSource` | `Bind<DataSource<T> \| null>` | `null` | Items from the data layer, loaded where the list is scrolled to and searched on its `searchFields`. Wins over `items`. A value on no loaded page is asked for by key; meanwhile the field waits (see Lookup). |
+| `valueText` | `Bind<string>` | `''` | The value's text while its item is asked for from `dataSource`, shown at once instead of waiting (a record that carries the name: `valueText={() => order.customerName}`). |
+| `searchDelay` | `Bind<number>` | `250` with a data source, else `0` | Milliseconds between the last key in the search box and the search. |
 | `textField / valueField` | `Bind<ItemField<T>>` | `'text'` / `'value'` | A property name or a function `(item) => …`. Without `valueField` an object with a `value` gives that, anything else is its own value. |
 | `iconField, groupField, enabledField` | `Bind<ItemField<T>>` | — | An icon per option; options with the same group follow each other under its name; options that cannot be chosen. |
 | `placeholder` | `Bind<string>` | `''` | Shown while nothing is chosen. |
@@ -9197,7 +10081,7 @@ A prop whose value is a function of its own (`textField`, a template) takes the
 
 | Method | Returns | Description |
 | --- | --- | --- |
-| `open(search?)` | `boolean` | Opens the list; `search` starts the search box with that text. `false` when disabled or read-only. |
+| `open(search?)` | `boolean` | Opens the list; `search` starts the search box with that text. `false` when disabled, read-only, or while the value's item is asked for. |
 | `close()` | `void` | Closes it; focus goes back to the field. |
 | `clear()` | `void` | Empties the value. |
 | `refresh()` | `void` | Your items may be plain or reactive; the drop-down reads them as they are. After changing them in place, call `refresh()`. The field's text and the open list follow. |
@@ -9294,7 +10178,7 @@ export default function Validation() {
 
 # ComboBox and Autocomplete
 
-> Choice · @motifx-community/ui 0.1.0-beta.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 A text field with a list that follows what is typed. The items come from memory or from a data source of the data layer, searched on the server. `Autocomplete` is the free-text kind: the value is the text.
 
@@ -9512,7 +10396,7 @@ export default function CustomValues() {
 
 # Lookup
 
-> Choice · @motifx-community/ui 0.1.0-beta.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 Picks one row of a table-like list, typically from a data source searched on the server: a customer by its company, contact and city. The field shows the chosen row's text; everything else works as in DropDown.
 
@@ -9545,6 +10429,29 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 }
 ```
 
+## A value on no loaded page
+
+A value whose row is not loaded is asked for by key, in one request with the keys other fields and grids over the same source need at that moment. Meanwhile the field waits: a spinner in the arrow's place, the list closed, never the key as its text. A record that carries the name too gives it as `valueText`, and the field shows it at once. A key the server does not have shows itself, muted and underlined, and its title says why; when the request failed, opening the list asks again.
+
+```tsx
+import { data } from '@motifx-community/data';
+
+/** Rows in memory that answer a little later, the way a server does; for the examples. */
+export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
+  constructor(
+    options: data.ArrayAdapterOptions<T>,
+    private readonly delayMs = 300,
+  ) {
+    super(options);
+  }
+
+  override async load(options: data.LoadOptions = {}): Promise<data.LoadResult<T>> {
+    await new Promise((done) => setTimeout(done, this.delayMs));
+    return super.load(options);
+  }
+}
+```
+
 ## API reference
 
 | Prop | Type | Default | Description |
@@ -9553,7 +10460,7 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 | `showColumnHeaders` | `Bind<boolean>` | `true` | The header above the rows. |
 | `popupWidth` | `Bind<string>` | `lookup.popup-width` | The least width of the list. |
 | `searchEnabled` | `Bind<boolean>` | `true` | A search box above the list (DropDown has it off by default). |
-| `everything of DropDown` |  |  | `items`, `dataSource`, `textField`, `valueField`, `searchDelay`, `clearButton`, validation, keyboard… |
+| `everything of DropDown` |  |  | `items`, `dataSource`, `valueText`, `textField`, `valueField`, `searchDelay`, `clearButton`, validation, keyboard… |
 | `refresh()` |  |  | Your items and columns may be plain or reactive; the lookup reads them as they are. After changing them in place, call `refresh()`. |
 
 ## Example files
@@ -9639,12 +10546,73 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 }
 ```
 
+`ByKey.tsx`
+
+```tsx
+import { reactive } from '@motifx/core';
+import { data } from '@motifx-community/data';
+import { Button, Lookup } from '@motifx-community/ui';
+import { SlowAdapter } from '../../../shared/slow-adapter';
+
+interface Customer {
+  id: number;
+  company: string;
+  city: string;
+}
+
+const companyOf = (id: number) => `${['Alfreds', 'Bon app', 'Ernst', 'Hanari', 'Island', 'Lehmanns'][id % 6]} ${['Trading', 'Handel', 'Markt', 'Foods'][id % 4]} ${id}`;
+const rows: Customer[] = Array.from({ length: 2000 }, (_, i) => ({ id: i + 1, company: companyOf(i + 1), city: ['Berlin', 'Paris', 'İstanbul', 'Madrid'][i % 4] }));
+
+/** Values on no loaded page of a server that answers after 1.2 s: one field waits for its row, one shows the name its record carries, one has a key the server does not have. */
+export default function ByKey() {
+  const customers = new data.DataSource<Customer, number>({
+    adapter: new SlowAdapter<Customer, number>({ data: rows, key: 'id' }, 1200),
+    loadMode: 'blocks',
+    pageSize: 50,
+    searchFields: ['company', 'city'],
+  });
+  const columns = [
+    { field: 'company', caption: 'Company' },
+    { field: 'city', caption: 'City', width: '7rem' },
+  ];
+  const waiting = reactive({ customer: 1500 as number | null });
+  // A record as it came from the server: the customer's key and, beside it, the name.
+  const order = reactive({ customer: 1500 as number | null, customerName: companyOf(1500) });
+
+  const another = () => {
+    const id = 100 + Math.floor(Math.random() * 1900);
+    waiting.customer = id;
+    order.customer = id;
+    order.customerName = companyOf(id);
+  };
+
+  return (
+    <>
+      <Lookup class="lk-waits" label="Waits for its row" dataSource={customers} textField="company" valueField="id" columns={columns} x-model={() => waiting.customer} stretch />
+      <Lookup
+        class="lk-given"
+        label="Shows the name it is given"
+        dataSource={customers}
+        textField="company"
+        valueField="id"
+        columns={columns}
+        valueText={() => order.customerName}
+        x-model={() => order.customer}
+        stretch
+      />
+      <Lookup class="lk-missing" label="A key the server does not have" dataSource={customers} textField="company" valueField="id" columns={columns} value={9999} stretch />
+      <Button class="lk-another" text="Another customer" variant="outline" onclick={another} />
+    </>
+  );
+}
+```
+
 
 ---
 
 # ProgressBar and Spinner
 
-> Feedback · @motifx-community/ui 0.1.0-beta.0
+> Feedback · @motifx-community/ui 0.1.0-beta.2
 
 ProgressBar shows how far some work is, as a line or a circle, or that it runs when that is not known. Spinner says "busy, wait": a turning ring, alone or over a panel while it loads, shown only after a delay so quick work does not flash it.
 
@@ -9951,7 +10919,7 @@ A bar or a spinner without a label is named `uiLocale.strings.loading`. The perc
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, ProgressBar, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, ProgressBar, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the name of unlabelled bars and spinners, and the language the percent is written in. */
@@ -9959,7 +10927,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -10049,7 +11017,7 @@ export default function Localization() {
 
 # Tooltip
 
-> Feedback · @motifx-community/ui 0.1.0-beta.0
+> Feedback · @motifx-community/ui 0.1.0-beta.2
 
 A short description shown next to an element: after the pointer rests on it, when it gets keyboard focus, or from code. It can be hovered, Escape hides it, and one is open at a time on the page.
 
@@ -10388,11 +11356,424 @@ export default function ManyElements() {
 | `onClosed` | It was hidden. |
 
 
+---
+
+# Popover
+
+> Feedback · @motifx-community/ui 0.1.0-beta.2
+
+Content next to the element it belongs to: a title, a close button, a form, a card. It opens on a press or while the pointer rests on its target, follows it, and points at it with an arrow where the design language has one.
+
+## Import
+
+```tsx
+import { Popover } from '@motifx-community/ui';
+```
+
+## From JSX and from code
+
+The JSX children are the content; `target` names the element or component it opens next to. From code, `content` gives the content and `open()`, `close()` and `toggle()` move it; `value` and `x-model` say whether it is open.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Popover, Stack, TextBox } from '@motifx-community/ui';
+
+/** A popover with a title, a close button and a small form; one made from code for a plain element. */
+export default function Basic() {
+    const s = reactive({ open: false, name: 'Ada', saved: '' });
+    let button!: Button;
+    let link!: HTMLElement;
+    const coded = new Popover({ title: 'From code', content: new Button({ text: 'OK', variant: 'outline', onclick: () => coded.close() }) });
+
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <Button ref={(b: Button) => (button = b)} text="Rename" variant="outline" />
+            <Popover target={() => button} title="New name" showClose x-model={() => s.open}>
+                <Stack orientation="horizontal" wrap align="center">
+                    <TextBox label="Name" x-model={() => s.name} />
+                    <Button text="Save" tone="accent" onclick={() => ((s.saved = s.name), (s.open = false))} />
+                </Stack>
+            </Popover>
+            <output class="po-saved">{() => (s.saved ? `Saved: ${s.saved}` : s.open ? 'Open' : 'Closed')}</output>
+            <a
+                href="#from-code"
+                class="po-link"
+                ref={(c: { element: HTMLElement }) => (link = c.element)}
+                onclick={(e: Event) => {
+                    e.preventDefault();
+                    coded.target = link;
+                    coded.toggle();
+                }}
+            >
+                A popover from code
+            </a>
+        </Stack>
+    );
+}
+```
+
+## While the pointer rests
+
+`showOn: 'hover'` opens it after `delay` while the pointer rests on the target, and when the target has keyboard focus; the pointer may move onto the popover. It closes `hideDelay` after the pointer leaves both.
+
+```tsx
+import { Avatar, Popover, Stack } from '@motifx-community/ui';
+
+/** A card that opens while the pointer rests on a name, or when the name has keyboard focus. */
+export default function Hover() {
+    let name!: HTMLElement;
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <span>
+                Reviewed by{' '}
+                <a href="#ada" class="po-person" ref={(c: { element: HTMLElement }) => (name = c.element)} onclick={(e: Event) => e.preventDefault()}>
+                    Ada Lovelace
+                </a>
+            </span>
+            <Popover target={() => name} showOn="hover" placement="top" label="Ada Lovelace">
+                <Stack orientation="horizontal" align="center">
+                    <Avatar name="Ada Lovelace" size="lg" />
+                    <Stack>
+                        <strong>Ada Lovelace</strong>
+                        <span>Analytical Engine, Programs</span>
+                    </Stack>
+                </Stack>
+            </Popover>
+        </Stack>
+    );
+}
+```
+
+## Placements, the arrow and a width
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, CheckBox, Popover, Stack, type PopupPlacement } from '@motifx-community/ui';
+
+const PLACEMENTS: PopupPlacement[] = ['top-start', 'top', 'top-end', 'start', 'end', 'bottom-start', 'bottom', 'bottom-end'];
+
+/** Every placement; the arrow where the language draws one, and a width of its own. */
+export default function Placements() {
+    const s = reactive({ arrow: true, placement: 'bottom' as PopupPlacement });
+    let button!: Button;
+    return (
+        <Stack gap="md">
+            <Stack orientation="horizontal" wrap align="center">
+                {PLACEMENTS.map(placement => (
+                    <Button key={placement} text={placement} variant={() => (s.placement === placement ? 'solid' : 'outline')} size="sm" onclick={() => (s.placement = placement)} />
+                ))}
+                <CheckBox label="Arrow" x-model={() => s.arrow} />
+            </Stack>
+            <div style="display: flex; justify-content: center; padding: 3rem 0">
+                <Button ref={(b: Button) => (button = b)} text="Open" />
+            </div>
+            <Popover target={() => button} placement={() => s.placement} arrow={() => s.arrow} width="16rem" label="Placement">
+                <p>{() => `Placed at ${s.placement}; it moves to the other side when there is no room.`}</p>
+            </Popover>
+        </Stack>
+    );
+}
+```
+
+## Keeping it open
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Popover, Stack, TextArea } from '@motifx-community/ui';
+
+/** A press outside does not close it, and onClosing keeps it open while there is unsaved text; Escape and the button close it. */
+export default function Events() {
+    const s = reactive({ note: '', told: '' });
+    let button!: Button;
+    let pop!: Popover;
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <Button ref={(b: Button) => (button = b)} text="Add a note" variant="outline" />
+            <Popover
+                ref={(p: Popover) => (pop = p)}
+                target={() => button}
+                title="Note"
+                closeOnOutside={false}
+                onClosing={e => {
+                    if (e.reason === 'escape' && s.note.trim() !== '') {
+                        e.cancel = true;
+                        s.told = 'Save or clear the note first.';
+                    }
+                }}
+                onClosed={reason => (s.told = `Closed: ${String(reason)}`)}
+            >
+                <Stack gap="sm">
+                    <TextArea label="Text" x-model={() => s.note} rows={3} />
+                    <Button text="Save" tone="accent" onclick={() => ((s.note = ''), pop.close())} />
+                </Stack>
+            </Popover>
+            <output class="po-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Opening` | By a press on the target, by the pointer resting on it (`hover`), or from code. It appears in the browser’s top layer, next to the target, and follows it while the page scrolls. |
+| `Focus` | Opened by a press or from code, focus moves to the first focusable part inside, else to the popover; it goes back to the target when the popover closes. Opened by hover, focus stays where it is. |
+| `Closing` | Escape, a press outside it and its target, focus leaving both (Tab out), the close button, the target pressed again, or the pointer leaving both (`hover`). `onClosing` may keep it open. |
+| `Placement` | `placement` names the side and the alignment, as for the kit’s popups; without room on that side it opens on the other. |
+| `Where it lives` | Made from code, it goes into the nearest container of its target that can hold it, so it stays in the target’s window and landmark. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Role` | `dialog`, named by its title, else by `label`: give it one. |
+| `Target` | `aria-controls` and `aria-expanded`; `aria-haspopup="dialog"` when a press opens it. |
+| `Keyboard` | Tab moves through the content and out (which closes it); Escape closes and returns focus. A `hover` popover opens on keyboard focus too. |
+| `Arrow` | Decorative. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-popover` | The popover. `data-side` (`top`, `bottom`, `start`, `end`), `data-arrow`. |
+| `.mx-popover__arrow` | The arrow. |
+| `.mx-popover__header, .mx-popover__title, .mx-popover__close` | The header, its title and the close button. |
+| `.mx-popover__body` | The content. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `popover.surface, .arrow, .header, .title, .body` | Units: the surface (`focus`), the arrow (`display`, `size`, its fill and frame), the header, the title and the body. |
+| `popover.close` | Place: the close button’s look (`variant`). |
+| `popover.offset, .enter-offset, .header-gap` | The gap to the target, how far it comes in as it appears, the space between title and close button. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `target` | `Bind<Element \| ComponentBase \| null>` | `null` | The element or component it opens next to. |
+| `title` | `Bind<string>` | `''` | A title in the header. The same property as `text`. |
+| `label` | `Bind<string>` | `''` | What screen readers call it when it has no title. |
+| `content` | `Bind<ComponentBase \| null>` | `null` | Content from code, after the JSX children. |
+| `showOn` | `Bind<PopoverShowOn>` | `'click'` | `click`: a press on the target toggles it; `hover`: the pointer resting on the target, or keyboard focus on it; `manual`: only code. |
+| `placement` | `Bind<PopupPlacement>` | `'bottom'` | The side and the alignment; it opens on the other side when there is no room. |
+| `arrow` | `Bind<boolean>` | `true` | An arrow towards the target, where the design language draws one. |
+| `showClose` | `Bind<boolean>` | `false` | A close button in the header. |
+| `width` | `Bind<string \| number \| null>` | `null` | A width of its own (a CSS length, or pixels). |
+| `closeOnOutside` | `Bind<boolean>` | `true` | A press outside it and its target closes it. |
+| `delay, hideDelay` | `Bind<number>` | `300`, `200` | Milliseconds the pointer rests on the target before it opens, and it stays after the pointer leaves both (`showOn: 'hover'`). |
+| `value` | `Bind<boolean>` | `false` | Open or not; `x-model` binds it two-way. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onOpened` | event | It opened. |
+| `onClosing` | event | About to close (`reason`); `cancel = true` keeps it open. |
+| `onClosed` | event | It closed, with the reason: `escape`, `outside`, `focus`, `toggle`, `hover`, `close-button`, `code`. |
+| `open(), close(reason?), toggle()` | `boolean` / `void` | From code; `open()` is `false` without a target on the page or when disabled. |
+| `place()` | `void` | Lines it up with its target again, after its content changed size. |
+| `isOpen` | read-only | Whether it is open now. |
+| `closeButton, body` | read-only | The close button (the kit’s) and the part that holds the content. |
+
+
+---
+
+# LoadPanel
+
+> Feedback · @motifx-community/ui 0.1.0-beta.2
+
+A “loading” layer over a container or the whole page: a shade, a pane with the kit’s spinner and a message, a Cancel button when the work can be stopped. Nothing under it can be used meanwhile, and focus comes back afterwards.
+
+## Import
+
+```tsx
+import { LoadPanel } from '@motifx-community/ui';
+```
+
+## Over a container
+
+`target` names the component or element it covers; `value` (or `x-model`) shows and hides it, `show()` and `hide()` from code. `delay` keeps quick work from flashing it.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, LoadPanel, Panel, Stack, TextBox } from '@motifx-community/ui';
+
+/** A load panel over a panel while its orders load: bound with x-model, shown after a short delay. */
+export default function Container() {
+    const s = reactive({ loading: false, result: '' });
+    let panel!: Panel;
+
+    // Stands in for a call to the server.
+    const load = () => {
+        s.loading = true;
+        s.result = '';
+        setTimeout(() => {
+            s.loading = false;
+            s.result = 'Orders loaded.';
+        }, 1800);
+    };
+
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Panel class="lp-panel" variant="outline" padding="md" style="min-block-size: 10rem" ref={(c: Panel) => (panel = c)}>
+                <Stack orientation="horizontal" wrap align="center">
+                    <TextBox label="Customer" value="Ada" />
+                    <Button text="Load orders" tone="accent" onclick={load} />
+                </Stack>
+            </Panel>
+            <LoadPanel target={() => panel} message="Loading orders" delay={200} x-model={() => s.loading} />
+            <output class="lp-result">{() => s.result}</output>
+        </Stack>
+    );
+}
+```
+
+## Over the page, with Cancel
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, LoadPanel, Stack } from '@motifx-community/ui';
+
+/** Over the whole page, with a Cancel button: the work stops when it is pressed (or on Escape). */
+export default function Page() {
+    const s = reactive({ told: '' });
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const panel = new LoadPanel({
+        message: 'Building the report…',
+        cancelable: true,
+        onCancel: () => {
+            if (timer) clearTimeout(timer);
+            timer = null;
+            s.told = 'Cancelled.';
+        }
+    });
+    const start = () => {
+        s.told = '';
+        panel.show();
+        timer = setTimeout(() => {
+            timer = null;
+            panel.hide();
+            s.told = 'The report is ready.';
+        }, 4000);
+    };
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <Button text="Build the report" variant="outline" onclick={start} />
+            <span onConfig={c => c.controls.add(panel)} />
+            <output class="lp-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## Shade, pane and indicator
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, LoadPanel, Panel, Stack } from '@motifx-community/ui';
+
+/** Without the shade, without the pane, without the indicator; a press on the shade may hide it. */
+export default function Options() {
+    const s = reactive({ clear: false, bare: false, words: false });
+    let clear!: Panel;
+    let bare!: Panel;
+    let words!: Panel;
+    const flash = (key: 'clear' | 'bare' | 'words') => {
+        s[key] = true;
+        setTimeout(() => (s[key] = false), 2500);
+    };
+    return (
+        <Stack orientation="horizontal" wrap align="center" style="inline-size: 100%">
+            <Panel variant="outline" padding="md" style="min-inline-size: 16rem; min-block-size: 9rem" ref={(c: Panel) => (clear = c)}>
+                <Button text="No shade" variant="outline" onclick={() => flash('clear')} />
+            </Panel>
+            <LoadPanel target={() => clear} shade={false} x-model={() => s.clear} closeOnOutside />
+            <Panel variant="outline" padding="md" style="min-inline-size: 16rem; min-block-size: 9rem" ref={(c: Panel) => (bare = c)}>
+                <Button text="No pane" variant="outline" onclick={() => flash('bare')} />
+            </Panel>
+            <LoadPanel target={() => bare} showPane={false} x-model={() => s.bare} />
+            <Panel variant="outline" padding="md" style="min-inline-size: 16rem; min-block-size: 9rem" ref={(c: Panel) => (words = c)}>
+                <Button text="Words only" variant="outline" onclick={() => flash('words')} />
+            </Panel>
+            <LoadPanel target={() => words} showIndicator={false} message="Please wait" x-model={() => s.words} />
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Over a container` | It goes inside the container, over everything in it; the container is `aria-busy` and what is under the panel is inert: nothing there can be pressed or focused. |
+| `Over the page` | Without a `target`, it covers the viewport and the rest of the page is inert. |
+| `Focus` | Focus that was under it waits on the panel (on the Cancel button when there is one) and goes back where it was when the panel hides. |
+| `Delay` | Quick work shows nothing: it comes after `delay`, and a hide before that cancels it. |
+| `Spinner.cover` | The kit’s spinner covers a container from code in one call (`Spinner.cover`); the load panel is the component with the pane, the message, the delay and the button. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Pane` | A `status` region: the message is read when the panel appears, and again when it changes. |
+| `Indicator` | Decorative; the message says what is going on. |
+| `Under it` | `inert` and `aria-busy`, so readers skip it and nothing there takes a press or focus. |
+| `Cancel` | The kit’s button, named in the kit language; Escape presses it. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-load-panel` | The layer. `data-shade`, `data-pane`, `data-page`. |
+| `.mx-load-panel__pane` | The pane. |
+| `.mx-load-panel__indicator, .mx-load-panel__message, .mx-load-panel__cancel` | The spinner, the message and the button. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `load-panel.shade, .pane, .message` | Units: the layer (`shaded`), the pane (`shown`), the message. |
+| `load-panel.cancel` | Place: the Cancel button’s look (`variant`). |
+| `load-panel.padding, .gap` | The least space to the edge of what it covers; the space between the indicator, the message and the button. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `target` | `Bind<ComponentBase \| HTMLElement \| null>` | `null` | What it covers: a component or an element; `null` covers the whole page. |
+| `message` | `Bind<string>` | the kit’s “Loading…” | The message under the indicator. The same property as `text`. |
+| `value` | `Bind<boolean>` | `false` | Shown or not; `x-model` binds it two-way. |
+| `delay` | `Bind<number>` | `0` | Milliseconds before it shows; a hide before that shows nothing. |
+| `shade` | `Bind<boolean>` | `true` | Dims what it covers. |
+| `showPane` | `Bind<boolean>` | `true` | The box behind the indicator and the message. |
+| `showIndicator` | `Bind<boolean>` | `true` | The turning indicator (the kit’s spinner). |
+| `cancelable` | `Bind<boolean>` | `false` | A Cancel button in the pane; Escape presses it too. |
+| `cancelText` | `Bind<string>` | the kit’s “Cancel” | The button’s text. |
+| `closeOnOutside` | `Bind<boolean>` | `false` | A press on the shade hides it. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onShown, onHidden` | event | It came on the screen (after its delay); it went. |
+| `onCancel` | event | The Cancel button was pressed, or Escape; the panel hides after. |
+| `show(), hide(), cancel()` | `boolean` / `void` | From code; `show()` is `false` while it is shown or waiting for its delay. |
+| `isShown` | read-only | Whether it is on the screen now. |
+| `spinner, cancelButton` | read-only | The kit’s spinner and button in the pane. |
+
+
 ---
 
 # Toast
 
-> Feedback · @motifx-community/ui 0.1.0-beta.0
+> Feedback · @motifx-community/ui 0.1.0-beta.2
 
 Short notifications at an edge of the window: four tones, an action such as Undo, a time of their own or none, six positions and a limit on how many show at once. Called from code; a region of your own can sit in JSX.
 
@@ -10611,7 +11992,7 @@ The name of the region and of the close button come from `uiLocale.strings` (`no
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, toast, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, toast, uiLocale } from '@motifx-community/ui';
 
 /** Switches the names of the region and the close button. */
 export default function Localization() {
@@ -10619,7 +12000,7 @@ export default function Localization() {
 
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
 
   return (
@@ -10709,7 +12090,7 @@ export default function Localization() {
 
 # Badge
 
-> Display · @motifx-community/ui 0.1.0-beta.0
+> Display · @motifx-community/ui 0.1.0-beta.2
 
 A short text, a count or a dot: in a line of text, or on a corner of a button, an avatar or an icon. A count over its maximum shows “99+”, a count of zero hides.
 
@@ -10906,7 +12287,7 @@ A count is written in the kit language (`uiLocale`), again when it changes: “1
 
 # Avatar and AvatarGroup
 
-> Display · @motifx-community/ui 0.1.0-beta.0
+> Display · @motifx-community/ui 0.1.0-beta.2
 
 Someone’s picture, or their initials, or a person icon, with their presence on its corner. A group stacks or spreads them and counts the ones it does not show.
 
@@ -11148,7 +12529,7 @@ Initials are written in the capitals of the kit language (`uiLocale`): “ilgin
 
 # Chip and ChipGroup
 
-> Display · @motifx-community/ui 0.1.0-beta.0
+> Display · @motifx-community/ui 0.1.0-beta.2
 
 A short text with an icon or an avatar before it: a filter to turn on, a choice among a few, or something picked that can be removed. A group selects one or several and moves between them with the arrow keys.
 
@@ -11430,7 +12811,7 @@ The remove button’s name is the kit text `removeItem` (“Remove {text}”) an
 
 # Card
 
-> Display · @motifx-community/ui 0.1.0-beta.0
+> Display · @motifx-community/ui 0.1.0-beta.2
 
 A surface holding one thing: a picture, a header with an avatar and titles, content and a row of actions. Parts with nothing in them are left out.
 
@@ -11688,7 +13069,7 @@ export default function Sizes() {
 
 # Skeleton
 
-> Display · @motifx-community/ui 0.1.0-beta.0
+> Display · @motifx-community/ui 0.1.0-beta.2
 
 The shape of what is loading, so the page keeps its layout while data arrives. Given content, it shows the content in the same place once loading ends.
 
@@ -11823,7 +13204,7 @@ export default function Animations() {
 
 # Tabs
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 Tabs show one panel at a time under a strip of tabs: from JSX or from code, closable, with icons and badges, scroll buttons when the tabs do not fit, four placements and panels built when they are first shown.
 
@@ -12169,7 +13550,7 @@ Tabs write one text: the close button's tooltip, `uiLocale.strings.close`. Every
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of every component on the page, the tabs' close button included. */
@@ -12177,7 +13558,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -12283,7 +13664,7 @@ export default function Localization() {
 
 # Breadcrumb
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 The way to the current page: each step a link or a button, the current page last. Steps that do not fit go into a menu after the first.
 
@@ -12295,7 +13676,7 @@ import { Breadcrumb } from '@motifx-community/ui';
 
 ## Links and buttons
 
-A step with `href` is a link; `rel=&quot;router&quot;` lets the MotifJS router take it. A step without one is a button: `onItemClick` tells it.
+A step with `href` is a link; `rel='router'` lets the MotifJS router take it. A step without one is a button: `onItemClick` tells it.
 
 ```tsx
 import { reactive } from '@motifx/core';
@@ -12412,7 +13793,7 @@ export default function Sizes() {
 
 # Pagination
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 Moving through pages of items: the sizes to choose from, where the page stands, the steps and a button per page around the current one. It turns compact when it does not fit. It looks and works as the grid’s pager.
 
@@ -12527,11 +13908,497 @@ export default function Looks() {
 | `compact` | read-only | Whether the compact look shows now. |
 
 
+---
+
+# Stepper
+
+> Navigation · @motifx-community/ui 0.1.0-beta.2
+
+The steps of a longer task and where the user stands in them: an indicator and a text per step, a line between them, the steps before the current one completed. The [Wizard](wizard.md) adds a page and the buttons to each step.
+
+## Import
+
+```tsx
+import { Stepper } from '@motifx-community/ui';
+```
+
+## From JSX and from code
+
+The current step is `value`: a step’s `key`, else its index; `x-model` binds it two-way. From code, `next()`, `previous()` and `goTo()` move it and `onStepChanged` tells.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Stack, Stepper } from '@motifx-community/ui';
+
+/** A stepper bound with x-model, and one made from code and moved with its own methods. */
+export default function FromCode() {
+    const s = reactive({ step: 0 as string | number | null, at: 0, told: '' });
+    const coded = new Stepper({
+        label: 'Order',
+        items: ['Cart', 'Address', 'Payment', 'Done'],
+        linear: false,
+        onStepChanged: e => {
+            s.at = e.index;
+            s.told = `Step ${e.index + 1}${e.byUser ? ', pressed' : ''}`;
+        }
+    });
+
+    return (
+        <Stack gap="lg" style="inline-size: 100%">
+            <Stepper label="Sign up" items={['Account', 'Profile', 'Review']} x-model={() => s.step} />
+            <output class="st-value">{() => `value: ${JSON.stringify(s.step)}`}</output>
+            <span onConfig={c => c.controls.add(coded)} />
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Back" variant="outline" enabled={() => s.at > 0} onclick={() => void coded.previous()} />
+                <Button text="Next" variant="outline" enabled={() => s.at < 3} onclick={() => void coded.next()} />
+                <output class="st-told">{() => s.told}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Statuses
+
+The steps before the current one are completed by themselves. An item may say `status: 'done'` or `'error'` whatever the current step is, be `optional`, be disabled, or carry an `icon` in place of its number; its fields may be functions of your state.
+
+| Status | How |
+| --- | --- |
+| `pending` | A step to come: its number in the indicator. |
+| `current` | The step in hand: `aria-current="step"`. |
+| `done` | The steps before the current one, and any step whose item says `status: 'done'`: a check in the indicator, the line before it filled. |
+| `error` | A step whose item says `status: 'error'`: a mark in the indicator, the text in the danger colour; read out as “Needs attention”. |
+| `optional` | Says “Optional” under the text; in linear order it may be skipped. |
+| `disabled` | An item with `enabled: false`, or a step linear order does not reach yet: `aria-disabled`, out of the Tab order. |
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Stack, Stepper } from '@motifx-community/ui';
+
+const pencil = () => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.innerHTML = '<path d="M11.5 2.5l2 2L5 13H3v-2z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>';
+    return svg;
+};
+
+/** Completed and failed steps told by the items, an optional step, a disabled one, an icon in place of the number. */
+export default function Statuses() {
+    const s = reactive({ paid: false });
+    const items = [
+        { text: 'Cart', status: 'done' as const },
+        { text: 'Address', description: 'Checked', status: 'done' as const },
+        { text: 'Payment', description: () => (s.paid ? 'Paid' : 'Card declined'), status: () => (s.paid ? 'done' : 'error') },
+        { text: 'Gift note', optional: true, icon: pencil() },
+        { text: 'Pick-up', enabled: false },
+        { text: 'Done' }
+    ];
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Stepper label="Statuses" items={items} value={5} linear={false} />
+            <Button text={() => (s.paid ? 'Decline the card' : 'Take the payment')} variant="outline" onclick={() => (s.paid = !s.paid)} />
+        </Stack>
+    );
+}
+```
+
+## In order, or free
+
+`linear` (the default) lets a press reach only the completed steps and the next one; `linear={false}` lets it reach any. Either way `onStepChanging` is asked first: `cancel` keeps the step, a `promise` waits for a check or a server.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { CheckBox, Stack, Stepper } from '@motifx-community/ui';
+
+/** In linear order a step is reached only after the ones before it; `onStepChanging` refuses a step while the box is unchecked. */
+export default function Linear() {
+    const s = reactive({ step: 0 as string | number | null, agreed: false, note: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Stepper
+                label="In order"
+                items={['Terms', 'Details', 'Confirm']}
+                x-model={() => s.step}
+                onStepChanging={e => {
+                    if (e.to > 0 && !s.agreed) {
+                        e.cancel = true;
+                        s.note = 'Accept the terms first.';
+                    } else {
+                        s.note = '';
+                    }
+                }}
+            />
+            <CheckBox label="I accept the terms" x-model={() => s.agreed} />
+            <output class="st-note">{() => s.note}</output>
+        </Stack>
+    );
+}
+```
+
+## Orientations
+
+```tsx
+import { Stack, Stepper } from '@motifx-community/ui';
+
+const STEPS = [
+    { text: 'Details', description: 'Name and e-mail' },
+    { text: 'Address', description: 'Where to send it' },
+    { text: 'Payment', description: 'Card or transfer' },
+    { text: 'Review' }
+];
+
+/** Horizontal with the texts under or after the indicators, and vertical. */
+export default function Orientations() {
+    return (
+        <Stack gap="lg" style="inline-size: 100%">
+            <Stepper label="Texts under" items={STEPS} value={1} linear={false} />
+            <Stepper label="Texts after" items={STEPS.slice(0, 3)} value={1} labelPosition="end" linear={false} />
+            <div style="inline-size: 18rem">
+                <Stepper label="Standing" items={STEPS} value={1} orientation="vertical" linear={false} />
+            </div>
+        </Stack>
+    );
+}
+```
+
+## Sizes
+
+```tsx
+import { Stack, Stepper } from '@motifx-community/ui';
+
+const STEPS = ['Plan', 'Build', 'Ship'];
+
+/** Three sizes, and a stepper without numbers. */
+export default function Sizes() {
+    return (
+        <Stack gap="lg" style="inline-size: 100%">
+            <Stepper label="Small" items={STEPS} value={1} size="sm" linear={false} />
+            <Stepper label="Medium" items={STEPS} value={1} linear={false} />
+            <Stepper label="Large" items={STEPS} value={1} size="lg" linear={false} />
+            <Stepper label="Dots" items={STEPS} value={1} showNumbers={false} size="sm" labelPosition="end" linear={false} />
+        </Stack>
+    );
+}
+```
+
+## Keyboard
+
+| Key | What it does |
+| --- | --- |
+| `Tab` | One stop: the step focused last, else the current one, else the first that can be reached. |
+| `Arrow keys` | Left and Right (Up and Down standing) move between the steps that can be reached, around the ends; Home and End go to the first and the last. |
+| `Enter, Space` | Choose the focused step; `onStepChanging` may refuse. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Landmark` | A `nav` named “Steps” in the kit language, holding an ordered list; several on one page: give each its own `label`. |
+| `A step` | A button whose name reads “Step 2 of 4, Address, Where to send it, Completed”: the position, the texts and the status are all in it. |
+| `Not clickable` | Plain elements: nothing to press, the current one still `aria-current`. |
+| `Lines and marks` | Decorative, hidden from readers. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-stepper` | The stepper. `data-orientation`, `data-labels`, `data-size`. |
+| `.mx-stepper__list, .mx-stepper__item` | The list and each step with its line. `data-status` on the item. |
+| `.mx-stepper__step` | The step: a button or a div. `data-status`, `aria-current`, `aria-disabled`. |
+| `.mx-stepper__indicator, .mx-stepper__number, .mx-stepper__mark, .mx-stepper__icon` | The circle, the number in it, the check or error mark, an icon of your own. |
+| `.mx-stepper__label, .mx-stepper__description, .mx-stepper__note` | The texts. |
+| `.mx-stepper__line` | The line to the next step. `data-status="done"` up to the current one. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `stepper.step, .indicator, .mark, .label, .description, .note, .line` | Units: the step (`hover`, `pressed`, `focus`, `disabled`, `current`, `done`, `error`), its indicator, the mark (`icon` per state), the texts, the line (`done`); the line turns a quarter in a vertical stepper. |
+| `stepper.size.*, .font-size.*, .padding.*` | The indicator, the text and the space around a step, per size. |
+| `stepper.description-font-size, .gap, .line-gap, .line-min-length` | The second line, the space between indicator and texts, and the line’s margins and least length. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `Bind<readonly (StepperItem \| string)[]>` | `[]` | The steps in order: `StepperItem`s (`text`, `description`, `key`, `icon`, `status`, `optional`, `enabled`, `data`) or plain texts. |
+| `value` | `Bind<string \| number \| null>` | `0` | The current step: its `key`, else its index; `null` for none. `x-model` binds it two-way. |
+| `linear` | `Bind<boolean>` | `true` | A press reaches a completed step, or the one right after the last completed; optional steps may be skipped. |
+| `orientation` | `Bind<StepperOrientation>` | `'horizontal'` | `horizontal` or `vertical`. |
+| `labelPosition` | `Bind<StepperLabelPosition>` | `'bottom'` | Horizontal only: the texts under the indicator (`bottom`) or after it (`end`). |
+| `size` | `Bind<ControlSize>` | `'md'` | `sm`, `md`, `lg`. |
+| `clickable` | `Bind<boolean>` | `true` | `false` shows the way only: no buttons, no Tab stop. |
+| `showNumbers` | `Bind<boolean>` | `true` | The indicator of a step to come shows its number. |
+| `label` | `Bind<string>` | the kit’s “Steps” | What screen readers call it. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onStepChanging` | event | The current step is about to change (`from`, `to`, `fromItem`, `toItem`, `byUser`). `cancel = true` keeps it; `promise` set to a `Promise<boolean>` waits, and the step changes when it resolves to `true`. |
+| `onStepChanged` | event | The current step changed (`index`, `item`, `previous`, `byUser`). |
+| `selectedIndex` | read-only | The index of the current step; -1 when there is none. |
+| `count` | read-only | How many steps there are. |
+| `canGoNext, canGoPrevious` | read-only | There is an enabled step after, or before, the current one. |
+| `next(), previous()` | `Promise<boolean>` | Goes to the next or the previous enabled step; `false` when there is none or the change was refused. |
+| `goTo(step)` | `Promise<boolean>` | Goes to a step by index or key, whatever the order; `onStepChanging` is asked first. |
+| `statusOf(index)` | `StepperStatus` | `pending`, `current`, `done` or `error`, as drawn. |
+| `canReach(index)` | `boolean` | Whether a press may reach the step. |
+| `refresh()` | `void` | Reads the items again after they were changed in place. |
+
+
+---
+
+# Wizard
+
+> Navigation · @motifx-community/ui 0.1.0-beta.2
+
+A task in steps: a [Stepper](stepper.md) above or beside one page per step, and the Back and Next buttons under them. Next validates the page first; on the last step it finishes.
+
+## Import
+
+```tsx
+import { Wizard, WizardStep } from '@motifx-community/ui';
+```
+
+## Pages from JSX
+
+Each `WizardStep` is a step and its page. Next validates the kit’s fields on the page, then the step’s own `validate`; a page that fails keeps the wizard, marks its step and focuses the first invalid field. On the last step Next reads Finish and raises `onFinished`.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { CheckBox, Stack, TextBox, Wizard, WizardStep } from '@motifx-community/ui';
+
+/** Three pages with the kit's fields: Next validates the page first; Finish tells the app. */
+export default function Basic() {
+    const s = reactive({ name: '', email: '', city: '', agreed: false, result: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Wizard label="Sign up" onFinished={() => (s.result = `Welcome, ${s.name}.`)}>
+                <WizardStep title="Account" description="Who you are">
+                    <Stack orientation="horizontal" wrap align="center">
+                        <TextBox label="Name" x-model={() => s.name} required />
+                        <TextBox label="E-mail" x-model={() => s.email} required rules={[{ type: 'email' }]} />
+                    </Stack>
+                </WizardStep>
+                <WizardStep title="Address" description="Where you live">
+                    <TextBox label="City" x-model={() => s.city} required />
+                </WizardStep>
+                <WizardStep title="Review" validate={() => s.agreed}>
+                    <p>{() => `${s.name || '—'}, ${s.email || '—'}, ${s.city || '—'}`}</p>
+                    <CheckBox label="Everything is right" x-model={() => s.agreed} />
+                </WizardStep>
+            </Wizard>
+            <output class="wz-result">{() => s.result}</output>
+        </Stack>
+    );
+}
+```
+
+## From code
+
+`steps` makes the steps from props, each page from a `content` factory when it is first shown; `add`, `insert` and `remove` change them later. `next()`, `previous()`, `goTo()` and `finish()` move it.
+
+```tsx
+import { Component, reactive } from '@motifx/core';
+import { Button, Stack, Wizard, WizardStep } from '@motifx-community/ui';
+
+// A page made from code: any MotifJS component.
+class Note extends Component<HTMLDivElement, { text: string }> {
+    override view() {
+        return <p>{this.props.text}</p>;
+    }
+}
+
+/** A wizard made from code: its steps as props with content factories, moved with its methods, a step added later. */
+export default function FromCode() {
+    const s = reactive({ told: '' });
+    const wizard = new Wizard({
+        label: 'Setup',
+        steps: [
+            { title: 'Welcome', content: () => new Note({ text: 'A page made by a factory, built when first shown.' }) },
+            { title: 'Options', description: 'Pick what you need', content: () => new Note({ text: 'The second page.' }) },
+            { title: 'Done', content: () => new Note({ text: 'The last page; Next reads Finish here.' }) }
+        ],
+        onStepChanged: e => (s.told = `Step ${e.index + 1}: ${(e.item as { text: string }).text}`),
+        onFinished: () => (s.told = 'Finished.')
+    });
+    const addStep = () => {
+        wizard.insert(2, new WizardStep({ title: 'Extra', optional: true, content: () => new Note({ text: 'Added from code.' }) }));
+    };
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <span onConfig={c => c.controls.add(wizard)} />
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Go to Done" variant="outline" onclick={() => void wizard.goTo(wizard.steps.length - 1)} />
+                <Button text="Add a step" variant="outline" onclick={addStep} />
+                <output class="wz-told">{() => s.told}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Standing
+
+```tsx
+import { reactive } from '@motifx/core';
+import { RadioGroup, Switch, TextArea, Wizard, WizardStep } from '@motifx-community/ui';
+
+/** The stepper beside the pages, the texts after the indicators. */
+export default function Vertical() {
+    const s = reactive({ plan: 'Team', notify: true, note: '' });
+    return (
+        <Wizard label="Subscription" orientation="vertical" style="min-block-size: 16rem; inline-size: 100%">
+            <WizardStep title="Plan" description="What you pay for">
+                <RadioGroup label="Plan" items={['Solo', 'Team', 'Business']} x-model={() => s.plan} />
+            </WizardStep>
+            <WizardStep title="Alerts" description="How we reach you">
+                <Switch label="Send me a monthly summary" x-model={() => s.notify} />
+            </WizardStep>
+            <WizardStep title="Notes" optional>
+                <TextArea label="Anything else?" x-model={() => s.note} rows={3} />
+            </WizardStep>
+        </Wizard>
+    );
+}
+```
+
+## Your own buttons, finishing that waits
+
+`showNavigation={false}` takes the bar away; your own buttons call the methods. `onFinishing` may set a `promise`: the wizard finishes when it resolves to `true`, and stays otherwise.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Stack, TextBox, Wizard, WizardStep } from '@motifx-community/ui';
+
+/** No bar: buttons of your own drive it; finishing waits for a promise (a server) and may be refused. */
+export default function Custom() {
+    const s = reactive({ code: '', busy: false, note: '' });
+    let wizard!: Wizard;
+    const finish = () => {
+        s.note = '';
+        void wizard.finish().then(ok => (s.note = ok ? 'Saved.' : s.note || 'Not finished.'));
+    };
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Wizard
+                ref={(w: Wizard) => (wizard = w)}
+                label="Redeem"
+                showNavigation={false}
+                labelPosition="end"
+                onFinishing={e => {
+                    s.busy = true;
+                    e.promise = new Promise<boolean>(resolve => setTimeout(() => resolve(s.code.toUpperCase() === 'MOTIF'), 600)).then(ok => {
+                        s.busy = false;
+                        if (!ok) s.note = 'That code is not known.';
+                        return ok;
+                    });
+                }}
+            >
+                <WizardStep title="Code">
+                    <TextBox label="Gift code" x-model={() => s.code} required placeholder="MOTIF" />
+                </WizardStep>
+                <WizardStep title="Confirm">
+                    <p>{() => `Redeem “${s.code}”?`}</p>
+                </WizardStep>
+            </Wizard>
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Back" variant="outline" onclick={() => void wizard.previous()} />
+                <Button text="Next" variant="outline" onclick={() => void wizard.next()} />
+                <Button text="Redeem" busy={() => s.busy} onclick={finish} />
+                <output class="wz-note">{() => s.note}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Stepper` | A `nav` of steps as on the [Stepper](stepper.md) page: each a button with its position and status in its name, one Tab stop. |
+| `Page` | A `group` named after its step; the hidden pages are out of the tree. |
+| `Validation` | A page that fails keeps focus on its first invalid field, with its message; the step reads “Needs attention”. |
+| `Buttons` | The kit’s buttons, named in the kit language: “Back”, “Next”, “Finish”. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-wizard` | The wizard. `data-orientation`. |
+| `.mx-wizard__stepper` | The stepper (`.mx-stepper` too). |
+| `.mx-wizard__pages, .mx-wizard__page` | The pages and each page; a hidden page carries `hidden`. |
+| `.mx-wizard__bar, .mx-wizard__previous, .mx-wizard__next` | The bar and its buttons. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `wizard.frame, .page, .bar` | Units: the whole, a page, the bar (a rule over it, its padding). |
+| `wizard.previous, wizard.next` | Places: the buttons’ look in the bar (`variant`). |
+| `wizard.gap, .bar-gap, .rail-width` | Between the stepper, the pages and the bar; between the buttons; the stepper’s width when it stands beside the pages. |
+
+## API reference
+
+### Wizard props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `steps` | `readonly WizardStepProps[]` | `[]` | Steps made from code, each as the props of a `WizardStep`; the JSX `WizardStep` children come first. |
+| `value` | `Bind<string \| number \| null>` | `0` | The current step: its `key`, else its index. `x-model` binds it two-way. |
+| `linear` | `Bind<boolean>` | `true` | A step is reached only after the ones before it; optional steps may be skipped. |
+| `orientation` | `Bind<StepperOrientation>` | `'horizontal'` | `horizontal`: the stepper above the pages; `vertical`: beside them. |
+| `labelPosition` | `Bind<StepperLabelPosition>` | `'bottom'` | Where the stepper’s texts sit, horizontal only. |
+| `size` | `Bind<ControlSize>` | `'md'` | The stepper’s size. |
+| `showStepper, showNavigation` | `Bind<boolean>` | `true` | The stepper, and the bar with the Back and Next buttons. |
+| `clickable` | `Bind<boolean>` | `true` | The steps of the stepper can be pressed. |
+| `lazy` | `Bind<boolean>` | `true` | A page is built when first shown, then kept (a step’s own `lazy` wins). |
+| `keepAlive` | `Bind<boolean>` | `true` | `false`: what a step’s `content` made is disposed while hidden and made again when it shows (a step’s own `keepAlive` wins). |
+| `previousText, nextText, finishText` | `Bind<string>` | the kit’s “Back”, “Next”, “Finish” | The buttons’ texts. |
+| `label` | `Bind<string>` | the kit’s “Steps” | What screen readers call the stepper. |
+
+### WizardStep props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `Bind<string>` | `''` | The step’s text in the stepper. The same property as `text`. |
+| `description` | `Bind<string>` | `''` | A second line under the title. |
+| `key` | `Bind<string>` | the index | Names the step in `value`; the JSX `key` works too. |
+| `icon` | `Bind<IconSource \| null>` | `null` | Drawn in the indicator in place of the number. |
+| `optional` | `Bind<boolean>` | `false` | May be skipped; says so under the title. |
+| `enabled` | `Bind<boolean>` | `true` | `false` keeps the step from being reached. |
+| `error` | `Bind<boolean>` | `false` | Draws the step with an error; the wizard sets it when the page does not validate, and clears it when it does. |
+| `validateFields` | `Bind<boolean>` | `true` | The kit’s fields on the page are validated before the wizard moves on from it; the first invalid one takes focus. |
+| `validate` | `() => boolean \| Promise<boolean>` | — | Asked after the fields; `false` keeps the page and marks the step. |
+| `lazy, keepAlive` | `Bind<boolean \| undefined>` | the wizard’s | See the wizard’s. |
+| `content` | `() => ComponentBase \| ComponentBase[]` | — | Makes the page from code, when the page is built. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onStepChanging, onStepChanged` | event | The stepper’s events: `onStepChanging` (`cancel`, `promise`) runs before the page is validated. |
+| `onFinishing` | event | The last page validated and the wizard is about to finish; `cancel = true` keeps it open, `promise` waits and finishes on `true`. |
+| `onFinished` | event | The wizard finished: every step is drawn done. |
+| `next(), previous(), goTo(step)` | `Promise<boolean>` | Next validates the page first and finishes on the last step; Back validates nothing; `goTo` validates when it goes forward. |
+| `finish()` | `Promise<boolean>` | Validates the page, asks `onFinishing`, then finishes. |
+| `leaveCheck()` | `Promise<boolean>` | Validates the current page the way Next does, without moving. |
+| `add(step), insert(index, step), remove(step)` | `WizardStep` / `boolean` | Steps from code; a step of another wizard moves here. |
+| `stepper, steps, currentStep, selectedIndex` | read-only | The `Stepper`, the `WizardStep`s in order, the current one and its index. |
+| `isLast, isFinished` | read-only | The current step is the last that can be gone to (Next finishes); the wizard finished. |
+| `previousButton, nextButton` | read-only | The kit’s buttons in the bar, for an icon or a look of your own. |
+
+
 ---
 
 # Accordion
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 An accordion opens and closes sections under their headers: one at a time or several, kept open, with icons, three looks and sections built when they are first opened.
 
@@ -12830,7 +14697,7 @@ The accordion writes no text of its own, so it has nothing in `uiLocale`.
 
 # Window and dialog
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 A window or a dialog on a native `<dialog>`: one form, shown modeless or modal by whoever shows it. It has a title bar, moves, resizes, minimizes and maximizes; Enter and Escape press its buttons; forms open forms. `messageBox` and `confirm` cover the common questions.
 
@@ -13157,7 +15024,7 @@ The title bar buttons and the `ok`, `cancel`, `yes`, `no` buttons of a message b
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, messageBox, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, messageBox, uiLocale } from '@motifx-community/ui';
 
 /** Switches the names of the title bar buttons and of the message box buttons. */
 export default function Localization() {
@@ -13165,7 +15032,7 @@ export default function Localization() {
 
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
 
   const ask = () =>
@@ -13390,7 +15257,7 @@ export default function DefaultButtons() {
 
 # BottomSheet
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 A panel that comes up from the bottom of the page or of a container and stops at a few heights: a peek, half, full, as tall as its content, or heights of your own. Dragged by its handle and its title, flicked, swiped down to close; modal or not, with the browser's back closing it on a phone.
 
@@ -13615,7 +15482,7 @@ The handle's name and heights, the default name and the close button come from `
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { BottomSheet, Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { BottomSheet, Button, uiLocale } from '@motifx-community/ui';
 
 /** The handle's name and heights and the close button's name come from uiLocale. */
 export default function Localization() {
@@ -13623,7 +15490,7 @@ export default function Localization() {
 
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
 
   return (
@@ -13710,7 +15577,7 @@ Every prop is a property too, taking a value or a function. The shared parts (th
 
 # Drawer
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 A panel that slides in from an edge of the page or of a container, over the content or pushing it aside. A finger swipes it in from the edge and back again; Escape, the scrim and the browser's back close it.
 
@@ -13943,7 +15810,7 @@ Its default name and the close button come from `uiLocale.strings` (`drawerLabel
 
 # ActionSheet
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 A list of commands that comes up from the bottom, made of the kit's menu items and large enough for a finger, with a title, a message and a cancel button apart. A context menu opens its items here on a touch screen.
 
@@ -14156,7 +16023,7 @@ Cancel, the way back and its default name come from `uiLocale.strings` (`cancel`
 
 # Layout
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 Containers that place controls: `Stack` (a row or a column), `Grid` (rows and columns), `Panel` (a plain box that can scroll), `GroupBox` (a titled frame), `DockPanel` (children stuck to its edges) and `SplitContainer` (two panes and a splitter). All of them are controls: they disable and hide what is inside, and lay out children added at any time.
 
@@ -14582,7 +16449,7 @@ The only text the containers write is the splitter's name, `uiLocale.strings.res
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of the kit; the splitters on the page take the new name at once. */
@@ -14590,7 +16457,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -14740,11 +16607,417 @@ Every container also has the shared properties of `Control`: `enabled` / `disabl
 `ChildSettings` — the part that reads a child's settings from its props and follows children added later — is exported for containers of your own.
 
 
+---
+
+# ScrollView
+
+> Navigation · @motifx-community/ui 0.1.0-beta.2
+
+Content that scrolls in a box of its own: the bars shown as told, a pull from the top that asks for what is new, a reach near the end that asks for more. Moved from code to a position or to an element.
+
+## Import
+
+```tsx
+import { ScrollView } from '@motifx-community/ui';
+```
+
+## A box that scrolls
+
+The JSX children are the content. `showScrollbar` says when the bars show; `scrollTo` and `scrollToElement` move the content from code, `onScrolled` tells where it stands.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, ScrollView, Stack, type ScrollViewBars } from '@motifx-community/ui';
+
+const LINES = Array.from({ length: 40 }, (_, i) => `Line ${i + 1} of a long text that needs a box of its own to scroll in.`);
+const MODES: ScrollViewBars[] = ['onScroll', 'onHover', 'always', 'never'];
+
+/** A box that scrolls, its bars shown as told; moved from code to a line and back to the top. */
+export default function Bars() {
+    const s = reactive({ bars: 'onScroll' as ScrollViewBars, top: 0 });
+    let view!: ScrollView;
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Stack orientation="horizontal" wrap align="center">
+                {MODES.map(mode => (
+                    <Button key={mode} text={mode} size="sm" variant={() => (s.bars === mode ? 'solid' : 'outline')} onclick={() => (s.bars = mode)} />
+                ))}
+                <Button text="Line 20" variant="outline" size="sm" onclick={() => view.scrollToElement(view.content.element.querySelectorAll('p')[19], true)} />
+                <Button text="Top" variant="outline" size="sm" onclick={() => view.scrollTo(0, true)} />
+                <output class="sv-top">{() => `scrollTop: ${Math.round(s.top)}`}</output>
+            </Stack>
+            <ScrollView ref={(v: ScrollView) => (view = v)} label="Long text" class="sv-text" showScrollbar={() => s.bars} style="block-size: 12rem" onScrolled={e => (s.top = e.top)}>
+                {LINES.map(line => (
+                    <p key={line}>{line}</p>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Pull to refresh
+
+With `pullToRefresh`, the content pulled down from its top asks `onPullDown`. Set `promise` (or call `release()`) and the panel goes when the work is done.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, ScrollView, Stack } from '@motifx-community/ui';
+
+/** Pulled down from the top, the list asks for what is new and shows the panel until the promise settles. */
+export default function Pull() {
+    const s = reactive({ notes: ['Welcome aboard', 'Your plan was renewed', 'A new comment on "Roadmap"'], count: 0 });
+    const reload = () =>
+        new Promise<void>(resolve =>
+            setTimeout(() => {
+                s.count++;
+                s.notes = [`Fresh note ${s.count}`, ...s.notes];
+                resolve();
+            }, 1200)
+        );
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <span>Drag the list down from its top (a finger, or the mouse) and let go.</span>
+            <ScrollView label="Notes" class="sv-notes" pullToRefresh onPullDown={e => (e.promise = reload())} style="block-size: 12rem">
+                {s.notes.map(note => (
+                    <Panel key={note} variant="outline" padding="sm">
+                        {note}
+                    </Panel>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Load more near the end
+
+With `loadOnReachBottom`, a scroll within `reachBottomOffset` of the end asks `onReachBottom` once; `release()` lets the next reach ask again, `release(true)` says there is no more. Content that does not fill the box asks at once.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, ScrollView, Stack } from '@motifx-community/ui';
+
+const TOTAL = 60;
+const PAGE = 15;
+
+// A page of rows, as a server would send them.
+const fetchRows = (from: number) =>
+    new Promise<string[]>(resolve => setTimeout(() => resolve(Array.from({ length: Math.min(PAGE, TOTAL - from) }, (_, i) => `Order #${1000 + from + i}`)), 800));
+
+/** Near the end the view asks for more; the indicator stays until the rows are in, and `release(true)` ends it for good when there is no more. */
+export default function More() {
+    const s = reactive({ rows: [] as string[] });
+    const more = () =>
+        fetchRows(s.rows.length).then(rows => {
+            s.rows = [...s.rows, ...rows];
+            return s.rows.length >= TOTAL;
+        });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <output class="sv-more-told">{() => (s.rows.length >= TOTAL ? `All ${TOTAL} orders are in.` : `${s.rows.length} of ${TOTAL} orders`)}</output>
+            <ScrollView label="Orders" class="sv-orders" loadOnReachBottom reachBottomOffset={80} onReachBottom={e => more().then(done => e.release(done))} style="block-size: 14rem">
+                {s.rows.map(row => (
+                    <Panel key={row} variant="outline" padding="sm">
+                        {row}
+                    </Panel>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Scrolling` | The box scrolls with the wheel, the keys when focused, a finger, and from code. `direction` locks the other axis; the page behind does not scroll on when the content ends. |
+| `Scrollbars` | The design system’s bars. With `onScroll` the thumb shows while the content moves and goes a moment after; with `onHover` while the pointer is over the view or focus is in it; `always` leaves them; `never` hides them, the content still scrolls. |
+| `Pull to refresh` | From the top, with a finger or the pointer: the content comes down (harder the farther it goes) and the panel above it says to pull, then to release. Let go far enough it refreshes: the spinner turns until `release()` or the promise. A short pull goes back. |
+| `Load more` | Within `reachBottomOffset` of the end, `onReachBottom` is asked once; the panel under the content shows meanwhile. Released, the next reach asks again, until `release(true)`. Content that does not fill the box asks at once, and again as it grows. |
+| `Texts` | The kit’s, in the kit language, unless the text props say otherwise. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Region` | A focusable box named by `label`; the arrow keys, Page Up/Down, Home and End scroll it as the browser does. |
+| `Panels` | Live regions: “Refreshing…” and “Loading…” are read when they appear. |
+| `Spinners` | Decorative; the texts say what is going on. |
+| `Motion` | A finger that pulls does not scroll the page; a finger that scrolls does not pull. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-scroll-view` | The box. `data-direction`, `data-bars`, `data-scrolling` while the content moves, `data-pull` when pulling is on, `data-pulling` during a pull, `data-pull-state` (`pull`, `release`, `refreshing`), `data-loading`. |
+| `.mx-scroll-view__content` | What holds the children; it moves down during a pull. |
+| `.mx-scroll-view__pull, .mx-scroll-view__pull-text, .mx-scroll-view__pull-spinner` | The panel above the content, its text and the kit’s spinner. |
+| `.mx-scroll-view__bottom, .mx-scroll-view__bottom-text, .mx-scroll-view__bottom-spinner` | The panel under the content while more loads. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `scroll-view.box` | Unit: the box (`focus`). |
+| `scroll-view.pull, .pull-text, .bottom, .bottom-text` | Units: the two panels (the pull one `release` and `refreshing`) and their texts. |
+| `scroll-view.panel-height, .panel-gap` | The panels’ height; the space between a panel’s spinner and its text. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `Bind<ScrollViewDirection>` | `'vertical'` | `vertical`, `horizontal` or `both`: which way the content scrolls. |
+| `showScrollbar` | `Bind<ScrollViewBars>` | `'onScroll'` | When the bars show: `onScroll` while scrolling, `onHover` while the pointer is over the view, `always`, `never`. |
+| `pullToRefresh` | `Bind<boolean>` | `false` | Pulling the content down from its top asks `onPullDown` for what is new. |
+| `loadOnReachBottom` | `Bind<boolean>` | `false` | Scrolling near the end asks `onReachBottom` for more; so does content that does not reach the end. |
+| `reachBottomOffset` | `Bind<number>` | `100` | Pixels before the end at which `onReachBottom` is asked. |
+| `pullDownText, releaseText, refreshingText` | `Bind<string>` | the kit’s texts | The pull panel’s texts: while pulling, once far enough, while refreshing. |
+| `reachBottomText` | `Bind<string>` | the kit’s “Loading…” | The text under the content while more loads. |
+| `label` | `Bind<string>` | `''` | What screen readers call the scrolling region. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onPullDown` | event | The content was pulled down and let go. Load what is new, then `release()`, or set `promise` and the panel goes when it settles. |
+| `onReachBottom` | event | The content was scrolled near its end. Load more, then `release()`; `release(true)` says there is no more and the view stops asking. A `promise` releases too. |
+| `onScrolled` | event | The position changed: `top`, `left`. |
+| `scrollTo(where, smooth?)` | `void` | To a top, or `{ top, left }`; `smooth` animates. |
+| `scrollBy({ top, left }, smooth?)` | `void` | By a distance. |
+| `scrollToElement(target, smooth?)` | `void` | Brings an element (or a component) of the content into view. |
+| `refresh(), release()` | `void` | Starts a refresh as a pull would; ends it. |
+| `loadMore(), update()` | `boolean` / `void` | Asks for more now; looks at the position again after the content changed. |
+| `scrollTop, scrollLeft` | read-only | Where the content stands. |
+| `isRefreshing, isLoading` | read-only | A refresh or a loading is going on. |
+| `content` | read-only | The element that holds the children, between the two panels. |
+
+
+---
+
+# Sortable
+
+> Navigation · @motifx-community/ui 0.1.0-beta.2
+
+Items the user puts in order by dragging them, with the pointer or a finger, or with the keys; lists of one group take each other’s items. A drop moves the element and tells you the indexes: your data stays yours.
+
+## Import
+
+```tsx
+import { Sortable } from '@motifx-community/ui';
+```
+
+## Children as items
+
+The JSX children are the items. Drag one, or focus it and press Ctrl + Down; `onReorder` says from where to where, and the app reorders its own data.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, Sortable, Stack } from '@motifx-community/ui';
+
+/** Rows put in order by dragging, or with Ctrl + an arrow on the focused row; the app reorders its data when told. */
+export default function Basic() {
+    const s = reactive({ steps: ['Collect the order', 'Pack it', 'Print the label', 'Hand it over'], told: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Sortable
+                label="Steps"
+                class="so-steps"
+                onReorder={e => {
+                    const next = s.steps.slice();
+                    next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+                    s.steps = next;
+                    s.told = `"${next[e.toIndex]}" is step ${e.toIndex + 1} now`;
+                }}
+            >
+                <Panel variant="outline" padding="sm">
+                    Collect the order
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Pack it
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Print the label
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Hand it over
+                </Panel>
+            </Sortable>
+            <output class="so-told">{() => s.told || `Order: ${s.steps.join(' → ')}`}</output>
+        </Stack>
+    );
+}
+```
+
+## Items from data, across lists
+
+`items` with an `itemTemplate` draws the rows from your data and keeps each row as the order changes. Two sortables of one `group` take each other’s items: `onRemove` and `onAdd` tell both sides, and each list draws its array again.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, Sortable, Stack } from '@motifx-community/ui';
+
+interface Task {
+    id: number;
+    title: string;
+}
+
+// A task as a row.
+const row = (task: Task) => {
+    const panel = new Panel({ variant: 'outline', padding: 'sm' });
+    panel.element.textContent = task.title;
+    return panel;
+};
+
+/** Two lists of one group take each other's items; each list draws its own data and the app moves the task between arrays when told. */
+export default function Groups() {
+    const s = reactive({
+        todo: [{ id: 1, title: 'Write the brief' }, { id: 2, title: 'Book the room' }, { id: 3, title: 'Send the invites' }] as Task[],
+        done: [{ id: 4, title: 'Pick the date' }] as Task[]
+    });
+    const reorder = (key: 'todo' | 'done') => (e: { fromIndex: number; toIndex: number }) => {
+        const next = s[key].slice();
+        next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+        s[key] = next;
+    };
+    // The item leaves one array when removed and joins the other when added: the lists draw themselves again.
+    const remove = (key: 'todo' | 'done') => (e: { fromIndex: number }) => (s[key] = s[key].filter((_, i) => i !== e.fromIndex));
+    const add = (key: 'todo' | 'done') => (e: { item: Task; toIndex: number }) => {
+        const next = s[key].slice();
+        next.splice(e.toIndex, 0, e.item);
+        s[key] = next;
+    };
+    return (
+        <Stack orientation="horizontal" gap="lg" style="inline-size: 100%">
+            <Stack gap="sm" grow>
+                <strong>To do</strong>
+                <Sortable<Task> label="To do" class="so-todo" group="tasks" items={() => s.todo} itemTemplate={row} onReorder={reorder('todo')} onRemove={remove('todo')} onAdd={add('todo')} style="min-block-size: 8rem" />
+            </Stack>
+            <Stack gap="sm" grow>
+                <strong>Done</strong>
+                <Sortable<Task> label="Done" class="so-done" group="tasks" items={() => s.done} itemTemplate={row} onReorder={reorder('done')} onRemove={remove('done')} onAdd={add('done')} style="min-block-size: 8rem" />
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## A handle, side by side, a refused drag
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Chip, Sortable, Stack } from '@motifx-community/ui';
+
+/** Chips side by side, moved by their handle only (the dots), with Ctrl + Left / Right on the handle; a drag may be refused. */
+export default function Handle() {
+    const s = reactive({ tags: ['Design', 'Build', 'Test', 'Ship', 'Locked'], told: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Sortable
+                label="Tags"
+                class="so-tags"
+                orientation="horizontal"
+                handle=".so-grip"
+                items={() => s.tags}
+                itemTemplate={tag => {
+                    const chip = new Chip({ text: tag });
+                    const grip = document.createElement('span');
+                    grip.className = 'mx-glyph so-grip';
+                    grip.dataset.icon = 'drag-dots';
+                    grip.setAttribute('aria-label', `Move ${tag}`);
+                    chip.element.prepend(grip);
+                    return chip;
+                }}
+                onDragStarting={e => {
+                    if (e.item === 'Locked') {
+                        e.cancel = true;
+                        s.told = 'Locked stays where it is.';
+                    }
+                }}
+                onReorder={e => {
+                    const next = s.tags.slice();
+                    next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+                    s.tags = next;
+                    s.told = next.join(', ');
+                }}
+            />
+            <output class="so-tags-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Dragging` | With the pointer after a few pixels; with a finger after a long press (a finger that moves before that scrolls). A copy follows the pointer, the item stays faint in its place, a line shows where it would land; the list scrolls near its edges. |
+| `Dropping` | The item’s element moves there at once and `onReorder` says from where to where: your data is yours to reorder. Across sortables of a group, `onRemove` and `onAdd` say the same on both sides. |
+| `Items from data` | With `items`, each item keeps its component as the order changes (the rows are keyed by item): reordering your array moves the rows, no row is made again. |
+| `Keys` | The focused item (its handle when there is one) takes Ctrl + Up / Down (Left / Right side by side), Ctrl + Home / End; each move is told to `onReorder` and read out. |
+| `Escape` | Cancels a drag; nothing moves. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `List` | A `group` named by `label`; the items are whatever you put in it. |
+| `Items` | One Tab stop that moves between the items with the keys; an item with a focusable part of its own keeps that. A handle is a button named by you. |
+| `Moves` | Each move by the keys is read out: “Moved to 2 of 5”. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-sortable` | The list. `data-orientation`, `data-sortable`, `data-drop-target` while a dragged item may land here. |
+| `.mx-sortable__item` | Each item. `data-dragging` on the one being dragged. |
+| `.mx-sortable__line` | The line where a drop would land. |
+| `.mx-sortable__ghost` | The copy after the pointer. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `sortable.container, .item, .line, .ghost` | Units: the list (`target`), an item (`sortable`, `dragging`, `focus`), the line (its thickness and colour; standing in a horizontal list), the copy. |
+| `sortable.gap` | Between the items. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `Bind<readonly T[]>` | — | The items, each drawn with `itemTemplate`; without them the JSX children are the items. |
+| `itemTemplate` | `(item, index) => ComponentBase` | the item’s text | Makes an item’s component. A function, so it is not bound like the other props. |
+| `handle` | `Bind<string \| null>` | `null` | A selector inside an item that takes the drag and the keys; without one the whole item does. |
+| `group` | `Bind<string \| null>` | `null` | Sortables of one group take each other’s items. |
+| `allowReordering` | `Bind<boolean>` | `true` | The items can be moved; `false` leaves them as they are. |
+| `orientation` | `Bind<SortableOrientation>` | `'vertical'` | `vertical` or `horizontal`: the drop line and the move keys follow. |
+| `label` | `Bind<string>` | `''` | What screen readers call the list. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onDragStarting` | event | A drag (or a move by the keys) is about to start (`item`, `fromIndex`); `cancel = true` refuses. |
+| `onDragChanging` | event | The place it would land changed (`to`, `toIndex`); `cancel = true` refuses that place. |
+| `onDragEnding` | event | About to drop; `cancel = true` leaves everything as it was. |
+| `onReorder` | event | An item moved within this sortable (`fromIndex`, `toIndex`, `item`), by a drop or the keys. Reorder your data here. |
+| `onRemove, onAdd` | event | An item went to another sortable of the group, and came into one: `from`, `to`, the indexes and the item. Move the data between your arrays here. |
+| `move(fromIndex, toIndex)` | `boolean` | Moves an item from code as a drop would, telling `onReorder`. |
+| `elements` | read-only | The items’ elements, in order. |
+| `isDragging` | read-only | An item is being dragged. |
+| `refresh()` | `void` | Reads the items again after they were changed in place. |
+
+
 ---
 
 # FormLayout
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 Lays out the fields of a data object on a grid. Each field gets an editor — by name, or by the type of its value — bound to the object both ways; groups, spans and buttons arrange them; sending the form checks every field first.
 
@@ -14866,7 +17139,7 @@ FormLayout.editors.set('color', (props) => new ColorPicker(props));
 
 # TreeView
 
-> Data · @motifx-community/ui 0.1.0-beta.0
+> Data · @motifx-community/ui 0.1.0-beta.2
 
 A tree view shows items in a hierarchy. Rows open and close, are selected one or many at a time, can carry check boxes that add up to their parents, can be searched, and can load their children when they are first opened. Long trees draw only the rows in view.
 
@@ -15051,7 +17324,7 @@ The tree writes four texts, all from `uiLocale.strings`: `noItems` (nothing to s
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of the kit; the trees on the page follow at once. */
@@ -15059,7 +17332,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -15633,7 +17906,7 @@ export default function SizesAndLines() {
 
 # ListBox
 
-> Data · @motifx-community/ui 0.1.0-beta.0
+> Data · @motifx-community/ui 0.1.0-beta.2
 
 A list that stays on the page. One item or several are chosen with the keys or the pointer; items come from memory or from a data source, can be searched and grouped, and long lists draw only the rows in view.
 
@@ -15797,14 +18070,14 @@ export const cities = ['Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Kon
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, ListBox, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, ListBox, uiLocale } from '@motifx-community/ui';
 
 /** Switches the texts of every list on the page: “Select all”, the search box, “No items”. */
 export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -16011,7 +18284,7 @@ export default function Validation() {
 
 # TagBox
 
-> Data · @motifx-community/ui 0.1.0-beta.0
+> Data · @motifx-community/ui 0.1.0-beta.2
 
 Picks several items. The chosen ones are tags in the field, followed by a text input that searches the list; items come from memory or from a data source, and typed text can become a tag of its own.
 
@@ -16352,7 +18625,7 @@ export default function Validation() {
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, TagBox, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, TagBox, uiLocale } from '@motifx-community/ui';
 import { skills } from './skills';
 
 /** Switches the texts of every tag box on the page: remove buttons, “+3”, “Select all”. */
@@ -16360,7 +18633,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -16376,7 +18649,7 @@ export default function Localization() {
 
 # FilterBuilder
 
-> Data · @motifx-community/ui 0.1.0-beta.0
+> Data · @motifx-community/ui 0.1.0-beta.2
 
 A filter builder lets people put a filter together by hand: groups joined by And, Or, Not And or Not Or, and conditions of a field, an operation and a value. Its value is the data layer's filter expression, so it goes to rows in memory and to every adapter as it is. The DataGrid opens it from its filter panel; on its own it serves a report screen or a saved search.
 
@@ -16950,7 +19223,7 @@ export default function CustomOperations() {
 ```tsx
 import { reactive } from '@motifx/core';
 import { data } from '@motifx-community/data';
-import { Button, FilterBuilder, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, FilterBuilder, uiLocale } from '@motifx-community/ui';
 import { saleFields } from './sales';
 
 /** The builder's texts come from `uiLocale`; `texts` changes some for one builder only. */
@@ -16958,7 +19231,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -16981,7 +19254,7 @@ export default function Localization() {
 
 # TabDocumentManager
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 A document manager in the way code editors arrange files: documents in tabs, tabs in groups, groups split side by side and one under the other. A document's content is any component, a form, a grid or plain text, and it is moved, never made again, when its tab goes to another group. Everything the user does is a method too, asks first and reports after; the whole layout saves to JSON and comes back. Preview and pinned tabs, sizes and copies are on [Tabs](tabdocs-tabs.md); context menus, lists and keys on [Menus and keys](tabdocs-menus.md).
 
@@ -17873,7 +20146,7 @@ export default function SaveRestore() {
 
 # TabDocumentManager: Tabs
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 What a tab does in a code editor: preview tabs that the next preview replaces, pinned tabs that stay at the start, tabs that shrink, wrap or scroll, counts and colours, and the same document open in two groups.
 
@@ -18707,7 +20980,7 @@ export default function Duplicates() {
 
 # TabDocumentManager: Menus and keys
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 The commands around the tabs: context menus on tabs and on the empty strip, a searchable list of a group's documents, the app's own toolbar buttons, the recently used list, back and forward, reopening what was closed, locked groups, and the keys for all of them.
 
@@ -19400,7 +21673,7 @@ export function customerCard(customer: Customer): ComponentBase {
 
 # TabDocumentManager: Drag and drop
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 Tabs and whole groups dragged as in a code editor: along a strip, to another group, beside a group or along an edge of the layout, between two managers, and the same moves from the keyboard. Every drop goes through the methods and events of what it does.
 
@@ -19958,7 +22231,7 @@ export default function MoveWithKeys() {
 
 # TabDocumentManager: Dock and floating windows
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 Documents and whole groups float in windows of their own in the page and dock again into the documents' groups or into dock areas around them, which fold to the manager's edge. The mouse, the keys and the code do the same, through the same events.
 
@@ -20839,7 +23112,7 @@ export function customerCard(customer: Customer): ComponentBase {
 
 # TabDocumentManager: New windows
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 A document, a group or a floating window moves into a browser window of its own, and back. Its content moves with it, nothing is made again, and the new window is a part of the same manager: its tabs, menus, keys and drag work as they do here.
 
@@ -21500,7 +23773,7 @@ export default function WindowLayout() {
 
 # TabDocumentManager: Tablet and phone
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 On a tablet and a phone a layout of groups, splits and dock areas does not fit as it is. The manager keeps the layout and shows it another way: the same documents, groups and areas, the same saved JSON, the content moved and never made again. It goes by its own width, not by the device; on a touch screen its tabs and buttons get larger.
 
@@ -21781,7 +24054,7 @@ The drawers and sheets are the kit's [Drawer](drawer.md) and [BottomSheet](botto
 
 # TabDocumentManager: A whole workspace
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 A whole screen made of the kit's parts: a menu bar, the manager, a DataGrid with everything turned on, forms and a tool docked at the bottom. Each part is the same component it is on its own page; the manager only holds them.
 
@@ -22194,7 +24467,7 @@ export function customerCard(customer: Customer): ComponentBase {
 
 # Scheduler
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 Appointments over days and hours: day, week, work week and month views, all-day and multi-day bars, appointments at the same time side by side, and "+N more" where a day is full. From an array or a data source, with every setting live.
 
@@ -22790,7 +25063,7 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 
 # Scheduler: Editing
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 Appointments are added, moved, resized, copied and deleted with the pointer, the keys and code; every change asks its event first, can wait for a server, and goes back when saving fails.
 
@@ -23339,7 +25612,7 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 
 # Scheduler: Recurrence and time zones
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 Appointments that repeat by an RFC 5545 rule, with times left out and occurrences changed apart; a question on what a change reaches; an editor of the rule; and the days on the clock of any time zone, summer time included.
 
@@ -23763,7 +26036,7 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 
 # Scheduler: Resources and groups
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 Rooms, people and any other kind of resource: they colour the appointments, split the columns into groups (nested, or under each date), say when each one works and when nothing may be put in.
 
@@ -24469,7 +26742,7 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 
 # Scheduler: The appointment form
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 The appointment form set up without events: which fields, in which order, in groups and tabs; editors of your own; checks per field; fields shown or locked for one appointment only. Or a form of your own.
 
@@ -25104,7 +27377,7 @@ export default function OwnForm() {
 
 # Scheduler: Timeline
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 A row per resource with the time running along it: a day, a week, a work week or a month. Appointments at the same time stack in their row, and the row grows to fit them.
 
@@ -25740,7 +28013,7 @@ export default function TimelineTemplates() {
 
 # Scheduler: Agenda
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 The coming days as a list: each day with its appointments in time order, a day with none left out.
 
@@ -26341,7 +28614,7 @@ export default function AgendaTemplates() {
 
 # Scheduler: Big data
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 Thousands of resources and appointments: the scheduler builds only what is in view, and lays out only what changed.
 
@@ -26598,7 +28871,7 @@ export default function BigWeek() {
 
 # Scheduler: Tablet and phone
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 On a tablet and a phone the scheduler keeps its appointments, views and date and shows them another way: a phone gets the agenda, a compact bar and sheets from the bottom; a finger lifts, resizes, swipes and pinches.
 
@@ -27266,7 +29539,7 @@ export default function Touch() {
 
 # Scheduler: iCalendar and print
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 Appointments out to an iCalendar file and back in (RFC 5545), for Outlook, Google Calendar and Apple Calendar; and the scheduler on paper.
 
@@ -27861,7 +30134,7 @@ export function sampleAppointments(): Meeting[] {
 
 # DataGrid
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 A grid for data entry and large data: rows in memory or from any adapter of the data layer, a virtual list or pages, sorting, column layout, editing with the kit's editors, new rows with the Tab chain, three save modes, row actions, selection, filters, a search panel, grouping, summaries, a toolbar, lookup columns from other services, copy and paste, export and a layout that is kept — and every feature can be turned off, for the grid or for one column.
 
@@ -28227,7 +30500,7 @@ export default function Pager() {
 
 # DataGrid: Editing
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Editing and save modes
 
@@ -28768,7 +31041,7 @@ export default function BarActions() {
 
 # DataGrid: Edit forms and popups
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Edit forms and popups
 
@@ -29174,7 +31447,7 @@ export default function ValidationRules() {
 
 # DataGrid: Filtering and search
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Filters
 
@@ -29633,7 +31906,7 @@ export function makeCustomers(n: number): Customer[] {
 
 # DataGrid: Lookup columns
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Lookup columns
 
@@ -30000,7 +32273,7 @@ export default function TextFrom() {
 
 # DataGrid: Grouping and summaries
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Grouping
 
@@ -30423,7 +32696,7 @@ export default function SummariesServer() {
 
 # DataGrid: Master-detail
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Master-detail
 
@@ -30753,7 +33026,7 @@ export default function DetailTabs() {
 
 # DataGrid: Bands and adaptive columns
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Band headers
 
@@ -31074,7 +33347,7 @@ export default function AdaptiveColumns() {
 
 # DataGrid: Selection and export
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Selection
 
@@ -31677,7 +33950,7 @@ export default function PdfExport() {
 
 # DataGrid: Row drag and drop
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Reorder rows
 
@@ -32022,7 +34295,7 @@ export default function RowDragBetween() {
 
 # DataGrid: Selecting by dragging
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Rows
 
@@ -32352,7 +34625,7 @@ export default function CellRanges() {
 
 # DataGrid: Scrolling
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Scrolling modes
 
@@ -32704,7 +34977,7 @@ export default function InfiniteGroups() {
 
 # DataGrid: Layout and events
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Toolbar
 
@@ -33248,7 +35521,7 @@ export default function Events() {
 
 # DataGrid: API reference
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.0
+> DataGrid · @motifx-community/ui 0.1.0-beta.2
 
 ## Columns
 
@@ -33554,7 +35827,7 @@ The rows and their saving are the data layer's: `grid.dataSource` and `grid.chan
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, DataGrid, enStrings, Stack, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, DataGrid, Stack, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 import type { Order } from './order';
 import { columns } from './orders';
@@ -33564,7 +35837,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
 
   return (