prime-ui-kit 0.14.0 → 0.16.0

package/src/components/page-toolbar/COMPONENT.md

@@ -3,15 +3,15 @@
 **Category:** page
 **Kind:** layout
 
-> The panel at the top of a page — sections, filter and search, view options and the primary action — laid out from its own width: one row when wide, stacked rows when narrow, search and filter always first with the active filters under them.
+> The panel at the top of a page — sections, filter and search, view options and the primary action — laid out from its own width: one row when wide, stacked rows when narrow, search and filter always first with the active filters under the top row.
 
 ## When to use
 - A list, registry or dashboard page whose top holds several of: sections with counts, a filter and search, a period or view switch, the primary action.
 - A settings page with sections and a «Сохранить N изменений» action that must stay reachable on a phone.
-- Any page that has to work from 320px with the same controls as on desktop — nothing is hidden, the slots only move.
+- Any page that has to work on the narrowest supported screen (a 320 px phone) with the same controls as on desktop — nothing is hidden, the slots only move.
 
 ## When not to use
-- A page with a title, a description and one or two buttons → [PageContent](../page-content/COMPONENT.md) `Header` with `Actions`.
+- One or two buttons of the page and nothing else → `AppHeader.Actions` in the [AppHeader](../../layout/app-header/COMPONENT.md) title row.
 - Tools that belong to one table → the DataTable `toolbar` slot.
 - Switching panels inside a card or a section → [Tabs](../tabs/COMPONENT.md).
 - App-level navigation → [Sidebar](../../layout/sidebar/COMPONENT.md).
@@ -28,7 +28,7 @@ PageToolbar.Root                 container: its own width picks the layout
 ├─ PageToolbar.Sections          sections of the page: a fullWidth SegmentedControl with counts
 ├─ PageToolbar.View              period, table / cards, columns
 ├─ PageToolbar.Actions           the primary action (and its secondary twin, e.g. «Отменить»)
-└─ PageToolbar.Chips             active filters: SmartFilter.Chips, a row right under the search
+└─ PageToolbar.Chips             active filters: SmartFilter.Chips, a row under the top row
 ```
 
 ## API
@@ -36,7 +36,7 @@ PageToolbar.Root                 container: its own width picks the layout
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### PageToolbar.Root
-`ref` → `HTMLDivElement`. The page panel: one row from 56rem of its own width, stacked rows below. Any slot may be left out; JSX order is the Tab order — write Tools, Sections, View, Actions, Chips.
+`ref` → `HTMLDivElement`. The page panel: one row from 56rem of its own width, stacked rows below. Any slot may be left out; whatever the JSX order, the DOM and Tab order is Tools, Sections, View, Actions, Chips. Named (`aria-label`), it is a `group`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -50,7 +50,7 @@ PageToolbar.Root                 container: its own width picks the layout
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
 
 ### PageToolbar.Tools
-`ref` → `HTMLDivElement`. Search and filter button (`SmartFilter.Toolbar`): always the first slot and the stretchy one, the Chips right under it.
+`ref` → `HTMLDivElement`. Search and filter button (`SmartFilter.Toolbar`): always the first slot and the stretchy one; it gives way first when the row runs short.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -64,14 +64,14 @@ PageToolbar.Root                 container: its own width picks the layout
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
 
 ### PageToolbar.Actions
-`ref` → `HTMLDivElement`. The primary action of the page: at the end of the top row at every width, never wraps down.
+`ref` → `HTMLDivElement`. The primary action of the page: at the end of the top row; on a phone, when the search would get less than 18rem beside it, its own full row right under the search.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
 
 ### PageToolbar.Chips
-`ref` → `HTMLDivElement`. Active filters (`SmartFilter.Chips`) in their own row right under the search and filter; the row takes no space while it is empty.
+`ref` → `HTMLDivElement`. Active filters (`SmartFilter.Chips`) in their own row under the top row; the row takes no space while it is empty.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -83,37 +83,43 @@ PageToolbar has no variants: the layout follows the toolbar's width.
 ### Layout by width
 | Toolbar width | Looks like | Default |
 |---|---|---|
-| `≥ 56rem` | one row that never wraps: Tools (stretch, at least 18rem — a 9rem search and the filter button on one line) · Sections (content width) · View (content width) · Actions; Chips under it; short of room the Tools give way first, then the Sections shrink and scroll inside | |
+| `≥ 56rem` | one row that never wraps: Tools (stretch) · Sections (content width) · View (content width) · Actions; Chips under it; short of room the Tools give way first, down to 12rem, so the Sections keep their items and counts whole; only then the Sections shrink and scroll inside | |
 | `< 56rem` | rows: Tools (stretch) + Actions; Chips; Sections (full row); View (full row) | yes (mobile first) |
-| any | Chips right under the search and filter, only while there are chips | |
+| phone (Tools would get < 18rem beside the Actions) | rows: Tools (full row); Actions (full row, its buttons share it); Chips; Sections; View — the search is never squeezed; an icon-only action still fits beside the Tools | |
+| any | Chips under the top row, only while there are chips | |
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
 | wide | container ≥ 56rem | one flex row, no wrapping; Chips rendered under the bar |
-| narrow | container < 56rem | a grid of real rows only (`order` + grid columns): a missing slot makes no row, every row is 12 from the next |
-| no Tools | Sections without Tools | the Sections take the Tools' place: first and stretchy, beside the action |
-| alone in a row | Tools or Sections without Actions; View when narrow | that slot stretches to the full row; the View's controls share it equally |
+| narrow | container < 56rem | one wrapping flex line of real rows only (`order` + full-row slots): a missing slot makes no row, every row is 12 from the next |
+| action on its own row | narrow, and the Tools (or the Sections in their place) would get less than 18rem beside the Actions | the Actions wrap under them and stretch across the row; an Actions slot alone in the toolbar keeps its buttons at the end |
+| no Tools | Sections without Tools; View without Tools and Sections | that slot takes the Tools' place: first and stretchy, beside the action, so the action stays at the top row's end |
+| alone in a row | Tools or Sections without Actions; View when narrow | that slot stretches to the full row; the View's controls share it equally and may shrink below their content (`min-width: 0`), so the row fits a phone |
 | no chips | `PageToolbar.Chips` empty (`SmartFilter.Chips` renders nothing) | the chips row takes no space |
 
 ## Layout & spacing
-- 8 inside a slot. No padding or fill of its own: it sits at the top of `PageContent.Body` (or replaces `PageContent.Header` on dense pages that keep their `h1` in the shell).
-- The order is fixed: search and filter first, then the sections, the view and the primary action; the active filters always sit right under the search and filter, never under the sections. The primary action is at the end of the top row at every width and never wraps down.
+- 8 inside a slot. No padding or fill of its own: on an app page it is the page's tools row in `AppHeader.Tools`, under the page title; tools of one table go into that table's `toolbar`.
+- The order is fixed: search and filter first, then the sections, the view and the primary action; the active filters sit under the top row, never under the sections. The primary action is at the end of the top row; on a phone, where the search would get less than 18rem beside it, it takes its own row right under the search — still above the sections and the view.
 - Every gap is one step: 12 between slots and between every pair of rows, at any width — no row is ever further from the next.
 - Sections take a `fullWidth` SegmentedControl: the toolbar decides when it stretches (content width when wide, the full row when narrow), its items tend to equal width and it scrolls inside itself when they do not fit.
 - All controls share one tier, so they share one height and wrapped rows stay level: leave `size` off the controls (default `m`); for a denser page wrap the toolbar in `<ControlSizeProvider value="s">`.
-- On a phone the primary action may drop its text and keep the icon with `aria-label`; never remove it.
+- On a phone the primary action takes its own row by itself; an icon-only action with `aria-label` stays beside the search instead. Never remove it.
 - The toolbar breaks by its own width, so it behaves the same with the sidebar open or closed.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
-- A plain `<div>`: when a page has more than one panel, give each `role="group"` and an `aria-label` (a name on a `<div>` without a role is ignored by assistive tech).
-- Slots move only visually (`order`); the Tab order is the JSX order. Write the slots in the reading order of the wide layout — Tools, Sections, View, Actions, Chips. In the narrow layout the action is shown beside the tools but reached after the view.
-- An icon-only primary action on a narrow page carries `aria-label`.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- With an `aria-label` the root is `role="group"` named by it: when a page has more than one panel, name each.
+- The root renders the slots in the wide layout's reading order — Tools, Sections, View, Actions, Chips — whatever the JSX order; the narrow layout moves them only visually (`order`).
+- An icon-only primary action carries `aria-label`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -123,10 +129,10 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | The panel of an orders page: search and filter, sections with counts, the period and the primary action in one row; active filters right under the search — `PageToolbar.Tools`, `PageToolbar.Sections`, `PageToolbar.View`, `PageToolbar.Actions`, `PageToolbar.Chips`. |
+| [overview.tsx](examples/overview.tsx) | The panel of an orders page: search and filter, sections with counts, the period and the primary action in one row; active filters under the top row — `PageToolbar.Tools`, `PageToolbar.Sections`, `PageToolbar.View`, `PageToolbar.Actions`, `PageToolbar.Chips`. |
 | [without-search.tsx](examples/without-search.tsx) | A dashboard panel without search on a tablet-width column: the sections fill the top row, the period selector alone in the bottom row stretches to the full width — `PageToolbar.Sections`, `PageToolbar.View`. |
 | [save-changes.tsx](examples/save-changes.tsx) | A settings page: sections of the form on the left, the save action with the number of changes at the end of the top row — never a sticky bar at the bottom of a phone screen — `PageToolbar.Actions`. |
-| [narrow.tsx](examples/narrow.tsx) | A phone-width column: search, filter and the primary action on top, the active filters under them, then the sections and the period, every row 12 apart — `PageToolbar.Root`. |
+| [narrow.tsx](examples/narrow.tsx) | A phone-width column: search and filter on top, the primary action on its own row under them, then the active filters, the sections and the period, every row 12 apart — `PageToolbar.Root`. |
 
 ## Mistakes
 - A hand-built flex row of tabs, search and buttons with `flex-wrap` → rows wrap «as they come», the action drifts down; use `PageToolbar`.

package/src/components/page-toolbar/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** A phone-width column: search, filter and the primary action on top, the active filters under them, then the sections and the period, every row 12 apart — `PageToolbar.Root`. */
+/** A phone-width column: search and filter on top, the primary action on its own row under them, then the active filters, the sections and the period, every row 12 apart — `PageToolbar.Root`. */
 import {
   Button,
   Icon,
@@ -38,7 +38,9 @@ const FIELDS: SmartFilterField[] = [
 export default function PageToolbarNarrowExample() {
   const [section, setSection] = React.useState("all");
   const [period, setPeriod] = React.useState("7d");
-  const [filter, setFilter] = React.useState<SmartFilterValue>({});
+  const [filter, setFilter] = React.useState<SmartFilterValue>({
+    city: { include: ["msk"], exclude: [] },
+  });
   const [search, setSearch] = React.useState("");
 
   return (
@@ -87,10 +89,11 @@ export default function PageToolbarNarrowExample() {
             </Select.Root>
           </PageToolbar.View>
           <PageToolbar.Actions>
-            <Button.Root aria-label="Новый заказ">
+            <Button.Root>
               <Button.Icon>
                 <Icon name="action.add" />
               </Button.Icon>
+              Новый заказ
             </Button.Root>
           </PageToolbar.Actions>
           <PageToolbar.Chips>

package/src/components/page-toolbar/examples/overview.tsx

@@ -1,4 +1,4 @@
-/** The panel of an orders page: search and filter, sections with counts, the period and the primary action in one row; active filters right under the search — `PageToolbar.Tools`, `PageToolbar.Sections`, `PageToolbar.View`, `PageToolbar.Actions`, `PageToolbar.Chips`. */
+/** The panel of an orders page: search and filter, sections with counts, the period and the primary action in one row; active filters under the top row — `PageToolbar.Tools`, `PageToolbar.Sections`, `PageToolbar.View`, `PageToolbar.Actions`, `PageToolbar.Chips`. */
 import {
   Button,
   Icon,

package/src/components/page-toolbar/examples/save-changes.tsx

@@ -13,28 +13,31 @@ const CHANGES = 3;
 export default function PageToolbarSaveChangesExample() {
   const [section, setSection] = React.useState("profile");
 
+  // The toolbar heads the settings form: its save action submits the page's form.
   return (
-    <PageToolbar.Root aria-label="Настройки">
-      <PageToolbar.Sections>
-        <SegmentedControl.Root
-          fullWidth
-          value={section}
-          onValueChange={setSection}
-          aria-label="Раздел настроек"
-        >
-          {SECTIONS.map((item) => (
-            <SegmentedControl.Item key={item.value} value={item.value}>
-              {item.label}
-            </SegmentedControl.Item>
-          ))}
-        </SegmentedControl.Root>
-      </PageToolbar.Sections>
-      <PageToolbar.Actions>
-        <Button.Root variant="ghost" tone="neutral">
-          Отменить
-        </Button.Root>
-        <Button.Root>Сохранить {CHANGES} изменения</Button.Root>
-      </PageToolbar.Actions>
-    </PageToolbar.Root>
+    <form onSubmit={(event) => event.preventDefault()}>
+      <PageToolbar.Root aria-label="Настройки">
+        <PageToolbar.Sections>
+          <SegmentedControl.Root
+            fullWidth
+            value={section}
+            onValueChange={setSection}
+            aria-label="Раздел настроек"
+          >
+            {SECTIONS.map((item) => (
+              <SegmentedControl.Item key={item.value} value={item.value}>
+                {item.label}
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+        </PageToolbar.Sections>
+        <PageToolbar.Actions>
+          <Button.Root variant="ghost" tone="neutral">
+            Отменить
+          </Button.Root>
+          <Button.Root type="submit">Сохранить {CHANGES} изменения</Button.Root>
+        </PageToolbar.Actions>
+      </PageToolbar.Root>
+    </form>
   );
 }

package/src/components/pagination/COMPONENT.md

@@ -7,7 +7,7 @@
 
 ## When to use
 - Lists and tables split into pages, usually in their footer.
-- Narrow places (cards, mobile footers) — `compact` or `compact="auto"`.
+- Narrow places (cards, mobile footers): it turns compact by itself below 22rem of its width; `compact` forces that view.
 
 ## When not to use
 - Steps of a process with names and statuses → use [Stepper](../stepper/COMPONENT.md).
@@ -23,8 +23,8 @@ import { Pagination } from "prime-ui-kit";
 ```
 Pagination              <nav aria-label={labels.nav}>; size and compact mode
 ├─ previous             ghost icon-only Button (nav.chevronLeft)
-├─ pages                ghost Buttons with numbers; «…» for skipped ranges (aria-hidden)
-├─ summary              «3 / 12» in the compact view
+├─ pages                ghost `tight` Buttons with numbers, the current one in the Button `current` state; «…» for skipped ranges (aria-hidden)
+├─ summary              «3 / 12» in the compact view (below 22rem, or `compact`)
 └─ next                 ghost icon-only Button (nav.chevronRight)
 ```
 
@@ -33,7 +33,7 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Pagination
-`ref` → `HTMLElement`. A `<nav>` named by `labels.nav` with ghost `Button`s: previous, page numbers with ellipses, next.
+`ref` → `HTMLElement`. A `<nav>` named by `labels.nav` with `Button`s: ghost previous and next, ghost page numbers with ellipses, the current page in the Button `current` state.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -41,9 +41,9 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 | `value` | `number` | — | Current page (1-based), controlled; clamped to `1…totalPages`. |
 | `defaultValue` | `number` | `1` | Initial page, uncontrolled. |
 | `onValueChange` | `(page: number) => void` | — | Called when a page button or an arrow picks another page. |
-| `siblingCount` | `number` | `1` | Pages on each side of the current one before an ellipsis (when `totalPages > 7`). |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Control tier of the buttons: height 28 · 32 · 36 · 40 · 48. |
-| `compact` | `boolean \| "auto"` | `false` | `true` — arrows + «current / total» instead of numbers; `"auto"` — fills the parent and turns compact below 22rem of its width. |
+| `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. |
 | `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 +52,8 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 ### compact
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `false` | arrows around page numbers; «…» for skipped ranges | desktop list and table footers | yes |
-| `true` | arrows around «3 / 12» (current in primary medium, total muted, tabular figures) | cards, mobile footers, tight toolbars | |
-| `"auto"` | fills the parent; the full row right-aligned, below 22rem of container width the compact view with arrows at the edges | responsive footers (DataTable uses it) | |
+| `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 |
+| `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 | |
 
 ### size
 | Value | Looks like | Use when | Default |
@@ -75,26 +74,30 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| current page | `value` / `defaultValue` | `aria-current="page"` on a soft accent Button: `accent-soft` fill, `accent-text` |
+| current page | `value` / `defaultValue` | the Button `current` state: `aria-current="page"`, `data-current`, the selected fill |
 | 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`, `compact` | `data-size`, `data-compact` (`"true"` · `"false"` · `"auto"`) |
+| size / compact | `size` (else the host tier), `compact` | `data-size`, `data-compact` (`"auto"` · `"compact"`) |
 
 ## 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.
-- `compact="auto"` needs a parent with a width — it is a size container.
-- Page numbers keep a square footprint up to two digits; wider numbers grow the button.
+- By default the nav fills its parent and is a size container: it needs a parent with a width.
+- Page numbers use the Button `tight` density: tabular figures, a square footprint up to two digits; wider numbers grow the button.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves between the arrows and the page numbers. |
 | `Enter` · `Space` | Opens the focused page. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - A `<nav>` landmark named by `labels.nav`.
 - The current page has `aria-current="page"`; every page button is named by `labels.page` («Страница 3»).
 - The edge arrows are `disabled`; the ellipsis is `aria-hidden`.
@@ -118,15 +121,15 @@ Pagination              <nav aria-label={labels.nav}>; size and compact mode
 | [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`. |
-| [narrow.tsx](examples/narrow.tsx) | A 320 px card footer: `compact` always shows «current / total», `compact="auto"` switches by the container width — `compact`. |
+| [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
 - `page` / `onPageChange` → use `value` / `onValueChange`.
 - A 0-based page index → pages start at `1`.
 - Passing `aria-label` to rename the landmark → use `labels={{ nav: "…" }}`.
-- `compact="auto"` inside a shrink-wrapped flex item → give the parent a width.
+- Pagination inside a shrink-wrapped flex item → give the parent a width; it measures its own container.
 - A pager under a DataTable → the table renders its own.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md), Icon (`nav.chevronLeft`, `nav.chevronRight`)
+- **Built from:** [Button](../button/COMPONENT.md), Icon (`nav.chevronLeft`, `nav.chevronRight`), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [DataTable](../data-table/COMPONENT.md), [Select](../select/COMPONENT.md), [Stepper](../stepper/COMPONENT.md)

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

@@ -16,36 +16,36 @@ export default function PaginationControlledExample() {
 
   return (
     <Card.Root>
-      <div className={styles.footer}>
-        <Typography as="span" variant="body-s" tone="secondary">
-          Счета {from}–{to} из {TOTAL_INVOICES}
-        </Typography>
-        <div className={styles.controls}>
-          <Select.Root
-            size="s"
-            value={perPage}
-            onValueChange={(next) => {
-              setPerPage(next);
-              setPage(1);
-            }}
-          >
-            <Select.Trigger aria-label="Строк на странице">
-              <Select.Value />
-            </Select.Trigger>
-            <Select.Content>
-              <Select.Item value="10">10 строк</Select.Item>
-              <Select.Item value="25">25 строк</Select.Item>
-              <Select.Item value="50">50 строк</Select.Item>
-            </Select.Content>
-          </Select.Root>
-          <Pagination
-            size="s"
-            value={page}
-            onValueChange={setPage}
-            totalPages={Math.ceil(TOTAL_INVOICES / pageSize)}
-          />
+      <Card.Body>
+        <div className={styles.footer}>
+          <Typography as="span" variant="body-s" tone="secondary">
+            Счета {from}–{to} из {TOTAL_INVOICES}
+          </Typography>
+          <div className={styles.controls}>
+            <Select.Root
+              value={perPage}
+              onValueChange={(next) => {
+                setPerPage(next);
+                setPage(1);
+              }}
+            >
+              <Select.Trigger aria-label="Строк на странице">
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Content>
+                <Select.Item value="10">10 строк</Select.Item>
+                <Select.Item value="25">25 строк</Select.Item>
+                <Select.Item value="50">50 строк</Select.Item>
+              </Select.Content>
+            </Select.Root>
+            <Pagination
+              value={page}
+              onValueChange={setPage}
+              totalPages={Math.ceil(TOTAL_INVOICES / pageSize)}
+            />
+          </div>
         </div>
-      </div>
+      </Card.Body>
     </Card.Root>
   );
 }

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

@@ -2,13 +2,11 @@
 
 /* A list footer in a Card: the range on the left, rows per page and pages on the right; wraps when narrow. */
 .footer {
-  box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--prime-space-3);
-  padding: var(--prime-space-3) var(--prime-space-4);
 }
 
 .controls {

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

@@ -1,4 +1,4 @@
-/** A 320 px card footer: `compact` always shows «current / total», `compact="auto"` switches by the container width — `compact`. */
+/** A 320 px card footer: by default the numbers give way to «current / total» on a narrow width, `compact` always shows it — `compact`. */
 import { Card, Pagination, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -8,15 +8,15 @@ export default function PaginationNarrowExample() {
     <Card.Root className={styles.narrow}>
       <Card.Body>
         <div>
-          <Pagination compact totalPages={12} defaultValue={3} />
+          <Pagination totalPages={12} defaultValue={3} />
           <Typography as="span" variant="caption" tone="muted">
-            compact
+            по умолчанию
           </Typography>
         </div>
         <div>
-          <Pagination compact="auto" totalPages={12} defaultValue={3} />
+          <Pagination compact totalPages={12} defaultValue={3} />
           <Typography as="span" variant="caption" tone="muted">
-            compact="auto"
+            compact
           </Typography>
         </div>
       </Card.Body>