prime-ui-kit 0.16.0 → 0.18.0

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

@@ -0,0 +1,48 @@
+/** Status hints whose words carry the status and the color repeats it — `tone`. */
+import { Hint, Icon, Typography } from "prime-ui-kit";
+
+export default function HintVariantsExample() {
+  return (
+    <div>
+      <div>
+        <Hint.Root>Действует до 30 ноября.</Hint.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          neutral
+        </Typography>
+      </div>
+      <div>
+        <Hint.Root tone="success">
+          <Hint.Icon>
+            <Icon name="status.success" />
+          </Hint.Icon>
+          ИНН проверен в ФНС.
+        </Hint.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          success
+        </Typography>
+      </div>
+      <div>
+        <Hint.Root tone="warning">
+          <Hint.Icon>
+            <Icon name="status.warning" />
+          </Hint.Icon>
+          Осталось 12 дней.
+        </Hint.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          warning
+        </Typography>
+      </div>
+      <div>
+        <Hint.Root tone="danger">
+          <Hint.Icon>
+            <Icon name="status.danger" />
+          </Hint.Icon>
+          Срок истёк 3 дня назад.
+        </Hint.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          danger
+        </Typography>
+      </div>
+    </div>
+  );
+}

package/src/components/input/COMPONENT.md

@@ -11,12 +11,15 @@
 - Values with a fixed prefix/suffix (`https://`, domain, `₽`, `%`).
 - Inline editing in a record card: each field saves itself (`onCommit`) on blur and Enter.
 - A value with actions beside it: copy, write, open a profile (`Input.CopyButton`, `Input.Action`); a password with a show toggle (`Input.RevealButton`).
+- Free text with suggestions (a combobox): a place, a city, a tag the team typed before — `suggestions`; any other text stays allowed.
+- A picker and a text as one field (an icon and a name, a channel and an address): a `Select` inside `Input.Wrapper` is the box's start segment.
+- A time of day: `Input.Field type="time"` — the browser's hour and minute segments (arrows step them, `step`, `min`, `max`), a wheel on phones, and no calendar to open.
 - As the reference field: Select, Datepicker, TagSelect and Textarea follow the same label / field / support-row contract.
 
 ## When not to use
 - Multi-line text → use [Textarea](../textarea/COMPONENT.md).
 - One-time codes split into cells → use [DigitInput](../digit-input/COMPONENT.md).
-- Choosing from a fixed list → use [Select](../select/COMPONENT.md) or [TagSelect](../tag-select/COMPONENT.md).
+- Choosing from a fixed list, where the value must be one of it → use [Select](../select/COMPONENT.md) or [TagSelect](../tag-select/COMPONENT.md); `suggestions` only help typing free text.
 - Dates → use [Datepicker](../datepicker/COMPONENT.md).
 - A standalone label or message without an Input field → use [Label](../label/COMPONENT.md) / [Hint](../hint/COMPONENT.md).
 - Global search across the app in a dialog → use [CommandMenu](../command-menu/COMPONENT.md).
@@ -33,14 +36,16 @@ Input.Root            label row, field body, support row; provides size / invali
    ├─ Input.Affix          tinted section flush with the edge (start | end)
    ├─ Input.Icon           decorative icon (start | end)
    ├─ Input.InlineAffix    muted text next to the value (start | end)
-   ├─ Input.Field          native <input>
+   ├─ Select.Root          optional start segment: an icon-only picker in the box (no frame)
+   ├─ Input.Field          native <input>; a combobox with `suggestions`
    ├─ Input.ClearButton    clear segment (kit-rendered)
    ├─ Input.CopyButton     copy segment; the glyph morphs into a check (kit-rendered)
    ├─ Input.RevealButton   show / hide a password segment, aria-pressed (kit-rendered)
    └─ Input.Action         the consumer's named icon action with a tooltip (button or asChild link)
+listbox               `suggestions`: a floating list under the box, as wide as it
 Input.Counter         goes into Input.Root `counter` (support row, right side)
 ```
-The trailing side has a fixed CSS `order`, independent of JSX order: value · end inline affix · commit status (`onCommit`) · end icon · segments · end affix. The segments (`ClearButton`, `CopyButton`, `RevealButton`, `Action`) keep their JSX order among themselves and sit edge to edge, full field height, flush with the end edge. All `side="start"` slots share one order before the value, so among them the JSX order decides — write them as affix, icon, inline affix.
+The trailing side has a fixed CSS `order`, independent of JSX order: value · end inline affix · commit status (`onCommit`) · end icon · segments · end affix. The segments (`ClearButton`, `CopyButton`, `RevealButton`, `Action`) keep their JSX order among themselves and sit edge to edge, full field height, flush with the end edge. A `Select` segment comes first, flush with the start edge. All `side="start"` slots share one order before the value, so among them the JSX order decides — write them as affix, icon, inline affix.
 
 ## API
 
@@ -56,6 +61,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `required` | `boolean` | `false` | Red `*` after the label (`aria-hidden`) and native `required` on `Input.Field`. |
 | `optional` | `boolean` | `false` | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger inset ring on the field, `aria-invalid` on the input. A non-empty `error` implies it. |
 | `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on `Input.Wrapper` (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |
@@ -65,6 +71,9 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `strength` | `boolean` | `false` | A password strength meter for new-password fields: a stepped `ProgressBar` under the field and the level word (weak … hard) in the support row. Follows the value of `Input.Field`. |
 | `getStrength` | `(value: string) => 0 \| 1 \| 2 \| 3 \| 4` | `getPasswordStrength` | Replaces the kit's estimate of `strength`. Return 0 for empty, 1 weak … 4 hard. A hint for the person typing, not a security check. |
 | `onCommit` | `(value: string) => void \| Promise<void>` | — | Inline save: fires with a changed value on blur and Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`. |
+| `suggestions` | `readonly string[]` | — | Suggestions for free text (a combobox): a list under the box shows those containing the text; a pick goes into the field as typing would. Any text stays allowed; a value from a list only is `Select`. |
+| `closeOnEscape` | `boolean` | `true` | Escape closes the `suggestions` list; the text and the focus stay in the field. |
+| `closeOnOutsideClick` | `boolean` | `true` | A press outside the field and the `suggestions` list closes the list. |
 | `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). |
@@ -83,7 +92,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `onValueChange` | `(value: string) => void` | — | Called with the new string; native `onChange` still fires first. |
-| `aria-describedby` | `string` | — | Merged with the hint/error ids from the root. |
+| `aria-describedby` | `string` | — | Merged with the affix and hint/error ids from the root. |
 | `required` | `boolean` | — | Overrides the root's `required` for the native input. |
 | `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "size" \| "id">` | — | `value`, `defaultValue`, `onChange`, `type`, `disabled`, `readOnly`, `maxLength`, `placeholder`… |
 
@@ -97,21 +106,23 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the `<span>`. |
 
 ### Input.Affix
-`ref` → `HTMLDivElement`. Tinted section flush with the edge (`aria-hidden`); the wrapper drops its padding there.
+`ref` → `HTMLDivElement`. Tinted section flush with the edge (`aria-hidden`, its text describes the input); the wrapper drops its padding there.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `side` | `"start" \| "end"` | — (required) | Edge the section sits on. |
 | `children` | `ReactNode` | — (required) | Static text: protocol, domain, country code. |
+| `aria-label` | `string` | — | What a screen reader says instead of the text in the input's description. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the `<div>`. |
 
 ### Input.InlineAffix
-`ref` → `HTMLSpanElement`. Muted unit next to the value (`aria-hidden`).
+`ref` → `HTMLSpanElement`. Muted unit next to the value (`aria-hidden`, its text describes the input) — the one place of the unit.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `side` | `"start" \| "end"` | — (required) | Side of the value. |
 | `children` | `ReactNode` | — (required) | Short unit: `₽`, `%`, `кг`. |
+| `aria-label` | `string` | — | The unit in words for a screen reader («рублей»), said instead of the sign in the input's description. |
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the `<span>`. |
 
 ### Input.ClearButton
@@ -181,6 +192,8 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 |---|---|---|---|
 | `focusRing` | `false`: no focus ring; the field still switches to the focus fill, caret visible | A single search field where focus is obvious | `true` |
 | `reserveSupportRow` | Empty support row of hint height under the field | Fields validated on the fly; neighbouring fields in one grid row | `false` |
+| `closeOnOutsideClick` | `false`: a press beside the field keeps the `suggestions` list open | The person copies the value from elsewhere on the page | `true` |
+| `closeOnEscape` | `false`: Escape leaves the `suggestions` list open | Rare: the list closes only by a pick, Tab or blur | `true` |
 | `required` / `optional` | Red `*` / muted «необязательно» after the label | Mark the minority: required when most are optional, optional when most are required | `false` |
 
 **Combinations**
@@ -202,6 +215,8 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 | 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`; the current count rolls its digits to each new value |
+| suggesting | `suggestions` + typing, ↓ / ↑ or a click in the field | `role="combobox"`, `aria-expanded="true"` and `aria-controls` on the input; the list fades in under the box (the floating panel's motion) with the matching part of each suggestion marked; the highlight is a fill (`data-highlighted`, `aria-selected`) named by `aria-activedescendant`; closes on a pick, Escape, Tab, blur or a press outside |
+| select segment | a `Select` inside `Input.Wrapper` | `data-field-segment` on the select root, `data-segment="true"` on its trigger: a tinted section (`fill-subtle`) flush with the start edge, a stronger fill on hover and while open, its own inset focus ring; the box's ring stays for the text |
 | strength | `strength` + the value of `Input.Field` | a stepped `ProgressBar` (4 cells, `aria-label` = `labels.strength`) under the field fills one cell after another, weak · easy · medium · hard, toned danger → warning → accent → success; the level word at the end of the support row flows in letter by letter and is announced (`aria-live`); the support row is reserved |
 | saving | `onCommit` returned a pending Promise | `aria-busy="true"` on the input; a `Spinner` at the end of the field (`data-commit="pending"`); the field stays editable and focusable, neighbours are untouched; a live region says `labels.saving` |
 | saved | the Promise resolved (or `onCommit` returned nothing) | the spinner cross-fades into a success check (`data-commit="saved"`) that fades out after a moment; the live region says `labels.saved` |
@@ -215,6 +230,8 @@ Inline save (`onCommit`): the value at focus is the committed one. Blur and Ente
 
 Strength estimate (`strength`, replaced by `getStrength`): every trait adds a point on its own, in any order — lowercase, uppercase, digits, symbols, 10+ and 14+ characters; 0–2 points weak, 3 easy, 4 medium, 5+ hard, and under 8 characters at most easy. The meter follows `Input.Field` controlled or not.
 
+Suggestions (`suggestions`): the list shows the suggestions that contain the typed text (case-insensitive), and nothing when the text already is the only match. A pick writes the suggestion into the input the way typing does, so `onValueChange` (and `onCommit` on blur) receive it; the text is never restricted to the list.
+
 Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontrolled: `defaultValue`. Both are native input props.
 
 ## Layout & spacing
@@ -234,6 +251,10 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | `Tab` | Focuses the field, then the segments at its end (clear, copy, reveal, actions). |
 | `Enter` · `Space` | On a segment: runs its action (the clear button returns focus to the field). |
 | `Enter` | With `onCommit`: saves a changed value; focus stays in the field. |
+| `↓` · `↑` | With `suggestions`: opens the list on the first (last) suggestion; in the open list moves the highlight, wrapping. Focus stays in the field. |
+| `Alt + ↓` | With `suggestions`: opens the list without highlighting. |
+| `Enter` | With `suggestions`: puts the highlighted suggestion into the field and closes the list; with no highlight the typed text stays. |
+| `Escape` | With `suggestions`: closes the open list, the text stays; a dialog around the field stays open. |
 | `Escape` | With `onCommit`: puts the committed value back. |
 
 ### ARIA
@@ -241,7 +262,9 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 
 - `label` renders a `<label htmlFor>` bound to the input. Without `label`, set `aria-label` on `Input.Field`. A placeholder never replaces the label.
 - Hint and error are linked through `aria-describedby`; the error replaces the hint and sets `aria-invalid="true"`.
-- `Input.Icon`, `Input.Affix`, `Input.InlineAffix` are `aria-hidden`: put the meaning in the label (e.g. "Сумма, ₽").
+- `Input.Icon` is decorative (`aria-hidden`). `Input.Affix` and `Input.InlineAffix` are `aria-hidden` in the reading order but describe the input (`aria-describedby`, before the hint): the unit is heard with the field, so the label never repeats it. An `aria-label` on the affix is said instead of its text («рублей» for `₽`).
+- `suggestions` make the input a `combobox` (`aria-autocomplete="list"`, `aria-expanded`, `aria-controls` on the open `listbox`, which the label names); the highlight is `aria-activedescendant`, so focus never leaves the field.
+- A `Select` inside `Input.Wrapper` is the box's start segment: its trigger is named by the select root's `aria-label` and the picked value («Иконка: Звезда»).
 - `Input.ClearButton` is a real button named by `labels.clear`, with `aria-controls` on the input.
 - `Input.Action` and `Input.CopyButton` are buttons (or a link with `asChild`) named by their label, with a tooltip; copying announces `labels.copied` through a polite live region.
 - `Input.RevealButton` is a toggle: a constant name `labels.reveal`, `aria-pressed` and `aria-controls` on the input; a pointer press keeps the focus in the field.
@@ -276,11 +299,15 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | [states.tsx](examples/states.tsx) | A default field next to a disabled, a read-only and an invalid one with no message — `disabled`, `readOnly`, `invalid`. |
 | [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`. |
+| [affixes.tsx](examples/affixes.tsx) | A fixed prefix and suffix flush with the edges and a unit next to the value, heard as a word by a screen reader — `Input.Affix`, `Input.InlineAffix`, `aria-label`. |
 | [without-focus-ring.tsx](examples/without-focus-ring.tsx) | A single search field where the caret and the lighter fill show focus — `focusRing`. |
 | [password-strength.tsx](examples/password-strength.tsx) | A new password with a show toggle and a meter that fills step by step and names the level beside the hint, and a service password measured by the company's own rule — `Input.RevealButton`, `strength`, `getStrength`. |
 | [edge-actions.tsx](examples/edge-actions.tsx) | Actions at the field's end: a mail link with a tooltip beside copying the value, and a profile link on a read-only field — `Input.Action`, `Input.CopyButton`. |
 | [inline-edit.tsx](examples/inline-edit.tsx) | Record card fields that save on blur and Enter, revert on Escape and show the server's refusal — `onCommit`, `error`. |
+| [suggestions.tsx](examples/suggestions.tsx) | Where a returned order is kept: free text with the places already used as suggestions — `suggestions`. |
+| [with-select.tsx](examples/with-select.tsx) | A menu section's icon and name as one field: an icon-only Select is the box's start segment — `Input.Wrapper`, `Select.Root`, `aria-label`. |
+| [time.tsx](examples/time.tsx) | A call slot as a time of day: the browser's hour and minute segments, arrows step them, working hours only — `type`, `step`, `min`, `max`. |
+| [dismiss.tsx](examples/dismiss.tsx) | A delivery city whose suggestions stay open on a press beside the field while the address is copied from a letter; Escape still closes them — `closeOnOutsideClick`, `closeOnEscape`. |
 | [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, each error leaves as its field is fixed and a saved form turns the button green; neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. |
 
@@ -294,8 +321,11 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - `tone="danger"` / `error` as a boolean → use `invalid` or an `error` message.
 - A `Button` placed next to the field for «copy» or «call» → `Input.CopyButton` / `Input.Action` inside `Input.Wrapper`.
 - Hand-written blur / Enter / Escape handlers and a `disabled` field while saving → `onCommit` returning the save Promise; the field stays editable.
+- `<datalist>` with `list` on `Input.Field` → `suggestions` on `Input.Root`: the kit's list, keyboard and ARIA in both themes.
+- A Select and an Input side by side for one value (an icon + a name) → the Select inside `Input.Wrapper`, named by its `aria-label`.
+- A text field with a hand-made time mask, or a Datepicker for a time of day → `Input.Field type="time"`.
 - Returning `false` from `onCommit` to refuse → reject the Promise (throw) and set `error`.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (`Input.Action`, `Input.CopyButton`), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [ProgressBar](../progress-bar/COMPONENT.md) (`strength`), `Icon` (segments), [VisuallyHidden](../visually-hidden/COMPONENT.md)
+- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (`Input.Action`, `Input.CopyButton`), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [ProgressBar](../progress-bar/COMPONENT.md) (`strength`), `Icon` (segments), [VisuallyHidden](../visually-hidden/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md) (the `suggestions` list)
 - **See also:** [Textarea](../textarea/COMPONENT.md), [Select](../select/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md) — fields with the same contract

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

@@ -1,4 +1,4 @@
-/** A fixed prefix and suffix flush with the edges and a unit next to the value — `Input.Affix`, `Input.InlineAffix`. */
+/** A fixed prefix and suffix flush with the edges and a unit next to the value, heard as a word by a screen reader — `Input.Affix`, `Input.InlineAffix`, `aria-label`. */
 import { Input } from "prime-ui-kit";
 
 export default function InputAffixesExample() {
@@ -14,7 +14,9 @@ export default function InputAffixesExample() {
       <Input.Root label="Сумма платежа">
         <Input.Wrapper>
           <Input.Field placeholder="0,00" inputMode="decimal" />
-          <Input.InlineAffix side="end">₽</Input.InlineAffix>
+          <Input.InlineAffix side="end" aria-label="рублей">
+            ₽
+          </Input.InlineAffix>
         </Input.Wrapper>
       </Input.Root>
     </>

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

@@ -0,0 +1,29 @@
+/** A delivery city whose suggestions stay open on a press beside the field while the address is copied from a letter; Escape still closes them — `closeOnOutsideClick`, `closeOnEscape`. */
+import { Input } from "prime-ui-kit";
+import * as React from "react";
+
+const CITIES = [
+  "Москва",
+  "Санкт-Петербург",
+  "Новосибирск",
+  "Екатеринбург",
+  "Казань",
+  "Нижний Новгород",
+];
+
+export default function InputDismissExample() {
+  const [city, setCity] = React.useState("");
+
+  return (
+    <Input.Root
+      label="Город доставки"
+      suggestions={CITIES}
+      closeOnOutsideClick={false}
+      closeOnEscape
+    >
+      <Input.Wrapper>
+        <Input.Field value={city} onValueChange={setCity} />
+      </Input.Wrapper>
+    </Input.Root>
+  );
+}

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

@@ -0,0 +1,26 @@
+/** Where a returned order is kept: free text with the places already used as suggestions — `suggestions`. */
+import { Input } from "prime-ui-kit";
+import * as React from "react";
+
+const PLACES = [
+  "Склад на Складочной, стеллаж А",
+  "Склад на Складочной, зона возвратов",
+  "Пункт выдачи на Лесной",
+  "Сервисный центр на Нагатинской",
+];
+
+export default function InputSuggestionsExample() {
+  const [place, setPlace] = React.useState("");
+
+  return (
+    <Input.Root
+      label="Где хранится возврат"
+      hint="Выберите из прошлых мест или впишите новое"
+      suggestions={PLACES}
+    >
+      <Input.Wrapper>
+        <Input.Field value={place} onValueChange={setPlace} placeholder="Склад на Складочной" />
+      </Input.Wrapper>
+    </Input.Root>
+  );
+}

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

@@ -0,0 +1,24 @@
+/** A call slot as a time of day: the browser's hour and minute segments, arrows step them, working hours only — `type`, `step`, `min`, `max`. */
+import { Input } from "prime-ui-kit";
+import * as React from "react";
+
+const QUARTER_HOUR = 15 * 60;
+
+export default function InputTimeExample() {
+  const [time, setTime] = React.useState("10:30");
+
+  return (
+    <Input.Root label="Время звонка" hint="С 09:00 до 18:00, шаг 15 минут">
+      <Input.Wrapper>
+        <Input.Field
+          type="time"
+          value={time}
+          onValueChange={setTime}
+          step={QUARTER_HOUR}
+          min="09:00"
+          max="18:00"
+        />
+      </Input.Wrapper>
+    </Input.Root>
+  );
+}

package/src/components/input/examples/with-select.tsx

@@ -0,0 +1,44 @@
+/** A menu section's icon and name as one field: an icon-only Select is the box's start segment — `Input.Wrapper`, `Select.Root`, `aria-label`. */
+import { Icon, type IconName, Input, Select } from "prime-ui-kit";
+import * as React from "react";
+
+const ICONS: { value: IconName; label: string }[] = [
+  { value: "object.package", label: "Склад" },
+  { value: "object.truck", label: "Доставка" },
+  { value: "object.receipt", label: "Счета" },
+  { value: "object.users", label: "Клиенты" },
+];
+
+export default function InputWithSelectExample() {
+  const [icon, setIcon] = React.useState<IconName>("object.truck");
+  const [name, setName] = React.useState("Отгрузки");
+
+  return (
+    <Input.Root label="Раздел в меню" hint="Иконка и название видны в боковой панели">
+      <Input.Wrapper>
+        <Select.Root
+          aria-label="Иконка раздела"
+          value={icon}
+          onValueChange={(next) => setIcon(next as IconName)}
+        >
+          <Select.Trigger>
+            <Select.TriggerIcon>
+              <Icon name={icon} />
+            </Select.TriggerIcon>
+          </Select.Trigger>
+          <Select.Content>
+            {ICONS.map((option) => (
+              <Select.Item key={option.value} value={option.value}>
+                <Select.ItemIcon>
+                  <Icon name={option.value} />
+                </Select.ItemIcon>
+                {option.label}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+        <Input.Field value={name} onValueChange={setName} />
+      </Input.Wrapper>
+    </Input.Root>
+  );
+}

package/src/components/kanban/COMPONENT.md

@@ -35,13 +35,13 @@ Kanban.Root                          board: horizontal strip of columns, its own
    └─ <li> column (from `columns`)   no well with a header plate (`plain`) or a header line (`line`), or a `fill-muted` well (`well`)
       ├─ header                      title (`columnTitleAs`, h3) · count Badge (the stage color) · renderColumnActions(column) · [grip Dnd.Handle, a lock when `locked`]
       │  ├─ description              muted line under the title (`column.description`)
-      │  └─ meta                     the stage's figures (`renderColumnMeta(column)`)
+      │  └─ meta                     the stage's figures (`renderColumnMeta(column)`), a line per array entry
       └─ <ul> (Dnd.Sortable)         own vertical scroll; Skeleton cards while loading; EmptyPage (Dnd `empty`) when empty
          └─ Kanban.Item              <li> card from renderItem(item); with getItemHref an <a> covers it
             ├─ Kanban.ItemHeader     optional top row over a faint hairline: key · priority (or a full-width Thumbnail cover)
             ├─ Kanban.ItemTitle      title, up to three lines
             ├─ Kanban.ItemDescription  muted meta line: id, due date
-            ├─ Kanban.ItemBadges     wrapping row of Badge
+            ├─ Kanban.ItemBadges     wrapping row of Badge (a Badge.Group)
             └─ Kanban.ItemFooter     row: Kanban.ItemCount … at the start, the assignee at the end
                └─ Kanban.ItemCount   icon + number
 ```
@@ -72,7 +72,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | `onItemOpen` | `(item: T, event: KanbanItemOpenEvent) => void` | — | Opens a card in place (a Drawer): a click, Enter or Space; never from a control inside it or after a drag. With `getItemHref` it gets plain clicks: `event.preventDefault()` routes in the app. |
 | `columnTitleAs` | `"h2" \| "h3" \| "h4"` | `"h3"` | Heading level of the column titles in the page outline; the look does not change. |
 | `renderColumnActions` | `(column: KanbanColumn) => ReactNode` | — | Trailing actions of a column header (add a card, a menu); kit controls inside take the `s` tier. |
-| `renderColumnMeta` | `(column: KanbanColumn) => ReactNode` | — | The meta line under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»). Like `description`, it describes the column's list. |
+| `renderColumnMeta` | `(column: KanbanColumn) => ReactNode \| readonly ReactNode[]` | — | The meta under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»); an array is a line per entry, in order. Describes the column's list. |
 | `canDrop` | `(id: string, columnId: string) => boolean \| string` | — | A workflow rule: refuses card `id` in column `columnId` — `false`, or a string that says why (spoken and shown under the carried card). The column turns `danger` before the release. |
 | `variant` | `"plain" \| "line" \| "well"` | `"plain"` | No wells: `plain` — a filled header plate over the cards, `line` — a bare header over a faint line; cards stand on the host. `well`: every column is a filled well holding its cards (bounded queues). |
 | `loading` | `boolean` | `false` | Columns show skeleton cards in the card geometry; the cards cross-fade in when it turns off. |
@@ -103,7 +103,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
 
 ### Kanban.ItemBadges
-`ref` → `HTMLDivElement`. A wrapping row of `Badge`s: labels, priority.
+`ref` → `HTMLDivElement`. A wrapping row of `Badge`s (a `Badge.Group`): labels, priority.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -138,7 +138,7 @@ Do not wrap a `plain` board's columns in your own boxes, and do not put a `well`
 |---|---|---|---|
 | `limit` (column) | count reads `count / limit`, orange when full; a full column refuses cards from others with the reason `labels.full` | a WIP limit per status | — |
 | `description` (column) | a muted caption line under the column title, one line with an ellipsis | the column's rule or meaning («Ответить в течение дня») | — |
-| `renderColumnMeta` | a caption line in tabular digits under the description | the stage's figures («2 сделки · 576 000 ₽») | — |
+| `renderColumnMeta` | caption lines in tabular digits under the description: one, or a line per entry of an array, in order | the stage's figures («2 сделки · 576 000 ₽», «Средний чек 288 000 ₽») | — |
 | `color` (column) | the count Badge in the stage's hue (soft) | telling stages apart, matching their color elsewhere; the title still names the column | — |
 | `locked` (column) | a lock where the grip would be; the column holds its place, no column moves past it | system stages: the first «Новые», the last «Закрыто» | — |
 | `reorderableColumns` | a ghost grip at the end of every column header, after the actions; the column is carried by it | the user arranges the stages | `false` |
@@ -228,13 +228,13 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | [structure.tsx](examples/structure.tsx) | Cards take only the parts they need: a title alone, a meta line, labels, a footer with counts and an assignee — `Kanban.ItemTitle`, `Kanban.ItemDescription`, `Kanban.ItemBadges`, `Kanban.ItemFooter`, `Kanban.ItemCount`. |
 | [cards.tsx](examples/cards.tsx) | Three kinds of cards on one board: a plain note, a ticket with a header row of key and priority, a design task with a cover — `Kanban.ItemHeader`, `Thumbnail`, `Kanban.ItemFooter`. |
 | [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. |
-| [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
+| [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures in two lines under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
 | [saving.tsx](examples/saving.tsx) | Every move is saved on the server: the card waits busy in its new place, and an invoice the server refuses to close glides back to its column — `onValueChange`. |
 | [item-link.tsx](examples/item-link.tsx) | Tickets that open: each card is a link to its page, so ⌘-click or a middle click opens a new tab, a plain click, Enter or Space opens it in place, and a drag only moves it — `getItemHref`, `onItemOpen`. |
 | [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry; an empty column keeps its drop area and a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The placement lives in the parent: every move arrives with its source, target and position to save, and a button resets the board — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page — `Kanban.Root`, `columns`. |
-| [screen.tsx](examples/screen.tsx) | A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemOpen`. |
+| [screen.tsx](examples/screen.tsx) | A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in its top bar, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemOpen`. |
 
 ## Mistakes
 - Returning something other than `Kanban.Item` from `renderItem` → the card does not drag and Alt + arrows do nothing.

package/src/components/kanban/examples/columns.tsx

@@ -1,4 +1,4 @@
-/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
+/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures in two lines under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
 import {
   Button,
   ColorSwatches,
@@ -89,7 +89,9 @@ export default function KanbanColumnsExample() {
       DEALS.filter((deal) => deal.id === id),
     );
     const sum = deals.reduce((total, deal) => total + deal.amount, 0);
-    return `${deals.length} ${dealsWord(deals.length)} · ${RUBLES.format(sum)}`;
+    const lines = [`${deals.length} ${dealsWord(deals.length)} · ${RUBLES.format(sum)}`];
+    if (deals.length > 0) lines.push(`Средний чек ${RUBLES.format(sum / deals.length)}`);
+    return lines;
   };
 
   return (

package/src/components/kanban/examples/screen.module.css

@@ -1,5 +1,5 @@
 /* Kanban board: a work screen — the header carries the title and the tools, the page fills the app
-   panel (`AppShell.Root fillViewport` + `PageContent.Root fill`) and the board or the list takes
+   panel (`AppShell.Root fillViewport` + `Page.Root fill`) and the board or the list takes
    the free height; every column scrolls inside the board, never the page. */
 
 /* Company cell: the name over the deal id (the column's `minWidth` keeps it on its lines). */

package/src/components/kanban/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemOpen`. */
+/** A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in its top bar, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemOpen`. */
 import {
-  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -16,8 +15,7 @@ import {
   type KanbanColumn,
   type KanbanValue,
   matchesSmartFilter,
-  PageContent,
-  PageToolbar,
+  Page,
   type PaletteColor,
   SegmentedControl,
   SmartFilter,
@@ -359,64 +357,51 @@ export default function KanbanScreenExample() {
   const nextStage = STAGES[STAGES.findIndex((stage) => stage.id === dealStage) + 1];
 
   return (
-    <>
-      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
-          the only h1 and the page's tools; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Сделки
-            <AppHeader.Description>
-              {loading ? "Загружаем воронку…" : pipeline}
-            </AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <SmartFilter.Root
-            fields={FIELDS}
-            value={filter}
-            onValueChange={setFilter}
-            search={search}
-            onSearchChange={setSearch}
-          >
-            <PageToolbar.Root aria-label="Сделки">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.View>
-                <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
-                  <SegmentedControl.Item value="board">
-                    <SegmentedControl.Icon>
-                      <Icon name="view.columns" />
-                    </SegmentedControl.Icon>
-                    Доска
-                  </SegmentedControl.Item>
-                  <SegmentedControl.Item value="list">
-                    <SegmentedControl.Icon>
-                      <Icon name="format.list" />
-                    </SegmentedControl.Icon>
-                    Список
-                  </SegmentedControl.Item>
-                </SegmentedControl.Root>
-              </PageToolbar.View>
-              <PageToolbar.Actions>
-                <Button.Root>
-                  <Button.Icon>
-                    <Icon name="action.add" />
-                  </Button.Icon>
-                  Новая сделка
-                </Button.Root>
-              </PageToolbar.Actions>
-              <PageToolbar.Chips>
-                <SmartFilter.Chips />
-              </PageToolbar.Chips>
-            </PageToolbar.Root>
-          </SmartFilter.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root fill>
-        <PageContent.Body>
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root fill>
+        {/* A work screen titles itself in its top bar: the only h1, the search and the filters, the
+          view, the one primary action. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Сделки</Page.Title>
+            <Page.Description>{loading ? "Загружаем воронку…" : pipeline}</Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Сделки">
+            <SmartFilter.Toolbar />
+            <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
+              <SegmentedControl.Item value="board">
+                <SegmentedControl.Icon>
+                  <Icon name="view.columns" />
+                </SegmentedControl.Icon>
+                Доска
+              </SegmentedControl.Item>
+              <SegmentedControl.Item value="list">
+                <SegmentedControl.Icon>
+                  <Icon name="format.list" />
+                </SegmentedControl.Icon>
+                Список
+              </SegmentedControl.Item>
+            </SegmentedControl.Root>
+          </Page.Tools>
+          <Page.Actions>
+            <Button.Root>
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              Новая сделка
+            </Button.Root>
+          </Page.Actions>
+          <Page.Chips>
+            <SmartFilter.Chips />
+          </Page.Chips>
+        </Page.TopBar>
+        <Page.Body>
           <Crossfade state={view} fill>
             {view === "board" ? (
               // `plain` (the default): the board is the page's main region, so the stages are no
@@ -567,8 +552,8 @@ export default function KanbanScreenExample() {
               </Drawer.Footer>
             </Drawer.Content>
           </Drawer.Root>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

package/src/components/kbd/COMPONENT.md

@@ -39,7 +39,7 @@ Kbd              <kbd>; one key, its badge tier, children (text, Icon or both)
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "size">` | — | `className`, `title`, `aria-label` and the other `<kbd>` attributes. |
 
 ## Variants
-Kbd has one look: monospace text in `text-secondary` on a translucent `fill-subtle-active` wash, no border, weight 500. No `variant`, `tone` or `color`.
+Kbd has one look: monospace text (`--prime-font-family-key`: the mono faces, with ⇧ ⌥ ⌃ ⌘ from the system face so they match the letters) in `text-secondary` on a translucent `fill-subtle-active` wash, no border, weight 500. No `variant`, `tone` or `color`.
 
 ### size
 | Value | Looks like | Use when | Default |