prime-ui-kit 0.9.1 → 0.9.3

package/src/components/dnd/COMPONENT.md

@@ -1,6 +1,6 @@
 # Dnd
 
-**Category:** layout
+**Category:** interaction
 **Kind:** composite
 
 > Pointer-driven drag and drop: reorderable lists, draggable items and drop zones on one shared session, with a lifted clone, a gap where the item lands, auto-scroll, touch support and a keyboard path.
@@ -131,10 +131,10 @@ Generic `Dnd.DropZone<TData>`; `ref` → `HTMLElement`. Renders the `as` element
 | State | Driven by | DOM |
 |---|---|---|
 | idle | — | items show `cursor: grab` |
-| 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; neighbours glide aside; a `Dnd.Draggable` stays at 0.4 opacity (`data-dragging`) |
+| 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 | 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/drawer/COMPONENT.md

@@ -3,13 +3,14 @@
 **Category:** overlays
 **Kind:** overlay
 
-> A modal side panel that slides in from the edge: filters, forms and record details.
+> A modal panel that slides in from the edge: filters, forms and record details at the side, a bottom sheet on a phone.
 
 ## When to use
 - Editing settings or a record without leaving the page.
 - Filters or navigation on narrow screens (`side="left"`).
 - Read-only details of a list row (order, user, event).
 - Long content (history, logs) that needs a tall scrolling area.
+- A short task on a phone — pick a date, choose an action, fill two fields — in a bottom sheet (`side="bottom"`).
 
 ## When not to use
 - Confirmations and short decisions → use [Modal](../modal/COMPONENT.md).
@@ -27,6 +28,7 @@ import { Drawer } from "prime-ui-kit";
 Drawer.Root                    state and dismiss policy (no DOM)
 ├─ Drawer.Trigger              clones its child; opens on click
 └─ Drawer.Content              portal + scrim + role="dialog" panel at the edge
+   ├─ (grab handle)            side="bottom" only: aria-hidden bar, a drag starts here
    ├─ Drawer.Header            grid: [Icon] [Title + Description] [close Button]
    │  ├─ Drawer.Icon
    │  ├─ Drawer.Title          <h2>
@@ -49,7 +51,7 @@ No DOM, no ref. State and dismiss policy.
 | `defaultOpen` | `boolean` | `false` | Initial visibility, uncontrolled. |
 | `onOpenChange` | `(open: boolean) => void` | — | Called on every open and close: trigger, close button, `Close`, Escape, scrim click, code. |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the dialog. |
-| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim closes the dialog; turn off for destructive confirms. |
+| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim (and a swipe on a bottom sheet) closes the dialog; turn off for destructive confirms. |
 | `labels` | `Partial<DrawerLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — | Trigger and Content. |
 
@@ -58,8 +60,8 @@ No DOM, no ref. State and dismiss policy.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `side` | `"left" \| "right"` | `"right"` | Edge the panel slides from; rounded only on the edge facing the page. |
-| `size` | `"s" \| "m" \| "l" \| "xl"` | `"m"` | Width: 360 · 480 · 640 · 800. Below 640 px of viewport — full width, square corners. |
+| `side` | `"left" \| "right" \| "bottom"` | `"right"` | Edge the panel slides from; rounded only on the edge facing the page. `bottom` is a sheet: a grab handle on top, height by content. A swipe toward the edge closes the panel (with `closeOnOutsideClick`): a bottom sheet from its handle or header, a side drawer by touch anywhere (by mouse from the header). |
+| `size` | `"s" \| "m" \| "l" \| "xl"` | `"m"` | Width: 360 · 480 · 640 · 800; a bottom sheet is centred and at least 560 (`--prime-sheet-min-width`). Below 640 px of viewport — full width; side drawers lose their corners. |
 | `aria-label` | `string` | — | Dialog name when there is no Title. |
 | `aria-labelledby` | `string` | — | Overrides the Title id. |
 | `aria-describedby` | `string` | — | Overrides the Description id. |
@@ -94,7 +96,7 @@ No DOM, no ref. State and dismiss policy.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `layout` | `"fill" \| "end"` | `"end"` | `fill`: equal-width buttons in one row; `end`: auto width, at the end. Narrower than 360 px — stacked. |
+| `layout` | `"fill" \| "end"` | `"end"` | `fill`: equal-width buttons in one row; `end`: auto width, at the end. Stacked on phones (viewport below 640 px) and in a dialog narrower than 360 px. |
 
 ### Drawer.Trigger · Drawer.Close
 No DOM: clone the single child and chain its `onClick` (unless the child's handler calls `preventDefault()`).
@@ -110,6 +112,7 @@ No DOM: clone the single child and chain its `onClick` (unless the child's handl
 |---|---|---|---|
 | `right` | slides from the right, rounded on its left edge | details and forms | yes |
 | `left` | slides from the left, rounded on its right edge | filters, mobile navigation | |
+| `bottom` | rises from the bottom, rounded on top, grab handle, height by content | a short task on a phone | |
 
 ### size (Content)
 | Value | Looks like | Use when | Default |
@@ -119,7 +122,7 @@ No DOM: clone the single child and chain its `onClick` (unless the child's handl
 | `l` | 640 wide | wide forms | |
 | `xl` | 800 wide | tables, previews | |
 
-Below 640px of viewport every size is full width with square corners.
+A bottom sheet is centred at its width, never narrower than 560 (`--prime-sheet-min-width`), so a tablet gets a real sheet. Below 640px of viewport every size is full width; side drawers lose their corners, the sheet keeps its top radius.
 
 ### layout (Footer)
 | Value | Looks like | Use when | Default |
@@ -135,13 +138,15 @@ Below 640px of viewport every size is full width with square corners.
 |---|---|---|
 | open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the scrim and the panel; mounted until the slide-out ends |
 | side / size | Content props | `data-side`, `data-size` on the panel |
+| swiping | a drag toward the edge (with `closeOnOutsideClick`) | `data-swiping` and `--swipe-offset` on the panel while the pointer drags it; `data-swipe-dismissed` while it glides out after a closing release; `--swipe-progress` (0…1) on the scrim |
 | open: trapped | while open | focus trapped, page scroll locked, siblings of the portal `inert` (the toast region stays usable); a drawer opened from a Modal or another drawer stacks above it |
 
-Motion: the scrim fades, the panel slides from its side over `slow` and leaves over `base` (`overlayMotion`); under `prefers-reduced-motion` it unmounts at once.
+Motion: the scrim fades, the panel slides from its side over `slow` and leaves over `base` (`overlayMotion`); under `prefers-reduced-motion` it unmounts at once. A swipe moves the panel with the pointer; on release it closes past 30% of its size or on a quick flick and glides the rest of the way out from where it was let go, otherwise it glides back — both over `base` on the `emphasized` (iOS sheet) curve. A pull the other way meets growing resistance and stops at 24; the panel's fill continues that far past the screen edge, so it never comes away from it. The scrim follows the panel: its fill thins in proportion to how far out the panel is, tracks the finger while dragging and glides with the panel on release. A bottom sheet drags from its handle or header; a side drawer by touch anywhere (not on text fields, sliders or sideways scrollers), by mouse from the header.
 
 ## Layout & spacing
 - Zone padding `--prime-drawer-padding`; hairlines between header, body and footer.
 - Full viewport height; only the body scrolls, with its own side padding.
+- Bottom sheet: width by `size`, at least `--prime-sheet-min-width` (560); height by content up to `100dvh − --prime-sheet-top-gap`, radius `--prime-sheet-radius`, a `--prime-sheet-handle-area` strip with the handle bar, the bottom safe-area inset below the content.
 - Fields inside get the surface field fill.
 
 ## Accessibility
@@ -157,6 +162,7 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 - Focus moves into the panel on open and returns to the opener on close, including after a scrim click.
 - The page behind is `inert`, scroll is locked; only the topmost layer reacts.
 - A drawer opened from a Modal stacks above it.
+- A swipe toward the edge is an extra way out; the close button and Escape stay. The grab handle is `aria-hidden`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -171,7 +177,8 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 | [overview.tsx](examples/overview.tsx) | Order details next to the list: a trigger, a header with a close button and a read-only body — `Drawer.Trigger`, `Drawer.Body`. |
 | [structure.tsx](examples/structure.tsx) | Optional parts: an icon tile in the header and one full-width action in the footer — `Drawer.Icon`, `Drawer.Footer`, `layout`. |
 | [sizes.tsx](examples/sizes.tsx) | Every panel width, 360 to 800 px; below 640 px of viewport the panel takes the full width — `size`. |
-| [placement.tsx](examples/placement.tsx) | The panel slides from the right for details and from the left for filters — `side`. |
+| [placement.tsx](examples/placement.tsx) | The panel slides from the right for details, from the left for filters and up from the bottom as a sheet — `side`. |
+| [date-sheet.tsx](examples/date-sheet.tsx) | A date picked in a bottom sheet: a grab handle on top, a swipe down or a pick closes it — `side`, `Drawer.Body`. |
 | [long-content.tsx](examples/long-content.tsx) | A long body scrolls on its own while the header and the footer stay in place — `Drawer.Body`. |
 | [dismiss.tsx](examples/dismiss.tsx) | An import closes only from its buttons, and not at all while it runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the state and opens the drawer from a link, without a trigger — `open`, `onOpenChange`. |
@@ -180,7 +187,8 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 ## Mistakes
 - A delete confirmation in a Drawer → use Modal.
 - Expecting Enter to submit via `Drawer.Confirm` → Drawer has no Confirm; use a `<form>` with a submit button.
-- `side="top"` / `"bottom"` → only `left` and `right`.
+- `side="top"` → only `left`, `right` and `bottom`.
+- Swipe as the only way to close → keep `Drawer.Header` with its close button (or `Drawer.Close`); a swipe is an extra gesture.
 - Padding on a wrapper inside Body → Body already pads and scrolls.
 
 ## Related

package/src/components/drawer/examples/date-sheet.tsx

@@ -0,0 +1,41 @@
+/** A date picked in a bottom sheet: a grab handle on top, a swipe down or a pick closes it — `side`, `Drawer.Body`. */
+import { Button, Datepicker, Drawer, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const FORMAT = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "long", year: "numeric" });
+
+export default function DrawerDateSheetExample() {
+  const [open, setOpen] = React.useState(false);
+  const [date, setDate] = React.useState<Date | null>(new Date(2026, 2, 8));
+
+  return (
+    <Drawer.Root open={open} onOpenChange={setOpen}>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          <Button.Icon>
+            <Icon name="field.calendar" />
+          </Button.Icon>
+          {date ? `Отгрузка ${FORMAT.format(date)}` : "Дата отгрузки"}
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content side="bottom">
+        <Drawer.Header>
+          <Drawer.Title>Дата отгрузки</Drawer.Title>
+        </Drawer.Header>
+        <Drawer.Body>
+          <Datepicker.Panel
+            mode="single"
+            className={styles.calendar}
+            value={date}
+            onValueChange={(next) => {
+              setDate(next);
+              setOpen(false);
+            }}
+          />
+        </Drawer.Body>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}

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

@@ -19,3 +19,8 @@
   margin: 0;
   font-variant-numeric: tabular-nums;
 }
+
+/* date-sheet.tsx: the calendar keeps its own width, centred in the sheet. */
+.calendar {
+  align-self: center;
+}

package/src/components/drawer/examples/placement.tsx

@@ -1,9 +1,10 @@
-/** The panel slides from the right for details and from the left for filters — `side`. */
+/** The panel slides from the right for details, from the left for filters and up from the bottom as a sheet — `side`. */
 import { Button, Drawer, Typography } from "prime-ui-kit";
 
 const SIDES = [
   { side: "left", title: "Фильтры" },
   { side: "right", title: "Детали заказа" },
+  { side: "bottom", title: "Действия с заказом" },
 ] as const;
 
 export default function DrawerPlacementExample() {
@@ -22,7 +23,8 @@ export default function DrawerPlacementExample() {
             </Drawer.Header>
             <Drawer.Body>
               <Typography variant="body-m" tone="secondary">
-                Скругление только со стороны страницы, подложка затемняет остальное.
+                Скругление только со стороны страницы, подложка затемняет остальное. Свайп к краю
+                закрывает панель.
               </Typography>
             </Drawer.Body>
           </Drawer.Content>

package/src/components/dropdown/COMPONENT.md

@@ -35,6 +35,7 @@ Dropdown.Root                     state and dismiss policy (no DOM)
     │   └── Dropdown.Item         <button role="menuitem">
     │       ├── Dropdown.ItemIcon       leading glyph (aria-hidden)
     │       └── Dropdown.ItemShortcut   Kbd at the end
+    ├── Dropdown.CheckboxItem     <button role="menuitemcheckbox">: label + check mark at the end while checked; stays open
     └── Dropdown.Item
 ```
 
@@ -62,7 +63,7 @@ No DOM: clones the single child, merges `ref` and `onClick` (toggles), sets `ari
 | `children` | `ReactElement` | — (required) | One element, usually a Button. |
 
 ### Dropdown.Content
-`ref` → `HTMLDivElement`. Portal + `role="menu"` on the floating surface (a ScrollContainer), named by the trigger; renders while open and during its exit animation. Focus moves to the first item; Tab closes the menu and returns focus to the trigger.
+`ref` → `HTMLDivElement`. Portal + `role="menu"` on the floating surface (a ScrollContainer), named by the trigger; renders while open and during its exit animation. Focus moves to the first item; Tab closes the menu and returns focus to the trigger. Below 640px of viewport the menu is a bottom sheet: a scrim, a grab handle, swipe down to close (with `closeOnOutsideClick`), page scroll locked.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -82,6 +83,17 @@ No DOM: clones the single child, merges `ref` and `onClick` (toggles), sets `ari
 | `tone` | `"neutral" \| "danger"` | `"neutral"` | `danger`: destructive action — danger text, icon and hover fill. |
 | `children` | `ReactNode` | — | `Dropdown.ItemIcon`, the label, `Dropdown.ItemShortcut`. |
 
+### Dropdown.CheckboxItem
+`ref` → `HTMLButtonElement`. A `<button role="menuitemcheckbox">` with `aria-checked`: the label (and an `ItemIcon`) on the left like any item, an accent check mark at the end while checked and nothing while not; a click, Enter or Space toggles it and the menu stays open. + native button props.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `checked` | `boolean` | — | Checked state (controlled). |
+| `defaultChecked` | `boolean` | `false` | Initial state (uncontrolled). |
+| `onCheckedChange` | `(checked: boolean) => void` | — | Called with the new state. |
+| `disabled` | `boolean` | `false` | Muted, `aria-disabled`, skipped by the arrow keys, does not toggle. |
+| `children` | `ReactNode` | — | The label (optionally after a `Dropdown.ItemIcon`). |
+
 ### Dropdown.ItemIcon · Dropdown.ItemShortcut
 `ref` → `HTMLSpanElement` / `HTMLElement` (the `<kbd>`). An `aria-hidden` `<span>` holding the leading glyph at the menu icon size (a kit `Icon` follows it) / a `Kbd` one tier below the menu, pushed to the end of the item — a hint, not a handler. + native props.
 
@@ -103,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 |
@@ -145,9 +157,10 @@ The panel is the shared floating surface: `bg-raised`, `--prime-panel-radius` (1
 | open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the menu (closed while the exit animation plays) and on the trigger, `aria-expanded` on the trigger |
 | side | `side` and the room next to the trigger | `data-side` (resolved) |
 | size | `size` on Content | `data-size` |
-| item hover / focus | pointer, arrow keys | subtle fill (danger-soft for `danger`), no movement |
+| item hover / focus | a hovering pointer, arrow keys | subtle fill (danger-soft for `danger`), no movement; a tap leaves no hover fill |
 | item disabled | `disabled` | `aria-disabled="true"`, `data-disabled="true"` |
 | item tone | `tone` | `data-tone` |
+| sheet | viewport below 640px | a scrim and a full-width bottom sheet with an `aria-hidden` grab handle around the menu; the sheet carries `data-state`, the menu keeps its role and ref; page scroll locked; a swipe down from the handle closes it (with `closeOnOutsideClick`) |
 
 ## Layout & spacing
 - Width is `max-content` between `--prime-panel-min-width` and twice that; items never wrap.
@@ -160,14 +173,14 @@ The panel is the shared floating surface: `bg-raised`, `--prime-panel-radius` (1
 ### Keyboard
 | Key | Action |
 |---|---|
-| `Enter` · `Space` | On the trigger opens the menu (focus on the first item); on an item runs it and returns focus to the trigger. |
+| `Enter` · `Space` | On the trigger opens the menu (focus on the first item); on an item runs it and returns focus to the trigger; on a checkbox item toggles it and the menu stays open. |
 | `ArrowDown` · `ArrowUp` | Move focus to the next / previous enabled item, wrapping. |
 | `Home` · `End` | First / last enabled item. |
 | `Escape` | Closes the menu (`closeOnEscape`); focus returns to the trigger. |
 | `Tab` · `Shift+Tab` | Closes the menu; focus returns to the trigger (Tab then goes on to the next stop). |
 
 ### ARIA
-- The menu is `role="menu"` named by the trigger; items are `role="menuitem"`, disabled ones `aria-disabled`.
+- The menu is `role="menu"` named by the trigger; items are `role="menuitem"`, checkbox items `role="menuitemcheckbox"` with `aria-checked`, disabled ones `aria-disabled`.
 - The trigger gets `aria-haspopup="menu"`, `aria-expanded` and `aria-controls`.
 - `Dropdown.Group` is `role="group"` named by its `label`.
 - `Dropdown.ItemIcon` is hidden from screen readers; a key hint is text only — the app handles the shortcut.
@@ -187,6 +200,7 @@ No `labels`.
 | [placement.tsx](examples/placement.tsx) | Every side and alignment relative to the trigger; near the viewport edge the menu flips and shifts — `side`, `align`. |
 | [states.tsx](examples/states.tsx) | A regular, a disabled and a destructive item; arrow keys skip the disabled one — `disabled`, `tone`. |
 | [match-trigger-width.tsx](examples/match-trigger-width.tsx) | Under a full-width button the menu is at least as wide as the trigger — `matchTriggerWidth`. |
+| [checkbox-items.tsx](examples/checkbox-items.tsx) | A column chooser: toggles in the menu keep it open, the key column cannot be hidden — `Dropdown.CheckboxItem`, `checked`, `onCheckedChange`. |
 | [long-list.tsx](examples/long-list.tsx) | More projects than fit: the grouped list scrolls inside the panel, capped by the room next to the trigger — `Dropdown.Group`. |
 | [dismiss.tsx](examples/dismiss.tsx) | An onboarding step keeps the menu open on an outside press and on Escape until an item is picked — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the open state and opens the menu from another button; the picked step updates the trigger — `open`, `onOpenChange`. |
@@ -199,5 +213,5 @@ No `labels`.
 - A destructive item without `tone="danger"`, or in the middle of the list → mark it and put it last.
 
 ## Related
-- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md) (the menu), [Kbd](../kbd/COMPONENT.md) (`ItemShortcut`), [Divider](../divider/COMPONENT.md) (`Separator`)
+- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md) (the menu), [Kbd](../kbd/COMPONENT.md) (`ItemShortcut`), [Divider](../divider/COMPONENT.md) (`Separator`), Icon (`action.check` of `CheckboxItem`)
 - **See also:** [Select](../select/COMPONENT.md), [CommandMenu](../command-menu/COMPONENT.md), [Popover](../popover/COMPONENT.md), [Button](../button/COMPONENT.md)

package/src/components/dropdown/examples/checkbox-items.tsx

@@ -0,0 +1,48 @@
+/** A column chooser: toggles in the menu keep it open, the key column cannot be hidden — `Dropdown.CheckboxItem`, `checked`, `onCheckedChange`. */
+import { Button, Dropdown, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+const COLUMNS = [
+  { id: "number", label: "Номер", locked: true },
+  { id: "client", label: "Клиент", locked: false },
+  { id: "status", label: "Статус", locked: false },
+  { id: "amount", label: "Сумма", locked: false },
+  { id: "due", label: "Срок оплаты", locked: false },
+];
+
+export default function DropdownCheckboxItemsExample() {
+  const [hidden, setHidden] = React.useState<string[]>(["due"]);
+  const shown = COLUMNS.length - hidden.length;
+
+  const toggle = (id: string, visible: boolean) =>
+    setHidden((list) => (visible ? list.filter((item) => item !== id) : [...list, id]));
+
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          <Button.Icon>
+            <Icon name="action.settings" />
+          </Button.Icon>
+          Колонки: {shown} из {COLUMNS.length}
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        <Dropdown.Group label="Показывать">
+          {COLUMNS.map((column) => (
+            <Dropdown.CheckboxItem
+              key={column.id}
+              checked={!hidden.includes(column.id)}
+              disabled={column.locked}
+              onCheckedChange={(visible) => toggle(column.id, visible)}
+            >
+              {column.label}
+            </Dropdown.CheckboxItem>
+          ))}
+        </Dropdown.Group>
+        <Dropdown.Separator />
+        <Dropdown.Item onSelect={() => setHidden([])}>Показать все</Dropdown.Item>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

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

@@ -1,6 +1,6 @@
 # EmptyPage
 
-**Category:** feedback
+**Category:** status
 **Kind:** composite
 
 > Empty state of a page, a block or a menu: icon, title, explanation and an action.

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>
+  );
+}