prime-ui-kit 0.9.3 → 0.11.0

package/src/components/spinner/COMPONENT.md

@@ -3,7 +3,7 @@
 **Category:** status
 **Kind:** primitive
 
-> An indeterminate loading indicator: a ring with a gap that turns while a request runs.
+> An indeterminate loading indicator: the kit ring with the share unknown — a quarter arc turning on a faint track while a request runs.
 
 ## When to use
 - A region is busy and has no content shape to hold (a running job, a request with no layout yet).
@@ -12,6 +12,7 @@
 
 ## When not to use
 - The progress is known (upload, steps, quota) → use [ProgressBar](../progress-bar/COMPONENT.md) or [ProgressCircle](../progress-circle/COMPONENT.md).
+- A named process on the data scale whose share is not known yet (an import card) → [ProgressCircle](../progress-circle/COMPONENT.md) `value={null}`: a `progressbar` with your name that can show the share once it arrives.
 - A button waiting for its request → set `loading` on [Button](../button/COMPONENT.md); it places the spinner itself.
 - Content of a known shape is loading (a list, a card, a form) → [Skeleton](../skeleton/COMPONENT.md) of that shape inside [Crossfade](../crossfade/COMPONENT.md).
 - A table loading its rows → `loading` on [DataTable](../data-table/COMPONENT.md) (skeleton rows keep the layout).
@@ -25,7 +26,7 @@ import { Spinner } from "prime-ui-kit";
 ## Anatomy
 ```
 Spinner          <span role="status">; size and tone
-├─ ring          the turning ring (aria-hidden)
+├─ ring          the kit ring (internal/ring, value null): a quarter arc on a faint track (aria-hidden)
 └─ label         visually hidden labels.loading
 ```
 
@@ -34,7 +35,7 @@ Spinner          <span role="status">; size and tone
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Spinner
-`ref` → `HTMLSpanElement`. A turning ring inside a `role="status"` region with text for screen readers.
+`ref` → `HTMLSpanElement`. The kit ring with the share unknown — a quarter arc turning on a faint track, at the line weight — inside a `role="status"` region with text for screen readers.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -67,11 +68,12 @@ Spinner          <span role="status">; size and tone
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| spinning | mounted | the ring turns at a constant speed (`slow × 3` per turn, linear) |
-| reduced motion | `prefers-reduced-motion` | duration collapses to 0: the ring stays still and visible |
-| size / tone | `size`, `tone` | `data-size`, `data-tone` (only for a non-default tone) |
+| spinning | mounted | the ring turns at a constant speed (`--prime-motion-loop × 3` per turn, linear) |
+| reduced motion | `prefers-reduced-motion` | the ring keeps turning, twice as slow (`--prime-motion-loop × 6` per turn) and linear: a loading cue is information, so the token is not zeroed |
+| size / tone | `size`, `tone` | `data-size` (the explicit size, else the host control tier, else `m`), `data-tone` (only for a non-default tone) |
 
 ## Layout & spacing
+- The ring fills the icon box: a stroke of two border widths (the line weight, an icon's stroke) — a round-capped quarter arc in the tone color over an 18% track of it; `inline-flex`, `vertical-align: middle`. The svg turns as a whole (a compositor transform).
 - Next to text: one row, `align-items: center`, gap = the tier gap (`--prime-control-m-gap`).
 - In a loading region: centered in the region with its explanation under it, gap `--prime-space-3`.
 - Render the real layout around it; never a full-screen overlay of spinners.
@@ -84,7 +86,7 @@ No keyboard interaction.
 ### ARIA
 - `role="status"` with a visually hidden `labels.loading`, so screen readers learn that something is loading.
 - When the host already announces it is busy (`aria-busy` on a button or a region), pass `aria-hidden="true"`.
-- Under `prefers-reduced-motion` the ring does not turn and stays visible.
+- Under `prefers-reduced-motion` the ring keeps turning, slower and linear, so the loading cue stays readable.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -108,5 +110,5 @@ No keyboard interaction.
 - A spinner for a known progress → ProgressBar / ProgressCircle.
 
 ## Related
-- **Built from:** —
+- **Built from:** `internal/ring` (the ring drawing, shared with ProgressCircle and the circle Button)
 - **See also:** [Skeleton](../skeleton/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [ProgressCircle](../progress-circle/COMPONENT.md), [Button](../button/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md)

package/src/components/stepper/COMPONENT.md

@@ -127,10 +127,14 @@ Derive statuses from `value`; set `status="danger"` only on the failing step wit
 
 Root attributes: `data-orientation`, `data-size`. Uncontrolled (`defaultValue`) clicks still select items.
 
+Motion: a status change moves the indicator's fill, color and halo over `base`; the row fill and text color change over `fast`; press scales the step to `--prime-motion-press-scale`. Under reduced motion the indicator changes at once.
+
 ## Layout & spacing
 - The root is a size container (`inline-size: 100%`): give it a definite width, a shrink-wrapped parent collapses it.
 - Wizard: stepper column and form side by side with `gap: var(--prime-space-8)`, stacking on narrow widths.
 - Vertical rows are separated by `var(--prime-space-1)` (`var(--prime-space-2)` at `size="xl"`); the same value is the row gap of a wrapping horizontal stepper.
+- Horizontal steps and their chevrons sit 8 · 12 · 16 · 20 · 24 apart (xs → xl); below a 30rem (480px) container each step takes its own full-width row with the vertical row padding.
+- Indicator → text gap 8 (xs, s) · 12 (m, l) · 16 (xl); titles are medium weight and wrap long words.
 
 ## Accessibility
 

package/src/components/switch/COMPONENT.md

@@ -34,13 +34,14 @@ Switch.Root          field grid; ref and input props go to the native input (rol
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Switch.Root
-`ref` → `HTMLInputElement` (the native `input type="checkbox" role="switch"`). Renders the field `<div>`, the `<label>` row with the input and the track, and the support row. Field-root rule for a leaf: `className` goes to the field `<div>`; `id`, `ref` and native input props to the input.
+`ref` → `HTMLInputElement` (the native `input type="checkbox" role="switch"`). Renders the field `<div>`, the `<label>` row with the input and the track, and the support row. `className` goes to the field `<div>`, native input props to the input.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `checked` | `boolean` | — | Controlled state. |
 | `defaultChecked` | `boolean` | `false` | Initial state when uncontrolled. |
-| `onCheckedChange` | `(checked: boolean) => void` | — | Called with the new state on every toggle (not while `readOnly`). |
+| `onCheckedChange` | `(checked: boolean) => void \| Promise<void>` | — | Called with the new state on every toggle. Return the save's promise: the thumb waits with a spinner; a controlled owner sets `checked` before resolving; on reject the thumb goes back (say why with `error`). |
+| `loading` | `boolean` | `false` | Saving, for an owner that tracks the request itself: a spinner in the thumb, `aria-busy` on the input, presses do nothing. A promise from `onCheckedChange` does the same on its own. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the track (24×16 … 44×24), the text and the gap. Without it the tier of its host (a form, a panel), else `m`. |
 | `hint` | `ReactNode` | — | Help text under the label text. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
@@ -76,6 +77,7 @@ No `variant` / `tone` / `color`.
 | `readOnly` | normal colours, no hover or press, clicks ignored | the value is meaningful but someone else controls it | `false` |
 | `disabled` | muted track (on = `accent-soft`), dimmed text | the setting is unavailable | `false` |
 | `invalid` | danger ring on the off track | the message is shown elsewhere; otherwise pass `error` | `false` |
+| `loading` | a spinner turns inside the thumb, presses do nothing | the owner tracks the save itself; with a promise from `onCheckedChange` it comes on its own | `false` |
 
 **Combinations**
 - `readOnly` and `disabled` together are pointless — pick one.
@@ -87,9 +89,10 @@ No `variant` / `tone` / `color`.
 |---|---|---|
 | off | `checked={false}` / default | `data-state="unchecked"`; track `fill-strong` (hover `fill-strong-hover`), thumb at the start |
 | on | `checked` / `defaultChecked` | `data-state="checked"`; accent track, the thumb glides to the end |
-| invalid | `invalid` or a non-empty `error` | `data-invalid="true"`, `aria-invalid`; danger ring on the off track and on focus |
+| invalid | `invalid` or a non-empty `error` | `data-invalid="true"`, `aria-invalid`; danger ring on the off track and on focus; the row shakes once when an error arrives (`data-shake`) |
 | disabled | `disabled` | `data-disabled="true"`; off track `fill-muted`, on track `accent-soft`, `cursor: not-allowed` |
 | read-only | `readOnly` | `aria-readonly="true"` on the input, `data-readonly="true"` on the field; no hover or press, default cursor |
+| saving | `loading`, or `onCheckedChange` returned a pending promise | the thumb stands in the new position with a `Spinner` inside (accent when on, muted when off; it enters with `enterMotion`), `aria-busy` on the input, `data-loading` on the track, presses ignored; a rejection glides the thumb back (`base`, emphasized) |
 | pressed | pointer press | the track scales to the compact press scale (not when disabled or read-only) |
 | focus-visible | keyboard | outer focus ring around the track |
 
@@ -107,12 +110,13 @@ Root also carries `data-size`. Controlled: `checked` + `onCheckedChange`. Uncont
 | Key | Action |
 |---|---|
 | `Tab` | Moves focus to the switch. |
-| `Space` | Toggles it (not while `readOnly`). |
+| `Space` | Toggles it (not while `readOnly` or saving). |
 
 ### ARIA
 - A native `<input type="checkbox" role="switch">` (its native checked state is the switch state), visually hidden over the track and wrapped by the `<label>` row.
 - `aria-invalid`, `aria-readonly` and `aria-describedby` (your ids + the hint or the error) are set on the input.
 - Without visible text, name it with `aria-label` or `aria-labelledby` on `Switch.Root`.
+- While a change is saved (`loading` or a pending promise) the input has `aria-busy`; the thumb's spinner is hidden from assistive tech. A refused save puts the state back — say why with `error`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -124,8 +128,9 @@ No `labels`.
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A setting that applies at once, with a hint under its text — `hint`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size, track 24×16 to 44×24; the text follows the control tier — `size`. |
-| [states.tsx](examples/states.tsx) | Every state side by side, each labelled by its prop — `checked`, `readOnly`, `invalid`, `disabled`. |
+| [states.tsx](examples/states.tsx) | Every state side by side, each labelled by its prop — `checked`, `readOnly`, `invalid`, `loading`, `disabled`. |
 | [settings-row.tsx](examples/settings-row.tsx) | A settings row with text on the left and a bare track on the right — `aria-labelledby`, `aria-describedby`. |
+| [saving.tsx](examples/saving.tsx) | A setting that applies on the server at once: the thumb waits in its new place with a spinner, and a refused save glides it back and says why — `onCheckedChange`, `error`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the state and rewrites the hint to match it — `checked`, `onCheckedChange`. |
 | [in-form.tsx](examples/in-form.tsx) | Switches submitted with a form: the value goes to FormData by `name`, a required one shows an error — `name`, `required`, `error`. |
 
@@ -135,7 +140,8 @@ No `labels`.
 - `invalid` plus `error` → pass `error` alone.
 - A bare switch without `aria-label` / `aria-labelledby` → it has no accessible name.
 - `readOnly` used to block a setting that is unavailable → use `disabled`.
+- Setting `checked` in `onCheckedChange` and flipping it back when the request fails, or a separate «saving» flag → return the request's promise; set `checked` only after it succeeds.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (the row), [Hint](../hint/COMPONENT.md) (`hint`, `error`)
+- **Built from:** [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Spinner](../spinner/COMPONENT.md) (saving); the row is a native `<label>`
 - **See also:** [Checkbox](../checkbox/COMPONENT.md), [Radio](../radio/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

package/src/components/switch/examples/in-form.tsx

@@ -22,7 +22,9 @@ export default function SwitchInFormExample() {
         name="processing"
         required
         error={error}
-        onCheckedChange={(checked) => checked && setError(undefined)}
+        onCheckedChange={(checked) => {
+          if (checked) setError(undefined);
+        }}
       >
         <Switch.Label>Согласие на обработку данных</Switch.Label>
       </Switch.Root>

package/src/components/switch/examples/saving.tsx

@@ -0,0 +1,53 @@
+/** A setting that applies on the server at once: the thumb waits in its new place with a spinner, and a refused save glides it back and says why — `onCheckedChange`, `error`. */
+import { Switch } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+/** The server's answer a beat later: SMS needs a confirmed phone number. */
+function saveSetting(setting: "email" | "sms", enabled: boolean) {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      if (setting === "sms" && enabled) reject(new Error("Сначала подтвердите номер телефона"));
+      else resolve();
+    }, 900);
+  });
+}
+
+export default function SwitchSavingExample() {
+  const [email, setEmail] = React.useState(true);
+  const [sms, setSms] = React.useState(false);
+  const [smsError, setSmsError] = React.useState<string>();
+
+  return (
+    <div className={styles.form}>
+      <Switch.Root
+        checked={email}
+        onCheckedChange={async (enabled) => {
+          await saveSetting("email", enabled);
+          setEmail(enabled);
+        }}
+        hint="Счета и акты на почту бухгалтерии"
+      >
+        <Switch.Label>Документы на почту</Switch.Label>
+      </Switch.Root>
+      <Switch.Root
+        checked={sms}
+        error={smsError}
+        onCheckedChange={async (enabled) => {
+          setSmsError(undefined);
+          try {
+            await saveSetting("sms", enabled);
+          } catch (error) {
+            setSmsError(error instanceof Error ? error.message : String(error));
+            throw error;
+          }
+          setSms(enabled);
+        }}
+        hint="Код и статус оплаты по SMS"
+      >
+        <Switch.Label>SMS-уведомления</Switch.Label>
+      </Switch.Root>
+    </div>
+  );
+}

package/src/components/switch/examples/states.tsx

@@ -1,4 +1,4 @@
-/** Every state side by side, each labelled by its prop — `checked`, `readOnly`, `invalid`, `disabled`. */
+/** Every state side by side, each labelled by its prop — `checked`, `readOnly`, `invalid`, `loading`, `disabled`. */
 import { Switch } from "prime-ui-kit";
 
 export default function SwitchStatesExample() {
@@ -27,6 +27,11 @@ export default function SwitchStatesExample() {
         </div>
       </div>
       <div>
+        <div>
+          <Switch.Root defaultChecked loading>
+            <Switch.Label>loading</Switch.Label>
+          </Switch.Root>
+        </div>
         <div>
           <Switch.Root disabled>
             <Switch.Label>disabled</Switch.Label>

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 = [