prime-ui-kit 0.10.0 → 0.11.1

package/src/components/tabs/COMPONENT.md

@@ -3,10 +3,11 @@
 **Category:** navigation
 **Kind:** navigation
 
-> Folder tabs for navigating between content panels of one screen: the active tab rises out of the panel.
+> A tab bar of folder tabs for navigating between content panels of one screen: the active tab is the host's surface rising into the strip, the panel is the host's content with no frame or padding of its own.
 
 ## When to use
 - Splitting one screen into sections that are viewed one at a time (Overview / Orders / Reviews).
+- Sections of a record opened in a Drawer or Modal: the tab bar runs along the bottom of the header.
 - Settings pages with a side list of sections (`orientation="vertical"`).
 - Dashboard sections that need a counter or a one-line summary per tab (`Tabs.Count`, `Tabs.Description`).
 - Section bars that must survive narrow containers: with an icon on every tab they collapse to icons with tooltips.
@@ -26,7 +27,7 @@ import { Tabs } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Tabs.Root                 value, size, orientation, tone, fullWidth, min/maxItemWidth; the frame (a layer)
+Tabs.Root                 value, size, orientation, tone, fullWidth, min/maxItemWidth; no surface
 ├─ Tabs.List              role="tablist" on a ScrollContainer, sliding folder; collapses, then scrolls
 │  ├─ Tabs.Item           one tab (role="tab") in an item wrapper; onRemove adds a close button; parts:
 │  │  ├─ Tabs.Icon        decorative icon; hidden first, kept last
@@ -34,7 +35,7 @@ Tabs.Root                 value, size, orientation, tone, fullWidth, min/maxItem
 │  │  ├─ Tabs.Count       counter Badge, one tier below the tabs size
 │  │  └─ Tabs.Description muted second line; makes the tab two-line
 │  └─ Tabs.Separator      Divider hairline between groups of tabs
-└─ Tabs.Panel             role="tabpanel", rendered only while its tab is active
+└─ Tabs.Panel             role="tabpanel", rendered only while its tab is active; no fill, no padding
 ```
 
 ## API
@@ -42,25 +43,25 @@ Tabs.Root                 value, size, orientation, tone, fullWidth, min/maxItem
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Tabs.Root
-`ref` → `HTMLDivElement`. `<div>` that owns the active value, size and orientation and lays out the list and the panel. It is the frame and a layer of the surface ladder in both orientations: a strip two steps off the layer and the panel in the layer's own color — above the panel when horizontal, at its inline start when vertical.
+`ref` → `HTMLDivElement`. `<div>` that owns the active value, size and orientation; no surface of its own — it stands in the host's padding. In a Modal or Drawer it wraps `X.Header` (with `Tabs.List` last) and `X.Body`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `value` | `string` | — | Active tab (controlled). |
 | `defaultValue` | `string` | `""` | Initial active tab (uncontrolled). With `""` no tab is selected. |
 | `onValueChange` | `(value: string) => void` | — | Called with the new active value. |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | List direction and arrow keys. Vertical: a column of sections at the panel's inline start, the active one the panel reaching into the column; when the container is narrower than 600px the column becomes the horizontal strip above the panel. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Control tier: text, icon, spacing, folder radius and panel padding. A horizontal tab is the control height plus the folder rise on both sides; a vertical one is the control height. |
-| `fullWidth` | `boolean` | `true` | Horizontal tabs fill the list and tend to equal widths within `minItemWidth` … `maxItemWidth`, never narrower than their content: a long label keeps its width, short ones share the rest; when they do not fit, the list collapses, then scrolls. `false` sizes each tab to its content within the same bounds. |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | List direction and arrow keys. Vertical: a column of sections beside the panel, which becomes a horizontal strip in a container below 600px. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Control tier: text, icon, spacing, folder radius and the gap between the strip and the panel; a tab is at least the control height. |
+| `fullWidth` | `boolean` | `true` | Horizontal tabs fill the list and tend to equal widths within `minItemWidth` … `maxItemWidth`; `false` sizes each tab to its content within the same bounds. |
 | `tone` | `"neutral" \| "accent"` | `"neutral"` | Colour of the active tab: `neutral` is primary text with an accent icon, `accent` puts text and icon in accent. |
-| `minItemWidth` | `number \| string` | `2.5 × control height` | Narrowest a horizontal tab with a label gets, px or a CSS length; a tab is also never narrower than its content (up to `maxItemWidth`). When tabs do not fit, the list collapses, then scrolls. Icon-only tabs are square. |
+| `minItemWidth` | `number \| string` | `2.5 × control height` | Narrowest a horizontal tab with a label gets, px or a CSS length; a tab is also never narrower than its content (up to `maxItemWidth`). |
 | `maxItemWidth` | `number \| string` | `7 × control height` | Widest a horizontal tab gets, px or a CSS length (`"none"` lifts the cap); a longer label ends with an ellipsis. |
 | `labels` | `Partial<TabsLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — | `Tabs.List` and `Tabs.Panel`s. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">` | — | `className` and the other div attributes. |
 
 ### Tabs.List
-`ref` → `HTMLDivElement`. `role="tablist"` on a `ScrollContainer` (horizontal, edge fade, hidden scrollbar) with the sliding folder (in both orientations), which glides only into a choice by click or keys and is placed without motion on mount, resize and collapse. When tabs do not fit or a label would be cut, it hides icons and descriptions, then labels (icons with tooltips stay; only when every tab has an icon); then the list scrolls; a label is never cut to make room. The active tab is kept in view and clear of the edge fades (the first and the last tab scroll all the way to the end); only the list scrolls, never the page.
+`ref` → `HTMLDivElement`. `role="tablist"` on a `ScrollContainer` with the sliding folder. When tabs do not fit it hides icons and descriptions, then labels (only when every tab has an icon), then scrolls; the active tab stays in view.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -74,7 +75,7 @@ Tabs.Root                 value, size, orientation, tone, fullWidth, min/maxItem
 |---|---|---|---|
 | `value` | `string` | — (required) | Value that selects this tab and its panel. |
 | `disabled` | `boolean` | `false` | Disables the tab; clicks and arrow keys skip it. |
-| `onRemove` | `() => void` | — | Makes the tab closable: a close button (shown on the active tab, on hover and focus, always on touch screens), `Delete` / `Backspace` and a middle click. Closing the active tab first selects its neighbour; remove the item from your list here. |
+| `onRemove` | `() => void \| Promise<void>` | — | Makes the tab closable (close button, `Delete` / `Backspace`, middle click); remove the item from your list here. Return a promise to confirm first: rejected, the tab stays. |
 | `children` | `ReactNode` | — (required) | Plain text, or `Tabs.Icon` / `Tabs.Label` / `Tabs.Count` / `Tabs.Description`. A description makes the tab two-line. |
 | `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" \| "type" \| "role" \| "onClick">` | — | `className`, `aria-*` and the other button attributes; your `onKeyDown` / `onAuxClick` run first and `preventDefault()` keeps the tab open. |
 
@@ -119,7 +120,7 @@ Tabs.Root                 value, size, orientation, tone, fullWidth, min/maxItem
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other div attributes. |
 
 ### Tabs.Panel
-`ref` → `HTMLDivElement`. `<div role="tabpanel">`, focusable, rendered only while its tab is active; horizontal, the padded surface the folder rises from. Its content enters each time it opens.
+`ref` → `HTMLDivElement`. `<div role="tabpanel">`, focusable, rendered only while its tab is active. No fill and no padding: its content is the host's content, aligned with the strip's edges. Its content enters each time it opens.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -128,7 +129,7 @@ Tabs.Root                 value, size, orientation, tone, fullWidth, min/maxItem
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
 ## Variants
-Tabs have no `variant`: navigation tabs are always a folder — rising from the panel's top edge (horizontal) or reaching out of its side (vertical).
+Tabs have no `variant`: navigation tabs are always a folder — the host's surface rising into the strip from below (horizontal) or reaching into the column from its side (vertical).
 
 ### tone
 | Value | Looks like | Use when | Default |
@@ -139,19 +140,19 @@ Tabs have no `variant`: navigation tabs are always a folder — rising from the
 ### orientation
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `horizontal` | a layer of the surface ladder: a `fill-muted-hover` strip (two steps off the layer) over a padded panel in the layer's own color, tabs edge to edge; the active tab is the panel rising into the strip with concave flares, gliding between tabs; primary text, medium weight, accent icon; hover is the same shape in `fill-faint` | switching sections above the content | yes |
-| `vertical` | the same folder on its side: a column of sections in the `fill-muted-hover` strip at the panel's inline start; the active section is the panel reaching into the column, rounded on the outer side, with concave flares above and below where it meets the panel; hover is the same shape in `fill-faint`. Below a 600px container the column becomes the horizontal strip above the panel (it scrolls, never wraps) | settings pages with a side list of sections | |
+| `horizontal` | a rounded `fill-muted-hover` strip (two steps off the host surface) above the panel, tabs edge to edge; the active tab is the host's surface (`layer-current`) rising into the strip with concave flares, gliding between tabs; primary text, medium weight, accent icon; hover is the same shape in `fill-faint` | switching sections above the content | yes |
+| `vertical` | the same folder on its side: a column of sections in the strip at the panel's inline start; the active section is the host's surface reaching into the column, rounded on the outer side, with concave flares above and below; hover is the same shape in `fill-faint`. Below a 600px container the column becomes the horizontal strip above the panel (it scrolls, never wraps) | settings pages with a side list of sections | |
 
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `xs` | 12/16 text, folder radius 8, rise 4, panel padding 16 | dense panels | |
-| `s` | 13/20, radius 8, rise 4, padding 20 | compact cards | |
-| `m` | 14/20, radius 12, rise 8, padding 24 | default | yes |
-| `l` | 16/24, radius 16, rise 12, padding 24 | page-level sections | |
-| `xl` | 16/24, radius 16, rise 12, padding 32 | hero / landing sections | |
+| `xs` | 12/16 text, folder radius 8, rise 4, panel gap 12 | dense panels | |
+| `s` | 13/20, radius 8, rise 4, gap 16 | compact cards | |
+| `m` | 14/20, radius 12, rise 4, gap 20 | default | yes |
+| `l` | 16/24, radius 16, rise 8, gap 24 | page-level sections | |
+| `xl` | 16/24, radius 16, rise 8, gap 32 | hero / landing sections | |
 
-A horizontal tab is the control height of the tier plus the rise above and below its content; a vertical tab is the control height, so a vertical list lines up with Button, Input and SegmentedControl of the same `size`.
+A tab is at least the control height of the tier, so a one-line list lines up with Button, Input and SegmentedControl of the same `size`; content sets the rest — a two-line tab grows by its lines and padding, and the tabs of a row share the tallest height. The strip adds the rise above the tabs.
 
 ### Flags
 | Value | Looks like | Use when | Default |
@@ -172,7 +173,7 @@ A horizontal tab is the control height of the tier plus the rise above and below
 | `Tabs.Icon` + `Tabs.Label` | muted icon before the label; the active tab's leading icon turns accent | sections with recognizable icons | |
 | `Tabs.Count` | soft badge after the label, tabular numbers | showing how many items a section has | |
 | `Tabs.Description` (two-line) | label (+ count) on line 1, `body-s` muted text on line 2; `<strong>` is primary / medium | dashboards with a summary per section | |
-| `onRemove` on Item | a ghost close button (`action.close`, two tiers below) at the end of the tab: on the active tab, on hover and focus, always on touch screens | open documents the user closes, like browser tabs | |
+| `onRemove` on Item | a ghost close button (`action.close`, two tiers below) at the end of the tab: on the active tab, on hover and focus, always on touch screens; the tab also closes by `Delete` / `Backspace` and a middle click, and closing the active tab selects its neighbour | open documents the user closes, like browser tabs | |
 
 Avoid icons or descriptions on only some tabs (uneven rows; without an icon on every tab the list cannot collapse to icons) and Tabs used as a filter — use SegmentedControl.
 
@@ -185,6 +186,7 @@ Avoid icons or descriptions on only some tabs (uneven rows; without an icon on e
 | focus-visible | keyboard | focus ring inside the tab, above the folder; the panel shows an inset ring |
 | disabled | `disabled` on Item | native `disabled`, `data-disabled="true"`, `text-disabled`; a removable tab loses its close button |
 | removable | `onRemove` on Item | item wrapper `data-removable="true"`, close button, tab `aria-keyshortcuts="Delete"` |
+| closing, confirm pending | `onRemove` returned a promise that has not settled | the close button is `loading` (`aria-busy`); the tab, its selection and focus stay; resolved → the neighbour takes over, rejected → nothing changes |
 | two-line | `Tabs.Description` child | `data-two-line="true"` |
 | collapsed | tabs wider than the list, or a label that would be cut (horizontal) | list `data-collapse="full" \| "compact" \| "icon"`: `compact` hides icons and descriptions; `icon` hides labels (sr-only, shown in a `Tooltip`), counts and close buttons, only when every tab has an icon |
 | overflow | tabs at their narrowest (content width, `minItemWidth` or icon squares) still wider than the list | `data-overflow-start` / `data-overflow-end` on the list (ScrollContainer), faded edges as deep as the hidden part at most (they grow and melt with the scroll, never switch); the active tab is kept in view and clear of the fades on mount and on every value change, the first and the last tab scroll all the way to the end — only the list scrolls, never the page |
@@ -194,8 +196,24 @@ The indicator glides (`emphasized` + `base`, `data-animate="true"`) only into a
 Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-width`, inline `--tabs-item-min` / `--tabs-item-max` when set; List `data-indicator="folder"`, its indicator `data-axis="x" | "y"` (follows the list's direction, so a vertical list in a narrow container gets the top folder); Item `data-value` on the tab, `data-state` / `data-disabled` on its wrapper too; Label `data-text`. Inactive panels are unmounted; a panel's content enters each time it opens.
 
 ## Layout & spacing
-- The root is the frame and a layer of the ladder in both orientations (`data-depth`, `radius-xl`, the strip two steps off the layer); the list sits flush on the panel; the panel pads its content by tier (`--prime-space-4` … `--prime-space-8`). Do not wrap Tabs in a Card — it already is one.
-- Vertical: the column is as wide as its widest section (at least four control heights, at most 40% of the root), inset by the folder rise from the frame on the outer side, flush with the panel on the other.
+- Tabs are a bar, not a surface: the root has no fill, padding, radius or `data-depth`. On a page or in a `Card.Body`, put it straight into the host's padded region and the panel content straight into `Tabs.Panel`. The strip's edges and the panel content share the host's content edge; the panel stands one tier gap below the strip (`--prime-space-3` … `--prime-space-8`).
+- In a Modal or Drawer the tabs belong to the header: `Tabs.Root` wraps `X.Header` and `X.Body`, `Tabs.List` goes last into the header, the panels into the body. The header becomes the strip (painted like it, no hairline, edge to edge — the header hands the bar its side padding as `--prime-bleed-inline`), the active tab is the body rising into it, and the root renders no box (`display: contents`), so only the body scrolls and the tabs stay in view.
+
+```tsx
+<Drawer.Content>
+  <Tabs.Root defaultValue="summary">
+    <Drawer.Header>
+      <Drawer.Title>Заказ № 1042</Drawer.Title>
+      <Tabs.List aria-label="Заказ № 1042">…</Tabs.List>
+    </Drawer.Header>
+    <Drawer.Body>
+      <Tabs.Panel value="summary">…</Tabs.Panel>
+    </Drawer.Body>
+  </Tabs.Root>
+</Drawer.Content>
+```
+- The folder paints the host's `layer-current`, so the active tab is always the colour of the surface it stands on; controls in a panel read the host's field and fill tokens.
+- Vertical: the column is as wide as its widest section (at least four control heights, at most 40% of the root) and as tall as its sections; the panel sits beside it, one gap away.
 - The list never wraps: it collapses, then scrolls horizontally with faded edges (hidden scrollbar, `overscroll-behavior: contain`). Give the list's container a width (`min-width: 0` on flex children).
 - A horizontal tab is never narrower than its content (`min-width: max-content`; the tab bounds that content between `minItemWidth` and `maxItemWidth`), so a label is never cut to make room. Full width, tabs tend to equal widths, not widths in proportion to their labels (`flex: 1 1 0`): a long label keeps its width, the short ones share the rest.
 - A vertical Tabs.Root is a size container: give it a width (it measures itself to switch to a row).
@@ -229,7 +247,7 @@ Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | Sections of one screen; the active tab rises into the panel and glides to the next one — `defaultValue`. |
+| [overview.tsx](examples/overview.tsx) | Sections of one screen; the active tab rises into the strip and glides to the next one — `defaultValue`. |
 | [variants.tsx](examples/variants.tsx) | The active tab in primary text with an accent icon, or all in accent — `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier: text, icon, folder radius and spacing grow together — `size`. |
 | [states.tsx](examples/states.tsx) | A disabled tab that clicks and arrow keys skip — `disabled`. |
@@ -238,19 +256,21 @@ Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-
 | [overflow.tsx](examples/overflow.tsx) | Drag the frame narrower: icons go first, then labels, and icons with tooltips stay; then the list scrolls — `Tabs.Icon`. |
 | [closable.tsx](examples/closable.tsx) | Open order cards as browser tabs: each closes by its button, Delete or a middle click; tabs stay between two widths, and the list scrolls when they do not fit — `onRemove`, `minItemWidth`, `maxItemWidth`. |
 | [two-line.tsx](examples/two-line.tsx) | A label and a counter on the first line, a summary on the second — `Tabs.Count`, `Tabs.Description`. |
+| [in-drawer.tsx](examples/in-drawer.tsx) | Order details in a Drawer: the tab bar runs along the bottom of the header, the active tab is the body rising into it, and every panel is the body's own content — `Tabs.Root`, `Tabs.List`, `Tabs.Panel`. |
 | [controlled.tsx](examples/controlled.tsx) | The active tab lives in parent state, e.g. synced with the URL — `value`, `onValueChange`. |
 
 ## Mistakes
 - `<Tabs.Root>` without `defaultValue` / `value` → no tab is active; pass the first tab's value.
 - `variant="pills"` / `variant="underline"` → Tabs have no variant; use `orientation`, or SegmentedControl for a pill switch.
 - An icon on only some tabs → the list cannot collapse to icons and scrolls instead; give every tab an icon or none.
-- Tabs inside a `Card.Root` → a frame in a frame; the horizontal root is the surface.
+- Tabs or a panel wrapped in an extra padded box (`Card.Root` around the root, a padded `div` or Card inside `Tabs.Panel`) → a container in a container with doubled padding; Tabs stand in the host's padding and the panel content goes straight in.
 - Using Tabs to filter a list → use SegmentedControl.
 - `onClick` on `Tabs.Item` → use `onValueChange` on Root.
 - A hand-made × inside `Tabs.Item` → a button inside a tab button; pass `onRemove` instead.
 - `onRemove` that does not drop the tab from your list → the tab stays; the kit only moves the selection.
 - `Tabs.List` without `aria-label` → add one.
+- Tabs inside `Drawer.Body` / `Modal.Body` under the header → a floating strip under the header's hairline; wrap the header and the body in `Tabs.Root` and put `Tabs.List` into the header.
 
 ## Related
-- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Button](../button/COMPONENT.md), [Divider](../divider/COMPONENT.md), [Tooltip](../tooltip/COMPONENT.md)
+- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Button](../button/COMPONENT.md), [Divider](../divider/COMPONENT.md), [Tooltip](../tooltip/COMPONENT.md), Icon (`action.close`)
 - **See also:** [SegmentedControl](../segmented-control/COMPONENT.md), [ButtonGroup](../button-group/COMPONENT.md), [Accordion](../accordion/COMPONENT.md)

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

@@ -22,6 +22,12 @@
   max-width: calc(10 * var(--prime-control-m-height));
 }
 
+/* in-drawer.tsx: blocks of a panel in the drawer body, the full body width. */
+.stack {
+  display: grid;
+  gap: var(--prime-space-5);
+}
+
 /* The same column, which the reader can drag narrower to watch the tabs collapse and scroll. */
 .resizable {
   composes: frame;

package/src/components/tabs/examples/in-drawer.tsx

@@ -0,0 +1,100 @@
+/** Order details in a Drawer: the tab bar runs along the bottom of the header, the active tab is the body rising into it, and every panel is the body's own content — `Tabs.Root`, `Tabs.List`, `Tabs.Panel`. */
+import { Badge, Button, DescriptionList, Drawer, Input, Tabs, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const ITEMS = [
+  { name: "Кресло «Орион», графит", amount: "2 × 18 900 ₽" },
+  { name: "Стол «Лофт 140»", amount: "1 × 24 500 ₽" },
+  { name: "Сборка и подъём на этаж", amount: "1 × 3 200 ₽" },
+];
+
+const HISTORY = [
+  "3 октября, 10:14 — заказ оформлен",
+  "3 октября, 10:20 — оплата прошла",
+  "4 октября, 16:02 — передан на склад",
+];
+
+export default function TabsInDrawerExample() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Заказ № 1042
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Tabs.Root defaultValue="summary">
+          <Drawer.Header>
+            <Drawer.Title>Заказ № 1042</Drawer.Title>
+            <Drawer.Description>Оформлен 3 октября · 65 500 ₽</Drawer.Description>
+            <Tabs.List aria-label="Заказ № 1042">
+              <Tabs.Item value="summary">Сводка</Tabs.Item>
+              <Tabs.Item value="items">
+                <Tabs.Label>Товары</Tabs.Label>
+                <Tabs.Count>{ITEMS.length}</Tabs.Count>
+              </Tabs.Item>
+              <Tabs.Item value="delivery">Доставка</Tabs.Item>
+              <Tabs.Item value="history">История</Tabs.Item>
+            </Tabs.List>
+          </Drawer.Header>
+          <Drawer.Body>
+            <Tabs.Panel value="summary">
+              <DescriptionList.Root>
+                <DescriptionList.Item label="Клиент">Анна Смирнова</DescriptionList.Item>
+                <DescriptionList.Item label="Статус">
+                  <Badge.Root color="orange">Собирается на складе</Badge.Root>
+                </DescriptionList.Item>
+                <DescriptionList.Item label="Оплата">Картой, 3 октября</DescriptionList.Item>
+                <DescriptionList.Item label="Менеджер">Илья Соколов</DescriptionList.Item>
+              </DescriptionList.Root>
+            </Tabs.Panel>
+
+            <Tabs.Panel value="items">
+              <DescriptionList.Root>
+                {ITEMS.map((item) => (
+                  <DescriptionList.Item key={item.name} label={item.name}>
+                    {item.amount}
+                  </DescriptionList.Item>
+                ))}
+              </DescriptionList.Root>
+            </Tabs.Panel>
+
+            <Tabs.Panel value="delivery">
+              <div className={styles.stack}>
+                <Input.Root label="Адрес">
+                  <Input.Wrapper>
+                    <Input.Field defaultValue="Москва, Ленинградский проспект, 37, кв. 12" />
+                  </Input.Wrapper>
+                </Input.Root>
+                <Input.Root label="Комментарий курьеру" hint="Виден курьеру в приложении">
+                  <Input.Wrapper>
+                    <Input.Field defaultValue="Позвонить за час" />
+                  </Input.Wrapper>
+                </Input.Root>
+              </div>
+            </Tabs.Panel>
+
+            <Tabs.Panel value="history">
+              <div className={styles.stack}>
+                {HISTORY.map((entry) => (
+                  <Typography key={entry} variant="body-m" tone="secondary">
+                    {entry}
+                  </Typography>
+                ))}
+              </div>
+            </Tabs.Panel>
+          </Drawer.Body>
+        </Tabs.Root>
+        <Drawer.Footer>
+          <Drawer.Close>
+            <Button.Root variant="outline" tone="neutral">
+              Закрыть
+            </Button.Root>
+          </Drawer.Close>
+          <Button.Root>Изменить заказ</Button.Root>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}

package/src/components/tabs/examples/overview.tsx

@@ -1,4 +1,4 @@
-/** Sections of one screen; the active tab rises into the panel and glides to the next one — `defaultValue`. */
+/** Sections of one screen; the active tab rises into the strip and glides to the next one — `defaultValue`. */
 import { Tabs, Typography } from "prime-ui-kit";
 
 const SECTIONS = [

package/src/components/tag-select/COMPONENT.md

@@ -8,7 +8,7 @@
 ## When to use
 - Several values from a dictionary shown as removable chips: labels, cities, channels, watchers.
 - Users may add a value that is not in the list (`creatable`).
-- Users maintain the dictionary themselves: rename, recolor or delete options from the list (`onOptionUpdate`, `onOptionDelete`).
+- Users maintain the dictionary themselves: rename, recolor or delete options from the list (`onOptionUpdate`, `onOptionDelete`; a Promise from `onOptionDelete` holds the deletion for a confirmation or a request).
 
 ## When not to use
 - One value → use [Select](../select/COMPONENT.md).
@@ -27,11 +27,12 @@ TagSelect                       field frame: label · control · hint/error (sin
 ├── control                     field fill, one row at rest, wraps when focused
 │   ├── chip row                ScrollContainer: Badge chips (one tier down) · «+N» Badge · input
 │   │   └── <input role="combobox">
+│   ├── input[type=hidden] × value   with `name`
 │   └── chevron
 └── list (portal)               role="listbox", multi-select
-    ├── panel hint              labels.panelHint
-    ├── «Создать» row           with `creatable`
-    └── option row              Checkbox.Indicator · Badge [· «⋯» Button → Popover menu]
+    ├── panel hint              labels.panelHint (`""` hides it)
+    ├── «Создать» row           with `creatable`: plus icon · labels.create · preview Badge
+    └── option row              Checkbox.Indicator · Badge [· «⋯» Button → Popover menu]; picked options first
 ```
 
 ## API
@@ -49,12 +50,12 @@ TagSelect                       field frame: label · control · hint/error (sin
 | `onValueChange` | `(value: string[]) => void` | — | Called with the new list after a pick, a removal or a creation. |
 | `open` | `boolean` | — | Controlled open state of the list. |
 | `defaultOpen` | `boolean` | `false` | Initial open state, uncontrolled. |
-| `onOpenChange` | `(open: boolean) => void` | — | Called on every open and close: field click, Escape, an outside press. |
+| `onOpenChange` | `(open: boolean) => void` | — | Called on every open and close: focus, a field click, typing, arrows, Escape, an outside press; typing closes it when nothing matches. |
 | `creatable` | `boolean` | `false` | A typed text that is not an option can be added (the Create row or Enter). |
-| `onCreate` | `(value: string) => void` | — | A new value was created, not picked from `options`. |
+| `onCreate` | `(value: string) => void \| Promise<void>` | — | A new value was created, not picked from `options`; it joins the selection at once. Return the save's promise: the chip waits busy; on reject it leaves again (say why with `error`). |
 | `defaultColor` | `PaletteColor` | `"gray"` | Chip color of values without an option color, created ones included. |
-| `onOptionUpdate` | `(value: string, updates: { label?: string; color?: PaletteColor }) => void` | — | Enables the row «⋯» menu with the tag name and color; `value` never changes. |
-| `onOptionDelete` | `(value: string) => void` | — | Enables «Удалить» in the row menu; the value also leaves the selection. |
+| `onOptionUpdate` | `(value: string, updates: { label?: string; color?: PaletteColor }) => void \| Promise<void>` | — | Enables the row «⋯» menu to rename and recolor a tag; `value` never changes. Return the save's promise and apply the change to `options` before it resolves; on reject the option goes back. |
+| `onOptionDelete` | `(value: string) => void \| Promise<void>` | — | Enables «Удалить» in the row menu; the value also leaves the selection. A returned Promise defers it: resolve deletes, reject keeps everything (e.g. after a confirmation). |
 | `label` | `ReactNode` | — | Field label above; names the input. |
 | `hint` | `ReactNode` | — | Support text under the field; linked by `aria-describedby`. |
 | `error` | `ReactNode` | — | Error message; replaces the hint and implies `invalid`. |
@@ -62,6 +63,7 @@ TagSelect                       field frame: label · control · hint/error (sin
 | `optional` | `boolean` | — | Muted `labels.optional` after the label. |
 | `invalid` | `boolean` | `false` | Danger inset ring and `aria-invalid`. |
 | `disabled` | `boolean` | `false` | Disabled field and chips; the list never opens. |
+| `name` | `string` | — | Form field name: one hidden input per selected value (read with `formData.getAll(name)`). |
 | `placeholder` | `string` | `""` | Text in the input while no tag is picked. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Field tier; the list uses the same tier, chips one tier down. |
 | `focusRing` | `boolean` | `true` | `false` hides the visual focus ring (`data-focus-ring="false"`), never focus or the error ring. |
@@ -86,42 +88,48 @@ No `variant` or `tone`. The control is the field look; chips are soft Badges on
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `creatable` | a «Создать» row with the preview chip while the typed text is new | The dictionary is open | `false` |
-| `onOptionUpdate` / `onOptionDelete` | a «⋯» button on the highlighted row opening a rename / color / delete menu | Users keep their own tags | |
-| `disabled` | disabled fill, muted chips, no list | Not editable now | `false` |
+| `onOptionUpdate` / `onOptionDelete` | a «⋯» button on the highlighted row (always shown on touch screens) opening a rename / color / delete menu | Users keep their own tags | |
+| `disabled` | disabled fill, muted chips, no list | The value is read-only in this context | `false` |
 | `invalid` / `error` | danger inset ring (+ the message) | Validation failed | |
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| collapsed / expanded | focus inside or the list open | `data-expanded="true"` on the control: every chip on up to three rows (then scroll with edge fades); the height animates |
+| collapsed / expanded | focus inside or the list open | `data-expanded="true"` on the control: every chip on up to three rows (then scroll with edge fades); the height animates. Focus leaving the field collapses it and clears the typed query |
 | open | focus, typing, arrows | `data-state="open"` on the control; list `data-state`, `data-side` |
 | overflow | more chips than fit at rest | a «+N» Badge button with `labels.more` and the hidden labels in `title` |
 | invalid | `invalid` or `error` | `data-invalid="true"`, `aria-invalid` on the input; the control shakes once when an error arrives (`data-shake` on the frame) |
-| disabled | `disabled` | `data-disabled="true"`, native `disabled` on the input |
+| disabled | `disabled` | `data-disabled="true"`, native `disabled` on the input and the hidden `name` inputs; never expands |
 | option highlighted / selected / disabled | keyboard and pointer / value / option `disabled` | `data-highlighted`, `aria-selected` + checked indicator, `data-disabled` |
+| option deletion pending | `onOptionDelete` returned a Promise that has not settled | `aria-busy` + `data-pending="true"` on the row, a spinner in place of «⋯», the row cannot be picked; value and options unchanged until it resolves, kept on reject |
+| option update pending | `onOptionUpdate` returned a Promise that has not settled | the new name or color shows at once (row, chip, menu); «⋯» is `loading` (`aria-busy`) while the menu stays open; on reject the option goes back and `labels.updateFailed` is announced |
+| creation pending | `onCreate` returned a Promise that has not settled | the new chip is in the selection with Badge `loading`: `aria-busy`, dimmed, a spinner in its remove segment; it cannot be removed (×, Delete, Backspace) until the answer; on reject it leaves the selection and the list and `labels.createFailed` is announced |
+| chip leaving | a chip removed by its × | the chip closes up in place (Badge's exit) and the chips after it glide in |
 
 ## Layout & spacing
 - The field is 100% wide; set the width with the layout.
 - Chips sit `--prime-space-1` apart; the chip row keeps `--prime-focus-space` so chip rings are never cut.
 - The list is at least the field width and `--prime-panel-min-width`; max height `--prime-panel-max-height`, flips near the viewport edge.
+- Pass every option: past 100 listed options the list renders only the options around the view; the highlighted option and the one whose «⋯» menu is open stay rendered, options carry `aria-posinset` / `aria-setsize`.
 
 ## Accessibility
 
 ### Keyboard
 | Key | Action |
 |---|---|
-| `ArrowDown` · `ArrowUp` | Open the list and move the highlight over the options. |
-| `Enter` | Tick or untick the highlighted option; on the Create row, create the tag. |
+| `ArrowDown` · `ArrowUp` | Open the list (when it has something to show) and move the highlight over the options. |
+| `Enter` | Tick or untick the highlighted option (the first one when nothing is highlighted); on the Create row, create the tag; in the row menu's name field, save the new name and close the menu. |
 | `Space` | Types a space: a tag may have several words. |
-| `Backspace` | In an empty input removes the last tag. |
+| `Backspace` | In an empty input removes the last tag; on a tag removes it and focuses the previous tag. |
 | `ArrowLeft` · `ArrowRight` | From the start of the input move focus over the tags and back to the input. |
-| `Delete` | On a tag removes it; focus moves to the neighbour tag. |
-| `Escape` | Closes the list. |
+| `Delete` | On a tag removes it; focus moves to the next tag, or to the input when none is left. |
+| `Escape` | Closes the row «⋯» menu if it is open, otherwise the list. |
 
 ### ARIA
 - The input is `role="combobox"` with `aria-expanded` and `aria-controls`; the list is `role="listbox"` with `aria-multiselectable`, options are `role="option"` with `aria-selected`.
 - The highlight goes through `aria-activedescendant`; the checkbox in a row is decorative.
 - A removal is announced with `labels.removed` in a live region; the remove button is named by `labels.remove`.
+- A tag being created has `aria-busy` on its chip, a row whose rename or recolor is saved has a busy «⋯»; a refused creation or change is announced with `labels.createFailed` / `labels.updateFailed`.
 - The hint and the error are linked by `aria-describedby`; the error sets `aria-invalid`.
 
 ### Labels
@@ -134,6 +142,8 @@ No `variant` or `tone`. The control is the field look; chips are soft Badges on
 | `remove` | `"Удалить {label}"` | Accessible name of a chip's remove button; `{label}` is the tag text. |
 | `more` | `"Показать ещё {count}"` | Accessible name of the «+N» chip; `{count}` is the number of hidden tags. |
 | `removed` | `"Удалено: {label}"` | Screen-reader announcement after a tag is removed. |
+| `createFailed` | `"Не удалось создать тег «{label}»"` | Screen-reader announcement when the `onCreate` promise rejects and the new tag leaves. |
+| `updateFailed` | `"Не удалось изменить тег «{label}»"` | Screen-reader announcement when the `onOptionUpdate` promise rejects and the option goes back. |
 | `edit` | `"Изменить тег {label}"` | Accessible name of a row's «⋯» menu button. |
 | `name` | `"Название тега"` | Accessible name of the tag name field in the menu. |
 | `delete` | `"Удалить"` | Delete button in the menu. |
@@ -148,19 +158,22 @@ No `variant` or `tone`. The control is the field look; chips are soft Badges on
 | [sizes.tsx](examples/sizes.tsx) | Every size tier with two picked tags; chips sit one tier below the field — `size`. |
 | [states.tsx](examples/states.tsx) | A default field next to a disabled and an invalid one, with a disabled option in the list — `disabled`, `invalid`. |
 | [validation.tsx](examples/validation.tsx) | Live validation: removing the last region shakes the field and drops the error in, adding one clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. |
-| [creatable.tsx](examples/creatable.tsx) | A typed text that is not in the list becomes a new tag from the Create row or Enter — `creatable`, `onCreate`, `defaultColor`. |
+| [creatable.tsx](examples/creatable.tsx) | A typed text that is not in the list becomes a new tag from the Create row or Enter and is saved on the server: the chip waits busy, and a tag the server refuses leaves again — `creatable`, `onCreate`, `defaultColor`. |
 | [many-tags.tsx](examples/many-tags.tsx) | More tags than fit: at rest one row with «+N», focused every tag on up to three wrapped rows that scroll — `defaultValue`. |
-| [manage-tags.tsx](examples/manage-tags.tsx) | Users keep their own tag dictionary: the row «⋯» menu renames, recolors or deletes an option — `onOptionUpdate`, `onOptionDelete`. |
+| [manage-tags.tsx](examples/manage-tags.tsx) | Users keep their own tag dictionary on the server: the row «⋯» menu renames, recolors or deletes an option, and «⋯» spins while a change is saved — `onOptionUpdate`, `onOptionDelete`. |
+| [confirm-delete.tsx](examples/confirm-delete.tsx) | Deleting a shared tag asks first: the row waits with a spinner while the dialog is open, cancelling keeps the tag and the selection — `onOptionDelete`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: a preset button replaces the tags and the count follows them — `value`, `onValueChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the list: a button opens it from code, Escape or an outside press closes it — `open`, `onOpenChange`. |
-| [in-form.tsx](examples/in-form.tsx) | A new task form: the required labels field is checked on submit, its error shakes the field and leaves once a label is added, a calm note confirms the task — `required`, `error`, `creatable`. |
+| [in-form.tsx](examples/in-form.tsx) | A new task form: the required labels field is checked on submit, its error shakes the field and leaves once a label is added, a calm note confirms the task; the tags go with the form — `required`, `error`, `creatable`, `name`. |
 
 ## Mistakes
 - `TagSelect.Root` → TagSelect is a single export: `<TagSelect …/>`.
 - Options as JSX children → pass `options` data.
 - `onOptionUpdate` without updating your `options` → the rename disappears on the next render; keep `options` in state.
 - A TagSelect for one value → use Select.
+- Saving a created tag and taking it out of `value` yourself when the request fails → return the request's promise from `onCreate`; the chip waits and leaves on a rejection.
+- Deleting a shared tag without asking, or restoring the value by hand after a cancelled confirmation → return a Promise from `onOptionDelete` that resolves on confirm and rejects on cancel; nothing changes until it resolves.
 
 ## Related
-- **Built from:** [Badge](../badge/COMPONENT.md) (chips, «+N»), [Checkbox](../checkbox/COMPONENT.md) (`Checkbox.Indicator`), [ScrollContainer](../scroll-container/COMPONENT.md) (chip row, list), [Popover](../popover/COMPONENT.md), [Button](../button/COMPONENT.md), [Input](../input/COMPONENT.md) and [Divider](../divider/COMPONENT.md) (row menu), [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md) (field frame)
+- **Built from:** [Badge](../badge/COMPONENT.md) (chips, «+N»), [Checkbox](../checkbox/COMPONENT.md) (`Checkbox.Indicator`), [ScrollContainer](../scroll-container/COMPONENT.md) (chip row, list), [Popover](../popover/COMPONENT.md), [Button](../button/COMPONENT.md), [Input](../input/COMPONENT.md) and [Divider](../divider/COMPONENT.md) (row menu), [VisuallyHidden](../visually-hidden/COMPONENT.md) («+N» name, removal announcement), `Icon` (chevron, plus, «⋯», delete), [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md) (field frame); `useVirtualRows` (the window of a long list)
 - **See also:** [Select](../select/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Checkbox](../checkbox/COMPONENT.md)

package/src/components/tag-select/examples/confirm-delete.tsx

@@ -0,0 +1,60 @@
+/** Deleting a shared tag asks first: the row waits with a spinner while the dialog is open, cancelling keeps the tag and the selection — `onOptionDelete`. */
+import { ConfirmDialog, TagSelect, type TagSelectOption } from "prime-ui-kit";
+import * as React from "react";
+
+const INITIAL_OPTIONS: TagSelectOption[] = [
+  { value: "vip", label: "VIP", color: "purple" },
+  { value: "wholesale", label: "Опт", color: "blue" },
+  { value: "overdue", label: "Просрочка", color: "red" },
+  { value: "new", label: "Новый клиент", color: "green" },
+];
+
+const CLIENTS_WITH_TAG: Record<string, number> = { vip: 12, wholesale: 48, overdue: 7, new: 31 };
+
+type Answer = { resolve: () => void; reject: () => void };
+
+export default function TagSelectConfirmDeleteExample() {
+  const [options, setOptions] = React.useState(INITIAL_OPTIONS);
+  const [open, setOpen] = React.useState(false);
+  const [target, setTarget] = React.useState<TagSelectOption>();
+  const answer = React.useRef<Answer>(null);
+
+  const askToDelete = (value: string) =>
+    new Promise<void>((resolve, reject) => {
+      answer.current = { resolve, reject };
+      setTarget(options.find((option) => option.value === value));
+      setOpen(true);
+    });
+
+  const confirm = () => {
+    setOptions((prev) => prev.filter((option) => option.value !== target?.value));
+    answer.current?.resolve();
+    answer.current = null;
+  };
+
+  return (
+    <>
+      <TagSelect
+        label="Метки клиента"
+        options={options}
+        defaultValue={["vip", "wholesale"]}
+        onOptionDelete={askToDelete}
+        placeholder="Добавить метку"
+      />
+      <ConfirmDialog.Root
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (next) return;
+          // Closed without the confirm: the tag stays.
+          answer.current?.reject();
+          answer.current = null;
+        }}
+        title={`Удалить метку «${target?.label ?? ""}»?`}
+        description={`Она снимется у всех клиентов с этой меткой: ${CLIENTS_WITH_TAG[target?.value ?? ""] ?? 0}.`}
+        confirmLabel="Удалить"
+        onConfirm={confirm}
+      />
+    </>
+  );
+}

package/src/components/tag-select/examples/creatable.tsx

@@ -1,4 +1,4 @@
-/** A typed text that is not in the list becomes a new tag from the Create row or Enter — `creatable`, `onCreate`, `defaultColor`. */
+/** A typed text that is not in the list becomes a new tag from the Create row or Enter and is saved on the server: the chip waits busy, and a tag the server refuses leaves again — `creatable`, `onCreate`, `defaultColor`. */
 import { TagSelect, type TagSelectOption, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -7,8 +7,19 @@ const OPTIONS: TagSelectOption[] = [
   { value: "feature", label: "Новая функция", color: "blue" },
 ];
 
+/** The server's answer a beat later: a label needs at least three letters. */
+function saveLabel(value: string) {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      if (value.length < 3) reject(new Error(`Метка «${value}» короче трёх букв`));
+      else resolve();
+    }, 900);
+  });
+}
+
 export default function TagSelectCreatableExample() {
   const [created, setCreated] = React.useState<string[]>([]);
+  const [failure, setFailure] = React.useState<string>();
 
   return (
     <>
@@ -17,7 +28,17 @@ export default function TagSelectCreatableExample() {
         options={OPTIONS}
         creatable
         defaultColor="purple"
-        onCreate={(value) => setCreated((prev) => [...prev, value])}
+        error={failure}
+        onCreate={async (value) => {
+          setFailure(undefined);
+          try {
+            await saveLabel(value);
+          } catch (error) {
+            setFailure(error instanceof Error ? error.message : String(error));
+            throw error;
+          }
+          setCreated((prev) => [...prev, value]);
+        }}
         placeholder="Найдите или создайте метку"
       />
       <Typography as="p" variant="body-s" tone="secondary">

package/src/components/tag-select/examples/in-form.tsx

@@ -1,4 +1,4 @@
-/** A new task form: the required labels field is checked on submit, its error shakes the field and leaves once a label is added, a calm note confirms the task — `required`, `error`, `creatable`. */
+/** A new task form: the required labels field is checked on submit, its error shakes the field and leaves once a label is added, a calm note confirms the task; the tags go with the form — `required`, `error`, `creatable`, `name`. */
 import { Button, Input, TagSelect, type TagSelectOption, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -39,6 +39,7 @@ export default function TagSelectInFormExample() {
       </Input.Root>
       <TagSelect
         label="Метки"
+        name="labels"
         required
         hint="Помогают фильтровать задачи"
         error={error}
@@ -52,7 +53,13 @@ export default function TagSelectInFormExample() {
         creatable
         placeholder="Добавить метку"
       />
-      <TagSelect label="Наблюдатели" optional options={PEOPLE} placeholder="Добавить человека" />
+      <TagSelect
+        label="Наблюдатели"
+        name="watchers"
+        optional
+        options={PEOPLE}
+        placeholder="Добавить человека"
+      />
       <div className={styles.actions}>
         {saved ? (
           <Typography as="p" variant="body-s" tone="secondary">