prime-ui-kit 0.14.0 → 0.16.0

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;
@@ -72,9 +85,10 @@
 }
 
 /* grid.tsx: the host sets the tracks of a wrapping grid; the gap takes a cell. */
-.gallery[data-axis] {
+.gallery {
+  --dnd-sortable-gap: var(--prime-space-3);
+
   grid-template-columns: repeat(auto-fill, minmax(calc(var(--prime-space-24) * 1.25), 1fr));
-  gap: var(--prime-space-3);
   width: 100%;
   max-width: calc(var(--prime-space-24) * 6);
 }
@@ -85,15 +99,50 @@
   border-radius: var(--prime-thumbnail-m-radius);
 }
 
-/* An empty column's line: a dashed «put it here» slot, like the gap that replaces it. */
+/* An empty column's line, inside the drop slot Dnd draws around it. */
 .empty {
   margin: 0;
   padding: var(--prime-space-4);
-  border: var(--prime-border-width) dashed var(--prime-color-fill-strong);
-  border-radius: var(--prime-radius-m);
   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));
@@ -101,7 +150,6 @@
 }
 
 .chips {
-  gap: var(--prime-space-2);
   width: max-content;
 }
 

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

@@ -0,0 +1,60 @@
+/** 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, 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: "Анна Климова" },
+];
+
+const STATES = [
+  { caption: "Dnd.SortableItem disabled", approved: false },
+  { caption: "Dnd.Sortable disabled", approved: true },
+];
+
+export default function DndStatesExample() {
+  const [steps, setSteps] = React.useState(ROUTE);
+
+  return STATES.map((state) => (
+    <div key={state.caption}>
+      <div>
+        <Dnd.Root>
+          <Dnd.Sortable
+            as="ol"
+            aria-label={state.approved ? "Утверждённый маршрут" : "Маршрут согласования"}
+            className={styles.list}
+            disabled={state.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 tone="success">Подписано</Badge.Root> : null}
+              </Dnd.SortableItem>
+            )}
+          />
+        </Dnd.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          {state.caption}
+        </Typography>
+      </div>
+    </div>
+  ));
+}

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

@@ -0,0 +1,113 @@
+/** 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`. */
+import { Dnd, moveBefore, Typography, VisuallyHidden } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Line = { id: string; title: string; hours: number };
+type Stage = { id: string; title: string; lines: Line[] };
+
+const ESTIMATE: Stage[] = [
+  {
+    id: "analysis",
+    title: "Обследование",
+    lines: [
+      { id: "interviews", title: "Интервью с отделом продаж", hours: 12 },
+      { id: "processes", title: "Описание процессов", hours: 20 },
+    ],
+  },
+  {
+    id: "setup",
+    title: "Настройка",
+    lines: [
+      { id: "roles", title: "Роли и права доступа", hours: 8 },
+      { id: "import", title: "Перенос клиентской базы", hours: 16 },
+      { id: "training", title: "Обучение менеджеров", hours: 6 },
+    ],
+  },
+];
+
+/** Moves line `id` in front of `beforeId` (`null` — last) in stage `to`, from whichever stage holds it. */
+const moveLine = (stages: Stage[], id: string, beforeId: string | null, to: string) => {
+  const line = stages.flatMap((stage) => stage.lines).find((item) => item.id === id);
+  if (!line) return stages;
+  return stages.map((stage) => {
+    const rest = stage.lines.filter((item) => item.id !== id);
+    if (stage.id !== to) return { ...stage, lines: rest };
+    return { ...stage, lines: moveBefore([...rest, line], id, beforeId, (item) => item.id) };
+  });
+};
+
+export default function DndTableExample() {
+  const [stages, setStages] = React.useState(ESTIMATE);
+
+  return (
+    <Dnd.Root>
+      <table className={styles.table}>
+        <caption className={styles.caption}>
+          <Typography as="span" variant="title-s">
+            Смета внедрения CRM
+          </Typography>
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col" className={styles.grip}>
+              <VisuallyHidden>Порядок</VisuallyHidden>
+            </th>
+            <th scope="col" className={styles.cell}>
+              <Typography as="span" variant="caption" tone="muted">
+                Работа
+              </Typography>
+            </th>
+            <th scope="col" className={styles.numeric}>
+              <Typography as="span" variant="caption" tone="muted">
+                Часы
+              </Typography>
+            </th>
+          </tr>
+        </thead>
+        {stages.map((stage) => (
+          <Dnd.Sortable
+            key={stage.id}
+            as="tbody"
+            kind="estimate-line"
+            handle
+            aria-label={stage.title}
+            items={stage.lines}
+            getId={(line) => line.id}
+            getLabel={(line) => line.title}
+            onReorder={(id, beforeId) =>
+              setStages((current) => moveLine(current, id, beforeId, stage.id))
+            }
+            header={
+              <tr>
+                <th scope="colgroup" colSpan={3} className={styles.groupCell}>
+                  <Typography as="span" variant="body-m">
+                    {stage.title}
+                  </Typography>
+                </th>
+              </tr>
+            }
+            renderItem={(line) => (
+              <Dnd.SortableItem id={line.id}>
+                <td className={styles.grip}>
+                  <Dnd.Handle />
+                </td>
+                <td className={styles.cell}>
+                  <Typography as="span" variant="body-m">
+                    {line.title}
+                  </Typography>
+                </td>
+                <td className={styles.numeric}>
+                  <Typography as="span" variant="body-m">
+                    {line.hours}
+                  </Typography>
+                </td>
+              </Dnd.SortableItem>
+            )}
+          />
+        ))}
+      </table>
+    </Dnd.Root>
+  );
+}

package/src/components/drawer/COMPONENT.md

@@ -53,12 +53,12 @@ No DOM, no ref. State and dismiss policy.
 | `defaultOpen` | `boolean` | `false` | Initial visibility, uncontrolled. |
 | `onOpenChange` | `(open: boolean) => void` | — | Called on every open and close: trigger, close button, `Close`, Escape, scrim click, code. A `Guard` holds the dismisses (not code). |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the dialog. |
-| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim closes the dialog; turn off for destructive confirms. |
+| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim closes the dialog. A destructive action is confirmed in a ConfirmDialog; unsaved changes are held by `Guard`. |
 | `labels` | `Partial<DrawerLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — | Trigger and Content. |
 
 ### Drawer.Content
-`ref` → `HTMLDivElement` (the dialog panel). Portal + scrim + `role="dialog"` panel at the edge; renders while open and during its exit animation, showing the children it had open (a record cleared with `open` does not empty the panel mid-motion).
+`ref` → `HTMLDivElement` (the dialog panel). Portal + scrim + `role="dialog"` panel at the edge, side by side; renders while open and during its exit animation, showing the children it had open (a record cleared with `open` does not empty the panel mid-motion).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -71,15 +71,20 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other attributes of the `role="dialog"` element. |
 
 ### Drawer.Header
-`ref` → `HTMLElement`. Renders `<header>`: [Icon] [Title + Description] [Actions] [close button]. + native `HTMLAttributes<HTMLElement>`.
+`ref` → `HTMLElement`. Renders `<header>`: [Icon] [Title + Description] [Actions] [close button].
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `showClose` | `boolean` | `true` | Built-in square ghost `s` close button named by `labels.close`; disabled in place while a `Guard` is `busy`. |
 | `children` | `ReactNode` | — | Icon, Title, Description, Actions in any order; each goes to its column. A `Tabs.List` (with `Tabs.Root` around header and body) turns the header into a tab strip. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other attributes of the `<header>`. |
 
 ### Drawer.Actions
-`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`. + native `<div>` props.
+`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the row. |
 
 ### Drawer.Icon
 `ref` → `HTMLSpanElement`. An `aria-hidden` 40 px tile with a tone fill; around an `Avatar.Root` or a `Thumbnail.Root` (the record's picture) no tile — `data-media`, the avatar sized to 40 px.
@@ -87,24 +92,37 @@ No DOM, no ref. State and dismiss policy.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Soft fill and icon color; not used around a picture. |
-| `children` | `ReactNode` | — (required) | An icon glyph (sized to the m icon), or the record's picture: an `Avatar.Root` (sized to the tile) or a `Thumbnail.Root`. |
+| `children` | `ReactNode` | — (required) | An `Icon` (sized to the m icon), or the record's picture: an `Avatar.Root` (sized to the tile) or a `Thumbnail.Root`. |
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the tile. |
 
 ### Drawer.Title · Drawer.Description
-`ref` → `HTMLHeadingElement` / `HTMLParagraphElement`. `<h2>` (title-m) / `<p>` (body-s, muted); their ids name and describe the dialog. + native props except `id`.
+`ref` → `HTMLHeadingElement` / `HTMLParagraphElement`. `<h2>` (title-m) / `<p>` (body-s, muted); their ids name and describe the dialog.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `Omit<HTMLAttributes<HTMLHeadingElement \| HTMLParagraphElement>, "id">` | — | `className`, `children` and the other attributes except `id` (the dialog owns it). |
 
 ### Drawer.Body
-`ref` → `HTMLDivElement`. The only scrolling zone (a ScrollContainer), 16 gap between blocks. + native `<div>` props.
+`ref` → `HTMLDivElement`. The only scrolling zone (a ScrollContainer), 16 gap between blocks.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the zone. |
 
 ### Drawer.Footer
-`ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last, and an optional `Meta` at the start. + native `HTMLAttributes<HTMLElement>`.
+`ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last, and an optional `Meta` at the start.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `layout` | `"fill" \| "end"` | `"end"` | `fill`: equal-width buttons in one row; `end`: auto width, at the end. Stacked on phones (viewport below 640 px) and in a dialog narrower than 360 px. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `className`, `children` and the other attributes of the `<footer>`. |
 
 ### Drawer.Meta
-`ref` → `HTMLParagraphElement`. A `<p>` at the start of the footer: short muted status text («Есть несохранённые изменения»); the buttons keep their width at the end. Not part of the dialog description. + native `<p>` props.
+`ref` → `HTMLParagraphElement`. A `<p>` at the start of the footer: short muted status text («Есть несохранённые изменения»); the buttons keep their width at the end. Not part of the dialog description.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLParagraphElement>` | — | `className`, `children` and the other attributes of the `<p>`. |
 
 ### Drawer.Guard
 No DOM, no ref. Holds the dialog from anywhere inside Content, where the form state lives; renders only the built-in «discard changes?» confirm. Closing from code is never held.
@@ -112,10 +130,10 @@ No DOM, no ref. Holds the dialog from anywhere inside Content, where the form st
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `busy` | `boolean` | `false` | A request runs: Escape, a press outside, the close button and `Close` do nothing; the close button and the `Close` child stay in place, disabled. |
-| `dirty` | `boolean` | `false` | Unsaved changes: any of those dismisses first asks «Не сохранять изменения?» (a ConfirmDialog with `labels.discard*`); confirming closes the dialog. |
+| `dirty` | `boolean` | `false` | Unsaved changes: any of those dismisses asks «Не сохранять изменения?» (a ConfirmDialog with `labels.discard*`); confirming closes the dialog. |
 
 ### Drawer.Trigger · Drawer.Close
-No DOM: clone the single child and chain its `onClick` (unless the child's handler calls `preventDefault()`). `Close` goes through a `Guard` and makes its child `disabled` while the guard is busy.
+No DOM: each clones its child. `Trigger` and `Close` chain its `onClick` (skipped after `preventDefault()`): open; close through `Guard`, `disabled` while it is busy.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -152,6 +170,7 @@ Below 640px of viewport every size is full width and loses its corners.
 | State | Driven by | DOM |
 |---|---|---|
 | open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the scrim and the panel; mounted until the slide-out ends |
+| dismiss | `closeOnEscape`, `closeOnOutsideClick` (both default `true`) | Escape and a scrim press ask the Root to close; `false` turns that way off |
 | side / size | Content props | `data-side`, `data-size` on the panel |
 | open: trapped | while open | focus trapped, page scroll locked, siblings of the portal `inert` (the toast region stays usable); a drawer opened from a Modal or another drawer stacks above it |
 | closing | `open` turns false | the panel keeps showing the children it had open while it slides out |
@@ -174,18 +193,22 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Escape` | Closes the drawer (`closeOnEscape`); focus returns to the trigger. |
 | `Tab` · `Shift+Tab` | Cycle focus inside the drawer. |
 
 ### ARIA
-- `role="dialog"`, `aria-modal="true"`, named by Title (or `aria-label`), described by Description.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- `role="dialog"`, `aria-modal="true"`, named by `Drawer.Title` (or `aria-label`), described by `Drawer.Description`.
 - Focus moves into the panel on open and returns to the opener on close, including after a scrim click.
 - The page behind is `inert`, scroll is locked; only the topmost layer reacts.
 - A drawer opened from a Modal stacks above it.
 - No swipe: the close button, `Drawer.Close`, Escape and the scrim are the ways out.
-- A busy `Guard` keeps the close button and the `Close` child in place, `disabled`; a dirty one opens a `role="alertdialog"` confirm with focus on «Продолжить».
+- A `Guard` that is `busy` keeps the close button and the `Close` child in place, `disabled`; a `dirty` one opens a `role="alertdialog"` confirm with focus on «Продолжить».
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -212,6 +235,7 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 | [dismiss.tsx](examples/dismiss.tsx) | An import closes only from its buttons, and not at all while it runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the state and opens the drawer from a link, without a trigger — `open`, `onOpenChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A settings form in the panel: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Drawer.Body`, `Drawer.Footer`, `error`. |
+| [screen.tsx](examples/screen.tsx) | A create form in a Drawer opened from the primary action in the app header: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. |
 
 ## Mistakes
 - A drawer without `Drawer.Footer` → add one: «Закрыть» for details, «Отмена» + the submit button for a form. The header × alone is not the end of the panel.
@@ -226,5 +250,5 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 - Padding on a wrapper inside Body → Body already pads and scrolls.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Drawer.Body`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Drawer.Guard` discard confirm), `Icon` (the close glyph)
+- **Built from:** the dialog shared with Modal and Sheet (`internal/overlay/DialogParts`), [Button](../button/COMPONENT.md) (close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Drawer.Body`), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (a record's picture in `Drawer.Icon`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Drawer.Guard` discard confirm), `Icon` (the close glyph)
 - **See also:** [Modal](../modal/COMPONENT.md) (the same header, body, footer and `Guard` in the centre), [Sheet](../sheet/COMPONENT.md) (the same parts raised from the bottom edge for a short task), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (a destructive confirm), [Sidebar](../../layout/sidebar/COMPONENT.md), [Popover](../popover/COMPONENT.md), [Avatar](../avatar/COMPONENT.md) (a person's picture in `Drawer.Icon`)

package/src/components/drawer/examples/dismiss.tsx

@@ -19,7 +19,7 @@ export default function DrawerDismissExample() {
       open={open}
       onOpenChange={setOpen}
       closeOnOutsideClick={false}
-      closeOnEscape={!importing}
+      closeOnEscape={false}
     >
       <Drawer.Trigger>
         <Button.Root variant="soft" tone="neutral">
@@ -27,7 +27,9 @@ export default function DrawerDismissExample() {
         </Button.Root>
       </Drawer.Trigger>
       <Drawer.Content size="s">
-        <Drawer.Header showClose={!importing}>
+        {/* While the import runs, the guard keeps «Отмена» in place, disabled. */}
+        <Drawer.Guard busy={importing} />
+        <Drawer.Header showClose={false}>
           <Drawer.Title>Импорт товаров</Drawer.Title>
           <Drawer.Description>catalog-october.xlsx · 1 240 строк</Drawer.Description>
         </Drawer.Header>
@@ -41,7 +43,7 @@ export default function DrawerDismissExample() {
         </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close>
-            <Button.Root variant="outline" tone="neutral" disabled={importing}>
+            <Button.Root variant="outline" tone="neutral">
               Отмена
             </Button.Root>
           </Drawer.Close>

package/src/components/drawer/examples/guard.tsx

@@ -2,8 +2,6 @@
 import { Button, Drawer, Fieldset, Input, Textarea } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 /** Pretends to send the form. */
 function saveTask() {
   return new Promise((resolve) => setTimeout(resolve, 1200));
@@ -43,7 +41,7 @@ export default function DrawerGuardExample() {
         </Drawer.Header>
         <Drawer.Body>
           <Drawer.Guard busy={saving} dirty={dirty} />
-          <form id={formId} className={styles.form} onSubmit={submit}>
+          <form id={formId} onSubmit={submit}>
             <Fieldset disabled={saving}>
               <Input.Root label="Название">
                 <Input.Wrapper>

package/src/components/drawer/examples/header-actions.tsx

@@ -1,7 +1,5 @@
 /** A record card: its status and a ⋯ menu sit in the header before the close button, one tier smaller — `Drawer.Actions`. */
-import { Badge, Button, Drawer, Dropdown, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { Badge, Button, DescriptionList, Drawer, Dropdown, Icon } from "prime-ui-kit";
 
 const DEAL = {
   title: "Сделка №1042",
@@ -23,7 +21,7 @@ export default function DrawerHeaderActionsExample() {
           <Drawer.Title>{DEAL.title}</Drawer.Title>
           <Drawer.Description>{DEAL.client}</Drawer.Description>
           <Drawer.Actions>
-            <Badge.Root color="green">Выиграна</Badge.Root>
+            <Badge.Root tone="success">Выиграна</Badge.Root>
             <Dropdown.Root>
               <Dropdown.Trigger>
                 <Button.Root variant="ghost" tone="neutral" aria-label="Действия со сделкой">
@@ -42,12 +40,10 @@ export default function DrawerHeaderActionsExample() {
           </Drawer.Actions>
         </Drawer.Header>
         <Drawer.Body>
-          <dl className={styles.details}>
-            <dt>Сумма</dt>
-            <dd>{DEAL.amount}</dd>
-            <dt>Ответственный</dt>
-            <dd>{DEAL.owner}</dd>
-          </dl>
+          <DescriptionList.Root>
+            <DescriptionList.Item label="Сумма">{DEAL.amount}</DescriptionList.Item>
+            <DescriptionList.Item label="Ответственный">{DEAL.owner}</DescriptionList.Item>
+          </DescriptionList.Root>
         </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close>

package/src/components/drawer/examples/in-form.tsx

@@ -1,9 +1,7 @@
 /** A settings form in the panel: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Drawer.Body`, `Drawer.Footer`, `error`. */
-import { Button, Drawer, Icon, Input, Select, Switch } from "prime-ui-kit";
+import { Button, Drawer, Fieldset, Icon, Input, Select, Switch } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 export default function DrawerInFormExample() {
   const formId = React.useId();
   const [open, setOpen] = React.useState(false);
@@ -41,34 +39,36 @@ export default function DrawerInFormExample() {
           <Drawer.Description>Изменения увидят все участники</Drawer.Description>
         </Drawer.Header>
         <Drawer.Body>
-          <form id={formId} className={styles.form} noValidate onSubmit={submit}>
-            <Input.Root label="Название" required error={error} reserveSupportRow>
-              <Input.Wrapper>
-                <Input.Field
-                  name="name"
-                  defaultValue="Команда продукта"
-                  autoFocus
-                  onValueChange={() => setError(undefined)}
-                />
-              </Input.Wrapper>
-            </Input.Root>
-            <Input.Root label="Адрес" hint="Только латиница, цифры и дефис">
-              <Input.Wrapper>
-                <Input.Field name="slug" defaultValue="product-team" />
-              </Input.Wrapper>
-            </Input.Root>
-            <Select.Root label="Язык интерфейса" defaultValue="ru">
-              <Select.Trigger>
-                <Select.Value />
-              </Select.Trigger>
-              <Select.Content>
-                <Select.Item value="ru">Русский</Select.Item>
-                <Select.Item value="en">English</Select.Item>
-              </Select.Content>
-            </Select.Root>
-            <Switch.Root name="digest" defaultChecked>
-              <Switch.Label>Еженедельная сводка на почту</Switch.Label>
-            </Switch.Root>
+          <form id={formId} noValidate onSubmit={submit}>
+            <Fieldset>
+              <Input.Root label="Название" required error={error} reserveSupportRow>
+                <Input.Wrapper>
+                  <Input.Field
+                    name="name"
+                    defaultValue="Команда продукта"
+                    autoFocus
+                    onValueChange={() => setError(undefined)}
+                  />
+                </Input.Wrapper>
+              </Input.Root>
+              <Input.Root label="Адрес" hint="Только латиница, цифры и дефис">
+                <Input.Wrapper>
+                  <Input.Field name="slug" defaultValue="product-team" />
+                </Input.Wrapper>
+              </Input.Root>
+              <Select.Root label="Язык интерфейса" defaultValue="ru">
+                <Select.Trigger>
+                  <Select.Value />
+                </Select.Trigger>
+                <Select.Content>
+                  <Select.Item value="ru">Русский</Select.Item>
+                  <Select.Item value="en">English</Select.Item>
+                </Select.Content>
+              </Select.Root>
+              <Switch.Root name="digest" defaultChecked>
+                <Switch.Label>Еженедельная сводка на почту</Switch.Label>
+              </Switch.Root>
+            </Fieldset>
           </form>
         </Drawer.Body>
         <Drawer.Footer>

package/src/components/drawer/examples/overview.tsx

@@ -1,8 +1,5 @@
 /** Order details next to the list: the three zones of every drawer — a header with a close button, a read-only body and a footer with Close and the main action — `Drawer.Trigger`, `Drawer.Body`, `Drawer.Footer`. */
-import { Button, Drawer, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
+import { Button, DescriptionList, Drawer } from "prime-ui-kit";
 
 const DETAILS = [
   { term: "Клиент", value: "Анна Смирнова" },
@@ -25,22 +22,13 @@ export default function DrawerOverviewExample() {
           <Drawer.Description>Оформлен 3 октября</Drawer.Description>
         </Drawer.Header>
         <Drawer.Body>
-          <dl className={styles.details}>
+          <DescriptionList.Root>
             {DETAILS.map(({ term, value }) => (
-              <React.Fragment key={term}>
-                <dt>
-                  <Typography as="span" variant="body-m" tone="muted">
-                    {term}
-                  </Typography>
-                </dt>
-                <dd>
-                  <Typography as="span" variant="body-m">
-                    {value}
-                  </Typography>
-                </dd>
-              </React.Fragment>
+              <DescriptionList.Item key={term} label={term}>
+                {value}
+              </DescriptionList.Item>
             ))}
-          </dl>
+          </DescriptionList.Root>
         </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close>