prime-ui-kit 0.13.1 → 0.15.0

package/dist/skill/reference/components/page-content/examples/sections.tsx

@@ -0,0 +1,81 @@
+/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `PageContent.Section`, `label`, `description`, `PageContent.Actions`, `layout`. */
+import {
+  Card,
+  DataTable,
+  type DataTableColumn,
+  LinkButton,
+  PageContent,
+  Typography,
+} from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Invoice = { id: string; client: string; amount: number };
+
+const INVOICES: Invoice[] = [
+  { id: "СЧ-1042", client: "ООО «Север»", amount: 184_000 },
+  { id: "СЧ-1041", client: "ИП Лаптева", amount: 42_500 },
+  { id: "СЧ-1039", client: "АО «Техносфера»", amount: 610_000 },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Invoice>[] = [
+  { id: "id", header: "Счёт", cell: (row) => row.id },
+  { id: "client", header: "Клиент", cell: (row) => row.client },
+  {
+    id: "amount",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+];
+
+export default function PageContentSectionsExample() {
+  return (
+    <div className={styles.main}>
+      <PageContent.Body>
+        <PageContent.Grid>
+          <PageContent.Cell span={6}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>Выставлено</Card.Label>
+              <Card.Value>2,4 млн ₽</Card.Value>
+              <Card.Delta tone="success">+9% к сентябрю</Card.Delta>
+            </Card.Root>
+          </PageContent.Cell>
+          <PageContent.Cell span={6}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>Оплачено</Card.Label>
+              <Card.Value>1,9 млн ₽</Card.Value>
+              <Card.Delta tone="neutral">79% выставленного</Card.Delta>
+            </Card.Root>
+          </PageContent.Cell>
+        </PageContent.Grid>
+        <PageContent.Section label="Последние счета" description="Три последних за октябрь">
+          <PageContent.Actions>
+            <LinkButton href="#invoices">Все счета</LinkButton>
+          </PageContent.Actions>
+          <DataTable columns={COLUMNS} rows={INVOICES} getRowKey={(row) => row.id} paging="none" />
+        </PageContent.Section>
+        <PageContent.Section
+          layout="aside"
+          label="Реквизиты в счетах"
+          description="Попадают в каждый новый счёт."
+        >
+          <Card.Root variant="panel">
+            <Card.Body>
+              <Typography variant="body-m" tone="secondary">
+                ООО «Прайм Софт», ИНН 7701234567, р/с в Т-Банке.
+              </Typography>
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
+      </PageContent.Body>
+    </div>
+  );
+}

package/dist/skill/reference/components/page-content/examples/variants.tsx

@@ -4,24 +4,17 @@ import { Card, PageContent, Typography } from "prime-ui-kit";
 import styles from "./examples.module.css";
 
 const WIDTHS = [
-  { value: "full", title: "Сделки", text: "Колонка занимает всю ширину main." },
-  { value: "wide", title: "Дашборд продаж", text: "Не шире ширины контента, по центру." },
-  {
-    value: "readable",
-    title: "Условия использования",
-    text: "Не шире колонки для чтения, по центру.",
-  },
+  { value: "full", text: "Сделки: колонка занимает всю ширину main." },
+  { value: "wide", text: "Дашборд продаж: не шире ширины контента, по центру." },
+  { value: "readable", text: "Условия использования: не шире колонки для чтения, по центру." },
 ] as const;
 
 export default function PageContentVariantsExample() {
   return (
     <div className={styles.main}>
       <div className={styles.stack}>
-        {WIDTHS.map(({ value, title, text }) => (
+        {WIDTHS.map(({ value, text }) => (
           <PageContent.Root key={value} maxWidth={value}>
-            <PageContent.Header>
-              <PageContent.Title>{title}</PageContent.Title>
-            </PageContent.Header>
             <PageContent.Body>
               <Card.Root>
                 <Card.Body>

package/dist/skill/reference/components/page-toolbar/COMPONENT.md

@@ -3,7 +3,7 @@
 **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.
@@ -11,7 +11,7 @@
 - Any page that has to work from 320px 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
@@ -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,26 +83,28 @@ 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 |
+| 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 |
 | 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
@@ -111,9 +113,9 @@ PageToolbar has no variants: the layout follows the toolbar's width.
 No keyboard interaction.
 
 ### ARIA
-- A plain `<div>`: name it with `aria-label` when a page has more than one panel.
+- 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`.
+- An icon-only primary action carries `aria-label`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -126,7 +128,7 @@ No `labels`.
 | [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`. |
 | [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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/components/progress-bar/COMPONENT.md

@@ -177,7 +177,7 @@ No keyboard interaction.
 | [sizes.tsx](examples/sizes.tsx) | Every tier: the line grows from 4 to 8 px like the Slider track — `size`. |
 | [states.tsx](examples/states.tsx) | Loading takes the bar's own geometry, so the data lands without a jump — `loading`. |
 | [custom-max.tsx](examples/custom-max.tsx) | A scale of steps instead of percent: 3 of 5 profile steps — `max`. |
-| [segments.tsx](examples/segments.tsx) | Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list — `segments`, `segmentGap`, `max`. |
+| [segments.tsx](examples/segments.tsx) | Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list with its own spoken text — `segments`, `segmentGap`, `max`, `labels`. |
 | [legend.tsx](examples/legend.tsx) | Shares of categories in their chart colors with a legend of color · name · value · share — `color`, `legend`, `formatValue`. |
 | [ranking.tsx](examples/ranking.tsx) | Rankings as rows of label · value · share over a bar: top cities against the leader and a funnel against its first step — `layout`, `scale`. |
 | [steps.tsx](examples/steps.tsx) | The scale as whole cells that fill one after another: 2 of 5 onboarding steps, forward and back — `steps`, `max`. |

package/dist/skill/reference/components/progress-bar/examples/segments.tsx

@@ -1,4 +1,4 @@
-/** Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list — `segments`, `segmentGap`, `max`. */
+/** Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list with its own spoken text — `segments`, `segmentGap`, `max`, `labels`. */
 import { ProgressBar, type ProgressSegment } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -26,7 +26,7 @@ export default function ProgressBarSegmentsExample() {
         label="Хранилище: 71 из 100 ГБ"
         showValue
       />
-      <ProgressBar segments={[]} label="Нет данных за период" />
+      <ProgressBar segments={[]} label="Заявки за ноябрь" labels={{ empty: "Заявок пока нет" }} />
     </div>
   );
 }

package/dist/skill/reference/components/progress-circle/COMPONENT.md

@@ -171,7 +171,7 @@ No keyboard interaction.
 | [states.tsx](examples/states.tsx) | Loading is a Skeleton ring of the same diameter and stroke; the number in the centre waits for the data — `loading`. |
 | [inner-content.tsx](examples/inner-content.tsx) | The center holds a percentage, a count on its own scale or an icon — `children`, `max`. |
 | [under-way.tsx](examples/under-way.tsx) | An import whose share is not known yet turns a quarter arc, then fills and swaps its icon; a sync turns while its share grows — `value`, `spin`, `children`. |
-| [segments.tsx](examples/segments.tsx) | Parts of a whole clockwise from the top: a closed ring, free capacity up to `max`, separate arcs and an empty list — `segments`, `segmentGap`. |
+| [segments.tsx](examples/segments.tsx) | Parts of a whole clockwise from the top: a closed ring, free capacity up to `max`, separate arcs and an empty list with its own spoken text — `segments`, `segmentGap`, `labels`. |
 | [legend.tsx](examples/legend.tsx) | A ring of category shares with a legend beside it, in the categories' chart colors — `color`, `legend`, `formatValue`. |
 
 ## Mistakes

package/dist/skill/reference/components/progress-circle/examples/segments.tsx

@@ -1,4 +1,4 @@
-/** Parts of a whole clockwise from the top: a closed ring, free capacity up to `max`, separate arcs and an empty list — `segments`, `segmentGap`. */
+/** Parts of a whole clockwise from the top: a closed ring, free capacity up to `max`, separate arcs and an empty list with its own spoken text — `segments`, `segmentGap`, `labels`. */
 import { ProgressCircle, type ProgressSegment, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -54,9 +54,14 @@ export default function ProgressCircleSegmentsExample() {
         </Typography>
       </div>
       <div className={styles.item}>
-        <ProgressCircle size="xl" segments={[]} aria-label="Нет данных" />
+        <ProgressCircle
+          size="xl"
+          segments={[]}
+          aria-label="Заявки за ноябрь"
+          labels={{ empty: "Заявок пока нет" }}
+        />
         <Typography as="span" variant="caption" tone="muted">
-          Нет данных
+          Заявки за ноябрь
         </Typography>
       </div>
     </div>

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

@@ -152,6 +152,7 @@ The radiogroup carries `data-size`, `data-orientation`, `aria-orientation`, `ari
 | [group.tsx](examples/group.tsx) | A required group with option descriptions and the group's error under the options — `label`, `required`, `hint`, `error`. |
 | [orientation.tsx](examples/orientation.tsx) | Options stacked in a column and laid out in a wrapping row — `orientation`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the chosen plan and shows it in the hint — `value`, `onValueChange`. |
+| [in-form.tsx](examples/in-form.tsx) | Choices of an order form: a required group shows its error after a submit without a choice, an optional one is marked — `name`, `required`, `optional`, `error`. |
 
 ## Mistakes
 - `Radio.Root` outside `Radio.Group` → it throws; every option needs the group.

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

@@ -0,0 +1,14 @@
+/* Layout of the Radio scenarios: semantic tokens only. */
+
+/* in-form.tsx: groups, then actions (group → actions 32). */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-6);
+  width: min(100%, var(--prime-modal-width-s));
+}
+
+.formActions {
+  display: flex;
+  margin-top: var(--prime-space-2);
+}

package/dist/skill/reference/components/radio/examples/in-form.tsx

@@ -0,0 +1,45 @@
+/** Choices of an order form: a required group shows its error after a submit without a choice, an optional one is marked — `name`, `required`, `optional`, `error`. */
+import { Button, Radio } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function RadioInFormExample() {
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const chosen = new FormData(event.currentTarget).get("delivery");
+    setError(chosen ? undefined : "Выберите способ доставки");
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <Radio.Group
+        label="Способ доставки"
+        name="delivery"
+        required
+        error={error}
+        onValueChange={() => setError(undefined)}
+      >
+        <Radio.Root value="courier">
+          <Radio.Label>Курьером до склада</Radio.Label>
+        </Radio.Root>
+        <Radio.Root value="pickup">
+          <Radio.Label>Самовывоз с терминала</Radio.Label>
+        </Radio.Root>
+      </Radio.Group>
+      <Radio.Group label="Упаковка" name="packing" optional>
+        <Radio.Root value="pallet">
+          <Radio.Label>На паллетах</Radio.Label>
+        </Radio.Root>
+        <Radio.Root value="crate">
+          <Radio.Label>В обрешётке</Radio.Label>
+        </Radio.Root>
+      </Radio.Group>
+      <div className={styles.formActions}>
+        <Button.Root type="submit">Оформить заказ</Button.Root>
+      </div>
+    </form>
+  );
+}

package/dist/skill/reference/components/scroll-container/COMPONENT.md

@@ -160,6 +160,7 @@ No `labels`.
 | [auto-scroll.tsx](examples/auto-scroll.tsx) | A task dragged to the top or bottom edge of a scrolling list scrolls it, faster the closer it comes — `ScrollContainer`, `Dnd.Sortable`. |
 | [overscroll.tsx](examples/overscroll.tsx) | At the end of the list the scroll passes on to the page instead of stopping — `overscrollBehavior`. |
 | [chat.tsx](examples/chat.tsx) | A support chat pinned to its last message: a sent message keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. |
+| [load-more.tsx](examples/load-more.tsx) | An order log that loads the next page as the reader nears its end, with loading lines in the rows' place — `onReachEnd`. |
 
 ## Mistakes
 - `overflow: auto` on a plain `div` inside a flex column that never shrinks → use ScrollContainer (it sets `min-height: 0`).

package/dist/skill/reference/components/scroll-container/examples/auto-scroll.tsx

@@ -22,9 +22,9 @@ export default function ScrollContainerAutoScrollExample() {
 
   return (
     <Card.Root role="region" className={styles.card} aria-label="План проекта">
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        План проекта
-      </Typography>
+      <Card.Header>
+        <Card.Title>План проекта</Card.Title>
+      </Card.Header>
       <ScrollContainer>
         <Dnd.Root>
           <Dnd.Sortable

package/dist/skill/reference/components/scroll-container/examples/chat.tsx

@@ -57,9 +57,9 @@ export default function ScrollContainerChatExample() {
 
   return (
     <Card.Root className={styles.chat}>
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        ООО «Гранит» · счёт № 4821
-      </Typography>
+      <Card.Header>
+        <Card.Title>ООО «Гранит» · счёт № 4821</Card.Title>
+      </Card.Header>
       <ScrollContainer
         anchor="end"
         onReachStart={loadOlder}

package/dist/skill/reference/components/scroll-container/examples/edges.tsx

@@ -22,9 +22,12 @@ export default function ScrollContainerEdgesExample() {
     <div className={styles.layout}>
       {EDGES.map((edges) => (
         <Card.Root key={edges} role="region" className={styles.card} aria-label={`Лента: ${edges}`}>
-          <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-            {edges}
-          </Typography>
+          <Card.Header>
+            <Card.Title>Лента событий</Card.Title>
+            <Typography as="span" variant="caption" tone="muted">
+              {edges}
+            </Typography>
+          </Card.Header>
           <ScrollContainer edges={edges}>
             <ul className={styles.list}>
               {EVENTS.map((event) => (

package/dist/skill/reference/components/scroll-container/examples/examples.module.css

@@ -17,15 +17,11 @@
   width: auto;
 }
 
-.cardTitle {
-  padding: var(--prime-space-3) var(--prime-space-4);
-}
-
 .list {
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: 0 var(--prime-space-4) var(--prime-space-3);
+  padding: var(--prime-space-2) var(--prime-space-4) var(--prime-space-3);
   list-style: none;
 }
 
@@ -48,7 +44,7 @@
 }
 
 .messages {
-  padding-top: var(--prime-space-2);
+  min-height: 0;
 }
 
 /* Older messages loading: lines in the messages' geometry, at the top where they will appear. */
@@ -77,7 +73,7 @@
 
 /* Two-axis scroller: the side padding lives on the scrolling element itself (foundation §7). */
 .canvas {
-  padding: 0 var(--prime-space-4) var(--prime-space-3);
+  padding: var(--prime-space-3) var(--prime-space-4);
 }
 
 .grid {
@@ -94,15 +90,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* lock.tsx: the title and the review button in one row above the queue. */
-.cardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-  padding: var(--prime-space-3) var(--prime-space-4);
-}
-
 /* snap.tsx: a row of fixed-width cards; the padding keeps the edge cards' rings unclipped. */
 .tiles {
   display: flex;
@@ -124,7 +111,7 @@
   flex-direction: column;
   gap: var(--prime-space-1);
   margin: 0;
-  padding: 0 var(--prime-space-3) var(--prime-space-3);
+  padding: var(--prime-space-3);
   list-style: none;
 }
 

package/dist/skill/reference/components/scroll-container/examples/load-more.tsx

@@ -0,0 +1,51 @@
+/** An order log that loads the next page as the reader nears its end, with loading lines in the rows' place — `onReachEnd`. */
+import { Card, ScrollContainer, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const ORDERS = Array.from({ length: 40 }, (_, index) => ({
+  id: 2400 - index,
+  amount: `${(18 + ((index * 7) % 23)) * 1000} ₽`,
+}));
+
+const PAGE = 10;
+
+export default function ScrollContainerLoadMoreExample() {
+  const [shown, setShown] = React.useState(PAGE);
+  const [loading, setLoading] = React.useState(false);
+  const done = shown >= ORDERS.length;
+
+  const loadMore = () => {
+    if (done) return;
+    setLoading(true);
+    // The promise keeps the region `aria-busy` and stops repeat calls until it settles.
+    return new Promise<void>((resolve) => {
+      window.setTimeout(() => {
+        setShown((count) => Math.min(count + PAGE, ORDERS.length));
+        setLoading(false);
+        resolve();
+      }, 800);
+    });
+  };
+
+  return (
+    <Card.Root role="region" className={styles.card} aria-label="Журнал заказов">
+      <Card.Header>
+        <Card.Title>Журнал заказов</Card.Title>
+      </Card.Header>
+      <ScrollContainer onReachEnd={loadMore} tabIndex={0} aria-label="Заказы">
+        <ul className={styles.list}>
+          {ORDERS.slice(0, shown).map((order) => (
+            <li key={order.id}>
+              <Typography as="span" variant="body-m" tone="secondary">
+                Заказ № {order.id} · {order.amount}
+              </Typography>
+            </li>
+          ))}
+        </ul>
+        {loading ? <Skeleton lines={3} className={styles.older} /> : null}
+      </ScrollContainer>
+    </Card.Root>
+  );
+}