prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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>

package/dist/skill/reference/components/drawer/examples/placement.tsx

@@ -8,33 +8,38 @@ const SIDES = [
 
 export default function DrawerPlacementExample() {
   return (
-    <>
+    <div>
       {SIDES.map(({ side, title }) => (
-        <Drawer.Root key={side}>
-          <Drawer.Trigger>
-            <Button.Root variant="soft" tone="neutral">
-              {side}
-            </Button.Root>
-          </Drawer.Trigger>
-          <Drawer.Content side={side} size="s">
-            <Drawer.Header>
-              <Drawer.Title>{title}</Drawer.Title>
-            </Drawer.Header>
-            <Drawer.Body>
-              <Typography variant="body-m" tone="secondary">
-                Скругление только со стороны страницы, подложка затемняет остальное.
-              </Typography>
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Закрыть
-                </Button.Root>
-              </Drawer.Close>
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Root>
+        <div key={side}>
+          <Drawer.Root>
+            <Drawer.Trigger>
+              <Button.Root variant="soft" tone="neutral">
+                {title}
+              </Button.Root>
+            </Drawer.Trigger>
+            <Drawer.Content side={side} size="s">
+              <Drawer.Header>
+                <Drawer.Title>{title}</Drawer.Title>
+              </Drawer.Header>
+              <Drawer.Body>
+                <Typography variant="body-m" tone="secondary">
+                  Скругление только со стороны страницы, подложка затемняет остальное.
+                </Typography>
+              </Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Закрыть
+                  </Button.Root>
+                </Drawer.Close>
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {side}
+          </Typography>
+        </div>
       ))}
-    </>
+    </div>
   );
 }