prime-ui-kit 0.15.0 → 0.16.0

package/dist/skill/reference/components/input/examples/with-icon.tsx

@@ -4,22 +4,30 @@ import { Icon, Input } from "prime-ui-kit";
 export default function InputWithIconExample() {
   return (
     <>
-      <Input.Root label="Поиск по каталогу">
-        <Input.Wrapper>
-          <Input.Icon side="start">
-            <Icon name="action.search" tone="secondary" />
-          </Input.Icon>
-          <Input.Field type="search" placeholder="Название или артикул" />
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="Номер договора">
-        <Input.Wrapper>
-          <Input.Field defaultValue="Д-2026/0147" readOnly />
-          <Input.Icon side="end">
-            <Icon name="status.locked" tone="secondary" />
-          </Input.Icon>
-        </Input.Wrapper>
-      </Input.Root>
+      <div>
+        <div>
+          <Input.Root label="Поиск по каталогу">
+            <Input.Wrapper>
+              <Input.Icon side="start">
+                <Icon name="action.search" tone="secondary" />
+              </Input.Icon>
+              <Input.Field type="search" placeholder="Название или артикул" />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Input.Root label="Номер договора">
+            <Input.Wrapper>
+              <Input.Field defaultValue="Д-2026/0147" readOnly />
+              <Input.Icon side="end">
+                <Icon name="status.locked" tone="secondary" />
+              </Input.Icon>
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
     </>
   );
 }

package/dist/skill/reference/components/kanban/COMPONENT.md

@@ -33,7 +33,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`)   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`]
+      ├─ header                      title (`columnTitleAs`, 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)`)
       └─ <ul> (Dnd.Sortable)         own vertical scroll; Skeleton cards while loading; EmptyPage (Dnd `empty`) when empty
@@ -59,23 +59,24 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | `columns` | `readonly KanbanColumn[]` | — (required) | Every column: `{ id, title, description?, color?, limit?, locked? }`, drawn in `columnOrder`. `color` is a `PaletteColor` for the count badge, `limit` a WIP limit, `locked` keeps a system stage in place. |
 | `items` | `readonly T[]` | — (required) | Every card the board can show; `value` decides where each one stands. |
 | `getId` | `(item: T) => string` | — (required) | Stable unique id of a card, the one used in `value`. |
-| `getLabel` | `(item: T) => string` | `the id` | Spoken by the live region. |
+| `getLabel` | `(item: T) => string` | the `id` | Spoken by the live region. |
 | `value` | `KanbanValue` | — | Card ids per column (controlled): `{ [columnId]: id[] }`. Ids missing from `items` are skipped. |
 | `defaultValue` | `KanbanValue` | `{}` | Initial card ids per column (uncontrolled). |
 | `onValueChange` | `(value: KanbanValue, move: KanbanMove) => void \| Promise<void>` | — | A card moved: the new placement, then `{ id, from, to, index }` to save. Return the save's promise: the card waits busy in its new place; a rejection glides it back. |
 | `reorderableColumns` | `boolean` | `false` | A grip (`Dnd.Handle`) at the end of every column header moves the column by pointer, touch hold and Alt + ← / →; the cards travel with it. |
 | `columnOrder` | `readonly string[]` | — | Column ids in their order (controlled). Columns it does not name follow in `columns` order. |
-| `defaultColumnOrder` | `readonly string[]` | `the order of `columns`` | Initial column ids in their order (uncontrolled). |
+| `defaultColumnOrder` | `readonly string[]` | the order of `columns` | Initial column ids in their order (uncontrolled). |
 | `onColumnOrderChange` | `(order: readonly string[], move: KanbanColumnMove) => void \| Promise<void>` | — | A column moved: the new order, then `{ id, index }` to save. Return the save's promise: the column waits busy in its new place; a rejection glides it back. |
 | `renderItem` | `(item: T) => ReactNode` | — (required) | Renders one card; return a `Kanban.Item`. |
 | `getItemHref` | `(item: T) => string` | — | The card is a link: a real `<a>` named by `getLabel` covers it and is its tab stop — a click, ⌘/Ctrl-click, a middle click, a new tab. A press on it still drags the card; a drag never follows it. |
-| `onItemClick` | `(item: T, event: KanbanItemClickEvent) => void` | — | Opens a card in place (a Drawer): a click, Enter or Space; never from a control inside it or after a drag. With `getItemHref` it gets plain clicks: `event.preventDefault()` routes in the app. |
+| `onItemOpen` | `(item: T, event: KanbanItemOpenEvent) => void` | — | Opens a card in place (a Drawer): a click, Enter or Space; never from a control inside it or after a drag. With `getItemHref` it gets plain clicks: `event.preventDefault()` routes in the app. |
+| `columnTitleAs` | `"h2" \| "h3" \| "h4"` | `"h3"` | Heading level of the column titles in the page outline; the look does not change. |
 | `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). |
+| `renderColumnMeta` | `(column: KanbanColumn) => ReactNode` | — | The meta line under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»). Like `description`, it describes the column's list. |
+| `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). The column turns `danger` before the release. |
 | `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. |
+| `disabled` | `boolean` | `false` | Read-only board: no drag, no keyboard moves, no column grips; `onItemOpen` and `getItemHref` still open cards. |
 | `labels` | `Partial<KanbanLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "defaultValue">` | — | `className` (the board height), `aria-label` and the other div attributes. |
 
@@ -85,7 +86,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `disabled` | `boolean` | `false` | This card cannot be dragged or moved. |
-| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "id">` | — | `children` (the card parts), `className` and the other attributes; `onClick` / `onKeyDown` run before `onItemClick` opens the card — `preventDefault()` keeps it closed. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "id">` | — | `children` (the card parts), `className` and the other attributes; `onClick` / `onKeyDown` run before `onItemOpen` opens the card — `preventDefault()` keeps it closed. |
 
 ### Kanban.ItemHeader
 `ref` → `HTMLDivElement`. Optional top row of a card: the key or project at the start, the last child (a priority `Badge`, an assignee) at the end.
@@ -149,26 +150,26 @@ Do not wrap a `plain` board's columns in your own boxes, and do not put a `well`
 | State | Driven by | DOM |
 |---|---|---|
 | idle | — | cards show `cursor: grab`; under a mouse the card lifts to `--prime-shadow-overlay` (`@media (hover: hover)` only) — no wash: a wash is one ladder step, the column's own color |
-| carried | a drag | Dnd: the clone lifts on `--prime-shadow-modal`, a dashed accent gap opens where the card lands, cards glide aside |
+| carried | a drag | Dnd: the clone lifts on Dnd's carry shadow, a dashed accent gap opens where the card lands, cards glide aside |
 | column carried | a drag by the column grip | the same for the whole column: its clone lifts with its cards, a column-sized gap opens in the strip, the columns glide aside |
 | over a column | pointer over another column | the gap opens there; an empty column's slot fades out |
 | refused | `limit` reached, `canDrop` returns `false` or a reason | `data-dnd-reject` on the `<ul>`: `danger-soft` fill; the reason in a chip under the carried card |
 | locked column | `locked` | `data-locked` on the column; the grip is a lock named «Закреплено» |
 | full | count ≥ `limit` | `data-full` on the column, orange count `count / limit` |
-| empty | no cards | a compact `EmptyPage` in a dashed drop slot at the top (`fill-strong` dashed line, no fill): «Нет карточек» and the hint «Перетащите сюда карточку» (not on a `disabled` board); the whole column stays a drop area |
+| empty | no cards | a compact `EmptyPage` in Dnd's dashed drop slot at the top (`fill-strong` dashed line, no fill): «Нет карточек» and the hint «Перетащите сюда карточку»; a `disabled` board shows the text alone; the whole column stays a drop area |
 | loading | `loading` | `aria-busy` and `data-loading` on the root; `Skeleton` cards; `Crossfade` swaps them for the cards |
 | disabled | `disabled` / `Kanban.Item disabled` | `data-disabled` on the root / card; no `aria-roledescription`, no shortcuts, no column grips |
-| saving | `onValueChange` / `onColumnOrderChange` returned a pending promise | the card (column) stays in its new place with `aria-busy` and `data-pending`; a card's content quiets to 0.6 under a centred `Spinner`, a column's heading quiets and a spinner stands in for its grip; it does not move again until the answer |
-| opens | `onItemClick` / `getItemHref` | `data-clickable` (in place) or `data-link` (a link over the card, its focus ring drawn on the card); a card that opens lifts on hover on a read-only board too |
+| saving | `onValueChange` / `onColumnOrderChange` returned a pending promise | the card (column) stays in its new place with `aria-busy` and `data-pending`; a card's content quiets to 0.6 under a centred `Spinner`, a column's heading quiets and its grip is busy (Dnd); it does not move again until the answer |
+| opens | `onItemOpen` / `getItemHref` | `data-clickable` (in place) or `data-link` (a link over the card, its focus ring drawn on the card); a card that opens lifts on hover on a read-only board too |
 | refused save | the promise rejected | the card glides back to its old column and place (every card it pushed aside glides too), a column glides back in the strip; `labels.moveFailed` / `labels.columnMoveFailed` is announced |
 
-Motion: the hover lift (shadow, the card rises above its neighbours) and the empty slot fade (`fast`, `standard`); a card dropped under the mouse lands straight into its hover lift (`data-dnd-hover`); the swap from skeletons is `Crossfade`; drag motion is Dnd's (lift, gap, glide, landing); a saving card or column quiets (`fast`, both ways) and its spinner enters (`enterMotion`); a refused save glides back (`base`), never jumps. Under `prefers-reduced-motion` all of it is off.
+Motion: the hover lift (shadow, the card rises above its neighbours) and the empty slot fade (`fast`, `standard`); a card dropped under the mouse lands straight into its hover lift (`data-dnd-hover`); the swap from skeletons is `Crossfade`; drag motion is Dnd's (lift, gap, glide, landing); a saving card or column quiets (`fast`, both ways) and its spinner fades in by itself; a refused save glides back (`base`, the list's FLIP glide), never jumps. Under `prefers-reduced-motion` all of it is off.
 
 A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps the move from happening. A controlled owner applies the new `value` (or `columnOrder`) once the request succeeds — in the promise chain, before the returned promise resolves — never before the answer.
 
 ## Layout & spacing
 - 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 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, so the next column peeks. The strip snaps to the start of a column (ScrollContainer `snap="mandatory"`); snapping is off while a drag carries a card.
 - 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.
 - `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.
@@ -181,23 +182,28 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves through the cards, column by column. |
-| `Enter` · `Space` | Opens the focused card (`onItemClick`) or follows its link (`getItemHref`). |
+| `Enter` · `Space` | Opens the focused card (`onItemOpen`) or follows its link (`getItemHref`). |
 | `Alt + ↑` · `Alt + ↓` | Moves the card one place inside its column. |
 | `Alt + ←` · `Alt + →` | On a card: moves it to the neighbouring column at the same row (or its end). On a column grip: moves the column one place. Focus follows. The direction follows the writing direction (`dir="rtl"`: ← goes forward). |
 | `Escape` | Cancels a drag in flight. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Every column is a `<ul>` labelled by its heading (`aria-labelledby`) and described by its description and meta (`aria-describedby`); cards are `<li>` with `aria-roledescription` and `aria-keyshortcuts`. The columns are Dnd lists of one kind: Alt + ← / → across them is Dnd's.
 - The column grip is a button named «Переместить колонку «…»» with `aria-keyshortcuts`; a keyboard column move is announced with its position («Колонка «…»: позиция 2 из 4», `labels.column`). A locked column has a lock named «Закреплено» instead.
 - A live region (`role="status"`) announces grabbed, dropped, «position N of M», a move to another column by its title and a refusal with its reason (`labels`, Dnd's labels).
 - The count is spoken as text («Карточек: 3 из 5»), not only by colour; a full column also reads `count / limit`.
-- With `getItemHref` a real `<a>` named by `getLabel` covers the card and is its tab stop: a click, ⌘/Ctrl-click, a middle click and «open in new tab» work anywhere on the card, Space follows it like Enter, Alt + arrows move the card from it and a press on it drags the card; the release of a drag never follows it. Controls inside the card stand above the link. With `onItemClick` alone the card opens by a click, Enter or Space; a control inside the card never opens it, and a card that opens stays a tab stop on a `disabled` board.
+- With `getItemHref` a real `<a>` named by `getLabel` covers the card and is its tab stop: a click, ⌘/Ctrl-click, a middle click and «open in new tab» work anywhere on the card, Space follows it like Enter, Alt + arrows move the card from it and a press on it drags the card; the release of a drag never follows it. Controls inside the card stand above the link. With `onItemOpen` alone the card opens by a click, Enter or Space; a control inside the card never opens it, and a card that opens stays a tab stop on a `disabled` board.
 - Touch: a drag starts after a hold; a finger that moves first scrolls the board.
+- A board named by `aria-label` or `aria-labelledby` is a `group` with that name; an unnamed one has no role.
 - While loading the root has `aria-busy`; skeletons are hidden from assistive tech.
-- While a move is saved the card or column has `aria-busy` (its spinner is hidden from assistive tech); a refused save is announced (`labels.moveFailed`, `labels.columnMoveFailed`).
+- While a move is saved the card or column has `aria-busy` (its spinner is hidden from assistive tech, a column's busy grip says so itself); a refused save is announced (`labels.moveFailed`, `labels.columnMoveFailed`).
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -224,19 +230,19 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | [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; the page keeps the order — `reorderableColumns`, `columnOrder`, `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`. |
-| [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. |
+| [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`, `onItemOpen`. |
+| [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry; an empty column keeps its drop area and a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The placement lives in the parent: every move arrives with its source, target and position to save, and a button resets the board — `value`, `onValueChange`. |
-| [narrow.tsx](examples/narrow.tsx) | On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page. |
-| [screen.tsx](examples/screen.tsx) | A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemClick`. |
+| [narrow.tsx](examples/narrow.tsx) | On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page — `Kanban.Root`, `columns`. |
+| [screen.tsx](examples/screen.tsx) | A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemOpen`. |
 
 ## Mistakes
 - Returning something other than `Kanban.Item` from `renderItem` → the card does not drag and Alt + arrows do nothing.
 - Using the array index as the card id → ids must survive a move.
 - Keeping the status only on the item and no `value` → the board draws nothing; build `defaultValue` (or `value`) from your data: `{ [status]: ids }`.
 - No height on the root inside a fixed region → the page scrolls instead of the column.
-- 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.
+- A hover-only action on a card → touch has no hover; put the action in the card or open the card on click (`onItemOpen`).
+- `onClick` / `onKeyDown` on `Kanban.Item` to open a card → `onItemOpen` (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`.
@@ -248,5 +254,5 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - Drag as the only way to change a status → keep a status field or a menu in the card details too.
 
 ## Related
-- **Built from:** [Dnd](../dnd/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), [Crossfade](../crossfade/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Spinner](../spinner/COMPONENT.md)
+- **Built from:** [Dnd](../dnd/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), [Crossfade](../crossfade/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Spinner](../spinner/COMPONENT.md), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [DataTable](../data-table/COMPONENT.md), [Card](../card/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [Thumbnail](../thumbnail/COMPONENT.md), [Timeline](../timeline/COMPONENT.md), [Gantt](../gantt/COMPONENT.md)

package/dist/skill/reference/components/kanban/examples/columns.tsx

@@ -17,20 +17,18 @@ import styles from "./examples.module.css";
 
 type Deal = { id: string; client: string; amount: number };
 
-/** The column colors offered in the editor: a swatch per palette hue. */
-const COLUMN_COLORS: { color: PaletteColor; value: string; label: string }[] = [
-  { color: "gray", value: "#71717a", label: "Серый" },
-  { color: "blue", value: "#5068f5", label: "Синий" },
-  { color: "teal", value: "#14b8a6", label: "Бирюзовый" },
-  { color: "green", value: "#22c55e", label: "Зелёный" },
-  { color: "yellow", value: "#eab308", label: "Жёлтый" },
-  { color: "orange", value: "#f97316", label: "Оранжевый" },
-  { color: "red", value: "#ef4444", label: "Красный" },
-  { color: "purple", value: "#a855f7", label: "Фиолетовый" },
+/** The stage hues offered in the editor. */
+const STAGE_HUES: PaletteColor[] = [
+  "gray",
+  "blue",
+  "teal",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "purple",
 ];
 
-const PRESETS = COLUMN_COLORS.map(({ value, label }) => ({ value, label }));
-
 const COLUMNS: KanbanColumn[] = [
   {
     id: "lead",
@@ -142,14 +140,11 @@ export default function KanbanColumnsExample() {
                 </Input.Wrapper>
               </Input.Root>
               <ColorSwatches
+                mode="palette"
                 label="Цвет"
-                presets={PRESETS}
-                value={COLUMN_COLORS.find((entry) => entry.color === column.color)?.value ?? null}
-                onValueChange={(value) =>
-                  updateColumn(column.id, {
-                    color: COLUMN_COLORS.find((entry) => entry.value === value)?.color,
-                  })
-                }
+                palette={STAGE_HUES}
+                value={column.color ?? null}
+                onValueChange={(color) => updateColumn(column.id, { color: color ?? undefined })}
               />
               {column.locked ? null : (
                 <Popover.Actions>

package/dist/skill/reference/components/kanban/examples/item-link.tsx

@@ -1,4 +1,4 @@
-/** 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`. */
+/** 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`, `onItemOpen`. */
 import { Badge, Kanban, type KanbanValue, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -71,7 +71,7 @@ export default function KanbanItemLinkExample() {
         getLabel={(ticket) => `${ticket.id}: ${ticket.title}`}
         defaultValue={PLACEMENT}
         getItemHref={(ticket) => `/support/${ticket.id}`}
-        onItemClick={(ticket, event) => {
+        onItemOpen={(ticket, event) => {
           // A client-side router goes here (navigate(href)); the page itself never reloads.
           event.preventDefault();
           setOpened(ticket);

package/dist/skill/reference/components/kanban/examples/limits.tsx

@@ -51,7 +51,7 @@ export default function KanbanLimitsExample() {
           </Kanban.ItemDescription>
           {ticket.blocked ? (
             <Kanban.ItemBadges>
-              <Badge.Root color="orange">Ждёт клиента</Badge.Root>
+              <Badge.Root tone="warning">Ждёт клиента</Badge.Root>
             </Kanban.ItemBadges>
           ) : null}
         </Kanban.Item>

package/dist/skill/reference/components/kanban/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page. */
+/** On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page — `Kanban.Root`, `columns`. */
 import { Avatar, Kanban } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/dist/skill/reference/components/kanban/examples/screen.module.css

@@ -2,10 +2,9 @@
    panel (`AppShell.Root fillViewport` + `PageContent.Root fill`) and the board or the list takes
    the free height; every column scrolls inside the board, never the page. */
 
-/* Company cell: the name over the deal id. */
+/* Company cell: the name over the deal id (the column's `minWidth` keeps it on its lines). */
 .company {
   display: grid;
-  white-space: nowrap;
 }
 
 /* Owner: avatar, then the name. */
@@ -13,5 +12,4 @@
   display: inline-flex;
   align-items: center;
   gap: var(--prime-space-2);
-  white-space: nowrap;
 }

package/dist/skill/reference/components/kanban/examples/screen.tsx

@@ -1,4 +1,4 @@
-/** A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemClick`. */
+/** A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemOpen`. */
 import {
   AppHeader,
   Avatar,
@@ -237,6 +237,7 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
     header: "Компания",
     accessor: "company",
     sortable: true,
+    minWidth: "14rem",
     cell: (row) => (
       <span className={styles.company}>
         <Typography as="span" variant="body-m">
@@ -252,6 +253,7 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
   {
     id: "owner",
     header: "Ответственный",
+    minWidth: "12rem",
     cell: (row) => (
       <span className={styles.owner}>
         {ownerAvatar(row.owner)}
@@ -440,7 +442,7 @@ export default function KanbanScreenExample() {
                 }}
                 renderColumnMeta={figures}
                 loading={loading}
-                onItemClick={(item) => openDeal(item.id)}
+                onItemOpen={(item) => openDeal(item.id)}
                 renderItem={(item) => (
                   <Kanban.Item>
                     <Kanban.ItemTitle>{item.company}</Kanban.ItemTitle>
@@ -518,9 +520,9 @@ export default function KanbanScreenExample() {
                     <DescriptionList.Item label="Источник">{deal.source}</DescriptionList.Item>
                     <DescriptionList.Item label="Договор">
                       {deal.contract ? (
-                        <Badge.Root color="green">Подписан</Badge.Root>
+                        <Badge.Root tone="success">Подписан</Badge.Root>
                       ) : (
-                        <Badge.Root color="gray">Не подписан</Badge.Root>
+                        <Badge.Root tone="neutral">Не подписан</Badge.Root>
                       )}
                     </DescriptionList.Item>
                   </DescriptionList.Root>

package/dist/skill/reference/components/kanban/examples/states.tsx

@@ -1,8 +1,5 @@
-/** Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. */
-import { Badge, Button, Icon, Kanban, Switch } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
+/** Loading draws skeleton cards in the card geometry; an empty column keeps its drop area and a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. */
+import { Badge, Kanban, Typography } from "prime-ui-kit";
 
 type Order = { id: string; title: string; total: string; closed?: boolean };
 
@@ -26,61 +23,43 @@ const PLACEMENT = {
   shipped: ["ORD-5524", "ORD-5518"],
 };
 
-const LOAD_MS = 1200;
+const STATES = [
+  { caption: "loading", loading: true, disabled: false },
+  { caption: "Kanban.Item disabled", loading: false, disabled: false },
+  { caption: "disabled", loading: false, disabled: true },
+];
 
 export default function KanbanStatesExample() {
-  const [loading, setLoading] = React.useState(true);
-  const [readOnly, setReadOnly] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!loading) return;
-    const timer = window.setTimeout(() => setLoading(false), LOAD_MS);
-    return () => window.clearTimeout(timer);
-  }, [loading]);
-
-  return (
-    <div className={styles.stage}>
-      <div className={styles.toolbar}>
-        <Switch.Root checked={readOnly} onCheckedChange={setReadOnly}>
-          <Switch.Label>Только просмотр</Switch.Label>
-        </Switch.Root>
-        <div className={styles.spacer} />
-        <Button.Root
-          variant="soft"
-          tone="neutral"
-          loading={loading}
-          onClick={() => setLoading(true)}
-        >
-          <Button.Icon>
-            <Icon name="action.refresh" />
-          </Button.Icon>
-          Обновить
-        </Button.Root>
+  return STATES.map((state) => (
+    <div key={state.caption}>
+      <div>
+        <Kanban.Root
+          aria-label={`Заказы склада: ${state.caption}`}
+          columns={COLUMNS}
+          items={ORDERS}
+          getId={(order) => order.id}
+          getLabel={(order) => order.id}
+          defaultValue={PLACEMENT}
+          loading={state.loading}
+          disabled={state.disabled}
+          renderItem={(order) => (
+            <Kanban.Item disabled={order.closed}>
+              <Kanban.ItemTitle>{order.id}</Kanban.ItemTitle>
+              <Kanban.ItemDescription>
+                {order.title} · {order.total}
+              </Kanban.ItemDescription>
+              {order.closed ? (
+                <Kanban.ItemBadges>
+                  <Badge.Root color="gray">Закрыт</Badge.Root>
+                </Kanban.ItemBadges>
+              ) : null}
+            </Kanban.Item>
+          )}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          {state.caption}
+        </Typography>
       </div>
-      <Kanban.Root
-        aria-label="Заказы склада"
-        className={styles.board}
-        columns={COLUMNS}
-        items={ORDERS}
-        getId={(order) => order.id}
-        getLabel={(order) => order.id}
-        defaultValue={PLACEMENT}
-        loading={loading}
-        disabled={readOnly}
-        renderItem={(order) => (
-          <Kanban.Item disabled={order.closed}>
-            <Kanban.ItemTitle>{order.id}</Kanban.ItemTitle>
-            <Kanban.ItemDescription>
-              {order.title} · {order.total}
-            </Kanban.ItemDescription>
-            {order.closed ? (
-              <Kanban.ItemBadges>
-                <Badge.Root color="gray">Закрыт</Badge.Root>
-              </Kanban.ItemBadges>
-            ) : null}
-          </Kanban.Item>
-        )}
-      />
     </div>
-  );
+  ));
 }

package/dist/skill/reference/components/kanban/examples/variants.tsx

@@ -1,8 +1,6 @@
 /** 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; label: string };
 
 const VARIANTS: KanbanVariant[] = ["plain", "line", "well"];
@@ -37,7 +35,6 @@ export default function KanbanVariantsExample() {
       <div>
         <Kanban.Root
           aria-label={`Задачи релиза: ${variant}`}
-          className={styles.board}
           variant={variant}
           columns={COLUMNS}
           items={TASKS}

package/dist/skill/reference/components/kbd/COMPONENT.md

@@ -60,17 +60,21 @@ Minimum width equals the height, so single-character keys are square.
 | size | `size`, else the surrounding control, else `m` | `data-size` (nominal), `data-tier` (visual tier, drives every dimension) |
 
 ## Layout & spacing
-- Inline-flex, centered content, never shrinks, `vertical-align: middle`.
-- Keys of one chord: `gap: var(--prime-space-1)`; an optional «+» between them is `aria-hidden`.
-- In a hotkey list: action left, keys right (`justify-content: space-between`), rows `gap: var(--prime-space-3)`.
+- Inline-flex, centered content, never shrinks, `vertical-align: middle`. The key owns its line box; a kit `Icon` (or a raw svg) inside takes the tier icon size.
+- Keys of one chord sit 4px apart; an optional «+» between them is `aria-hidden`.
+- In a hotkey list: a `DescriptionList` — the action is the label, its keys the value.
 - In a field, put the key in `Input.InlineAffix side="end"`.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Renders a native `<kbd>`; its text is read as is.
 - Symbol keys (⌘ ⌥ ⇧ ↵) need `aria-label` and `title` («Command», «Shift»).
 - A visual «+» between keys gets `aria-hidden="true"`.
@@ -85,8 +89,8 @@ No `labels`.
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A shortcut as one key per `Kbd`; symbol keys get a name — `aria-label`, `title`. |
 | [sizes.tsx](examples/sizes.tsx) | Every badge tier, 16 to 32 px high — `size`. |
-| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. |
-| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: action on the left, its keys on the right, an icon inside a key. |
+| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit size overrides it — `size`. |
+| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: the action, then its keys, one of them with an icon inside — `aria-label`, `title`. |
 
 ## Mistakes
 - `<Kbd>⌘ + Shift + P</Kbd>` → one `Kbd` per key with an `aria-hidden` «+» between.
@@ -95,5 +99,5 @@ No `labels`.
 - A `<span>` styled as a key, or a `Badge` used for a key → use `Kbd`.
 
 ## Related
-- **Built from:** —
+- **Built from:** `internal/chipTier` (the Badge tiers)
 - **See also:** [Badge](../badge/COMPONENT.md) (same tiers), [CommandMenu](../command-menu/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md)

package/dist/skill/reference/components/kbd/examples/examples.module.css

@@ -14,24 +14,5 @@
   align-items: center;
   justify-content: center;
   gap: var(--prime-space-3);
-  width: min(100%, var(--prime-modal-width-s));
-}
-
-/* shortcut-list.tsx: action left, keys right. */
-.list {
-  display: grid;
-  gap: var(--prime-space-3);
-  width: min(100%, var(--prime-modal-width-s));
-  margin: 0;
-}
-
-.listRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-4);
-}
-
-.listRow dd {
-  margin: 0;
+  width: min(100%, var(--prime-layout-form-width-s));
 }

package/dist/skill/reference/components/kbd/examples/in-controls.tsx

@@ -1,4 +1,4 @@
-/** Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. */
+/** Inside a button or a field the key takes the tier one step down; an explicit size overrides it — `size`. */
 import { Button, Input, Kbd } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -16,7 +16,7 @@ export default function KbdInControlsExample() {
         </span>
       </Button.Root>
       <Button.Root tone="neutral">
-        Отправить
+        Применить
         <Kbd size="xs" aria-label="Enter" title="Enter">
           ↵
         </Kbd>

package/dist/skill/reference/components/kbd/examples/shortcut-list.tsx

@@ -1,5 +1,5 @@
-/** A hotkey reference: action on the left, its keys on the right, an icon inside a key. */
-import { Icon, Kbd, Typography } from "prime-ui-kit";
+/** A hotkey reference: the action, then its keys, one of them with an icon inside — `aria-label`, `title`. */
+import { DescriptionList, Icon, Kbd } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -14,36 +14,24 @@ const SHORTCUTS = [
 
 export default function KbdShortcutListExample() {
   return (
-    <dl className={styles.list}>
+    <DescriptionList.Root>
       {SHORTCUTS.map((item) => (
-        <div key={item.action} className={styles.listRow}>
-          <dt>
-            <Typography as="span" variant="body-m">
-              {item.action}
-            </Typography>
-          </dt>
-          <dd className={styles.chord}>
+        <DescriptionList.Item key={item.action} label={item.action}>
+          <span className={styles.chord}>
             {item.keys.map((key) => (
               <Kbd key={key} aria-label={KEY_NAMES[key]} title={KEY_NAMES[key]}>
                 {key}
               </Kbd>
             ))}
-          </dd>
-        </div>
+          </span>
+        </DescriptionList.Item>
       ))}
-      <div className={styles.listRow}>
-        <dt>
-          <Typography as="span" variant="body-m">
-            Закрыть окно
-          </Typography>
-        </dt>
-        <dd className={styles.chord}>
-          <Kbd>
-            <Icon name="action.close" />
-            Esc
-          </Kbd>
-        </dd>
-      </div>
-    </dl>
+      <DescriptionList.Item label="Закрыть окно">
+        <Kbd>
+          <Icon name="action.close" />
+          Esc
+        </Kbd>
+      </DescriptionList.Item>
+    </DescriptionList.Root>
   );
 }