prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/reference/components/datepicker/examples/in-form.tsx

@@ -1,5 +1,5 @@
 /** A leave request form: submit reads the period from the form data and checks it, the error shakes in and leaves once the period is fixed; an optional return date — `name`, `required`, `error`, `optional`. */
-import { Button, Card, Datepicker, type DatepickerRange, Typography } from "prime-ui-kit";
+import { Button, Datepicker, type DatepickerRange, Fieldset, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -12,18 +12,18 @@ export default function DatepickerInFormExample() {
   const [sent, setSent] = React.useState(false);
 
   return (
-    <Card.Root className={styles.formCard}>
-      <form
-        className={styles.form}
-        onSubmit={(event) => {
-          event.preventDefault();
-          // The range submits `from`, then `to` under its name ("2026-07-06").
-          const [from, to] = new FormData(event.currentTarget).getAll("vacation");
-          const complete = Boolean(from && to);
-          setError(complete ? undefined : "Укажите начало и конец отпуска");
-          setSent(complete);
-        }}
-      >
+    <form
+      className={styles.form}
+      onSubmit={(event) => {
+        event.preventDefault();
+        // The range submits `from`, then `to` under its name ("2026-07-06").
+        const [from, to] = new FormData(event.currentTarget).getAll("vacation");
+        const complete = Boolean(from && to);
+        setError(complete ? undefined : "Укажите начало и конец отпуска");
+        setSent(complete);
+      }}
+    >
+      <Fieldset>
         <Datepicker.Root
           mode="range"
           name="vacation"
@@ -49,26 +49,26 @@ export default function DatepickerInFormExample() {
           optional
           fullWidth
         />
+      </Fieldset>
+      <div className={styles.actions}>
         {sent ? (
           <Typography as="p" variant="body-s" tone="secondary" role="status">
             Заявка отправлена на согласование.
           </Typography>
         ) : null}
-        <div className={styles.actions}>
-          <Button.Root
-            variant="ghost"
-            tone="neutral"
-            onClick={() => {
-              setPeriod(EMPTY_PERIOD);
-              setError(undefined);
-              setSent(false);
-            }}
-          >
-            Отмена
-          </Button.Root>
-          <Button.Root type="submit">Отправить заявку</Button.Root>
-        </div>
-      </form>
-    </Card.Root>
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          onClick={() => {
+            setPeriod(EMPTY_PERIOD);
+            setError(undefined);
+            setSent(false);
+          }}
+        >
+          Отмена
+        </Button.Root>
+        <Button.Root type="submit">Отправить заявку</Button.Root>
+      </div>
+    </form>
   );
 }

package/dist/skill/reference/components/datepicker/examples/locale.tsx

@@ -0,0 +1,35 @@
+/** A delivery window on a partner portal in English: month and weekday names from the date-fns locale, the week from Sunday and the system texts translated — `locale`, `weekStartsOn`, `labels`. */
+import { enUS } from "date-fns/locale";
+import { Datepicker, type DatepickerLabels, type DatepickerRange } from "prime-ui-kit";
+import * as React from "react";
+
+const LABELS: Partial<DatepickerLabels> = {
+  placeholder: "Pick dates",
+  pickStart: "Pick the first day",
+  pickEnd: "Pick the last day",
+  reset: "Reset",
+  apply: "Apply",
+  prevMonth: "Previous month",
+  nextMonth: "Next month",
+  rangeStart: "From",
+  rangeEnd: "To",
+  until: "until",
+};
+
+export default function DatepickerLocaleExample() {
+  const [delivery, setDelivery] = React.useState<DatepickerRange>({ from: null, to: null });
+
+  return (
+    <Datepicker.Root
+      mode="range"
+      label="Delivery window"
+      value={delivery}
+      onValueChange={setDelivery}
+      locale={enUS}
+      weekStartsOn={0}
+      labels={LABELS}
+      prompt
+      footer
+    />
+  );
+}

package/dist/skill/reference/components/datepicker/examples/range-presets.tsx

@@ -1,21 +1,30 @@
-/** A report period: presets aside, two months, a step prompt, time fields with Reset / Apply, no future days — `presets`, `months`, `prompt`, `footer`, `withTime`, `disableFuture`. */
+/** A report period: presets aside, two months, a step prompt, time fields with Reset / Apply, no future days; Reset returns the current month and the panel lines up with the field's end — `presets`, `months`, `prompt`, `footer`, `withTime`, `disableFuture`, `resetValue`, `align`. */
 import { Datepicker, type DatepickerRange, DEFAULT_DATEPICKER_PRESETS } from "prime-ui-kit";
 import * as React from "react";
 
+const NOW = new Date();
+/** The current month up to the end of today: the report's default period. */
+const THIS_MONTH: DatepickerRange = {
+  from: new Date(NOW.getFullYear(), NOW.getMonth(), 1),
+  to: new Date(NOW.getFullYear(), NOW.getMonth(), NOW.getDate(), 23, 59, 59, 999),
+};
+
 export default function DatepickerRangePresetsExample() {
-  const [period, setPeriod] = React.useState<DatepickerRange>({ from: null, to: null });
+  const [period, setPeriod] = React.useState<DatepickerRange>(THIS_MONTH);
   return (
     <Datepicker.Root
       mode="range"
       label="Период отчёта"
       value={period}
       onValueChange={setPeriod}
+      resetValue={THIS_MONTH}
       months={2}
       presets={DEFAULT_DATEPICKER_PRESETS}
       prompt
       footer
       withTime
       disableFuture
+      align="end"
       placeholder="Выбрать период"
     />
   );

package/dist/skill/reference/components/datepicker/examples/sizes.tsx

@@ -6,7 +6,7 @@ const INVOICE_DATE = new Date(2026, 9, 7);
 
 export default function DatepickerSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
         <Datepicker.Root
           key={size}
@@ -17,6 +17,6 @@ export default function DatepickerSizesExample() {
           fullWidth
         />
       ))}
-    </>
+    </div>
   );
 }

package/dist/skill/reference/components/datepicker/examples/states.tsx

@@ -1,11 +1,11 @@
-/** An empty field with the default placeholder, a filled one and a disabled one — `disabled`. */
+/** An empty field with the default placeholder, a filled, a disabled and an invalid one, and one whose focus shows without the ring — `disabled`, `invalid`, `focusRing`. */
 import { Datepicker } from "prime-ui-kit";
 
 const CONTRACT_DATE = new Date(2026, 8, 15);
 
 export default function DatepickerStatesExample() {
   return (
-    <>
+    <div>
       <Datepicker.Root mode="single" label="empty" fullWidth />
       <Datepicker.Root mode="single" label="default" defaultValue={CONTRACT_DATE} fullWidth />
       <Datepicker.Root
@@ -15,6 +15,14 @@ export default function DatepickerStatesExample() {
         disabled
         fullWidth
       />
-    </>
+      <Datepicker.Root mode="single" label="invalid" invalid fullWidth />
+      <Datepicker.Root
+        mode="single"
+        label="focusRing={false}"
+        defaultValue={CONTRACT_DATE}
+        focusRing={false}
+        fullWidth
+      />
+    </div>
   );
 }

package/dist/skill/reference/components/datepicker/examples/validation.tsx

@@ -1,16 +1,16 @@
 /** A leave period checked live: the error shakes in, names the broken rule and leaves once the period fits; an optional return date — `required`, `hint`, `error`, `optional`. */
+import { differenceInCalendarDays } from "date-fns";
 import { Datepicker, type DatepickerRange } from "prime-ui-kit";
 import * as React from "react";
 
 const MAX_DAYS = 28;
-const DAY_MS = 24 * 60 * 60 * 1000;
 const LONG_PERIOD: DatepickerRange = { from: new Date(2026, 6, 1), to: new Date(2026, 7, 4) };
 
 /** The period error, or nothing when both ends are set and the period fits the limit. */
 function periodError({ from, to }: DatepickerRange) {
   if (!from || !to) return "Укажите начало и конец отпуска";
-  if ((to.getTime() - from.getTime()) / DAY_MS + 1 > MAX_DAYS)
-    return "Больше 28 дней подряд нельзя";
+  // Calendar days, not hours: a period across a daylight-saving change counts right.
+  if (differenceInCalendarDays(to, from) + 1 > MAX_DAYS) return "Больше 28 дней подряд нельзя";
   return undefined;
 }
 

package/dist/skill/reference/components/description-list/COMPONENT.md

@@ -38,8 +38,9 @@ DescriptionList.Root                 <dl>; size (host tier), orientation; a size
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else `"m"`` | Label and value type and the gap between pairs; without it the list takes the tier of its host (a Card, a Drawer, a form). |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Label and value type and the gap between pairs; without it the list takes the tier of a sized host (a Drawer, a Modal). |
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | `horizontal` — the label in a column beside its value (one third of the width), stacking below 24rem of the list's own width; `vertical` — the label above its value at any width. |
+| `align` | `"start" \| "end"` | `"start"` | `start` — values from the start of their column; `end` — each value at the end of its row in tabular figures, at any width: a summary of amounts (subtotal, tax, total). |
 | `labels` | `Partial<DescriptionListLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `HTMLAttributes<HTMLDListElement>` | — | `className`, `id`, `data-*` and the other attributes of the element. |
 
@@ -58,7 +59,8 @@ DescriptionList.Root                 <dl>; size (host tier), orientation; a size
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `label` | `string` | — (required) | Accessible name and tooltip of the action. |
-| `children` | `ReactNode` | — (required) | The icon (`<Icon name="…" />`). |
+| `children` | `ReactNode` | — (required) | The icon (`<Icon name="…" />`); with `asChild`, the one link whose children are the icon. |
+| `asChild` | `boolean` | `false` | The action is the child link (`mailto:`, another page) with the button look. |
 | `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">` | — | `onClick`, `disabled`, `className` and the other button attributes. |
 
 ## Variants
@@ -69,6 +71,13 @@ DescriptionList.Root                 <dl>; size (host tier), orientation; a size
 | `horizontal` | the label in a column (one third of the width) beside the value; stacked below 24rem of the list's width | record details in a card or a page | yes |
 | `vertical` | the label above its value at any width | a narrow side panel, a summary of a few long values | |
 
+### align
+
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `start` | each value from the start of its column | record details | yes |
+| `end` | the label at the start, the value at the end of the row in tabular figures, at any width | a summary of amounts: subtotal, tax, the amount due | |
+
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
@@ -79,8 +88,8 @@ DescriptionList.Root                 <dl>; size (host tier), orientation; a size
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| size / orientation | props, the host tier | `data-size`, `data-orientation` on the `<dl>` |
-| narrow | the list narrower than 24rem (container query) | each pair stacks: the label above its value |
+| size / orientation / align | props, the host tier | `data-size`, `data-orientation`, `data-align` (`end` only) on the `<dl>` |
+| narrow | the list narrower than 24rem (container query) | each pair stacks: the label above its value (not with `align="end"`) |
 | empty value | `children` is `null`, `""` or `false` | `data-empty` on the `<dd>`; muted `labels.empty`, spoken `labels.emptyText` |
 
 No motion: the list is static text; a row action has the Button's own press and hover.
@@ -89,17 +98,21 @@ No motion: the list is static text; a row action has the Button's own press and
 - The list fills its container; pairs are separated by air (8 · 12 · 16 by tier), not lines.
 - A horizontal pair: label column one third, value two thirds, 16 apart; values wrap anywhere, labels wrap too.
 - A row action sits at the end of the value, centred on its first line; it does not make the row taller.
-- Inside a `Card.Body` or a `Drawer` the list takes the host tier; do not pass `size` there.
+- Inside a `Drawer` or a `Modal` the list takes the host tier; do not pass `size` there. A `Card` gives no tier: the list is `m` unless `size` is set.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves to the row actions (`DescriptionList.ItemAction`); the pairs themselves are not focusable. |
 | `Enter` · `Space` | Runs the row action. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The list is a `<dl>`: the label is a `<dt>`, the value a `<dd>`; screen readers read each pair as a term and its definition.
 - An empty value shows a muted `labels.empty` (hidden from assistive tech) and is read as `labels.emptyText`.
 - A row action is named by its `label`, which is also its tooltip; the icon is decorative.
@@ -117,16 +130,19 @@ No motion: the list is static text; a row action has the Button's own press and
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A client's details in a card: labels beside values, a long address that wraps, an empty manager and a copy action — `DescriptionList.Item`, `label`, `DescriptionList.ItemAction`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier changes the label and value type and the gap between pairs — `size`. |
-| [structure.tsx](examples/structure.tsx) | Optional pieces of a pair: a Badge or a link as the value, a row action and an empty value with its own mark — `DescriptionList.ItemAction`, `labels`. |
+| [structure.tsx](examples/structure.tsx) | Optional pieces of a pair: a Badge or a link as the value, a row action that is a link and an empty value with its own mark — `DescriptionList.ItemAction`, `asChild`, `labels`. |
 | [vertical.tsx](examples/vertical.tsx) | Labels above their values at any width, for a side panel of a record — `orientation`. |
-| [narrow.tsx](examples/narrow.tsx) | In a 320 px card the list is narrower than 24rem: each label moves above its value and long values wrap. |
+| [totals.tsx](examples/totals.tsx) | The totals of an invoice: every amount at the end of its row in tabular figures, the amount due a step larger — `align`. |
+| [narrow.tsx](examples/narrow.tsx) | In a 320 px card the list is narrower than 24rem: each label moves above its value and long values wrap — `DescriptionList.Item`, `label`. |
+| [screen.tsx](examples/screen.tsx) | 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`. |
 
 ## Mistakes
 - A grid of `Typography` pairs or a two-column table for record details → `DescriptionList`: the `<dl>` semantics and the stacking come with it.
 - `""` or «—» typed by hand for a missing value → pass nothing; the list shows `labels.empty` and speaks `labels.emptyText`.
 - A copy button placed after the list or inside the label → `DescriptionList.ItemAction` inside the item, at the end of its value.
 - A viewport media query to stack the pairs → the list adapts to its own width already.
+- A hand-made `<dl>` with `justify-content: space-between` for invoice totals → `align="end"`.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (`ItemAction`), [Tooltip](../tooltip/COMPONENT.md) (the action's `label`)
+- **Built from:** [Button](../button/COMPONENT.md) (`ItemAction`), [Tooltip](../tooltip/COMPONENT.md) (the action's `label`), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Card](../card/COMPONENT.md) (the surface the list usually sits in), [Drawer](../drawer/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Timeline](../timeline/COMPONENT.md)

package/dist/skill/reference/components/description-list/examples/examples.module.css

@@ -2,37 +2,17 @@
 
 /* overview.tsx: a record card as wide as a dialog of size m. */
 .card {
-  width: min(100%, var(--prime-modal-width-m));
+  width: min(100%, var(--prime-layout-form-width-m));
 }
 
-/* structure.tsx: a column as wide as a short form. */
+/* structure.tsx, totals.tsx: a column as wide as a short form. */
 .column {
-  width: min(100%, var(--prime-modal-width-s));
-}
-
-/* sizes.tsx: one tier per block, its caption right under it, blocks apart. */
-.sizes {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-8);
-  width: min(100%, var(--prime-modal-width-s));
-}
-
-.size {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-.size > :first-child {
-  align-self: stretch;
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 /* vertical.tsx: a record side panel. */
 .side {
-  width: min(100%, var(--prime-drawer-width-s));
+  width: min(100%, var(--prime-layout-narrow-width));
 }
 
 /* narrow.tsx: 320 px, the smallest supported viewport. */

package/dist/skill/reference/components/description-list/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** In a 320 px card the list is narrower than 24rem: each label moves above its value and long values wrap. */
+/** In a 320 px card the list is narrower than 24rem: each label moves above its value and long values wrap — `DescriptionList.Item`, `label`. */
 import { Card, DescriptionList } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/dist/skill/{patterns/detail-page.module.css → reference/components/description-list/examples/screen.module.css}

@@ -1,12 +1,5 @@
-/* Detail page: two columns that wrap into one on narrow screens, no breakpoints. */
-
-/* Status badge and due date in the header description, one line. */
-.status {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
+/* 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 {
@@ -29,29 +22,11 @@
 
 /* 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;

package/dist/skill/reference/components/description-list/examples/screen.tsx

@@ -0,0 +1,206 @@
+/** 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`. */
+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}
+              />
+              {/* 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>
+                </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>
+                    </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>
+    </>
+  );
+}

package/dist/skill/reference/components/description-list/examples/sizes.tsx

@@ -1,15 +1,13 @@
 /** Every tier changes the label and value type and the gap between pairs — `size`. */
 import { DescriptionList, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function DescriptionListSizesExample() {
   return (
-    <div className={styles.sizes}>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.size}>
+        <div key={size}>
           <DescriptionList.Root size={size}>
             <DescriptionList.Item label="Счёт">№ 4821 от 3 октября</DescriptionList.Item>
             <DescriptionList.Item label="Сумма">94 750 ₽</DescriptionList.Item>