prime-ui-kit 0.9.2 → 0.9.3

package/src/components/button/examples/download.tsx

@@ -0,0 +1,45 @@
+/** A long download inside the button: the fill shows how far it got, the label counts and then offers the file — `progress`. */
+import { Button, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+/** Share of the file received at each network tick. */
+const TICKS = [0.06, 0.15, 0.27, 0.34, 0.48, 0.61, 0.66, 0.79, 0.88, 0.97, 1];
+
+export default function ButtonDownloadExample() {
+  const [tick, setTick] = React.useState<number | null>(null);
+  const [ready, setReady] = React.useState(false);
+
+  React.useEffect(() => {
+    if (tick === null) return;
+    const timer = window.setTimeout(() => {
+      if (tick + 1 < TICKS.length) setTick(tick + 1);
+      else {
+        setTick(null);
+        setReady(true);
+      }
+    }, 220);
+    return () => window.clearTimeout(timer);
+  }, [tick]);
+
+  const progress = tick === null ? undefined : TICKS[tick];
+
+  return (
+    <Button.Root
+      variant={ready ? "soft" : "solid"}
+      progress={progress}
+      onClick={() => {
+        if (ready) setReady(false);
+        else if (tick === null) setTick(0);
+      }}
+    >
+      <Button.Icon>
+        <Icon name={ready ? "action.externalLink" : "action.download"} />
+      </Button.Icon>
+      {progress !== undefined
+        ? `Скачивание ${Math.round(progress * 100)}%`
+        : ready
+          ? "Открыть отчёт"
+          : "Скачать отчёт за октябрь"}
+    </Button.Root>
+  );
+}

package/src/components/button/examples/hold-to-confirm.tsx

@@ -0,0 +1,23 @@
+/** A destructive action that needs a held press; letting go early rolls the fill back and does nothing — `holdToConfirm`, `onConfirm`. */
+import { Button, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+export default function ButtonHoldToConfirmExample() {
+  const [deleted, setDeleted] = React.useState(false);
+
+  return deleted ? (
+    <Button.Root variant="ghost" tone="neutral" onClick={() => setDeleted(false)}>
+      <Button.Icon>
+        <Icon name="action.refresh" />
+      </Button.Icon>
+      Восстановить проект
+    </Button.Root>
+  ) : (
+    <Button.Root variant="soft" tone="danger" holdToConfirm onConfirm={() => setDeleted(true)}>
+      <Button.Icon>
+        <Icon name="action.delete" />
+      </Button.Icon>
+      Удерживайте, чтобы удалить проект
+    </Button.Root>
+  );
+}

package/src/components/button/examples/label-morph.tsx

@@ -0,0 +1,33 @@
+/** A new label flows into the button letter by letter while the width glides: save, then saved; a step flow — `children`, `loading`. */
+import { Button } from "prime-ui-kit";
+import * as React from "react";
+
+const STEPS = ["Продолжить", "Подтвердить оплату", "Оплачено"];
+
+export default function ButtonLabelMorphExample() {
+  const [save, setSave] = React.useState<"idle" | "saving" | "saved">("idle");
+  const [step, setStep] = React.useState(0);
+
+  React.useEffect(() => {
+    if (save === "idle") return;
+    const timer = window.setTimeout(
+      () => setSave(save === "saving" ? "saved" : "idle"),
+      save === "saving" ? 1200 : 2000,
+    );
+    return () => window.clearTimeout(timer);
+  }, [save]);
+
+  return (
+    <>
+      <Button.Root
+        variant="soft"
+        tone="neutral"
+        loading={save === "saving"}
+        onClick={() => setSave("saving")}
+      >
+        {save === "saved" ? "Изменения сохранены" : "Сохранить изменения"}
+      </Button.Root>
+      <Button.Root onClick={() => setStep((step + 1) % STEPS.length)}>{STEPS[step]}</Button.Root>
+    </>
+  );
+}

package/src/components/card/COMPONENT.md

@@ -39,7 +39,7 @@ Card.Root variant="cover"        Media · Body(Title, Description) · Footer
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Card.Root
-`ref` → `HTMLDivElement`. The filled surface (card fill, radius 12, raised shadow, no border) and a size container; `variant` picks the template layout of its parts.
+`ref` → `HTMLDivElement`. A layer of the surface ladder (`data-depth` one above the surface around it: white on the light page, the next layer when nested; radius 12, the raised whisper only on the page, no border) and a size container; `variant` picks the template layout of its parts.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -143,13 +143,15 @@ Card.Root variant="cover"        Media · Body(Title, Description) · Footer
 |---|---|---|
 | template | `variant` | `data-variant` |
 | flat | `flat` | `data-flat` |
+| depth | nesting: one above the nearest surface (the page and the AppShell panel are 0) | `data-depth` (`1`–`4`, `floating-1`/`floating-2` inside a floating layer); the fill is `--prime-color-layer-current`, the shadow only at depth 1 |
 | card width | container queries | `split` stacks below 22rem, `Header` wraps below 22rem, the `stat-trend` value changes at 20rem / 36rem |
 
 Card is static: no hover, focus or press of its own.
 
 ## Layout & spacing
 - Grid of cards: `repeat(auto-fit, minmax(min(100%, 14rem), 1fr))`, gap `--prime-space-4`.
-- Padding `--prime-card-padding-m` (20); `Body` gap `--prime-card-gap` (16); fields inside `Body` 20 apart, on the surface field fill.
+- Padding `--prime-card-padding-m` (20); `Body` gap `--prime-card-gap` (16); fields inside `Body` 20 apart, one ladder step off the card.
+- Depth comes from nesting (foundation §4): on the page — the AppShell panel is the page — a card is layer 1 (white in light) with the raised whisper; inside another card it is the next layer, a flat tile. The ladder stops at layer 4.
 - Long values wrap, labels truncate; a chart SVG needs a CSS height.
 - In a `Header` the title takes the free width; a control or a caption after it sits at the end without a wrapper.
 

package/src/components/card/examples/narrow.tsx

@@ -28,7 +28,7 @@ export default function CardNarrowExample() {
                     <Icon name="object.wallet" />
                   </Card.Icon>
                   <Card.Label>Средний чек</Card.Label>
-                  <Card.Value>₽ 2 450</Card.Value>
+                  <Card.Value>2 450 ₽</Card.Value>
                 </div>
               </Card.Body>
             </Card.Root>
@@ -36,7 +36,7 @@ export default function CardNarrowExample() {
           <div className={width.className}>
             <Card.Root variant="stat-trend">
               <Card.Label>Выручка</Card.Label>
-              <Card.Value>₽ 4,2 млн</Card.Value>
+              <Card.Value>4,2 млн ₽</Card.Value>
               <Card.Delta tone="success">+18% к прошлому месяцу</Card.Delta>
             </Card.Root>
           </div>

package/src/components/card/examples/panel-chart.tsx

@@ -23,7 +23,7 @@ export default function CardPanelChartExample() {
         </Card.Header>
         <Card.Body>
           <Typography variant="body-s" tone="secondary">
-            С начала квартала: ₽ 12,6 млн, план выполнен на 84%.
+            С начала квартала: 12,6 млн ₽, план выполнен на 84%.
           </Typography>
         </Card.Body>
         <Card.Media>

package/src/components/card/examples/variants.tsx

@@ -24,7 +24,7 @@ export default function CardVariantsExample() {
 
       <Card.Root variant="stat-trend">
         <Card.Label>Выручка за месяц</Card.Label>
-        <Card.Value>₽ 4,2 млн</Card.Value>
+        <Card.Value>4,2 млн ₽</Card.Value>
         <Card.Delta tone="success">+18% к сентябрю</Card.Delta>
       </Card.Root>
 

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

@@ -41,7 +41,7 @@
   width: min(100%, var(--prime-panel-min-width));
   padding: var(--prime-panel-padding);
   border-radius: var(--prime-panel-radius);
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-floating-bg);
   box-shadow: var(--prime-shadow-overlay);
 }
 

package/src/components/code-block/COMPONENT.md

@@ -3,7 +3,7 @@
 **Category:** data-display
 **Kind:** primitive
 
-> A static TypeScript / TSX snippet with syntax highlighting, on a sunken panel or bare inside a host.
+> A static TypeScript / TSX snippet with syntax highlighting, on a filled panel or bare inside a host.
 
 ## When to use
 - Code samples in docs, settings («API key usage») and onboarding.
@@ -37,7 +37,7 @@ CodeBlock        <pre>; variant, colorScheme (data-theme)
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `code` | `string` | — (required) | TS / TSX source; trailing whitespace is trimmed, then highlighted. |
-| `variant` | `"soft" \| "ghost"` | `"soft"` | `soft` — sunken panel with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. |
+| `variant` | `"soft" \| "ghost"` | `"soft"` | `soft` — a filled panel (one ladder step off its host) with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. |
 | `colorScheme` | `"light" \| "dark"` | — | Fixes the theme for this block only (`data-theme`). Omit to follow the page theme. |
 | `tabIndex` | `number` | — | Default `0` for `soft` (a scrolling block stays reachable from the keyboard), none for `ghost`; pass `-1` when it never overflows. |
 | `…rest` | `Omit<HTMLAttributes<HTMLPreElement>, "children" \| "dangerouslySetInnerHTML">` | — | `className`, `aria-label` and the other `<pre>` attributes. |
@@ -54,8 +54,8 @@ CodeBlock        <pre>; variant, colorScheme (data-theme)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | — (omitted) | token colors and fill follow the page theme | normal case | yes |
-| `light` | light palette; the soft fill becomes that scheme's `bg-raised` | a light sample inside a dark page | |
-| `dark` | dark palette; the soft fill becomes that scheme's `bg-raised` | a terminal-like sample inside a light page | |
+| `light` | light palette; the soft fill becomes that scheme's floating layer (`layer-floating-bg`) | a light sample inside a dark page | |
+| `dark` | dark palette; the soft fill becomes that scheme's floating layer (`layer-floating-bg`) | a terminal-like sample inside a light page | |
 
 Syntax tokens: keywords purple (weight 500), strings teal, numbers orange, JSX tags blue, comments muted italic — palette text tokens, readable in both themes.
 
@@ -92,8 +92,8 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | An API response sample on a sunken panel, named for screen readers — `code`, `aria-label`. |
-| [variants.tsx](examples/variants.tsx) | A sunken panel and a bare block that takes type and background from its host — `variant`. |
+| [overview.tsx](examples/overview.tsx) | An API response sample on a filled panel, named for screen readers — `code`, `aria-label`. |
+| [variants.tsx](examples/variants.tsx) | A filled panel and a bare block that takes type and background from its host — `variant`. |
 | [color-scheme.tsx](examples/color-scheme.tsx) | A block fixed to one scheme looks the same in both page themes — `colorScheme`. |
 | [narrow.tsx](examples/narrow.tsx) | In a narrow column a long line scrolls inside the block and never wraps; Tab, then arrow keys. |
 

package/src/components/code-block/examples/overview.tsx

@@ -1,4 +1,4 @@
-/** An API response sample on a sunken panel, named for screen readers — `code`, `aria-label`. */
+/** An API response sample on a filled panel, named for screen readers — `code`, `aria-label`. */
 import { CodeBlock } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/src/components/code-block/examples/variants.tsx

@@ -1,4 +1,4 @@
-/** A sunken panel and a bare block that takes type and background from its host — `variant`. */
+/** A filled panel and a bare block that takes type and background from its host — `variant`. */
 import { CodeBlock, Typography } from "prime-ui-kit";
 
 const SAMPLE = `const total = formatPrice(14990);`;

package/src/components/color-picker/COMPONENT.md

@@ -211,7 +211,7 @@ No `variant` / `tone` / `color`.
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `none` | parts stacked with a 12px gap, no own background | inside a Popover or a Card | yes |
-| `raised` | `bg-raised`, panel radius and padding, `shadow-overlay`; fields switch to `field-bg-surface` | a standalone panel on the page | |
+| `raised` | the floating layer of the ladder (`data-depth="floating"`), panel radius and padding, `shadow-overlay`; fields take that layer's fill | a standalone panel on the page | |
 
 ### defaultFormat (ColorPicker.Root)
 | Value | Looks like | Use when | Default |

package/src/components/color-swatches/COMPONENT.md

@@ -48,7 +48,7 @@ ColorSwatches                 field frame: label → swatches → hint | error
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the swatches. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
-| `invalid` | `boolean` | — | Danger selection ring and `aria-invalid`. A non-empty `error` implies it. |
+| `invalid` | `boolean` | — | Danger inner edge on every swatch and `aria-invalid`. A non-empty `error` implies it. |
 | `disabled` | `boolean` | `false` | Disables every swatch (grey, half transparent). |
 | `allowEmpty` | `boolean` | `false` | Adds the «no color» checkerboard swatch after the presets (value `null`). |
 | `name` | `string` | — | Form field name: a hidden input submits the selected color (empty string for no color). |
@@ -76,7 +76,7 @@ ColorSwatches                 field frame: label → swatches → hint | error
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `allowEmpty` | an extra checkerboard swatch «Без цвета» at the end | the color is optional | `false` |
-| `invalid` | the selection ring turns danger | the message is shown elsewhere; otherwise pass `error` | — |
+| `invalid` | the inner edge of every swatch turns danger | the message is shown elsewhere; otherwise pass `error` | — |
 | `disabled` | every swatch grey at half opacity | the choice is unavailable | `false` |
 
 **Combinations**
@@ -87,17 +87,17 @@ ColorSwatches                 field frame: label → swatches → hint | error
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| selected | `value` / `defaultValue` | `aria-checked="true"`, `data-state="checked"` on the radio; 2px accent ring with a 2px gap and a check mark (light or dark by color contrast) |
+| selected | `value` / `defaultValue` | `aria-checked="true"`, `data-state="checked"` on the radio; the check mark (light or dark by color contrast) scales in from half size (`base` · emphasized) and leaves faster (`fast` · exit); no ring — the check is the selection |
 | hover | pointer | the swatch scales to 1.08 (fine pointers only) |
 | focus-visible | keyboard | focus ring outside the swatch |
-| invalid | `invalid` / `error` | `aria-invalid`, `data-invalid` on the group; the selected ring turns `danger-border` |
+| invalid | `invalid` / `error` | `aria-invalid`, `data-invalid` on the group; the inner edge of every swatch turns `danger-border` |
 | disabled | `disabled` | native `disabled` on every radio, `aria-disabled` and `data-disabled` on the group |
 
 Controlled with `value` + `onValueChange`; uncontrolled with `defaultValue`.
 
 ## Layout & spacing
 - The swatches take the container width and wrap to new rows by themselves; no column count to set. In a content-sized container they stay in one row.
-- The selection / focus rings sit outside the swatches; kit hosts (Modal / Drawer body, panels, cards) already keep `--prime-focus-space` padding, so the rings are never clipped. In your own `overflow` container, keep that padding.
+- The keyboard focus ring sits outside the swatches; kit hosts (Modal / Drawer body, panels, cards) already keep `--prime-focus-space` padding, so the ring is never clipped. In your own `overflow` container, keep that padding.
 - Label → swatches and swatches → hint use the tier `label-gap` / `hint-gap`; field → field 20.
 
 ## Accessibility

package/src/components/command-menu/COMPONENT.md

@@ -111,7 +111,7 @@ CommandMenu.Root                 Modal + top-aligned palette panel, query state
 | `keys` | `ReactNode[]` | — (required) | FooterHint: the keys (text or icons). |
 
 ## Variants
-One look: `bg-raised`, `--prime-modal-radius`, `shadow-modal`, `--prime-modal-width-l` wide, placed in the top part of the viewport so the search row never jumps while the list filters.
+One look: the floating layer of the ladder (it is a Modal), `--prime-modal-radius`, `shadow-modal`, `--prime-modal-width-l` wide, placed in the top part of the viewport so the search row never jumps while the list filters.
 
 ### size (Root)
 | Value | Looks like | Use when | Default |

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

@@ -16,9 +16,9 @@ import styles from "./examples.module.css";
 type Status = "loading" | "ready" | "empty" | "error";
 
 const PAYMENTS = [
-  { id: "p1", payer: "ООО «Гранит»", amount: "₽ 94 750" },
-  { id: "p2", payer: "ИП Орлов Д. С.", amount: "₽ 18 000" },
-  { id: "p3", payer: "АО «Альфа Медиа»", amount: "₽ 380 000" },
+  { id: "p1", payer: "ООО «Гранит»", amount: "94 750 ₽" },
+  { id: "p2", payer: "ИП Орлов Д. С.", amount: "18 000 ₽" },
+  { id: "p3", payer: "АО «Альфа Медиа»", amount: "380 000 ₽" },
 ];
 
 export default function CrossfadeOverviewExample() {

package/src/components/data-table/COMPONENT.md

@@ -150,8 +150,8 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 | `rowDividers` | hairlines between rows | default; off together with `striped` | `true` |
 | `columnDividers` | hairlines between content columns (none inside the lead columns) | default; off for 2–3 column key/value lists | `true` |
 | `striped` | every second row one opaque step off the fill | long numeric grids | `false` |
-| `highlightRowOnHover` | `fill-subtle` wash on the hovered row | interactive lists | `true` |
-| `highlightColumnOnHover` | `fill-subtle` wash on the hovered column | comparison tables | `false` |
+| `highlightRowOnHover` | `fill-subtle-active` wash on the hovered row (stronger than a zebra step, so a hovered row never takes a zebra row's color) | interactive lists | `true` |
+| `highlightColumnOnHover` | `fill-subtle-active` wash on the hovered column | comparison tables | `false` |
 | `stickyHeader` · `stickyFirstColumn` | opaque sticky head / first column with a hairline edge; on screens lower than 480px the head scrolls with the rows | long / wide tables in a `scrollHeight` window | `false` |
 | column `hideable` | `false`: the column stays even when listed in `hiddenColumns` | the key column that names the row | `true` |
 | `showHeader` | head row shown | off only for self-explanatory key/value tables | `true` |
@@ -169,7 +169,8 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 | sorted | `sort` / `defaultSort` | `aria-sort` and `data-sorted` on the head; the sort icon: unsorted `text-disabled`, hover `text-muted`, sorted `text-secondary` — never accent |
 | selected | `selected` / `defaultSelected` | `aria-selected` rows with `accent-soft` fill; polite `labels.selectedCount` |
 | expanded | `expanded` / `defaultExpanded` | `data-expanded` on the parent row (one step darker); toggle `aria-expanded`, chevron turns 90° |
-| new rows | rows mounted by an expand or new in `rows` (by `getRowKey`) | `data-animate`: cells drop in from above (`enterMotion`); detail panels open and close through `grid-template-rows` (`data-state` on the detail row; it unmounts after the close) |
+| new rows | rows new in `rows` (by `getRowKey`) | `data-animate`: top-level cells drop in from above (`enterMotion`) |
+| sub-rows and detail panels | an expand / a collapse | both fold open and shut through `grid-template-rows` (0fr ↔ 1fr) with the fade on the same `base` curve; the row height and padding live inside the track, so nothing is left to jump. Sub-rows: `data-fold` on the row (`opening` · `open` · `closed`); a collapsed row's sub-rows stay mounted until the fold ends. Detail row: `data-state`; it unmounts after the close |
 | overflowing sideways | the table is wider than its viewport | `data-overflow-start` (scrolled from the start) and `data-overflow-end` (more to the end) on the root: a soft shadow over that edge, from the end edge of the sticky first column for the start; fades in and out over `fast` |
 | hidden columns | `hiddenColumns` | the listed columns (except `hideable: false`) are not rendered in the head, rows, skeleton or state rows; widths are measured again |
 | state swap | the body moves between loading, rows, empty and error | the body fades in over `base` (opacity only, the same swap motion as [Crossfade](../crossfade/COMPONENT.md)); the head stays still; nothing moves on the first render |
@@ -177,7 +178,7 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data-sticky-header`, `data-sticky-first-column`, `data-table-width` (`fill` · `auto` · `grow`), `data-highlight-row`, `data-highlight-column`, `data-striped`, `data-loading`, `data-selectable`, `data-expandable`, `data-dragging` (while drag-selecting), `data-overflow-start` · `data-overflow-end` (edges that hide columns). Sorting and paging swap rows instantly; everything is still under `prefers-reduced-motion`.
 
 ## Layout & spacing
-- The root fills its container on `--prime-color-card-bg`, radius 12, and clips full-bleed head and rows; on a card or a modal it becomes a sunken block — never wrap it in a Card.
+- The root is a layer of the surface ladder (`data-depth`, one above its host): it fills its container on `--prime-color-layer-current`, radius 12, and clips full-bleed head and rows; zebra rows and the sticky column are one ladder step off it, the head two. On a card or in a modal it is the next layer by itself — never wrap it in a Card.
 - Toolbar padding `--prime-space-3` × cell padding, items `gap: --prime-space-2`; below 30rem of table width toolbar and footer stack.
 - The footer has a hairline on top: range on the left, Pagination on the right. The range shows only with more than one page or with infinite scroll.
 - Columns scroll sideways inside the table, never the page; pin the identifying column with `stickyFirstColumn`. Works from 320 px.

package/src/components/digit-input/COMPONENT.md

@@ -44,6 +44,7 @@ DigitInput            field frame: label row → cells → support row (hint | e
 | `hint` | `ReactNode` | — | Help text under the cells. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | — | Danger ring and danger digits on every cell, `aria-invalid`. A non-empty `error` implies it. |
+| `success` | `boolean` | `false` | The code was accepted (after the server checked it): the cells turn success one after another. Ignored while invalid. Say it in words too (`hint`). |
 | `disabled` | `boolean` | — | Disables the fieldset and every cell. |
 | `value` | `string` | — | Controlled code; non-digits are dropped, extra digits cut to `length`. |
 | `defaultValue` | `string` | `""` | Initial code when uncontrolled. |
@@ -92,8 +93,9 @@ No `variant` or `tone`.
 | State | Driven by | DOM |
 |---|---|---|
 | hover | — | cell fill darkens (not on focused or disabled cells) |
-| focus | keyboard / click | focused cell: focus fill + inset focus ring; its content is selected so a new digit replaces it |
-| filled cell | a digit in the cell | `data-filled="true"` on the cell |
+| focus | keyboard / click | focused cell: focus fill and its content selected so a new digit replaces it; one inset ring for the row appears on the cell and glides to the next one (`fast` · emphasized) instead of each cell drawing its own |
+| filled cell | a digit in the cell | `data-filled="true"` on the cell; the digit fades in as it lands |
+| success | `success` (not while invalid) | `data-success="true"` on the fieldset; the cells turn `success-soft` one after another, half a stagger step apart |
 | full width | `fullWidth` | `data-full-width="true"` on the fieldset |
 | group start | `groupSize` | `data-group-start="true"` on the first cell of every group |
 | invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the fieldset and the frame, `aria-invalid="true"` on cells |
@@ -142,7 +144,7 @@ No `variant` or `tone`.
 | [validation.tsx](examples/validation.tsx) | Required and optional markers, a hint and an error that replaces it — `required`, `optional`, `hint`, `error`. |
 | [grouped.tsx](examples/grouped.tsx) | A long code read in chunks with a wider gap between groups — `groupSize`. |
 | [full-width.tsx](examples/full-width.tsx) | Cells that share the container width and keep the tier height, above a full-width button — `fullWidth`. |
-| [on-complete.tsx](examples/on-complete.tsx) | The code is checked as soon as the last cell is filled; a wrong code turns the hint into an error — `onComplete`, `error`. |
+| [on-complete.tsx](examples/on-complete.tsx) | The code is checked as soon as the last cell is filled: a right one turns the cells success, a wrong one turns the hint into an error — `onComplete`, `success`, `error`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the code and clears it with a button — `value`, `onValueChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A masked card PIN submitted with a form; a short PIN shows an error — `name`, `mask`, `required`, `error`. |
 

package/src/components/digit-input/examples/on-complete.tsx

@@ -1,20 +1,21 @@
-/** The code is checked as soon as the last cell is filled; a wrong code turns the hint into an error — `onComplete`, `error`. */
+/** The code is checked as soon as the last cell is filled: a right one turns the cells success, a wrong one turns the hint into an error — `onComplete`, `success`, `error`. */
 import { DigitInput } from "prime-ui-kit";
 import * as React from "react";
 
 const VALID_CODE = "123456";
 
 export default function DigitInputOnCompleteExample() {
-  const [error, setError] = React.useState<string>();
+  const [result, setResult] = React.useState<"accepted" | "rejected">();
 
   return (
     <DigitInput
       label="Код подтверждения входа"
       length={6}
-      hint={`Для проверки подходит ${VALID_CODE}`}
-      error={error}
-      onValueChange={() => setError(undefined)}
-      onComplete={(code) => setError(code === VALID_CODE ? undefined : "Неверный код")}
+      hint={result === "accepted" ? "Код подтверждён" : `Для проверки подходит ${VALID_CODE}`}
+      error={result === "rejected" ? "Неверный код" : undefined}
+      success={result === "accepted"}
+      onValueChange={() => setResult(undefined)}
+      onComplete={(code) => setResult(code === VALID_CODE ? "accepted" : "rejected")}
     />
   );
 }

package/src/components/dnd/COMPONENT.md

@@ -134,7 +134,7 @@ Generic `Dnd.DropZone<TData>`; `ref` → `HTMLElement`. Renders the `as` element
 | carried | a drag | the clone follows the pointer, lifted on `--prime-shadow-modal`, scale 1.02; a sortable source leaves the layout (`data-lifted`) and a dashed accent gap of its size and radius fades in and glides with the items as the landing spot moves; entering a connected list, it fades out in the list it left and in where it opens; crossing empty space (the gutter between lists) leaves the gap in the last list that takes the item; neighbours glide aside; a `Dnd.Draggable` stays at 0.4 opacity (`data-dragging`) |
 | over a zone | pointer over an accepting zone | `data-dnd-over`: `accent-soft` fill, dashed accent outline |
 | refused | `canDrop` returns `false` | `data-dnd-reject`: `danger-soft` fill; the clone gets a dashed `danger` outline |
-| dropped | release over a target, or over empty space while a list holds the gap | the clone glides to the item's new place and is swapped for the real element; `data-dnd-flash` with `flashOnDrop` |
+| dropped | release over a target, or over empty space while a list holds the gap | the clone glides to the item's new place and is swapped for the real element; `data-dnd-flash` with `flashOnDrop`; the clone sets down into the look the item will have in place — its resting shadow, or under the mouse its hover look: the item gets `data-dnd-hover` until the pointer leaves it or presses, so a host styles its hover lift on `:is(:hover, [data-dnd-hover])` and the card never dips to flat and lifts again |
 | cancelled | Escape, a system-cancelled pointer | the clone flies back, nothing changes |
 | disabled | `disabled` | `data-disabled`, no `aria-roledescription` |
 

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

@@ -14,8 +14,8 @@
   min-width: 0;
   padding: var(--prime-space-3) var(--prime-space-4);
   border-radius: var(--prime-radius-m);
-  background: var(--prime-color-card-bg);
-  box-shadow: var(--prime-card-shadow);
+  background: var(--prime-color-layer-nested);
+  box-shadow: var(--prime-shadow-raised);
 }
 
 /* The grip sits closer to the edge: it is a square button with its own inner room. */
@@ -45,7 +45,7 @@
   min-height: calc(var(--prime-space-24) * 2);
   padding: var(--prime-space-3);
   border-radius: var(--prime-radius-l);
-  background: var(--prime-color-bg-sunken);
+  background: var(--prime-color-fill-muted);
 }
 
 .columnHeader {
@@ -61,7 +61,7 @@
   gap: var(--prime-space-1);
   padding: var(--prime-space-3) var(--prime-space-4);
   border-radius: var(--prime-radius-m);
-  background: var(--prime-color-bg-surface);
+  background: var(--prime-color-layer-nested);
   box-shadow: var(--prime-shadow-raised);
 }
 

package/src/components/dropdown/COMPONENT.md

@@ -115,7 +115,7 @@ No DOM: clones the single child, merges `ref` and `onClick` (toggles), sets `ari
 `ref` → `HTMLDivElement`. A non-interactive row at the top (who is signed in, the plan): an avatar, Title + Description stacked in one column, a trailing badge or button — in the written order / the medium heading line / the muted line under it; both truncate. + native `<div>` props.
 
 ## Variants
-The panel is the shared floating surface: `bg-raised`, `--prime-panel-radius` (12), padding 4, `shadow-overlay`; rows have radius 8 and the tier item height.
+The panel is the shared floating surface: the floating layer of the ladder (`data-depth="floating"`), `--prime-panel-radius` (12), padding 4, `shadow-overlay`; rows have radius 8 and the tier item height.
 
 ### size (Content)
 | Value | Looks like | Use when | Default |

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

@@ -18,5 +18,5 @@
   padding-block: var(--prime-space-1);
   padding-inline: var(--prime-space-4) var(--prime-space-1);
   border-radius: var(--prime-radius-l);
-  background: var(--prime-color-card-bg);
+  background: var(--prime-color-layer-nested);
 }

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

@@ -27,7 +27,7 @@
   width: min(100%, var(--prime-panel-min-width));
   padding: var(--prime-panel-padding);
   border-radius: var(--prime-panel-radius);
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-floating-bg);
   box-shadow: var(--prime-shadow-overlay);
 }
 

package/src/components/example-frame/COMPONENT.md

@@ -74,7 +74,7 @@ ExampleFrame               frame: toolbar + preview stage or code pane
 | `light` | stage and code pane in the light theme | default | yes |
 | `dark` | stage and code pane in the dark theme (`data-theme="dark"`), switched without color transitions | checking dark mode | |
 
-Frame look: `bg-sunken` chrome with a `border-subtle` hairline and `radius-xl`; the stage and code pane are `bg-canvas` wells with `radius-l` (16 − 4 padding = 12). The stage resets the card context (`--prime-color-card-bg: bg-surface`).
+Frame look: the chrome is a layer of the surface ladder (`data-depth`, one above its host) with a `border-subtle` hairline and `radius-xl`; the stage and code pane are wells with `radius-l` (16 − 4 padding = 12). Both wells carry `data-theme`, so each is a page of its own: layer 0 of its scheme, and surfaces in the example count from there.
 
 ## States
 | State | Driven by | DOM |

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). |
@@ -168,7 +170,8 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 | 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 |
@@ -215,6 +223,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | [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`. |
 

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/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. |