prime-ui-kit 0.13.1 → 0.14.0

package/src/components/field-list/examples/narrow.tsx

@@ -0,0 +1,68 @@
+/** The invoice lines in a 320 px column: the headings give way, each row stacks its fields with their own labels and rows stand a group apart — `columns`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Line = { id: string; service: string; quantity: string; price: string };
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Услуга" },
+  { label: "Кол-во", width: "s" },
+  { label: "Цена", width: "m" },
+];
+
+const LINES: Line[] = [
+  { id: "setup", service: "Внедрение CRM", quantity: "1", price: "180 000" },
+  { id: "training", service: "Обучение менеджеров", quantity: "3", price: "15 000" },
+];
+
+export default function FieldListNarrowExample() {
+  const [lines, setLines] = React.useState(LINES);
+
+  return (
+    <div className={styles.narrow}>
+      <FieldList
+        label="Позиции счёта"
+        columns={COLUMNS}
+        value={lines}
+        onValueChange={setLines}
+        getId={(line) => line.id}
+        getLabel={(line) => line.service}
+        createItem={() => ({ id: crypto.randomUUID(), service: "", quantity: "1", price: "" })}
+        addLabel="Добавить позицию"
+        renderItem={(line, row) => (
+          <>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.service}
+                  onChange={(event) => row.update({ service: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.quantity}
+                  inputMode="numeric"
+                  onChange={(event) => row.update({ quantity: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.price}
+                  inputMode="decimal"
+                  onChange={(event) => row.update({ price: event.target.value })}
+                />
+                <Input.InlineAffix side="end">₽</Input.InlineAffix>
+              </Input.Wrapper>
+            </Input.Root>
+          </>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/field-list/examples/overview.tsx

@@ -0,0 +1,66 @@
+/** Lines of an invoice: the column headings stand once above the rows, each row has a remove button and the add button sits under them — `columns`, `renderItem`, `createItem`, `addLabel`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Line = { id: string; service: string; quantity: string; price: string };
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Услуга" },
+  { label: "Кол-во", width: "s" },
+  { label: "Цена", width: "m" },
+];
+
+const LINES: Line[] = [
+  { id: "setup", service: "Внедрение CRM", quantity: "1", price: "180 000" },
+  { id: "training", service: "Обучение менеджеров", quantity: "3", price: "15 000" },
+];
+
+export default function FieldListOverviewExample() {
+  const [lines, setLines] = React.useState(LINES);
+
+  return (
+    <FieldList
+      label="Позиции счёта"
+      columns={COLUMNS}
+      value={lines}
+      onValueChange={setLines}
+      getId={(line) => line.id}
+      getLabel={(line) => line.service}
+      createItem={() => ({ id: crypto.randomUUID(), service: "", quantity: "1", price: "" })}
+      addLabel="Добавить позицию"
+      renderItem={(line, row) => (
+        <>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.service}
+                placeholder="Поддержка, 1 месяц"
+                onChange={(event) => row.update({ service: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.quantity}
+                inputMode="numeric"
+                onChange={(event) => row.update({ quantity: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.price}
+                inputMode="decimal"
+                placeholder="0"
+                onChange={(event) => row.update({ price: event.target.value })}
+              />
+              <Input.InlineAffix side="end">₽</Input.InlineAffix>
+            </Input.Wrapper>
+          </Input.Root>
+        </>
+      )}
+    />
+  );
+}

package/src/components/field-list/examples/reorder.tsx

@@ -0,0 +1,42 @@
+/** Selling points of a plan in the order of the pricing page: a one-column list has no headings and no numbers, a point moves by its handle or Alt+arrows — `reorderable`, `getLabel`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Point = { id: string; text: string };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Преимущество" }];
+
+const POINTS: Point[] = [
+  { id: "users", text: "До 50 сотрудников в одном пространстве" },
+  { id: "storage", text: "200 ГБ для документов и вложений" },
+  { id: "support", text: "Поддержка в рабочие часы, ответ за 2 часа" },
+  { id: "api", text: "Доступ к API и вебхукам" },
+];
+
+export default function FieldListReorderExample() {
+  const [points, setPoints] = React.useState(POINTS);
+
+  return (
+    <FieldList
+      label="Преимущества тарифа"
+      columns={COLUMNS}
+      reorderable
+      value={points}
+      onValueChange={setPoints}
+      getId={(point) => point.id}
+      getLabel={(point) => point.text}
+      createItem={() => ({ id: crypto.randomUUID(), text: "" })}
+      addLabel="Добавить преимущество"
+      renderItem={(point, row) => (
+        <Input.Root>
+          <Input.Wrapper>
+            <Input.Field
+              value={point.text}
+              onChange={(event) => row.update({ text: event.target.value })}
+            />
+          </Input.Wrapper>
+        </Input.Root>
+      )}
+    />
+  );
+}

package/src/components/field-list/examples/sizes.tsx

@@ -0,0 +1,42 @@
+/** Every tier: the headings, the fields, the handle and the buttons follow the list's size — `size`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+
+type Contact = { id: string; name: string; phone: string };
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+const COLUMNS: FieldListColumn[] = [{ label: "Контакт" }, { label: "Телефон", width: "m" }];
+
+const CONTACTS: Contact[] = [{ id: "buyer", name: "Анна Лебедева", phone: "+7 912 404-18-20" }];
+
+export default function FieldListSizesExample() {
+  return (
+    <>
+      {SIZES.map((size) => (
+        <FieldList
+          key={size}
+          size={size}
+          label={size}
+          columns={COLUMNS}
+          defaultValue={CONTACTS}
+          getId={(contact) => contact.id}
+          getLabel={(contact) => contact.name}
+          renderItem={(contact) => (
+            <>
+              <Input.Root>
+                <Input.Wrapper>
+                  <Input.Field defaultValue={contact.name} />
+                </Input.Wrapper>
+              </Input.Root>
+              <Input.Root>
+                <Input.Wrapper>
+                  <Input.Field type="tel" defaultValue={contact.phone} />
+                </Input.Wrapper>
+              </Input.Root>
+            </>
+          )}
+        />
+      ))}
+    </>
+  );
+}

package/src/components/field-list/examples/states.tsx

@@ -0,0 +1,51 @@
+/** The same list editable and disabled while the request saves it: fields, handles and buttons turn off together — `disabled`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+
+type Stage = { id: string; name: string; days: string };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Этап" }, { label: "Дней", width: "s" }];
+
+const STAGES: Stage[] = [
+  { id: "brief", name: "Бриф и смета", days: "3" },
+  { id: "design", name: "Дизайн", days: "10" },
+];
+
+const STATES = [
+  { label: "Этапы проекта", disabled: false },
+  { label: "disabled", disabled: true },
+];
+
+export default function FieldListStatesExample() {
+  return (
+    <>
+      {STATES.map((state) => (
+        <FieldList
+          key={state.label}
+          label={state.label}
+          disabled={state.disabled}
+          reorderable
+          columns={COLUMNS}
+          defaultValue={STAGES}
+          getId={(stage) => stage.id}
+          getLabel={(stage) => stage.name}
+          createItem={() => ({ id: crypto.randomUUID(), name: "", days: "" })}
+          addLabel="Добавить этап"
+          renderItem={(stage) => (
+            <>
+              <Input.Root>
+                <Input.Wrapper>
+                  <Input.Field defaultValue={stage.name} />
+                </Input.Wrapper>
+              </Input.Root>
+              <Input.Root>
+                <Input.Wrapper>
+                  <Input.Field defaultValue={stage.days} inputMode="numeric" />
+                </Input.Wrapper>
+              </Input.Root>
+            </>
+          )}
+        />
+      ))}
+    </>
+  );
+}

package/src/components/input/examples/examples.module.css

@@ -16,7 +16,8 @@
 
 .formFields {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  /* Two columns while each keeps 12rem, one column in a narrower form — from its own width. */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-16) * 3)), 1fr));
   align-items: start;
   gap: var(--prime-space-5) var(--prime-space-4);
 }
@@ -30,9 +31,3 @@
   justify-content: flex-end;
   gap: var(--prime-space-2);
 }
-
-@media (max-width: 639px) {
-  .formFields {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}

package/src/components/kanban/COMPONENT.md

@@ -32,7 +32,7 @@ import {
 ```
 Kanban.Root                          board: horizontal strip of columns, its own Dnd.Root if none above
 └─ <ul> (Dnd.Sortable, axis x)       the columns in `columnOrder`
-   └─ <li> column (from `columns`)   `fill-muted` well (one ladder step off the board's surface)
+   └─ <li> column (from `columns`)   no well with a header plate (`plain`) or a header line (`line`), or a `fill-muted` well (`well`)
       ├─ header                      title (h3) · count Badge (the stage color) · renderColumnActions(column) · [grip Dnd.Handle, a lock when `locked`]
       │  ├─ description              muted line under the title (`column.description`)
       │  └─ meta                     the stage's figures (`renderColumnMeta(column)`)
@@ -73,7 +73,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | `renderColumnActions` | `(column: KanbanColumn) => ReactNode` | — | Trailing actions of a column header (add a card, a menu); kit controls inside take the `s` tier. |
 | `renderColumnMeta` | `(column: KanbanColumn) => ReactNode` | — | The meta line under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»). |
 | `canDrop` | `(id: string, columnId: string) => boolean \| string` | — | A workflow rule: refuses card `id` in column `columnId` — `false`, or a string that says why (spoken and shown under the carried card). |
-| `variant` | `"well" \| "plain"` | `"well"` | `well`: every column is a filled well with its cards inside. `plain`: no wells — a filled header plate and wider cards carry the column. |
+| `variant` | `"plain" \| "line" \| "well"` | `"plain"` | No wells: `plain` — a filled header plate over the cards, `line` — a bare header over a faint line; cards stand on the host. `well`: every column is a filled well holding its cards (bounded queues). |
 | `loading` | `boolean` | `false` | Columns show skeleton cards in the card geometry; the cards cross-fade in when it turns off. |
 | `disabled` | `boolean` | `false` | Read-only board: no drag, no keyboard moves, no column grips; `onItemClick` and `getItemHref` still open cards. |
 | `labels` | `Partial<KanbanLabels>` | — | Built-in strings, see Labels. |
@@ -126,8 +126,11 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `well` | every column is a filled well (`fill-muted`, radius `l`), cards inside it | the default board; columns must read as areas | yes |
-| `plain` | no wells: the column is its header — a filled plate (`fill-muted`, radius `l`) as wide as the cards — and its cards, which widen to almost the full column, so neighbouring columns stand closer | a lighter board on a page that already has its own surface | |
+| `plain` | no wells: the column is its header — a filled plate as wide as the cards (title, count) — and its cards, which stand on the board's host, each a surface one ladder step off it (white on the light page), as a Card on the page | the board is the page's main region (a pipeline, a task board, a queue screen) or sits in a Card or Drawer — one level of nesting, cards are the only boxes | yes |
+| `line` | no wells, like `plain`, but the header is bare: title and count over a faint inset hairline as wide as the cards | the same places as `plain` when the headers should stay quiet — many columns, a calm board, the column headers are not the focus | |
+| `well` | every column is a filled well (`fill-muted`, radius `l`) holding its cards (the selected step of the well) | columns must read as bounded queues: WIP limits and capacity, many sparse or empty columns whose drop area must show, a dense board of many narrow columns | |
+
+Do not wrap a `plain` board's columns in your own boxes, and do not put a `well` board inside a filled box of your own — both are the double nesting the variants exist to avoid.
 
 ### Flags
 | Value | Looks like | Use when | Default |
@@ -167,11 +170,11 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - Give the root a height (`className`): columns span it and every column body scrolls on its own; without one the columns take the height of the tallest.
 - The board is a size container. From 40rem of its own width columns keep a fixed 18rem; below it a column takes 85% of the board and snaps (`scroll-snap-type: x mandatory`), so the next column peeks. Snapping is off while a drag auto-scrolls the strip.
 - The strip scrolls sideways inside the board, never the page. Cards sit at the top of their column; the drop area runs to the bottom of the column, so a card can be released anywhere in it.
-- `well`: column gap `--prime-space-3`, cards inset `--prime-space-2` from the column edge, column radius `l`. `plain`: column gap `--prime-space-3`, cards inset `--prime-space-1` (room for the focus ring). Card gap `--prime-space-2`, card padding `--prime-space-3`, card radius `m`.
+- `plain` / `line`: column gap `--prime-space-3`, cards inset `--prime-space-1` (room for the focus ring); a card sets `data-depth` one above the board's host and paints `--prime-color-layer-current`, so it keeps its color in flight too. `well`: column gap `--prime-space-3`, cards inset `--prime-space-2` from the column edge, column radius `l`. Card gap `--prime-space-2`, card padding `--prime-space-3`, card radius `m`.
 - The column title is `title-m`; the header is at least a control `m` tall, its text starts where the card text does.
-- A faint inset hairline (`--prime-color-border-faint`, as in a dialog header) separates the header from the cards.
+- `well` and `line`: a faint inset hairline (`--prime-color-border-faint`, as in a dialog header) separates the header from the cards. `plain`: the header is a filled plate (`--prime-color-fill-muted`, `--prime-radius-l`) as wide as the cards, in place of the hairline.
 - The header is a grid: the title, the count, the actions and the grip at the end on the first row; the description under the title on the second, the meta line under it (`--prime-space-1` above, caption, `text-secondary`).
-- A card is `--prime-color-control-selected` (two ladder steps off its column; white in light) on `--prime-shadow-raised`.
+- A card is on `--prime-shadow-raised`: in `plain` / `line` the next layer of the board's host (`--prime-color-layer-current` of its own depth), in `well` `--prime-color-control-selected` (two ladder steps off its well; white in light).
 - `Kanban.ItemHeader` is a muted caption row over a faint hairline (`--prime-color-border-faint`); a card without it starts with its title or a full-width `Thumbnail` cover.
 - Header actions get the `s` tier; inside a card, kit controls take the `m` host tier (a `Badge` is `s`). Pick a small `Avatar` (`size="s"`).
 
@@ -215,10 +218,10 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A release board: cards move within and between columns by drag, a touch hold or Alt + arrows; a card shows its meta line, labels, comments and assignee — `Kanban.Root`, `Kanban.Item`, `renderItem`, `renderColumnActions`. |
-| [variants.tsx](examples/variants.tsx) | The same release board in both looks: columns as filled wells, and bare columns where the header and wider cards carry each column — `variant`. |
+| [variants.tsx](examples/variants.tsx) | The same release board in three looks: no wells with a header plate, no wells with a header over a line, and columns as filled wells holding their cards — `variant`. |
 | [structure.tsx](examples/structure.tsx) | Cards take only the parts they need: a title alone, a meta line, labels, a footer with counts and an assignee — `Kanban.ItemTitle`, `Kanban.ItemDescription`, `Kanban.ItemBadges`, `Kanban.ItemFooter`, `Kanban.ItemCount`. |
 | [cards.tsx](examples/cards.tsx) | Three kinds of cards on one board: a plain note, a ticket with a header row of key and priority, a design task with a cover — `Kanban.ItemHeader`, `Thumbnail`, `Kanban.ItemFooter`. |
-| [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`. |
+| [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. |
 | [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
 | [saving.tsx](examples/saving.tsx) | Every move is saved on the server: the card waits busy in its new place, and an invoice the server refuses to close glides back to its column — `onValueChange`. |
 | [item-link.tsx](examples/item-link.tsx) | Tickets that open: each card is a link to its page, so ⌘-click or a middle click opens a new tab, a plain click, Enter or Space opens it in place, and a drag only moves it — `getItemHref`, `onItemClick`. |
@@ -234,6 +237,7 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - A hover-only action on a card → touch has no hover; put the action in the card or open the card on click (`onItemClick`).
 - `onClick` / `onKeyDown` on `Kanban.Item` to open a card → `onItemClick` (click, Enter, Space, never after a drag) or `getItemHref` for a page of its own.
 - `getItemHref` without `getLabel` → the link is named by the card id; pass a human name.
+- Drawing your own box (a Card, a filled `div`) around each column, or around a `well` board → pick the `variant`: `plain` or `line` for one level of nesting, `well` when columns must read as bounded queues.
 - Styling a card from an ancestor (`.board .card`) → the flying clone is portalled to `<body>` and loses it; put the class on `Kanban.Item`.
 - Keeping the column order in `columns` and reordering that array → pass `columnOrder` / `onColumnOrderChange`; `columns` stays the data.
 - Putting a system stage back first after every move → `locked: true` on that column.

package/src/components/kanban/examples/limits.tsx

@@ -1,4 +1,4 @@
-/** A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`. */
+/** A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. */
 import { Badge, Kanban } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -33,6 +33,7 @@ export default function KanbanLimitsExample() {
     <Kanban.Root
       aria-label="Очередь поддержки"
       className={styles.board}
+      variant="well"
       columns={COLUMNS}
       items={TICKETS}
       getId={(ticket) => ticket.id}

package/src/components/kanban/examples/variants.tsx

@@ -1,11 +1,11 @@
-/** The same release board in both looks: columns as filled wells, and bare columns where the header and wider cards carry each column — `variant`. */
-import { Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
+/** The same release board in three looks: no wells with a header plate, no wells with a header over a line, and columns as filled wells holding their cards — `variant`. */
+import { Badge, Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-type Task = { id: string; title: string; due: string };
+type Task = { id: string; title: string; due: string; label: string };
 
-const VARIANTS: KanbanVariant[] = ["well", "plain"];
+const VARIANTS: KanbanVariant[] = ["plain", "line", "well"];
 
 const COLUMNS = [
   { id: "todo", title: "К выполнению", description: "Берём после планирования" },
@@ -14,10 +14,15 @@ const COLUMNS = [
 ];
 
 const TASKS: Task[] = [
-  { id: "PRJ-214", title: "Экспорт счетов в CSV для бухгалтерии", due: "14 окт" },
-  { id: "PRJ-221", title: "Фильтр заказов по складу", due: "17 окт" },
-  { id: "PRJ-198", title: "Повторная отправка приглашений в команду", due: "10 окт" },
-  { id: "PRJ-176", title: "Онбординг нового проекта", due: "3 окт" },
+  { id: "PRJ-214", title: "Экспорт счетов в CSV для бухгалтерии", due: "14 окт", label: "Финансы" },
+  { id: "PRJ-221", title: "Фильтр заказов по складу", due: "17 окт", label: "Заказы" },
+  {
+    id: "PRJ-198",
+    title: "Повторная отправка приглашений в команду",
+    due: "10 окт",
+    label: "Команда",
+  },
+  { id: "PRJ-176", title: "Онбординг нового проекта", due: "3 окт", label: "Проекты" },
 ];
 
 const PLACEMENT = {
@@ -45,6 +50,9 @@ export default function KanbanVariantsExample() {
               <Kanban.ItemDescription>
                 {task.id} · до {task.due}
               </Kanban.ItemDescription>
+              <Kanban.ItemBadges>
+                <Badge.Root>{task.label}</Badge.Root>
+              </Kanban.ItemBadges>
             </Kanban.Item>
           )}
         />

package/src/components/list/COMPONENT.md

@@ -134,7 +134,7 @@ A second line or an avatar makes a row taller than the one-line height; the vert
 | current | `current` | `aria-current="true"` (button) or `"page"` (link); `fill-muted-hover` fill, primary text |
 | focus-visible | keyboard | the focus ring inside the row edge |
 | disabled | `disabled` | `disabled` on a button; `aria-disabled="true"`, no `href` on a link, `tabindex="-1"` on an `asChild` element; `data-disabled="true"`; disabled text; in a reorderable list the handle is disabled and the row holds its place |
-| reorderable | `onReorder` | `data-reorderable="true"` on the root (a `Dnd.Sortable` `<ul>`); each `<li>` is a sortable item (`data-dnd-item` = `value`) with a leading `Dnd.Handle`; drag by the handle (a touch hold on touch), Alt + ↑ / ↓ from the handle or the row; a lifted row leaves a dashed gap, its neighbours glide, the copy follows the pointer and sets down in its new place |
+| reorderable | `onReorder` | `data-reorderable="true"` on the root (a `Dnd.Sortable` `<ul>`); each `<li>` is a sortable item (`data-dnd-item` = `value`) with a leading `Dnd.Handle`; drag by the handle (a touch hold on touch), Alt + ↑ / ↓ from the handle or the row; a lifted row leaves a dashed gap in the row's radius, its neighbours glide, the copy (handle and row, in the row's padding and radius) follows the pointer and sets down in its new place without a jump |
 | saving a move | `onReorder` returned a pending promise | the row stays in its new place, `aria-busy="true"`, a `Spinner` stands in for the handle, the row content dims to 0.6 (`--prime-motion-duration-fast` both ways); a rejection glides the row back |
 
 Root attribute: `data-size`. The fill changes on `background-color` with `--prime-motion-duration-xfast` both ways (0 under reduced motion).

package/src/components/media-viewer/COMPONENT.md

@@ -93,8 +93,8 @@ MediaViewer has no `variant`, `size` or `tone`: the stage is always near black,
 | gesture | a finger or the mouse dragging | `data-gesture="page \| pan \| pinch \| dismiss"` on the dialog |
 | chrome hidden | a tap, a pinch or a double tap (Tab brings it back); a playing video after 2.5 s without the pointer moving | `data-chrome="hidden"`: the bars fade and drift aside, take no presses; while a video plays the pointer hides too (`data-playing`). A video standing still always keeps its bar |
 | flight | open and close | `data-phase="opening \| open \| closing"`: only the picture moves; the play disk and the bars come after it lands and go before it takes off |
-| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a Spinner |
-| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel with «Повторить» |
+| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a Spinner that fades out as the picture arrives |
+| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel with «Повторить»; it fades in, and on a retry cross-fades with the Spinner in the same place |
 | sound | the sound button, its level panel (hover, focus, a tap), ↑ / ↓, M | one `volume` and mute for every video of the viewer; `data-open` on the sound control while the level shows; `autoPlay` refused with sound starts muted |
 
 Motion: it opens out of the thumbnail it was opened from — the picture grows from the thumbnail's shape to its fit over `base` on the `emphasized` curve while the stage fades in — and closes back into the thumbnail of the item on screen (`getOrigin`; without it the opener for the item it opened at, and for any other item the picture on the page that shows its `thumbnail`, `src` or `poster`, nearest the opener — paging on in a grid still closes into the right tile); without one, or with less than a fifth of it in view, it rises from a slight shrink and fades. The shape is what the page shows of the thumbnail: its media box, cut by every clipping ancestor (a scroller, a rounded album, a bubble) and the viewport, and the radius of each corner taken from the frame whose corner it is — an album's inner tiles fly square, its corner tiles round only on the outer side, and the corners glide all the way, never snap. During the flight only the picture moves; a video flies as the frame of the thumbnail it opened from (drawn before the first paint), starts only after it lands (`autoPlay`) and pauses before it takes off. Released gestures settle with a spring: a page turns past half its width or on a flick, and any other item — a thumbnail far along the strip, `Home` / `End` — arrives by the same slide, never a cut or a fade; the filmstrip follows the track on every frame, so its glide and the emphasis of its thumbnails move with the finger and settle with the page; a zoomed picture coasts with iOS momentum (deceleration 0.998 / ms) and springs back from its edges, and at its edge a sideways drag turns the page; a pinch past its range resists like a rubber band and settles inside it, a swipe away shrinks the picture and thins the stage and closes past 12% of the height or on a flick. Under `prefers-reduced-motion` the open and close are instant and the springs land at once; the picture still follows the finger.

package/src/components/message/COMPONENT.md

@@ -116,7 +116,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 |---|---|---|---|
 | `author` | `ReactNode` | — (required) | Who wrote the quoted message. |
 | `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"blue"` | The author's hue (the same as their `Message.Author`). |
-| `target` | `string` | — | The `value` of the quoted message: a press brings the chat to it (rendering it first in a window), the other messages blink back around it, and the focus moves to it. Makes the quote a button. |
+| `target` | `string` | — | The `value` of the quoted message: a press brings the chat to it (rendering it first in a window), the message blinks, and the focus moves to it. Makes the quote a button. |
 | `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | — | A press on the quote, after `target` is shown: load the original when it is not in the list yet. Makes the quote a button. |
 | `labels` | `Partial<MessageReplyLabels>` | — | `reply` — the hidden prefix read before the quote. |
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "color" \| "onClick">` | — | `children` (the quoted text, one line), `className`. |
@@ -302,7 +302,7 @@ The list-level settings a message reads — the group chat's author header and a
 | author header | `Message.Author` in a group chat (`Chat.Messages type="group"`) on `single` / `first`; any message on its own | the header line at the top of the bubble; over a picture or a circle on the media pill at the top-start corner; hidden on `middle` / `last` and in a direct chat (the author still names the message) |
 | avatar | `Message.Avatar` in a group chat on `single` / `last` | the avatar in the gutter at the bubble's bottom; the gutter stays empty on the others |
 | new at the end | the chat's list decided it (`data-enter="incoming"` / `"outgoing"`) | the message column floats up `--prime-space-3` from below and fades in (`fast`, enter easing, `transform` + `opacity` only; the row box clips it); never on a first render, history or a status change. See Chat |
-| pointed at / stepping back | the chat's jump, search or selection (`data-pointed`, `data-selected` on the message; `data-pointing`, `data-selecting` on the list) | nothing is drawn on the message: it stays at full strength while the others — the bubble, picture or circle with its tail and reactions, the avatar, the retry — step back to `--prime-message-dim-opacity` with a slight desaturation (selection: `fast`, both ways; a jump: three blinks, `base` each; the current search match: while it is current). Reduced motion: no blink |
+| pointed at / stepping back | the chat's jump, search or selection (`data-pointed`, `data-selected` on the message; `data-pointing`, `data-selecting` on the list) | nothing is drawn on the message: it stays at full strength while the others — the bubble, picture or circle with its tail and reactions, the avatar, the retry — step back to `--prime-message-dim-opacity` with a slight desaturation (selection: `fast`, both ways; the current search match: while it is current); a jump instead blinks the message itself three times, `base` each, the others stay still. Reduced motion: no blink |
 | search match | the chat's search query | every case-insensitive match in `Message.Text` and the transcripts under a soft accent wash (`<mark>`) |
 | typing | `Message.Typing active` | an incoming bubble of three dots rising and fading in turn on the loading loop (reduced motion slows it); enters floating up while its height opens (`fast`), leaves closing its height (`fast`) — or at once when a reply arrives at the end of the list in the same update; its block axis clips, so a closed row leaves nothing under the list |
 | status change | `status` | the ticks cross-fade and scale (`base`, `emphasized`), interruptible |

package/src/components/notification/COMPONENT.md

@@ -152,6 +152,7 @@ Collapsed stacks show up to 3 cards peeking behind each other. Hover or keyboard
 ### ARIA
 - Each stack is an `<ol>` named by the region label of its position; each card is an `<article>`: `role="status"` + `aria-live="polite"`, or `role="alert"` + `aria-live="assertive"` for `warning` / `danger`.
 - The icon and the countdown are `aria-hidden`; the close button is named by `labels.close`.
+- A toast is a non-modal live region, not a layer of the overlay stack: Escape and a press elsewhere belong to the page and to the topmost open layer, so a toast takes no `closeOnEscape` / `closeOnOutsideClick` — it leaves by its timer, the close button, a swipe or `dismiss()`.
 - Do not keep the only copy of important information in a toast with a timer — use `persistent` or a Banner.
 
 ### Labels