prime-ui-kit 0.18.0 → 0.19.0

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

@@ -1,15 +1,39 @@
-/** Funnel stages in the team's order: a stage moves by its handle or Alt+arrows and is saved on the server — `onReorder`, `value`. */
-import { Card, List, moveBefore } from "prime-ui-kit";
+/** Funnel stages in the team's order: a stage moves by its handle or Alt+arrows and is saved on the server; its switch leads the row, the grip ends it — `onReorder`, `value`, `side`. */
+import { Card, List, moveBefore, Switch } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 const STAGES = [
-  { id: "lead", name: "Новый лид", description: "Заявка с сайта или от партнёра", deals: 42 },
-  { id: "qualified", name: "Квалификация", description: "Бюджет и сроки подтверждены", deals: 18 },
-  { id: "proposal", name: "Коммерческое предложение", description: "КП отправлено", deals: 11 },
-  { id: "contract", name: "Договор", description: "Согласование с юристами", deals: 6 },
-  { id: "won", name: "Оплата", description: "Счёт выставлен", deals: 3 },
+  {
+    id: "lead",
+    name: "Новый лид",
+    description: "Заявка с сайта или от партнёра",
+    deals: 42,
+    shown: true,
+  },
+  {
+    id: "qualified",
+    name: "Квалификация",
+    description: "Бюджет и сроки подтверждены",
+    deals: 18,
+    shown: true,
+  },
+  {
+    id: "proposal",
+    name: "Коммерческое предложение",
+    description: "КП отправлено",
+    deals: 11,
+    shown: true,
+  },
+  {
+    id: "contract",
+    name: "Договор",
+    description: "Согласование с юристами",
+    deals: 6,
+    shown: true,
+  },
+  { id: "won", name: "Оплата", description: "Счёт выставлен", deals: 3, shown: false },
 ];
 
 const SAVE_DELAY_MS = 600;
@@ -36,6 +60,17 @@ export default function ListReorderExample() {
         >
           {stages.map((stage) => (
             <List.Item key={stage.id} value={stage.id}>
+              <List.ItemActions side="start">
+                <Switch.Root
+                  aria-label={`Показывать «${stage.name}» на доске`}
+                  checked={stage.shown}
+                  onCheckedChange={(shown) =>
+                    setStages((current) =>
+                      current.map((item) => (item.id === stage.id ? { ...item, shown } : item)),
+                    )
+                  }
+                />
+              </List.ItemActions>
               <List.ItemText>{stage.name}</List.ItemText>
               <List.ItemDescription>{stage.description}</List.ItemDescription>
               <List.ItemCount>{stage.deals}</List.ItemCount>

package/src/components/modal/COMPONENT.md

@@ -84,7 +84,7 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other attributes of the `<header>`. |
 
 ### Modal.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; or at the end of a `Modal.Section` heading. Controls inside take tier `s`.
+`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown; under the title when it would get less than 12rem; or at the end of a `Modal.Section` heading. Controls inside take tier `s`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -99,12 +99,20 @@ No DOM, no ref. State and dismiss policy.
 | `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. |
 
-### Modal.Title · Modal.Description
-`ref` → `HTMLHeadingElement` / `HTMLParagraphElement`. `<h2>` (title-m) / `<p>` (body-s, muted); their ids name and describe the dialog.
+### Modal.Title
+`ref` → `HTMLHeadingElement`. `<h2>` (title-m); its id names the dialog.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `…rest` | `Omit<HTMLAttributes<HTMLHeadingElement \| HTMLParagraphElement>, "id">` | — | `className`, `children` and the other attributes except `id` (the dialog owns it). |
+| `…rest` | `Omit<HTMLAttributes<HTMLHeadingElement>, "id">` | — | `className`, `children` and the other attributes except `id` (the dialog owns it). |
+
+### Modal.Description
+`ref` → `HTMLParagraphElement`. `<p>` (body-s, muted) under the title; its id describes the dialog.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `loading` | `boolean` | `false` | Its data loads: a `Skeleton` holds the line's place and `aria-busy` is set, so the header never moves; the data fades in. |
+| `…rest` | `Omit<HTMLAttributes<HTMLParagraphElement>, "id">` | — | `className`, `children` and the other attributes except `id` (the dialog owns it). |
 
 ### Modal.Body
 `ref` → `HTMLDivElement`. The only scrolling zone (a ScrollContainer), 16 gap between blocks.
@@ -114,7 +122,7 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the zone. |
 
 ### Modal.Section
-`ref` → `HTMLElement`. A titled `<section>` of the body: an `<h3>` (title-s, under the `<h2>` title), an optional description, a `Modal.Actions` at the end of the heading row; the content 16 below, sections 32 apart. Fields group in a `Fieldset`.
+`ref` → `HTMLElement`. A titled `<section>` of the body: an `<h3>` (title-s, under the `<h2>` title), an optional description, a `Modal.Actions` at the end of the heading row; the content 16 below, sections 32 apart, in any wrapper. Fields group in a `Fieldset`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -127,7 +135,7 @@ No DOM, no ref. State and dismiss policy.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `layout` | `"fill" \| "end"` | `"fill"` for `xs` `s` `m`, `"end"` for `l` `xl` | `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. |
+| `layout` | `"fill" \| "end"` | `"fill"` for `xs` `s` `m`, `"end"` for `l` `xl` | `fill`: equal-width buttons in one row, wrapping rather than cutting a label; `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>`. |
 
 ### Modal.Meta
@@ -138,7 +146,7 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLParagraphElement>` | — | `className`, `children` and the other attributes of the `<p>`. |
 
 ### Modal.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.
+No DOM, no ref. Holds the dialog from anywhere inside Content, where the form state lives; renders only the built-in «discard changes?» confirm. While `busy` or `dirty` the browser also asks before the tab closes or reloads. Closing from code is never held.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -175,7 +183,7 @@ Below 640px of viewport a centred dialog of every size becomes a full-width bott
 ### layout (Footer)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `fill` | Equal-width buttons in one row, gap 12 | Narrow dialogs with two actions | for `xs`, `s`, `m` |
+| `fill` | Equal-width buttons in one row, gap 12; never narrower than their labels — when they do not fit, the last ones wrap to a row of their own | Narrow dialogs with two actions | for `xs`, `s`, `m` |
 | `end` | Auto-width buttons at the end, gap 8 | Wide dialogs | for `l`, `xl` |
 
 With a `Modal.Meta` the footer is a row in any layout: the status takes the free room at the start, the buttons keep their width at the end and stay one row — when the footer runs short the status goes above them first. On phones (viewport below 640px, where the dialog is a bottom sheet) and in a dialog narrower than 360px, actions stack full width in DOM order (primary last), the status above them.
@@ -218,6 +226,9 @@ Around the record's picture — an `Avatar.Root` or a `Thumbnail.Root` (found by
 | closing | `open` turns false | the dialog keeps showing the children it had open while the exit motion plays |
 | busy | `Modal.Guard busy` | Escape, the scrim, a swipe, the close button and `Modal.Close` do nothing; the close button and the `Close` child are `disabled` in place |
 | dirty | `Modal.Guard dirty` | a dismiss opens the «Не сохранять изменения?» ConfirmDialog (`labels.discard*`); its confirm closes the dialog; a swipe past the threshold glides back and asks the same |
+| leaving the tab | `Modal.Guard busy` or `dirty` | the browser asks before the tab closes or reloads (`beforeunload`), as with `Page.Guard` |
+| description loading | `Modal.Description loading` | a `Skeleton` holds the line, `aria-busy` on the `<p>`; the data fades in under the same element |
+| actions below | the title would get less than 12rem beside `Modal.Actions` | `data-actions-below` on the header: the actions move under the title and the description |
 | sheet | a centred dialog on a phone viewport | `data-sheet` on the dialog: the bottom-sheet surface, the grab handle while it swipes |
 | swiping | as a phone sheet, 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 dialog while the pointer drags it; past 30% of its height or on a flick it closes, otherwise it glides back; a busy `Modal.Guard` sets `data-swipe-disabled` and the handle takes no drag |
 | placement | `placement` on Content | `data-placement` on the dialog |
@@ -231,7 +242,7 @@ Motion (`overlayMotion`): the scrim fades in and out over `base`; the dialog fad
 - Max height = viewport minus `--prime-modal-viewport-padding` on both sides; only the body scrolls.
 - Tabs in the header: a `Tabs.List` inside `Modal.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 take the floating layer's fill; a card inside is the next layer (`floating-1`), a flat tile. Group fields with a 20 gap.
-- Titled groups of a long body: `Modal.Section label` — an `<h3>` under the dialog's `<h2>` title, an optional `description`, a `Modal.Actions` at the end of its heading row; content 16 below, sections 32 apart. A group of fields is a `Fieldset`.
+- Titled groups of a long body: `Modal.Section label` — an `<h3>` under the dialog's `<h2>` title, an optional `description`, a `Modal.Actions` at the end of its heading row; content 16 below, sections 32 apart — directly in the body, in a `Tabs.Panel` or in a form, with no spacing wrapper of your own. A group of fields is a `Fieldset`.
 - Narrow viewport (< 640px), `placement="center"`: the shared bottom-sheet surface (`src/internal/sheet.module.css`) — full width, rounded top, a grab handle strip on top while it swipes, up to the sheet top gap high, the bottom safe-area inset below the content.
 - `placement="top"`: the dialog hangs from a line 12% of the viewport down (between `--prime-modal-viewport-padding` and `--prime-space-24`) and grows downward.
 
@@ -285,6 +296,8 @@ Motion (`overlayMotion`): the scrim fades in and out over `base`; the dialog fad
 - A destructive confirm built as a Modal → use ConfirmDialog. A destructive step that needs input (type the name to delete) stays a Modal with `closeOnOutsideClick={false}`.
 - Primary action not in `Modal.Confirm` → Enter does nothing; wrap it. In a form, the `type="submit"` button is the primary and stays outside `Modal.Confirm`: Enter in a field submits the form.
 - Primary action first in the footer → put it last (DOM order is the visual order).
+- «Удалить» as a third footer button of an edit dialog → the footer is the dialog's answer (Cancel + the primary); deleting the record goes to the last `tone="danger"` item of a ⋯ `Dropdown` in `Modal.Actions`, confirmed by a ConfirmDialog.
+- A wrapper with its own gap around `Modal.Section`s inside a `Tabs.Panel` or a form → not needed: sections keep 32 between them in any wrapper.
 - A hand-made heading row (`Typography as="h3"` + buttons) over a group in the body → `Modal.Section label` with `Modal.Actions`.
 - Busy or unsaved state lifted out of the form into Root props → put `Modal.Guard` next to the form, inside Content.
 - `key` or a conditional around `Modal.Root` to reset a form → the dialog unmounts at once, without its exit; keep the Root mounted and drive `open`.
@@ -292,5 +305,5 @@ Motion (`overlayMotion`): the scrim fades in and out over `base`; the dialog fad
 - Long multi-section forms in a modal → use Drawer.
 
 ## Related
-- **Built from:** the dialog shared with Drawer and Sheet (`internal/overlay/DialogParts`, `internal/overlay/ModalDialog`), [Button](../button/COMPONENT.md) (header close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Modal.Body`), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (a record's picture in `Modal.Icon`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Modal.Guard` discard confirm), `Icon` (the close glyph)
+- **Built from:** the dialog shared with Drawer and Sheet (`internal/overlay/DialogParts`, `internal/overlay/ModalDialog`), [Button](../button/COMPONENT.md) (header close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Modal.Body`), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (a record's picture in `Modal.Icon`), [Skeleton](../skeleton/COMPONENT.md) (`Modal.Description loading`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Modal.Guard` discard confirm), `Icon` (the close glyph)
 - **See also:** [ConfirmDialog](../confirm-dialog/COMPONENT.md) (a destructive confirm built on Modal `s`), [Drawer](../drawer/COMPONENT.md) (the same header, body, footer and `Guard` at the edge), [Popover](../popover/COMPONENT.md), [CommandMenu](../command-menu/COMPONENT.md)

package/src/components/segmented-control/COMPONENT.md

@@ -158,14 +158,15 @@ Colour all items or none; do not give an item and its Count the same hue; prefer
 | optional | `optional` | a muted `labels.optional` marker after the label |
 | support row reserved | `reserveSupportRow` | the support row stays rendered while empty, so an error arriving shifts nothing |
 | focus-visible | keyboard | focus ring inside the segment |
-| collapsed | row wider than the container and every segment has an icon | row `data-collapse="icon"`: titles, counts and descriptions leave the row, segments turn square; a `VisuallyHidden` copy of the title names each segment and a `Tooltip` shows it |
+| compact | row wider than the container at the tier's padding | row `data-collapse="compact"`: single-line segments tighten their padding by one step, so a row a few pixels too wide keeps its last segment and count whole; if it still does not fit (and not every segment has an icon) it scrolls |
+| collapsed | even the compact row does not fit and every segment has an icon | row `data-collapse="icon"`: titles, counts and descriptions leave the row, segments turn square; a `VisuallyHidden` copy of the title names each segment and a `Tooltip` shows it |
 | overflow | row still wider than the container | root `data-overflow-start` / `data-overflow-end`: edge fades in the track color |
 
 Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `data-value`, `data-color`. The thumb (the shared selection indicator) glides (`emphasized` + `base`, `data-animate`) only into a user's choice (click, arrows); a value set from outside and layout changes snap it; it stays still under `prefers-reduced-motion`. It sits inside the segment track, which clips it, so moving the selection never changes the row's scroll area. When the row scrolls, the selected segment is kept in view on mount and on every value change: only the row scrolls, never the page, and the scroll glides only after a user's choice.
 
 ## Layout & spacing
 - In a form it is a field: label → track `label-gap`, track → support row `hint-gap`, field → field `--prime-space-5` like every field.
-- Width is content-based by default; the row is a switcher (foundation §9): segments never wrap or truncate. In a narrow container segments with icons drop their titles first, then the row scrolls horizontally with fading edges.
+- Width is content-based by default; the row is a switcher (foundation §9): segments never wrap or truncate. In a narrow container the segments first tighten their padding, then segments with icons drop their titles, then the row scrolls horizontally with fading edges.
 - Without `size` the control takes the tier of its host (a toolbar, a form), else `m`.
 - On a coarse pointer each segment's hit area grows to the 44 px touch target in height; the track keeps its tier height.
 - In a toolbar: gap `--prime-space-3` between controls; keep every control at one size.

package/src/components/sheet/COMPONENT.md

@@ -77,7 +77,7 @@ No DOM, no ref. State and dismiss policy.
 | `…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`.
+`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown; under the title when it would get less than 12rem. Controls inside take tier `s`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -92,12 +92,20 @@ No DOM, no ref. State and dismiss policy.
 | `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.
+### Sheet.Title
+`ref` → `HTMLHeadingElement`. `<h2>` (title-m); its id names the dialog.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `…rest` | `Omit<HTMLAttributes<HTMLHeadingElement \| HTMLParagraphElement>, "id">` | — | `className`, `children` and the other attributes except `id` (the dialog owns it). |
+| `…rest` | `Omit<HTMLAttributes<HTMLHeadingElement>, "id">` | — | `className`, `children` and the other attributes except `id` (the dialog owns it). |
+
+### Sheet.Description
+`ref` → `HTMLParagraphElement`. `<p>` (body-s, muted) under the title; its id describes the dialog.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `loading` | `boolean` | `false` | Its data loads: a `Skeleton` holds the line's place and `aria-busy` is set, so the header never moves; the data fades in. |
+| `…rest` | `Omit<HTMLAttributes<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.
@@ -111,7 +119,7 @@ No DOM, no ref. State and dismiss policy.
 
 | 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. |
+| `layout` | `"fill" \| "end"` | `"end"` | `fill`: equal-width buttons in one row, wrapping rather than cutting a label; `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
@@ -122,7 +130,7 @@ No DOM, no ref. State and dismiss policy.
 | `…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.
+No DOM, no ref. Holds the dialog from anywhere inside Content, where the form state lives; renders only the built-in «discard changes?» confirm. While `busy` or `dirty` the browser also asks before the tab closes or reloads. Closing from code is never held.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -165,6 +173,9 @@ Sheet has no `variant`, `side` or `size`: it always rises from the bottom edge,
 | 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; 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 |
+| leaving the tab | `Sheet.Guard busy` or `dirty` | the browser asks before the tab closes or reloads (`beforeunload`), as with `Page.Guard` |
+| description loading | `Sheet.Description loading` | a `Skeleton` holds the line, `aria-busy` on the `<p>`; the data fades in under the same element |
+| actions below | the title would get less than 12rem beside `Sheet.Actions` | `data-actions-below` on the header: the actions move under the title and the description |
 
 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.
 
@@ -237,5 +248,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:** 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)
+- **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`), [Skeleton](../skeleton/COMPONENT.md) (`Sheet.Description loading`), [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/layout/page/COMPONENT.md

@@ -12,7 +12,7 @@
 - A nested record: a `Breadcrumb` path in `Page.Heading`; in the bar the title reads as its last level.
 - A text page held to a reading measure (`maxWidth="readable"`), a wide dashboard capped at the content width (`maxWidth="wide"`).
 - The tiles of a dashboard — KPI cards, charts, panels — as one board (`Page.Grid` + `Page.Cell`).
-- A new topic of the page with its own heading and a link or button beside it (`Page.Section`); a settings page with a heading column beside each panel (`layout="aside"`).
+- A new topic of the page with its own heading and a link or button beside it (`Page.Section`, the heading over its content).
 - A page whose body takes the rest of the panel's height — a log table, a board, a chat (`fill`).
 - Mail, a messenger, a ticket queue: a list and the chosen record side by side, one at a time on a narrow panel (`Page.Split`).
 - A form that is the whole page (a record's editor, settings with one save): `Page.Guard dirty busy` holds leaving it through the navigation, the path and the browser.
@@ -20,7 +20,7 @@
 ## When not to use
 - The app frame (navigation rail, scrolling main, phone footer) → use [AppShell](../app-shell/COMPONENT.md); there is no global app header — a bar belongs to its page.
 - A search across the whole app → a page of its own or a [CommandMenu](../../components/command-menu/COMPONENT.md); the top bar carries only what its page needs.
-- A bounded block inside the page → use [Card](../../components/card/COMPONENT.md).
+- A bounded block inside the page, a titled panel of a settings page included → use [Card](../../components/card/COMPONENT.md) with its own `Card.Header`.
 - An empty / error / not-found page → use [EmptyPage](../../components/empty-page/COMPONENT.md).
 - A heading inside a card → `Card.Title`; text headings inside prose → use [Typography](../../components/typography/COMPONENT.md).
 - A grid inside one block (thumbnails, fields, bars in a panel) → the block's own CSS grid; `Page.Grid` places the page's tiles.
@@ -155,7 +155,6 @@ Page.Root                          the page column (<div>); maxWidth, fill, labe
 |---|---|---|---|
 | `label` | `ReactNode` | — (required) | The visible heading (`h2`); it also names the section. |
 | `description` | `ReactNode` | — | One line of context under the heading, in secondary body-s. |
-| `layout` | `"stack" \| "aside"` | `"stack"` | `stack` — the heading over the content; `aside` — a ~16rem heading column beside it (a settings page), above it once the content would get narrower than 30rem. |
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "title">` | — | `children` (the content; `Page.Actions` goes to the heading row), `className` and the other section attributes. |
 
 ### Page.Grid
@@ -239,12 +238,6 @@ The size follows the place; the consumer passes nothing, and there are no title
 | `dirty` (Guard) | nothing until a person leaves: a press on the navigation or the path asks «leave without saving?» | a form that is the page has unsaved changes | `false` |
 | `busy` (Guard) | nothing until a person leaves: a press on the navigation or the path does nothing | the page's save request runs | `false` |
 
-### layout (Section)
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `stack` | the heading row over the content, 16 apart | a topic of a dashboard, a list or a detail page | ✓ |
-| `aside` | a ~16rem heading column beside the content, above it once the content would get < 30rem | a settings page: a heading column beside each panel | |
-
 ### Top bar plan
 One plan, chosen from the natural widths of the groups (`data-plan` on the bar's row). The bar takes the first step whose first line fits:
 
@@ -288,7 +281,6 @@ A wide cell (`span` 7–11) written next to a narrow one (`span` 4–5) is a pai
 | folded buttons | plan `fold` | the secondary Buttons' wrappers `hidden`; a «⋯» Dropdown in their place, their `menuitem`s inside |
 | heading place | inside TopBar or in the flow | `data-place="bar" \| "flow"` on Heading |
 | with actions | `Page.Actions` child | `data-has-actions="true"` on Header / the section heading row |
-| section heading column | `layout="aside"` on Section | `data-layout="aside"` on Section (absent for `stack`) |
 | tile span | `span` / `rows` on Cell | `data-span="1"…"12"` (always), `data-rows="2"…"4"` (absent for 1) |
 | tile pair | a `span` 7–11 Cell next to a `span` 4–5 Cell in the Grid | `data-pair="wide" \| "narrow"` on both Cells (set by the Grid) |
 | held | `Page.Guard` `busy` or `dirty` | a press on a `Sidebar.Item`, `Sidebar.Brand`, `BottomNav.Item` or `Breadcrumb.Item` link is stopped (capture phase, before the item's and the router link's handlers); `dirty` opens the `ConfirmDialog` and its confirm repeats the press once the dialog has closed (its texts are the `leave*` keys of `labels` on `Page.Root`); a `beforeunload` listener while either is on. A press that opens a new tab (a modifier key, a middle click, `target="_blank"`) and navigation from code are never held |
@@ -349,12 +341,12 @@ A wide cell (`span` 7–11) written next to a narrow one (`span` 4–5) is a pai
 | [collapse.tsx](examples/collapse.tsx) | An overview whose large title scrolls away under the top bar: the bar repeats it with its line of data and keeps the period and the page's buttons in reach — `collapse`. |
 | [tools.tsx](examples/tools.tsx) | The orders page's tools in its top bar: sections with counts, search and filter, the period, in the order written; the active filters on a line under everything — `Page.Tools`, `Page.Chips`. |
 | [actions-collapse.tsx](examples/actions-collapse.tsx) | The buttons of an invoices page on a tablet-wide column: the line runs short, so the secondary buttons show only their icons with the label as the name and the tooltip, the primary keeps its label — `Page.Actions`, `Button.Icon`. |
-| [sections.tsx](examples/sections.tsx) | A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `Page.Section`, `label`, `description`, `Page.Actions`, `layout`. |
+| [sections.tsx](examples/sections.tsx) | A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading — `Page.Section`, `label`, `description`, `Page.Actions`. |
 | [grid.tsx](examples/grid.tsx) | A dashboard board: four KPI tiles, a chart two rows high beside two panels, one gap on both axes — `Page.Grid`, `Page.Cell`, `span`, `rows`. |
 | [list-detail.tsx](examples/list-detail.tsx) | A ticket queue as list + detail on a full-height page: side by side on a wide panel, one pane at a time with a back button on a narrow one; the chosen ticket cross-fades in — `Page.Split`, `Page.List`, `Page.Detail`, `Page.BackButton`, `fill`. |
 | [guard.tsx](examples/guard.tsx) | A client's card edited on its own page: after an edit a press on the navigation or the path asks before the changes are lost, and while it saves nothing leaves — `Page.Guard`, `dirty`, `busy`. |
 | [narrow.tsx](examples/narrow.tsx) | On a phone the top bar leads with the menu button that opens the navigation by itself, the primary button gives way to its icon and the secondary ones fold into «⋯» — `offCanvas`, `Page.Actions`. |
-| [screen.tsx](examples/screen.tsx) | A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, sections with a heading column and a panel, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `layout`, `maxWidth`. |
+| [screen.tsx](examples/screen.tsx) | A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, each section a card with its own heading, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `maxWidth`, `Card.Header`. |
 
 ## Mistakes
 - `{ready ? <Page.Description>…</Page.Description> : null}` → the line appears after the load and the title jumps; keep it mounted with `loading` until the data comes.
@@ -371,6 +363,7 @@ A wide cell (`span` 7–11) written next to a narrow one (`span` 4–5) is a pai
 - Hiding buttons with media queries on a phone → `Page.Actions` in the bar collapses and folds them by measured width.
 - Wrapping a group of the bar or `Page.Title` in your own component → the bar and the heading find their parts among their direct children.
 - A hand-made `<section>` + `Typography as="h2"` + own gap CSS → `Page.Section label`.
+- A heading column beside a panel (the section's title and description on the left, its card on the right) → it wastes the width and breaks the reading line; a titled block is a `Card.Root` with its own `Card.Header` (`Card.Title as="h2"`, `Card.Description`) stacked in the flow.
 - Each row of cards in its own grid → put every tile of the screen in one `Page.Grid`.
 - Computing a height from `100vh` minus the bar for a full-height table or chat → `Page.Root fill` and a filling child.
 - A list + detail built with window media queries → `Page.Split` follows its own width.

package/src/layout/page/examples/screen.module.css

@@ -1,4 +1,4 @@
-/* Settings page: each section is a Page.Section layout="aside"; here only the panels' insides. */
+/* Settings page: each section is a Card with its own header; here only the cards' insides. */
 
 /* Field → field 20. */
 

package/src/layout/page/examples/screen.tsx

@@ -1,4 +1,4 @@
-/** A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, sections with a heading column and a panel, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `layout`, `maxWidth`. */
+/** A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, each section a card with its own heading, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `maxWidth`, `Card.Header`. */
 import {
   Breadcrumb,
   Button,
@@ -88,118 +88,107 @@ export default function PageScreenExample() {
         </Page.Heading>
       </Page.Header>
       <Page.Body>
-        <Page.Section
-          layout="aside"
-          label="Компания"
-          description="Попадают в счета, акты и письма клиентам."
-        >
-          <form noValidate onSubmit={save} onReset={() => setInnError(undefined)}>
-            <Card.Root variant="panel">
-              <Card.Body>
-                <Fieldset disabled={saving}>
-                  <Input.Root label="Название">
+        <form noValidate onSubmit={save} onReset={() => setInnError(undefined)}>
+          <Card.Root variant="panel">
+            <Card.Header>
+              <Card.Title as="h2">Компания</Card.Title>
+              <Card.Description>Попадают в счета, акты и письма клиентам.</Card.Description>
+            </Card.Header>
+            <Card.Body>
+              <Fieldset disabled={saving}>
+                <Input.Root label="Название">
+                  <Input.Wrapper>
+                    <Input.Field name="name" defaultValue="ООО «Прайм Софт»" />
+                  </Input.Wrapper>
+                </Input.Root>
+                <div className={styles.pair}>
+                  <Input.Root label="ИНН" error={innError} hint="10 или 12 цифр" reserveSupportRow>
                     <Input.Wrapper>
-                      <Input.Field name="name" defaultValue="ООО «Прайм Софт»" />
+                      <Input.Field name="inn" inputMode="numeric" defaultValue="7704512908" />
                     </Input.Wrapper>
                   </Input.Root>
-                  <div className={styles.pair}>
-                    <Input.Root
-                      label="ИНН"
-                      error={innError}
-                      hint="10 или 12 цифр"
-                      reserveSupportRow
-                    >
-                      <Input.Wrapper>
-                        <Input.Field name="inn" inputMode="numeric" defaultValue="7704512908" />
-                      </Input.Wrapper>
-                    </Input.Root>
-                    <Select.Root label="Часовой пояс" defaultValue="Europe/Moscow">
-                      <Select.Trigger>
-                        <Select.Value />
-                      </Select.Trigger>
-                      <Select.Content searchable>
-                        {TIMEZONES.map((zone) => (
-                          <Select.Item key={zone.value} value={zone.value}>
-                            {zone.label}
-                          </Select.Item>
-                        ))}
-                      </Select.Content>
-                    </Select.Root>
-                  </div>
-                  <Textarea.Root
-                    name="address"
-                    label="Юридический адрес"
-                    optional
-                    rows={2}
-                    defaultValue="125009, Москва, ул. Тверская, д. 7, офис 412"
-                  />
-                </Fieldset>
-              </Card.Body>
-              <Card.Footer>
-                <Button.Root type="reset" variant="ghost" tone="neutral" disabled={saving}>
-                  Отменить изменения
-                </Button.Root>
-                <Button.Root type="submit" loading={saving}>
-                  {saved ? "Сохранено" : "Сохранить"}
-                </Button.Root>
-              </Card.Footer>
-            </Card.Root>
-          </form>
-        </Page.Section>
-
-        <Page.Section
-          layout="aside"
-          label="Уведомления"
-          description="Включаются сразу, без сохранения."
-        >
-          <Card.Root variant="panel">
-            <Card.Body>
-              <Fieldset aria-label="Уведомления">
-                {ALERTS.map((alert) => (
-                  <Switch.Root
-                    key={alert.name}
-                    name={alert.name}
-                    defaultChecked={alert.defaultChecked}
-                    hint={alert.hint}
-                  >
-                    <Switch.Label>{alert.label}</Switch.Label>
-                  </Switch.Root>
-                ))}
+                  <Select.Root label="Часовой пояс" defaultValue="Europe/Moscow">
+                    <Select.Trigger>
+                      <Select.Value />
+                    </Select.Trigger>
+                    <Select.Content searchable>
+                      {TIMEZONES.map((zone) => (
+                        <Select.Item key={zone.value} value={zone.value}>
+                          {zone.label}
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Root>
+                </div>
+                <Textarea.Root
+                  name="address"
+                  label="Юридический адрес"
+                  optional
+                  rows={2}
+                  defaultValue="125009, Москва, ул. Тверская, д. 7, офис 412"
+                />
               </Fieldset>
             </Card.Body>
+            <Card.Footer>
+              <Button.Root type="reset" variant="ghost" tone="neutral" disabled={saving}>
+                Отменить изменения
+              </Button.Root>
+              <Button.Root type="submit" loading={saving}>
+                {saved ? "Сохранено" : "Сохранить"}
+              </Button.Root>
+            </Card.Footer>
           </Card.Root>
-        </Page.Section>
+        </form>
 
-        <Page.Section
-          layout="aside"
-          label="Рабочее пространство"
-          description="Действия, которые нельзя отменить."
-        >
-          <Card.Root variant="panel">
-            <Card.Body>
-              <div className={styles.danger}>
-                <div className={styles.dangerText}>
-                  <Typography variant="title-s">Удалить пространство</Typography>
-                  <Typography variant="body-s" tone="secondary">
-                    Счета, клиенты и история будут удалены для всех участников.
-                  </Typography>
-                </div>
-                <ConfirmDialog.Root
-                  title="Удалить «Прайм Софт»?"
-                  description="312 счетов, 48 клиентов и вся история удалятся без возможности восстановления."
-                  confirmLabel="Удалить пространство"
-                  onConfirm={removeWorkspace}
+        <Card.Root variant="panel">
+          <Card.Header>
+            <Card.Title as="h2">Уведомления</Card.Title>
+            <Card.Description>Включаются сразу, без сохранения.</Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <Fieldset aria-label="Уведомления">
+              {ALERTS.map((alert) => (
+                <Switch.Root
+                  key={alert.name}
+                  name={alert.name}
+                  defaultChecked={alert.defaultChecked}
+                  hint={alert.hint}
                 >
-                  <ConfirmDialog.Trigger>
-                    <Button.Root variant="outline" tone="danger">
-                      Удалить
-                    </Button.Root>
-                  </ConfirmDialog.Trigger>
-                </ConfirmDialog.Root>
+                  <Switch.Label>{alert.label}</Switch.Label>
+                </Switch.Root>
+              ))}
+            </Fieldset>
+          </Card.Body>
+        </Card.Root>
+
+        <Card.Root variant="panel">
+          <Card.Header>
+            <Card.Title as="h2">Рабочее пространство</Card.Title>
+            <Card.Description>Действия, которые нельзя отменить.</Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <div className={styles.danger}>
+              <div className={styles.dangerText}>
+                <Typography variant="title-s">Удалить пространство</Typography>
+                <Typography variant="body-s" tone="secondary">
+                  Счета, клиенты и история будут удалены для всех участников.
+                </Typography>
               </div>
-            </Card.Body>
-          </Card.Root>
-        </Page.Section>
+              <ConfirmDialog.Root
+                title="Удалить «Прайм Софт»?"
+                description="312 счетов, 48 клиентов и вся история удалятся без возможности восстановления."
+                confirmLabel="Удалить пространство"
+                onConfirm={removeWorkspace}
+              >
+                <ConfirmDialog.Trigger>
+                  <Button.Root variant="outline" tone="danger">
+                    Удалить
+                  </Button.Root>
+                </ConfirmDialog.Trigger>
+              </ConfirmDialog.Root>
+            </div>
+          </Card.Body>
+        </Card.Root>
       </Page.Body>
     </Page.Root>
   );

package/src/layout/page/examples/sections.tsx

@@ -1,5 +1,5 @@
-/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `Page.Section`, `label`, `description`, `Page.Actions`, `layout`. */
-import { Card, DataTable, type DataTableColumn, LinkButton, Page, Typography } from "prime-ui-kit";
+/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading — `Page.Section`, `label`, `description`, `Page.Actions`. */
+import { Card, DataTable, type DataTableColumn, LinkButton, Page } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -55,19 +55,6 @@ export default function PageSectionsExample() {
           </Page.Actions>
           <DataTable columns={COLUMNS} rows={INVOICES} getRowKey={(row) => row.id} paging="none" />
         </Page.Section>
-        <Page.Section
-          layout="aside"
-          label="Реквизиты в счетах"
-          description="Попадают в каждый новый счёт."
-        >
-          <Card.Root variant="panel">
-            <Card.Body>
-              <Typography variant="body-m" tone="secondary">
-                ООО «Прайм Софт», ИНН 7701234567, р/с в Т-Банке.
-              </Typography>
-            </Card.Body>
-          </Card.Root>
-        </Page.Section>
       </Page.Body>
     </div>
   );

package/src/styles/theme-dark.css

@@ -6,7 +6,7 @@
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-950);
   --prime-color-accent-soft-hover: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 28%, transparent);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-400);
-  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-black) 50%, transparent);
+  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-black) 28%, transparent);
   --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-875) 76%, transparent);
   --prime-color-bg-glass-edge: color-mix(in srgb, var(--prime-ref-color-white) 28%, transparent);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-100);

package/src/styles/theme-light.css

@@ -69,7 +69,7 @@
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-100);
   --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
-  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-gray-925) 14%, transparent);
+  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-gray-925) 8%, transparent);
   --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-white) 72%, transparent);
   --prime-color-bg-glass-edge: color-mix(in srgb, var(--prime-ref-color-white) 85%, transparent);
   --prime-color-bg-glass-solid: var(--prime-color-layer-floating-bg);