prime-ui-kit 0.21.3 → 0.21.5

package/dist/index.js

@@ -90,7 +90,7 @@ import {
   useSidebar,
   useTokenValue,
   useUploadQueue
-} from "./chunks/chunk-R5LI5BO3.js";
+} from "./chunks/chunk-CM2KZEDV.js";
 import {
   Avatar,
   Badge,
@@ -125,11 +125,11 @@ import {
   tierMappings,
   tones,
   variants
-} from "./chunks/chunk-JO7E6SZQ.js";
+} from "./chunks/chunk-XH64AMXF.js";
 import {
   ControlSizeProvider,
   useOptionalControlSize
-} from "./chunks/chunk-HMLQCKRL.js";
+} from "./chunks/chunk-FWL3NJYA.js";
 export {
   Accordion,
   AppShell,

package/dist/internal/autofill.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * Browser autofill and password managers stay off a kit text field: a product screen is full of
+ * searches, filters and record fields that a saved login or address has no business filling.
+ * `autocomplete="off"` turns off the browser's own suggestions where it is honoured (Chrome and
+ * Firefox history and address autofill on desktop); browsers still read login-looking fields on
+ * their own, and the password-manager extensions read only their own opt-outs: 1Password
+ * `data-1p-ignore`, LastPass `data-lpignore`, Bitwarden `data-bwignore`, Dashlane
+ * `data-form-type="other"`.
+ */
+export declare const AUTOFILL_OFF: {
+    readonly autoComplete: "off";
+    readonly "data-1p-ignore": "true";
+    readonly "data-lpignore": "true";
+    readonly "data-bwignore": "true";
+    readonly "data-form-type": "other";
+};
+type AutofillProps = {
+    autoComplete?: string;
+} & Partial<Omit<typeof AUTOFILL_OFF, "autoComplete">>;
+export declare function AutofillScope({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The autofill attributes of a text field. A consumer's `autoComplete` token other than `"off"`
+ * opts in: the token goes through and the opt-outs are dropped. Without a token the field is off,
+ * except inside `AutofillScope`, where the browser and the password managers decide.
+ */
+export declare function useAutofill(autoComplete: string | undefined): AutofillProps;
+export {};

package/dist/internal/messageList.d.ts

@@ -98,11 +98,13 @@ type MessageRowDescription = {
  * What a top-level child of a list is. Every child is a row (a message, a fragment with one, a
  * date, a service line, the unread band) except the parts that live at the list's end (`tail`:
  * typing, the selection bar). A `message` row describes itself; a `sticky` row is a date that
- * sticks while its day scrolls.
+ * sticks while its day scrolls; any other row may give its `estimate`.
  */
 type RowKind = {
     tail?: boolean;
     sticky?: boolean;
+    /** A row that is not a message: its height before it is measured (px). */
+    estimate?: number;
     message?: (props: Record<string, unknown>) => MessageRowDescription;
 };
 /** The parts of the kit declare how a list lays them out (compared by element type). */

package/dist/skill/api-contract.md

@@ -376,11 +376,11 @@ crumb of your own.
 
 <!-- icons:start -->
 `<Icon name="…" />` names:
-- `nav.*`: `chevronDown`, `chevronLeft`, `chevronRight`, `chevronUp`, `chevronsLeft`, `chevronsUpDown`, `dashboard`, `home`, `itemDot`, `layoutGrid`, `menu`, `sidebarCollapse`, `sidebarExpand`;
+- `nav.*`: `chevronDown`, `chevronLeft`, `arrowRight`, `chevronRight`, `chevronUp`, `chevronsLeft`, `chevronsUpDown`, `dashboard`, `home`, `itemDot`, `layoutGrid`, `menu`, `sidebarCollapse`, `sidebarExpand`;
 - `action.*`: `add`, `addContact`, `attach`, `check`, `close`, `copy`, `delete`, `download`, `drag`, `edit`, `externalLink`, `eyedropper`, `filter`, `forward`, `login`, `logout`, `more`, `openApp`, `pause`, `pin`, `play`, `react`, `refresh`, `report`, `remove`, `reply`, `search`, `send`, `settings`, `transcribe`, `upload`, `video`, `voice`, `zoomIn`, `zoomOut`;
 - `field.*`: `calendar`, `email`, `password.show`, `password.hide`;
 - `format.*`: `bold`, `code`, `italic`, `link`, `list`, `quote`, `spoiler`, `strikethrough`, `underline`;
-- `object.*`: `activity`, `bell`, `bike`, `book`, `cart`, `chart`, `crown`, `disc`, `document`, `file`, `fuel`, `funnel`, `globe`, `headset`, `image`, `inbox`, `key`, `mapPin`, `megaphone`, `message`, `motorbike`, `package`, `phone`, `receipt`, `rocket`, `scale`, `storage`, `tasks`, `trophy`, `truck`, `user`, `users`, `wallet`;
+- `object.*`: `activity`, `bell`, `bike`, `book`, `cart`, `chart`, `crown`, `disc`, `document`, `file`, `fuel`, `funnel`, `globe`, `bot`, `headset`, `image`, `inbox`, `key`, `mapPin`, `megaphone`, `message`, `motorbike`, `package`, `phone`, `receipt`, `rocket`, `scale`, `storage`, `tasks`, `trophy`, `truck`, `user`, `users`, `wallet`;
 - `sort.*`: `ascending`, `descending`, `none`;
 - `status.*`: `danger`, `emailSent`, `failed`, `favorite`, `info`, `locked`, `muted`, `sound`, `offline`, `pending`, `read`, `sent`, `success`, `trendUp`, `warning`;
 - `theme.*`: `dark`, `light`;

package/dist/skill/checklist.md

@@ -39,6 +39,8 @@ checks.
 - [ ] A request a value starts — a simulated one too — is cancelled when the value changes again ([nothing to guess](ux.md#6-nothing-to-guess)).
 - [ ] Tabs, filters, search, page and the open record are in the URL ([nothing to guess](ux.md#6-nothing-to-guess)).
 - [ ] Defaults prefill what the system knows; each field has the control and `inputMode` of its data ([ask less](ux.md#7-ask-less)).
+- [ ] `autoComplete` tokens only on sign-in and sign-up fields (`LoginForm.Form`, a password change); no token on a search or a record field ([ask less](ux.md#7-ask-less)).
+- [ ] No search, filter or record field (other than a record's e-mail) says «username», «login», «email», «логин», «почта» in its placeholder, label, `name` or `id` — Safari offers saved logins there ([ask less](ux.md#7-ask-less)).
 - [ ] I looked at the screen in a browser, filled badly ([the visual check](ux.md#9-look-at-it-before-handing-it-over)).
 
 ## Grid and spacing

package/dist/skill/composition.md

@@ -1026,7 +1026,7 @@ What each screen in [the index](#screens) demonstrates — keep these when you s
 - Layout: `Page.Split` (`Page.List`, `Page.Detail`) in a `fill` page: the dialog list `ChatList` (last message, ticks, unread, «печатает…») and the conversation beside it; on a narrow panel one pane at a time with `Page.BackButton` in `Chat.Header`.
 - Search over the dialogs is the field of `ChatList` itself: `search` and `onSearchChange`; you filter the list (by name and last message), and the list shows the match in rows, the number found and an empty result itself. Never put a field of your own above the list.
 - The conversation is `Chat.Root` in the pane's card: the header, `Chat.Search`, `Chat.Messages` and `Chat.Footer` with the Composer. Never assemble your own header, `ScrollContainer` and feed — the chat links search, jumps, selection and «печатает…» itself.
-- Messages are data: `items` with `getKey`, `getAuthor`, `getDate` (service events through `isService`), the first unread is `unread`; the feed computes dates, runs, tails and the avatar place. `renderMessage` may be inline: only a message whose item or place changed renders again, so whatever a row shows lives in its item, and a reply's original comes from `entry.find(key)`.
+- Messages are data: `items` with `getKey`, `getAuthor`, `getDate` (events of the record — an agent took the client, a status moved — through `isService`, drawn as `Chat.Service` with `Chat.ServiceIcon` and `Chat.ServiceChange`), the first unread is `unread`; the feed computes dates, runs, tails and the avatar place. `renderMessage` may be inline: only a message whose item or place changed renders again, so whatever a row shows lives in its item, and a reply's original comes from `entry.find(key)`.
 - History is `hasOlder` and `onLoadOlder` with a promise: while it runs, a bubble-shaped `Skeleton` placeholder stands on top, and the view does not jump.
 - Each kind of message is its own part of `Message`: text with markup, photos and albums, a file, a `VoicePlayer`; the screen renders the kinds its domain has. The others (`VideoNote`, a location, a contact, a link preview, reactions, a forwarded header) are shown on the Message, VoicePlayer and VideoNote pages; pinned messages and selection on the Chat page.
 - Sending is a `Composer` with `onSend` without waiting: the message is in the feed at once with a clock under a stable id, then one tick, then two. Your own message rises from the input, the client's answer slides in from the side — the feed animates new messages itself; history and status changes are not animated.

package/dist/skill/reference/components/button/examples/in-form.tsx

@@ -32,7 +32,6 @@ export default function ButtonInFormExample() {
             type="email"
             name="email"
             placeholder="name@company.ru"
-            autoComplete="email"
             onValueChange={() => setError(undefined)}
           />
         </Input.Wrapper>

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

@@ -36,7 +36,9 @@ Chat.Root                         <div> column, fills its host; owns selection,
 │  ├─ [first-load placeholders]   Skeleton bubbles on both sides in the list's place while `loading`
 │  ├─ [older placeholder]         a Skeleton bubble above the first message while `hasOlder`
 │  ├─ Chat.Separator              a date pill, sticky at the top of its day (from `items`, or yours)
-│  ├─ Chat.Service                an event of the chat, centered pill
+│  ├─ Chat.Service                an event of the chat, a centered pill; the time at its end
+│  │  ├─ Chat.ServiceIcon         the glyph before the text (aria-hidden)
+│  │  └─ Chat.ServiceChange       `from` › `to` (two Badge.Root), read as «с «Лид» на «Арендатор»»
 │  ├─ Chat.Unread                 «Непрочитанные сообщения» band (`unread`)
 │  ├─ Message.Root                a message row (see Message)
 │  ├─ Message.Typing              «печатает…» bubble at the end (from `Chat.Root typing`, or yours)
@@ -81,6 +83,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 - `renderMessage` may be an inline function: an item renders again only when it or its place changes, so whatever a row shows lives in its item (an edit, a reaction, a pin). Another message (a reply's original) comes from `entry.find(key)`.
 - `onRead` reports an incoming message once at least half of it, or half the view, has been on screen while the page is visible (`IntersectionObserver`); batched per frame, each `value` once per mount.
 - One sound at a time on the page: a `VoicePlayer`, a `VideoNote` and a video in `Message.Media` pause each other; nothing to wire.
+- What happened to the conversation's record (an agent took the client, a stage changed, a manager joined) goes into the list as `Chat.Service` rows — the same items, marked by `isService`, at their time. Events in a row stand as one group; a new one at the end rises in like a message.
 - Times in a profile's zone: `timeZone` (an IANA name) on `Chat.Messages` moves the date separators, the runs and every message's time to it; without it they follow the browser.
 
 ## API
@@ -202,11 +205,31 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (the date), `className`. |
 
 ### Chat.Service
-`ref` → `HTMLDivElement`. An event of the chat, not a message («Анна добавила Олега»): a centered pill that wraps; a row, never a message (with `items`, render it for an `isService` item).
+`ref` → `HTMLDivElement`. An event of the chat, not a message: a centered pill that wraps — `Chat.ServiceIcon`, the words, `Chat.ServiceChange`, the time. A row (for an `isService` item): the arrows, the selection and the search pass it by; events in a row stand as one group.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (the event), `className`. |
+| `time` | `Date \| string` | — | When it happened: a `Date` shown with `formatTime` (and put in `<time dateTime>`), or the text to show; muted, at the end of the pill. |
+| `timeZone` | `string` | the list's `timeZone`, else the browser's zone | The zone `time` is read in. |
+| `formatTime` | `(date: Date, timeZone?: string) => string` | «09:05» | Display of a `Date` time; gets the `timeZone` in force. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (the event: words, `Chat.ServiceIcon`, `Chat.ServiceChange`, a link), `className`. |
+
+### Chat.ServiceIcon
+`ref` → `HTMLSpanElement`. The glyph before an event's text (who or what acted): an `Icon` at the caption's size, muted, `aria-hidden` — the words name it.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children` (an `Icon`), `className`. |
+
+### Chat.ServiceChange
+`ref` → `HTMLSpanElement`. A value that changed inside an event: `from` › `to`, two `Badge.Root` with your colours as a rule. It wraps as one unit; assistive tech hears one phrase, «с «Лид» на «Арендатор»» (`labels.change`), the drawing is hidden.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `from` | `ReactNode` | — (required) | The value before (a `Badge.Root`); its text fills `{from}`. |
+| `to` | `ReactNode` | — (required) | The value after; its text fills `{to}`. |
+| `labels` | `Partial<ChatServiceChangeLabels>` | — | `change` — the phrase assistive tech hears. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes. |
 
 ### Chat.Unread
 `ref` → `HTMLDivElement`. «Непрочитанные сообщения»: a band across the list above the first unread message (`unread` of `Chat.Messages items` puts it there).
@@ -252,6 +275,8 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | older history | `hasOlder` | a bubble-shaped `Skeleton` above the first message; reaching it calls `onLoadOlder`; the rows that arrive above keep the reader's place |
 | jumped to | `Message.Reply target`, `Chat.Pinned`, `jumpTo` | the list brings the message to the middle (a near one glides, a far one lands at once — rendering it first — and settles once its neighbours have laid out); the message itself steps back and comes forward three times, the others stay still (opacity 1 → the dimmed opacity of `Message` → 1, `base` each) — `data-pointing="a"` / `"b"` on the list, flipped on every jump so a repeated jump restarts it, and `data-pointed` with the same `data-blink` on the message; a reply's target also takes the focus, a `jumpTo` change leaves it where it is. While the search is open its current match takes the place of `jumpTo`. Reduced motion: no blink, the others stand back for a moment |
 | search | `search` (the bar open) | every case-insensitive match in the messages' text and transcripts under a soft accent wash (`<mark>`); the newest match is current: brought into view while the others stay back (`data-pointing="current"`); Enter and the older / newer buttons move the full strength to the older or newer match in one step; «2 из 5» or «Нет совпадений» beside the field |
+| new event | a `Chat.Service` (or a `Chat.Unread`) added at the end after the list mounted, decided from the row keys as messages are | its row floats up `--prime-space-1` and fades in once (`enterMotion.enter`, `fast`; reduced motion keeps the fade). Not on the first render, history or a row the window renders as it scrolls into view |
+| events in a row | consecutive `Chat.Service` rows | one group: `--prime-message-group-gap` between them, the row's `space-3` only around the group |
 | typing | `typing` | the description cross-fades into «печатает…» in the accent (`Crossfade`); the typing bubble enters at the end of the list like an incoming message and leaves closing its height |
 | pinned | `Chat.Pinned items` | the rail's current segment in the accent; a press jumps to the message and steps the bar to the older one (the oldest wraps to the newest), its line entering; without items the bar renders nothing |
 | selection mode | `selected` (not `null`); any of `selected` / `defaultSelected` / `onSelectedChange` adds «Выбрать» to every `Message.Menu` | listbox / options with `aria-selected`; a check at the row start; a click toggles, Shift+click selects the range from the anchor, press-and-drag (or a finger slid from a check) paints the messages it passes with the first one's new state and scrolls the list at its edges; the unselected messages step back to the dimmed opacity of `Message` with a slight desaturation (`fast`, both ways; `data-selecting` on the list, `data-selected` on the message); `Chat.SelectionBar` — the «к последним» button rises above it first (its height upward in `--message-bottom-lift` on the list, `fast`), then the bar fades in, so the two never overlap; outside selection the bar renders nothing |
@@ -263,6 +288,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 - The search bar and the pinned bar stand under the header with `space-3` side padding; the footer pads the Composer by `space-2` / `space-3`.
 - The list pads its own sides (`space-2`), so the focus rings of the bubbles fit; every row is a container: a bubble is at most `--prime-message-max-width` and 85% of the chat.
 - Gaps between runs `--prime-message-gap` (16), inside a run `--prime-message-group-gap` (8).
+- A date and an event stand in `space-3` above and below; their pill is a caption on `--prime-color-fill-muted`, `space-1` / `space-3` padding, never wider than a bubble. An event's content is inline and wraps as text: each part (`Chat.ServiceIcon`, `Chat.ServiceChange`, the time) is a box one caption line high; the change wraps as one unit and, wider than the pill, breaks around its arrow. Its content takes the compact tier (`compactTier`), so a change's badges are `xs` and the pill keeps one line's height.
 - The window: only the rows around the view render, in normal flow between two spacers whose nodes stay while the window moves (sticky dates keep working; the date of the day in view stays rendered). Each row is measured once (one shared `ResizeObserver`) and cached by key; until then it stands at an estimate its message gives from its props (a picture from its aspect, a text from its length). The scroller keeps the first element in view still when anything above it changes (history loaded, rows measured, a message that grows in place) — one correction before paint — never moves a row with a transform, and the window pins rows it must keep: a jump target, the focused message, a playing player.
 - The «к последним» button is a zero-height sticky row at the end of the list: it floats over the last messages at `space-3` from the bottom-end and takes no room.
 - Only text selects: the list and every message are `user-select: none`, the text-bearing parts opt back in.
@@ -291,6 +317,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 - `Chat.Pinned` is a button named by its content, the title and the line («Закреплённое 2 из 3» + the text); the rail is decorative; «Открепить» is a separate button.
 - The «к последним» button is named «К последним сообщениям», with the count «Новых сообщений: N. …»; the badge is `aria-hidden`.
 - `Chat.SelectionBar` is a `toolbar` named by the count «Выбрано: N», which is announced politely as it changes.
+- `Chat.Service` is a row of the log, not a message: no `article`, no place in the arrows' order or the selection; its text (with the change's phrase) is what the log announces when an event arrives.
 - The quick reaction (double tap, `L`) is announced politely.
 - One sound at a time on the page: a voice message, a video note and a chat video pause each other.
 - «Печатает…» in the header is visible text; in the list the typing bubble is a polite `status` «Собеседник печатает».
@@ -327,11 +354,18 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `pinnedOf` | `"Закреплённое {index} из {count}"` | `Chat.Pinned labels`: the title with several, the newest last. |
 | `unpin` | `"Открепить"` | `Chat.Pinned labels`: the name of the unpin button. |
 
+#### Chat.ServiceChange
+
+| Key | Default | Used for |
+|---|---|---|
+| `change` | `"с «{from}» на «{to}»"` | `Chat.ServiceChange labels`: the change as assistive tech hears it; `{from}`, `{to}` — the text of each value. |
+
 ## Examples
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A complete team messenger over two thousand messages: the header whose status turns into typing, search with highlight, pinned messages, history that loads above, author headers with tags in a group chat, every kind of message, transcripts, reactions, the menu with reply, edit, pin and select, jumps, the new-messages button and the Composer whose messages rise into the list — `Chat.Root`, `Chat.Header`, `Chat.Search`, `Chat.Pinned`, `Chat.Messages`, `group`, `items`, `renderMessage`, `typing`, `selected`, `Chat.Footer`. |
 | [structure.tsx](examples/structure.tsx) | The list alone, written as parts: `Chat.Root` with only `Chat.Messages`, a date that stays on top while its day scrolls, an event of the chat and the unread band — `Chat.Messages`, `Chat.Separator`, `Chat.Service`, `Chat.Unread`. |
+| [events.tsx](examples/events.tsx) | What happened to the client, right in the dialog: who took it, a stage it moved to, a manager who joined; events in a row stand as one group, a new one rises in at the end — `isService`, `Chat.Service`, `Chat.ServiceIcon`, `Chat.ServiceChange`, `time`. |
 | [group-chat.tsx](examples/group-chat.tsx) | A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run, which holds messages up to a quarter of an hour apart; the dates carry the weekday — `group`, `items`, `renderMessage`, `groupWindow`, `formatDate`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. |
 | [reactions.tsx](examples/reactions.tsx) | A team's own reactions for approvals: a double tap or `L` puts the approval mark, a long press or `R` opens the team's set, and a chip toggles them back — `quickReaction`, `reactionOptions`, `onReactionToggle`. |
 | [live.tsx](examples/live.tsx) | A live support chat: the client types — the header and the end of the list say so — then answers; new messages enter at the end, read receipts come from what is on screen, and scrolled up the round button counts what arrived — `typing`, `onNewMessage`, `onRead`. |
@@ -340,7 +374,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | [states.tsx](examples/states.tsx) | The first load of a conversation: bubble-shaped placeholders on both sides stand in the list's place, then cross-fade into the messages — `loading`. |
 | [controlled.tsx](examples/controlled.tsx) | Selection mode owned by the screen: the Select item of a message's menu starts it, a check stands beside every message, a press toggles one while the others step back, the bar counts and acts, Escape leaves — `selected`, `onSelectedChange`, `Chat.SelectionBar`. |
 | [narrow.tsx](examples/narrow.tsx) | At phone width the header keeps its actions and lets the title ellipsize, bubbles take up to 85% of the chat, long links wrap and an album keeps its layout — `Chat.Root`, `Chat.Header`, `Chat.Messages`, `Chat.Footer`. |
-| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in its top bar, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. |
+| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in its top bar, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, the request's events (an agent took it, its status moved, you joined) between the messages, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `isService`, `hasOlder`, `onLoadOlder`, `typing`. |
 
 ## Mistakes
 - A header, a search bar and a scroller of your own around the messages → `Chat.Header`, `Chat.Search`, `Chat.Messages`: the chat wires typing, search, jumps and selection between them.
@@ -355,9 +389,11 @@ Chat.Root                         <div> column, fills its host; owns selection,
 - Marking messages read on arrival → `onRead` reports what was really on screen while the page was visible.
 - «печатает…» as a text you swap in the header and a row you add to the list → `Chat.Root typing`: both move together, smoothly.
 - Search results computed and scrolled to by hand → `Chat.Search`: it finds, counts, marks and brings matches into view, the focus staying in the field.
+- A chat event as a `Message.Root` from «system», or a `Notification` → `Chat.Service`: a row of the list, outside the arrows, the selection and the search.
+- A change written as «Лид → Арендатор» in the text → `Chat.ServiceChange from to`: the values keep their colours and assistive tech hears «с «Лид» на «Арендатор»».
 - `scrollIntoView` to show a pinned or quoted message → `Chat.Pinned` and `Message.Reply target` jump in the chat's own scroller and point at the message.
 - Checkboxes and selection handling of your own → `Chat.Root selected` with `Chat.SelectionBar`: click, Shift range and drag like DataTable rows.
 
 ## Related
-- **Built from:** [Message](../message/COMPONENT.md) (`Message.Typing`, the rows), [ScrollContainer](../scroll-container/COMPONENT.md) (the scroller, `anchor="end"`), [Input](../input/COMPONENT.md) (the search field), [Button](../button/COMPONENT.md) (search, steps, unpin, «к последним», the selection bar), [Badge](../badge/COMPONENT.md), [Crossfade](../crossfade/COMPONENT.md) (the status line, the first load), [Skeleton](../skeleton/COMPONENT.md) (the first load, older history), [VisuallyHidden](../visually-hidden/COMPONENT.md) (the loading announcement), Icon (`action.search`, `nav.chevronUp`, `nav.chevronDown`, `action.pin`, `action.close`); `useVirtualRows` (the window), `internal/messageList` (the contract between the list and its messages), `internal/readReceipts`, `internal/useRangeSelection` (selection by click, Shift and drag), `internal/messagePart` (the search query its texts mark)
+- **Built from:** [Message](../message/COMPONENT.md) (`Message.Typing`, the rows), [ScrollContainer](../scroll-container/COMPONENT.md) (the scroller, `anchor="end"`), [Input](../input/COMPONENT.md) (the search field), [Button](../button/COMPONENT.md) (search, steps, unpin, «к последним», the selection bar), [Badge](../badge/COMPONENT.md), [Crossfade](../crossfade/COMPONENT.md) (the status line, the first load), [Skeleton](../skeleton/COMPONENT.md) (the first load, older history), [VisuallyHidden](../visually-hidden/COMPONENT.md) (the loading announcement, the phrase of a change), Icon (`action.search`, `nav.chevronUp`, `nav.chevronDown`, `nav.chevronRight`, `action.pin`, `action.close`); `useVirtualRows` (the window), `internal/messageList` (the contract between the list and its messages), `internal/readReceipts`, `internal/useRangeSelection` (selection by click, Shift and drag), `internal/messagePart` (the search query its texts mark)
 - **See also:** [Message](../message/COMPONENT.md) — one message and every content part; [Composer](../composer/COMPONENT.md) — the input in `Chat.Footer`; [Gallery](../gallery/COMPONENT.md), [VoicePlayer](../voice-player/COMPONENT.md), [VideoNote](../video-note/COMPONENT.md), [Timeline](../timeline/COMPONENT.md)

package/dist/skill/reference/components/chat/examples/events.tsx

@@ -0,0 +1,129 @@
+/** What happened to the client, right in the dialog: who took it, a stage it moved to, a manager who joined; events in a row stand as one group, a new one rises in at the end — `isService`, `Chat.Service`, `Chat.ServiceIcon`, `Chat.ServiceChange`, `time`. */
+import { Badge, Button, Card, Chat, Icon, Message } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const NOW = new Date(2026, 9, 15, 11, 0);
+const at = (hour: number, minute: number) => new Date(2026, 9, 15, hour, minute);
+
+type DialogItem =
+  | { id: string; kind: "message"; author: "client" | "agent"; sentAt: Date; text: string }
+  | { id: string; kind: "taken"; sentAt: Date }
+  | { id: string; kind: "stage"; sentAt: Date; from: string; to: string }
+  | { id: string; kind: "joined"; sentAt: Date; manager: string };
+
+const DIALOG: DialogItem[] = [
+  {
+    id: "ev-1",
+    kind: "message",
+    author: "client",
+    sentAt: at(10, 12),
+    text: "Здравствуйте! Ищу склад под аренду, 100–150 м², с 1 ноября.",
+  },
+  { id: "ev-2", kind: "taken", sentAt: at(10, 12) },
+  { id: "ev-3", kind: "stage", sentAt: at(10, 12), from: "Лид", to: "Арендатор" },
+  {
+    id: "ev-4",
+    kind: "message",
+    author: "agent",
+    sentAt: at(10, 13),
+    text: "Добрый день! Есть склад 120 м² на Складской, 4, свободен с 25 октября. Прислать планировку?",
+  },
+  {
+    id: "ev-5",
+    kind: "message",
+    author: "client",
+    sentAt: at(10, 15),
+    text: "Да, и хотелось бы обсудить скидку за год вперёд.",
+  },
+];
+
+const JOINED: DialogItem = {
+  id: "ev-6",
+  kind: "joined",
+  sentAt: at(10, 16),
+  manager: "Анна Котова",
+};
+
+function renderItem(item: DialogItem) {
+  if (item.kind === "taken") {
+    return (
+      <Chat.Service time={item.sentAt}>
+        <Chat.ServiceIcon>
+          <Icon name="object.bot" />
+        </Chat.ServiceIcon>
+        ИИ-агент взял клиента
+      </Chat.Service>
+    );
+  }
+  if (item.kind === "stage") {
+    return (
+      <Chat.Service time={item.sentAt}>
+        <Chat.ServiceIcon>
+          <Icon name="object.funnel" />
+        </Chat.ServiceIcon>
+        ИИ-агент перевёл клиента
+        <Chat.ServiceChange
+          from={<Badge.Root color="gray">{item.from}</Badge.Root>}
+          to={<Badge.Root color="green">{item.to}</Badge.Root>}
+        />
+      </Chat.Service>
+    );
+  }
+  if (item.kind === "joined") {
+    return (
+      <Chat.Service time={item.sentAt}>
+        <Chat.ServiceIcon>
+          <Icon name="object.user" />
+        </Chat.ServiceIcon>
+        Менеджер {item.manager} подключилась к диалогу
+      </Chat.Service>
+    );
+  }
+  return (
+    <Message.Root
+      direction={item.author === "agent" ? "outgoing" : "incoming"}
+      time={item.sentAt}
+      status={item.author === "agent" ? "read" : undefined}
+    >
+      <Message.Text>{item.text}</Message.Text>
+    </Message.Root>
+  );
+}
+
+export default function ChatEventsExample() {
+  const [items, setItems] = React.useState(DIALOG);
+  const joined = items.includes(JOINED);
+
+  return (
+    <div className={styles.live}>
+      <div className={styles.liveBar}>
+        <Button.Root
+          variant="soft"
+          disabled={joined}
+          onClick={() => setItems((current) => [...current, JOINED])}
+        >
+          <Button.Icon>
+            <Icon name="action.addContact" />
+          </Button.Icon>
+          Подключить менеджера
+        </Button.Root>
+      </div>
+      <Card.Root className={styles.short}>
+        <Chat.Root>
+          <Chat.Messages
+            aria-label="Диалог с клиентом «Склад на Складской»"
+            now={NOW}
+            items={items}
+            getKey={(item: DialogItem) => item.id}
+            getAuthor={(item: DialogItem) => (item.kind === "message" ? item.author : "system")}
+            getDate={(item: DialogItem) => item.sentAt}
+            isService={(item: DialogItem) => item.kind !== "message"}
+            renderMessage={renderItem}
+          />
+        </Chat.Root>
+      </Card.Root>
+    </div>
+  );
+}

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

@@ -1,6 +1,7 @@
-/** A support messenger as a work screen: the title and the unread count in its top bar, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. */
+/** A support messenger as a work screen: the title and the unread count in its top bar, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, the request's events (an agent took it, its status moved, you joined) between the messages, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `isService`, `hasOlder`, `onLoadOlder`, `typing`. */
 import {
   Avatar,
+  Badge,
   Card,
   Chat,
   ChatList,
@@ -28,7 +29,13 @@ type Content =
   | { kind: "text"; text: string }
   | { kind: "media"; items: GalleryItem[]; caption?: string }
   | { kind: "voice"; src: string; waveform: number[]; duration: number }
-  | { kind: "file"; name: string; size: number; href: string };
+  | { kind: "file"; name: string; size: number; href: string }
+  | {
+      kind: "event";
+      icon: "object.bot" | "object.funnel" | "object.user";
+      text: string;
+      change?: { from: string; to: string };
+    };
 
 type ChatMessage = Content & {
   id: string;
@@ -129,6 +136,31 @@ const HISTORY: ChatMessage[] = [
     ],
     caption: "Вот так выглядит",
   },
+  {
+    id: "e1",
+    from: "client",
+    sentAt: at(7, 10, 14),
+    kind: "event",
+    icon: "object.bot",
+    text: "ИИ-агент взял обращение",
+  },
+  {
+    id: "e2",
+    from: "client",
+    sentAt: at(7, 10, 14),
+    kind: "event",
+    icon: "object.funnel",
+    text: "ИИ-агент перевёл обращение",
+    change: { from: "Новое", to: "В работе" },
+  },
+  {
+    id: "e3",
+    from: "me",
+    sentAt: at(7, 10, 19),
+    kind: "event",
+    icon: "object.user",
+    text: "Вы подключились к диалогу",
+  },
   {
     id: "m3",
     from: "me",
@@ -228,6 +260,8 @@ const excerpt = (message: ChatMessage) => {
       );
     case "file":
       return message.name;
+    case "event":
+      return message.text;
   }
 };
 
@@ -260,6 +294,8 @@ const renderContent = (message: ChatMessage) => {
       );
     case "file":
       return <Message.File name={message.name} fileSize={message.size} href={message.href} />;
+    case "event":
+      return null;
   }
 };
 
@@ -522,6 +558,23 @@ export default function ChatScreenExample() {
   // re-renders the one message it touches. A dialog loads its own messages, so a row never
   // outlives the contact it names; a reply's original comes from the list (`entry.find`).
   const renderMessage = (message: ChatMessage, entry: ChatMessageEntry<ChatMessage>) => {
+    // What happened to the request (an agent took it, its status moved, you joined): a row.
+    if (message.kind === "event") {
+      return (
+        <Chat.Service time={message.sentAt}>
+          <Chat.ServiceIcon>
+            <Icon name={message.icon} />
+          </Chat.ServiceIcon>
+          {message.text}
+          {message.change ? (
+            <Chat.ServiceChange
+              from={<Badge.Root color="gray">{message.change.from}</Badge.Root>}
+              to={<Badge.Root color="blue">{message.change.to}</Badge.Root>}
+            />
+          ) : null}
+        </Chat.Service>
+      );
+    }
     const own = message.from === "me";
     const original = message.replyTo ? entry.find(message.replyTo) : undefined;
     return (
@@ -645,6 +698,7 @@ export default function ChatScreenExample() {
                   getKey={(message) => message.id}
                   getAuthor={(message) => message.from}
                   getDate={(message) => message.sentAt}
+                  isService={(message) => message.kind === "event"}
                   renderMessage={renderMessage}
                   unread={FIRST_UNREAD}
                   now={NOW}

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

@@ -180,11 +180,7 @@ export default function DrawerScreenExample() {
                       </Radio.Group>
                       <Input.Root label="Название" error={errors.name}>
                         <Input.Wrapper>
-                          <Input.Field
-                            name="name"
-                            placeholder="ООО «Ромашка»"
-                            autoComplete="organization"
-                          />
+                          <Input.Field name="name" placeholder="ООО «Ромашка»" />
                         </Input.Wrapper>
                       </Input.Root>
                       <div className={styles.pair}>

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

@@ -96,6 +96,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `onValueChange` | `(value: string) => void` | — | Called with the new string; native `onChange` still fires first. |
 | `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. |
+| `autoComplete` | `string` | `"off"` with the password-manager opt-outs; inside `LoginForm.Form`, left to the browser | A token opts in to autofill and drops the password-manager opt-outs; without one the field stays off. Pass one only on sign-in and sign-up fields and for a new password (`new-password`). |
 | `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "size" \| "id">` | — | `value`, `defaultValue`, `onChange`, `type`, `disabled`, `readOnly`, `maxLength`, `placeholder`… |
 
 ### Input.Icon
@@ -272,6 +273,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - `minStrength` uses native constraint validation: below the level the input's `validationMessage` is `labels.strengthTooWeak`, the form refuses to submit, and the message becomes the field's error (`aria-invalid`).
 - `Input.Icon` is decorative (`aria-hidden`). `Input.Affix` and `Input.InlineAffix` are `aria-hidden` in the reading order but describe the input (`aria-describedby`, before the hint): the unit is heard with the field, so the label never repeats it. An `aria-label` on the affix is said instead of its text («рублей» for `₽`).
 - `suggestions` make the input a `combobox` (`aria-autocomplete="list"`, `aria-expanded`, `aria-controls` on the open `listbox`, which the label names); the highlight is `aria-activedescendant`, so focus never leaves the field.
+- Autofill is off unless you pass `autoComplete`: without a token the input carries `autocomplete="off"` and the opt-outs of 1Password, LastPass, Bitwarden and Dashlane (`data-1p-ignore`, `data-lpignore`, `data-bwignore`, `data-form-type="other"`); a token passes through and drops them. With `suggestions` it stays off. Inside `LoginForm.Form` a field without a token is left to the browser.
 - 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.
@@ -338,6 +340,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - 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`.
+- `autoComplete="email"` / `"name"` on a search, filter or record field → leave it out: autofill is off unless you pass `autoComplete`; tokens belong on sign-in and sign-up fields (`LoginForm.Form`) and on a new password (`new-password`).
 
 ## 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, the `valid` check), [VisuallyHidden](../visually-hidden/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md) (the `suggestions` list)

package/dist/skill/reference/components/input/examples/in-form.tsx

@@ -40,7 +40,6 @@ export default function InputInFormExample() {
                 name="name"
                 onValueChange={() => edit("name")}
                 defaultValue="ООО «Северный ветер»"
-                autoComplete="organization"
               />
             </Input.Wrapper>
           </Input.Root>

package/dist/skill/reference/components/input/examples/validation.tsx

@@ -28,7 +28,7 @@ export default function InputValidationExample() {
     <>
       <Input.Root label="Название организации" required hint="Как в учредительных документах">
         <Input.Wrapper>
-          <Input.Field defaultValue="ООО «Северный ветер»" autoComplete="organization" />
+          <Input.Field defaultValue="ООО «Северный ветер»" />
         </Input.Wrapper>
       </Input.Root>
       <Input.Root

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

@@ -99,7 +99,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Form
-`ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props.
+`ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props. The one place autofill stays on: a kit field inside it without `autoComplete` is left to the browser and the password managers.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -184,7 +184,7 @@ Root carries `data-size`, `data-align` and `data-flat`.
 - The title is a real heading (`h1` by default) and the form is a native `<form>`: Enter submits.
 - The logo is decorative; with an `aria-label` it is the product mark image (`role="img"`).
 - Give `LoginForm.Form` an `aria-label` (or `aria-labelledby` pointing to the title id) so the form is a landmark.
-- Fields use `autoComplete` (`email`, `current-password`, `new-password`, `one-time-code`) so password managers and OTP autofill work.
+- Every field names its purpose with `autoComplete` — `email` or `username`, `current-password` to sign in, `new-password` to sign up, reset or accept an invite, `one-time-code` for a code (`DigitInput` sets it) — so password managers fill and save the right field. Kit fields elsewhere keep autofill off.
 - Field errors come from the fields (`aria-invalid`, described by the error). A refused sign-in has no Banner: the e-mail takes `invalid` and the `error` of the password says why, announced by the support row of the field.
 
 ### Labels

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

@@ -16,12 +16,16 @@ export default function LoginFormSizesExample() {
             <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
               <Input.Root label="Email">
                 <Input.Wrapper>
-                  <Input.Field type="email" placeholder="name@company.ru" />
+                  <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
                 </Input.Wrapper>
               </Input.Root>
               <Input.Root label="Пароль">
                 <Input.Wrapper>
-                  <Input.Field type="password" placeholder="********" />
+                  <Input.Field
+                    type="password"
+                    autoComplete="current-password"
+                    placeholder="********"
+                  />
                 </Input.Wrapper>
               </Input.Root>
               <Button.Root type="submit" fullWidth>

package/dist/skill/reference/components/tabs/examples/orientation.tsx

@@ -38,7 +38,7 @@ export default function TabsOrientationExample() {
         <div className={styles.form}>
           <Input.Root label="Имя и фамилия">
             <Input.Wrapper>
-              <Input.Field defaultValue="Анна Смирнова" autoComplete="name" />
+              <Input.Field defaultValue="Анна Смирнова" />
             </Input.Wrapper>
           </Input.Root>
           <Input.Root label="Должность">

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

@@ -60,6 +60,7 @@ Unlike Input, Textarea has no Wrapper / Field parts: `Textarea.Root` renders the
 | `aria-describedby` | `string` | — | Merged before the hint/error ids. |
 | `onCommit` | `(value: string) => void \| Promise<void>` | — | Inline save: fires with a changed value on blur and Mod+Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`. |
 | `formatting` | `boolean` | `false` | Selecting text shows a floating toolbar of eight Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. Off: plain text. |
+| `autoComplete` | `string` | `"off"` with the password-manager opt-outs; inside `LoginForm.Form`, left to the browser | A token opts in to autofill and drops the password-manager opt-outs; without one the field stays off. Pass one only on sign-in and sign-up fields and for a new password (`new-password`). |
 | `children` | `ReactNode` | — | Actions in the field's top end corner: `Textarea.CopyButton`, `Textarea.Action`. |
 | `labels` | `Partial<TextareaLabels>` | — | Built-in strings, see Labels. |
 | `className` | `string` | — | Class on the field frame `<div>` (label, field box, support row), as on every field root. |
@@ -226,6 +227,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 - A copy `Button` under a read-only result → `Textarea.CopyButton` as a child of the root.
 - Other children than `Textarea.CopyButton` / `Textarea.Action` → the root renders the textarea itself; children are only the corner actions.
 - `formatting` on text that is shown as plain text → the reader sees `**` and `||`; turn it on only where the text is rendered with its Markdown.
+- Expecting the browser to offer saved addresses in a note → autofill is off unless you pass `autoComplete` (a token such as `street-address` opts in).
 
 ## Related
 - **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (corner actions, formatting tools), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [Button](../button/COMPONENT.md) and [Kbd](../kbd/COMPONENT.md) (formatting tools), Icon (`format.*`); `internal/textFormatting` + `internal/textFormattingToolbar` (the formatting shared with Composer), [VisuallyHidden](../visually-hidden/COMPONENT.md)