prime-ui-kit 0.16.0 → 0.17.0

package/src/components/list/COMPONENT.md

@@ -6,7 +6,7 @@
 > A selectable navigation list of rows: the master half of a list + detail screen (tickets, mail, records).
 
 ## When to use
-- The list side of a list + detail screen (`PageContent.Split` → `PageContent.Panel kind="list"`): tickets, letters, invoices worked through one by one; the open one is `current`.
+- The list side of a list + detail screen (`Page.Split` → `Page.List`): tickets, letters, invoices worked through one by one; the open one is `current`.
 - A short column of records that each open something — a page (`href`, `asChild` with a router link) or a detail pane (`onClick`).
 - A short list the team puts in order (funnel stages, queues, priorities) — `onReorder`, a `value` per item.
 
@@ -145,7 +145,7 @@ Root attributes: `data-size`, `role="list"` (the list style reset would drop the
 
 ## Layout & spacing
 - The root fills its container (`width: 100%`); rows are 4px apart, each row a full-width button with the tier radius and field padding.
-- Put the list on a surface: a `Card.Root` pane in `PageContent.Panel kind="list"`, with a `ScrollContainer` around it when it is long — the list never scrolls by itself.
+- Put the list on a surface: a `Card.Root` pane in `Page.List`, with a `ScrollContainer` around it when it is long — the list never scrolls by itself.
 - Row: leading icon · body (text over description) · trail. Beside two lines the trail stacks — meta on top, count below; beside one line they sit in a row.
 - Text and description truncate with an ellipsis; give a long `List.ItemText` a `title` with the full text.
 - On a coarse pointer a row is at least the touch target (44px).
@@ -200,4 +200,4 @@ Root attributes: `data-size`, `role="list"` (the list style reset would drop the
 
 ## Related
 - **Built from:** [Badge](../badge/COMPONENT.md) (`List.ItemCount`), [Avatar](../avatar/COMPONENT.md) (`List.ItemIcon` gives an avatar the row tier), [Dnd](../dnd/COMPONENT.md) (`onReorder`: `Dnd.Sortable`, the busy `Dnd.Handle`)
-- **See also:** [PageContent](../page-content/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md), [Tabs](../tabs/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Card](../card/COMPONENT.md)
+- **See also:** [Page](../../layout/page/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md), [Tabs](../tabs/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Card](../card/COMPONENT.md)

package/src/components/media-viewer/examples/controlled.tsx

@@ -1,5 +1,5 @@
 /** The parent owns the page: a finding opens its photo, and paging in the viewer moves the mark along the list — `index`, `onIndexChange`. */
-import { Button, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
+import { List, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -26,21 +26,21 @@ export default function MediaViewerControlledExample() {
   return (
     <>
       <div className={styles.findings}>
-        {FINDINGS.map(([id, title], at) => (
-          <Button.Root
-            key={id}
-            variant={at === index ? "soft" : "ghost"}
-            tone="neutral"
-            fullWidth
-            aria-current={at === index ? "true" : undefined}
-            onClick={() => {
-              setIndex(at);
-              setOpen(true);
-            }}
-          >
-            {title}
-          </Button.Root>
-        ))}
+        <List.Root aria-label="Замечания проверки">
+          {FINDINGS.map(([id, title], at) => (
+            <List.Item
+              key={id}
+              value={id}
+              current={at === index}
+              onClick={() => {
+                setIndex(at);
+                setOpen(true);
+              }}
+            >
+              <List.ItemText>{title}</List.ItemText>
+            </List.Item>
+          ))}
+        </List.Root>
       </div>
       <MediaViewer
         items={PHOTOS}

package/src/components/media-viewer/examples/examples.module.css

@@ -8,9 +8,7 @@
   inline-size: min(100%, var(--prime-layout-form-width-m));
 }
 
-/* controlled.tsx: the list of findings beside the photos. */
+/* controlled.tsx: the column of the list of findings beside the photos. */
 .findings {
-  display: grid;
-  gap: var(--prime-space-2);
   inline-size: min(100%, var(--prime-layout-form-width-s));
 }

package/src/components/pagination/COMPONENT.md

@@ -44,6 +44,7 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 | `siblingCount` | `number` | `1` | Pages on each side of the current one before an ellipsis (when `totalPages > 2·siblingCount+5`). |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Control tier of the buttons: height 28 · 32 · 36 · 40 · 48. Without it the tier of its host, else `m`. |
 | `compact` | `boolean` | `false` | Always arrows + «current / total» instead of numbers. Without it the nav fills its parent and shows that view only below 22rem of its width. |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Where the page numbers sit in the width the nav fills: centred under a list, `end` beside a range line (the DataTable footer). The compact view keeps its arrows at the edges. |
 | `labels` | `Partial<PaginationLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "defaultValue" \| "onChange">` | — | `className`, `data-*` and the other `<nav>` attributes; `aria-label` comes from `labels.nav`. |
 
@@ -52,9 +53,16 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 ### compact
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `false` | fills the parent: arrows around page numbers right-aligned, «…» for skipped ranges; below 22rem of its width the compact view with arrows at the edges | list and table footers, anywhere the width varies | yes |
+| `false` | fills the parent: arrows around page numbers placed by `align`, «…» for skipped ranges; below 22rem of its width the compact view with arrows at the edges | list and table footers, anywhere the width varies | yes |
 | `true` | arrows around «3 / 12» (current in primary medium, total muted, tabular figures) at any width | tight toolbars, a pager that must never show numbers | |
 
+### align
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `center` | the numbers centred in the width the nav fills | a pager under a list or a grid of cards | yes |
+| `start` | the numbers at the start | a pager under left-aligned content | |
+| `end` | the numbers at the end | beside a range line in a footer (the DataTable footer passes it) | |
+
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
@@ -78,7 +86,7 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 | hover / active | pointer | `fill-subtle` / `fill-subtle-active`, primary text, press scale |
 | focus-visible | keyboard | outer focus ring of the Button |
 | disabled arrow | first / last page | native `disabled`, `text-disabled` |
-| size / compact | `size` (else the host tier), `compact` | `data-size`, `data-compact` (`"auto"` · `"compact"`) |
+| size / compact / align | `size` (else the host tier), `compact`, `align` | `data-size`, `data-compact` (`"auto"` · `"compact"`), `data-align` |
 
 ## Layout & spacing
 - In a list footer: the range text on the left, rows-per-page Select and Pagination on the right (`justify-content: space-between`), the row wraps.
@@ -120,7 +128,7 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 | [overview.tsx](examples/overview.tsx) | Pages of an order list: arrows, page numbers and the current page — `totalPages`, `defaultValue`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; buttons are as high as Button and Input of the same tier, 28 to 48 px — `size`. |
 | [overflow.tsx](examples/overflow.tsx) | Up to 7 pages without an ellipsis, then a window around the current page; a wider window — `siblingCount`. |
-| [controlled.tsx](examples/controlled.tsx) | A list footer owns the page: changing rows per page returns it to page 1 — `value`, `onValueChange`. |
+| [controlled.tsx](examples/controlled.tsx) | A list footer owns the page: changing rows per page returns it to page 1, the pages at the end beside the range — `value`, `onValueChange`, `align`. |
 | [narrow.tsx](examples/narrow.tsx) | A 320 px card footer: by default the numbers give way to «current / total» on a narrow width, `compact` always shows it — `compact`. |
 
 ## Mistakes

package/src/components/pagination/examples/controlled.tsx

@@ -1,4 +1,4 @@
-/** A list footer owns the page: changing rows per page returns it to page 1 — `value`, `onValueChange`. */
+/** A list footer owns the page: changing rows per page returns it to page 1, the pages at the end beside the range — `value`, `onValueChange`, `align`. */
 import { Card, Pagination, Select, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -39,6 +39,7 @@ export default function PaginationControlledExample() {
               </Select.Content>
             </Select.Root>
             <Pagination
+              align="end"
               value={page}
               onValueChange={setPage}
               totalPages={Math.ceil(TOTAL_INVOICES / pageSize)}

package/src/components/popover/COMPONENT.md

@@ -70,7 +70,7 @@ No DOM: clone the single child and merge `ref` and `onClick`. Trigger toggles th
 | `side` | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` | Preferred side; flips to the opposite side when there is no room. |
 | `align` | `"auto" \| "start" \| "center" \| "end"` | `"auto"` | Alignment along the trigger. `auto` lines the panel up with the trigger edge that has more room beyond it; `start`, `center` or `end` fix the edge. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of the text, padding and gap; also the size context of the controls inside. |
-| `width` | `"auto" \| "trigger" \| "content"` | `"auto"` | `auto`: by content, from the panel minimum to twice that. `trigger`: exactly the trigger's width, below the minimum too. `content`: what the content needs, within the viewport. A sheet is full width. |
+| `width` | `"auto" \| "trigger" \| "min-trigger" \| "content"` | `"auto"` | `auto`: by content, panel minimum to twice that. `trigger`: exactly the trigger. `min-trigger`: `auto`, never narrower than the trigger. `content`: what the content needs. A sheet is full width. |
 | `trapFocus` | `boolean` | `false` | Tab cycles inside the panel (forms). Without it Tab past the last (Shift+Tab before the first) stop closes the panel and returns focus to the trigger. |
 | `initialFocus` | `boolean` | `true` with `Popover.Trigger`, `false` with `Popover.Anchor` | Focus moves into the panel on open (`[data-autofocus]`, else the first tab stop, else the panel). Turn it on for an anchored panel opened by a command, such as a Dropdown item, so focus does not stay on the menu trigger. |
 | `flush` | `boolean` | `false` | No inner padding and no gap: rows and dividers reach the panel edges; the content lays out its own spacing. |
@@ -122,6 +122,7 @@ Title uses the tier text size with title weight; Description uses the tier label
 |---|---|---|---|
 | `auto` | As wide as the content, between `--prime-panel-min-width` and twice that | Most panels | yes |
 | `trigger` | Exactly as wide as the trigger, below the minimum too; text wraps | Full-width triggers in narrow columns | |
+| `min-trigger` | As `auto`, never narrower than the trigger | A panel under a wide anchor that must stay readable when the anchor is narrow ([SmartFilter](../smart-filter/COMPONENT.md)) | |
 | `content` | What the content needs, within the viewport | A wide calendar, a table of limits | |
 
 A bottom sheet is always full width, whatever `width` says.
@@ -185,7 +186,7 @@ No `labels`.
 | [structure.tsx](examples/structure.tsx) | Optional parts: a panel with plain text only, and a panel with a title, a description and actions — `Popover.Header`, `Popover.Actions`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier with a header and actions; the tier is the panel's own, set on `Popover.Content`, not taken from its trigger — `size`. |
 | [placement.tsx](examples/placement.tsx) | Every side and alignment relative to the trigger; near the viewport edge the panel flips and shifts — `side`, `align`. |
-| [width.tsx](examples/width.tsx) | In a narrow column the panel takes the exact width of a full-width trigger and its text wraps; a table of limits takes the width it needs — `width`. |
+| [width.tsx](examples/width.tsx) | In a narrow column the panel takes the exact width of a full-width trigger and its text wraps; a short trigger opens a panel at least as wide as itself; a table of limits takes the width it needs — `width`. |
 | [flush.tsx](examples/flush.tsx) | A notification list whose rows and dividers reach the panel edges; each row brings its own padding — `flush`. |
 | [from-menu.tsx](examples/from-menu.tsx) | A menu command opens a panel at the same button: the rename item shows a form anchored to the menu button and focus lands in its field, not back on that button — `Popover.Anchor`, `initialFocus`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A note being typed is not lost to a stray click: the panel closes only from its buttons, and not at all while the note is saved — `closeOnOutsideClick`, `closeOnEscape`. |

package/src/components/popover/examples/width.tsx

@@ -1,4 +1,4 @@
-/** In a narrow column the panel takes the exact width of a full-width trigger and its text wraps; a table of limits takes the width it needs — `width`. */
+/** In a narrow column the panel takes the exact width of a full-width trigger and its text wraps; a short trigger opens a panel at least as wide as itself; a table of limits takes the width it needs — `width`. */
 import { Button, DescriptionList, Popover, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -24,6 +24,18 @@ export default function PopoverWidthExample() {
           </Typography>
         </Popover.Content>
       </Popover.Root>
+      <Popover.Root>
+        <Popover.Trigger>
+          <Button.Root variant="soft" tone="neutral" fullWidth>
+            Что входит в поддержку
+          </Button.Root>
+        </Popover.Trigger>
+        <Popover.Content width="min-trigger">
+          <Typography variant="body-s" tone="secondary">
+            Ответ в течение 4 часов, персональный менеджер и разбор инцидентов.
+          </Typography>
+        </Popover.Content>
+      </Popover.Root>
       <Popover.Root>
         <Popover.Trigger>
           <Button.Root variant="ghost" tone="neutral" fullWidth>

package/src/components/slider/COMPONENT.md

@@ -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`. |
@@ -121,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) |
 

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

@@ -3,19 +3,23 @@ import { Slider } from "prime-ui-kit";
 
 export default function SliderStatesExample() {
   return (
-    <div>
+    <>
       <div>
-        <Slider label="min" showValue defaultValue={0} />
+        <div>
+          <Slider label="min" showValue defaultValue={0} />
+        </div>
+        <div>
+          <Slider label="max" showValue defaultValue={100} />
+        </div>
       </div>
       <div>
-        <Slider label="max" showValue defaultValue={100} />
+        <div>
+          <Slider label="invalid" showValue defaultValue={90} invalid />
+        </div>
+        <div>
+          <Slider label="disabled" showValue defaultValue={35} disabled />
+        </div>
       </div>
-      <div>
-        <Slider label="invalid" showValue defaultValue={90} invalid />
-      </div>
-      <div>
-        <Slider label="disabled" showValue defaultValue={35} disabled />
-      </div>
-    </div>
+    </>
   );
 }

package/src/components/smart-filter/COMPONENT.md

@@ -13,10 +13,10 @@
 - An API that takes one value per field (`multiple: false`), a screen whose text search lives elsewhere (`searchable={false}`), values of different kinds in one field (`group`).
 
 ## When not to use
-- One field with a few options → use [SegmentedControl](../segmented-control/COMPONENT.md), [Select](../select/COMPONENT.md) or [TagSelect](../tag-select/COMPONENT.md) in the toolbar.
+- One field with a few options → use [SegmentedControl](../segmented-control/COMPONENT.md), [Select](../select/COMPONENT.md) or [TagSelect](../tag-select/COMPONENT.md) in the page's `Page.Tools`.
 - A search outside a table or list page (inside a picker, a settings section, a panel) → [Input](../input/COMPONENT.md) with a search icon. Over a table or list page the search is SmartFilter even with no fields yet (`fields={[]}`): it grows into filters without a rebuild.
 - Choosing values for a form field → use [TagSelect](../tag-select/COMPONENT.md).
-- One period that drives a whole dashboard → [Datepicker](../datepicker/COMPONENT.md) in the page toolbar; SmartFilter ranges filter rows of a list.
+- One period that drives a whole dashboard → [Datepicker](../datepicker/COMPONENT.md) in the page's `Page.Tools`; SmartFilter ranges filter rows of a list.
 
 ## Import
 ```tsx
@@ -30,7 +30,7 @@ import {
 
 ## Anatomy
 ```
-SmartFilter.Root                  state + context (flex column)
+SmartFilter.Root                  state + context, no DOM
 ├─ SmartFilter.Toolbar            [search Input (searchable)] [filter Button (count Badge)] — the anchor of the panel
 │  └─ panel                       flush Popover as wide as the toolbar; sections split by Dividers
 │     ├─ query row                ghost Button «Искать «text»» + Kbd ↵, while typing
@@ -41,14 +41,14 @@ SmartFilter.Root                  state + context (flex column)
 │     └─ footer                   hint · count · Reset Button
 └─ SmartFilter.Chips              applied filters as removable Badges · add / clear all Buttons
 ```
-The toolbar and the chips are separate parts so a page can put them in different places; both only need to be inside `Root`.
+The toolbar and the chips are separate parts so a page can put them in different places; both only need to be inside `Root`, which draws nothing of its own.
 
 ## API
 
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### SmartFilter.Root
-`ref` → `HTMLDivElement`. A `<div>` (flex column) with the state and the context; sets `data-size`.
+No DOM, no ref. The value, the search and the panel state shared by its parts; the host places the parts.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -62,11 +62,10 @@ The toolbar and the chips are separate parts so a page can put them in different
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the filter button, the search, the tags and the panel. Without it the tier of its host, else `m`. |
 | `collapsedLimit` | `number` | `12` | Values of one field shown before «Ещё N» (not while searching). |
 | `labels` | `Partial<SmartFilterLabels>` | — | Built-in strings, see Labels. |
-| `children` | `ReactNode` | — (required) | `SmartFilter.Toolbar` and `SmartFilter.Chips`, anywhere inside. |
-| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "defaultValue" \| "onChange">` | — | `className` and the other div attributes. |
+| `children` | `ReactNode` | — (required) | `SmartFilter.Toolbar` and `SmartFilter.Chips`, anywhere inside — in a page bar the Root wraps `Page.Root`. |
 
 ### SmartFilter.Toolbar
-`ref` → `HTMLDivElement`. A `<div>`: the search Input first, then the filter Button (a count Badge while filters apply); the anchor of the panel, a flush Popover.
+`ref` → `HTMLDivElement`. A `<div>`: the search Input first, then the filter Button (a count Badge while filters apply), which shows only its icon and count when the search would get too little room; the anchor of the panel, a flush Popover.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -165,15 +164,16 @@ same height and type.
 | range inverted | `from` above `to` | both bound inputs `aria-invalid` with the danger ring; nothing matches |
 | single value | `multiple: false` | at most one value `aria-pressed`; no «−» |
 | no filters | empty value | no count on the button, no Chips |
+| compact button | the toolbar narrower than the search's 9rem plus the labelled button (search and fields both present) | the button shows its icon and the count Badge; its name stays «Фильтр» (`aria-label` without filters, a visually hidden label with them) |
 
 ## Layout & spacing
-- The panel is a flush Popover as wide as the toolbar; every section is a full-width row with its own padding (`--prime-space-3` × `--prime-space-4`, footer `--prime-space-2` × `--prime-space-4`), Dividers run edge to edge, the field label column is `--prime-space-24`; a row narrower than 24rem stacks the label over the values (an intrinsic wrap, no breakpoint).
-- The toolbar is one row of controls (`--prime-space-2` gap): the search first, growing from 9rem (`--prime-space-24` × 1.5), then the filter button at its own width. When less than 9rem is left beside the button, the button moves under the search; every row stays one control high. Search first, filter second — the active filters (`SmartFilter.Chips`) sit under them.
+- The panel is a flush Popover at least as wide as the toolbar (`width="min-trigger"`), by its content up to twice the panel minimum when the toolbar is narrow; every section is a full-width row with its own padding (`--prime-space-3` × `--prime-space-4`, footer `--prime-space-2` × `--prime-space-4`), Dividers run edge to edge, the field label column is at least `--prime-space-24` (a longer name takes its own width, never breaking inside a word); a row narrower than 24rem stacks the label over the values (an intrinsic wrap, no breakpoint).
+- The toolbar is one row of controls (`--prime-space-2` gap): the search first, growing from 9rem (`--prime-space-24` × 1.5), then the filter button at its own width. When less than 9rem is left beside the labelled button, the button shows only its icon and count and stays beside the search, which gives its width instead of wrapping. Every row stays one control high. The search and the button also stand alone: `searchable={false}` keeps the button, empty `fields` keep the search. Search first, filter second — the active filters (`SmartFilter.Chips`) sit under them.
 - Chips are Badges of the toolbar tier on the badge scale (`xs` → `s`), so a tag sits lower than the controls above it; «Добавить фильтр» is a tag of the same tier and «Сбросить все» a LinkButton with the tag's text size.
 - Values and chips wrap with `--prime-space-2` gaps; «Сбросить все» is pushed to the end. The chips row rises in with the first filter and closes up in place with the last (`partPresence`).
 - Option groups stack `--prime-space-3` apart, a caption `--prime-space-1` above each group's values. A range row holds two equal Inputs with a dash between them, centred on the field label.
 - While typing a search a range row stays only when its field name matches.
-- The root is a flex column (`--prime-space-3`): Toolbar, then Chips.
+- The root draws nothing: its host places Toolbar and Chips. In a page bar the Toolbar goes in `Page.Tools` and the Chips in `Page.Chips`, with `SmartFilter.Root` around `Page.Root`; outside a page a host stacks them (a `Card.Body`, a form column).
 
 ## Accessibility
 
@@ -244,7 +244,7 @@ same height and type.
 - A fixed field marked `finite: false` → the user can hide every value and get an empty list.
 - Filtering the list with `includes` → use `matchesSmartFilter` (empty `include` is "any", `exclude` rejects; range bounds are inclusive, dates by whole days; an item with no value passes only an empty filter).
 - Sending `include` to a server for a hidden value of a fixed field → use `resolveSmartFilterValues` («hide» becomes «all except», `[]` means no filter).
-- Putting `Chips` outside `SmartFilter.Root` → every part needs the root.
+- Putting `Chips` outside `SmartFilter.Root` → every part needs the root; when Toolbar and Chips stand in different groups of a page bar, wrap `Page.Root` in it.
 - A second row of filter buttons next to the toolbar → fields belong in `fields`.
 - An amount or a period in its own Popover beside the toolbar → a `range` / `date-range` field; it gets a chip and the count.
 - One field split in two because its values are of different kinds → one field with `group` on the options.
@@ -252,4 +252,4 @@ same height and type.
 
 ## Related
 - **Built from:** [Button](../button/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Input](../input/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md), [Popover](../popover/COMPONENT.md), [Divider](../divider/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [LinkButton](../link-button/COMPONENT.md), [Typography](../typography/COMPONENT.md), Icon (`action.search`, `action.filter`, `action.add`, `nav.chevronDown`), [VisuallyHidden](../visually-hidden/COMPONENT.md)
-- **See also:** [PageToolbar](../page-toolbar/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)
+- **See also:** [Page](../../layout/page/COMPONENT.md) (`Page.Tools`, `Page.Chips`), [TagSelect](../tag-select/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)

package/src/components/smart-filter/examples/examples.module.css

@@ -30,6 +30,9 @@
 
 /* 320 px: the smallest supported viewport. */
 .narrow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
   width: min(100%, calc(var(--prime-space-20) * 4));
   min-width: 0;
 }

package/src/components/smart-filter/examples/many-values.tsx

@@ -1,6 +1,8 @@
 /** An open set of twenty services, degraded ones marked with an icon, collapsed after eight; typing narrows the panel and marks the match in accent — `finite`, `icon`, `collapsedLimit`. */
 import { Icon, SmartFilter, type SmartFilterField } from "prime-ui-kit";
 
+import styles from "./examples.module.css";
+
 const SERVICES = [
   "access-policy",
   "billing",
@@ -41,13 +43,15 @@ const FIELDS: SmartFilterField[] = [
 
 export default function SmartFilterManyValuesExample() {
   return (
-    <SmartFilter.Root
-      fields={FIELDS}
-      collapsedLimit={8}
-      defaultValue={{ service: { include: [], exclude: ["events"] } }}
-    >
-      <SmartFilter.Toolbar />
-      <SmartFilter.Chips />
-    </SmartFilter.Root>
+    <div className={styles.stack}>
+      <SmartFilter.Root
+        fields={FIELDS}
+        collapsedLimit={8}
+        defaultValue={{ service: { include: [], exclude: ["events"] } }}
+      >
+        <SmartFilter.Toolbar />
+        <SmartFilter.Chips />
+      </SmartFilter.Root>
+    </div>
   );
 }

package/src/components/smart-filter/examples/sizes.tsx

@@ -1,5 +1,5 @@
 /** Every size tier: the filter button, the search, the tags and the panel follow one tier — `size`. */
-import { SmartFilter, type SmartFilterField, Typography } from "prime-ui-kit";
+import { Card, SmartFilter, type SmartFilterField, Typography } from "prime-ui-kit";
 
 const FIELDS: SmartFilterField[] = [
   {
@@ -18,8 +18,12 @@ export default function SmartFilterSizesExample() {
       {SIZES.map((size) => (
         <div key={size}>
           <SmartFilter.Root fields={FIELDS} size={size} defaultValue={ONLY_GET}>
-            <SmartFilter.Toolbar />
-            <SmartFilter.Chips />
+            <Card.Root>
+              <Card.Body>
+                <SmartFilter.Toolbar />
+                <SmartFilter.Chips />
+              </Card.Body>
+            </Card.Root>
           </SmartFilter.Root>
           <Typography as="span" variant="caption" tone="muted">
             {size}

package/src/components/sparkline/COMPONENT.md

@@ -133,6 +133,7 @@ Put it in a `Card` for a dashboard tile.
 - Bars share the width equally, 4 px apart; the zero line sits where 0 falls on the scale (the bottom when every value is positive).
 - In a dashboard, wrap it in `Card.Root` + `Card.Body`; several cards go in a grid.
 - When the value row does not fit (a narrow card), the change badge wraps under the value.
+- On a head narrower than 20rem (a phone card) the date takes its own line under the title, which wraps instead of being cut; the break follows the width only, so a date that changes while scrubbing never moves it.
 - `layout="compact"` fits a DataTable row of any tier (plot and dot within an `xs` control height) and takes the cell width, at least `--prime-space-24`; give the column a `width` for an even plot per row. Put the number next to it in its own column: the compact plot shows a value only in its tooltip while scrubbed.
 - The tooltip is the kit's chart tooltip, placed like every anchored layer (`usePosition`): right of the pointer at its height, on the left only where the right has no room in the viewport — crossing the middle never moves it; from the keyboard right of the point at mid-height. Portaled, so a card or a table scroller never clips it.
 

package/src/components/sparkline/examples/curve.tsx

@@ -1,5 +1,7 @@
 /** The same month of active users as a smooth curve, straight segments and steps — `curve`. */
-import { Sparkline, type SparklinePoint, Typography } from "prime-ui-kit";
+import { Card, Sparkline, type SparklinePoint } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
 
 const USERS: SparklinePoint[] = [
   { label: "сен, 1 нед.", value: 1240 },
@@ -10,19 +12,22 @@ const USERS: SparklinePoint[] = [
   { label: "окт, 2 нед.", value: 1840 },
 ];
 
-const CURVES = ["smooth", "linear", "step"] as const;
+const CURVES = [
+  { curve: "smooth", title: "Плавная кривая" },
+  { curve: "linear", title: "Прямые отрезки" },
+  { curve: "step", title: "Ступени" },
+] as const;
 
 export default function SparklineCurveExample() {
   return (
-    <div>
-      {CURVES.map((curve) => (
-        <div key={curve}>
-          <Sparkline data={USERS} label="Активные пользователи" curve={curve} />
-          <Typography as="span" variant="caption" tone="muted">
-            {curve}
-          </Typography>
-        </div>
+    <>
+      {CURVES.map(({ curve, title }) => (
+        <Card.Root key={curve} className={styles.card}>
+          <Card.Body>
+            <Sparkline data={USERS} label={title} curve={curve} />
+          </Card.Body>
+        </Card.Root>
       ))}
-    </div>
+    </>
   );
 }

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

@@ -12,19 +12,23 @@ const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
 
 export default function SparklineStatesExample() {
   return (
-    <div>
+    <>
       <div>
-        <Sparkline data={REVENUE} label="Выручка" formatValue={formatRubles} />
-        <Typography as="span" variant="caption" tone="muted">
-          data
-        </Typography>
+        <div>
+          <Sparkline data={REVENUE} label="Выручка" formatValue={formatRubles} />
+          <Typography as="span" variant="caption" tone="muted">
+            data
+          </Typography>
+        </div>
       </div>
       <div>
-        <Sparkline data={[]} label="Выручка" loading />
-        <Typography as="span" variant="caption" tone="muted">
-          loading
-        </Typography>
+        <div>
+          <Sparkline data={[]} label="Выручка" loading />
+          <Typography as="span" variant="caption" tone="muted">
+            loading
+          </Typography>
+        </div>
       </div>
-    </div>
+    </>
   );
 }

package/src/components/switch/COMPONENT.md

@@ -97,7 +97,7 @@ No `variant` / `tone` / `color`.
 | off | `checked={false}` / default | `data-state="unchecked"`; track `fill-strong` (hover `fill-strong-hover`), thumb at the start |
 | on | `checked` / `defaultChecked` | `data-state="checked"`; accent track, the thumb glides to the end |
 | invalid | `invalid` or a non-empty `error` | `data-invalid="true"`, `aria-invalid`; danger ring on the off track and on focus; the row shakes once when an error arrives (`data-shake`) |
-| disabled | `disabled` | `data-disabled="true"`; off track `fill-muted`, on track `accent-soft`, `cursor: not-allowed` |
+| disabled | `disabled` | `data-disabled="true"`; off track `fill-muted`, on track `accent-soft`, thumb `control-thumb-disabled` without shadow, `cursor: not-allowed` |
 | read-only | `readOnly` | `aria-readonly="true"` on the input, `data-readonly="true"` on the field; no hover or press, default cursor |
 | saving | `loading`, or `onCheckedChange` returned a pending promise | the thumb stands in the new position with a `Spinner` inside (accent when on, muted when off; it fades in by itself), `aria-busy` on the input, `data-loading` on the track, presses ignored; a rejection glides the thumb back (`base`, emphasized) |
 | pressed | pointer press | the track scales to the compact press scale (not when disabled or read-only) |

package/src/components/tabs/COMPONENT.md

@@ -189,7 +189,7 @@ Avoid icons or descriptions on only some tabs (uneven rows; without an icon on e
 | closing, confirm pending | `onRemove` returned a promise that has not settled | the close button is `loading` (`aria-busy`); the tab, its selection and focus stay; resolved → the neighbour takes over, rejected → nothing changes |
 | two-line | `Tabs.Description` child | `data-two-line="true"` |
 | collapsed | tabs wider than the list, or a label that would be cut (horizontal) | list `data-collapse="full" \| "compact" \| "icon"`: `compact` hides icons and descriptions; `icon` takes labels, counts and close buttons out of the row — a `VisuallyHidden` copy of the label names the tab and a `Tooltip` shows it — only when every tab has an icon |
-| overflow | tabs at their narrowest (content width, `minItemWidth` or icon squares) still wider than the list | `data-overflow-start` / `data-overflow-end` on the list (the switcher row, a ScrollContainer), faded edges as deep as the hidden part at most (they grow and melt with the scroll, never switch); the active tab is kept in view and clear of the fades on mount and on every value change, the first and the last tab scroll all the way to the end — only the list scrolls, never the page. A column (a wide vertical list) has plain edges |
+| overflow | tabs at their narrowest (content width, `minItemWidth` or icon squares) still wider than the list | `data-overflow-start` / `data-overflow-end` on the list (the switcher row, a ScrollContainer), faded edges as deep as the hidden part at most (they grow and melt with the scroll, never switch); when the end edge would cut only a tab's empty side, the tabs at `minItemWidth` widen a little (`--tabs-peek`, up to 30%) so a label fades out at the edge and shows that more tabs follow; the active tab is kept in view and clear of the fades on mount and on every value change, the first and the last tab scroll all the way to the end — only the list scrolls, never the page. A column (a wide vertical list) has plain edges |
 
 The indicator glides (`emphasized` + `base`, `data-animate="true"`) only into a choice by click, arrow keys or closing the active tab; on mount, a value set from outside, a resize, font loading, tabs added or removed and collapse it is placed without motion, and it stays still under `prefers-reduced-motion`. The list scrolls smoothly to the active tab only after such a choice too.
 

package/src/components/typography/COMPONENT.md

@@ -94,7 +94,7 @@ Text has no interactive states.
 - No outer margins: spacing comes from the parent's `gap`.
 - Title, heading and display roles balance their lines (`text-wrap-style: balance`); body and caption avoid a lone last word (`pretty`). Long words break (`overflow-wrap: break-word`).
 - `code` uses the mono family (JetBrains Mono); every other role the sans family (Golos Text).
-- Reading text: cap the column at the reading measure (PageContent `maxWidth="readable"`, 60–75 characters).
+- Reading text: cap the column at the reading measure (`Page.Root maxWidth="readable"`, 60–75 characters).
 - `truncate` needs a block element and a shrinking parent (`min-width: 0` in flex rows).
 
 ## Accessibility
@@ -138,4 +138,4 @@ No `labels`.
 
 ## Related
 - **Built from:** —
-- **See also:** [LinkButton](../link-button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [Label](../label/COMPONENT.md), [PageContent](../page-content/COMPONENT.md)
+- **See also:** [LinkButton](../link-button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [Label](../label/COMPONENT.md), [Page](../../layout/page/COMPONENT.md)