prime-ui-kit 0.15.0 → 0.17.0

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

@@ -9,7 +9,7 @@ const ROLES = [
 
 export default function SelectStatesExample() {
   return (
-    <>
+    <div>
       <Select.Root label="default" defaultValue="editor">
         <Select.Trigger>
           <Select.Value />
@@ -74,6 +74,6 @@ export default function SelectStatesExample() {
           ))}
         </Select.Content>
       </Select.Root>
-    </>
+    </div>
   );
 }

package/src/components/select/examples/with-icon.tsx

@@ -13,23 +13,25 @@ export default function SelectWithIconExample() {
   const selected = ACCESS.find((option) => option.value === access) ?? ACCESS[1];
 
   return (
-    <Select.Root label="Доступ к проекту" value={access} onValueChange={setAccess}>
-      <Select.Trigger>
-        <Select.TriggerIcon>
-          <Icon name={selected.icon} />
-        </Select.TriggerIcon>
-        <Select.Value />
-      </Select.Trigger>
-      <Select.Content>
-        {ACCESS.map((option) => (
-          <Select.Item key={option.value} value={option.value}>
-            <Select.ItemIcon>
-              <Icon name={option.icon} />
-            </Select.ItemIcon>
-            {option.label}
-          </Select.Item>
-        ))}
-      </Select.Content>
-    </Select.Root>
+    <div>
+      <Select.Root label="Доступ к проекту" value={access} onValueChange={setAccess}>
+        <Select.Trigger>
+          <Select.TriggerIcon>
+            <Icon name={selected.icon} />
+          </Select.TriggerIcon>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          {ACCESS.map((option) => (
+            <Select.Item key={option.value} value={option.value}>
+              <Select.ItemIcon>
+                <Icon name={option.icon} />
+              </Select.ItemIcon>
+              {option.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+    </div>
   );
 }

package/src/components/sheet/COMPONENT.md

@@ -26,7 +26,7 @@ import { Sheet } from "prime-ui-kit";
 Sheet.Root                     state and dismiss policy (no DOM)
 ├─ Sheet.Trigger               clones its child; opens on click
 └─ Sheet.Content               portal + scrim + role="dialog" panel at the bottom edge
-   ├─ (grab handle)            aria-hidden bar on top; a drag starts here
+   ├─ (grab handle)            aria-hidden bar on top while the sheet swipes (`closeOnOutsideClick`); a drag starts here
    ├─ Sheet.Guard              no DOM: holds the sheet (busy / dirty) from inside
    ├─ Sheet.Header             optional: [Icon] [Title + Description] [Actions] [close Button]
    │  ├─ Sheet.Icon
@@ -52,12 +52,12 @@ No DOM, no ref. State and dismiss policy.
 | `defaultOpen` | `boolean` | `false` | Initial visibility, uncontrolled. |
 | `onOpenChange` | `(open: boolean) => void` | — | Called on every open and close: trigger, close button, `Close`, Escape, scrim click, code. A `Guard` holds the dismisses (not code). |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the dialog. |
-| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim (and a swipe down) closes the dialog; turn off for destructive confirms. |
+| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim (and a swipe down, which draws the grab handle) closes the dialog. A destructive action is confirmed in a ConfirmDialog; unsaved changes are held by `Guard`. |
 | `labels` | `Partial<SheetLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — | Trigger and Content. |
 
 ### Sheet.Content
-`ref` → `HTMLDivElement` (the dialog panel). Portal + scrim + `role="dialog"` panel raised from the bottom edge, as tall as its content. Header and footer are optional: without a header name it with `aria-label`.
+`ref` → `HTMLDivElement` (the dialog panel). Portal + scrim + `role="dialog"` panel raised from the bottom edge, as tall as its content, with a grab handle while it swipes. Header and footer are optional: without a header name it with `aria-label`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -68,15 +68,20 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other attributes of the `role="dialog"` element. |
 
 ### Sheet.Header
-`ref` → `HTMLElement`. Renders `<header>`: [Icon] [Title + Description] [Actions] [close button]. + native `HTMLAttributes<HTMLElement>`.
+`ref` → `HTMLElement`. Renders `<header>`: [Icon] [Title + Description] [Actions] [close button].
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `showClose` | `boolean` | `true` | Built-in square ghost `s` close button named by `labels.close`; disabled in place while a `Guard` is `busy`. |
 | `children` | `ReactNode` | — | Icon, Title, Description, Actions in any order; each goes to its column. A `Tabs.List` (with `Tabs.Root` around header and body) turns the header into a tab strip. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other attributes of the `<header>`. |
 
 ### Sheet.Actions
-`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`. + native `<div>` props.
+`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the row. |
 
 ### Sheet.Icon
 `ref` → `HTMLSpanElement`. An `aria-hidden` 40 px tile with a tone fill; around an `Avatar.Root` or a `Thumbnail.Root` (the record's picture) no tile — `data-media`, the avatar sized to 40 px.
@@ -84,35 +89,48 @@ No DOM, no ref. State and dismiss policy.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Soft fill and icon color; not used around a picture. |
-| `children` | `ReactNode` | — (required) | An icon glyph (sized to the m icon), or the record's picture: an `Avatar.Root` (sized to the tile) or a `Thumbnail.Root`. |
+| `children` | `ReactNode` | — (required) | An `Icon` (sized to the m icon), or the record's picture: an `Avatar.Root` (sized to the tile) or a `Thumbnail.Root`. |
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the tile. |
 
 ### Sheet.Title · Sheet.Description
-`ref` → `HTMLHeadingElement` / `HTMLParagraphElement`. `<h2>` (title-m) / `<p>` (body-s, muted); their ids name and describe the dialog. + native props except `id`.
+`ref` → `HTMLHeadingElement` / `HTMLParagraphElement`. `<h2>` (title-m) / `<p>` (body-s, muted); their ids name and describe the dialog.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `Omit<HTMLAttributes<HTMLHeadingElement \| HTMLParagraphElement>, "id">` | — | `className`, `children` and the other attributes except `id` (the dialog owns it). |
 
 ### Sheet.Body
-`ref` → `HTMLDivElement`. The only scrolling zone (a ScrollContainer), 16 gap between blocks. + native `<div>` props.
+`ref` → `HTMLDivElement`. The only scrolling zone (a ScrollContainer), 16 gap between blocks.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the zone. |
 
 ### Sheet.Footer
-`ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last, and an optional `Meta` at the start. + native `HTMLAttributes<HTMLElement>`.
+`ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last, and an optional `Meta` at the start.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `layout` | `"fill" \| "end"` | `"end"` | `fill`: equal-width buttons in one row; `end`: auto width, at the end. Stacked on phones (viewport below 640 px) and in a dialog narrower than 360 px. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `className`, `children` and the other attributes of the `<footer>`. |
 
 ### Sheet.Meta
-`ref` → `HTMLParagraphElement`. A `<p>` at the start of the footer: short muted status text («Есть несохранённые изменения»); the buttons keep their width at the end. Not part of the dialog description. + native `<p>` props.
+`ref` → `HTMLParagraphElement`. A `<p>` at the start of the footer: short muted status text («Есть несохранённые изменения»); the buttons keep their width at the end. Not part of the dialog description.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLParagraphElement>` | — | `className`, `children` and the other attributes of the `<p>`. |
 
 ### Sheet.Guard
 No DOM, no ref. Holds the dialog from anywhere inside Content, where the form state lives; renders only the built-in «discard changes?» confirm. Closing from code is never held.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `busy` | `boolean` | `false` | A request runs: Escape, a press outside, a swipe, the close button and `Close` do nothing; the close button and the `Close` child stay in place, disabled. |
-| `dirty` | `boolean` | `false` | Unsaved changes: any of those dismisses first asks «Не сохранять изменения?» (a ConfirmDialog with `labels.discard*`); confirming closes the dialog. |
+| `busy` | `boolean` | `false` | A request runs: Escape, a press outside, a swipe, the close button and `Close` do nothing; the close button and the `Close` child stay in place, disabled. The grab handle stays and takes no drag. |
+| `dirty` | `boolean` | `false` | Unsaved changes: any of those dismisses (a swipe glides back first) asks «Не сохранять изменения?» (a ConfirmDialog with `labels.discard*`); confirming closes the dialog. |
 
 ### Sheet.Trigger · Sheet.Close
-No DOM: clone the single child and chain its `onClick` (unless the child's handler calls `preventDefault()`). `Close` goes through a `Guard` and makes its child `disabled` while the guard is busy.
+No DOM: each clones its child. `Trigger` and `Close` chain its `onClick` (skipped after `preventDefault()`): open; close through `Guard`, `disabled` while it is busy.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -141,11 +159,12 @@ Sheet has no `variant`, `side` or `size`: it always rises from the bottom edge,
 | State | Driven by | DOM |
 |---|---|---|
 | open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the scrim and the panel; mounted until the slide-down ends |
-| swiping | a drag down from the handle or the header (with `closeOnOutsideClick`) | `data-swiping` and `--swipe-offset` on the panel while the pointer drags it; `data-swipe-dismissed` while it glides out after a closing release; `--swipe-progress` (0…1) on the scrim |
+| dismiss | `closeOnEscape`, `closeOnOutsideClick` (both default `true`) | Escape, a scrim press and a swipe down ask the Root to close; `false` turns that way off (`closeOnOutsideClick={false}`: no handle, no swipe) |
+| swiping | a drag down from the handle or the header (with `closeOnOutsideClick`; without it there is no handle and no swipe) | `data-swiping` and `--swipe-offset` on the panel while the pointer drags it, `data-swipe-dismissed` while it glides out after a closing release — both mirrored on the scrim, which carries `--swipe-progress` (0…1) |
 | open: trapped | while open | focus trapped, page scroll locked, siblings of the portal `inert`; a sheet opened from another overlay stacks above it |
 | closing | `open` turns false | the panel keeps showing the children it had open while it slides down |
-| busy | `Sheet.Guard busy` | Escape, the scrim, a swipe, the close button and `Sheet.Close` do nothing; the close button and the `Close` child are `disabled` in place |
-| dirty | `Sheet.Guard dirty` | a dismiss opens the «Не сохранять изменения?» ConfirmDialog (`labels.discard*`); no swipe |
+| busy | `Sheet.Guard busy` | Escape, the scrim, a swipe, the close button and `Sheet.Close` do nothing; the close button and the `Close` child are `disabled` in place; the handle stays, `data-swipe-disabled` on the panel (no grab cursor) |
+| dirty | `Sheet.Guard dirty` | a dismiss opens the «Не сохранять изменения?» ConfirmDialog (`labels.discard*`); a swipe past the threshold glides back and asks the same |
 
 Motion: the scrim fades, the sheet slides up over `slow` and down over `base` (`overlayMotion`); under `prefers-reduced-motion` it unmounts at once. A swipe down moves the sheet with the pointer; on release it closes past 30% of its height or on a quick flick and glides the rest of the way out, otherwise it glides back — both over `base` on the `emphasized` (iOS sheet) curve. A pull upward meets growing resistance and stops at 24; the sheet's fill continues that far below the screen edge. The scrim thins as the sheet goes down. The drag starts from the handle or the header, never from the body, so its content scrolls and its controls work as usual.
 
@@ -154,7 +173,7 @@ Motion: the scrim fades, the sheet slides up over `slow` and down over `base` (`
   - **No footer by default.** A footer only for a form with an explicit submit: «Отмена» (`Sheet.Close`, outline neutral) and the submit (solid, last; `type="submit" form={formId}`).
   - **The header is optional.** Keep it when the content needs a title to be understood (a list of actions on «Заказ № 1042»). Drop it — and with it the × and the hairline — when the content speaks for itself (a calendar opened from a «Дата отгрузки» button): name the sheet with `aria-label` on `Sheet.Content`.
 - The content is the sheet's own, across its width: `Datepicker.Panel` or a column of actions straight in `Sheet.Body` — never a Card or a padded box inside it.
-- Zone padding `--prime-sheet-padding`; height by content up to `100dvh − --prime-sheet-top-gap`, radius `--prime-sheet-radius` on top, a `--prime-sheet-handle-area` strip with the handle bar, the bottom safe-area inset below the content.
+- Zone padding `--prime-sheet-padding`, width `--prime-sheet-width`. The bottom-sheet surface (`src/internal/sheet.module.css`, shared with a Modal and the floating layers on a phone) gives the height by content up to the top gap, the rounded top, the handle strip and the bottom safe-area inset below the content.
 - Only the body scrolls; header and footer stay in place.
 - Tabs in the header: a `Tabs.List` inside `Sheet.Header` (with `Tabs.Root` around the header and the body) spans the header's last row. The header becomes the tab strip, edge to edge and without the hairline; the active tab is the body rising into it, the panels sit in the body.
 - Fields inside get the surface field fill.
@@ -170,17 +189,21 @@ Motion: the scrim fades, the sheet slides up over `slow` and down over `base` (`
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Escape` | Closes the sheet (`closeOnEscape`); focus returns to the trigger. |
 | `Tab` · `Shift+Tab` | Cycle focus inside the sheet. |
 
 ### ARIA
-- `role="dialog"`, `aria-modal="true"`, named by Title — without a header by `aria-label` on `Sheet.Content`; described by Description.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- `role="dialog"`, `aria-modal="true"`, named by `Sheet.Title` — without a header by `aria-label` on `Sheet.Content`; described by `Sheet.Description`.
 - Focus moves into the sheet on open and returns to the opener on close, including after a scrim click.
 - The page behind is `inert`, scroll is locked; only the topmost layer reacts.
-- A swipe down is an extra way out; Escape and the scrim stay. The grab handle is `aria-hidden`.
-- A busy `Guard` holds every dismiss, the swipe included; a dirty one opens a `role="alertdialog"` confirm with focus on «Продолжить».
+- A swipe down from the grab handle or the header is an extra way out next to Escape and the scrim, following `closeOnOutsideClick`: with it off there is no swipe and no handle. The handle is `aria-hidden`.
+- A `Guard` that is `busy` holds every dismiss: the handle stays and takes no drag. A `dirty` one glides a swipe back and opens a `role="alertdialog"` confirm with focus on «Продолжить», as every other dismiss does.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -214,5 +237,5 @@ Motion: the scrim fades, the sheet slides up over `slow` and down over `base` (`
 - `closeOnOutsideClick={false}` and `closeOnEscape={false}` with no header × and no `Sheet.Close` → nothing closes it; keep a button that answers.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Sheet.Body`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Sheet.Guard` discard confirm), `Icon` (the close glyph)
+- **Built from:** the dialog shared with Modal and Drawer (`internal/overlay/DialogParts`), [Button](../button/COMPONENT.md) (close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Sheet.Body`), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (a record's picture in `Sheet.Icon`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Sheet.Guard` discard confirm), `Icon` (the close glyph)
 - **See also:** [Drawer](../drawer/COMPONENT.md) (the same parts as a side panel), [Modal](../modal/COMPONENT.md) (the same parts in the centre), [Datepicker](../datepicker/COMPONENT.md) (`Datepicker.Panel` in a sheet), [Dropdown](../dropdown/COMPONENT.md)

package/src/components/sheet/examples/header-actions.tsx

@@ -1,9 +1,18 @@
 /** The courier is at the door: an icon tile heads the sheet, the payment status and a ⋯ menu sit before the close button, and two equal buttons fill the footer — `Sheet.Icon`, `Sheet.Actions`, `layout`. */
-import { Badge, Button, Dropdown, Icon, Sheet, Typography } from "prime-ui-kit";
+import { Badge, Button, ConfirmDialog, Dropdown, Icon, Sheet, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+/** Pretends to refuse the order on the server. */
+function refuseOrder() {
+  return new Promise((resolve) => setTimeout(resolve, 900));
+}
 
 export default function SheetHeaderActionsExample() {
+  const [open, setOpen] = React.useState(false);
+  const [refusing, setRefusing] = React.useState(false);
+
   return (
-    <Sheet.Root>
+    <Sheet.Root open={open} onOpenChange={setOpen}>
       <Sheet.Trigger>
         <Button.Root variant="soft" tone="neutral">
           Курьер на месте
@@ -17,7 +26,7 @@ export default function SheetHeaderActionsExample() {
           <Sheet.Title>Курьер у двери</Sheet.Title>
           <Sheet.Description>Заказ № 1042 · 3 коробки</Sheet.Description>
           <Sheet.Actions>
-            <Badge.Root color="green">Оплачен</Badge.Root>
+            <Badge.Root tone="success">Оплачен</Badge.Root>
             <Dropdown.Root>
               <Dropdown.Trigger>
                 <Button.Root variant="ghost" tone="neutral" aria-label="Действия с заказом">
@@ -30,7 +39,9 @@ export default function SheetHeaderActionsExample() {
                 <Dropdown.Item>Позвонить курьеру</Dropdown.Item>
                 <Dropdown.Item>Перенести доставку</Dropdown.Item>
                 <Dropdown.Separator />
-                <Dropdown.Item tone="danger">Отказаться от заказа</Dropdown.Item>
+                <Dropdown.Item tone="danger" onSelect={() => setRefusing(true)}>
+                  Отказаться от заказа
+                </Dropdown.Item>
               </Dropdown.Content>
             </Dropdown.Root>
           </Sheet.Actions>
@@ -50,6 +61,14 @@ export default function SheetHeaderActionsExample() {
             <Button.Root>Принять заказ</Button.Root>
           </Sheet.Close>
         </Sheet.Footer>
+        <ConfirmDialog.Root
+          open={refusing}
+          onOpenChange={setRefusing}
+          title="Отказаться от заказа № 1042?"
+          description="Курьер увезёт коробки обратно, деньги вернутся в течение трёх дней."
+          confirmLabel="Отказаться"
+          onConfirm={() => refuseOrder().then(() => setOpen(false))}
+        />
       </Sheet.Content>
     </Sheet.Root>
   );

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

@@ -1,5 +1,6 @@
 /** Actions with an order raised from the bottom edge: a header names the order, a column of actions follows, and each action closes the sheet — `Sheet.Trigger`, `Sheet.Header`, `Sheet.Close`. */
-import { Button, Icon, Sheet } from "prime-ui-kit";
+import { Button, ConfirmDialog, Icon, Sheet } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
@@ -9,9 +10,16 @@ const ACTIONS = [
   { label: "Скопировать ссылку", icon: "action.copy" },
 ] as const;
 
+/** Pretends to cancel the order on the server. */
+function cancelOrder() {
+  return new Promise((resolve) => setTimeout(resolve, 900));
+}
+
 export default function SheetOverviewExample() {
+  const [open, setOpen] = React.useState(false);
+
   return (
-    <Sheet.Root>
+    <Sheet.Root open={open} onOpenChange={setOpen}>
       <Sheet.Trigger>
         <Button.Root variant="soft" tone="neutral">
           Действия с заказом
@@ -34,14 +42,21 @@ export default function SheetOverviewExample() {
                 </Button.Root>
               </Sheet.Close>
             ))}
-            <Sheet.Close>
-              <Button.Root variant="ghost" tone="danger" fullWidth>
-                <Button.Icon>
-                  <Icon name="action.delete" />
-                </Button.Icon>
-                Отменить заказ
-              </Button.Root>
-            </Sheet.Close>
+            <ConfirmDialog.Root
+              title="Отменить заказ № 1042?"
+              description="Клиент получит уведомление, а оплата вернётся на карту."
+              confirmLabel="Отменить заказ"
+              onConfirm={() => cancelOrder().then(() => setOpen(false))}
+            >
+              <ConfirmDialog.Trigger>
+                <Button.Root variant="ghost" tone="danger" fullWidth>
+                  <Button.Icon>
+                    <Icon name="action.delete" />
+                  </Button.Icon>
+                  Отменить заказ
+                </Button.Root>
+              </ConfirmDialog.Trigger>
+            </ConfirmDialog.Root>
           </div>
         </Sheet.Body>
       </Sheet.Content>

package/src/components/skeleton/COMPONENT.md

@@ -37,7 +37,7 @@ Skeleton           <span aria-hidden="true">; data-shape, data-size
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `shape` | `"text" \| "control" \| "circle" \| "block"` | `"text"` | `text` — lines of the tier's text; `control` — a field or button of the tier; `circle` — an avatar of the tier; `block` — a box that fills its container (image, chart, card). |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the text line (control text size and line height), the control height or the avatar size. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the text line (control text size and line height), the control height or the avatar size. |
 | `lines` | `number` | `1` | `text` only: number of lines; the last of several is 60% wide. |
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` (width, height of a `block`), `data-*` and the other span attributes. |
 
@@ -65,16 +65,20 @@ Skeleton           <span aria-hidden="true">; data-shape, data-size
 
 ## Layout & spacing
 - Put skeletons in the real layout of the content: the same grid, gaps and paddings, so the swap to data moves nothing.
-- Width: a text line and a control fill their container; narrow them with a `className` (a label is shorter than its field, an amount shorter than a name). Shape defaults have zero specificity, so a `className` always wins.
-- Height: text and control come from the tier; a `block` fills its container or takes a height from `className`.
+- Width: a text line and a control fill their container; narrow them with a `className` (a label is shorter than its field, an amount shorter than a name). Every size default — the `max-width: 100%` cap too — has zero specificity, so a `className` always wins.
+- Height: text and control come from the tier (the shared tier table, `internal/fieldTier`); a `block` fills its container — an absolutely placed media box too — or takes a height from `className`.
 - Inside a sized host (a DataTable, a Popover, a field tier) `size` follows the host tier.
 
 ## 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. -->
+
 - Decorative: `aria-hidden="true"`, screen readers skip it.
 - The loading region announces itself: `aria-busy` on it (Crossfade, a card, a form) and, when the wait matters, a `role="status"` text.
 - Under `prefers-reduced-motion` the placeholder does not pulse.
@@ -100,5 +104,5 @@ No `labels`.
 - Returning to a skeleton on every refresh of data already shown → keep the data, set `aria-busy`.
 
 ## Related
-- **Built from:** —
+- **Built from:** `internal/fieldClasses` (the tier table)
 - **See also:** [Crossfade](../crossfade/COMPONENT.md), [Spinner](../spinner/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md)

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

@@ -57,9 +57,7 @@
 
 .list {
   display: grid;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  gap: var(--prime-space-3);
 }
 
 /* Data rows and their placeholders share one row geometry, so the swap does not move anything. */
@@ -68,12 +66,6 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--prime-space-4);
-  padding-block: var(--prime-space-3);
-  border-bottom: var(--prime-border-width) solid var(--prime-color-border-subtle);
-}
-
-.row:last-child {
-  border-bottom: 0;
 }
 
 .payer {
@@ -83,7 +75,3 @@
 .amount {
   width: 20%;
 }
-
-.sum {
-  font-variant-numeric: tabular-nums;
-}

package/src/components/skeleton/examples/with-crossfade.tsx

@@ -41,25 +41,25 @@ export default function SkeletonWithCrossfadeExample() {
         </Card.Header>
         <Card.Body>
           <Crossfade state={loading ? "loading" : "ready"} aria-busy={loading}>
-            <ul className={styles.list}>
+            <div className={styles.list}>
               {PAYMENTS.map((payment) =>
                 loading ? (
-                  <li key={payment.id} className={styles.row}>
+                  <div key={payment.id} className={styles.row}>
                     <Skeleton className={styles.payer} />
                     <Skeleton className={styles.amount} />
-                  </li>
+                  </div>
                 ) : (
-                  <li key={payment.id} className={styles.row}>
+                  <div key={payment.id} className={styles.row}>
                     <Typography as="span" variant="body-m">
                       {payment.payer}
                     </Typography>
-                    <Typography as="span" variant="body-m" className={styles.sum}>
+                    <Typography as="span" variant="body-m" numeric="tabular">
                       {payment.amount}
                     </Typography>
-                  </li>
+                  </div>
                 ),
               )}
-            </ul>
+            </div>
           </Crossfade>
         </Card.Body>
       </Card.Root>

package/src/components/slider/COMPONENT.md

@@ -51,7 +51,7 @@ Slider                 field frame (FieldFrame): className, ref, rest
 | `min` | `number` | `0` | Lower bound. |
 | `max` | `number` | `100` | Upper bound. |
 | `step` | `number` | `1` | Step of the keyboard and of the snapping; fractions allowed. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the track thickness T (thumb 4.5T × 3T), the label, the value and the hint. Without it the tier of its host (a form, a panel), else `m`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the track thickness T (thumb 4.5T × 3T), the label, the value and the hint. Without it the tier of its host (a form, a panel), else `m`. |
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"accent"` | Color of the filled part of the track. |
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | `vertical` — the track stands upright, minimum at the bottom: a level beside a button, a mixer column. |
 | `disabled` | `boolean` | — | Muted track and thumb, dimmed label and value, no interaction. |
@@ -60,7 +60,7 @@ Slider                 field frame (FieldFrame): className, ref, rest
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the track (`aria-describedby`). Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
-| `invalid` | `boolean` | — | `aria-invalid` on the range input and a danger focus ring on the thumb. A non-empty `error` implies it. |
+| `invalid` | `boolean` | — | `aria-invalid` on the range input, a danger fill (over any `tone`) and a danger focus ring on the thumb. A non-empty `error` implies it. |
 | `showValue` | `boolean` | `false` | Shows the current value at the end of the label row (tabular numbers, `aria-hidden` — the input announces it). |
 | `formatValue` | `(value: number) => string` | — | Formats the shown value and `aria-valuetext` (units, currency). |
 | `id` | `string` | — | Id of the range input (generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
@@ -73,7 +73,7 @@ Slider                 field frame (FieldFrame): className, ref, rest
 No `variant` / `color`.
 
 ### size
-Everything derives from the tier track thickness T (`--prime-control-<tier>-track`, shared with ProgressBar): the thumb is a 4.5T × 3T capsule, so the control scales as one shape.
+Everything derives from the tier track thickness T (`--field-track` of the field tier, shared with ProgressBar): the thumb is a 4.5T × 3T capsule, so the control scales as one shape.
 
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
@@ -108,6 +108,7 @@ Tone never carries meaning alone: the label names what the value means.
 |---|---|---|---|
 | `showValue` | the value at the right end of the label row, `text-secondary`, tabular nums | the number matters (price, temperature, percent) | `false` |
 | `disabled` | muted track, flat thumb, dimmed label and value | the setting is unavailable | — |
+| `required` / `optional` | red `*` / muted «необязательно» after the label | mark the minority of the form (a range always has a value, so `required` only marks it) | — |
 
 **Combinations**
 - `showValue` + `formatValue` for any value with a unit; `formatValue` alone only changes `aria-valuetext`.
@@ -120,10 +121,10 @@ Tone never carries meaning alone: the label names what the value means.
 |---|---|---|
 | default | — | `data-size`, `data-tone` (`data-orientation="vertical"` when upright); track `fill-strong`, tone pill up to the thumb centre, opaque thumb |
 | hover | pointer (fine pointers only) | light liquid glass: the thumb grows to 110%, turns translucent and slightly frosted |
-| invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the root, `aria-invalid` on the input; the error replaces the hint, danger focus ring; the control shakes once when an error arrives (`data-shake` on the frame) |
+| invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the root, `aria-invalid` on the input; the error replaces the hint, danger fill over any `tone`, danger focus ring; the control shakes once when an error arrives (`data-shake` on the frame) |
 | pressed | dragging | clear glass: the thumb grows to 125%, the rounded end of the fill shows through |
 | focus-visible | keyboard | outer focus ring around the thumb |
-| disabled | `disabled` | `data-disabled="true"` on the root, native `disabled`; muted track and fill, flat thumb, `cursor: not-allowed` |
+| disabled | `disabled` | `data-disabled="true"` on the root, native `disabled`; muted track and fill, a flat opaque thumb, `cursor: not-allowed` |
 | saving | `onCommit` returned a pending promise | `data-pending="true"` on the root, `aria-busy` on the input; the thumb quiets to 0.6 (`fast`, both ways); the slider stays usable — only the latest commit's answer counts |
 | refused | that promise rejected | the value goes back to the last saved one (`onValueChange` when controlled); `data-settling` glides the thumb and the fill there (`base`, emphasized) |
 
@@ -132,12 +133,14 @@ Controlled: `value` + `onValueChange`. Uncontrolled: `defaultValue` (falls back
 ## Layout & spacing
 - Fills its container; place it in a grid column to limit the width.
 - Label row → track: tier `label-gap`; label and value share a baseline, the value is pinned right. Track → hint / error: tier `hint-gap` (FieldFrame, like every field).
-- Between sliders in a form: `--prime-space-5`.
-- With a paired input: grid `minmax(0, 1fr)` + a fixed column, `align-items: end`, gap `--prime-space-4`.
+- Sliders of a form stack in a label-less [Fieldset](../fieldset/COMPONENT.md) (20 apart).
+- With a paired input: grid `minmax(0, 1fr)` + a fixed column, `align-items: end`, a 16 gap.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `ArrowRight` · `ArrowUp` | Increases the value by `step`. |
@@ -146,6 +149,8 @@ Controlled: `value` + `onValueChange`. Uncontrolled: `defaultValue` (falls back
 | `Home` · `End` | Jumps to `min` / `max`. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - A native `<input type="range">` (`role="slider"`) on top of the visual layer.
 - `label` is a `<label htmlFor>`; otherwise `aria-label` is required.
 - `orientation="vertical"` turns the native range with `writing-mode`, so ↑ / ↓ and the pointer work natively; the input has `aria-orientation="vertical"`.
@@ -183,5 +188,5 @@ Controlled: `value` + `onValueChange`. Uncontrolled: `defaultValue` (falls back
 - Saving a setting in `onValueChange` → it fires on every step of a drag; save in `onCommit`.
 
 ## Related
-- **Built from:** the field frame — [Label](../label/COMPONENT.md) (`label`) and [Hint](../hint/COMPONENT.md) (`hint`, `error`)
+- **Built from:** the field frame — [Label](../label/COMPONENT.md) (`label`) and [Hint](../hint/COMPONENT.md) (`hint`, `error`), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [ProgressBar](../progress-bar/COMPONENT.md) (the same track scale), [Input](../input/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

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

@@ -1,11 +1,10 @@
 /* Layout of the Slider scenarios: semantic tokens only. */
 
-/* hint-and-error.tsx: fields of a form column, field → field 24. */
-.column {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-6);
-  width: min(100%, var(--prime-modal-width-s));
+/* in-form.tsx: the fields (a Fieldset), then the submit row (group → actions 32). */
+.form {
+  display: grid;
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 /* controlled.tsx: the slider takes the row, the number field a fixed column. */
@@ -14,7 +13,7 @@
   grid-template-columns: minmax(0, 1fr) var(--prime-space-24);
   align-items: end;
   gap: var(--prime-space-4);
-  width: min(100%, var(--prime-modal-width-s));
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 /* orientation.tsx: upright sliders side by side, a mixer row. */

package/src/components/slider/examples/hint-and-error.tsx

@@ -1,14 +1,12 @@
 /** A slider framed like every field: required marker, a hint, and an error in its place — `required`, `hint`, `error`, `optional`. */
-import { Slider } from "prime-ui-kit";
+import { Fieldset, Slider } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 export default function SliderHintAndErrorExample() {
   const [budget, setBudget] = React.useState(80);
 
   return (
-    <div className={styles.column}>
+    <Fieldset aria-label="Бюджет кампании">
       <Slider
         label="Бюджет кампании, тыс. ₽"
         required
@@ -28,6 +26,6 @@ export default function SliderHintAndErrorExample() {
         defaultValue={30}
         hint="По умолчанию показы распределяются равномерно"
       />
-    </div>
+    </Fieldset>
   );
 }