prime-ui-kit 0.14.0 → 0.15.0

package/src/components/data-table/examples/screen.tsx

@@ -0,0 +1,354 @@
+/** A list page: the title, a line of figures, search, filters and the one primary action in the app header, a DataTable of invoices with statuses, row actions, pages and a filtered empty state — `empty`, `pageSize`, `stickyFirstColumn`. */
+import {
+  AppHeader,
+  Avatar,
+  Badge,
+  Button,
+  DataTable,
+  type DataTableColumn,
+  Dropdown,
+  EmptyPage,
+  Icon,
+  matchesSmartFilter,
+  PageContent,
+  PageToolbar,
+  type PaletteColor,
+  SmartFilter,
+  type SmartFilterField,
+  type SmartFilterValue,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type Status = "draft" | "sent" | "paid" | "overdue";
+
+type Invoice = {
+  id: string;
+  client: string;
+  inn: string;
+  manager: string;
+  due: string;
+  amount: number;
+  status: Status;
+};
+
+/** One hue per status across the product: the text carries the meaning, the color repeats it. */
+const STATUS: Record<Status, { label: string; color: PaletteColor }> = {
+  draft: { label: "Черновик", color: "gray" },
+  sent: { label: "Отправлен", color: "blue" },
+  paid: { label: "Оплачен", color: "green" },
+  overdue: { label: "Просрочен", color: "red" },
+};
+
+const INVOICES: Invoice[] = [
+  {
+    id: "2026-0418",
+    client: "ООО «Северный ветер»",
+    inn: "7704 512 908",
+    manager: "Анна Климова",
+    due: "2026-10-14",
+    amount: 486_000,
+    status: "sent",
+  },
+  {
+    id: "2026-0417",
+    client: "АО «Техностиль»",
+    inn: "7816 330 147",
+    manager: "Илья Петров",
+    due: "2026-10-02",
+    amount: 1_240_500,
+    status: "overdue",
+  },
+  {
+    id: "2026-0416",
+    client: "ИП Соколова М. А.",
+    inn: "5024 118 773",
+    manager: "Анна Климова",
+    due: "2026-10-20",
+    amount: 58_900,
+    status: "draft",
+  },
+  {
+    id: "2026-0415",
+    client: "ООО «Логистик Плюс»",
+    inn: "6658 402 215",
+    manager: "Марат Хасанов",
+    due: "2026-09-30",
+    amount: 312_000,
+    status: "paid",
+  },
+  {
+    id: "2026-0414",
+    client: "ООО «Гранит»",
+    inn: "5407 221 690",
+    manager: "Илья Петров",
+    due: "2026-09-28",
+    amount: 94_750,
+    status: "paid",
+  },
+  {
+    id: "2026-0413",
+    client: "ЗАО «Альфа Медиа»",
+    inn: "7702 845 336",
+    manager: "Марат Хасанов",
+    due: "2026-09-25",
+    amount: 760_000,
+    status: "overdue",
+  },
+  {
+    id: "2026-0412",
+    client: "ООО «Зелёный квартал»",
+    inn: "2310 194 552",
+    manager: "Анна Климова",
+    due: "2026-10-18",
+    amount: 205_300,
+    status: "sent",
+  },
+  {
+    id: "2026-0411",
+    client: "ООО «Мостострой»",
+    inn: "7728 609 481",
+    manager: "Илья Петров",
+    due: "2026-09-21",
+    amount: 2_480_000,
+    status: "paid",
+  },
+  {
+    id: "2026-0410",
+    client: "ООО «Пекарня №1»",
+    inn: "7811 077 264",
+    manager: "Марат Хасанов",
+    due: "2026-10-25",
+    amount: 37_200,
+    status: "draft",
+  },
+  {
+    id: "2026-0409",
+    client: "АО «Волга-Энерго»",
+    inn: "6316 255 018",
+    manager: "Анна Климова",
+    due: "2026-09-18",
+    amount: 1_095_000,
+    status: "paid",
+  },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+const DAY = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "short" });
+
+const OVERDUE = INVOICES.filter((row) => row.status === "overdue");
+
+/** The header's line of context carries data: how many invoices and what is overdue. */
+const SUMMARY = `${INVOICES.length} счетов · просрочено ${OVERDUE.length} на ${MONEY.format(
+  OVERDUE.reduce((sum, row) => sum + row.amount, 0),
+)}`;
+
+const asOptions = (values: string[]) => values.map((value) => ({ value, label: value }));
+
+const FIELDS: SmartFilterField[] = [
+  {
+    key: "status",
+    label: "Статус",
+    options: (Object.keys(STATUS) as Status[]).map((value) => ({
+      value,
+      label: STATUS[value].label,
+    })),
+  },
+  {
+    key: "manager",
+    label: "Менеджер",
+    finite: false,
+    options: asOptions(["Анна Климова", "Илья Петров", "Марат Хасанов"]),
+  },
+];
+
+const initials = (name: string) =>
+  name
+    .replace(/^(ООО|АО|ЗАО|ИП)\s+/, "")
+    .replace(/[^\p{L}\s]/gu, "")
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase();
+
+const COLUMNS: DataTableColumn<Invoice>[] = [
+  { id: "id", header: "Счёт", accessor: "id", sortable: true, numeric: true, align: "start" },
+  {
+    id: "client",
+    header: "Клиент",
+    accessor: "client",
+    sortable: true,
+    cell: (row) => (
+      <span className={styles.client}>
+        <Avatar.Root size="s" color="gray">
+          <Avatar.Fallback>{initials(row.client)}</Avatar.Fallback>
+        </Avatar.Root>
+        <span className={styles.clientText}>
+          <Typography as="span" variant="body-m">
+            {row.client}
+          </Typography>
+          <Typography as="span" variant="caption" tone="muted">
+            ИНН {row.inn}
+          </Typography>
+        </span>
+      </span>
+    ),
+  },
+  {
+    id: "status",
+    header: "Статус",
+    accessor: "status",
+    cell: (row) => (
+      <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  {
+    id: "due",
+    header: "Оплатить до",
+    accessor: "due",
+    sortable: true,
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => DAY.format(new Date(row.due)),
+  },
+  {
+    id: "amount",
+    header: "Сумма",
+    accessor: "amount",
+    sortable: true,
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+  {
+    id: "actions",
+    header: "",
+    width: "3.5rem",
+    align: "end",
+    cell: (row) => (
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root
+            size="s"
+            variant="ghost"
+            tone="neutral"
+            aria-label={`Действия со счётом ${row.id}`}
+          >
+            <Button.Icon>
+              <Icon name="action.more" />
+            </Button.Icon>
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Открыть</Dropdown.Item>
+          <Dropdown.Item>Скачать PDF</Dropdown.Item>
+          <Dropdown.Item>Отправить повторно</Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item tone="danger">Удалить</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    ),
+  },
+];
+
+export default function DataTableScreenExample() {
+  const [filter, setFilter] = React.useState<SmartFilterValue>({});
+  const [search, setSearch] = React.useState("");
+
+  const query = search.trim().toLowerCase();
+  const rows = INVOICES.filter(
+    (row) =>
+      matchesSmartFilter(filter.status, row.status) &&
+      matchesSmartFilter(filter.manager, row.manager) &&
+      (row.id.includes(query) || row.client.toLowerCase().includes(query)),
+  );
+
+  const resetFilters = () => {
+    setFilter({});
+    setSearch("");
+  };
+
+  return (
+    <>
+      {/* The page lives in the app header: the only h1, a line of figures under it, and the page's
+          tools — search, filters, export, the one primary action; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Счета
+            <AppHeader.Description>{SUMMARY}</AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
+          <SmartFilter.Root
+            fields={FIELDS}
+            value={filter}
+            onValueChange={setFilter}
+            search={search}
+            onSearchChange={setSearch}
+          >
+            <PageToolbar.Root aria-label="Счета">
+              <PageToolbar.Tools>
+                <SmartFilter.Toolbar />
+              </PageToolbar.Tools>
+              <PageToolbar.Actions>
+                <Button.Root variant="soft" tone="neutral" aria-label="Экспорт в Excel">
+                  <Button.Icon>
+                    <Icon name="action.download" />
+                  </Button.Icon>
+                </Button.Root>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новый счёт
+                </Button.Root>
+              </PageToolbar.Actions>
+              <PageToolbar.Chips>
+                <SmartFilter.Chips />
+              </PageToolbar.Chips>
+            </PageToolbar.Root>
+          </SmartFilter.Root>
+        </AppHeader.Tools>
+      </AppHeader.Root>
+
+      <PageContent.Root>
+        <PageContent.Body>
+          <DataTable
+            columns={COLUMNS}
+            rows={rows}
+            getRowKey={(row) => row.id}
+            getRowLabel={(row) => `Счёт ${row.id}`}
+            pageSize={6}
+            stickyFirstColumn
+            defaultSort={{ columnId: "due", order: "desc" }}
+            empty={
+              <EmptyPage.Root size="s" role="status" aria-labelledby="invoices-empty">
+                <EmptyPage.Icon>
+                  <Icon name="action.search" />
+                </EmptyPage.Icon>
+                <EmptyPage.Title as="p" id="invoices-empty">
+                  Счетов не найдено
+                </EmptyPage.Title>
+                <EmptyPage.Description>Измените запрос или сбросьте фильтры.</EmptyPage.Description>
+                <EmptyPage.Actions>
+                  <Button.Root variant="soft" tone="neutral" onClick={resetFilters}>
+                    Сбросить фильтры
+                  </Button.Root>
+                </EmptyPage.Actions>
+              </EmptyPage.Root>
+            }
+          />
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
+  );
+}

package/src/components/datepicker/COMPONENT.md

@@ -139,7 +139,7 @@ Shared by `Datepicker.Root` and `Datepicker.Panel`.
 | State | Driven by | DOM |
 |---|---|---|
 | empty | no value | `data-empty="true"`, `labels.placeholder` (or `placeholder`) in placeholder color |
-| open | click, `open` | `data-state="open"`, `field-bg-focus` fill, the chevron turns |
+| open | click, `open` | `data-state="open"`, `field-bg-hover` fill, the chevron turns |
 | focus-visible | keyboard | inset focus ring; none with `focusRing={false}` (`data-focus-ring="false"`) |
 | invalid | `invalid`, `error` | `data-invalid`, `aria-invalid`, inset `danger-border` ring; the control shakes once when an error arrives (`data-shake` on the frame) |
 | disabled | `disabled` | native `disabled`, `data-disabled`, `field-bg-disabled`, cannot open |
@@ -147,7 +147,7 @@ Shared by `Datepicker.Root` and `Datepicker.Panel`.
 | selected / band | value | day `aria-pressed`, `data-edge`; cell `data-band="selected" \| "preview"`, `data-band-start` / `-end` |
 | day disabled | `isDayDisabled`, `disableFuture` | native `disabled`, muted |
 
-Panel DOM: `data-size`, `data-embedded`, `data-compact`, `data-layout` (`aside` · `stacked`). The popover follows the overlay contract: an outside press or Escape closes it, focus is trapped while open, the wheel over the panel does not scroll the page. The panel of `Datepicker.Root` mounts only while the popover is open, so every opening starts from the current value; nothing is rendered for it while closed.
+Panel DOM: `data-size`, `data-embedded`, `data-compact`, `data-layout` (`aside` · `stacked`). The footer row carries `data-time` with `withTime`; a footer field never shrinks below its whole date and time — the fields wrap above the actions, and in a footer narrower than 22rem with time they stand one under the other. The popover follows the overlay contract: an outside press or Escape closes it, focus is trapped while open, the wheel over the panel does not scroll the page. The panel of `Datepicker.Root` mounts only while the popover is open, so every opening starts from the current value; nothing is rendered for it while closed.
 
 Committing: without `footer` a picked day (or the second day of a range) applies at once and closes the popover; with `footer` the pick stays a draft until «Применить», and «Сбросить» sets `resetValue` (else empty) and closes. A preset applies its period at once, with or without `footer`. With `name`, hidden inputs submit `yyyy-MM-dd` (`yyyy-MM-ddTHH:mm` with `withTime`); a range submits `from`, then `to`.
 
@@ -205,11 +205,12 @@ Committing: without `footer` a picked day (or the second day of a range) applies
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A shipping date field: a click opens one month, a picked day applies at once — `mode`, `label`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier: the field is 28 to 48 px high, the day cell of the panel 24 to 40 px — `size`. |
-| [states.tsx](examples/states.tsx) | An empty field with the default placeholder, a filled one and a disabled one — `disabled`. |
+| [states.tsx](examples/states.tsx) | 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`. |
 | [validation.tsx](examples/validation.tsx) | 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`. |
-| [range-presets.tsx](examples/range-presets.tsx) | A report period: presets aside, two months, a step prompt, time fields with Reset / Apply, no future days — `presets`, `months`, `prompt`, `footer`, `withTime`, `disableFuture`. |
+| [range-presets.tsx](examples/range-presets.tsx) | 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`. |
 | [inline-panel.tsx](examples/inline-panel.tsx) | A booking calendar embedded in a card: the card is its container, two months when the parent has room, the range applies at once — `Datepicker.Panel`, `months`, `prompt`. |
 | [yearless.tsx](examples/yearless.tsx) | An annual price change date: day and month without a year, a value prefix and taken days disabled — `yearless`, `valuePrefix`, `isDayDisabled`. |
+| [locale.tsx](examples/locale.tsx) | 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`. |
 | [controlled.tsx](examples/controlled.tsx) | A report filter owns the period: quick buttons set it from outside, the field shows it — `value`, `onValueChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the panel: a reminder button opens the calendar from code, a picked day closes it — `open`, `onOpenChange`. |
 | [in-form.tsx](examples/in-form.tsx) | 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`. |

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

@@ -1,15 +1,11 @@
 /* Layout of the Datepicker scenarios: semantic tokens only. */
 
-/* A form in a Card. */
-.formCard {
-  width: min(100%, calc(var(--prime-space-24) * 5));
-}
-
+/* in-form.tsx: field → field 20. */
 .form {
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-5);
-  padding: var(--prime-card-padding-m);
+  width: min(100%, calc(var(--prime-space-24) * 5));
 }
 
 .actions {

package/src/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, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -12,63 +12,55 @@ 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);
+      }}
+    >
+      <Datepicker.Root
+        mode="range"
+        name="vacation"
+        label="Период отпуска"
+        required
+        hint="Не больше 28 дней подряд"
+        error={error}
+        value={period}
+        onValueChange={(next) => {
+          setPeriod(next);
+          setError(undefined);
+          setSent(false);
         }}
-      >
-        <Datepicker.Root
-          mode="range"
-          name="vacation"
-          label="Период отпуска"
-          required
-          hint="Не больше 28 дней подряд"
-          error={error}
-          value={period}
-          onValueChange={(next) => {
-            setPeriod(next);
+        months={2}
+        footer
+        placeholder="Выбрать период"
+        fullWidth
+      />
+      <Datepicker.Root mode="single" name="returnDate" label="Выход на работу" optional fullWidth />
+      {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);
           }}
-          months={2}
-          footer
-          placeholder="Выбрать период"
-          fullWidth
-        />
-        <Datepicker.Root
-          mode="single"
-          name="returnDate"
-          label="Выход на работу"
-          optional
-          fullWidth
-        />
-        {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>
+        <Button.Root type="submit">Отправить заявку</Button.Root>
+      </div>
+    </form>
   );
 }

package/src/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/src/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/src/components/datepicker/examples/states.tsx

@@ -1,4 +1,4 @@
-/** 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);
@@ -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
+      />
     </>
   );
 }

package/src/components/description-list/COMPONENT.md

@@ -120,6 +120,7 @@ No motion: the list is static text; a row action has the Button's own press and
 | [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`. |
 | [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. |
+| [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 a side column with the client's details and the history — `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.