prime-ui-kit 0.14.0 → 0.16.0

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

@@ -10,13 +10,14 @@
 - A strip whose overflow must be hinted without a scrollbar (`scrollbar="hidden"` with the default `edges="fade"`): tab rows, chip strips, attachment trays; add `snap` for tiles and cards.
 - A region that is itself a filled surface (a floating panel, a code well): `edges="shadow"`.
 - A list that must hold still for a while (an open review, a gesture that must not move it): `lock`.
-- A chat or a live log that stays at its newest entry (`anchor="end"`) and loads history while scrolling back (`onReachStart`).
+- A live log that stays at its newest entry (`anchor="end"`) and loads history while scrolling back (`onReachStart`).
 - A feed that loads the next page near its end (`onReachEnd`).
 
 ## When not to use
 - Modal / Drawer / Sheet body, Select / Dropdown / Popover / TagSelect panels, CommandMenu list, Tabs and SegmentedControl rows, DataTable and Gantt viewports, Kanban, Sidebar, the Composer tray → they already scroll through ScrollContainer; do not wrap them again ([Modal](../modal/COMPONENT.md), [Drawer](../drawer/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md), [Popover](../popover/COMPONENT.md), [CommandMenu](../command-menu/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)).
 - The main page column inside the app shell → `AppShell.Main` is already a ScrollContainer ([AppShell](../../layout/app-shell/COMPONENT.md)).
 - Content that should simply grow with the page → no scroll container at all.
+- A chat → use [Chat](../chat/COMPONENT.md) (`Chat.Messages` keeps its own scroll region, selection and jumps).
 - A long list of thousands of rows → ScrollContainer scrolls it, the host renders only the rows in view (DataTable `paging="infinite"`, `Chat.Messages`, Gantt); ScrollContainer has no virtual mode of its own.
 
 ## Import
@@ -43,12 +44,12 @@ ScrollContainer   <div> (or the `as` tag); thin scrollbar, soft hidden edges
 | `edges` | `"fade" \| "shadow" \| "none"` | `"fade"` | Edges that hide content: `fade` dissolves them over any background; `shadow` — a soft shadow on the region's own fill (a floating panel, a code well); `none` — plain edges. |
 | `scrollbar` | `"thin" \| "hidden"` | `"thin"` | `thin` — the kit's quiet scrollbar; `hidden` — no scrollbar, keep `edges` on so the overflow stays visible. |
 | `lock` | `boolean` | `false` | The person cannot scroll the region (wheel, touch, keys, a drag's auto-scroll); code still can. Sets `data-lock`. |
-| `snap` | `boolean` | `false` | Scrolling comes to rest on the start of a child (proximity snapping). For strips of tiles and cards; not with `anchor="end"`. |
+| `snap` | `boolean \| "mandatory"` | `false` | Scrolling comes to rest on the start of a child: `true` near one (strips of tiles and cards), `"mandatory"` always on one (board columns, a carousel). A Dnd drag inside turns it off; not with `anchor="end"`. |
 | `anchor` | `"start" \| "end"` | `"start"` | `end` — a chat or a log: opens at the end and follows new content while the person is at the end; scrolled away, the view holds still. |
 | `onReachStart` | `() => void \| Promise<void>` | — | Fires within 120 px of the start, once per approach: load older content. A returned promise blocks repeats and sets `aria-busy`; content added above keeps the view. |
 | `onReachEnd` | `() => void \| Promise<void>` | — | The scroll position came within 120 px of the end: load the next page. Same once-per-approach and promise rules as `onReachStart`. |
 | `overscrollBehavior` | `"auto" \| "contain" \| "none"` | `"contain"` | CSS `overscroll-behavior`; `contain` stops scroll chaining into the page. |
-| `as` | `"div" \| "main" \| "aside" \| "section" \| "nav" \| "article"` | `"div"` | Root element; a landmark tag when the region is one. |
+| `as` | `"div" \| "main" \| "aside" \| "section" \| "nav" \| "article" \| "pre"` | `"div"` | Root element; a landmark tag when the region is one, `pre` for preformatted text (CodeBlock). |
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` (height, padding), `aria-label`, `tabIndex`, `role`, event handlers and the other attributes. |
 
 ## Variants
@@ -92,7 +93,8 @@ Only the reader scrolling back unpins the end: content that keeps growing (an an
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `lock` | nothing the person does scrolls the region (wheel, touch, keys, a drag's edge auto-scroll); the position stays, and code may still set it | a list behind an open review, a gesture that must not move it | off |
-| `snap` | a scroll comes to rest on the start of a direct child (proximity snapping); a host aligns deeper items itself | strips of tiles or cards | off |
+| `snap` | a scroll comes to rest on the start of a direct child near one (proximity); a host aligns deeper items itself | strips of tiles or cards | off |
+| `snap="mandatory"` | a scroll always comes to rest on the start of a child | board columns, a carousel of cards | off |
 
 ### Wheel and auto-scroll
 - `axis="horizontal"`: a vertical mouse wheel scrolls the strip sideways while it can move, gliding to an accumulated target (instant under reduced motion). A trackpad's sideways swipe and Shift + wheel stay native; a wheel gesture that began outside the strip keeps scrolling the page; at the strip's edge the wheel chains to the page. There is no drag-to-scroll: a press-and-drag in a strip belongs to its items (reordering tiles, tabs); touch pans natively.
@@ -112,16 +114,16 @@ Each fires once per approach — again after the position leaves the zone or the
 | State | Driven by | DOM |
 |---|---|---|
 | edge treatment | `edges` | `data-edges="fade" \| "shadow"` (none for `none`) |
-| content hidden at an edge | scroll position (with `edges="fade"`), measured at most once per frame on scroll, on resize of the region or a child and when children are added; only the scroll axes; logical in RTL | `data-overflow-top`, `data-overflow-bottom`, `data-overflow-start`, `data-overflow-end` = `"true"`; `--edge-*` depths written only while they change (within the last `--prime-space-8` of an edge), on non-inherited properties |
+| content hidden at an edge | scroll position (with `edges="fade"`), measured at most once per frame on scroll, on resize of the region or a child and when children are added; only the scroll axes; logical in RTL | `data-overflow-top`, `data-overflow-bottom`, `data-overflow-start`, `data-overflow-end` = `"true"`; `--edge-*` depths written only while they change (within the last fade depth of an edge, `--scroll-fade-depth`), on non-inherited properties |
 | locked | `lock` | `data-lock`, `overflow: hidden` |
-| snapping | `snap` | `data-snap`, `scroll-snap-type: <axis> proximity`; `scroll-snap-align: start` on the children |
+| snapping | `snap` | `data-snap="proximity" \| "mandatory"`, `scroll-snap-type: <axis> <strictness>`; `scroll-snap-align: start` on the children; off while a Dnd list inside carries an item (`data-dnd-carrying`) |
 | kit anchoring | `anchor="end"` or `onReachStart` | `data-anchor="end" \| "start"`, `overflow-anchor: none`: the kit keeps the visible entry in place (or the end, while pinned) before paint, the same in every browser |
 | pinned to the end | `anchor="end"` and the position within 4 px of the end | content changes scroll to the new end at once (high-frequency: no animation) |
 | loading at an edge | a pending promise from `onReachStart` / `onReachEnd` | `aria-busy="true"` |
 | content fits | the content is no larger than the region along its axis (re-measured on resize of the region or a child, and when children change); never with `anchor="end"`, `onReachStart` or `onReachEnd` — a region that follows its content always stays a scroller | `data-fits`, `overflow: hidden`: a region that cannot scroll is no scroller, so the browser never composites a layer for a sub-pixel overflow; text or inline content straight inside keeps it a scroller |
 | keyboard focus | `tabIndex={0}` on a region without focusable content | inset focus ring (`--prime-focus-offset-inset`) |
 
-The scrollbar thumb uses `fill-strong`, darkening to `fill-strong-hover` on hover (WebKit). The fade and the shadow follow the scroll at once: scrolling is high-frequency, so nothing animates. A fade region sets `scroll-padding` of the fade depth on its scroll axes, so focus, `scrollIntoView` and a snapped child land clear of the fade.
+The scrollbar thumb uses `fill-strong` and stays still on hover in every engine. The fade and the shadow follow the scroll at once: scrolling is high-frequency, so nothing animates. A fade region sets `scroll-padding` of the fade depth on its scroll axes, so focus, `scrollIntoView` and a snapped child land clear of the fade. The depth is `--scroll-fade-depth` (`--prime-space-8`), the one public hook of the region: a switcher that draws its own edge overlays sets it to their width.
 
 ## Layout & spacing
 - Sets `min-width: 0` and `min-height: 0`, so it shrinks inside a flex or grid parent; give the parent (or the container) a height.
@@ -130,6 +132,8 @@ The scrollbar thumb uses `fill-strong`, darkening to `fill-strong-hover` on hove
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `↑` · `↓` · `←` · `→` | Scroll the focused region (with `tabIndex={0}`) by a step |
@@ -137,7 +141,9 @@ The scrollbar thumb uses `fill-strong`, darkening to `fill-strong-hover` on hove
 | `Home` · `End` | To the start and to the end |
 
 ### ARIA
-- Renders a plain element; add `tabIndex={0}` and `aria-label` when the region has no focusable content but must scroll from the keyboard (the browser scrolls it; the ring is inset).
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- Renders a plain element; a region named by `aria-label` / `aria-labelledby` becomes `role="region"` (a `role` of its own wins, e.g. `log`). Add `tabIndex={0}` and a name when the region has no focusable content but must scroll from the keyboard (the browser scrolls it; the ring is inset).
 - Choose a semantic `as` (`main`, `nav`, `aside`) when the region is a landmark.
 - `edges` is only decoration: content under a fade or a shadow stays reachable and scrolls by wheel, touch and focus; focus and `scrollIntoView` stop clear of a fade.
 - `lock` keeps the content in the focus order: a locked region does not scroll, its items stay reachable.
@@ -151,15 +157,16 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A feed that scrolls on its own inside a fixed-height card, with the kit's thin scrollbar. |
+| [overview.tsx](examples/overview.tsx) | A feed that scrolls on its own inside a fixed-height card, with the kit's thin scrollbar — `ScrollContainer`. |
 | [variants.tsx](examples/variants.tsx) | A strip that scrolls sideways and a wide schedule that scrolls both ways — `axis`. |
 | [edges.tsx](examples/edges.tsx) | Hidden edges fade over any background, take a soft shadow on a filled surface, or stay plain — `edges`. |
 | [scrollbar.tsx](examples/scrollbar.tsx) | The kit's quiet thin bar on a list and no bar on a strip of chips, where the faded edges show the overflow — `scrollbar`. |
-| [snap.tsx](examples/snap.tsx) | A strip of warehouse cards that comes to rest on a card's start, scrolled by touch, a trackpad or the mouse wheel — `snap`, `axis`. |
+| [snap.tsx](examples/snap.tsx) | A strip of warehouse cards that always comes to rest on a card's start, scrolled by touch, a trackpad or the mouse wheel — `snap`, `axis`. |
 | [lock.tsx](examples/lock.tsx) | While an order is opened for review, the queue behind it holds still: no wheel, touch, key or drag moves it — `lock`. |
 | [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`. |
+| [log.tsx](examples/log.tsx) | A live exchange log pinned to its last entry: a new entry 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`).
@@ -167,7 +174,7 @@ No `labels`.
 - `overflow: auto` anywhere in a kit component → a ScrollContainer (`src/styles/scroll.test.ts` fails on a raw scroller).
 - A hand-made edge-fade mask, edge shadow or hidden scrollbar → `edges` and `scrollbar="hidden"`.
 - `edges="fade"` on a region that paints its own fill or shadow → the mask dissolves them; use `edges="shadow"`.
-- A hand-made edge auto-scroll loop for a drag → `autoScrollStep` / `edgeSpeed` from `src/internal/edgeAutoScroll`.
+- A hand-made edge auto-scroll loop for a drag → `createEdgeAutoScroll` from `src/internal/edgeAutoScroll`.
 - `snap` together with `anchor="end"` → snapping fights the pin to the end.
 - Wrapping a Modal body or Dropdown panel in another ScrollContainer → they already scroll.
 - `scrollTop = scrollHeight` in an effect after every message → `anchor="end"` (it also leaves a reader who scrolled up alone).

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
@@ -38,10 +38,14 @@ export default function ScrollContainerAutoScrollExample() {
               setTasks((current) => moveBefore(current, id, beforeId, (task) => task.id))
             }
             renderItem={(task) => (
-              <Dnd.SortableItem id={task.id} className={styles.task}>
-                <Typography as="span" variant="body-m" truncate>
-                  {task.title}
-                </Typography>
+              <Dnd.SortableItem id={task.id}>
+                <Card.Root>
+                  <Card.Body>
+                    <Typography as="span" variant="body-m" truncate>
+                      {task.title}
+                    </Typography>
+                  </Card.Body>
+                </Card.Root>
               </Dnd.SortableItem>
             )}
           />

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

@@ -22,19 +22,22 @@ 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}>
+            <Card.List>
               {EVENTS.map((event) => (
-                <li key={event}>
+                <Card.ListItem key={event}>
                   <Typography as="span" variant="body-m" tone="secondary">
                     {event}
                   </Typography>
-                </li>
+                </Card.ListItem>
               ))}
-            </ul>
+            </Card.List>
           </ScrollContainer>
         </Card.Root>
       ))}

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

@@ -17,57 +17,23 @@
   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);
-  list-style: none;
-}
-
-.list li {
-  padding-block: var(--prime-space-2);
-  border-bottom: var(--prime-border-width) solid var(--prime-color-border-subtle);
-}
-
-/* Dividers only between items. */
-.list li:last-child {
-  border-bottom: 0;
-}
-
-/* chat.tsx: title, the scrolling messages and the composer in a fixed-height card. */
-.chat {
+/* log.tsx: title, the scrolling entries in a fixed-height card. */
+.log {
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr);
   width: min(100%, calc(var(--prime-space-24) * 4));
   height: calc(var(--prime-space-24) * 3.5);
 }
 
-.messages {
-  padding-top: var(--prime-space-2);
+.entries {
+  min-height: 0;
 }
 
-/* Older messages loading: lines in the messages' geometry, at the top where they will appear. */
+/* Older entries loading: lines in the entries' geometry, at the top where they will appear. */
 .older {
   margin: 0 var(--prime-space-4) var(--prime-space-2);
 }
 
-.composer {
-  display: flex;
-  align-items: center;
-  gap: var(--prime-space-2);
-  padding: var(--prime-space-3) var(--prime-space-4);
-}
-
-.composerField {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
 .strip {
   display: flex;
   gap: var(--prime-space-2);
@@ -77,7 +43,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 {
@@ -89,28 +55,16 @@
 
 .cell {
   padding: var(--prime-space-2);
-  border-radius: var(--prime-radius-s);
-  background: var(--prime-color-fill-subtle);
-  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. */
+/* snap.tsx: a row of fixed-width cards (a flex row: its items draw no list markers); the padding
+   keeps the edge cards' rings unclipped. */
 .tiles {
   display: flex;
   gap: var(--prime-space-3);
   width: max-content;
   margin: 0;
   padding: var(--prime-space-1);
-  list-style: none;
 }
 
 .tile {
@@ -124,16 +78,5 @@
   flex-direction: column;
   gap: var(--prime-space-1);
   margin: 0;
-  padding: 0 var(--prime-space-3) var(--prime-space-3);
-  list-style: none;
-}
-
-.task {
-  display: flex;
-  align-items: center;
-  min-height: var(--prime-space-10);
-  padding-inline: var(--prime-space-3);
-  border-radius: var(--prime-radius-m);
-  background: var(--prime-color-fill-muted);
-  cursor: grab;
+  padding: var(--prime-space-3);
 }

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="Заказы">
+        <Card.List>
+          {ORDERS.slice(0, shown).map((order) => (
+            <Card.ListItem key={order.id}>
+              <Typography as="span" variant="body-m" tone="secondary">
+                Заказ № {order.id} · {order.amount}
+              </Typography>
+            </Card.ListItem>
+          ))}
+        </Card.List>
+        {loading ? <Skeleton lines={3} className={styles.older} /> : null}
+      </ScrollContainer>
+    </Card.Root>
+  );
+}

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

@@ -20,10 +20,8 @@ export default function ScrollContainerLockExample() {
 
   return (
     <Card.Root role="region" className={styles.card} aria-label="Очередь заказов">
-      <div className={styles.cardHeader}>
-        <Typography as="h3" variant="title-s">
-          Очередь заказов
-        </Typography>
+      <Card.Header>
+        <Card.Title>Очередь заказов</Card.Title>
         <Button.Root
           variant="soft"
           tone="neutral"
@@ -32,17 +30,17 @@ export default function ScrollContainerLockExample() {
         >
           {reviewing ? "Закрыть проверку" : "Проверить заказ"}
         </Button.Root>
-      </div>
+      </Card.Header>
       <ScrollContainer lock={reviewing}>
-        <ul className={styles.list}>
+        <Card.List>
           {ORDERS.map((order) => (
-            <li key={order}>
+            <Card.ListItem key={order}>
               <Typography as="span" variant="body-m">
                 {order}
               </Typography>
-            </li>
+            </Card.ListItem>
           ))}
-        </ul>
+        </Card.List>
       </ScrollContainer>
     </Card.Root>
   );

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

@@ -0,0 +1,97 @@
+/** A live exchange log pinned to its last entry: a new entry keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. */
+import { Button, Card, ScrollContainer, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Entry = { id: number; time: string; text: string };
+
+const HISTORY: Entry[] = [
+  "Выгрузка заказов в 1С начата",
+  "Заказ № 1042 выгружен",
+  "Заказ № 1043 выгружен",
+  "Заказ № 1044: нет склада отгрузки, пропущен",
+  "Остатки склада «Москва» обновлены",
+  "Цены прайса «Опт» обновлены",
+  "Счёт № 4830 выгружен",
+  "Счёт № 4831 выгружен",
+  "Платёж по счёту № 4821 получен",
+  "Контрагент ООО «Гранит» сопоставлен",
+  "Акт № 312 выгружен",
+  "Выгрузка завершена: 9 из 10",
+].map((text, index) => ({
+  id: index + 1,
+  time: `09:${String(index * 4).padStart(2, "0")}`,
+  text,
+}));
+
+const ARRIVING = [
+  "Новый заказ № 1045 принят",
+  "Остатки склада «Казань» обновлены",
+  "Счёт № 4832 выгружен",
+];
+
+const PAGE = 4;
+
+export default function ScrollContainerLogExample() {
+  // The newest entries first; older pages arrive when the reader scrolls up.
+  const [shown, setShown] = React.useState(PAGE);
+  const [loading, setLoading] = React.useState(false);
+  const [arrived, setArrived] = React.useState<Entry[]>([]);
+  const entries = [...HISTORY.slice(-shown), ...arrived];
+
+  const loadOlder = () => {
+    if (shown >= HISTORY.length) 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, HISTORY.length));
+        setLoading(false);
+        resolve();
+      }, 800);
+    });
+  };
+
+  const receive = () => {
+    setArrived((list) => [
+      ...list,
+      {
+        id: HISTORY.length + list.length + 1,
+        time: `10:${String(list.length * 3).padStart(2, "0")}`,
+        text: ARRIVING[list.length % ARRIVING.length],
+      },
+    ]);
+  };
+
+  return (
+    <Card.Root className={styles.log}>
+      <Card.Header>
+        <Card.Title>Обмен с 1С</Card.Title>
+        <Button.Root variant="soft" tone="neutral" onClick={receive}>
+          Новое событие
+        </Button.Root>
+      </Card.Header>
+      <ScrollContainer
+        anchor="end"
+        onReachStart={loadOlder}
+        tabIndex={0}
+        role="log"
+        aria-label="Журнал обмена"
+        className={styles.entries}
+      >
+        {loading ? <Skeleton lines={2} className={styles.older} /> : null}
+        <Card.List>
+          {entries.map((entry) => (
+            <Card.ListItem key={entry.id}>
+              <Typography as="span" variant="caption" tone="muted">
+                {entry.time}
+              </Typography>
+              <Typography variant="body-m">{entry.text}</Typography>
+            </Card.ListItem>
+          ))}
+        </Card.List>
+      </ScrollContainer>
+    </Card.Root>
+  );
+}

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

@@ -8,19 +8,19 @@ const HOURS = Array.from({ length: 12 }, (_, index) => `${String(9 + index).padS
 export default function ScrollContainerOverscrollExample() {
   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 overscrollBehavior="auto" tabIndex={0} aria-label="Журнал выгрузок">
-        <ul className={styles.list}>
+        <Card.List>
           {HOURS.map((hour) => (
-            <li key={hour}>
+            <Card.ListItem key={hour}>
               <Typography as="span" variant="body-m" tone="secondary">
                 {hour} — отчёт выгружен
               </Typography>
-            </li>
+            </Card.ListItem>
           ))}
-        </ul>
+        </Card.List>
       </ScrollContainer>
     </Card.Root>
   );

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

@@ -1,4 +1,4 @@
-/** A feed that scrolls on its own inside a fixed-height card, with the kit's thin scrollbar. */
+/** A feed that scrolls on its own inside a fixed-height card, with the kit's thin scrollbar — `ScrollContainer`. */
 import { Card, ScrollContainer, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -8,19 +8,19 @@ const EVENTS = Array.from({ length: 16 }, (_, index) => `Заказ № ${1040 +
 export default function ScrollContainerOverviewExample() {
   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>
-        <ul className={styles.list}>
+        <Card.List>
           {EVENTS.map((event) => (
-            <li key={event}>
+            <Card.ListItem key={event}>
               <Typography as="span" variant="body-m" tone="secondary">
                 {event}
               </Typography>
-            </li>
+            </Card.ListItem>
           ))}
-        </ul>
+        </Card.List>
       </ScrollContainer>
     </Card.Root>
   );

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

@@ -20,25 +20,31 @@ export default function ScrollContainerScrollbarExample() {
   return (
     <div className={styles.layout}>
       <Card.Root role="region" className={styles.card} aria-label="Клиенты">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          thin
-        </Typography>
+        <Card.Header>
+          <Card.Title>Клиенты</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            thin
+          </Typography>
+        </Card.Header>
         <ScrollContainer>
-          <ul className={styles.list}>
+          <Card.List>
             {CLIENTS.map((client) => (
-              <li key={client}>
+              <Card.ListItem key={client}>
                 <Typography as="span" variant="body-m">
                   {client}
                 </Typography>
-              </li>
+              </Card.ListItem>
             ))}
-          </ul>
+          </Card.List>
         </ScrollContainer>
       </Card.Root>
-      <Card.Root role="region" className={styles.card} aria-label="Фильтры заказов">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          hidden
-        </Typography>
+      <Card.Root role="region" className={styles.card} aria-label="Статусы заказов">
+        <Card.Header>
+          <Card.Title>Статусы заказов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            hidden
+          </Typography>
+        </Card.Header>
         <ScrollContainer axis="horizontal" scrollbar="hidden">
           <div className={styles.strip}>
             {TAGS.map((tag) => (

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

@@ -1,4 +1,4 @@
-/** A strip of warehouse cards that comes to rest on a card's start, scrolled by touch, a trackpad or the mouse wheel — `snap`, `axis`. */
+/** A strip of warehouse cards that always comes to rest on a card's start, scrolled by touch, a trackpad or the mouse wheel — `snap`, `axis`. */
 import { Card, ScrollContainer, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -14,7 +14,7 @@ const WAREHOUSES = [
 
 export default function ScrollContainerSnapExample() {
   return (
-    <ScrollContainer axis="horizontal" snap scrollbar="hidden" aria-label="Склады">
+    <ScrollContainer axis="horizontal" snap="mandatory" scrollbar="hidden" aria-label="Склады">
       <ul className={styles.tiles}>
         {WAREHOUSES.map((warehouse) => (
           <li key={warehouse.id} className={styles.tile}>

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

@@ -10,10 +10,13 @@ const ROOMS = Array.from({ length: 16 }, (_, index) => `Зал ${index + 1}`);
 export default function ScrollContainerVariantsExample() {
   return (
     <div className={styles.layout}>
-      <Card.Root role="region" className={styles.card} aria-label="Фильтры">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          horizontal
-        </Typography>
+      <Card.Root role="region" className={styles.card} aria-label="Статусы заказов">
+        <Card.Header>
+          <Card.Title>Статусы заказов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            horizontal
+          </Typography>
+        </Card.Header>
         <ScrollContainer axis="horizontal">
           <div className={styles.strip}>
             {TAGS.map((tag) => (
@@ -23,9 +26,12 @@ export default function ScrollContainerVariantsExample() {
         </ScrollContainer>
       </Card.Root>
       <Card.Root role="region" className={styles.card} aria-label="Расписание залов">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          both
-        </Typography>
+        <Card.Header>
+          <Card.Title>Расписание залов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            both
+          </Typography>
+        </Card.Header>
         <ScrollContainer
           axis="both"
           tabIndex={0}
@@ -40,6 +46,7 @@ export default function ScrollContainerVariantsExample() {
                   as="div"
                   variant="caption"
                   tone="secondary"
+                  numeric="tabular"
                   className={styles.cell}
                 >
                   {room} · {hour}