prime-ui-kit 0.14.0 → 0.15.0

package/src/components/description-list/examples/screen.module.css

@@ -0,0 +1,64 @@
+/* Detail page: the header carries the title; two columns that wrap into one on narrow screens, no
+   breakpoints. */
+
+/* Main column grows; the side column keeps ~18rem and drops below once main would get < 30rem. */
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--prime-space-8) var(--prime-space-6);
+}
+
+.main {
+  flex: 999 1 calc(var(--prime-space-24) * 5);
+}
+
+.aside {
+  display: grid;
+  flex: 1 1 calc(var(--prime-space-24) * 3);
+  gap: var(--prime-space-4);
+  min-width: 0;
+}
+
+/* Totals under the table: the amounts end where the «Сумма» column ends (the table's cell padding). */
+.totals {
+  display: grid;
+  gap: var(--prime-space-2);
+  justify-self: end;
+  width: min(100%, calc(var(--prime-space-24) * 3));
+  margin: 0;
+  padding-inline: var(--prime-table-cell-padding-x);
+}
+
+.totalRow {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+}
+
+.totalRow dd {
+  margin: 0;
+}
+
+.amount {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* Client card: who it is, then the facts as label → value pairs. */
+.client {
+  display: grid;
+  gap: var(--prime-space-5);
+}
+
+.person {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-3);
+  min-width: 0;
+}
+
+.personText {
+  display: grid;
+  min-width: 0;
+}

package/src/components/description-list/examples/screen.tsx

@@ -0,0 +1,214 @@
+/** A nested record: the path, the title with its status and due date and the record's actions by weight in the app header, a main column with the line items and a side column with the client's details and the history — `orientation`. */
+import {
+  AppHeader,
+  Avatar,
+  Breadcrumb,
+  Button,
+  Card,
+  DataTable,
+  type DataTableColumn,
+  DescriptionList,
+  Dropdown,
+  Icon,
+  LinkButton,
+  PageContent,
+  PageToolbar,
+  Timeline,
+  Typography,
+} from "prime-ui-kit";
+
+import styles from "./screen.module.css";
+
+type Line = { id: string; name: string; quantity: number; unit: string; price: number };
+
+const LINES: Line[] = [
+  { id: "l1", name: "Лицензия CRM, тариф «Бизнес»", quantity: 25, unit: "мест", price: 12_000 },
+  { id: "l2", name: "Внедрение и настройка", quantity: 40, unit: "ч", price: 3_500 },
+  { id: "l3", name: "Обучение менеджеров", quantity: 2, unit: "дня", price: 18_000 },
+];
+
+const HISTORY = [
+  { id: "h1", title: "Счёт открыт клиентом", date: "2 окт., 11:40" },
+  { id: "h2", title: "Отправлен на billing@veter.ru", date: "30 сент., 16:05" },
+  { id: "h3", title: "Создан · Анна Климова", date: "30 сент., 15:52" },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+const COUNT = new Intl.NumberFormat("ru-RU");
+
+const NET = LINES.reduce((sum, line) => sum + line.quantity * line.price, 0);
+const VAT = Math.round(NET * 0.2);
+
+const TOTALS = [
+  { label: "Без НДС", value: MONEY.format(NET) },
+  { label: "НДС 20%", value: MONEY.format(VAT) },
+];
+
+const COLUMNS: DataTableColumn<Line>[] = [
+  { id: "name", header: "Позиция", accessor: "name" },
+  {
+    id: "quantity",
+    header: "Кол-во",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => `${COUNT.format(row.quantity)} ${row.unit}`,
+  },
+  {
+    id: "price",
+    header: "Цена",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.price),
+  },
+  {
+    id: "sum",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.quantity * row.price),
+  },
+];
+
+export default function DescriptionListScreenExample() {
+  return (
+    <>
+      {/* A nested record titles itself in the app header: the path up to the list, the record as the
+          only h1 with its status and due date under it, the record's actions in the tools row. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <Breadcrumb.Root>
+            <Breadcrumb.Item href="#invoices">Счета</Breadcrumb.Item>
+          </Breadcrumb.Root>
+          <AppHeader.Separator />
+          <AppHeader.Title>
+            Счёт № 2026-0418
+            <AppHeader.Description>Отправлен · оплатить до 14 октября</AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
+          <PageToolbar.Root aria-label="Счёт № 2026-0418">
+            <PageToolbar.Actions>
+              <Dropdown.Root>
+                <Dropdown.Trigger>
+                  <Button.Root variant="soft" tone="neutral" aria-label="Другие действия">
+                    <Button.Icon>
+                      <Icon name="action.more" />
+                    </Button.Icon>
+                  </Button.Root>
+                </Dropdown.Trigger>
+                <Dropdown.Content>
+                  <Dropdown.Item>Дублировать</Dropdown.Item>
+                  <Dropdown.Item>Скачать PDF</Dropdown.Item>
+                  <Dropdown.Separator />
+                  <Dropdown.Item tone="danger">Аннулировать счёт</Dropdown.Item>
+                </Dropdown.Content>
+              </Dropdown.Root>
+              <Button.Root variant="soft" tone="neutral" aria-label="Напомнить клиенту">
+                <Button.Icon>
+                  <Icon name="action.send" />
+                </Button.Icon>
+              </Button.Root>
+              <Button.Root>Отметить оплату</Button.Root>
+            </PageToolbar.Actions>
+          </PageToolbar.Root>
+        </AppHeader.Tools>
+      </AppHeader.Root>
+
+      <PageContent.Root>
+        <PageContent.Body>
+          <div className={styles.columns}>
+            <PageContent.Section label="Позиции" className={styles.main}>
+              <DataTable
+                columns={COLUMNS}
+                rows={LINES}
+                getRowKey={(row) => row.id}
+                paging="none"
+                highlightRowOnHover={false}
+              />
+              {/* Totals line up with the «Сумма» column of the table above: a layout of its own. */}
+              <dl className={styles.totals}>
+                {TOTALS.map((row) => (
+                  <div key={row.label} className={styles.totalRow}>
+                    <dt>
+                      <Typography variant="body-m" tone="secondary">
+                        {row.label}
+                      </Typography>
+                    </dt>
+                    <dd>
+                      <Typography variant="body-m" className={styles.amount}>
+                        {row.value}
+                      </Typography>
+                    </dd>
+                  </div>
+                ))}
+                <div className={styles.totalRow}>
+                  <dt>
+                    <Typography variant="title-m">К оплате</Typography>
+                  </dt>
+                  <dd>
+                    <Typography variant="title-m" className={styles.amount}>
+                      {MONEY.format(NET + VAT)}
+                    </Typography>
+                  </dd>
+                </div>
+              </dl>
+            </PageContent.Section>
+            <aside className={styles.aside} aria-label="Клиент и история">
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">Клиент</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                  <div className={styles.client}>
+                    <span className={styles.person}>
+                      <Avatar.Root color="teal">
+                        <Avatar.Fallback>СВ</Avatar.Fallback>
+                      </Avatar.Root>
+                      <span className={styles.personText}>
+                        <Typography as="span" variant="title-s">
+                          ООО «Северный ветер»
+                        </Typography>
+                        <Typography as="span" variant="caption" tone="muted">
+                          ИНН 7704 512 908
+                        </Typography>
+                      </span>
+                    </span>
+                    <DescriptionList.Root orientation="vertical">
+                      <DescriptionList.Item label="Контакт">
+                        Ольга Мартынова, финансовый директор
+                      </DescriptionList.Item>
+                      <DescriptionList.Item label="Почта для счетов">
+                        <LinkButton href="mailto:billing@veter.ru">billing@veter.ru</LinkButton>
+                      </DescriptionList.Item>
+                    </DescriptionList.Root>
+                  </div>
+                </Card.Body>
+              </Card.Root>
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">История</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                  <Timeline.Root>
+                    <Timeline.Group>
+                      {HISTORY.map((event) => (
+                        <Timeline.Item key={event.id}>
+                          <Timeline.Title>{event.title}</Timeline.Title>
+                          <Timeline.Meta>{event.date}</Timeline.Meta>
+                        </Timeline.Item>
+                      ))}
+                    </Timeline.Group>
+                  </Timeline.Root>
+                </Card.Body>
+              </Card.Root>
+            </aside>
+          </div>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
+  );
+}

package/src/components/description-list/examples/structure.tsx

@@ -13,7 +13,7 @@ export default function DescriptionListStructureExample() {
         <DescriptionList.Item label="Договор">
           <LinkButton href="#contract-118">Договор № 118 от 12 марта</LinkButton>
         </DescriptionList.Item>
-        <DescriptionList.Item label="Email">
+        <DescriptionList.Item label="Почта">
           finance@severny-veter.ru
           <DescriptionList.ItemAction
             label="Написать"

package/src/components/digit-input/COMPONENT.md

@@ -109,6 +109,7 @@ No `variant` or `tone`.
 
 ## Layout & spacing
 - The field hugs its cells (label left-aligned above them); with `fullWidth` it fills the container.
+- The code is always one row: in a container narrower than the row the cells narrow and keep the tier height, so no digit or group wraps to a second line.
 - Label → cells: tier `label-gap`; cells → hint: tier `hint-gap` — the same rhythm as every field.
 - Put the submit button below or next to the code; with the same `size` it lines up with the cells.
 
@@ -145,11 +146,12 @@ No `variant` or `tone`.
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A six-digit code from SMS with its label and a hint — `label`, `hint`, `length`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size; the cell is a square on its own scale, two steps above the control heights — `size`. |
-| [states.tsx](examples/states.tsx) | A default code next to a disabled one — `disabled`. |
+| [states.tsx](examples/states.tsx) | A default code next to a disabled one, an invalid one with no message and an accepted one — `disabled`, `invalid`, `success`. |
 | [validation.tsx](examples/validation.tsx) | A confirmation code checked once it is complete: a wrong code shakes in with one message and leaves as soon as you type again; a hint and an optional code — `required`, `optional`, `hint`, `error`. |
 | [grouped.tsx](examples/grouped.tsx) | A long code read in chunks with a wider gap between groups — `groupSize`. |
 | [full-width.tsx](examples/full-width.tsx) | Cells that share the container width and keep the tier height, above a full-width button — `fullWidth`. |
 | [on-complete.tsx](examples/on-complete.tsx) | The code is checked on the server as soon as the last cell is filled: the cells wait, a right one turns them success, a wrong one clears them and shakes in the reason — `onComplete`, `hint`. |
+| [without-focus-ring.tsx](examples/without-focus-ring.tsx) | The one code on a pickup point screen, where the caret and the lighter fill of the entry cell show focus — `focusRing`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the code and clears it with a button — `value`, `onValueChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A masked card PIN submitted with a form; a short or wrong PIN shakes in an error that leaves when you type again — `name`, `mask`, `required`, `error`. |
 

package/src/components/digit-input/examples/states.tsx

@@ -1,4 +1,4 @@
-/** A default code next to a disabled one — `disabled`. */
+/** A default code next to a disabled one, an invalid one with no message and an accepted one — `disabled`, `invalid`, `success`. */
 import { DigitInput } from "prime-ui-kit";
 
 export default function DigitInputStatesExample() {
@@ -6,6 +6,8 @@ export default function DigitInputStatesExample() {
     <>
       <DigitInput label="default" defaultValue="42" />
       <DigitInput label="disabled" defaultValue="42" disabled />
+      <DigitInput label="invalid" defaultValue="4271" invalid />
+      <DigitInput label="success" defaultValue="4821" success hint="Код подтверждён" />
     </>
   );
 }

package/src/components/digit-input/examples/without-focus-ring.tsx

@@ -0,0 +1,13 @@
+/** The one code on a pickup point screen, where the caret and the lighter fill of the entry cell show focus — `focusRing`. */
+import { DigitInput } from "prime-ui-kit";
+
+export default function DigitInputWithoutFocusRingExample() {
+  return (
+    <DigitInput
+      label="Код выдачи заказа"
+      hint="Покупатель называет его на кассе"
+      length={6}
+      focusRing={false}
+    />
+  );
+}

package/src/components/divider/examples/with-icon.tsx

@@ -10,7 +10,7 @@ export default function DividerWithIconExample() {
           Безопасность
         </Divider>
         <Typography as="span" variant="caption" tone="muted">
-          иконка и подпись
+          Icon · children
         </Typography>
       </div>
       <div>
@@ -18,7 +18,7 @@ export default function DividerWithIconExample() {
           <Icon name="status.locked" />
         </Divider>
         <Typography as="span" variant="caption" tone="muted">
-          только иконка
+          Icon · aria-label
         </Typography>
       </div>
     </div>

package/src/components/dnd/COMPONENT.md

@@ -103,7 +103,7 @@ Generic `Dnd.Draggable<TData>`; `ref` → `HTMLElement`. An item carried onto a
 | `as` | `"div" \| "li" \| "span" \| "article" \| "section"` | `"div"` | Element. |
 | `onDragStart` | `(item, point, origin) => void` | — | Fired once the press became a drag. |
 | `onDragEnd` | `(item, outcome: "drop" \| "release" \| "cancel") => void` | — | Always fired at the end. |
-| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "id">` | — | `className` and the other attributes. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "id" \| "onDragStart" \| "onDragEnd">` | — | `className` and the other attributes. |
 
 ### Dnd.DropZone
 Generic `Dnd.DropZone<TData>`; `ref` → `HTMLElement`. Renders the `as` element; state is mirrored by `data-dnd-over`, `data-dnd-reject`, `data-dnd-flash`. Where zones overlap, the innermost wins.
@@ -238,7 +238,9 @@ An item's own `onPointerDown` / `onKeyDown` run before the kit's: `preventDefaul
 | [grid.tsx](examples/grid.tsx) | Product photos in a wrapping grid: a photo carried across rows lands in reading order, the gap takes a cell, Alt + ← / → steps it one place — `axis`. |
 | [locked.tsx](examples/locked.tsx) | Sections of a workspace menu: the home section is pinned first with a lock in place of its grip, the rest reorder around nothing past it; each row is named by its visible title — `locked`, `handle`, `aria-labelledby`. |
 | [board.tsx](examples/board.tsx) | A ticket board: columns share one kind, so a ticket lands in another column at an exact position or moves there with Alt + ← / →, an empty column says so, and a full column refuses it before the release with the reason under the ticket — `kind`, `canDrop`, `empty`, `onReorder`. |
-| [drop-zones.tsx](examples/drop-zones.tsx) | Documents carried onto folders: a zone takes items by kind, a locked folder refuses before the release and says why under the carried file, the target flashes where the file landed — `Dnd.Draggable`, `Dnd.DropZone`, `canDrop`, `flashOnDrop`. |
+| [drop-zones.tsx](examples/drop-zones.tsx) | Documents carried onto folders: a zone takes items by kind and gets the document as data, a locked folder refuses before the release and says why under the carried file, a syncing folder is no target at all, a document on signing stays put, the line above follows the drag, the target flashes where the file landed — `Dnd.Draggable`, `Dnd.DropZone`, `data`, `canDrop`, `disabled`, `onDragStart`, `onDragEnd`, `onEnter`, `onLeave`, `flashOnDrop`. |
+| [table.tsx](examples/table.tsx) | A project estimate as a table: each stage is its own body of rows under a heading row that never moves, a row is carried by its grip within a stage or into another, and the rows stay table rows — `as`, `header`, `kind`, `handle`. |
+| [states.tsx](examples/states.tsx) | A contract's approval route: a step already signed stays where it is while the rest reorder around it, and once the route is approved the whole list holds still — `Dnd.SortableItem`, `Dnd.Sortable`, `disabled`. |
 | [narrow.tsx](examples/narrow.tsx) | A row of status filters in a 320 px strip: tags reorder sideways and the strip scrolls when a tag is held near its edge — `axis`. |
 
 ## Mistakes

package/src/components/dnd/examples/drop-zones.tsx

@@ -1,81 +1,114 @@
-/** Documents carried onto folders: a zone takes items by kind, a locked folder refuses before the release and says why under the carried file, the target flashes where the file landed — `Dnd.Draggable`, `Dnd.DropZone`, `canDrop`, `flashOnDrop`. */
+/** Documents carried onto folders: a zone takes items by kind and gets the document as data, a locked folder refuses before the release and says why under the carried file, a syncing folder is no target at all, a document on signing stays put, the line above follows the drag, the target flashes where the file landed — `Dnd.Draggable`, `Dnd.DropZone`, `data`, `canDrop`, `disabled`, `onDragStart`, `onDragEnd`, `onEnter`, `onLeave`, `flashOnDrop`. */
 import { Badge, Dnd, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-type Folder = "inbox" | "contracts" | "archive";
-type Paper = { id: string; title: string; folder: Folder };
+type Folder = "inbox" | "contracts" | "accounting" | "archive";
+type Paper = { id: string; title: string; folder: Folder; signing?: boolean };
 
-const FOLDERS: { id: Folder; title: string; locked?: boolean }[] = [
+/** `locked` refuses with a reason; `syncing` is no target at all while it syncs. */
+const FOLDERS: { id: Folder; title: string; locked?: boolean; syncing?: boolean }[] = [
   { id: "contracts", title: "Договоры" },
+  { id: "accounting", title: "Бухгалтерия (синхронизация)", syncing: true },
   { id: "archive", title: "Архив (закрыт для записи)", locked: true },
 ];
 
 const DOCUMENTS: Paper[] = [
   { id: "d1", title: "Договор поставки № 14", folder: "inbox" },
   { id: "d2", title: "Акт сверки за квартал", folder: "inbox" },
-  { id: "d3", title: "Счёт на оплату", folder: "inbox" },
+  { id: "d3", title: "Счёт на оплату № 482", folder: "inbox", signing: true },
 ];
 
 export default function DndDropZonesExample() {
   const [documents, setDocuments] = React.useState(DOCUMENTS);
+  const [carried, setCarried] = React.useState<string | null>(null);
+  const [target, setTarget] = React.useState<string | null>(null);
   const inFolder = (folder: Folder) => documents.filter((doc) => doc.folder === folder);
 
+  const status =
+    carried === null
+      ? "Перетащите документ в папку"
+      : target === null
+        ? `«${carried}» — отпустите над папкой`
+        : `«${carried}» → ${target}`;
+
   return (
     <Dnd.Root>
-      <div className={styles.board}>
-        <section className={styles.column} aria-label="Входящие">
-          <div className={styles.columnHeader}>
-            <Typography as="h4" variant="title-s">
-              Входящие
-            </Typography>
-            <Badge.Root>{inFolder("inbox").length}</Badge.Root>
-          </div>
-          {inFolder("inbox").map((doc) => (
-            <Dnd.Draggable
-              key={doc.id}
-              kind="document"
-              id={doc.id}
-              label={doc.title}
-              className={styles.ticket}
-            >
-              <Typography as="span" variant="body-m">
-                {doc.title}
-              </Typography>
-            </Dnd.Draggable>
-          ))}
-        </section>
-        {FOLDERS.map((folder) => (
-          <Dnd.DropZone
-            key={folder.id}
-            as="section"
-            aria-label={folder.title}
-            accepts="document"
-            flashOnDrop
-            className={styles.column}
-            canDrop={() => (folder.locked ? "Архив только для чтения" : true)}
-            onDrop={(item) =>
-              setDocuments((current) =>
-                current.map((doc) => (doc.id === item.id ? { ...doc, folder: folder.id } : doc)),
-              )
-            }
-          >
+      <div className={styles.stage}>
+        <Typography as="p" variant="body-s" tone="muted">
+          {status}
+        </Typography>
+        <div className={styles.board}>
+          <section className={styles.column} aria-label="Входящие">
             <div className={styles.columnHeader}>
               <Typography as="h4" variant="title-s">
-                {folder.title}
+                Входящие
               </Typography>
-              <Badge.Root>{inFolder(folder.id).length}</Badge.Root>
+              <Badge.Root>{inFolder("inbox").length}</Badge.Root>
             </div>
-            {inFolder(folder.id).map((doc) => (
-              <div key={doc.id} className={styles.ticket}>
+            {inFolder("inbox").map((doc) => (
+              <Dnd.Draggable
+                key={doc.id}
+                kind="document"
+                id={doc.id}
+                data={doc}
+                label={doc.title}
+                disabled={doc.signing}
+                className={styles.ticket}
+                onDragStart={(item) => setCarried(item.label)}
+                onDragEnd={() => {
+                  setCarried(null);
+                  setTarget(null);
+                }}
+              >
                 <Typography as="span" variant="body-m">
                   {doc.title}
                 </Typography>
-              </div>
+                {doc.signing ? (
+                  <Badge.Root color="orange" className={styles.badge}>
+                    На подписи
+                  </Badge.Root>
+                ) : null}
+              </Dnd.Draggable>
             ))}
-          </Dnd.DropZone>
-        ))}
+          </section>
+          {FOLDERS.map((folder) => (
+            <Dnd.DropZone<Paper>
+              key={folder.id}
+              as="section"
+              aria-label={folder.title}
+              accepts="document"
+              flashOnDrop
+              disabled={folder.syncing}
+              className={styles.column}
+              canDrop={() => (folder.locked ? "Архив только для чтения" : true)}
+              onEnter={() => setTarget(folder.title)}
+              onLeave={() => setTarget(null)}
+              onDrop={(item) =>
+                setDocuments((current) =>
+                  current.map((doc) =>
+                    doc.id === item.data.id ? { ...doc, folder: folder.id } : doc,
+                  ),
+                )
+              }
+            >
+              <div className={styles.columnHeader}>
+                <Typography as="h4" variant="title-s">
+                  {folder.title}
+                </Typography>
+                <Badge.Root>{inFolder(folder.id).length}</Badge.Root>
+              </div>
+              {inFolder(folder.id).map((doc) => (
+                <div key={doc.id} className={styles.ticket}>
+                  <Typography as="span" variant="body-m">
+                    {doc.title}
+                  </Typography>
+                </div>
+              ))}
+            </Dnd.DropZone>
+          ))}
+        </div>
       </div>
     </Dnd.Root>
   );

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

@@ -48,6 +48,19 @@
   background: var(--prime-color-fill-muted);
 }
 
+/* drop-zones.tsx: the drag status line above the board. */
+.stage {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  width: 100%;
+}
+
+/* A status badge keeps its own width inside a ticket. */
+.badge {
+  align-self: flex-start;
+}
+
 .columnHeader {
   display: flex;
   align-items: center;
@@ -94,6 +107,43 @@
   text-align: center;
 }
 
+/* table.tsx: a plain table whose bodies are sortable lists; rows sit on faint dividers. */
+.table {
+  width: 100%;
+  max-width: calc(var(--prime-space-24) * 6);
+  border-collapse: collapse;
+}
+
+.caption {
+  padding-block-end: var(--prime-space-3);
+  text-align: start;
+}
+
+.cell,
+.numeric,
+.grip,
+.groupCell {
+  padding: var(--prime-space-2) var(--prime-space-3);
+  border-block-end: var(--prime-border-width) solid var(--prime-color-border-subtle);
+  text-align: start;
+  vertical-align: middle;
+}
+
+.numeric {
+  text-align: end;
+}
+
+.grip {
+  inline-size: var(--prime-space-10);
+  padding-inline-end: 0;
+}
+
+/* A stage's heading row: a fill marks where a new stage starts. */
+.groupCell {
+  padding-block-start: var(--prime-space-4);
+  background: var(--prime-color-fill-muted);
+}
+
 /* 320 px strip; the padding keeps room for the focus ring of the first and last tag. */
 .strip {
   width: min(100%, calc(var(--prime-space-20) * 4));

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

@@ -0,0 +1,54 @@
+/** A contract's approval route: a step already signed stays where it is while the rest reorder around it, and once the route is approved the whole list holds still — `Dnd.SortableItem`, `Dnd.Sortable`, `disabled`. */
+import { Badge, Dnd, moveBefore, Switch, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Step = { id: string; title: string; person: string; signed?: boolean };
+
+const ROUTE: Step[] = [
+  { id: "lawyer", title: "Юрист", person: "Ольга Белова", signed: true },
+  { id: "finance", title: "Финансовый отдел", person: "Илья Петров" },
+  { id: "security", title: "Служба безопасности", person: "Марат Хасанов" },
+  { id: "director", title: "Директор", person: "Анна Климова" },
+];
+
+export default function DndStatesExample() {
+  const [steps, setSteps] = React.useState(ROUTE);
+  const [approved, setApproved] = React.useState(false);
+
+  return (
+    <div className={styles.stage}>
+      <Switch.Root checked={approved} onCheckedChange={setApproved}>
+        <Switch.Label>Маршрут утверждён</Switch.Label>
+      </Switch.Root>
+      <Dnd.Root>
+        <Dnd.Sortable
+          as="ol"
+          aria-label="Маршрут согласования"
+          className={styles.list}
+          disabled={approved}
+          items={steps}
+          getId={(step) => step.id}
+          getLabel={(step) => step.title}
+          onReorder={(id, beforeId) =>
+            setSteps((current) => moveBefore(current, id, beforeId, (step) => step.id))
+          }
+          renderItem={(step) => (
+            <Dnd.SortableItem id={step.id} disabled={step.signed} className={styles.row}>
+              <span className={styles.rowText}>
+                <Typography as="span" variant="body-m">
+                  {step.title}
+                </Typography>
+                <Typography as="span" variant="caption" tone="muted">
+                  {step.person}
+                </Typography>
+              </span>
+              {step.signed ? <Badge.Root color="green">Подписано</Badge.Root> : null}
+            </Dnd.SortableItem>
+          )}
+        />
+      </Dnd.Root>
+    </div>
+  );
+}