prime-ui-kit 0.20.1 → 0.21.1

package/dist/skill/reference/components/drawer/examples/header-actions.tsx

@@ -1,11 +1,22 @@
-/** A record card: its status and a ⋯ menu sit in the header before the close button, one tier smaller; on a phone, where the title has no room beside them, they move under it — `Drawer.Actions`. */
-import { Badge, Button, DescriptionList, Drawer, Dropdown, Icon } from "prime-ui-kit";
+/** The one header of a record: the avatar, the name, its statuses leading the line under it, and only buttons at the end — `Drawer.Icon`, `Drawer.Description`, `Drawer.Actions`. */
+import {
+  Avatar,
+  Badge,
+  Button,
+  DescriptionList,
+  Drawer,
+  Dropdown,
+  Icon,
+  Tooltip,
+} from "prime-ui-kit";
 
-const DEAL = {
-  title: "Сделка №1042",
-  client: "ООО «Северный ветер»",
-  amount: "480 000 ₽",
-  owner: "Анна Соколова",
+const MEMBER = {
+  name: "Анна Соколова",
+  initials: "АС",
+  email: "a.sokolova@severnyveter.ru",
+  role: "Менеджер",
+  team: "Продажи",
+  since: "12 марта 2024",
 };
 
 export default function DrawerHeaderActionsExample() {
@@ -13,46 +24,56 @@ export default function DrawerHeaderActionsExample() {
     <Drawer.Root>
       <Drawer.Trigger>
         <Button.Root variant="soft" tone="neutral">
-          Открыть сделку
+          Открыть сотрудника
         </Button.Root>
       </Drawer.Trigger>
       <Drawer.Content>
         <Drawer.Header>
-          <Drawer.Title>{DEAL.title}</Drawer.Title>
-          <Drawer.Description>{DEAL.client}</Drawer.Description>
+          <Drawer.Icon>
+            <Avatar.Root color="purple">
+              <Avatar.Fallback>{MEMBER.initials}</Avatar.Fallback>
+            </Avatar.Root>
+          </Drawer.Icon>
+          <Drawer.Title>{MEMBER.name}</Drawer.Title>
+          <Drawer.Description>
+            <Badge.Root color="blue">{MEMBER.role}</Badge.Root>
+            <Badge.Root tone="success">Активна</Badge.Root>
+            {MEMBER.email}
+          </Drawer.Description>
           <Drawer.Actions>
-            <Badge.Root tone="success">Выиграна</Badge.Root>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                <Button.Root variant="ghost" tone="neutral" aria-label="Скопировать ссылку">
+                  <Button.Icon>
+                    <Icon name="action.copy" />
+                  </Button.Icon>
+                </Button.Root>
+              </Tooltip.Trigger>
+              <Tooltip.Content>Скопировать ссылку</Tooltip.Content>
+            </Tooltip.Root>
             <Dropdown.Root>
               <Dropdown.Trigger>
-                <Button.Root variant="ghost" tone="neutral" aria-label="Действия со сделкой">
+                <Button.Root variant="ghost" tone="neutral" aria-label="Действия с сотрудником">
                   <Button.Icon>
                     <Icon name="action.more" />
                   </Button.Icon>
                 </Button.Root>
               </Dropdown.Trigger>
               <Dropdown.Content>
-                <Dropdown.Item>Дублировать</Dropdown.Item>
-                <Dropdown.Item>Скопировать ссылку</Dropdown.Item>
+                <Dropdown.Item>Сменить роль</Dropdown.Item>
+                <Dropdown.Item>Сбросить пароль</Dropdown.Item>
                 <Dropdown.Separator />
-                <Dropdown.Item tone="danger">Удалить сделку</Dropdown.Item>
+                <Dropdown.Item tone="danger">Отключить доступ</Dropdown.Item>
               </Dropdown.Content>
             </Dropdown.Root>
           </Drawer.Actions>
         </Drawer.Header>
         <Drawer.Body>
           <DescriptionList.Root>
-            <DescriptionList.Item label="Сумма">{DEAL.amount}</DescriptionList.Item>
-            <DescriptionList.Item label="Ответственный">{DEAL.owner}</DescriptionList.Item>
+            <DescriptionList.Item label="Команда">{MEMBER.team}</DescriptionList.Item>
+            <DescriptionList.Item label="В компании с">{MEMBER.since}</DescriptionList.Item>
           </DescriptionList.Root>
         </Drawer.Body>
-        <Drawer.Footer>
-          <Drawer.Close>
-            <Button.Root variant="outline" tone="neutral">
-              Закрыть
-            </Button.Root>
-          </Drawer.Close>
-          <Button.Root>Выставить счёт</Button.Root>
-        </Drawer.Footer>
       </Drawer.Content>
     </Drawer.Root>
   );

package/dist/skill/reference/components/drawer/examples/link-loading.tsx

@@ -0,0 +1,57 @@
+/** A record opened by a link knows only its id: the title and the line under it hold their place in skeletons, the body keeps the data's geometry, then the name and the data fade in — `Drawer.Title`, `loading`. */
+import { Button, Crossfade, DescriptionList, Drawer, Skeleton } from "prime-ui-kit";
+import * as React from "react";
+
+const INVOICE = {
+  title: "Счёт №5521",
+  summary: "ООО «Северный ветер» · до 30 октября",
+  facts: [
+    ["Сумма", "248 000 ₽"],
+    ["Статус", "Ждёт оплаты"],
+    ["Выставлен", "16 октября"],
+  ],
+};
+
+export default function DrawerLinkLoadingExample() {
+  const [loading, setLoading] = React.useState(true);
+
+  const openChange = (open: boolean) => {
+    if (!open) return;
+    setLoading(true);
+    window.setTimeout(() => setLoading(false), 1200);
+  };
+
+  return (
+    <Drawer.Root onOpenChange={openChange}>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Открыть по ссылке
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title loading={loading}>{INVOICE.title}</Drawer.Title>
+          <Drawer.Description loading={loading}>{INVOICE.summary}</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body>
+          <Crossfade state={loading ? "loading" : "data"} aria-busy={loading}>
+            <DescriptionList.Root>
+              {INVOICE.facts.map(([term, value]) => (
+                <DescriptionList.Item key={term} label={term}>
+                  {loading ? <Skeleton /> : value}
+                </DescriptionList.Item>
+              ))}
+            </DescriptionList.Root>
+          </Crossfade>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close>
+            <Button.Root variant="outline" tone="neutral">
+              Закрыть
+            </Button.Root>
+          </Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}

package/dist/skill/reference/components/drawer/examples/screen.tsx

@@ -128,8 +128,8 @@ export default function DrawerScreenExample() {
   return (
     <SmartFilter.Root fields={[]} search={search} onSearchChange={setSearch}>
       <Page.Root>
-        {/* A work screen titles itself in its top bar: the only h1, the counts under it, the search
-          and the one primary action — the Drawer trigger. */}
+        {/* A work screen titles itself in its top bar: the only h1, the counts under it and the one
+          primary action — the Drawer trigger. The table's search lives in the table's toolbar. */}
         <Page.TopBar>
           <Page.Heading>
             <Page.Title>Клиенты</Page.Title>
@@ -138,9 +138,6 @@ export default function DrawerScreenExample() {
               {plural(clients.length - people, COMPANY_WORDS)} и {people} ИП
             </Page.Description>
           </Page.Heading>
-          <Page.Tools aria-label="Клиенты">
-            <SmartFilter.Toolbar />
-          </Page.Tools>
           <Page.Actions>
             <Drawer.Root open={open} onOpenChange={changeOpen}>
               <Drawer.Trigger>
@@ -266,6 +263,7 @@ export default function DrawerScreenExample() {
             rows={shown}
             getRowKey={(row) => row.id}
             paging="none"
+            toolbar={<SmartFilter.Toolbar />}
             empty="Клиентов не найдено"
           />
         </Page.Body>

package/dist/skill/reference/components/empty-page/COMPONENT.md

@@ -36,7 +36,7 @@ EmptyPage.Root               centered column; size, layout, tone (role="alert" w
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### EmptyPage.Root
-`ref` → `HTMLDivElement`. A centered column: icon tile, title, description, actions; parts rise in one after another on first render.
+`ref` → `HTMLDivElement`. A centered column: icon tile, title, description, actions; parts rise in one after another when it appears on a page already shown (a search or a filter that came to nothing); one that mounts with its page stands still.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -116,7 +116,7 @@ EmptyPage.Root               centered column; size, layout, tone (role="alert" w
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| first render | mount (not `compact`) | parts rise in (`enterMotion`), `--prime-motion-stagger` apart; collapses under reduced motion |
+| appearing | mounted on its own into a page already shown — a search or a filter that came to nothing (not `compact`) | parts rise in (`enterMotion`), `--prime-motion-stagger` apart; collapses under reduced motion. Mounted with its page, or inside a region that swaps in (`Crossfade`), it stands still |
 | layout | `layout` | `data-layout="fill" \| "compact"` (none for `default`) |
 | size | `size` | `data-size`; controls inside get the same tier |
 | error | `tone="danger"` | `data-tone="danger"`, `role="alert"` (unless a `role` is passed), the icon tile danger |

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

@@ -9,7 +9,7 @@
 - A form part where a person adds, edits and removes several records of the same fields: invoice lines, contacts of a client, specs of a plan, recipients.
 - A base value with overrides (a price and its changes by month): the base is the first row, pinned with `getLocked`, each override is a row.
 - A list of short texts in the order a person sets (selling points, checklist items): one column, `reorderable`; each row ends with its remove button and its handle.
-- Dense rows (three or more columns), a touch-heavy screen, or rows that need more than remove and move → `rowActions="menu"`: one «⋯» per row.
+- Every row shows its actions in sight — the remove «×» and, with `reorderable`, the grip after it — however many columns it has (the default `rowActions="buttons"`). `rowActions="menu"` only for a `reorderable` list on a touch-first screen, where «Выше» / «Ниже» in one «⋯» replace a drag; never for a list without `reorderable`, whose menu would hold one item.
 - Small attributes of a record beside its text (an icon, a color): `width="compact"` columns with an icon-only `Select` (`Select.TriggerIcon` and no `Select.Value`) and a `ColorPresets` swatch.
 
 ## When not to use
@@ -83,8 +83,8 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 ### rowActions
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `buttons` | a ghost «×» at the row's end and, with `reorderable`, the grip after it; a pinned row: «×» off, then the lock | short lists edited often, a desktop screen, moving rows is a main task | yes |
-| `menu` | one ghost «⋯» per row; its Dropdown holds «Выше», «Ниже» (with `reorderable`), a separator and «Удалить» (danger) | dense rows (three or more columns), a touch-heavy screen, a row that needs more than remove and move | |
+| `buttons` | a ghost «×» at the row's end and, with `reorderable`, the grip after it; a pinned row: «×» off, then the lock | every list: one action (remove) or remove and move, any number of columns | yes |
+| `menu` | one ghost «⋯» per row; its Dropdown holds «Выше», «Ниже» (with `reorderable`), a separator and «Удалить» (danger) | a `reorderable` list on a touch-first screen, where moving by the menu replaces a drag; never without `reorderable` | |
 
 ### width (column)
 | Value | Looks like | Use when | Default |
@@ -182,7 +182,7 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | [variants.tsx](examples/variants.tsx) | The two looks of the same list: the rows on the host surface, or on a fill of their own with side padding — `variant`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier: the headings, the fields, the handle and the buttons follow the list's size — `size`. |
 | [reorder.tsx](examples/reorder.tsx) | Selling points of a plan in the order of the pricing page: a one-column list has no headings and no numbers, each row ends with its remove button and then its handle, a point moves by the handle or Alt+arrows — `reorderable`, `getLabel`. |
-| [row-menu.tsx](examples/row-menu.tsx) | Payment stages of a project in dense rows: one more-button per row holds move up, move down and remove, the moves are off at the ends and next to the pinned advance, and Alt+arrows on the button move the row too — `rowActions`, `reorderable`, `getLocked`. |
+| [row-menu.tsx](examples/row-menu.tsx) | Payment stages of a project on a touch-first screen, where a drag is awkward: one more-button per row holds move up, move down and remove, the moves are off at the ends and next to the pinned advance, and Alt+arrows on the button move the row too — `rowActions`, `reorderable`, `getLocked`. |
 | [locked.tsx](examples/locked.tsx) | Specs of a plan on one line each: an icon picker and its color side by side in compact columns, the first three specs are pinned with a lock in the handle's place and a remove button that is off and says why, the rest reorder below them — `getLocked`, `width`, `reorderable`. |
 | [base-row.tsx](examples/base-row.tsx) | A plan price and its changes by month in one table: the base price is the first, pinned row whose remove button is off and says why, each change is a row with its month and its price, and the unit sits in the field, not in a heading — `getLocked`, `labels`, `width`. |
 | [limits.tsx](examples/limits.tsx) | Recipients of invoice reminders, from one to three: the last row cannot be removed and the add button says why it is off once the list is full — `min`, `max`, `hint`. |

package/dist/skill/reference/components/field-list/examples/row-menu.tsx

@@ -1,4 +1,4 @@
-/** Payment stages of a project in dense rows: one more-button per row holds move up, move down and remove, the moves are off at the ends and next to the pinned advance, and Alt+arrows on the button move the row too — `rowActions`, `reorderable`, `getLocked`. */
+/** Payment stages of a project on a touch-first screen, where a drag is awkward: one more-button per row holds move up, move down and remove, the moves are off at the ends and next to the pinned advance, and Alt+arrows on the button move the row too — `rowActions`, `reorderable`, `getLocked`. */
 import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
 import * as React from "react";
 

package/dist/skill/reference/components/hint/COMPONENT.md

@@ -84,7 +84,7 @@ The hint is always smaller than the field text; use the field's size.
 | State | Driven by | DOM |
 |---|---|---|
 | status | `tone` | `data-tone` with the shared text tone (none for `neutral`, and none while `invalid` or `disabled`); the color eases between tones |
-| error | `invalid` | `data-invalid="true"`; the message drops in over `fast` (fade + `--prime-space-1` from above, no shake, no layout shift) and the color eases from the hint color |
+| error | `invalid` | `data-invalid="true"`; the message drops in over `fast` (fade + `--prime-space-1` from above, no shake, no layout shift) when it arrives on a field already shown — an error the page mounts with stands still and the color eases from the hint color |
 | disabled | `disabled`, or a disabled `Fieldset` around it | `data-disabled="true"` |
 | size | `size`, else the host tier | `data-size` |
 

package/dist/skill/reference/components/input/COMPONENT.md

@@ -64,12 +64,14 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger inset ring on the field, `aria-invalid` on the input. A non-empty `error` implies it. |
+| `valid` | `boolean` | — | A confirmed value (a matching repeat, a verified code): a success ring and a drawn check at the field's end, `labels.valid` spoken. `invalid` wins. Pass `false` too: the live region exists only with it. |
 | `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on `Input.Wrapper` (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |
 | `counter` | `ReactNode` | — | Right side of the support row, usually `<Input.Counter current max />`. |
 | `reserveSupportRow` | `boolean` | `false` | Always render the support row (min height = hint line height), so an appearing error does not shift the layout. |
 | `id` | `string` | — | Id of the `<input>` (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
 | `strength` | `boolean` | `false` | A password strength meter for new-password fields: a stepped `ProgressBar` under the field and the level word (weak … hard) in the support row. Follows the value of `Input.Field`. |
-| `getStrength` | `(value: string) => 0 \| 1 \| 2 \| 3 \| 4` | `getPasswordStrength` | Replaces the kit's estimate of `strength`. Return 0 for empty, 1 weak … 4 hard. A hint for the person typing, not a security check. |
+| `getStrength` | `(value: string) => 0 \| 1 \| 2 \| 3 \| 4` | `getPasswordStrength` | Replaces the kit's estimate of `strength`. Return 0 for empty, 1 weak … 4 hard. |
+| `minStrength` | `1 \| 2 \| 3 \| 4` | — | The policy of `strength`: below this level the meter turns danger and the form refuses to submit (`setCustomValidity`), then shows `labels.strengthTooWeak` as the error. |
 | `onCommit` | `(value: string) => void \| Promise<void>` | — | Inline save: fires with a changed value on blur and Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`. |
 | `suggestions` | `readonly string[]` | — | Suggestions for free text (a combobox): a list under the box shows those containing the text; a pick goes into the field as typing would. Any text stays allowed; a value from a list only is `Select`. |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the `suggestions` list; the text and the focus stay in the field. |
@@ -202,7 +204,7 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 - Pointless: `required` and `optional` together; `hint` and `error` together (the error replaces the hint); `invalid` without any message in a form where the user needs to know what is wrong.
 - Forbidden: `focusRing={false}` on regular form fields (WCAG 2.4.7).
 
-**Hierarchy:** keep one size for all fields of a form; mark required/optional consistently; a status of the value goes into the hint, not into the field.
+**Hierarchy:** keep one size for all fields of a form; mark required/optional consistently; a status of the value goes into the hint, not into the field — except a confirmed value (`valid`: a repeated password that matches, a verified email or code), which is a check mark in the field, never a «совпадает» text.
 
 ## States
 | State | Driven by | DOM |
@@ -211,6 +213,7 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 | focus | keyboard focus on the input | wrapper gets the focus fill and an inset focus ring (`:has(input:focus-visible)`) |
 | no focus ring | `focusRing={false}` | `data-focus-ring="false"` on the wrapper |
 | invalid | `invalid` or non-empty `error` | `data-invalid="true"` on root and wrapper, `aria-invalid="true"` on the input, danger inset ring, danger focus ring; the control shakes once when an error arrives (`data-shake` on the frame) |
+| valid | `valid` (and not invalid: `invalid` or `error` wins) | `data-valid="true"` on the wrapper, a success inset ring; a check (`aria-hidden`) at the end of the field before the end icon and segments pops in and draws its stroke when the value becomes valid, and closes up in place when it goes; a polite live region says `labels.valid` and is in the input's `aria-describedby` while valid |
 | disabled | native `disabled` on `Input.Field`, or a disabled `Fieldset` around it | disabled fill, disabled text and icons, `cursor: not-allowed`, clear button disabled look |
 | read-only | native `readOnly` on `Input.Field` | no hover, default cursor |
 | reserved support row | `reserveSupportRow` | `data-reserve="true"` on the support row |
@@ -218,6 +221,7 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 | suggesting | `suggestions` + typing, ↓ / ↑ or a click in the field | `role="combobox"`, `aria-expanded="true"` and `aria-controls` on the input; the list fades in under the box (the floating panel's motion) with the matching part of each suggestion marked; the highlight is a fill (`data-highlighted`, `aria-selected`) named by `aria-activedescendant`; closes on a pick, Escape, Tab, blur or a press outside |
 | select segment | a `Select` inside `Input.Wrapper` | `data-field-segment` on the select root, `data-segment="true"` on its trigger: a tinted section (`fill-subtle`) flush with the start edge, a stronger fill on hover and while open, its own inset focus ring; the box's ring stays for the text |
 | strength | `strength` + the value of `Input.Field` | a stepped `ProgressBar` (4 cells, `aria-label` = `labels.strength`) under the field fills one cell after another, weak · easy · medium · hard, toned danger → warning → accent → success; the level word at the end of the support row flows in letter by letter and is announced (`aria-live`); the support row is reserved |
+| below the policy | `strength` + `minStrength` above the level of a non-empty value | the meter and the level word turn danger; `setCustomValidity(labels.strengthTooWeak)` on the input, so the form refuses to submit; after a refused submit the same text is the field's `error` (`aria-invalid`) until the level reaches `minStrength` |
 | saving | `onCommit` returned a pending Promise | `aria-busy="true"` on the input; a `Spinner` at the end of the field (`data-commit="pending"`); the field stays editable and focusable, neighbours are untouched; a live region says `labels.saving` |
 | saved | the Promise resolved (or `onCommit` returned nothing) | the spinner cross-fades into a success check (`data-commit="saved"`) that fades out after a moment; the live region says `labels.saved` |
 | save refused | the Promise rejected | the committed value is put back (unless the person typed on), the status leaves; the owner shows why through `error` |
@@ -230,6 +234,8 @@ Inline save (`onCommit`): the value at focus is the committed one. Blur and Ente
 
 Strength estimate (`strength`, replaced by `getStrength`): every trait adds a point on its own, in any order — lowercase, uppercase, digits, symbols, 10+ and 14+ characters; 0–2 points weak, 3 easy, 4 medium, 5+ hard, and under 8 characters at most easy. The meter follows `Input.Field` controlled or not.
 
+Strength policy (`minStrength`): a non-empty value below the level is invalid for the form (native constraint validation, `labels.strengthTooWeak`), so a submit stops at the field and its error appears; an empty value is left to `required`. The meter tells the person typing; the server still decides what it accepts.
+
 Suggestions (`suggestions`): the list shows the suggestions that contain the typed text (case-insensitive), and nothing when the text already is the only match. A pick writes the suggestion into the input the way typing does, so `onValueChange` (and `onCommit` on blur) receive it; the text is never restricted to the list.
 
 Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontrolled: `defaultValue`. Both are native input props.
@@ -262,6 +268,8 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 
 - `label` renders a `<label htmlFor>` bound to the input. Without `label`, set `aria-label` on `Input.Field`. A placeholder never replaces the label.
 - Hint and error are linked through `aria-describedby`; the error replaces the hint and sets `aria-invalid="true"`.
+- `valid` adds the id of a polite live region holding `labels.valid` to the input's `aria-describedby`: the state is heard when it arrives and on focus, never by colour alone; the check is `aria-hidden`.
+- `minStrength` uses native constraint validation: below the level the input's `validationMessage` is `labels.strengthTooWeak`, the form refuses to submit, and the message becomes the field's error (`aria-invalid`).
 - `Input.Icon` is decorative (`aria-hidden`). `Input.Affix` and `Input.InlineAffix` are `aria-hidden` in the reading order but describe the input (`aria-describedby`, before the hint): the unit is heard with the field, so the label never repeats it. An `aria-label` on the affix is said instead of its text («рублей» for `₽`).
 - `suggestions` make the input a `combobox` (`aria-autocomplete="list"`, `aria-expanded`, `aria-controls` on the open `listbox`, which the label names); the highlight is `aria-activedescendant`, so focus never leaves the field.
 - A `Select` inside `Input.Wrapper` is the box's start segment: its trigger is named by the select root's `aria-label` and the picked value («Иконка: Звезда»).
@@ -290,6 +298,8 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | `strengthEasy` | `"Лёгкий"` | Level word for strength 2. |
 | `strengthMedium` | `"Средний"` | Level word for strength 3. |
 | `strengthHard` | `"Сложный"` | Level word for strength 4. |
+| `strengthTooWeak` | `"Пароль недостаточно надёжный"` | Validation message of a `strength` field below `minStrength`, and its error once a submit was refused. |
+| `valid` | `"Значение подходит"` | Spoken when the field is `valid`; the check mark itself is `aria-hidden`. |
 
 ## Examples
 | Example | Shows |
@@ -302,6 +312,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | [affixes.tsx](examples/affixes.tsx) | A fixed prefix and suffix flush with the edges and a unit next to the value, heard as a word by a screen reader — `Input.Affix`, `Input.InlineAffix`, `aria-label`. |
 | [without-focus-ring.tsx](examples/without-focus-ring.tsx) | A single search field where the caret and the lighter fill show focus — `focusRing`. |
 | [password-strength.tsx](examples/password-strength.tsx) | A new password with a show toggle and a meter that fills step by step and names the level beside the hint, and a service password measured by the company's own rule — `Input.RevealButton`, `strength`, `getStrength`. |
+| [password-policy.tsx](examples/password-policy.tsx) | A password change under a policy: a new password below the required level turns the meter danger and stops the submit, the repeat gets a check once it matches — `strength`, `minStrength`, `valid`. |
 | [edge-actions.tsx](examples/edge-actions.tsx) | Actions at the field's end: a mail link with a tooltip beside copying the value, and a profile link on a read-only field — `Input.Action`, `Input.CopyButton`. |
 | [inline-edit.tsx](examples/inline-edit.tsx) | Record card fields that save on blur and Enter, revert on Escape and show the server's refusal — `onCommit`, `error`. |
 | [suggestions.tsx](examples/suggestions.tsx) | Where a returned order is kept: free text with the places already used as suggestions — `suggestions`. |
@@ -315,6 +326,8 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - `<Input.Field placeholder="Email" />` without a label → add `label` on `Input.Root` or `aria-label` on the field.
 - `<Input.Root disabled>` → `disabled` goes on `Input.Field`.
 - `<Input.Root fullWidth>` → there is no such prop; the root already fills its parent.
+- A success icon in `Input.Icon side="end"` or a «Пароли совпадают» hint for a matching value → `valid` on `Input.Root` (ring, check, spoken state).
+- Checking `strength` levels yourself and setting `error` → `minStrength`.
 - Passing both `hint` and `error` expecting both to show → only the error is shown.
 - Rendering `Input.ClearButton` for an empty field → render it only when there is a value.
 - Setting `className` with a custom border or background on `Input.Wrapper` → the fill comes from the surface context; fields inside Card/Modal already switch.
@@ -327,5 +340,5 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - Returning `false` from `onCommit` to refuse → reject the Promise (throw) and set `error`.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (`Input.Action`, `Input.CopyButton`), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [ProgressBar](../progress-bar/COMPONENT.md) (`strength`), `Icon` (segments), [VisuallyHidden](../visually-hidden/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md) (the `suggestions` list)
+- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (`Input.Action`, `Input.CopyButton`), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [ProgressBar](../progress-bar/COMPONENT.md) (`strength`), `Icon` (segments, the `valid` check), [VisuallyHidden](../visually-hidden/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md) (the `suggestions` list)
 - **See also:** [Textarea](../textarea/COMPONENT.md), [Select](../select/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md) — fields with the same contract

package/dist/skill/reference/components/input/examples/password-policy.tsx

@@ -0,0 +1,65 @@
+/** A password change under a policy: a new password below the required level turns the meter danger and stops the submit, the repeat gets a check once it matches — `strength`, `minStrength`, `valid`. */
+import { Button, Fieldset, Input } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function InputPasswordPolicyExample() {
+  const [password, setPassword] = React.useState("Graphite7");
+  const [repeat, setRepeat] = React.useState("");
+  const [submitted, setSubmitted] = React.useState(false);
+  const [saved, setSaved] = React.useState(false);
+
+  const matches = repeat !== "" && repeat === password;
+
+  return (
+    <form
+      className={styles.form}
+      onSubmit={(event) => {
+        event.preventDefault();
+        setSubmitted(true);
+        setSaved(matches);
+      }}
+    >
+      <Fieldset>
+        <Input.Root label="Новый пароль" hint="Не ниже среднего уровня" strength minStrength={3}>
+          <Input.Wrapper>
+            <Input.Field
+              type="password"
+              autoComplete="new-password"
+              required
+              value={password}
+              onValueChange={(value) => {
+                setPassword(value);
+                setSaved(false);
+              }}
+            />
+            <Input.RevealButton />
+          </Input.Wrapper>
+        </Input.Root>
+        <Input.Root
+          label="Повторите пароль"
+          valid={matches}
+          error={submitted && !matches ? "Пароли не совпадают" : undefined}
+        >
+          <Input.Wrapper>
+            <Input.Field
+              type="password"
+              autoComplete="new-password"
+              value={repeat}
+              onValueChange={(value) => {
+                setRepeat(value);
+                setSaved(false);
+              }}
+            />
+          </Input.Wrapper>
+        </Input.Root>
+      </Fieldset>
+      <div>
+        <Button.Root type="submit" tone={saved ? "success" : "accent"}>
+          {saved ? "Пароль изменён" : "Сменить пароль"}
+        </Button.Root>
+      </div>
+    </form>
+  );
+}

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

@@ -168,7 +168,7 @@ Root attributes: `data-size`, `role="list"` (the list style reset would drop the
 - 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).
 - Reorderable (`onReorder`): an `xs` handle box ends each row, 4px after the row element and its `List.ItemActions` (inline-end: on the left in RTL); the row keeps its own padding and fill, so every row's handle stands on one line.
-- `List.ItemActions`: the controls one tier below the row, 4px apart, as far from the row's edge as from its top and bottom — the end edge, or the start edge with `side="start"`, where the row's own padding then parts the controls from its icon or text.
+- `List.ItemActions`: the controls one tier below the row, 4px apart, as far from the row's edge as a control box of that tier stands from its top and bottom — at any row height: one line, with `List.ItemDescription`, with an avatar, the touch row. The end edge, or the start edge with `side="start"`, where the row's own padding then parts the controls from its icon or text.
 - One toggle place per row: a plain row ends with its toggle (label first); a reorderable row leads with it (`side="start"`) and ends with the grip — never a toggle between the label and the grip.
 - A colour dot in `List.ItemIcon` is the large `Badge.Dot` (8px) centred in an icon-wide box, so the text lines up with the rows that carry icons.
 

package/dist/skill/reference/components/login-form/COMPONENT.md

@@ -6,7 +6,7 @@
 > A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation.
 
 ## When to use
-- A standalone sign-in, sign-up, password-reset or one-time-code screen of a product.
+- The one auth screen of a product: sign-in, sign-up, an invite (set a password by a link), a password reset and a one-time code are its modes (`/login?invite=…`), each the same card with another header and form — never a page of its own per mode.
 - The same flow inside a [Modal](../modal/COMPONENT.md) (`flat`) when sign-in is opened over a page.
 - Any short authentication step where one card holds a header, optional provider buttons, 1–5 fields and one primary action.
 
@@ -140,8 +140,8 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 ### align
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `start` | accent icon tile on the left, title over description to its right, left-aligned footer | product screens, sign-in over a page, inside a Modal | yes |
-| `center` | round logo, centered title, description and footer | a standalone brand-first sign-in screen | |
+| `start` | accent icon tile on the left, title over description to its right, left-aligned footer | every auth screen of a product and sign-in over a page: the tile holds the icon of the action (`action.login`), the title names it | yes |
+| `center` | round logo, centered title, description and footer | a public brand page outside the product, where the mark is the point | |
 
 ### Flags
 | Value | Looks like | Use when | Default |
@@ -149,7 +149,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | `flat` | card fill, no shadow | inside a Modal or any other surface | `false` |
 
 **Combinations**
-- Recommended: one `size` on Root only (fields and buttons follow it); `hint` / `error` on fields for validation; a refused sign-in as `invalid` on the fields it concerns plus a [VisuallyHidden](../visually-hidden/COMPONENT.md) live region with the reason.
+- Recommended: one `size` on Root only (fields and buttons follow it); `hint` / `error` on fields for validation; a refused sign-in as `invalid` on the e-mail and the reason in words as the password field's `error` («Неверная почта или пароль»).
 - Avoid: a [Banner](../banner/COMPONENT.md) in the form; more than one primary button; provider buttons in `solid` (they compete with the submit); a Card around LoginForm.
 
 ## States
@@ -159,14 +159,14 @@ LoginForm has no state of its own. Compose them:
 |---|---|---|
 | submitting | `loading` on the submit Button; the fields in a `Fieldset disabled`, the submit Button outside it | `aria-busy` on the button; native `disabled` on the `<fieldset>`, the fields in their disabled look |
 | field error | `error` / `invalid` on `Input.Root`, `error` on `DigitInput` | `aria-invalid`, the error under the field |
-| refused sign-in | `invalid` on the fields it concerns (they shake once); `VisuallyHidden live="assertive"`, mounted from the start in `LoginForm.Form`, gets the reason | `aria-invalid` on the fields; `role="alert"` on the hidden region |
+| refused sign-in | `invalid` on the e-mail, `error` with the reason on the password (both shake once) | `aria-invalid` on the fields; the error in the password's support row, announced by its live region |
 
 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, 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 card has no border, takes the full width up to the small modal width and centres itself in a wider block. Put it on a centring canvas of your own (a grid with `place-items: center` and `min-height: 100dvh`); a `Crossfade` that swaps the page's states (loading / form / expired link) goes around the card inside that canvas, without `fill`.
 - 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
@@ -185,7 +185,7 @@ Root carries `data-size`, `data-align` and `data-flat`.
 - 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.
-- Field errors come from the fields (`aria-invalid`, described by the error). A refused sign-in has no Banner: the fields it concerns take `invalid` and an always-mounted `VisuallyHidden live="assertive"` says why.
+- Field errors come from the fields (`aria-invalid`, described by the error). A refused sign-in has no Banner: the e-mail takes `invalid` and the `error` of the password says why, announced by the support row of the field.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -195,24 +195,26 @@ 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 with the product's named mark — `align`, `LoginForm.Logo`, `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 header that names the action: its icon tile on the left, the title and one line beside it — `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, 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 refused sign-in marks both fields, which shake once, and a hidden live region says why — `loading`, `invalid`, `VisuallyHidden`. |
+| [states.tsx](examples/states.tsx) | The submit cycle: the button is busy while the request runs, a refused sign-in marks both fields, which shake once, and the password field says why in words — `loading`, `invalid`, `error`. |
 | [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`.
 - `disabled` on every field while the request runs → one [Fieldset](../fieldset/COMPONENT.md) `disabled` around the fields; keep the submit Button outside it so it shows `loading`.
-- A danger Banner above the fields for a refused sign-in → `invalid` on the fields and the reason in a `VisuallyHidden live="assertive"`; a sign-in or sign-up form has no banners.
+- A danger Banner above the fields for a refused sign-in → `invalid` on the e-mail and the reason as the password's `error`; a sign-in or sign-up form has no banners. A refusal shown only by red rings and a shake → the same `error`: a person needs the words.
+- A product mark centred over the title on the product's own sign-in → `align="start"` (the default) with the action's icon in `LoginForm.Logo`.
+- A separate page for an invite or a reset → a mode of the auth screen, the same card.
 - A placeholder instead of a field label → pass `label` to the field.
 - A Card around LoginForm → the root already is the card; use `flat` inside another surface.
 - Repeating the card `size` on every field and button → set it once on Root; fields and buttons follow it.
 
 ## Related
 - **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), [VisuallyHidden](../visually-hidden/COMPONENT.md), [Modal](../modal/COMPONENT.md)
+- **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), [Modal](../modal/COMPONENT.md)

package/dist/skill/reference/components/login-form/examples/overview.tsx

@@ -1,17 +1,17 @@
-/** 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`. */
+/** Sign in with a provider button, e-mail and password, a «forgot password» link and a sign-up link under a header that names the action: its icon tile on the left, the title and one line beside it — `LoginForm.Logo`, `LoginForm.Actions`, `LoginForm.Form`, `LoginForm.Footer`. */
 import { Button, Divider, Icon, Input, LinkButton, LoginForm } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function LoginFormOverviewExample() {
   return (
-    <LoginForm.Root align="center">
+    <LoginForm.Root>
       <LoginForm.Header>
-        <LoginForm.Logo aria-label="Маршрут">
-          <Icon name="action.send" />
+        <LoginForm.Logo>
+          <Icon name="action.login" />
         </LoginForm.Logo>
         <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
-        <LoginForm.Description>Введите данные для входа в кабинет</LoginForm.Description>
+        <LoginForm.Description>Через SSO компании или по рабочей почте</LoginForm.Description>
       </LoginForm.Header>
       <LoginForm.Body>
         <LoginForm.Actions>

package/dist/skill/reference/components/login-form/examples/states.tsx

@@ -1,5 +1,5 @@
-/** The submit cycle: the button is busy while the request runs, a refused sign-in marks both fields, which shake once, and a hidden live region says why — `loading`, `invalid`, `VisuallyHidden`. */
-import { Button, Fieldset, Icon, Input, LoginForm, VisuallyHidden } from "prime-ui-kit";
+/** The submit cycle: the button is busy while the request runs, a refused sign-in marks both fields, which shake once, and the password field says why in words — `loading`, `invalid`, `error`. */
+import { Button, Fieldset, Icon, Input, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
 export default function LoginFormStatesExample() {
@@ -30,9 +30,6 @@ export default function LoginFormStatesExample() {
             }, 1200);
           }}
         >
-          <VisuallyHidden live="assertive">
-            {failed ? "Неверный email или пароль" : ""}
-          </VisuallyHidden>
           <Fieldset disabled={pending}>
             <Input.Root label="Email" required invalid={failed}>
               <Input.Wrapper>
@@ -44,7 +41,11 @@ export default function LoginFormStatesExample() {
                 />
               </Input.Wrapper>
             </Input.Root>
-            <Input.Root label="Пароль" required invalid={failed}>
+            <Input.Root
+              label="Пароль"
+              required
+              error={failed ? "Неверная почта или пароль" : undefined}
+            >
               <Input.Wrapper>
                 <Input.Field
                   type="password"