prime-ui-kit 0.14.0 → 0.16.0

package/src/components/list/COMPONENT.md

@@ -3,16 +3,17 @@
 **Category:** navigation
 **Kind:** navigation
 
-> A selectable navigation list of rows: the master half of a list + detail screen (conversations, tickets, mail, records).
+> A selectable navigation list of rows: the master half of a list + detail screen (tickets, mail, records).
 
 ## When to use
-- The list side of a list + detail screen (`PageContent.Split` → `PageContent.List`): dialogs, tickets, letters, invoices worked through one by one; the open one is `current`.
+- The list side of a list + detail screen (`PageContent.Split` → `PageContent.Panel kind="list"`): tickets, letters, invoices worked through one by one; the open one is `current`.
 - A short column of records that each open something — a page (`href`, `asChild` with a router link) or a detail pane (`onClick`).
 - A short list the team puts in order (funnel stages, queues, priorities) — `onReorder`, a `value` per item.
 
 ## When not to use
 - App sections → use [Sidebar](../../layout/sidebar/COMPONENT.md) (wide) and [BottomNav](../../layout/bottom-nav/COMPONENT.md) (phone).
 - Panels of one screen → use [Tabs](../tabs/COMPONENT.md).
+- Conversations of a messenger or an inbox (a preview, «печатает…», unread counts) → use [ChatList](../chat-list/COMPONENT.md).
 - Many records compared by columns, sorted, filtered or selected in bulk → use [DataTable](../data-table/COMPONENT.md).
 - A static list of facts inside a card (no selection, nothing opens) → use `Card.List` of [Card](../card/COMPONENT.md) `variant="list"`.
 - Picking a value from options → use [Select](../select/COMPONENT.md) or [Radio](../radio/COMPONENT.md); a menu of commands → [Dropdown](../dropdown/COMPONENT.md).
@@ -24,9 +25,9 @@ import { List } from "prime-ui-kit";
 
 ## Anatomy
 ```
-List.Root                   <ul aria-label>; size → row tier (ControlSizeProvider); onReorder → Dnd.Sortable <ul>
+List.Root                   <ul aria-label>; size (else the host tier) → row tier; onReorder → Dnd.Sortable <ul>
 └─ List.Item                <li> with a full-width <button> | <a href> | asChild element; current, disabled
-   │                         value; with onReorder: Dnd.Handle (or a Spinner while saving) before the row element
+   │                         value; with onReorder: Dnd.Handle (busy while saving) before the row element
    ├─ List.ItemIcon         leading Avatar.Root / Icon (aria-hidden); after the text — a trailing glyph
    ├─ List.ItemText         primary line, truncates
    ├─ List.ItemDescription  second line, muted, truncates
@@ -43,10 +44,10 @@ List.Root                   <ul aria-label>; size → row tier (ControlSizeProvi
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Row tier: height, text, icon and avatar size; counts take one tier down. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Row tier: height, text, icon and avatar size; counts take one tier down. Without it the tier of its host, else `m`. |
 | `onReorder` | `(id: string, beforeId: string \| null) => void \| Promise<void>` | — | Rows reorder by a leading handle (drag, touch hold, Alt + ↑ / ↓): item `value` `id` goes before `beforeId` (`null` = last). Apply with `moveBefore`; a returned promise keeps the row busy, a rejection moves it back. |
 | `labels` | `Partial<ListLabels>` | — | Built-in strings, see Labels. |
-| `aria-label` | `string` | — | Name of the list for screen readers («Диалоги»), when no visible heading names it. |
+| `aria-label` | `string` | — | Name of the list for screen readers («Обращения»), when no visible heading names it. |
 | `children` | `ReactNode` | — | `List.Item`s. |
 | `…rest` | `HTMLAttributes<HTMLUListElement>` | — | `className` and the other `ul` attributes. |
 
@@ -59,13 +60,15 @@ List.Root                   <ul aria-label>; size → row tier (ControlSizeProvi
 | `current` | `boolean` | `false` | The open record: the selected fill and `aria-current` — `"true"` on a button, `"page"` on a link. |
 | `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | — | Opens the record; not called while `disabled`. |
 | `href` | `string` | — | Renders an `<a>` instead of a `<button>`; dropped while `disabled`. |
+| `target` | `string` | — | Where the `<a>` opens (`href` only). |
+| `rel` | `string` | — | Relationship of the `<a>` (`href` only). |
 | `asChild` | `boolean` | `false` | Renders the single child (a router link) as the row; its children are the content. |
 | `disabled` | `boolean` | `false` | Muted and out of the Tab order: a disabled button, or `aria-disabled` and no navigation on a link. |
 | `children` | `ReactNode` | — | `List.ItemIcon`, `List.ItemText`, `List.ItemDescription`, `List.ItemMeta`, `List.ItemCount`; loose text becomes the text line. |
 | `…rest` | `ButtonHTMLAttributes<HTMLButtonElement>` | — | `className` and native attributes of the row element (`target`, `rel` on a link). |
 
 ### List.ItemIcon
-`ref` → `HTMLSpanElement`. Leading `aria-hidden` slot: an `Avatar.Root` sized to the tier, or an `Icon`. After the text it is a trailing glyph.
+`ref` → `HTMLSpanElement`. Leading `aria-hidden` slot: an `Avatar.Root` (without its own `size` it takes the row tier), or an `Icon`. After the text it is a trailing glyph.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -135,13 +138,14 @@ A second line or an avatar makes a row taller than the one-line height; the vert
 | focus-visible | keyboard | the focus ring inside the row edge |
 | disabled | `disabled` | `disabled` on a button; `aria-disabled="true"`, no `href` on a link, `tabindex="-1"` on an `asChild` element; `data-disabled="true"`; disabled text; in a reorderable list the handle is disabled and the row holds its place |
 | reorderable | `onReorder` | `data-reorderable="true"` on the root (a `Dnd.Sortable` `<ul>`); each `<li>` is a sortable item (`data-dnd-item` = `value`) with a leading `Dnd.Handle`; drag by the handle (a touch hold on touch), Alt + ↑ / ↓ from the handle or the row; a lifted row leaves a dashed gap in the row's radius, its neighbours glide, the copy (handle and row, in the row's padding and radius) follows the pointer and sets down in its new place without a jump |
-| saving a move | `onReorder` returned a pending promise | the row stays in its new place, `aria-busy="true"`, a `Spinner` stands in for the handle, the row content dims to 0.6 (`--prime-motion-duration-fast` both ways); a rejection glides the row back |
+| saving a move | `onReorder` returned a pending promise | the row stays in its new place, `aria-busy="true"`, the handle is busy (Dnd: a spinner in the disabled grip), the row content dims to 0.6 (`--prime-motion-fade-fast` both ways); a rejection glides the row back |
+| rows come and go | the data adds or takes out a `List.Item` (`value`, else its key) | a new row rises in once (`enterMotion`), a removed one closes up in place (`listPresence`); the first render stays still |
 
-Root attribute: `data-size`. The fill changes on `background-color` with `--prime-motion-duration-xfast` both ways (0 under reduced motion).
+Root attributes: `data-size`, `role="list"` (the list style reset would drop the list semantics in WebKit). The fill changes on `background-color` with `--prime-motion-fade-xfast` both ways (a fade: reduced motion keeps it).
 
 ## Layout & spacing
 - The root fills its container (`width: 100%`); rows are 4px apart, each row a full-width button with the tier radius and field padding.
-- Put the list on a surface: a `Card.Root` pane in `PageContent.List`, with a `ScrollContainer` around it when it is long — the list never scrolls by itself.
+- Put the list on a surface: a `Card.Root` pane in `PageContent.Panel kind="list"`, with a `ScrollContainer` around it when it is long — the list never scrolls by itself.
 - Row: leading icon · body (text over description) · trail. Beside two lines the trail stacks — meta on top, count below; beside one line they sit in a row.
 - Text and description truncate with an ellipsis; give a long `List.ItemText` a `title` with the full text.
 - On a coarse pointer a row is at least the touch target (44px).
@@ -150,6 +154,8 @@ Root attribute: `data-size`. The fill changes on `background-color` with `--prim
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves focus between rows; a disabled row is skipped. |
@@ -157,6 +163,8 @@ Root attribute: `data-size`. The fill changes on `background-color` with `--prim
 | `Alt + ↑` · `Alt + ↓` | With `onReorder`, moves the row one place up or down (from its handle or the row). |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - `<ul>` named by `aria-label` (or `aria-labelledby` to a visible heading); each row is an `<li>` with a button or link.
 - The open record: `aria-current="true"` on a button (a selection inside the screen), `aria-current="page"` on a link (`href`, `asChild`) — the link points at the current URL. A router link may set it itself.
 - The row's name is its text, description, meta and count, in that order; the leading icon or avatar is `aria-hidden` — the text names the row.
@@ -173,17 +181,17 @@ Root attribute: `data-size`. The fill changes on `background-color` with `--prim
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | Support dialogs with a preview, the time and the unread count; a click opens a dialog and makes it the current row — `current`, `onClick`. |
+| [overview.tsx](examples/overview.tsx) | A support ticket queue with the client, the last update and the open count; a click opens a ticket and makes it the current row — `current`, `onClick`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier: row height, text, icon and count follow the tier — `size`. |
 | [states.tsx](examples/states.tsx) | The open record, a regular row and an unavailable one — `current`, `disabled`. |
-| [with-icon.tsx](examples/with-icon.tsx) | Leading avatars of clients and icons of queues; the slot sizes the avatar to the row tier — `List.ItemIcon`. |
-| [overflow.tsx](examples/overflow.tsx) | A long inbox in a pane of a fixed height: the list scrolls in a ScrollContainer and long names and previews truncate. |
+| [with-icon.tsx](examples/with-icon.tsx) | Leading avatars of clients and icons of queues; an avatar takes the row tier — `List.ItemIcon`. |
+| [overflow.tsx](examples/overflow.tsx) | A long inbox in a pane of a fixed height: the list scrolls in a ScrollContainer and long names and previews truncate — `List.ItemText`, `List.ItemDescription`. |
 | [as-link.tsx](examples/as-link.tsx) | Rows as links to the invoice pages: a plain link, or your router link through the slot — `href`, `asChild`. |
 | [reorder.tsx](examples/reorder.tsx) | Funnel stages in the team's order: a stage moves by its handle or Alt+arrows and is saved on the server — `onReorder`, `value`. |
 
 ## Mistakes
 - Rows hand-drawn from `Button.Root variant="ghost"` with a `soft` current → `List.Item current`.
-- An `Avatar.Root size="s"` in `List.ItemIcon` to fit the row → leave `size` out; the slot sizes the avatar to the tier.
+- An `Avatar.Root size="s"` in `List.ItemIcon` to fit the row → leave `size` out; an avatar without its own `size` takes the row tier.
 - A list as app navigation → Sidebar; as tabs of a screen → Tabs.
 - Several rows `current` at once → one open record; bulk selection belongs to DataTable.
 - A long list without a scroller → wrap it in `ScrollContainer` inside the pane.
@@ -191,5 +199,5 @@ Root attribute: `data-size`. The fill changes on `background-color` with `--prim
 - `onReorder` that rolls the order back itself on an error → return the promise; a rejection moves the row back.
 
 ## Related
-- **Built from:** [Badge](../badge/COMPONENT.md) (`List.ItemCount`), [Dnd](../dnd/COMPONENT.md) (`onReorder`: `Dnd.Sortable`, `Dnd.Handle`), [Spinner](../spinner/COMPONENT.md) (a move being saved)
-- **See also:** [PageContent](../page-content/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md), [Tabs](../tabs/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Card](../card/COMPONENT.md), [Avatar](../avatar/COMPONENT.md)
+- **Built from:** [Badge](../badge/COMPONENT.md) (`List.ItemCount`), [Avatar](../avatar/COMPONENT.md) (`List.ItemIcon` gives an avatar the row tier), [Dnd](../dnd/COMPONENT.md) (`onReorder`: `Dnd.Sortable`, the busy `Dnd.Handle`)
+- **See also:** [PageContent](../page-content/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md), [Tabs](../tabs/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Card](../card/COMPONENT.md)

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

@@ -8,11 +8,3 @@
 .scroll {
   height: calc(var(--prime-space-24) * 3);
 }
-
-/* sizes: a caption above each tier's list. */
-.tier {
-  display: flex;
-  width: min(100%, calc(var(--prime-space-24) * 4));
-  flex-direction: column;
-  gap: var(--prime-space-2);
-}

package/src/components/list/examples/overflow.tsx

@@ -1,4 +1,4 @@
-/** A long inbox in a pane of a fixed height: the list scrolls in a ScrollContainer and long names and previews truncate. */
+/** A long inbox in a pane of a fixed height: the list scrolls in a ScrollContainer and long names and previews truncate — `List.ItemText`, `List.ItemDescription`. */
 import { Card, List, ScrollContainer } from "prime-ui-kit";
 import * as React from "react";
 

package/src/components/list/examples/overview.tsx

@@ -1,59 +1,60 @@
-/** Support dialogs with a preview, the time and the unread count; a click opens a dialog and makes it the current row — `current`, `onClick`. */
+/** A support ticket queue with the client, the last update and the open count; a click opens a ticket and makes it the current row — `current`, `onClick`. */
 import { Card, List } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const DIALOGS = [
+const TICKETS = [
   {
-    id: "granit",
+    id: "T-4821",
+    subject: "Счёт без НДС",
     client: "ООО «Гранит»",
-    preview: "Счёт № 4821 пришёл без НДС",
-    time: "15:02",
-    unread: 2,
+    updated: "15:02",
+    open: 2,
   },
   {
-    id: "leto",
+    id: "T-4817",
+    subject: "Перенос доставки на среду",
     client: "ООО «Лето»",
-    preview: "Можно перенести доставку на среду?",
-    time: "13:40",
-    unread: 0,
+    updated: "13:40",
+    open: 0,
   },
   {
-    id: "kozlov",
+    id: "T-4809",
+    subject: "Подключение ЭДО",
     client: "ИП Козлов",
-    preview: "Подключите, пожалуйста, ЭДО",
-    time: "вчера",
-    unread: 1,
+    updated: "вчера",
+    open: 1,
   },
   {
-    id: "sever",
+    id: "T-4796",
+    subject: "Акт сверки за сентябрь",
     client: "АО «Северсталь-Сервис»",
-    preview: "Акт сверки за сентябрь подписан",
-    time: "6 окт",
-    unread: 0,
+    updated: "6 окт",
+    open: 0,
   },
 ];
 
 export default function ListOverviewExample() {
-  const [dialogId, setDialogId] = React.useState("granit");
+  const [ticketId, setTicketId] = React.useState("T-4821");
 
   return (
     <Card.Root className={styles.pane}>
       <Card.Body>
-        <List.Root aria-label="Диалоги">
-          {DIALOGS.map((dialog) => (
+        <List.Root aria-label="Обращения">
+          {TICKETS.map((ticket) => (
             <List.Item
-              key={dialog.id}
-              current={dialog.id === dialogId}
-              onClick={() => setDialogId(dialog.id)}
+              key={ticket.id}
+              value={ticket.id}
+              current={ticket.id === ticketId}
+              onClick={() => setTicketId(ticket.id)}
             >
-              <List.ItemText>{dialog.client}</List.ItemText>
-              <List.ItemDescription>{dialog.preview}</List.ItemDescription>
-              <List.ItemMeta>{dialog.time}</List.ItemMeta>
-              {dialog.unread > 0 ? (
-                <List.ItemCount color="blue">{dialog.unread}</List.ItemCount>
-              ) : null}
+              <List.ItemText>{ticket.subject}</List.ItemText>
+              <List.ItemDescription>
+                {ticket.id} · {ticket.client}
+              </List.ItemDescription>
+              <List.ItemMeta>{ticket.updated}</List.ItemMeta>
+              {ticket.open > 0 ? <List.ItemCount color="blue">{ticket.open}</List.ItemCount> : null}
             </List.Item>
           ))}
         </List.Root>

package/src/components/list/examples/sizes.tsx

@@ -1,35 +1,35 @@
 /** Every size tier: row height, text, icon and count follow the tier — `size`. */
 import { Icon, List, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function ListSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.tier}>
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
-          <List.Root size={size} aria-label={`Очереди, ${size}`}>
-            <List.Item current>
-              <List.ItemIcon>
-                <Icon name="object.inbox" />
-              </List.ItemIcon>
-              <List.ItemText>Входящие</List.ItemText>
-              <List.ItemCount color="blue">12</List.ItemCount>
-            </List.Item>
-            <List.Item>
-              <List.ItemIcon>
-                <Icon name="status.sent" />
-              </List.ItemIcon>
-              <List.ItemText>Отправленные</List.ItemText>
-            </List.Item>
-          </List.Root>
+        <div key={size}>
+          <div>
+            <List.Root size={size} aria-label={`Очереди, ${size}`}>
+              <List.Item current>
+                <List.ItemIcon>
+                  <Icon name="object.inbox" />
+                </List.ItemIcon>
+                <List.ItemText>Входящие</List.ItemText>
+                <List.ItemCount color="blue">12</List.ItemCount>
+              </List.Item>
+              <List.Item>
+                <List.ItemIcon>
+                  <Icon name="status.sent" />
+                </List.ItemIcon>
+                <List.ItemText>Отправленные</List.ItemText>
+              </List.Item>
+            </List.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
         </div>
       ))}
-    </>
+    </div>
   );
 }

package/src/components/list/examples/states.tsx

@@ -1,27 +1,44 @@
 /** The open record, a regular row and an unavailable one — `current`, `disabled`. */
-import { Card, List } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { List, Typography } from "prime-ui-kit";
 
 export default function ListStatesExample() {
   return (
-    <Card.Root className={styles.pane}>
-      <Card.Body>
-        <List.Root aria-label="Заявки">
-          <List.Item current>
-            <List.ItemText>Заявка № 1207 · Возврат оплаты</List.ItemText>
-            <List.ItemDescription>Открыта сейчас</List.ItemDescription>
-          </List.Item>
-          <List.Item>
-            <List.ItemText>Заявка № 1206 · Смена тарифа</List.ItemText>
-            <List.ItemDescription>Ждёт ответа клиента</List.ItemDescription>
-          </List.Item>
-          <List.Item disabled>
-            <List.ItemText>Заявка № 1198 · Доступ к API</List.ItemText>
-            <List.ItemDescription>В архиве, недоступна</List.ItemDescription>
-          </List.Item>
-        </List.Root>
-      </Card.Body>
-    </Card.Root>
+    <div>
+      <div>
+        <div>
+          <List.Root aria-label="Открытая заявка">
+            <List.Item current>
+              <List.ItemText>Заявка № 1207 · Возврат оплаты</List.ItemText>
+              <List.ItemDescription>Открыта сейчас</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            current
+          </Typography>
+        </div>
+        <div>
+          <List.Root aria-label="Заявка в работе">
+            <List.Item>
+              <List.ItemText>Заявка № 1206 · Смена тарифа</List.ItemText>
+              <List.ItemDescription>Ждёт ответа клиента</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            default
+          </Typography>
+        </div>
+        <div>
+          <List.Root aria-label="Заявка в архиве">
+            <List.Item disabled>
+              <List.ItemText>Заявка № 1198 · Доступ к API</List.ItemText>
+              <List.ItemDescription>В архиве, недоступна</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            disabled
+          </Typography>
+        </div>
+      </div>
+    </div>
   );
 }

package/src/components/list/examples/with-icon.tsx

@@ -1,7 +1,5 @@
-/** Leading avatars of clients and icons of queues; the slot sizes the avatar to the row tier — `List.ItemIcon`. */
-import { Avatar, Card, Icon, List } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Leading avatars of clients and icons of queues; an avatar takes the row tier — `List.ItemIcon`. */
+import { Avatar, Icon, List, Typography } from "prime-ui-kit";
 
 const CLIENTS = [
   { id: "belova", name: "Ирина Белова", company: "ООО «Гранит»", initials: "ИБ", color: "blue" },
@@ -11,9 +9,9 @@ const CLIENTS = [
 
 export default function ListWithIconExample() {
   return (
-    <>
-      <Card.Root className={styles.pane}>
-        <Card.Body>
+    <div>
+      <div>
+        <div>
           <List.Root aria-label="Клиенты">
             {CLIENTS.map((client, index) => (
               <List.Item key={client.id} current={index === 0}>
@@ -27,10 +25,11 @@ export default function ListWithIconExample() {
               </List.Item>
             ))}
           </List.Root>
-        </Card.Body>
-      </Card.Root>
-      <Card.Root className={styles.pane}>
-        <Card.Body>
+          <Typography as="span" variant="caption" tone="muted">
+            Avatar.Root
+          </Typography>
+        </div>
+        <div>
           <List.Root aria-label="Очереди">
             <List.Item current>
               <List.ItemIcon>
@@ -53,8 +52,11 @@ export default function ListWithIconExample() {
               <List.ItemText>Доставка</List.ItemText>
             </List.Item>
           </List.Root>
-        </Card.Body>
-      </Card.Root>
-    </>
+          <Typography as="span" variant="caption" tone="muted">
+            Icon
+          </Typography>
+        </div>
+      </div>
+    </div>
   );
 }

package/src/components/login-form/COMPONENT.md

@@ -1,6 +1,6 @@
 # LoginForm
 
-**Category:** composition
+**Category:** page
 **Kind:** composite
 
 > A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation.
@@ -22,14 +22,14 @@ import { LoginForm } from "prime-ui-kit";
 
 ## Anatomy
 ```
-LoginForm.Root                      surface: card fill, radius, shadow
+LoginForm.Root                      width cap; a Card inside: card fill, radius, shadow
 ├─ LoginForm.Header
 │  ├─ LoginForm.Logo                tile with the product mark
 │  ├─ LoginForm.Title               h1
 │  └─ LoginForm.Description
 └─ LoginForm.Body
    ├─ LoginForm.Actions             provider buttons
-   ├─ Divider.Root                  «или»
+   ├─ Divider                       «или»
    ├─ LoginForm.Form                <form>: Input.Root … · Button submit
    │  └─ LoginForm.Actions          primary button + ghost back action
    └─ LoginForm.Footer              «Нет аккаунта? <LinkButton>»
@@ -41,20 +41,34 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### LoginForm.Root
-`ref` → `HTMLDivElement`. The sign-in card: card fill, radius and shadow, the tier rhythm; provides its size to the parts. Native `<div>` props.
+`ref` → `HTMLDivElement`. The sign-in form: a Card (fill, radius, shadow) capped at a small modal's width, the tier rhythm; provides its size to the parts.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of padding, gaps and text roles; every field and button inside without its own `size` takes it. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of padding, gaps and text roles; every field and button inside without its own `size` takes it. Without it the form takes the tier of a sized host (a Modal). |
 | `align` | `"start" \| "center"` | `"start"` | `start` — the Modal header layout (rounded accent tile left, title over description right); `center` — a round logo above centered text. |
 | `flat` | `boolean` | `false` | Removes the card shadow (inside a Modal or on a plain page). No border either way. |
 | `className` | `string` | — | Class on the card. |
+| `children` | `ReactNode` | — | The parts: Header, Body. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
 ### LoginForm.Header
 `ref` → `HTMLElement`. `<header>` with the logo, title and description, laid out by Root `align`. Native props.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Logo, Title, Description. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | The other header attributes. |
+
 ### LoginForm.Logo
-`ref` → `HTMLDivElement`. A tile for the product mark or an icon (accent tile with `start`, round with `center`); decorative unless it has an `aria-label`. Native `<div>` props.
+`ref` → `HTMLDivElement`. A tile for the product mark or an icon (accent tile with `start`, round with `center`); decorative unless it has an `aria-label` — then it is the product mark image (`role="img"`).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The product mark or an `Icon`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Title
 `ref` → `HTMLHeadingElement`. The heading (kit Typography, text role by the tier).
@@ -62,21 +76,54 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `as` | `"h1" \| "h2" \| "h3"` | `"h1"` | Heading level; `h2` when the page already has an `h1`. |
+| `children` | `ReactNode` | — | The heading text. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLHeadingElement>` | — | The other heading attributes. |
 
 ### LoginForm.Description
-`ref` → `HTMLParagraphElement`. The secondary line under the title (kit Typography, secondary tone). Native `<p>` props.
+`ref` → `HTMLParagraphElement`. The secondary line under the title (kit Typography, secondary tone).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The line text. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLParagraphElement>, "children">` | — | The other paragraph attributes. |
 
 ### LoginForm.Body
-`ref` → `HTMLDivElement`. Everything under the header: provider buttons, divider, form, footer. Native `<div>` props.
+`ref` → `HTMLDivElement`. Everything under the header: provider buttons, divider, form, footer.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Actions, `Divider`, Form, Footer. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Form
 `ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The fields and the Actions. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `FormHTMLAttributes<HTMLFormElement>` | — | The other form (`onSubmit`, `action`) attributes. |
+
 ### LoginForm.Actions
-`ref` → `HTMLDivElement`. A column of full-width buttons: provider buttons above the form, or the primary action with a `ghost` back action. Native `<div>` props.
+`ref` → `HTMLDivElement`. A column of full-width buttons: provider buttons above the form, or the primary action with a `ghost` back action.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The buttons. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Footer
-`ref` → `HTMLParagraphElement`. The secondary line with a `LinkButton` («Нет аккаунта? Зарегистрироваться»); follows Root `align`. Native `<p>` props.
+`ref` → `HTMLParagraphElement`. The secondary line with a `LinkButton` («Нет аккаунта? Зарегистрироваться»); follows Root `align`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The line with a `LinkButton`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLParagraphElement>, "children">` | — | The other paragraph attributes. |
 
 ## Variants
 
@@ -84,7 +131,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `xs` / `s` | padding 16, gap 24, field gap 16, title-s / title-m | inside a Modal or a narrow popover | |
-| `m` | padding 24, gap 32, field gap 20, title-l | a regular sign-in page | yes |
+| `m` | padding 24, gap 32, field gap 20, title-l | a regular sign-in page | the host tier, else `m` |
 | `l` | padding 32, gap 40, field gap 20, heading-s | a standalone sign-in screen on a wide canvas | |
 | `xl` | padding 40, gap 40, field gap 24, heading-m | marketing-grade sign-in, touch-first | |
 
@@ -119,16 +166,23 @@ Root carries `data-size`, `data-align` and `data-flat`.
 ## Layout & spacing
 - header → body `--prime-space-8` (gap on Root); provider buttons → divider → form `--prime-space-4`; field → field → submit `--prime-space-5`; submit → back action `--prime-space-3`; form → footer `--prime-space-6`.
 - Spacing is `gap` on parents; no margins between parts.
-- The card has no border and is capped at the small modal width. To center it on a page, wrap it in your own flex container on the page.
-- The form is a layer of the surface ladder like Card (`data-depth`): on the page it is white in light with the raised whisper, fields inside are one step off it.
+- The card has no border, takes the full width up to the small modal width. To center it on a page, wrap it in your own flex container on the page.
+- The form is a Card, a layer of the surface ladder (`data-depth`): on the page it is white in light with the raised whisper, fields inside are one step off it.
 
 ## Accessibility
 
 ### Keyboard
-No keyboard interaction.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Action |
+|---|---|
+| `Enter` | In a field of the form, submits it. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The title is a real heading (`h1` by default) and the form is a native `<form>`: Enter submits.
+- The logo is decorative; with an `aria-label` it is the product mark image (`role="img"`).
 - Give `LoginForm.Form` an `aria-label` (or `aria-labelledby` pointing to the title id) so the form is a landmark.
 - Fields use `autoComplete` (`email`, `current-password`, `new-password`, `one-time-code`) so password managers and OTP autofill work.
 - Server errors in a Banner need `role="alert"`; field errors come from the fields (`aria-invalid`, described by the error).
@@ -141,15 +195,15 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | Sign in with a provider button, e-mail and password, a «forgot password» link and a sign-up link under a centered header — `align`, `LoginForm.Actions`, `LoginForm.Form`, `LoginForm.Footer`. |
+| [overview.tsx](examples/overview.tsx) | Sign in with a provider button, e-mail and password, a «forgot password» link and a sign-up link under a centered header with the product's named mark — `align`, `LoginForm.Logo`, `LoginForm.Actions`, `LoginForm.Form`, `LoginForm.Footer`. |
 | [sizes.tsx](examples/sizes.tsx) | Padding, gaps and text roles of the card follow the tier; the fields and buttons take the same one — `size`. |
-| [structure.tsx](examples/structure.tsx) | The minimal form: no logo, description or footer, and no shadow for a host that already is a surface — `flat`. |
-| [register.tsx](examples/register.tsx) | Sign-up: five fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. |
+| [structure.tsx](examples/structure.tsx) | The minimal form: no logo, description or footer, no shadow for a host that already is a surface and a second-level title under the host page's own heading — `flat`, `as`. |
+| [register.tsx](examples/register.tsx) | Sign-up: four fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. |
 | [forgot-password.tsx](examples/forgot-password.tsx) | Password reset request: one field, the primary action and a quiet way back — `LoginForm.Actions`. |
 | [reset-password.tsx](examples/reset-password.tsx) | A new password after the e-mail link: a strength meter on the first field and a mismatch error under the second one — `strength`, `error`. |
 | [verification-code.tsx](examples/verification-code.tsx) | The second step with a one-time code: a rejected code shows its error under the cells, resend is a quiet action — `DigitInput`, `LoginForm.Actions`. |
 | [states.tsx](examples/states.tsx) | The submit cycle: the button is busy while the request runs, a failed request shows a danger Banner and marks the password — `loading`, `invalid`. |
-| [narrow.tsx](examples/narrow.tsx) | On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width. |
+| [narrow.tsx](examples/narrow.tsx) | On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width — `LoginForm.Form`. |
 
 ## Mistakes
 - A separate block of your own for provider buttons → put them in `LoginForm.Actions`.
@@ -159,5 +213,5 @@ No `labels`.
 - Repeating the card `size` on every field and button → set it once on Root; fields and buttons follow it.
 
 ## Related
-- **Built from:** [Typography](../typography/COMPONENT.md) (`Title`, `Description`, `Footer`)
-- **See also:** [Input](../input/COMPONENT.md), [Fieldset](../fieldset/COMPONENT.md) (disables the fields while signing in), [Card](../card/COMPONENT.md) (the same surface for forms on an app page), [Button](../button/COMPONENT.md), [LinkButton](../link-button/COMPONENT.md), [Divider](../divider/COMPONENT.md), [DigitInput](../digit-input/COMPONENT.md), [Banner](../banner/COMPONENT.md), [Modal](../modal/COMPONENT.md)
+- **Built from:** [Card](../card/COMPONENT.md) (the surface), [Typography](../typography/COMPONENT.md) (`Title`, `Description`, `Footer`), the icon tile (`iconBox` `.tile`, the `start` logo)
+- **See also:** [Input](../input/COMPONENT.md), [Fieldset](../fieldset/COMPONENT.md) (disables the fields while signing in), [Button](../button/COMPONENT.md), [LinkButton](../link-button/COMPONENT.md), [Divider](../divider/COMPONENT.md), [DigitInput](../digit-input/COMPONENT.md), [Banner](../banner/COMPONENT.md), [Modal](../modal/COMPONENT.md)