prime-ui-kit 0.9.2 → 0.10.0

package/src/components/input/COMPONENT.md

@@ -57,6 +57,8 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `counter` | `ReactNode` | — | Right side of the support row, usually `<Input.Counter />`. |
 | `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: a stepped `ProgressBar` (4 steps) under the field and the level word at the end of the support row — weak, easy, medium, hard (`labels.strengthWeak` … `strengthHard`), toned danger → warning → accent → success. Follows the value of `Input.Field`, controlled or not. For new-password fields. |
+| `getStrength` | `(value: string) => 0 \| 1 \| 2 \| 3 \| 4` | `getPasswordStrength` | Replaces the kit's estimate: 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. Return 0 for empty, 1 weak … 4 hard. A hint for the person typing, not a security check. |
 | `labels` | `Partial<InputLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — (required) | Usually `Input.Wrapper`. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange">` | — | `className`, `data-*` and the other attributes of the field frame `<div>` (field-root rule: `className`, `ref` and the rest → frame, `id` → control). |
@@ -164,11 +166,12 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 | default / hover | — | hover darkens the fill (not when disabled, read-only or focused) |
 | 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 |
+| 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) |
 | disabled | native `disabled` on `Input.Field` | 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 |
-| counter over limit | `current > max` | `data-invalid="true"` on `Input.Counter` |
+| counter over limit | `current > max` | `data-invalid="true"` on `Input.Counter`; the current count rolls its digits to each new value |
+| 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 |
 
 Size: `data-size` on root and wrapper. Slots: `data-side="start" | "end"`.
 
@@ -204,6 +207,11 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | `optional` | `"необязательно"` | Marker after the label when `optional`. |
 | `clear` | `"Очистить"` | Accessible name of `Input.ClearButton`. |
 | `counter` | `"{current} из {max} символов"` | Screen-reader text of `Input.Counter`; `{current}` and `{max}` are replaced. |
+| `strength` | `"Надёжность пароля"` | Accessible name of the `strength` meter and the spoken prefix of the level word. |
+| `strengthWeak` | `"Слабый"` | Level word for strength 1. |
+| `strengthEasy` | `"Лёгкий"` | Level word for strength 2. |
+| `strengthMedium` | `"Средний"` | Level word for strength 3. |
+| `strengthHard` | `"Сложный"` | Level word for strength 4. |
 
 ## Examples
 | Example | Shows |
@@ -211,12 +219,13 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | [overview.tsx](examples/overview.tsx) | A labelled field with a hint under it — `label`, `hint`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; the label and the hint follow the field tier — `size`. |
 | [states.tsx](examples/states.tsx) | A default field next to a disabled and a read-only one — `disabled`, `readOnly`. |
-| [validation.tsx](examples/validation.tsx) | Required and optional markers, a hint, an error and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. |
+| [validation.tsx](examples/validation.tsx) | Live validation: an error shakes the field as it arrives, drops in and leaves as soon as the value is fixed; required and optional markers, a hint and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A decorative icon at either end of the value — `Input.Icon`, `side`. |
 | [affixes.tsx](examples/affixes.tsx) | A fixed prefix and suffix flush with the edges and a unit next to the value — `Input.Affix`, `Input.InlineAffix`. |
 | [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 meter that fills step by step and names the level beside the hint — `strength`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: a clear button and a character counter follow it — `value`, `onValueChange`, `Input.ClearButton`, `Input.Counter`. |
-| [in-form.tsx](examples/in-form.tsx) | Company details form: required fields checked on submit, neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. |
+| [in-form.tsx](examples/in-form.tsx) | Company details form: required fields checked on submit, each error leaves as its field is fixed and a saved form turns the button green; neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. |
 
 ## Mistakes
 - `<Input.Field placeholder="Email" />` without a label → add `label` on `Input.Root` or `aria-label` on the field.

package/src/components/input/examples/in-form.tsx

@@ -1,4 +1,4 @@
-/** Company details form: required fields checked on submit, neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. */
+/** Company details form: required fields checked on submit, each error leaves as its field is fixed and a saved form turns the button green; neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. */
 import { Button, Input, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -15,10 +15,19 @@ function validate(form: FormData): Errors {
 
 export default function InputInFormExample() {
   const [errors, setErrors] = React.useState<Errors>({});
+  const [saved, setSaved] = React.useState(false);
 
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setErrors(validate(new FormData(event.currentTarget)));
+    const next = validate(new FormData(event.currentTarget));
+    setErrors(next);
+    setSaved(Object.keys(next).length === 0);
+  };
+
+  /** Editing a field takes its error away and makes the form unsaved again. */
+  const edit = (field?: keyof Errors) => {
+    setSaved(false);
+    if (field) setErrors((current) => ({ ...current, [field]: undefined }));
   };
 
   return (
@@ -37,6 +46,7 @@ export default function InputInFormExample() {
             <Input.Wrapper>
               <Input.Field
                 name="name"
+                onValueChange={() => edit("name")}
                 defaultValue="ООО «Северный ветер»"
                 autoComplete="organization"
               />
@@ -45,27 +55,52 @@ export default function InputInFormExample() {
         </div>
         <Input.Root label="ИНН" required error={errors.inn} reserveSupportRow>
           <Input.Wrapper>
-            <Input.Field name="inn" defaultValue="78123" inputMode="numeric" />
+            <Input.Field
+              name="inn"
+              defaultValue="78123"
+              inputMode="numeric"
+              onValueChange={() => edit("inn")}
+            />
           </Input.Wrapper>
         </Input.Root>
         <Input.Root label="КПП" optional reserveSupportRow>
           <Input.Wrapper>
-            <Input.Field name="kpp" placeholder="9 цифр" inputMode="numeric" />
+            <Input.Field
+              name="kpp"
+              placeholder="9 цифр"
+              inputMode="numeric"
+              onValueChange={() => edit()}
+            />
           </Input.Wrapper>
         </Input.Root>
         <div className={styles.formWide}>
           <Input.Root label="Почта для счетов" hint="Сюда придут счета и акты">
             <Input.Wrapper>
-              <Input.Field name="email" type="email" placeholder="buh@company.ru" />
+              <Input.Field
+                name="email"
+                type="email"
+                placeholder="buh@company.ru"
+                onValueChange={() => edit()}
+              />
             </Input.Wrapper>
           </Input.Root>
         </div>
       </div>
       <div className={styles.formActions}>
-        <Button.Root variant="ghost" tone="neutral" type="reset" onClick={() => setErrors({})}>
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          type="reset"
+          onClick={() => {
+            setErrors({});
+            setSaved(false);
+          }}
+        >
           Отменить
         </Button.Root>
-        <Button.Root type="submit">Сохранить</Button.Root>
+        <Button.Root type="submit" tone={saved ? "success" : "accent"}>
+          {saved ? "Сохранено" : "Сохранить"}
+        </Button.Root>
       </div>
     </form>
   );

package/src/components/input/examples/password-strength.tsx

@@ -0,0 +1,12 @@
+/** A new password with a meter that fills step by step and names the level beside the hint — `strength`. */
+import { Input } from "prime-ui-kit";
+
+export default function InputPasswordStrengthExample() {
+  return (
+    <Input.Root label="Новый пароль" hint="Не короче 8 символов" strength>
+      <Input.Wrapper>
+        <Input.Field type="password" autoComplete="new-password" defaultValue="Graphite2026" />
+      </Input.Wrapper>
+    </Input.Root>
+  );
+}

package/src/components/input/examples/validation.tsx

@@ -1,9 +1,28 @@
-/** Required and optional markers, a hint, an error and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. */
+/** Live validation: an error shakes the field as it arrives, drops in and leaves as soon as the value is fixed; required and optional markers, a hint and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. */
 import { Button, Input } from "prime-ui-kit";
 import * as React from "react";
 
+const PROMO_CODES = ["SPRING25", "TEAM10"];
+
+/** The INN error, or nothing when the value is a valid INN. */
+function innError(value: string) {
+  if (value === "") return "Введите ИНН";
+  if (/\D/.test(value)) return "Только цифры, без пробелов и букв";
+  if (value.length !== 10 && value.length !== 12) return "ИНН состоит из 10 или 12 цифр";
+  return undefined;
+}
+
 export default function InputValidationExample() {
-  const [checked, setChecked] = React.useState(false);
+  const [inn, setInn] = React.useState("77010");
+  const [promo, setPromo] = React.useState("SPRING");
+  const [promoError, setPromoError] = React.useState<string>();
+
+  const applyPromo = () =>
+    setPromoError(
+      PROMO_CODES.includes(promo.trim().toUpperCase())
+        ? undefined
+        : "Промокод недействителен или истёк",
+    );
 
   return (
     <>
@@ -12,23 +31,29 @@ export default function InputValidationExample() {
           <Input.Field defaultValue="ООО «Северный ветер»" autoComplete="organization" />
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root label="ИНН" required error="ИНН состоит из 10 или 12 цифр">
+      <Input.Root
+        label="ИНН"
+        required
+        hint="10 цифр для организации, 12 — для ИП"
+        error={innError(inn)}
+      >
         <Input.Wrapper>
-          <Input.Field defaultValue="77010" inputMode="numeric" />
+          <Input.Field value={inn} onValueChange={setInn} inputMode="numeric" />
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root
-        label="Промокод"
-        optional
-        reserveSupportRow
-        error={checked ? "Промокод недействителен или истёк" : undefined}
-      >
+      <Input.Root label="Промокод" optional reserveSupportRow error={promoError}>
         <Input.Wrapper>
-          <Input.Field defaultValue="SPRING25" />
+          <Input.Field
+            value={promo}
+            onValueChange={(value) => {
+              setPromo(value);
+              setPromoError(undefined);
+            }}
+          />
         </Input.Wrapper>
       </Input.Root>
-      <Button.Root variant="soft" tone="neutral" onClick={() => setChecked((value) => !value)}>
-        {checked ? "Сбросить проверку" : "Проверить промокод"}
+      <Button.Root variant="soft" tone="neutral" onClick={applyPromo}>
+        Применить промокод
       </Button.Root>
     </>
   );

package/src/components/kanban/COMPONENT.md

@@ -24,7 +24,7 @@ import { Kanban, type KanbanColumn, type KanbanMove, type KanbanValue } from "pr
 ## Anatomy
 ```
 Kanban.Root                       board: horizontal strip of columns, its own Dnd.Root if none above
-└─ column (from `columns`)        `fill-faint` well; header + own vertical scroll
+└─ column (from `columns`)        `fill-muted` well (one ladder step off the board's surface); header + own vertical scroll
    ├─ header                      title (h3) · count Badge · renderColumnActions(column)
    └─ <ul> (Dnd.Sortable)         drop area; Skeleton cards while loading; EmptyPage when empty
       └─ Kanban.Item              <li> card from renderItem(item)
@@ -61,7 +61,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "defaultValue">` | — | `className` (the board height), `aria-label` and the other div attributes. |
 
 ### Kanban.Item
-`ref` → `HTMLLIElement`. One card: an `<li>` on the raised fill (`bg-raised`) with the card shadow; return it from `renderItem` (it takes its id from there). Draggable by the whole card, focusable, `aria-keyshortcuts` for Alt + arrows. Presses on buttons, fields and links inside never start a drag.
+`ref` → `HTMLLIElement`. One card: an `<li>` two ladder steps lighter than its column (`control-selected`: white in light) with the raised shadow, lifted to the overlay shadow on hover; return it from `renderItem` (it takes its id from there). Draggable by the whole card, focusable, `aria-keyshortcuts` for Alt + arrows. Presses on buttons, fields and links inside never start a drag.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -111,7 +111,7 @@ The board has no visual variants: one look, fills over lines.
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| idle | — | cards show `cursor: grab`; under a mouse the card gets a `fill-subtle` wash (`@media (hover: hover)` only) |
+| idle | — | cards show `cursor: grab`; under a mouse the card lifts to `--prime-shadow-overlay` (`@media (hover: hover)` only) — no wash: a wash is one ladder step, the column's own color |
 | carried | a drag | Dnd: the clone lifts on `--prime-shadow-modal`, a dashed accent gap opens where the card lands, cards glide aside |
 | over a column | pointer over another column | the gap opens there; an empty column's well fades out |
 | refused | `limit` reached, `canDrop` returns `false` | `data-dnd-reject` on the `<ul>`: `danger-soft` fill |
@@ -120,7 +120,7 @@ The board has no visual variants: one look, fills over lines.
 | loading | `loading` | `aria-busy` and `data-loading` on the root; `Skeleton` cards; `Crossfade` swaps them for the cards |
 | disabled | `disabled` / `Kanban.Item disabled` | `data-disabled` on the root / card; no `aria-roledescription`, no shortcuts |
 
-Motion: the hover wash and the empty well fade on opacity (`fast`, `standard`); the swap from skeletons is `Crossfade`; drag motion is Dnd's (lift, gap, glide, landing). Under `prefers-reduced-motion` all of it is off.
+Motion: the hover lift (shadow, the card rises above its neighbours) and the empty well fade (`fast`, `standard`); a card dropped under the mouse lands straight into its hover lift (`data-dnd-hover`); the swap from skeletons is `Crossfade`; drag motion is Dnd's (lift, gap, glide, landing). Under `prefers-reduced-motion` all of it is off.
 
 ## Layout & spacing
 - Give the root a height (`className`): columns span it and every column body scrolls on its own; without one the columns take the height of the tallest.

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

@@ -119,8 +119,8 @@ 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 canvas.
-- Fields inside take `--prime-color-field-bg-surface`, like in Card.
+- 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.
 
 ## Accessibility
 
@@ -144,9 +144,9 @@ No `labels`.
 | [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`. |
 | [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 password mismatch shown as the field error — `error`, `LoginForm.Form`. |
+| [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`. |
 | [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: two fields and a mismatch error under the second one — `error`. |
+| [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. |

package/src/components/login-form/examples/register.tsx

@@ -1,4 +1,4 @@
-/** Sign-up: five fields in one column, a password mismatch shown as the field error — `error`, `LoginForm.Form`. */
+/** 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`. */
 import { Button, Divider, Icon, Input, LinkButton, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
@@ -45,7 +45,7 @@ export default function LoginFormRegisterExample() {
                 <Input.Field placeholder="@login" />
               </Input.Wrapper>
             </Input.Root>
-            <Input.Root label="Пароль" required hint="Минимум 6 символов">
+            <Input.Root label="Пароль" required hint="Минимум 8 символов" strength>
               <Input.Wrapper>
                 <Input.Field
                   type="password"

package/src/components/login-form/examples/reset-password.tsx

@@ -1,4 +1,4 @@
-/** A new password after the e-mail link: two fields and a mismatch error under the second one — `error`. */
+/** 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`. */
 import { Button, Icon, Input, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
@@ -23,7 +23,7 @@ export default function LoginFormResetPasswordExample() {
         </LoginForm.Header>
         <LoginForm.Body>
           <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
-            <Input.Root label="Новый пароль" required hint="Минимум 6 символов">
+            <Input.Root label="Новый пароль" required hint="Минимум 8 символов" strength>
               <Input.Wrapper>
                 <Input.Field
                   type="password"

package/src/components/modal/COMPONENT.md

@@ -107,7 +107,7 @@ No DOM: clone the single child and chain its `onClick` (unless the child's handl
 | `children` | `ReactElement` | — (required) | One element, usually a Button. |
 
 ## Variants
-The dialog has one look: `bg-raised`, `--prime-modal-radius` (16), `shadow-modal`, on a `bg-scrim`. Header, body and footer are separated by faint inset hairlines.
+The dialog has one look: the floating layer of the ladder (`data-depth="floating"`: white in light, a step above a card in dark), `--prime-modal-radius` (16), `shadow-modal`, on a `bg-scrim`. Header, body and footer are separated by faint inset hairlines.
 
 ### size (Content)
 | Value | Looks like | Use when | Default |
@@ -165,7 +165,7 @@ Loading or disabled actions use the Button props (`loading`, `disabled`) inside
 ## Layout & spacing
 - Dialog padding `--prime-modal-padding` (24) on every zone; header 24 top / 20 bottom, body 20 with a 16 gap between blocks, footer 20 top / 24 bottom.
 - Max height = viewport minus `--prime-modal-viewport-padding` on both sides; only the body scrolls.
-- Fields inside get the surface field fill; cards inside become sunken tiles. Group fields with a 20 gap.
+- Fields inside take the floating layer's fill; a card inside is the next layer (`floating-1`), a flat tile. Group fields with a 20 gap.
 - Narrow viewport (< 640px): bottom sheet, full width, top corners `--prime-sheet-radius`, a grab handle strip on top, up to `100dvh − --prime-sheet-top-gap` high, the bottom safe-area inset below the content.
 
 ## Accessibility
@@ -201,7 +201,7 @@ Loading or disabled actions use the Button props (`loading`, `disabled`) inside
 | [custom-container.tsx](examples/custom-container.tsx) | The dialog portals into a given node instead of the document body — `container`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A destructive confirm closes only from its buttons, and not at all while the request runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the open state and opens the dialog from code, without a trigger — `open`, `onOpenChange`. |
-| [in-form.tsx](examples/in-form.tsx) | A settings form in a dialog: the footer button submits the form and an empty name keeps it open — `Modal.Body`, `Modal.Footer`, `error`. |
+| [in-form.tsx](examples/in-form.tsx) | A settings form in a dialog: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Modal.Body`, `Modal.Footer`, `error`. |
 
 ## Mistakes
 - Destructive confirm that closes on a stray scrim click → `closeOnOutsideClick={false}`.

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

@@ -16,6 +16,6 @@
   width: 100%;
   padding: var(--prime-space-4);
   border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
-  box-shadow: var(--prime-card-shadow);
+  background: var(--prime-color-layer-nested);
+  box-shadow: var(--prime-shadow-raised);
 }

package/src/components/modal/examples/in-form.tsx

@@ -1,4 +1,4 @@
-/** A settings form in a dialog: the footer button submits the form and an empty name keeps it open — `Modal.Body`, `Modal.Footer`, `error`. */
+/** A settings form in a dialog: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Modal.Body`, `Modal.Footer`, `error`. */
 import { Button, Icon, Input, Modal, Select, Switch } from "prime-ui-kit";
 import * as React from "react";
 
@@ -44,7 +44,12 @@ export default function ModalInFormExample() {
           <form id={formId} className={styles.form} noValidate onSubmit={submit}>
             <Input.Root label="Название" required error={error} reserveSupportRow>
               <Input.Wrapper>
-                <Input.Field name="name" defaultValue="Сайт компании" autoFocus />
+                <Input.Field
+                  name="name"
+                  defaultValue="Сайт компании"
+                  autoFocus
+                  onValueChange={() => setError(undefined)}
+                />
               </Input.Wrapper>
             </Input.Root>
             <Select.Root label="Ответственный" defaultValue="anna">

package/src/components/native-select/COMPONENT.md

@@ -81,7 +81,7 @@ One look, the Select trigger's: field fill, inset control border, tier radius; t
 | State | Driven by | DOM |
 |---|---|---|
 | placeholder shown | `placeholder` and no value | the empty first option is selected; placeholder text color |
-| invalid | `invalid` or `error` | `aria-invalid="true"`, `data-invalid="true"` |
+| invalid | `invalid` or `error` | `aria-invalid="true"`, `data-invalid="true"`; the control shakes once when an error arrives (`data-shake` on the frame) |
 | disabled | `disabled` | native `disabled` |
 | size | `size` | `data-size` |
 | focus ring off | `focusRing={false}` | `data-focus-ring="false"` |
@@ -116,10 +116,10 @@ One look, the Select trigger's: field fill, inset control border, tier radius; t
 | [overview.tsx](examples/overview.tsx) | A labelled system select with a hint; the OS picker opens on phones — `label`, `hint`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; the label and the hint follow the field tier — `size`. |
 | [states.tsx](examples/states.tsx) | A default field next to a disabled and an invalid one — `disabled`, `invalid`. |
-| [validation.tsx](examples/validation.tsx) | Required and optional markers, a hint, and an error that replaces the hint in the same row — `required`, `optional`, `hint`, `error`. |
+| [validation.tsx](examples/validation.tsx) | Live validation: unassigning the owner shakes the field and drops the error in, picking someone clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. |
 | [option-groups.tsx](examples/option-groups.tsx) | Options under group headings with the native optgroup, and a placeholder while nothing is picked — `placeholder`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: the plan drives the price under the field — `value`, `onValueChange`. |
-| [in-form.tsx](examples/in-form.tsx) | A delivery form for phones: the native value goes into FormData, the required city is checked on submit — `name`, `required`, `error`. |
+| [in-form.tsx](examples/in-form.tsx) | A delivery form for phones: the native value goes into FormData, the required city is checked on submit, the error shakes the field and leaves once a city is picked, a calm note confirms the order — `name`, `required`, `error`. |
 
 ## Mistakes
 - `Select.Item` parts as children → NativeSelect takes plain `<option>` / `<optgroup>`.

package/src/components/native-select/examples/examples.module.css

@@ -10,5 +10,7 @@
 
 .actions {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  gap: var(--prime-space-2);
 }

package/src/components/native-select/examples/in-form.tsx

@@ -1,4 +1,4 @@
-/** A delivery form for phones: the native value goes into FormData, the required city is checked on submit — `name`, `required`, `error`. */
+/** A delivery form for phones: the native value goes into FormData, the required city is checked on submit, the error shakes the field and leaves once a city is picked, a calm note confirms the order — `name`, `required`, `error`. */
 import { Button, NativeSelect, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -6,11 +6,13 @@ import styles from "./examples.module.css";
 
 export default function NativeSelectInFormExample() {
   const [error, setError] = React.useState<string>();
+  const [saved, setSaved] = React.useState(false);
 
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const city = String(new FormData(event.currentTarget).get("city") ?? "");
     setError(city ? undefined : "Выберите город доставки");
+    setSaved(Boolean(city));
   };
 
   return (
@@ -24,18 +26,31 @@ export default function NativeSelectInFormExample() {
         required
         error={error}
         placeholder="Выберите город"
-        onValueChange={() => setError(undefined)}
+        onValueChange={() => {
+          setError(undefined);
+          setSaved(false);
+        }}
       >
         <option value="msk">Москва</option>
         <option value="spb">Санкт-Петербург</option>
         <option value="kzn">Казань</option>
       </NativeSelect>
-      <NativeSelect name="slot" label="Время" defaultValue="day">
+      <NativeSelect
+        name="slot"
+        label="Время"
+        defaultValue="day"
+        onValueChange={() => setSaved(false)}
+      >
         <option value="morning">09:00–12:00</option>
         <option value="day">12:00–18:00</option>
         <option value="evening">18:00–21:00</option>
       </NativeSelect>
       <div className={styles.actions}>
+        {saved ? (
+          <Typography as="p" variant="body-s" tone="secondary">
+            Доставка оформлена
+          </Typography>
+        ) : null}
         <Button.Root type="submit">Продолжить</Button.Root>
       </div>
     </form>

package/src/components/native-select/examples/validation.tsx

@@ -1,7 +1,10 @@
-/** Required and optional markers, a hint, and an error that replaces the hint in the same row — `required`, `optional`, `hint`, `error`. */
+/** Live validation: unassigning the owner shakes the field and drops the error in, picking someone clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. */
 import { NativeSelect } from "prime-ui-kit";
+import * as React from "react";
 
 export default function NativeSelectValidationExample() {
+  const [owner, setOwner] = React.useState("anna");
+
   return (
     <>
       <NativeSelect label="Страна" required hint="Определяет валюту счетов" defaultValue="ru">
@@ -11,9 +14,11 @@ export default function NativeSelectValidationExample() {
       <NativeSelect
         label="Ответственный"
         required
-        error="Назначьте ответственного"
-        placeholder="Не выбран"
+        error={owner === "none" ? "Назначьте ответственного" : undefined}
+        value={owner}
+        onValueChange={setOwner}
       >
+        <option value="none">Не назначен</option>
         <option value="anna">Анна Петрова</option>
         <option value="ivan">Иван Смирнов</option>
       </NativeSelect>

package/src/components/page-content/examples/examples.module.css

@@ -5,7 +5,7 @@
   width: 100%;
   padding: var(--prime-layout-gutter-m);
   border-radius: var(--prime-card-radius);
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-current);
   container-type: inline-size;
 }
 

package/src/components/popover/COMPONENT.md

@@ -77,7 +77,7 @@ No DOM: clone the single child and merge `ref` and `onClick`. Trigger toggles th
 `ref` → the element. `<div>` (title + description with a 4 px step) / `<h2>` (names the dialog) / `<p>` (describes it) / `<div>` (buttons at the end, stacked full width on phones, below 640 px). + native props.
 
 ## Variants
-The panel has one look: `bg-raised` fill, `--prime-panel-radius`, `shadow-overlay`, no border. Fields inside get the surface field fill; cards inside become sunken tiles.
+The panel has one look: the floating layer of the ladder (`data-depth="floating"`), `--prime-panel-radius`, `shadow-overlay`, no border. Fields inside take that layer's fill; a card inside is the next layer, a flat tile.
 
 ### size (Content)
 | Value | Looks like | Use when | Default |
@@ -162,7 +162,7 @@ No `labels`.
 | [flush.tsx](examples/flush.tsx) | A notification list whose rows and dividers reach the panel edges; each row brings its own padding — `flush`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A destructive confirm that closes only from its buttons, and not at all while the request runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the open state: another button opens the panel from code and its own button closes it — `open`, `onOpenChange`. |
-| [in-form.tsx](examples/in-form.tsx) | An invite form in a panel: Tab stays inside, the role list does not count as an outside click, and submit closes the panel — `trapFocus`. |
+| [in-form.tsx](examples/in-form.tsx) | An invite form in a panel: Tab stays inside, the role list does not count as an outside click, an invalid email shakes the field and keeps the panel open until it is fixed — `trapFocus`, `error`. |
 
 ## Mistakes
 - A hint of a few words in a Popover → use Tooltip (hover / focus, no interactive content).

package/src/components/popover/examples/in-form.tsx

@@ -1,14 +1,28 @@
-/** An invite form in a panel: Tab stays inside, the role list does not count as an outside click, and submit closes the panel — `trapFocus`. */
+/** An invite form in a panel: Tab stays inside, the role list does not count as an outside click, an invalid email shakes the field and keeps the panel open until it is fixed — `trapFocus`, `error`. */
 import { Button, Input, Popover, Select } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
+/** The email error, or nothing when the address is valid. */
+function emailError(value: string) {
+  if (!value.trim()) return "Введите почту";
+  if (!/^\S+@\S+\.\S+$/.test(value.trim())) return "Проверьте адрес: нужен вид name@company.ru";
+  return undefined;
+}
+
 export default function PopoverInFormExample() {
   const [open, setOpen] = React.useState(false);
+  const [error, setError] = React.useState<string>();
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
+    <Popover.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setError(undefined);
+      }}
+    >
       <Popover.Trigger>
         <Button.Root>Пригласить</Button.Root>
       </Popover.Trigger>
@@ -19,14 +33,22 @@ export default function PopoverInFormExample() {
         </Popover.Header>
         <form
           className={styles.stack}
+          noValidate
           onSubmit={(event) => {
             event.preventDefault();
-            setOpen(false);
+            const next = emailError(String(new FormData(event.currentTarget).get("email") ?? ""));
+            setError(next);
+            if (!next) setOpen(false);
           }}
         >
-          <Input.Root label="Почта" required>
+          <Input.Root label="Почта" required error={error} reserveSupportRow>
             <Input.Wrapper>
-              <Input.Field type="email" name="email" placeholder="name@company.ru" />
+              <Input.Field
+                type="email"
+                name="email"
+                placeholder="name@company.ru"
+                onValueChange={() => setError(undefined)}
+              />
             </Input.Wrapper>
           </Input.Root>
           <Select.Root label="Роль" defaultValue="editor">

package/src/components/progress-bar/COMPONENT.md

@@ -51,6 +51,7 @@ A native `<progress>` (transparent, for assistive tech) under the drawn line.
 | `value` | `number` | — (required) | The current value, clamped to `0…max`. |
 | `max` | `number` | `100` | Top of the scale. |
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"accent"` | Fill color, telling the outcome. |
+| `steps` | `boolean` | `false` | Draws the scale as `max` equal cells (2–12), each filled whole; `value` rounds to a cell. In one change the cells go one after another — from the start when filling, from the end when emptying. For a level out of a few: password strength, onboarding steps. |
 
 ### ProgressBar · segments mode
 A `role="group"` bar of parts, named by `label` and described by the distribution text.
@@ -100,8 +101,9 @@ A `role="group"` bar of parts, named by `label` and described by the distributio
 | tone / size | props | `data-tone` (value mode), `data-size` on the root |
 | value | `value`, `max` | native `value` / `max`; the drawn pill slides by `translate` over `slow` + `standard`, RTL aware |
 | segments | `segments`, `max`, `segmentGap` | `data-segment-gap` on the group, `data-tone` per part; widths animate by `flex-grow` over `slow` |
+| steps | `steps` (value mode) | `data-steps="true"` on the bar; `max` cells (2–12), filled ones `data-filled`; a cell fills from its start edge (`base` · emphasized), cells of one change go half a stagger step apart — from the start when filling, from the end when emptying |
 | empty segments | `segments` empty or all `0` | only the track; accessible text `labels.empty` / `labels.allEmpty` |
-| reduced motion | `prefers-reduced-motion` | fill and widths change instantly |
+| reduced motion | `prefers-reduced-motion` | fill, widths and cells change instantly |
 
 Always controlled: pass the current `value` or `segments` on every render.
 
@@ -137,6 +139,8 @@ No keyboard interaction.
 | [sizes.tsx](examples/sizes.tsx) | Every tier: the line grows from 4 to 8 px like the Slider track — `size`. |
 | [custom-max.tsx](examples/custom-max.tsx) | A scale of steps instead of percent: 3 of 5 profile steps — `max`. |
 | [segments.tsx](examples/segments.tsx) | Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list — `segments`, `segmentGap`, `max`. |
+| [steps.tsx](examples/steps.tsx) | The scale as whole cells that fill one after another: 2 of 5 onboarding steps, forward and back — `steps`, `max`. |
+| [milestone.tsx](examples/milestone.tsx) | A rare milestone: the last invoice of the quarter fills the bar, the tone turns success and a short confetti burst marks it — `value`, `tone`, `celebrate()`. |
 
 ## Mistakes
 - No `label` and no `aria-label` → the bar has no accessible name.