prime-ui-kit 0.16.0 → 0.18.0

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

@@ -1,6 +1,5 @@
-/** 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 their totals and a side column with the client's details and the history — `align`, `orientation`. */
+/** A nested record: the path, the title with its status and due date and the record's actions by weight in its top bar, a main column with the line items and their totals and a side column with the client's details and the history — `align`, `orientation`. */
 import {
-  AppHeader,
   Avatar,
   Breadcrumb,
   Button,
@@ -8,11 +7,9 @@ import {
   DataTable,
   type DataTableColumn,
   DescriptionList,
-  Dropdown,
   Icon,
   LinkButton,
-  PageContent,
-  PageToolbar,
+  Page,
   Timeline,
   Typography,
 } from "prime-ui-kit";
@@ -75,132 +72,128 @@ const COLUMNS: DataTableColumn<Line>[] = [
 
 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>
+    <Page.Root>
+      {/* A nested record titles itself in its top bar: the path up to the list, the record as the
+          only h1 with its status and due date under it, the record's actions at the end. */}
+
+      <Page.TopBar>
+        <Page.Heading>
           <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}
-              />
-              {/* The totals end where the «Сумма» column of the table above ends. */}
-              <DescriptionList.Root align="end" className={styles.totals}>
-                {TOTALS.map((row) => (
-                  <DescriptionList.Item key={row.label} label={row.label}>
-                    {row.value}
-                  </DescriptionList.Item>
-                ))}
-                <DescriptionList.Item
-                  label={
-                    <Typography as="span" variant="title-m">
-                      К оплате
-                    </Typography>
-                  }
-                >
-                  <Typography as="span" variant="title-m" numeric="tabular">
-                    {MONEY.format(NET + VAT)}
-                  </Typography>
+          <Page.Title>Счёт № 2026-0418</Page.Title>
+          <Page.Description>Отправлен · оплатить до 14 октября</Page.Description>
+        </Page.Heading>
+        {/* By weight: when the row runs short the soft actions show only their icons, then fold
+            into «⋯»; the primary action stays. */}
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.copy" />
+            </Button.Icon>
+            Дублировать
+          </Button.Root>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.download" />
+            </Button.Icon>
+            Скачать PDF
+          </Button.Root>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.send" />
+            </Button.Icon>
+            Напомнить
+          </Button.Root>
+          <Button.Root>
+            <Button.Icon>
+              <Icon name="action.check" />
+            </Button.Icon>
+            Отметить оплату
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+      <Page.Body>
+        <div className={styles.columns}>
+          <Page.Section label="Позиции" className={styles.main}>
+            <DataTable
+              columns={COLUMNS}
+              rows={LINES}
+              getRowKey={(row) => row.id}
+              paging="none"
+              highlightRowOnHover={false}
+            />
+            {/* The totals end where the «Сумма» column of the table above ends. */}
+            <DescriptionList.Root align="end" className={styles.totals}>
+              {TOTALS.map((row) => (
+                <DescriptionList.Item key={row.label} label={row.label}>
+                  {row.value}
                 </DescriptionList.Item>
-              </DescriptionList.Root>
-            </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>
+              ))}
+              <DescriptionList.Item
+                label={
+                  <Typography as="span" variant="title-m">
+                    К оплате
+                  </Typography>
+                }
+              >
+                <Typography as="span" variant="title-m" numeric="tabular">
+                  {MONEY.format(NET + VAT)}
+                </Typography>
+              </DescriptionList.Item>
+            </DescriptionList.Root>
+          </Page.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>
-                    <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.ItemTitle>{event.title}</Timeline.ItemTitle>
-                          <Timeline.ItemMeta>{event.date}</Timeline.ItemMeta>
-                        </Timeline.Item>
-                      ))}
-                    </Timeline.Group>
-                  </Timeline.Root>
-                </Card.Body>
-              </Card.Root>
-            </aside>
-          </div>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+                  </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.ItemTitle>{event.title}</Timeline.ItemTitle>
+                        <Timeline.ItemMeta>{event.date}</Timeline.ItemMeta>
+                      </Timeline.Item>
+                    ))}
+                  </Timeline.Group>
+                </Timeline.Root>
+              </Card.Body>
+            </Card.Root>
+          </aside>
+        </div>
+      </Page.Body>
+    </Page.Root>
   );
 }

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

@@ -42,6 +42,7 @@ DigitInput            field frame: label row → cells → support row (hint | e
 | `required` | `boolean` | — | Red `*` after the label and native `required` on every cell. |
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the cells. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | — | Danger ring and danger digits on every cell, `aria-invalid`. A non-empty `error` implies it. |
 | `success` | `boolean` | `false` | The code was accepted (after the server checked it): the cells turn success one after another. Ignored while invalid. Say it in words too (`hint`). |

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

@@ -1,11 +1,11 @@
 /** A long code read in chunks with a wider gap between groups — `groupSize`. */
-import { DigitInput } from "prime-ui-kit";
+import { DigitInput, Fieldset } from "prime-ui-kit";
 
 export default function DigitInputGroupedExample() {
   return (
-    <>
+    <Fieldset aria-label="Подтверждение входа">
       <DigitInput label="Код из приложения" length={6} groupSize={3} defaultValue="482915" />
-      <DigitInput label="Резервный код" length={8} groupSize={4} />
-    </>
+      <DigitInput label="Резервный код" length={6} groupSize={2} />
+    </Fieldset>
   );
 }

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

@@ -18,7 +18,7 @@ export default function DigitInputValidationExample() {
         onValueChange={() => setError(undefined)}
         onComplete={(value) => setError(value === CODE ? undefined : "Неверный код")}
       />
-      <DigitInput label="Код приглашения" optional />
+      <DigitInput label="Код приглашения" length={6} optional />
     </>
   );
 }

package/src/components/divider/COMPONENT.md

@@ -12,7 +12,7 @@
 - A vertical break between groups of buttons in a toolbar row; `inset` makes it one text line tall (a header).
 
 ## When not to use
-- To separate cards or panels from each other → use fill and spacing ([Card](../card/COMPONENT.md), [PageContent](../page-content/COMPONENT.md) sections), never a line.
+- To separate cards or panels from each other → use fill and spacing ([Card](../card/COMPONENT.md), [Page](../../layout/page/COMPONENT.md) sections), never a line.
 - Separators inside a dropdown menu → `Dropdown.Separator` ([Dropdown](../dropdown/COMPONENT.md)).
 - Row lines of a table → [DataTable](../data-table/COMPONENT.md) draws them itself.
 
@@ -124,4 +124,4 @@ No `labels`.
 
 ## Related
 - **Built from:** `internal/fieldClasses` (the tier table), `internal/textRole` (the label type), `internal/hasContent`
-- **See also:** [Dropdown](../dropdown/COMPONENT.md) (`Dropdown.Separator`), [Select](../select/COMPONENT.md) (`Select.Separator`), [Accordion](../accordion/COMPONENT.md), [Card](../card/COMPONENT.md), [PageContent](../page-content/COMPONENT.md)
+- **See also:** [Dropdown](../dropdown/COMPONENT.md) (`Dropdown.Separator`), [Select](../select/COMPONENT.md) (`Select.Separator`), [Accordion](../accordion/COMPONENT.md), [Card](../card/COMPONENT.md), [Page](../../layout/page/COMPONENT.md)

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

@@ -18,9 +18,12 @@
   gap: var(--prime-space-4);
 }
 
-/* vertical.tsx: the toolbar row the vertical lines stand in. */
+/* vertical.tsx: the toolbar row the vertical lines stand in; on a phone narrower than the row it
+   wraps rather than squeezing the buttons under their labels. */
 .toolbar {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: center;
   gap: var(--prime-space-2);
 }

package/src/components/divider/examples/vertical.tsx

@@ -1,24 +1,37 @@
 /** Vertical lines between groups of toolbar buttons: one as tall as the row, one inset to a text line — `orientation`, `inset`. */
-import { Button, Divider } from "prime-ui-kit";
+import { Button, Divider, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function DividerVerticalExample() {
   return (
     <div className={styles.toolbar}>
-      <Button.Root variant="ghost" tone="neutral">
-        Вырезать
+      <Button.Root variant="ghost" tone="neutral" aria-label="Жирный">
+        <Button.Icon>
+          <Icon name="format.bold" />
+        </Button.Icon>
       </Button.Root>
-      <Button.Root variant="ghost" tone="neutral">
-        Копировать
+      <Button.Root variant="ghost" tone="neutral" aria-label="Курсив">
+        <Button.Icon>
+          <Icon name="format.italic" />
+        </Button.Icon>
       </Button.Root>
       <Divider orientation="vertical" />
-      <Button.Root variant="ghost" tone="neutral">
-        Архив
+      <Button.Root variant="ghost" tone="neutral" aria-label="Список">
+        <Button.Icon>
+          <Icon name="format.list" />
+        </Button.Icon>
+      </Button.Root>
+      <Button.Root variant="ghost" tone="neutral" aria-label="Цитата">
+        <Button.Icon>
+          <Icon name="format.quote" />
+        </Button.Icon>
       </Button.Root>
       <Divider orientation="vertical" inset />
-      <Button.Root variant="ghost" tone="danger">
-        Удалить
+      <Button.Root variant="ghost" tone="neutral" aria-label="Ссылка">
+        <Button.Icon>
+          <Icon name="format.link" />
+        </Button.Icon>
       </Button.Root>
     </div>
   );

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

@@ -68,13 +68,15 @@
   padding: var(--prime-space-1) var(--prime-space-2);
 }
 
+/* A card in a column well: the selected thumb of the well's fill (as a Kanban card), so it stands two
+   ladder steps off the column in both themes. */
 .ticket {
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-1);
   padding: var(--prime-space-3) var(--prime-space-4);
   border-radius: var(--prime-radius-m);
-  background: var(--prime-color-layer-nested);
+  background: var(--prime-color-control-selected);
   box-shadow: var(--prime-shadow-raised);
 }
 

package/src/components/drawer/COMPONENT.md

@@ -35,6 +35,7 @@ Drawer.Root                    state and dismiss policy (no DOM)
    │  ├─ Drawer.Description    <p>
    │  └─ Drawer.Actions        row of tier-s controls before the close button
    ├─ Drawer.Body              the only scrolling zone (ScrollContainer)
+   │  └─ Drawer.Section        <section>: <h3> label, description, Drawer.Actions at the heading's end
    └─ Drawer.Footer            always: Close or Cancel + the main action, primary last
       ├─ Drawer.Meta           <p>, muted status at the start
       └─ Drawer.Close          clones its child; closes on click
@@ -80,7 +81,7 @@ No DOM, no ref. State and dismiss policy.
 | `…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`.
+`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button; or at the end of a `Drawer.Section` heading. Controls inside take tier `s`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -109,6 +110,15 @@ No DOM, no ref. State and dismiss policy.
 |---|---|---|---|
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the zone. |
 
+### Drawer.Section
+`ref` → `HTMLElement`. A titled `<section>` of the body: an `<h3>` (title-s, under the `<h2>` title), an optional description, a `Drawer.Actions` at the end of the heading row; the content 16 below, sections 32 apart. Fields group in a `Fieldset`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `ReactNode` | — (required) | The heading of the section; it names the `<section>`. |
+| `description` | `ReactNode` | — | One line of context under the heading (body-s). |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "title">` | — | `children` (the content and an optional `Drawer.Actions`), `className` and the other attributes of the `<section>`. |
+
 ### Drawer.Footer
 `ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last, and an optional `Meta` at the start.
 
@@ -189,6 +199,8 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 - Full viewport height; only the body scrolls, with its own side padding.
 - Tabs in the header: a `Tabs.List` inside `Drawer.Header` (with `Tabs.Root` around the header and the body) spans the header's last row. The header becomes the tab strip, edge to edge and without the hairline; the active tab is the body rising into it, the panels sit in the body.
 - Fields inside get the surface field fill.
+- Titled groups of the body (a record's contacts, its deals, its history): `Drawer.Section label` — an `<h3>` under the drawer's `<h2>` title, an optional `description`, a `Drawer.Actions` at the end of its heading row; content 16 below, sections 32 apart. A group of fields is a `Fieldset`; a page section is `Page.Section`.
+- With a `Drawer.Meta` the buttons stay one row: when the footer runs short the status goes above them first.
 
 ## Accessibility
 
@@ -229,18 +241,19 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 | [sizes.tsx](examples/sizes.tsx) | Every panel width, 360 to 800 px; below 640 px of viewport the panel takes the full width — `size`. |
 | [placement.tsx](examples/placement.tsx) | The panel slides from the right for details and from the left for filters, rounded only on the edge facing the page — `side`. |
 | [header-actions.tsx](examples/header-actions.tsx) | A record card: its status and a ⋯ menu sit in the header before the close button, one tier smaller — `Drawer.Actions`. |
-| [client-card.tsx](examples/client-card.tsx) | A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details — `Drawer.Icon`, `Avatar.Root`. |
+| [client-card.tsx](examples/client-card.tsx) | A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details in titled sections, one with its own action — `Drawer.Icon`, `Avatar.Root`, `Drawer.Section`, `Drawer.Actions`. |
 | [guard.tsx](examples/guard.tsx) | A form that holds the drawer from inside: after an edit Escape, the scrim and Cancel ask before discarding, the footer says so, and saving locks every way out — `Drawer.Guard`, `Drawer.Meta`. |
 | [long-content.tsx](examples/long-content.tsx) | A long body scrolls on its own while the header and the footer stay in place — `Drawer.Body`. |
 | [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`. |
+| [screen.tsx](examples/screen.tsx) | A create form in a Drawer opened from the primary action in its top bar: 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.
 - Save or Cancel buttons at the end of the body, or in the header → they go in `Drawer.Footer`, which stays in place while the body scrolls.
 - A delete confirmation in a Drawer → use ConfirmDialog.
+- A hand-made heading row (`Typography as="h3"` + buttons) over a group in the body → `Drawer.Section label` with `Drawer.Actions`.
 - Busy or unsaved state lifted out of the form into Root props → put `Drawer.Guard` next to the form, inside Content.
 - Clearing the record together with `open` and rendering a skeleton for «no record» → not needed: the panel keeps its last content while it slides out.
 - A Badge or a menu as a custom child of the header text column → put them in `Drawer.Actions`.

package/src/components/drawer/examples/client-card.tsx

@@ -1,5 +1,5 @@
-/** A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details — `Drawer.Icon`, `Avatar.Root`. */
-import { Avatar, Button, DescriptionList, Drawer } from "prime-ui-kit";
+/** A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details in titled sections, one with its own action — `Drawer.Icon`, `Avatar.Root`, `Drawer.Section`, `Drawer.Actions`. */
+import { Avatar, Button, DescriptionList, Drawer, Icon } from "prime-ui-kit";
 
 const CLIENT = {
   name: "Анна Соколова",
@@ -10,6 +10,11 @@ const CLIENT = {
   manager: "Игорь Лебедев",
 };
 
+const DEALS = [
+  { id: "D-2041", title: "Поставка серверов", amount: "1 240 000 ₽" },
+  { id: "D-2057", title: "Сервисный контракт на год", amount: "380 000 ₽" },
+];
+
 export default function DrawerClientCardExample() {
   return (
     <Drawer.Root>
@@ -29,12 +34,31 @@ export default function DrawerClientCardExample() {
           <Drawer.Description>{CLIENT.company}</Drawer.Description>
         </Drawer.Header>
         <Drawer.Body>
-          <DescriptionList.Root>
-            <DescriptionList.Item label="Должность">{CLIENT.role}</DescriptionList.Item>
-            <DescriptionList.Item label="Телефон">{CLIENT.phone}</DescriptionList.Item>
-            <DescriptionList.Item label="Почта">{CLIENT.email}</DescriptionList.Item>
-            <DescriptionList.Item label="Менеджер">{CLIENT.manager}</DescriptionList.Item>
-          </DescriptionList.Root>
+          <Drawer.Section label="Контакт">
+            <DescriptionList.Root>
+              <DescriptionList.Item label="Должность">{CLIENT.role}</DescriptionList.Item>
+              <DescriptionList.Item label="Телефон">{CLIENT.phone}</DescriptionList.Item>
+              <DescriptionList.Item label="Почта">{CLIENT.email}</DescriptionList.Item>
+              <DescriptionList.Item label="Менеджер">{CLIENT.manager}</DescriptionList.Item>
+            </DescriptionList.Root>
+          </Drawer.Section>
+          <Drawer.Section label="Открытые сделки" description="2 сделки на 1 620 000 ₽">
+            <Drawer.Actions>
+              <Button.Root variant="ghost" tone="neutral">
+                <Button.Icon>
+                  <Icon name="action.add" />
+                </Button.Icon>
+                Сделка
+              </Button.Root>
+            </Drawer.Actions>
+            <DescriptionList.Root>
+              {DEALS.map((deal) => (
+                <DescriptionList.Item key={deal.id} label={deal.title}>
+                  {deal.amount}
+                </DescriptionList.Item>
+              ))}
+            </DescriptionList.Root>
+          </Drawer.Section>
         </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close>

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

@@ -8,38 +8,33 @@ const SIDES = [
 
 export default function DrawerPlacementExample() {
   return (
-    <div>
+    <>
       {SIDES.map(({ side, title }) => (
-        <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>
+        <Drawer.Root key={side}>
+          <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>
       ))}
-    </div>
+    </>
   );
 }