prime-ui-kit 0.14.0 → 0.15.0

package/dist/skill/reference/components/data-table/COMPONENT.md

@@ -327,7 +327,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Recent orders: sortable columns, a status Badge, numeric sums and five rows per page — `columns`, `getRowKey`, `pageSize`. |
 | [sizes.tsx](examples/sizes.tsx) | Every density: rows from 36 to 52 px, the head at the control height of the tier — `size`. |
-| [numeric.tsx](examples/numeric.tsx) | An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title — `numeric`, `truncate`, `maxWidth`. |
+| [numeric.tsx](examples/numeric.tsx) | An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title, formatted cells sort by their raw number and article numbers in natural order — `numeric`, `truncate`, `maxWidth`, `sortAccessor`, `sortComparator`. |
 | [heatmap.tsx](examples/heatmap.tsx) | Deals closed per manager and month as a heatmap: each count shades its cell on the chart scale and stays readable in it — `scale`, `numeric`. |
 | [trend.tsx](examples/trend.tsx) | Clients with revenue by month as a compact Sparkline in a cell of each row, next to the half-year total — `cell`, `width`. |
 | [content-width.tsx](examples/content-width.tsx) | A short lookup table sized by its content with a centered column, and a `grow` column that takes the free width and wraps — `fullWidth`, `align`, `grow`. |
@@ -335,7 +335,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 | [toolbar.tsx](examples/toolbar.tsx) | A campaign list with search, a status filter and export above the table; the empty text when nothing matches — `toolbar`, `empty`. |
 | [selection.tsx](examples/selection.tsx) | Team members with checkboxes: Shift+click range, press-and-drag, «select all» and bulk actions in the toolbar — `selectable`, `selected`, `onSelectedChange`, `getRowLabel`. |
 | [nested-rows.tsx](examples/nested-rows.tsx) | Partners with their expense lines: sub-rows indented under the parent's name, a chevron toggle, together with selection and sorting — `getRowChildren`, `expanded`, `onExpandedChange`. |
-| [detail-panel.tsx](examples/detail-panel.tsx) | Order details in a full-width row under an expanded order, aligned with the first content column — `renderExpanded`, `defaultExpanded`. |
+| [detail-panel.tsx](examples/detail-panel.tsx) | Order details in a full-width row under an expanded order, aligned with the first content column; a cancelled order has nothing to show and gets no toggle — `renderExpanded`, `defaultExpanded`, `isRowExpandable`. |
 | [sticky.tsx](examples/sticky.tsx) | Monthly sales by region in a 280 px window: the head and the region column stay while scrolling both ways — `stickyHeader`, `stickyFirstColumn`, `scrollHeight`. |
 | [row-link.tsx](examples/row-link.tsx) | Invoices whose rows are links: ⌘-click or a middle click opens a new tab, a plain click routes inside the app, the totals row and the ⋯ menu never open a row — `getRowHref`, `onRowClick`, `isRowClickable`. |
 | [row-open.tsx](examples/row-open.tsx) | Deals that open in a side panel: a click, or Enter and Space on the focused row; the panel keeps the last deal while it slides away — `onRowClick`. |
@@ -348,6 +348,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 | [states.tsx](examples/states.tsx) | Loading skeleton, an empty period and a load error with a retry: the head stays, only the body changes — `loading`, `loadingRows`, `empty`, `error`. |
 | [controlled.tsx](examples/controlled.tsx) | Sort and page owned by the parent (a URL or a store): a header click goes asc → desc → none, a new sort returns to page 1 — `sort`, `onSortChange`, `page`, `onPageChange`. |
 | [narrow.tsx](examples/narrow.tsx) | A 320 px support queue: columns scroll inside the table with the first one pinned, the toolbar and footer reflow and the pager turns compact — `stickyFirstColumn`, `size`. |
+| [screen.tsx](examples/screen.tsx) | 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`. |
 
 ## Mistakes
 - No `getRowKey` with `selectable`, expansion or sorting → selection follows positions, not records.

package/dist/skill/reference/components/data-table/examples/detail-panel.tsx

@@ -1,7 +1,5 @@
-/** Order details in a full-width row under an expanded order, aligned with the first content column — `renderExpanded`, `defaultExpanded`. */
-import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Order details in a full-width row under an expanded order, aligned with the first content column; a cancelled order has nothing to show and gets no toggle — `renderExpanded`, `defaultExpanded`, `isRowExpandable`. */
+import { DataTable, type DataTableColumn, DescriptionList } from "prime-ui-kit";
 
 type Order = {
   id: string;
@@ -9,8 +7,8 @@ type Order = {
   customer: string;
   date: string;
   total: number;
-  address: string;
-  items: string;
+  /** Delivery details; a cancelled order has none. */
+  delivery: { address: string; items: string } | null;
 };
 
 const ORDERS: Order[] = [
@@ -20,8 +18,10 @@ const ORDERS: Order[] = [
     customer: "Анна Соколова",
     date: "07.10.26",
     total: 12_480,
-    address: "Москва, ул. Тверская, 12, кв. 45",
-    items: "Кабель USB-C, 2 м × 2, док-станция × 1",
+    delivery: {
+      address: "Москва, ул. Тверская, 12, кв. 45",
+      items: "Кабель USB-C, 2 м × 2, док-станция × 1",
+    },
   },
   {
     id: "o2",
@@ -29,17 +29,23 @@ const ORDERS: Order[] = [
     customer: "Дмитрий Орлов",
     date: "06.10.26",
     total: 34_900,
-    address: "Санкт-Петербург, Невский пр., 28",
-    items: 'Монитор 27" × 1',
+    delivery: { address: "Санкт-Петербург, Невский пр., 28", items: 'Монитор 27" × 1' },
   },
   {
     id: "o3",
+    number: "№ 10 479",
+    customer: "Игорь Белов",
+    date: "06.10.26",
+    total: 2_990,
+    delivery: null,
+  },
+  {
+    id: "o4",
     number: "№ 10 477",
     customer: "Мария Ким",
     date: "05.10.26",
     total: 4_350,
-    address: "Казань, ул. Баумана, 7",
-    items: "Клавиатура × 1",
+    delivery: { address: "Казань, ул. Баумана, 7", items: "Клавиатура × 1" },
   },
 ];
 
@@ -51,7 +57,13 @@ const RUB = new Intl.NumberFormat("ru-RU", {
 
 const COLUMNS: DataTableColumn<Order>[] = [
   { id: "number", header: "Заказ", accessor: "number", minWidth: "8rem" },
-  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
+  {
+    id: "customer",
+    header: "Покупатель",
+    accessor: "customer",
+    sortable: true,
+    cell: (row) => (row.delivery ? row.customer : `${row.customer} · отменён`),
+  },
   { id: "date", header: "Дата", accessor: "date", numeric: true },
   {
     id: "total",
@@ -70,30 +82,17 @@ export default function DataTableDetailPanelExample() {
       rows={ORDERS}
       getRowKey={(row) => row.id}
       getRowLabel={(row) => row.number}
-      renderExpanded={(row) => (
-        <dl className={styles.details}>
-          <dt>
-            <Typography as="span" variant="body-s" tone="muted">
-              Адрес доставки
-            </Typography>
-          </dt>
-          <dd>
-            <Typography as="span" variant="body-s">
-              {row.address}
-            </Typography>
-          </dd>
-          <dt>
-            <Typography as="span" variant="body-s" tone="muted">
-              Состав
-            </Typography>
-          </dt>
-          <dd>
-            <Typography as="span" variant="body-s">
-              {row.items}
-            </Typography>
-          </dd>
-        </dl>
-      )}
+      isRowExpandable={(row) => row.delivery !== null}
+      renderExpanded={(row) =>
+        row.delivery ? (
+          <DescriptionList.Root size="s">
+            <DescriptionList.Item label="Адрес доставки">
+              {row.delivery.address}
+            </DescriptionList.Item>
+            <DescriptionList.Item label="Состав">{row.delivery.items}</DescriptionList.Item>
+          </DescriptionList.Root>
+        ) : null
+      }
       defaultExpanded={["o1"]}
       paging="none"
     />

package/dist/skill/reference/components/data-table/examples/examples.module.css

@@ -57,18 +57,6 @@
   min-width: 0;
 }
 
-.details {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: var(--prime-space-1) var(--prime-space-4);
-  margin: 0;
-}
-
-.details dd {
-  margin: 0;
-  min-width: 0;
-}
-
 /* fill-height: a panel of a fixed height (the rest of a page, a pane) the table fills. */
 .fillStage {
   display: flex;

package/dist/skill/reference/components/data-table/examples/numeric.tsx

@@ -1,4 +1,4 @@
-/** An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title — `numeric`, `truncate`, `maxWidth`. */
+/** An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title, formatted cells sort by their raw number and article numbers in natural order — `numeric`, `truncate`, `maxWidth`, `sortAccessor`, `sortComparator`. */
 import { DataTable, type DataTableColumn } from "prime-ui-kit";
 
 type Sku = {
@@ -22,18 +22,50 @@ const SKUS: Sku[] = [
   { sku: "MS-044", name: "Мышь оптическая", stock: 86, price: 1290, sold: 1204, margin: 0.312 },
   { sku: "MN-27Q", name: 'Монитор 27" QHD IPS', stock: 12, price: 32_900, sold: 41, margin: 0.118 },
   { sku: "HB-7P", name: "USB-хаб на 7 портов", stock: 530, price: 2190, sold: 97, margin: 0.402 },
+  {
+    sku: "HB-10P",
+    name: "USB-хаб на 10 портов",
+    stock: 210,
+    price: 3490,
+    sold: 64,
+    margin: 0.356,
+  },
 ];
 
 const INT = new Intl.NumberFormat("ru-RU");
 const PCT = new Intl.NumberFormat("ru-RU", { style: "percent", maximumFractionDigits: 1 });
 
+/** Article numbers in natural order: HB-7P before HB-10P. */
+const NATURAL = new Intl.Collator("ru-RU", { numeric: true });
+
 const COLUMNS: DataTableColumn<Sku>[] = [
-  { id: "sku", header: "Артикул", accessor: "sku", width: "6rem" },
+  {
+    id: "sku",
+    header: "Артикул",
+    accessor: "sku",
+    width: "6rem",
+    sortable: true,
+    sortComparator: (a, b) => NATURAL.compare(a.sku, b.sku),
+  },
   { id: "name", header: "Товар", accessor: "name", truncate: true, maxWidth: "14rem" },
-  { id: "stock", header: "Остаток, шт", numeric: true, cell: (row) => INT.format(row.stock) },
+  {
+    id: "stock",
+    header: "Остаток, шт",
+    numeric: true,
+    sortable: true,
+    sortAccessor: (row) => row.stock,
+    cell: (row) => INT.format(row.stock),
+  },
   { id: "price", header: "Цена, ₽", numeric: true, cell: (row) => INT.format(row.price) },
   { id: "sold", header: "Продано", numeric: true, cell: (row) => INT.format(row.sold) },
-  { id: "margin", header: "Маржа", numeric: true, cell: (row) => PCT.format(row.margin) },
+  {
+    id: "margin",
+    header: "Маржа",
+    numeric: true,
+    sortable: true,
+    sortAccessor: (row) => row.margin,
+    cell: (row) => PCT.format(row.margin),
+  },
 ];
 
 export default function DataTableNumericExample() {

package/dist/skill/reference/components/data-table/examples/overview.tsx

@@ -34,6 +34,7 @@ const COLUMNS: DataTableColumn<Order>[] = [
     header: "Статус",
     accessor: "status",
     sortable: true,
+    sortAccessor: (row) => STATUS[row.status].label,
     cell: (row) => (
       <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
     ),

package/dist/skill/reference/components/data-table/examples/row-open.tsx

@@ -1,9 +1,7 @@
 /** Deals that open in a side panel: a click, or Enter and Space on the focused row; the panel keeps the last deal while it slides away — `onRowClick`. */
-import { Badge, DataTable, type DataTableColumn, Drawer, Typography } from "prime-ui-kit";
+import { Badge, DataTable, type DataTableColumn, DescriptionList, Drawer } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 type Stage = "new" | "talks" | "won";
 type Deal = { id: string; title: string; client: string; owner: string; stage: Stage; sum: number };
 
@@ -47,7 +45,7 @@ const RUB = new Intl.NumberFormat("ru-RU", {
 });
 
 const COLUMNS: DataTableColumn<Deal>[] = [
-  { id: "title", header: "Сделка", accessor: "title", hideable: false },
+  { id: "title", header: "Сделка", accessor: "title" },
   { id: "client", header: "Клиент", accessor: "client" },
   {
     id: "stage",
@@ -88,38 +86,11 @@ export default function DataTableRowOpenExample() {
           </Drawer.Header>
           <Drawer.Body>
             {deal ? (
-              <dl className={styles.details}>
-                <dt>
-                  <Typography as="span" variant="body-m" tone="muted">
-                    Клиент
-                  </Typography>
-                </dt>
-                <dd>
-                  <Typography as="span" variant="body-m">
-                    {deal.client}
-                  </Typography>
-                </dd>
-                <dt>
-                  <Typography as="span" variant="body-m" tone="muted">
-                    Ответственный
-                  </Typography>
-                </dt>
-                <dd>
-                  <Typography as="span" variant="body-m">
-                    {deal.owner}
-                  </Typography>
-                </dd>
-                <dt>
-                  <Typography as="span" variant="body-m" tone="muted">
-                    Сумма
-                  </Typography>
-                </dt>
-                <dd>
-                  <Typography as="span" variant="body-m">
-                    {RUB.format(deal.sum)}
-                  </Typography>
-                </dd>
-              </dl>
+              <DescriptionList.Root>
+                <DescriptionList.Item label="Клиент">{deal.client}</DescriptionList.Item>
+                <DescriptionList.Item label="Ответственный">{deal.owner}</DescriptionList.Item>
+                <DescriptionList.Item label="Сумма">{RUB.format(deal.sum)}</DescriptionList.Item>
+              </DescriptionList.Root>
             ) : null}
           </Drawer.Body>
         </Drawer.Content>

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

@@ -1,10 +1,4 @@
-/* List page: layout inside table cells and the toolbar only; the page rhythm comes from PageContent. */
-
-/* The filter takes the whole toolbar row, so its search stretches. */
-.filter {
-  width: 100%;
-  min-width: 0;
-}
+/* List page: the header carries the title and the tools; this module lays out table cells only. */
 
 /* Client cell: avatar, then the name over the tax id. On a phone the table scrolls sideways. */
 .client {

package/dist/skill/{patterns/list-page.tsx → reference/components/data-table/examples/screen.tsx}

@@ -1,5 +1,6 @@
-/** A list page: header with one primary action, SmartFilter in the table toolbar, DataTable with statuses, row actions, pages and a filtered empty state. */
+/** 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,
@@ -10,6 +11,7 @@ import {
   Icon,
   matchesSmartFilter,
   PageContent,
+  PageToolbar,
   type PaletteColor,
   SmartFilter,
   type SmartFilterField,
@@ -18,7 +20,7 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./list-page.module.css";
+import styles from "./screen.module.css";
 
 type Status = "draft" | "sent" | "paid" | "overdue";
 
@@ -140,6 +142,13 @@ const MONEY = new Intl.NumberFormat("ru-RU", {
 });
 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[] = [
@@ -250,7 +259,7 @@ const COLUMNS: DataTableColumn<Invoice>[] = [
   },
 ];
 
-export default function ListPagePattern() {
+export default function DataTableScreenExample() {
   const [filter, setFilter] = React.useState<SmartFilterValue>({});
   const [search, setSearch] = React.useState("");
 
@@ -268,67 +277,78 @@ export default function ListPagePattern() {
   };
 
   return (
-    <PageContent.Page aria-labelledby="invoices-title">
-      <PageContent.Header>
-        <PageContent.Title id="invoices-title">Счета</PageContent.Title>
-        <PageContent.Description>
-          Выставленные клиентам счета и статус их оплаты.
-        </PageContent.Description>
-        <PageContent.Actions>
-          <Button.Root variant="soft" tone="neutral">
-            <Button.Icon>
-              <Icon name="action.download" />
-            </Button.Icon>
-            Экспорт
-          </Button.Root>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Новый счёт
-          </Button.Root>
-        </PageContent.Actions>
-      </PageContent.Header>
-      <PageContent.Body>
-        <DataTable
-          columns={COLUMNS}
-          rows={rows}
-          getRowKey={(row) => row.id}
-          getRowLabel={(row) => `Счёт ${row.id}`}
-          pageSize={6}
-          stickyFirstColumn
-          defaultSort={{ columnId: "due", order: "desc" }}
-          toolbar={
-            <SmartFilter.Root
-              fields={FIELDS}
-              value={filter}
-              onValueChange={setFilter}
-              search={search}
-              onSearchChange={setSearch}
-              className={styles.filter}
-            >
-              <SmartFilter.Toolbar />
-              <SmartFilter.Chips />
-            </SmartFilter.Root>
-          }
-          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}>
-                  Сбросить фильтры
+    <>
+      {/* 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>
-              </EmptyPage.Actions>
-            </EmptyPage.Root>
-          }
-        />
-      </PageContent.Body>
-    </PageContent.Page>
+                <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/dist/skill/reference/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/dist/skill/reference/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 {