prime-ui-kit 0.16.0 → 0.17.0

package/dist/skill/foundations.md

@@ -35,12 +35,12 @@ Things that belong together sit closer than things that do not.
 | inline controls in a row (buttons, filters) | 8 | `--prime-space-2` |
 | switch → switch in a settings list | 20 | `--prime-space-5` |
 | group → group (fieldset, form section) | 32 | `--prime-space-8` |
-| tile → tile, both axes (KPI cards, charts, panels) | 16 | `--prime-space-4` — `PageContent.Grid` already does it |
-| block → block on a page (page header → body too) | 24 | `--prime-space-6` — `PageContent` already does it |
-| section → section on a page (a new topic with an `h2`) | 40 | `PageContent.Section` already does it |
+| tile → tile, both axes (KPI cards, charts, panels) | 16 | `--prime-space-4` — `Page.Grid` already does it |
+| block → block on a page (page header → body too) | 24 | `--prime-space-6` — `Page` already does it |
+| section → section on a page (a new topic with an `h2`) | 40 | `Page.Section` already does it |
 
-`PageContent.Body` already spaces its direct blocks 24 apart, a `PageContent.Section` 40 from its
-neighbours, `PageContent.Grid` its tiles 16 on both axes, and `AppShell.Main` already carries the page
+`Page.Body` already spaces its direct blocks 24 apart, a `Page.Section` 40 from its
+neighbours, `Page.Grid` its tiles 16 on both axes, and `AppShell.Main` already hands the page its
 gutters — do not add your own outer padding.
 
 ## 3. Size axis
@@ -143,10 +143,10 @@ A chart color does one job, and the job picks the colors:
 | `body-m` | 14/20 | default text |
 | `body-l` | 16/24 | reading text |
 | `title-s` | 14/20 600 | card title, group heading inside a card or form |
-| `title-m` | 16/24 600 | page section heading (`PageContent.Section` draws it), modal title |
+| `title-m` | 16/24 600 | page section heading (`Page.Section` draws it), modal title |
 | `title-l` | 18/24 600 | large block title |
 | `heading-s` | 20/28 600 | page sub-heading |
-| `heading-m` | 24/32 600 | the title of a document page (`PageContent.Title`); an app page titles itself in `AppHeader.Title` (`title-s`) |
+| `heading-m` | 24/32 600 | the page title in the flow (`Page.Title` of a document page or an overview); in `Page.TopBar` the same `Page.Title` is `title-m` |
 | `heading-l` | 30/36 600 | marketing / auth title |
 | `display-*` | 36–60 | hero numbers only |
 | `code` | 13/20 mono | identifiers, inline code |
@@ -154,7 +154,7 @@ A chart color does one job, and the job picks the colors:
 `variant` is required on `Typography`. Weights only 400/500/600. Numbers in tables, prices, dates:
 tabular (the kit does it in DataTable `numeric` columns and `Card.Value`; your own amounts take
 `font-variant-numeric: tabular-nums`). Reading text max width `--prime-layout-reading-max-width`
-(`PageContent.Root maxWidth="readable"`).
+(`Page.Root maxWidth="readable"`).
 
 ### Text colour
 
@@ -174,7 +174,7 @@ level of air: a page with uniform 16px gaps everywhere reads as a list of unrela
   the [breakpoints and their scope](responsive.md#breakpoints), the
   [intrinsic grids](responsive.md#intrinsic-grids), what the kit adapts by itself and touch.
 - Flex children with text: `min-width: 0` + ellipsis or `overflow-wrap: anywhere`.
-- Sticky parts come from the kit: `AppHeader` (with the `PageToolbar` in `AppHeader.Tools`), the
+- Sticky parts come from the kit: `Page.TopBar` (with all its groups), the
   DataTable head and `stickyFirstColumn`, the Gantt header and first column — each sticks inside its
   own scroller, and the top ones let go on screens lower than 480px. Never a `position: sticky` bar of your own.
 

package/dist/skill/layouts.md

@@ -1,13 +1,13 @@
 # Layouts — app frame, page wrappers, auth
 
-Every screen sits in one frame: `AppShell.Root` with the Sidebar in `AppShell.Nav`, a header row and
+The app is navigation and the page: `AppShell.Root` with the Sidebar in `AppShell.Nav` and
 `AppShell.Main` (the content panel is the page, the nav rail one layer above it). The frame is the
-app's; the header row and the body are the page's — a screen renders its own `AppHeader.Root` (the
-page title and the page's tools, [composition.md](composition.md#1-page-skeleton)) and its body in
-`PageContent`.
-`AppShell.Main` carries the page gutters and `PageContent` spaces the page — blocks 24, a titled
-`PageContent.Section` 40, tiles in a `PageContent.Grid` 16 on both axes — so your code adds **no outer padding and no margins**. Your CSS only lays out the inside of a block (grids, rows) with `gap` on `--prime-space-*`.
-Main's top air under the header is part of the frame — 24, then 32 from 1024px: the page's first block
+app's; everything inside Main is the page's — a screen renders one `Page.Root` with its own top
+(`Page.TopBar`: the page title and the page's tools, [composition.md](composition.md#1-page-skeleton))
+and its body in `Page.Body`.
+`AppShell.Main` hands the page its gutters and top air and `Page` spaces it — blocks 24, a titled
+`Page.Section` 40, tiles in a `Page.Grid` 16 on both axes — so your code adds **no outer padding and no margins**. Your CSS only lays out the inside of a block (grids, rows) with `gap` on `--prime-space-*`.
+The page's top air is part of the frame — 24, then 32 from 1024px: the page's first block
 starts there; never cancel it with a negative margin or a padding override.
 
 The page recipes are whole, working screens — the `screen.tsx` example of their main component
@@ -16,14 +16,13 @@ The page recipes are whole, working screens — the `screen.tsx` example of thei
 ## App frame (once per app)
 
 The frame is the root layout and nothing else: the providers, `AppShell.Root`, the Sidebar in
-`AppShell.Nav` and `AppShell.Main` around the page. It holds no header content and no menu state:
+`AppShell.Nav` and `AppShell.Main` around the page. It holds no header and no menu state:
 
-- **The header row belongs to the page.** An `AppHeader.Root` anywhere inside the shell — the page's
-  own one, rendered at the top of its body — shows in the shell's header row; the latest one on
-  screen wins, so every page brings its own. Its row is as high as the Sidebar brand row, so the brand
-  and the title read as one line. Nothing app-wide goes into it — no global search, no notifications.
+- **Everything at the top belongs to the page.** There is no app-wide header and no global search:
+  every page renders its own `Page.TopBar` with only what it needs. Its title row is as high as the
+  Sidebar brand row, so the brand and the title read as one line.
 - **The phone menu comes with the frame.** Below 768px the Sidebar becomes an off-canvas panel
-  (`offCanvas="auto"`) and the AppHeader leads with the menu button that opens it by itself — never a
+  (`offCanvas="auto"`) and `Page.TopBar` leads with the menu button that opens it by itself — never a
   menu state or a menu button wired by hand. A trigger outside the rail (a BottomNav «Ещё», your own
   button) reads the shell's navigation with `useAppShellNav()` (`open`, `setOpen`, `navId`; see
   [the app frame screen](reference/layout/app-shell/examples/screen.tsx)).
@@ -90,37 +89,33 @@ export function AppFrame({ children }: { children: ReactNode }) {
 }
 ```
 
-Every page renders its header and its body; the header shows in the frame's header row:
+Every page renders its top and its body in one `Page.Root`:
 
 ```tsx
-import { AppHeader, PageContent } from "prime-ui-kit";
+import { Page } from "prime-ui-kit";
 
 export function OrdersPage() {
   return (
-    <>
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Заказы
-            <AppHeader.Description>128 в работе · 6 ждут оплаты</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-      </AppHeader.Root>
-      <PageContent.Root as="section">
-        <PageContent.Body>{/* the page's blocks */}</PageContent.Body>
-      </PageContent.Root>
-    </>
+    <Page.Root>
+      <Page.TopBar>
+        <Page.Heading>
+          <Page.Title>Заказы</Page.Title>
+          <Page.Description>128 в работе · 6 ждут оплаты</Page.Description>
+        </Page.Heading>
+      </Page.TopBar>
+      <Page.Body>{/* the page's blocks */}</Page.Body>
+    </Page.Root>
   );
 }
 ```
 
-A document page (settings, a long form, help) renders an `AppHeader.Root` without a title — only
-its own buttons, and on a phone the menu button the header draws — and opens its body with
-`PageContent.Header`.
+What stands in the bar — the path ending in the title, the tools, every button, the active filters —
+is [the top bar](composition.md#the-top-bar); where the title stands on a document page or an
+overview is [the page skeleton](composition.md#1-page-skeleton).
 
 With React Router the frame's `children` is `<Outlet />` and every item is `Sidebar.Item asChild`
 around a `NavLink` ([the router example](reference/layout/sidebar/examples/router.tsx)). The same frame
-as one component is `AppShell.Template` (`nav`, `footer`, the page as children); give it the
+as one component is `AppShell.Template` (`nav`, `footer`, `mainProps`, the page as children); give it the
 pathname as `scrollResetKey`, so a new page opens at the top.
 
 Phone navigation for 2–6 main sections is a `BottomNav.Root` in `AppShell.Footer` (the last child of
@@ -133,60 +128,6 @@ Next.js App Router: the package is marked `"use client"`, but a server component
 `"use client"` and render them from `app/layout.tsx` and the pages; import `bundle.css` in the root
 layout and put `data-theme` on `<html>` there.
 
-A nested record page puts the path up before its title in the header — `Breadcrumb` (the list it
-belongs to), `AppHeader.Separator`, `AppHeader.Title` with the record's name and its status as
-the description ([the detail page](reference/components/description-list/examples/screen.tsx)).
-
-### The page's tools in the header
-
-The page's tools — its own search and filters, sections, the period or view, the primary action —
-go into `AppHeader.Tools` as a `PageToolbar.Root`: the header's second row, full width, sticky with
-it. The toolbar lays itself out from that width ([the page panel](responsive.md#page-panel--pagetoolbar)),
-so the tools wrap under the title instead of squeezing it. `AppHeader.Actions` keeps the page's
-other buttons (export, a more menu) in the title row.
-
-```tsx
-import { AppHeader, Button, Icon, PageToolbar, SegmentedControl } from "prime-ui-kit";
-
-type DealsHeaderProps = { view: string; onViewChange: (view: string) => void };
-
-export function DealsHeader({ view, onViewChange }: DealsHeaderProps) {
-  return (
-    <AppHeader.Root>
-      <AppHeader.Start>
-        <AppHeader.Title>
-          Сделки
-          <AppHeader.Description>7 сделок в работе · 6 461 750 ₽</AppHeader.Description>
-        </AppHeader.Title>
-      </AppHeader.Start>
-      <AppHeader.Tools>
-        <PageToolbar.Root aria-label="Сделки">
-          <PageToolbar.Sections>
-            <SegmentedControl.Root
-              fullWidth
-              value={view}
-              onValueChange={onViewChange}
-              aria-label="Вид"
-            >
-              <SegmentedControl.Item value="board">Доска</SegmentedControl.Item>
-              <SegmentedControl.Item value="list">Список</SegmentedControl.Item>
-            </SegmentedControl.Root>
-          </PageToolbar.Sections>
-          <PageToolbar.Actions>
-            <Button.Root>
-              <Button.Icon>
-                <Icon name="action.add" />
-              </Button.Icon>
-              Новая сделка
-            </Button.Root>
-          </PageToolbar.Actions>
-        </PageToolbar.Root>
-      </AppHeader.Tools>
-    </AppHeader.Root>
-  );
-}
-```
-
 ## Navigation structure (the sidebar's content)
 
 The sidebar is the product's map: people scan it, remember where things are and come back. Build it
@@ -208,20 +149,20 @@ shows only icons); none on the children of a sub-list.
 
 ## Page wrapper
 
-- App pages (dashboard, list, detail, a board): `PageContent.Root as="section"` — the full width of
-  the panel; the page's title and tools are in its `AppHeader`, its blocks go into
-  `PageContent.Body` ([the page skeleton](composition.md#1-page-skeleton)).
-- Document pages — settings and long forms: `PageContent.Root maxWidth="wide"` with `PageContent.Header`
-  (the page's h1) and a `PageContent.Section layout="aside"`
-  (heading column + panel) per section ([the settings page](reference/components/page-content/examples/screen.tsx)), or `maxWidth="readable"` for a single
+- App pages (dashboard, list, detail, a board): `Page.Root` — the full width of the panel; the
+  page's title and tools are in its `Page.TopBar`, its blocks go into `Page.Body`
+  ([the page skeleton](composition.md#1-page-skeleton)).
+- Document pages — settings and long forms: `Page.Root maxWidth="wide"` with `Page.Header` in the
+  flow (the page's h1) and a `Page.Section layout="aside"` (heading column + panel) per section
+  ([the settings page](reference/layout/page/examples/screen.tsx)), or `maxWidth="readable"` for a single
   narrow column of fields.
-- Long reading text (terms, help): `PageContent.Root maxWidth="readable"` with `PageContent.Header`.
+- Long reading text (terms, help): `Page.Root maxWidth="readable"` with `Page.Header` in the flow.
 - A page as high as the panel (a log, a board, a chat): `AppShell.Root fillViewport` +
-  `PageContent.Root fill`; the body passes its free height to a filling child — DataTable
-  `scrollHeight="fill"`, Crossfade `fill`, `PageContent.Split`. Never compute heights from `100vh`.
-- List + detail (mail, a messenger, a ticket queue): `PageContent.Split` with `PageContent.Panel kind="list"` and
-  `PageContent.Panel kind="detail"` in a filling page. Side by side from 48rem of the split's own width, one pane
-  at a time below it with `PageContent.BackButton` first in the detail's header; `open` is «a record
+  `Page.Root fill`; the body passes its free height to a filling child — DataTable
+  `scrollHeight="fill"`, Crossfade `fill`, `Page.Split`. Never compute heights from `100vh`.
+- List + detail (mail, a messenger, a ticket queue): `Page.Split` with `Page.List` and
+  `Page.Detail` in a filling page. Side by side from 48rem of the split's own width, one pane
+  at a time below it with `Page.BackButton` first in the detail's header; `open` is «a record
   is chosen». Each pane gives its last child the free height: a Card with its own `ScrollContainer`
   (`anchor="end"` for a thread). The records in the list pane are a `List` (`current` on the open
   one), the conversations of a messenger a `ChatList`. Details that open over a table and close

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

@@ -72,7 +72,7 @@ Avatar.Group           overlapping row, gives its size to members
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### Avatar.Group
-`ref` → `HTMLDivElement`. An overlapping row (`role="group"`); members overlap by 25% with a ring in `--avatar-ring`.
+`ref` → `HTMLDivElement`. An overlapping row (`role="group"`); members overlap by an eighth of the diameter with a ring in `--avatar-ring`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -119,7 +119,7 @@ The soft fill is opaque: the soft hue is composited over the ground the avatar s
 ## Layout & spacing
 - Inline-flex, never shrinks, `vertical-align: middle`.
 - Avatar → name: space step 3 (12px) in lists and cards, step 2 (8px) in table cells.
-- Group: members overlap by 25% of the diameter with a 2px ring in the ground they stand on: the current layer of the surface around them (no surface sets anything), or `--avatar-ring` from a host whose ground is not a layer (a reaction chip sets its own fill); the fills of initials and «+N» are composited over the same ground.
+- Group: members overlap by an eighth of the diameter (initials are never cut) with a 2px ring in the ground they stand on: the current layer of the surface around them (no surface sets anything), or `--avatar-ring` from a host whose ground is not a layer (a reaction chip sets its own fill); the fills of initials and «+N» are composited over the same ground.
 - An icon fallback is half the diameter: a kit `Icon` reads `--prime-icon-size`, a raw svg too.
 
 ## Accessibility

package/dist/skill/reference/components/avatar/examples/team-group.tsx

@@ -28,7 +28,7 @@ const MEMBERS: { name: string; initials: string; color: PaletteColor; src?: stri
 
 export default function AvatarTeamGroupExample() {
   return (
-    <Avatar.Group size="s" aria-label="Участники проекта: 7">
+    <Avatar.Group size="l" aria-label="Участники проекта: 7">
       {MEMBERS.map((member) => (
         <Avatar.Root key={member.initials} color={member.color} aria-label={member.name}>
           {member.src ? <Avatar.Image src={member.src} /> : null}

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

@@ -29,8 +29,8 @@ Banner.Root                 <div>; variant, tone, size, placement
 │  ├─ Banner.Icon           one Icon on the first line (aria-hidden)
 │  ├─ Banner.Title
 │  ├─ Banner.Description
-│  └─ Banner.Actions        buttons; with onDismiss the close button is last here
-└─ close button             with onDismiss and no Actions: ghost icon Button (tone="inherit"), top-right
+│  └─ Banner.Actions        buttons; with onDismiss the close button is last here (wide banner)
+└─ close button             with onDismiss and no Actions, or Actions under the text: ghost icon Button (tone="inherit"), top-right
 ```
 
 ## API
@@ -72,7 +72,7 @@ Banner.Root                 <div>; variant, tone, size, placement
 | `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
 
 ### Banner.Actions
-`ref` → `HTMLDivElement`. A `<div>` row of buttons; with `onDismiss` the close button becomes its last square button.
+`ref` → `HTMLDivElement`. A `<div>` row of buttons; with `onDismiss` the close button becomes its last square button (in the corner below 36rem).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -115,7 +115,7 @@ Banner.Root                 <div>; variant, tone, size, placement
 |---|---|---|
 | look | `variant`, `tone`, `size`, `placement` | `data-variant`, `data-tone`, `data-size`, `data-placement` |
 | dismissible | `onDismiss` | corner ghost Button (`xs`, `s` on `l` / `xl`), or the last outline Button in `Banner.Actions` |
-| narrow | own width < 36rem (a banner with `Banner.Actions` is a size container) | actions move under the text |
+| narrow | own width < 36rem (a banner with `Banner.Actions` is a size container) | actions move under the text; the close button returns to the corner |
 
 No `open` prop: the parent mounts and unmounts the banner. A mounted banner enters (a short fade and rise); an unmounted one closes up in place, so the content below glides up instead of jumping. To swap the banner for another block in the same spot (a «restore» button), wrap both in [Crossfade](../crossfade/COMPONENT.md).
 

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

@@ -8,7 +8,8 @@
   min-width: 0;
 }
 
-/* page-strip.tsx: the page strip above a card with an inset banner. */
+/* page-strip.tsx: a page — the strip spans its whole width, the content below keeps the page's
+   side padding, so the strip reads wider than the card with the inset banner. */
 .sections {
   display: flex;
   flex-direction: column;
@@ -17,6 +18,10 @@
   min-width: 0;
 }
 
+.pageBody {
+  padding-inline: var(--prime-layout-gutter);
+}
+
 /* narrow.tsx: a 320px column; the banner's container query moves actions under the text. */
 .narrow {
   width: min(100%, calc(var(--prime-space-20) * 4));

package/dist/skill/reference/components/banner/examples/page-strip.tsx

@@ -6,7 +6,7 @@ import styles from "./examples.module.css";
 export default function BannerPageStripExample() {
   return (
     <div className={styles.sections}>
-      {/* In an app the strip stands first in the page, edge to edge above its content. */}
+      {/* In an app the strip stands first in the page, edge to edge above its padded content. */}
       <Banner.Root
         tone="warning"
         placement="page"
@@ -21,27 +21,29 @@ export default function BannerPageStripExample() {
           <Banner.Title>Пробный период закончится 12 октября</Banner.Title>
         </Banner.Content>
       </Banner.Root>
-      <Card.Root variant="panel">
-        <Card.Header>
-          <Card.Title>Оплата</Card.Title>
-        </Card.Header>
-        <Card.Body>
-          <Banner.Root tone="danger">
-            <Banner.Content>
-              <Banner.Icon>
-                <Icon name="status.danger" />
-              </Banner.Icon>
-              <Banner.Title>Не удалось списать оплату</Banner.Title>
-              <Banner.Description>
-                Карта •••• 4242 отклонена банком. Обновите способ оплаты до 15 октября.
-              </Banner.Description>
-              <Banner.Actions>
-                <Button.Root tone="danger">Обновить карту</Button.Root>
-              </Banner.Actions>
-            </Banner.Content>
-          </Banner.Root>
-        </Card.Body>
-      </Card.Root>
+      <div className={styles.pageBody}>
+        <Card.Root variant="panel">
+          <Card.Header>
+            <Card.Title>Оплата</Card.Title>
+          </Card.Header>
+          <Card.Body>
+            <Banner.Root tone="danger">
+              <Banner.Content>
+                <Banner.Icon>
+                  <Icon name="status.danger" />
+                </Banner.Icon>
+                <Banner.Title>Не удалось списать оплату</Banner.Title>
+                <Banner.Description>
+                  Карта •••• 4242 отклонена банком. Обновите способ оплаты до 15 октября.
+                </Banner.Description>
+                <Banner.Actions>
+                  <Button.Root tone="danger">Обновить карту</Button.Root>
+                </Banner.Actions>
+              </Banner.Content>
+            </Banner.Root>
+          </Card.Body>
+        </Card.Root>
+      </div>
     </div>
   );
 }

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

@@ -32,7 +32,7 @@ Breadcrumb.Root           <nav aria-label> + <ol>; size; chevrons between levels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Breadcrumb.Root
-`ref` → `HTMLElement` (the `<nav>`). `<nav aria-label>` with an `<ol>`; draws the chevrons between levels, sets the size and, on narrow containers, collapses the middle levels into a «…» menu button that lists them.
+`ref` → `HTMLElement` (the `<nav>`). `<nav aria-label>` with an `<ol>`; draws the chevrons between levels, sets the size and folds levels that do not fit into a «…» menu button that lists them: the middle ones, then the first one too.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -85,15 +85,16 @@ Use links for every ancestor and `current` on the last item; `s` above a `headin
 |---|---|---|
 | current | `current` | `aria-current="page"` on the text span, or on the link when the item has `href` |
 | hover / focus-visible on links | pointer / keyboard | text → primary; focus ring from LinkButton |
-| truncation | width | each level truncates with an ellipsis, max width `2 × --prime-space-24` (192; `--prime-space-24 + --prime-space-6`, 120, when its container is below 30rem — its own for 3+ levels, the nearest one above for 1–2); the last item shrinks last |
-| auto-collapse | 3+ levels and a container `< 30rem` | `data-collapsible="true"`; middle levels are `display: none` and replaced by «… ›»: a ghost menu button (`Dropdown.Trigger`, named by `labels.ellipsis`) whose menu lists them — links stay links, a level without `href` is a disabled row |
+| truncation | width | each level truncates with an ellipsis, max width `2 × --prime-space-24` (192); the current page shrinks at half the rate of the others |
+| auto-collapse | 2+ levels whose whole path does not fit the width uncut (measured on every resize) | `data-collapsible="true"`, `data-collapsed="true"`; middle levels are `display: none` and replaced by «… ›»: a ghost menu button (`Dropdown.Trigger`, named by `labels.ellipsis`) whose menu lists them — links stay links, a level without `href` is a disabled row |
+| deep collapse | the path folded as above still does not fit | `data-collapsed="deep"`; the first level folds too: «…» › current page, the menu lists every level before it |
 | collapse menu open | a press, `Enter` or `ArrowDown` on the «…» | `aria-expanded="true"` on the button; a `role="menu"` panel at the tier size |
 
-Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
+Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`), `data-collapsed` (`"true"` / `"deep"`).
 
 ## Layout & spacing
-- A path of 1–2 levels takes its content width (at most the row), so in a flex row — the `AppHeader` start, before `AppHeader.Separator` and the title — what follows stands right after it. A path of 3+ levels is a size container (`container-type: inline-size`, `inline-size: 100%`) that folds its middle levels by its own width: inside a flex row give it `flex: 1 1 auto; min-width: 0`.
-- In an `AppHeader` the path up holds the list a record belongs to (1–2 levels); the record itself is the `AppHeader.Title` after the separator, not the breadcrumb's `current` item.
+- A single level takes its content width (at most the row). A path of 2+ levels fills the row (`inline-size: 100%`) and folds by that width, so a wider row unfolds it again; its intrinsic width stays the whole path, so a host that measures natural widths (the `Page.TopBar` plan) reads it uncut. Inside a flex row give it a box that takes the room it may use (`flex: 1 1 auto; min-width: 0`).
+- In a `Page.Heading` the path up holds the list a record belongs to (1–2 levels); the record itself is the `Page.Title` (in a top bar the path's last level, after the chevron), not the breadcrumb's `current` item.
 - Above a page title: `gap: var(--prime-space-2)` between the trail and the title row.
 - The list never wraps. Chevrons sit inside each level after the first, in the placeholder text color, at the tier icon size.
 
@@ -113,7 +114,7 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 
 - `nav` landmark with `aria-label` from `labels.nav`; an ordered list.
 - The current page has `aria-current="page"`; the chevrons are `aria-hidden` spans inside the levels, so every list item is a level.
-- Collapsed middle levels leave the layout and the tab order (no invisible focus stops); the automatic «…» is a menu button (`aria-haspopup="menu"`) named by `labels.ellipsis`, and its menu lists them as links.
+- Collapsed levels leave the layout and the tab order (no invisible focus stops); the automatic «…» is a menu button (`aria-haspopup="menu"`) named by `labels.ellipsis`, and its menu lists them as links.
 - Icon-only links need `aria-label` on the Item.
 
 ### Labels
@@ -141,4 +142,4 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 
 ## Related
 - **Built from:** [LinkButton](../link-button/COMPONENT.md) (`tone="muted"`), [Button](../button/COMPONENT.md) and [Dropdown](../dropdown/COMPONENT.md) (the collapse menu), Icon (`nav.chevronRight`), [VisuallyHidden](../visually-hidden/COMPONENT.md)
-- **See also:** [Tabs](../tabs/COMPONENT.md), [PageContent](../page-content/COMPONENT.md), [Stepper](../stepper/COMPONENT.md)
+- **See also:** [Tabs](../tabs/COMPONENT.md), [Page](../../layout/page/COMPONENT.md), [Stepper](../stepper/COMPONENT.md)

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

@@ -144,6 +144,7 @@ A Button lines up exactly with Input, Select, Datepicker trigger, SegmentedContr
 |---|---|---|---|
 | `fullWidth` | button fills the row | narrow forms, cards, mobile footers | off |
 | icon-only (children are only `Button.Icon`) | square, width = height | toolbars; needs `aria-label` | — |
+| icon only by the host (`data-button-label="icon"` on a wrapper, the `Page.TopBar` plan) | a Button with an icon and a label shows only its icon, square; the label and anything else beside the icon (a `Kbd` hint) stay transparent over it, the label as the name | a host short of width | — |
 | `pressed` / `defaultPressed` | on: accent soft fill and accent text over any variant; off: the variant's own look | a single toggle (favourite, pin, «show archived») | — (not a toggle) |
 | `current` | the selected look, `aria-current="page"` | the current page of a set (page numbers) | off |
 

package/dist/skill/reference/components/button/examples/hold-to-confirm.tsx

@@ -28,7 +28,7 @@ export default function ButtonHoldToConfirmExample() {
       <Button.Icon>
         <Icon name="action.delete" />
       </Button.Icon>
-      Удерживайте, чтобы удалить проект
+      Удержите, чтобы удалить
     </Button.Root>
   );
 }

package/dist/skill/reference/components/button/examples/on-colored-host.tsx

@@ -13,15 +13,15 @@ export default function ButtonOnColoredHostExample() {
         <Banner.Root key={text} variant="solid" tone={tone}>
           <Banner.Content>
             <Banner.Title>{text}</Banner.Title>
+            <Banner.Actions>
+              <Button.Root variant="soft" tone="inherit">
+                {action}
+              </Button.Root>
+              <Button.Root variant="ghost" tone="inherit">
+                {later}
+              </Button.Root>
+            </Banner.Actions>
           </Banner.Content>
-          <Banner.Actions>
-            <Button.Root variant="soft" tone="inherit">
-              {action}
-            </Button.Root>
-            <Button.Root variant="ghost" tone="inherit">
-              {later}
-            </Button.Root>
-          </Banner.Actions>
         </Banner.Root>
       ))}
     </>

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

@@ -13,7 +13,7 @@
 - A tile that is itself the way to its details — a KPI that opens its report, a project tile (`asChild` with a link or a button).
 
 ## When not to use
-- A whole page region with a title and description → [PageContent](../page-content/COMPONENT.md) sections; do not wrap every section in a card.
+- A whole page region with a title and description → [Page](../../layout/page/COMPONENT.md) sections (`Page.Section`); do not wrap every section in a card.
 - Tabular data → use [DataTable](../data-table/COMPONENT.md) (it has its own fill).
 - A message about the page state → [Banner](../banner/COMPONENT.md); nothing to show yet → [EmptyPage](../empty-page/COMPONENT.md).
 - Content that floats over the page → [Popover](../popover/COMPONENT.md), [Modal](../modal/COMPONENT.md) or [Drawer](../drawer/COMPONENT.md).
@@ -101,7 +101,7 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
 ### Card.Label · Card.Value
-`ref` → `HTMLSpanElement`. Metric text: the label (body-s, truncates) and the value (tabular, sized by the template and the card width).
+`ref` → `HTMLSpanElement`. Metric text: the label (body-s; truncates, wraps in a `mini` tile and a `split` cell) and the value (tabular, sized by the template and the card width).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -170,11 +170,11 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 Without `asChild` a card is static: no hover, focus or press of its own. With it: `data-interactive` on the element.
 
 ## Layout & spacing
-- Cards on a page: one `PageContent.Grid` with a `PageContent.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own intrinsic `auto-fill` grid on the tile width of the layout tokens (a lone card keeps its column width), gap `--prime-space-4`.
+- Cards on a page: one `Page.Grid` with a `Page.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own intrinsic `auto-fill` grid on the tile width of the layout tokens (a lone card keeps its column width), gap `--prime-space-4`.
 - Radius `--prime-card-radius`, no border. In `panel` and `list` the `Header` is a padded zone with a faint inset hairline below; in `stat-trend` it can pair a leading Badge or icon with a compact `Card.Value`.
 - Padding `--prime-card-padding-m` (20); `Body` gap `--prime-card-gap` (16); fields inside `Body` 20 apart, one ladder step off the card.
 - Depth comes from nesting (foundation §4): on the page — the AppShell panel is the page — a card is layer 1 (white in light) with the raised whisper; inside another card it is the next layer, a flat tile. The ladder stops at layer 4.
-- Long values wrap, labels truncate; a chart SVG needs a CSS height.
+- Long values wrap; labels truncate, except in a `mini` tile and a `split` cell, where a label beside the icon wraps instead; a chart SVG needs a CSS height.
 - In a `Header` the title takes the free width; a control or a caption after it sits at the end without a wrapper. A `Card.Description` in the header stacks under the title, 4 apart; the control stays at the end, centred on both lines.
 - `Card.Meta` in `stat-trend` takes the bottom of the tile (`margin-top: auto`), so tiles of one row line their meta up; in `mini` and a `split` cell it sits in the text column under the value.
 
@@ -212,11 +212,11 @@ No `labels`.
 | [content-templates.tsx](examples/content-templates.tsx) | Content templates: a call to action, an events list and a campaign tile with a cover — `Card.Footer`, `Card.List`, `Card.Media`. |
 | [flat.tsx](examples/flat.tsx) | A flat tile without the raised shadow next to the default one, for dense grids — `flat`. |
 | [narrow.tsx](examples/narrow.tsx) | The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem — `variant`. |
-| [screen.tsx](examples/screen.tsx) | A dashboard: the title, a line of data, the period switch and the report in the app header; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `AppHeader.Tools`, `PageContent.Grid`. |
+| [screen.tsx](examples/screen.tsx) | A dashboard: the title and a line of data in the page flow, the period switch and the report in the top bar that keeps the title once it scrolls away; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `collapse`, `Page.Grid`. |
 
 ## Mistakes
 - A `<div>` with a border styled as a card → use `Card.Root`; depth comes from fill, not lines.
-- Wrapping every page section in a card → use PageContent sections.
+- Wrapping every page section in a card → use `Page.Section`.
 - `Card.Delta tone="success"` for every «+» → choose the tone by meaning.
 - Custom padding on a `panel` root → padding belongs to `Header` / `Body` / `Footer`.
 - A wrapper `<div>` around the label and the value of `mini` → put `Icon`, `Label`, `Value` straight into the root (or into a `split` cell); the template lays them out.
@@ -228,4 +228,4 @@ No `labels`.
 
 ## Related
 - **Built from:** —
-- **See also:** [PageContent](../page-content/COMPONENT.md), [DescriptionList](../description-list/COMPONENT.md) (record details inside a `Card.Body`), [Fieldset](../fieldset/COMPONENT.md) (groups of fields inside a settings card), [DataTable](../data-table/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Sparkline](../sparkline/COMPONENT.md) (a trend with its total inside a `panel`), [ChartFrame](../chart-frame/COMPONENT.md) (a full chart with legend and states)
+- **See also:** [Page](../../layout/page/COMPONENT.md), [DescriptionList](../description-list/COMPONENT.md) (record details inside a `Card.Body`), [Fieldset](../fieldset/COMPONENT.md) (groups of fields inside a settings card), [DataTable](../data-table/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Sparkline](../sparkline/COMPONENT.md) (a trend with its total inside a `panel`), [ChartFrame](../chart-frame/COMPONENT.md) (a full chart with legend and states)

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

@@ -1,4 +1,4 @@
-/* Dashboard: the board of tiles is PageContent.Grid; here only the inside of the tiles. */
+/* Dashboard: the board of tiles is Page.Grid; here only the inside of the tiles. */
 
 /* Bars inside a panel: 20 apart, like fields. */
 .bars {