prime-ui-kit 0.17.0 → 0.18.0

package/dist/index.js

@@ -46,6 +46,7 @@ import {
   Pagination,
   ProgressCircle,
   Radio,
+  RichText,
   SegmentedControl,
   Sheet,
   Sidebar,
@@ -86,7 +87,7 @@ import {
   useSidebar,
   useTokenValue,
   useUploadQueue
-} from "./chunks/chunk-A4WE3UNC.js";
+} from "./chunks/chunk-MB4CXSLL.js";
 import {
   Avatar,
   Badge,
@@ -121,11 +122,11 @@ import {
   tierMappings,
   tones,
   variants
-} from "./chunks/chunk-7WWZYGRC.js";
+} from "./chunks/chunk-OAXJWF3L.js";
 import {
   ControlSizeProvider,
   useOptionalControlSize
-} from "./chunks/chunk-2ODXLPW3.js";
+} from "./chunks/chunk-QFHE5GKW.js";
 export {
   Accordion,
   AppShell,
@@ -188,6 +189,7 @@ export {
   ProgressBar,
   ProgressCircle,
   Radio,
+  RichText,
   ScrollContainer,
   SegmentedControl,
   Select,

package/dist/internal/ChoiceField.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { HintTone } from "../components/hint/Hint";
 import { type FieldIds } from "./FieldFrame";
 import type { CheckState, ControlSize } from "./states";
 /** Class of the visually hidden native input that sits on top of the visual control. */
@@ -38,13 +39,14 @@ type ChoiceFieldProps = {
      */
     groupOption?: boolean;
     hint?: React.ReactNode;
+    hintTone?: HintTone;
     error?: React.ReactNode;
     /** The native input (with `choiceInputClass`) followed by its aria-hidden visual. */
     control: React.ReactNode;
     className?: string;
     children?: React.ReactNode;
 };
-export declare function ChoiceField({ ids, size, state, disabled, readOnly, busy, required, optional, optionalLabel, groupOption, hint, error, control, className, children, }: ChoiceFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChoiceField({ ids, size, state, disabled, readOnly, busy, required, optional, optionalLabel, groupOption, hint, hintTone, error, control, className, children, }: ChoiceFieldProps): import("react/jsx-runtime").JSX.Element;
 export type ChoiceLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
     ref?: React.Ref<HTMLSpanElement>;
 };

package/dist/internal/FieldFrame.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type HintTone } from "../components/hint/Hint";
 import type { ControlSize } from "./states";
 /** Field props shared by every framed field (the same contract as `Input.Root`). */
 export type FieldFrameProps = {
@@ -18,6 +19,10 @@ export type FieldFrameProps = {
      * Support text under the field; linked by `aria-describedby`.
      */
     hint?: React.ReactNode;
+    /**
+     * 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.
+     */
+    hintTone?: HintTone;
     /**
      * Error message; replaces the hint and implies `invalid`.
      */
@@ -121,10 +126,11 @@ export declare function useLeavingError(showError: boolean, error: React.ReactNo
  * changes is read, an error the field mounts with is read with the field (`aria-describedby`).
  * An option of a group (`live={false}`) leaves the announcement to the group.
  */
-export declare function FieldSupport({ ids, size, hint, error, leaving, disabled, live, className, textClassName, }: {
+export declare function FieldSupport({ ids, size, hint, hintTone, error, leaving, disabled, live, className, textClassName, }: {
     ids: FieldIds;
     size: ControlSize;
     hint?: React.ReactNode;
+    hintTone?: HintTone;
     error?: React.ReactNode;
     /** The error leaving the slot: the frame's `useLeavingError`. */
     leaving: FieldLeavingError | null;
@@ -166,7 +172,7 @@ type FieldFrameRenderProps = FieldFrameProps & {
  * spaced by the tier's `--field-label-gap` / `--field-hint-gap`. The support row stays mounted
  * (empty and without room when it shows nothing), so its text slot is a polite live region.
  */
-export declare function FieldFrame({ size, ids, label, required, optional, hint, error, disabled, optionalLabel, requiredLabel, group, labelEnd, counter, reserveSupportRow, className, children, ...rest }: FieldFrameRenderProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldFrame({ size, ids, label, required, optional, hint, hintTone, error, disabled, optionalLabel, requiredLabel, group, labelEnd, counter, reserveSupportRow, className, children, ...rest }: FieldFrameRenderProps): import("react/jsx-runtime").JSX.Element;
 type FieldCounterProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     current: number;
     max: number;

package/dist/internal/fieldCell.d.ts

@@ -4,7 +4,7 @@ import * as React from "react";
  * a framed field without a `label` of its own takes it as its label (and keeps its own `label`, if
  * any), so every field in a row has a name without a visible label per row. The column heading
  * shows the name once above the rows; the field's label is read, not shown, until the list stacks
- * its rows into blocks in a narrow container (the `prime-field-list` container FieldList sets),
+ * its rows into blocks in a narrow container (the size container of the FieldList body),
  * where each field shows it.
  */
 export type FieldCell = {

package/dist/internal/formatClock.d.ts

@@ -1,4 +1,25 @@
 /** A media position or length: `m:ss`, `h:mm:ss` from an hour on. */
 export declare function formatClock(seconds: number): string;
-/** A time of day: `HH:mm`, 24-hour, in the local zone («09:05»). */
-export declare function formatTimeOfDay(date: Date): string;
+/** A calendar day: the month 0–11, as `Date#getMonth`. */
+type CalendarDay = {
+    year: number;
+    month: number;
+    day: number;
+};
+/** The calendar day and the clock of a moment as a time zone reads it. */
+type ZonedParts = CalendarDay & {
+    /** 0 (Sunday) – 6, as `Date#getDay`. */
+    weekday: number;
+    hours: number;
+    minutes: number;
+};
+/**
+ * The day and the clock of `date` in `timeZone` (an IANA name, `"Asia/Vladivostok"`); without one,
+ * in the browser's zone.
+ */
+export declare function zonedParts(date: Date, timeZone?: string): ZonedParts;
+/** Whole calendar days from `from` to `to` (both read in one zone); never off by a DST hour. */
+export declare function daysBetween(from: CalendarDay, to: CalendarDay): number;
+/** A time of day: `HH:mm`, 24-hour, in `timeZone` or the browser's zone («09:05»). */
+export declare function formatTimeOfDay(date: Date, timeZone?: string): string;
+export {};

package/dist/internal/leaveGuard.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+/** What holds a page: a request runs (`busy`), changes are not saved (`dirty`). */
+type LeaveGuardState = {
+    busy: boolean;
+    dirty: boolean;
+};
+/**
+ * The `onClickCapture` of a navigation item (`Sidebar.Item`, `BottomNav.Item`, a `Breadcrumb.Item`
+ * level), chained before the consumer's own. While a page guard holds, the click stops before any
+ * handler of the item or of its router link runs and before the browser follows `href`: `busy`
+ * holds it, `dirty` asks the guard's confirm, which replays the click once the person agrees.
+ * Router-agnostic: the replay is the same click. A click that opens a new tab or window, or one on
+ * a disabled item, is never held.
+ */
+export declare function leaveGuardCapture(onClickCapture?: React.MouseEventHandler<HTMLElement>): React.MouseEventHandler<HTMLElement>;
+/**
+ * Registers a page guard while mounted: the navigation items ask it through `holdLeave`, and while
+ * it is `busy` or `dirty` the browser asks before the tab closes or reloads (`beforeunload`).
+ */
+export declare function useLeaveGuard({ busy, dirty }: LeaveGuardState, ask: (leave: () => void) => void): void;
+export {};

package/dist/internal/messageList.d.ts

@@ -66,6 +66,8 @@ export type MessageListContextValue = {
     reactionOptions: readonly MessageReactionOption[] | null;
     /** The reader: joins a reaction's avatars at once when they put it. */
     reader: MessageUser | undefined;
+    /** The zone a message reads its time in; `undefined` — the browser's zone. */
+    timeZone: string | undefined;
     /** Says `text` in the list's polite live region. */
     announce: (text: string) => void;
 };

package/dist/internal/overlay/DialogParts.d.ts

@@ -188,6 +188,27 @@ export declare function DialogBody({ className, ...rest }: DialogBodyProps): imp
 export declare namespace DialogBody {
     var displayName: string;
 }
+export type DialogSectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /**
+     * The heading of the section; it names the `<section>`.
+     */
+    label: React.ReactNode;
+    /**
+     * One line of context under the heading (body-s).
+     */
+    description?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * A titled group of the dialog body — what `Page.Section` is to a page: an `<h3>` (title-s, one
+ * level under the dialog's `<h2>` title) with an optional description and the dialog's `Actions`
+ * at the end of the heading row, then the content 16 below. Sections stand further apart than the
+ * plain blocks of the body.
+ */
+export declare function DialogSection({ label, description, className, children, ...rest }: DialogSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogSection {
+    var displayName: string;
+}
 export type DialogFooterProps = React.HTMLAttributes<HTMLElement> & {
     /**
      * `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.
@@ -195,8 +216,12 @@ export type DialogFooterProps = React.HTMLAttributes<HTMLElement> & {
     layout?: DialogFooterLayout;
     ref?: React.Ref<HTMLElement>;
 };
-/** Actions in DOM order, primary last. Stacks full width when the dialog is narrower than 360px. */
-export declare function DialogFooter({ layout, className, ...rest }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Actions in DOM order, primary last. Stacks full width when the dialog is narrower than 360px.
+ * With a `Meta` the buttons move as one row: when the line runs short the status text goes above
+ * them first, so the buttons never split over two lines while there is room for them in one.
+ */
+export declare function DialogFooter({ layout, className, children, ...rest }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogFooter {
     var displayName: string;
 }

package/dist/internal/swatch.d.ts

@@ -86,6 +86,11 @@ type SwatchChipProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> &
  * host's `--prime-icon-size`, with the faint inner edge; `aria-hidden` — the trigger is named.
  */
 export declare function SwatchChip({ value, className, ...rest }: SwatchChipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A typed hex color as `#rrggbb` (lowercase): `#` optional, 3 or 6 digits, spaces around ignored;
+ * `null` for anything else.
+ */
+export declare function parseHexColor(text: string): string | null;
 /** Case- and space-insensitive color comparison; `null` means "no color". */
 export declare function sameColor(a: string | null, b: string | null): boolean;
 /**

package/dist/internal/tokenDefaults.d.ts

@@ -6,6 +6,7 @@
  */
 export declare const TOKEN_DEFAULTS: {
     readonly "--prime-gallery-max-size": 360;
+    readonly "--prime-message-sticker": 160;
     readonly "--prime-message-video-note-box": 268;
     readonly "--prime-motion-duration-base": 380;
     readonly "--prime-motion-duration-fast": 230;

package/dist/layout/index.d.ts

@@ -2,7 +2,7 @@ export type { AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShell
 export { AppShell, useAppShellNav } from "./app-shell/AppShell";
 export type { BottomNavActionProps, BottomNavItemCountProps, BottomNavItemIconProps, BottomNavItemProps, BottomNavLabels, BottomNavRootProps, } from "./bottom-nav/BottomNav";
 export { BottomNav } from "./bottom-nav/BottomNav";
-export type { PageActionsProps, PageBackButtonProps, PageBodyProps, PageCellProps, PageCellRows, PageCellSpan, PageChipsProps, PageDescriptionProps, PageDetailProps, PageGridProps, PageHeaderProps, PageHeadingProps, PageLabels, PageListProps, PageMaxWidth, PageRootProps, PageSectionLayout, PageSectionProps, PageSplitProps, PageTitleProps, PageToolsProps, PageTopBarProps, } from "./page/Page";
+export type { PageActionsProps, PageBackButtonProps, PageBodyProps, PageCellProps, PageCellRows, PageCellSpan, PageChipsProps, PageDescriptionProps, PageDetailProps, PageGridProps, PageGuardProps, PageHeaderProps, PageHeadingProps, PageLabels, PageListProps, PageMaxWidth, PageRootProps, PageSectionLayout, PageSectionProps, PageSplitProps, PageTitleProps, PageToolsProps, PageTopBarProps, } from "./page/Page";
 export { Page } from "./page/Page";
 export type { SidebarAccountProps, SidebarBrandLogoProps, SidebarBrandProps, SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemActionProps, SidebarItemCountProps, SidebarItemIconProps, SidebarItemProps, SidebarItemShortcutProps, SidebarLabels, SidebarMode, SidebarRootProps, SidebarSubContentProps, SidebarSubProps, SidebarSubTriggerProps, SidebarToggleProps, } from "./sidebar/Sidebar";
 export { Sidebar, useSidebar } from "./sidebar/Sidebar";

package/dist/layout/page/Page.d.ts

@@ -6,6 +6,14 @@ export type PageLabels = {
     more: string;
     /** Name of `Page.BackButton` (back from the detail to the list on a narrow split). */
     back: string;
+    /** Title of the confirm `Page.Guard` opens when a person leaves a `dirty` page. */
+    leaveTitle: string;
+    /** Its description. */
+    leaveDescription: string;
+    /** Its confirm button: leave and lose the changes. */
+    leaveConfirm: string;
+    /** Its cancel button: stay on the page. */
+    leaveCancel: string;
 };
 export declare const PAGE_LABELS: PageLabels;
 type DivProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -95,10 +103,14 @@ declare namespace PageTitle {
     var displayName: string;
 }
 export type PageDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    /**
+     * Its data is loading: a Skeleton keeps the line's place, so the title never moves; the data then fades in. Sets `aria-busy`.
+     */
+    loading?: boolean;
     ref?: React.Ref<HTMLParagraphElement>;
 };
 /** One line of context that carries data (a period, a count): truncates in the bar, wraps in the flow. */
-declare function PageDescription({ className, children, ...rest }: PageDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function PageDescription({ loading, className, children, ...rest }: PageDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageDescription {
     var displayName: string;
 }
@@ -118,9 +130,10 @@ export type PageToolsProps = DivProps;
 /**
  * The page's tools — sections, search and filter, view — as kit controls in the order written.
  * On the bar's first line each keeps its natural width; on a line of their own they fill it:
- * a search (`SmartFilter.Toolbar`, `Input.Root`) takes the room first, switchers share the rest
- * (a `SegmentedControl.Root` is `fullWidth` unless set), and they wrap when one line is not
- * enough. Named (`aria-label`), it is a `group`.
+ * a search (`SmartFilter.Toolbar`, `Input.Root`) takes the room first, switchers and fields share
+ * the rest (a `SegmentedControl.Root` and a `Datepicker.Root` are `fullWidth` unless set; a Select
+ * trigger fills by itself), and they wrap when one line is not enough. Named (`aria-label`), it is
+ * a `group`.
  */
 declare function PageTools({ className, children, ref, ...rest }: PageToolsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageTools {
@@ -167,9 +180,11 @@ declare namespace PageSection {
 export type PageGridProps = DivProps;
 /**
  * The grid of the page's tiles (KPI cards, charts, panels): 12 columns, one gap on both axes.
- * Columns follow the grid's own width, so tiles fold on a narrow panel by themselves.
+ * Columns follow the grid's own width, so tiles fold on a narrow panel by themselves. A wide cell
+ * (span 7–11) written next to a narrow one (span 4–5) forms a pair that a mid-width grid lays out as
+ * 2/3 + 1/3, so the row keeps no hole.
  */
-declare function PageGrid({ className, ...rest }: PageGridProps): import("react/jsx-runtime").JSX.Element;
+declare function PageGrid({ className, children, ...rest }: PageGridProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageGrid {
     var displayName: string;
 }
@@ -187,11 +202,34 @@ export type PageCellProps = DivProps & {
      */
     rows?: PageCellRows;
 };
-/** One tile place in `Page.Grid`; its child (a Card, a ChartFrame) fills it. */
-declare function PageCell({ span, rows, className, ...rest }: PageCellProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * One tile place in `Page.Grid`; its child (a Card, a ChartFrame) fills it. A `Crossfade` child
+ * fills it too (`fill` unless set), so a tile that swaps its states keeps the row's height.
+ */
+declare function PageCell({ span, rows, className, children, ...rest }: PageCellProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageCell {
     var displayName: string;
 }
+export type PageGuardProps = {
+    /**
+     * A request runs (a save): a press on those items does nothing until it ends; the browser asks before the tab closes.
+     */
+    busy?: boolean;
+    /**
+     * Changes are not saved: a press on those items asks «leave without saving?»; its confirm (`labels.leaveConfirm`) repeats the press, its cancel keeps the page. The browser asks before the tab closes.
+     */
+    dirty?: boolean;
+};
+/**
+ * Holds the page from where its form state lives: put it anywhere inside the page. While it holds,
+ * a press on a `Sidebar.Item`, a `BottomNav.Item` or a `Breadcrumb.Item` link stops before it
+ * navigates — `busy` holds it, `dirty` asks «leave without saving?» and replays the press once the
+ * person agrees — and the browser asks before the tab closes or reloads. Renders only the confirm.
+ */
+declare function PageGuard({ busy, dirty }: PageGuardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageGuard {
+    var displayName: string;
+}
 export type PageSplitProps = DivProps & {
     /**
      * The detail is open (a record is chosen), controlled. On a narrow split it takes the place of the list; on a wide one both panes stay.
@@ -255,6 +293,7 @@ export declare const Page: {
     Section: typeof PageSection;
     Grid: typeof PageGrid;
     Cell: typeof PageCell;
+    Guard: typeof PageGuard;
     Split: typeof PageSplit;
     List: typeof PageList;
     Detail: typeof PageDetail;

package/dist/skill/anti-slop.md

@@ -251,6 +251,11 @@ The same for one value in several units — one heading, the fields in a row, th
 | bars of dates drawn by hand, or a DataTable of start / end dates | `Gantt` |
 | a hand-made `<span>` hidden with CSS for screen readers | `<VisuallyHidden>` |
 | a `div` with `overflow: auto` | `ScrollContainer` (`edges`, `scrollbar="hidden"`, `snap`) |
+| `scroll-snap-type` on a strip of cards | `ScrollContainer snap` (`"mandatory"` only where each child fills most of the view) |
+| a flex row of Badges with its own gap | `Badge.Group` |
+| a Switch or a ⋯ button inside a list row, or the row rebuilt as a `div` to hold them | `List.ItemActions` beside the row's element |
+| a heading row (`Typography as="h3"` + buttons) over a group in a Drawer or a Modal | `Drawer.Section label` / `Modal.Section label` with `Drawer.Actions` / `Modal.Actions` |
+| Markdown turned into HTML (`dangerouslySetInnerHTML`, a Markdown library) | `RichText` |
 | an `<img>` with your own radius and loading box | `Thumbnail.Root` / `Avatar.Root` |
 | a lightbox, or a Modal with an `<img>` | `Gallery` (opens `MediaViewer` itself) or `MediaViewer` |
 | a `position: fixed` bottom tab bar | `BottomNav` in `AppShell.Footer` |

package/dist/skill/api-contract.md

@@ -26,13 +26,13 @@ import type { ControlSize, PaletteColor, TextTone, Tone, Variant } from "prime-u
 | Other state | `x` / `defaultX` / `onXChange(x)` | Badge `pressed`; Button `pressed`; ChartFrame `hiddenSeries`; Chat `selected`, `search`; ChatList `search`; ColorPicker `format`; CommandMenu `search`; Composer `recordMode`; DataTable `hiddenColumns`, `page`, `sort`, `selected`, `expanded`, `collapsedGroups`; ExampleFrame `viewport`, `colorScheme`; Gallery `index`; Gantt `scale`; Kanban `columnOrder`; MediaViewer `index`; Message.Media `index`; Select `search`; SmartFilter `search`; VideoNote `playing`, `transcriptExpanded`; VoicePlayer `rate`, `playing`, `transcriptExpanded`; Sidebar `mode`. |
 | Checked | `checked` / `defaultChecked` / `onCheckedChange(checked)` | Checkbox, Dropdown.CheckboxItem, Switch, Thumbnail. |
 | Open | `open` / `defaultOpen` / `onOpenChange(open)` | ColorPresets, CommandMenu, ConfirmDialog, Datepicker, Drawer, Dropdown, Gallery, MediaViewer, Message.Media, Modal, Popover, Select, Sheet, TagSelect, Tooltip, Page.Split, Sidebar, Sidebar.Group, Sidebar.Sub. |
-| Dismiss | `closeOnOutsideClick` (default `true`), `closeOnEscape` (default `true`) | Both on every overlay that opens a layer: the dialogs, the floating panels, the panels of Select, TagSelect, Datepicker and ColorPresets, the off-canvas Sidebar and the reaction bar of a message. `ConfirmDialog` takes both with `closeOnOutsideClick` default `false` (Escape is held while `onConfirm` runs). Tooltip and Notification take neither. A form holds closing with `Modal.Guard` / `Drawer.Guard` / `Sheet.Guard`. |
+| Dismiss | `closeOnOutsideClick` (default `true`), `closeOnEscape` (default `true`) | Both on every overlay that opens a layer: the dialogs, the floating panels, the panels of Select, TagSelect, Datepicker and ColorPresets, the `suggestions` list of Input, the off-canvas Sidebar and the reaction bar of a message. `ConfirmDialog` takes both with `closeOnOutsideClick` default `false` (Escape is held while `onConfirm` runs). Tooltip and Notification take neither. A form holds closing with `Modal.Guard` / `Drawer.Guard` / `Sheet.Guard`. |
 | Selection mode | `multiple` | One vs many (Select, Accordion) — never `type`. `mode` only for structurally different values (Datepicker `single \| range`). |
 | Status words | `selected`, `current`, `pressed` | `current` marks a navigation location (`Sidebar.Item`, `Breadcrumb.Item`) and sets `aria-current`; `pressed` a toggle button. |
 | Flags | `disabled`, `readOnly`, `required`, `optional`, `loading`, `fullWidth` | Same names everywhere. |
 | Focus ring | `focusRing` (default `true`) | Fields only; `false` only where focus is obvious otherwise. |
 | System strings | `labels?: Partial<XLabels>` | aria labels, counters, default texts; Russian defaults; values as `{token}` templates. Visible content goes in children or props. |
-| Structure | `X.Root` + `X.Part` | Only for components with parts. Leaves are single exports: `Typography`, `Kbd`, `Divider`, `Spinner`, `Skeleton`, `Crossfade`, `LinkButton`, `NativeSelect`, `DigitInput`, `Slider`, `TagSelect`, `ColorSwatches`, `CodeBlock`, `ProgressBar`, `ProgressCircle`, `Sparkline`, `Pagination`, `DataTable`, `Gantt`, `Fieldset`, `VisuallyHidden`, `ColorField`, `ExampleFrame`, `VoicePlayer`, `VideoNote`, `ScrollContainer`, `Gallery`, `MediaViewer`. This is the one list; other files link here. A group of roots is `X.Group` (`Radio.Group`, `Avatar.Group`). |
+| Structure | `X.Root` + `X.Part` | Only for components with parts. Leaves are single exports: `Typography`, `Kbd`, `Divider`, `Spinner`, `Skeleton`, `Crossfade`, `LinkButton`, `NativeSelect`, `DigitInput`, `Slider`, `TagSelect`, `ColorSwatches`, `CodeBlock`, `ProgressBar`, `ProgressCircle`, `Sparkline`, `Pagination`, `DataTable`, `Gantt`, `Fieldset`, `VisuallyHidden`, `ColorField`, `ExampleFrame`, `VoicePlayer`, `VideoNote`, `ScrollContainer`, `Gallery`, `MediaViewer`, `RichText`. This is the one list; other files link here. A group of roots is `X.Group` (`Radio.Group`, `Avatar.Group`, `Badge.Group`). |
 | Slots | `X.Trigger`, `X.Close`, `X.Confirm`, `X.Anchor` | Your own button inside, exactly one element child; the slot renders no element and takes no `className` — style the child. A trigger the kit draws itself (`Select.Trigger`, `Accordion.Trigger`) is a real part with `className`. |
 | Icons in parts | `X.Icon`, `X.ItemIcon` | `Button.Icon`, `Input.Icon`, `Sidebar.ItemIcon`, `Dropdown.ItemIcon`… — never an `icon` prop on a component. Only data arrays (`notify()`, `options`) carry `icon: ReactNode`. |
 | DOM state | `data-size`, `data-variant`, `data-tone`, `data-color`, `data-invalid`, `data-disabled`, `data-loading`, `data-state` | Style your wrappers from these, not from class names of kit internals. |
@@ -85,7 +85,7 @@ export function PeriodFilter() {
   resolving. The async events: Input / Textarea `onCommit`, ConfirmDialog `onConfirm`,
   `EmptyPage.RetryButton` and CommandMenu `onRetry`, Button `onConfirm` (`holdToConfirm`), Slider
   `onCommit`, DigitInput `onComplete`, Tabs `onRemove`, Switch `onCheckedChange`, Badge `onRemove`,
-  FileUpload `onValueChange`, TagSelect `onCreate` / `onOptionUpdate` / `onOptionDelete`, DataTable
+  FileUpload and FieldList `onValueChange`, TagSelect `onCreate` / `onOptionUpdate` / `onOptionDelete`, DataTable
   and Dnd `onReorder`, Kanban `onValueChange` / `onColumnOrderChange`, Gantt `onBarChange` /
   `onBarCreate`, Composer `onSend` / `onSendVoice` / `onSendVideoNote`, `Message.Root`
   `onReactionToggle` and `onRetry`, the `onRetry` / `onCancel` of `Message.File`, the
@@ -118,8 +118,11 @@ export function PeriodFilter() {
 - Checkbox, Switch and Radio: [choice controls](#choice-controls) below.
 - `required` → red `*` after the label + native `required`. `optional` → muted «необязательно».
 - Placeholder is an example (`name@company.ru`), never the label.
-- Units and prefixes in affixes are hidden from screen readers — put the meaning into the label or hint
-  too («Бюджет, ₽», «Адрес: prime.app/p/…»).
+- `hintTone` (`success` · `warning` · `danger`) colors the `hint` of a field by the status of its
+  value («Осталось 12 дней» in `warning`); a lone `Hint.Root` takes `tone`. The words carry the
+  status and the color only repeats it; a validation problem is `error`, which replaces the hint.
+- `Input.Affix` and `Input.InlineAffix` describe the input for screen readers (`aria-describedby`),
+  so the label never repeats a unit or a prefix ([a unit lives in one place](ux.md#3-label-economy)).
 - Mark the minority: when most fields are required, mark only the optional ones (`optional`); when most
   are optional, mark the required ones; on a tie mark the required ones. Validate in code either way.
 - Show `error` after the user leaves the field or on submit, not while typing the first character.
@@ -249,7 +252,8 @@ place (a `Banner` for the page; for a region `EmptyPage tone="danger"` — it an
   фильтры»), and the same action keeps the same variant in the header, toolbars and menus. If «Отмена»
   would clash with the action itself («Отменить заказ»), use an unambiguous label («Не отменять»).
 - A control that navigates is a link: `LinkButton href`, `Button.Root asChild` with `<a>` / router
-  `Link`, `Sidebar.Item href` or `asChild`. Never `onClick={() => location.assign(…)}`.
+  `Link`, `Sidebar.Item` / `Breadcrumb.Item` / `List.Item` / `ChatList.Item` `href` or `asChild`. Never
+  `onClick={() => location.assign(…)}`.
 
 ## Destructive actions
 
@@ -291,7 +295,10 @@ export function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 
 Leaving a form with unsaved changes is the same contract: `Modal.Guard` / `Drawer.Guard` inside the
 content with `dirty` (any dismiss asks «Не сохранять изменения?») and `busy` (nothing closes it while
-it saves).
+it saves). A form that is the whole page takes `Page.Guard` (`dirty`, `busy`) inside the page: it
+holds a press on `Sidebar.Item`, `BottomNav.Item` and `Breadcrumb.Item` links — router links
+included — and the browser's own close or reload; never a `beforeunload` or a ConfirmDialog on a
+crumb of your own.
 
 ## Providers and helpers
 

package/dist/skill/cheatsheet.md

@@ -37,11 +37,15 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 - After-upload work (attach the file to a record) runs inside `upload` after the request resolves — `context.id` is the item; a file the user can open is `FileUploadFile.href`, not your own download button beside the row.
 - A choice in a form (SegmentedControl, ButtonGroup) is a field too: `label`, `hint`, `error` on its root — not a `Label` wired by hand.
 - A record card that saves each field: `<Input.Root onCommit={save}>` (save returns a Promise) — not hand-written blur / Enter / Escape handlers or a field disabled while saving.
-- Markdown text outside a chat (an announcement, a task description) is `<Textarea.Root formatting>`: the Composer's toolbar, hotkeys and subset (`**`, `_`, `~~`, `` ` ``, `||spoiler||`, links, `> `) — not a hand-made toolbar over a textarea. Turn it on only where the text is shown with its Markdown.
+- Markdown text outside a chat (an announcement, a task description) is written in `<Textarea.Root formatting>`: the Composer's toolbar, hotkeys and subset (`**`, `_`, `~~`, `` ` ``, `||spoiler||`, links, `> `) — not a hand-made toolbar over a textarea. Turn it on only where the text is shown with its Markdown, and show it with `<RichText>{text}</RichText>` — not `dangerouslySetInnerHTML` or a Markdown library.
+- Free text the team often repeats (a city, a place): `<Input.Root suggestions={CITIES}>` — any text stays allowed; not a `<datalist>` or a Select. A time of day: `<Input.Field type="time" />` — not a Datepicker or two Selects.
+- A status of the value under a field («Осталось 12 дней»): `hint` with `hintTone="warning"`, the words carrying the status — not a coloured text of your own, and never `hintTone="danger"` for a validation error (that is `error`).
+- A unit or a prefix stands in the field's affix (`Input.InlineAffix`, `Input.Affix`) — not in its `label` too: the affix is read with the field.
 - Copy or call next to a value: `Input.CopyButton`, `Input.Action` inside `Input.Wrapper` — not a Button beside the field; a password: `Input.RevealButton`.
 - Records of one shape a person adds and removes (invoice lines, contacts, specs, prices by period): `<FieldList columns={[{ label: "Услуга" }, { label: "Цена", width: "m" }]} value onValueChange getId createItem addLabel renderItem={(item, row) => <>…fields without label…</>} />` — the headings stand once, every field takes its column heading as its label; not a `.map()` of fields with a `label` in every row, not «Позиция 1», «Позиция 2».
 - Small attributes in a row of fields: an icon-only `Select` (`<Select.Trigger><Select.TriggerIcon>…</Select.TriggerIcon></Select.Trigger>`, no `Select.Value`) and a `ColorPresets` swatch in `width: "compact"` columns — not a full-width Select and a ColorField on a line of their own.
 - A base value with overrides (a price and its changes by month): one `FieldList`, the base as the first row pinned by `getLocked` — not a separate field above a list in another geometry.
+- Rows that add up: `FieldList renderTotals={(items) => <>…one node per column…</>}` draws «Итого» under the rows on the same tracks — not a line of text typed under the list, not a DataTable of fields.
 - One value in several units (a deposit in ₽, $, ฿): the fields side by side in one row under one heading, each unit in `Input.InlineAffix` — not a label per field, not the unit in the label and in the field.
 
 ## State
@@ -81,7 +85,9 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 - The app is navigation and the page: everything at the top belongs to the page's `<Page.Root>` — not an app-wide header, a global search or notifications above every page.
 - A work screen (a list, a board, a chat, a record) titles itself in `<Page.TopBar>`: `<Page.Heading>` with `<Page.Title>` + `<Page.Description>` carrying a line of data («128 в работе · 6 ждут оплаты») — not a sentence about the page.
 - The bar holds only its four groups: `<Page.Heading>`, `<Page.Tools aria-label>` (sections, `<SmartFilter.Toolbar />`, the view — in reading order), `<Page.Actions>`, `<Page.Chips>` (`<SmartFilter.Chips />`) — not a hand-made flex row of title, tabs, search and buttons ([the top bar](composition.md#the-top-bar)).
-- A nested record: `<Breadcrumb.Root>` first in `<Page.Heading>`, then `<Page.Title>` with the record's name — the path ends in the title on one line; not a title row under the path, not a breadcrumb in the body.
+- A nested record: `<Breadcrumb.Root>` first in `<Page.Heading>`, then `<Page.Title>` with the record's name — the path ends in the title on one line; not a title row under the path, not a breadcrumb in the body. With a router each crumb is `<Breadcrumb.Item asChild>` around its `Link`.
+- A line of data that loads after the page opens: `<Page.Description loading={!summary}>` from the first render — not a Description mounted when the data arrives, which moves the title.
+- A page that edits a record: `<Page.Guard dirty={changed} busy={saving} />` inside `Page.Root` — the Sidebar, BottomNav and path links ask before the changes are lost; not your own `beforeunload` or a confirm wired to each link.
 - Every button of the page goes into one `<Page.Actions>`, secondary first, the primary last, each with a `<Button.Icon>` beside its label — not buttons split between two places, not a button with only text.
 - A filtered page: `<SmartFilter.Root>` wraps `<Page.Root>` — it draws nothing; not `SmartFilter.Root` inside the bar.
 - No size knob on the title: the bar sizes the heading and gives way by width itself ([the five steps](responsive.md#the-pages-top-bar--pagetopbar)).
@@ -92,9 +98,11 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 - `Card.Root` only for a bounded block with its own title: a KPI tile (`variant="stat-trend"`), a settings panel (`variant="panel"`), side facts — not around a whole section, a form field or a page.
 - Never a `DataTable` inside a Card — the table is already a filled block; a card in a card only sparingly ([the rule](foundations.md#card-in-a-card)).
 - Section without a card: `<Page.Section label="…">` + the content (a link or button beside the heading in `Page.Actions`) — not a hand-made `<section>` + `Typography as="h2"` + own gap.
-- The tiles of a screen (KPI cards, charts, panels): one `<Page.Grid>` with a `<Page.Cell span>` per tile — not a grid per row (the rows would stand 24 apart instead of 16).
+- The tiles of a screen (KPI cards, charts, panels): one `<Page.Grid>` with a `<Page.Cell span>` per tile — not a grid per row (the rows would stand 24 apart instead of 16). A chart beside a panel is an 8 and a 4 written next to each other — the grid pairs them at mid widths; not 6 + 6 to dodge a hole.
+- A KPI tile whose figure loads: `<Card.Root variant="stat-trend" loading>` with its parts mounted — not Skeletons placed in `Card.Value` by hand.
+- Several tags or labels as one value (a client's tags): `<Badge.Group>` of `Badge.Root` — not a flex row with its own gap.
 - Depth from fill, not lines: no borders around blocks; `<Divider />` only inside a block.
-- Every scroll region is a `ScrollContainer` — never `overflow: auto` on a `div`: its hidden edges fade by themselves (`edges="shadow"` on a filled surface, `"none"` only for a page column), `scrollbar="hidden"` on strips, `snap` on strips of cards, `lock` to hold a list still, `anchor="end"` for a log. Kit components already scroll through it; do not wrap them again.
+- Every scroll region is a `ScrollContainer` — never `overflow: auto` on a `div`: its hidden edges fade by themselves (`edges="shadow"` on a filled surface, `"none"` only for a page column), `scrollbar="hidden"` on strips, `snap` on strips of cards (it settles once the scroll ends; never `scroll-snap-type`), `lock` to hold a list still, `anchor="end"` for a log. Kit components already scroll through it; do not wrap them again.
 - Tabs are a bar, not a container: `Tabs.Root` stands in the host's padding and the panel content goes straight into `Tabs.Panel` — never a Card or a padded `div` around the tabs or inside a panel. In a Modal / Drawer, `Tabs.Root` wraps `X.Header` + `X.Body` and `Tabs.List` goes last into the header — not a tab strip at the top of the body.
 
 ## Tables
@@ -108,18 +116,23 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 - A chart with axes or several series: `<ChartFrame.Root series rows state>` around the library (or your SVG) with `ChartFrame.Plot renderPlot` and `Legend`; `rows` is the data table screen readers get — not a hand-made Card with a grey box while loading and a legend of colored dots.
 - A tooltip on your own SVG chart: `<ChartFrame.Tooltip point={{ x, y }} items>` with the pointer in plot coordinates — not a `foreignObject` or a div placed and clamped by hand; it flips only when out of room.
 - Amounts, counts and dates are `numeric` columns; statuses are `Badge.Root tone` from one status → tone map.
+- A column header that needs a word more («Маржа»): the column's `description` (an info glyph with a tooltip) — not the explanation squeezed into the header, not your own icon and Tooltip in `header`.
+- A list row with controls of its own (a Switch, a ⋯ menu): `List.ItemActions` inside `List.Item`, a stage colour as `Badge.Dot color` in `List.ItemIcon` — not a control inside the row's button, not a row rebuilt as a `div`.
 - Rows people order by hand: `onReorder(id, beforeId)` (apply it with `moveBefore`, return the save's Promise) — not a Dnd list rebuilt next to the table.
 - A short list of records people order by hand (stages, priorities) is `<List.Root onReorder>` with `List.Item value` — not up / down buttons or a hand-made `Dnd.Sortable`.
 - Groups that fold: pass `defaultCollapsedGroups={[]}` (or the controlled `collapsedGroups` + `onCollapsedGroupsChange`) — not your own button in `renderGroupHeader` or filtering `rows`. One heatmap over several columns: the same `scale: { min, max }` on each.
 - A trend in a table row is `<Sparkline layout="compact">` in the column's `cell` (a column `width`, series built once, not inline, the same `min` / `max` on every row when rows compare by size); the number itself goes in its own column. A missing day is `value: null`, never `0`.
 - Properties of one record: `<DescriptionList.Root>` of `DescriptionList.Item` — not a hand-made grid of label / value text, not a one-row DataTable.
 - Who is busy when, a plan with dates: `Gantt` with `onBarChange` / `onBarCreate` — not bars drawn by hand or a DataTable of start and end dates. Statuses moved by hand: `Kanban` — `plain` (default, a header plate) or `line` (a header over a line) for a board that is the page's main region, `variant="well"` only when columns must read as bounded queues (WIP limits, sparse columns); never a Card or a filled box around a column.
+- A stage's figures go in `renderColumnMeta` (an array is a line per entry: «12 сделок · 4,8 млн ₽», «Средний чек 400 000 ₽») — not in the column `title`.
 - Open a board card with `Kanban.Root onItemOpen` (click, Enter, Space, never after a drag) or `getItemHref`; a Gantt row with `onRowClick` / `getRowHref` (the DataTable contract), a bar with `onItemOpen`; more facts in a bar tooltip with `renderBarTooltip` (it adds lines under the dates). A legend of hues is a row of `Badge.Root color` + `Badge.Dot` in the host's `toolbar`, the category also in text. Hour slots (bookings, appointments) are not Gantt — its unit is a calendar day.
 
 ## Chat
 
 - A conversation is `Chat`: `<Chat.Root typing selected search>` with `Chat.Header` (avatar, `Chat.Title`, `Chat.Description`, `Chat.Actions` + `Chat.SearchButton`), `Chat.Search`, `Chat.Pinned`, `<Chat.Messages items getKey getAuthor getDate renderMessage>` and `<Chat.Footer><Composer.Root /></Chat.Footer>` — not a header, a ScrollContainer and a list of your own, not Cards or a Timeline styled as bubbles, not a Textarea with a send button. A list without the rest is `Chat.Root` with `Chat.Messages` alone; one message on its own is `Message.Root`.
-- The list of conversations is `ChatList` — not a `List` or Cards with your own preview, unread counts and «печатает…». Back button and avatar in the chat header are plain children of `Chat.Header`: it lays them out side by side.
+- The list of conversations is `ChatList` — not a `List` or Cards with your own preview, unread counts and «печатает…». Back button and avatar in the chat header are plain children of `Chat.Header`: it lays them out side by side. A dialog with its own route is `<ChatList.Item asChild>` around the router `Link`.
+- Times in the operator's zone, not the browser's: `timeZone="Europe/Moscow"` on `Chat.Messages`, `ChatList.Root` and a lone `Message.Root` — not dates shifted by hand.
+- A sticker is `Message.Sticker` (your Lottie or video player inside it); a message shown outside a chat (a bot's welcome message in its settings) is `<Message.Root preview>` — not a screenshot or a bubble drawn again.
 - A dialog loading is `<Chat.Messages loading>` (bubble skeletons that cross-fade into the list) — not a Spinner or grey boxes. A bot's buttons under a message are `Message.Actions` rows of `Button.Root variant="soft" tone="neutral"` (`asChild` for links), never buttons inside `Message.Text`.
 - `renderMessage` returns a `Message.Root` (its `value` and `position` are set for you) or a `Chat.Service`; an inline function is fine: an item renders again only when it or its place changes, so a row shows what its item holds, and another message (a reply's original) comes from `entry.find(key)`. Dates, runs and the unread band (`unread={key}`) come from the list.
 - A group chat is `<Chat.Messages group>`: put `Message.Author` (`color={hueOf(user.id)}`, `tag`, `Message.AuthorIcon` for a crown) and `Message.Avatar` on every message — the list shows the header on the first of a run and the avatar on the last; a direct chat shows neither.
@@ -140,12 +153,13 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 
 - Blocking decision or ≤ 4 fields → `Modal` (`<Modal.Content size="s">` for a confirm); long form, filters, details → `Drawer`; a short task that ends by itself (a date, an action, a note) → `Sheet`; small panel at a control → `Popover`; list of actions → `Dropdown`; a field value → `Select`; a name for an icon button → `Tooltip`; ⌘K → `CommandMenu`; a photo, a scan or a video full screen from its thumbnail → `MediaViewer` (an album in a grid is `Gallery`, which opens it for you; a standalone viewer keeps `open` and `index` in two states) — not a Modal with an `<img>`.
 - A record's drawer or modal shows its person or object as `Drawer.Icon` / `Modal.Icon` around `Avatar.Root` / `Thumbnail.Root`. A confirm that asks for input (a reason) is a `Modal size="s"` with the field, `Modal.Confirm` and `Modal.Guard busy` — `ConfirmDialog` is a question only.
+- A titled group in a dialog's body (contacts, deals, history): `<Drawer.Section label="Контакты">` (`Modal.Section`), its button in `Drawer.Actions` inside it — not a `Typography as="h3"` row with buttons of your own.
 - Never a hand-made `div` backdrop, dialog, menu or tooltip.
 - Every Modal and Drawer has its `Header` (title, ×); `Body` (content, scrolls) and `Footer` (actions) are there when it has content and actions. Actions always go into the `Footer`: details `<Drawer.Footer><Drawer.Close><Button.Root variant="outline" tone="neutral">Закрыть</Button.Root></Drawer.Close></Drawer.Footer>`, plus the main action last; a form: «Отмена» + submit — not Save at the bottom of the body. A `Sheet` (from the bottom edge) is the opposite: no footer by default — a pick or a swipe ends it — and its header is optional: keep it when the content needs a title, drop it (× and hairline go too) when the content speaks for itself, with `aria-label` on `Sheet.Content`. Never `Drawer.Content side="bottom"`.
 - Content inside a Drawer, a Sheet or a Card is the host's own: a calendar is `Datepicker.Panel` straight in the body, across its width — no card, no padded box around it.
 - A destructive confirm is `<ConfirmDialog.Root title description confirmLabel onConfirm={remove}>` with a `ConfirmDialog.Trigger` — not a Modal assembled as a confirm with your own pending state; a reversible delete offers «Отменить» in the notification instead.
 - Overlays close smoothly only if they stay mounted: render the `Root` always and drive visibility with `open` alone — never `{open && <Drawer.Root>}`, never a changing `key` on the Root. The kit keeps the last content on screen while the exit plays.
-- Placement of a menu, popover, select or picker: leave the defaults — `side="bottom"`, `align="auto"`: it opens below the trigger, lines up with the trigger edge that has the room (a «⋯» at the end of a row grows toward the start) and flips to the top by itself. Never write `side` or `align` to restate that; set `align` only when the panel must line up with one edge of a block whatever room there is.
+- Placement of a menu, popover, select or picker: leave the defaults — `side="bottom"`, `align="auto"`: it opens below the trigger, lines up with the trigger edge that has the room (a «⋯» at the end of a row grows toward the start) and flips to the top by itself. Never write `side` or `align` to restate that; set `align` only when the panel must line up with one edge of a block whatever room there is. A Popover under a wide anchor that must never be narrower than it: `<Popover.Content width="min-trigger">`.
 - While a request runs: `<Modal.Guard busy={saving} />` inside the content (`Drawer.Guard`, `Sheet.Guard` alike) — Escape, a press outside, × and `Close` are held, × and `Close` disabled; add `dirty` to ask before unsaved changes are lost. Not `closeOnEscape={false}` or `showClose={false}` by hand.
 
 ## Motion — it comes with the components
@@ -171,7 +185,8 @@ State change is continuous in the whole kit: every region that changes what it s
 - Refreshing data already on screen: keep it, set `aria-busy` — not back to a skeleton on every refetch.
 - Table states in place: `loading` (+ `loadingRows`), `empty`, `loadError` on `DataTable` — the head and toolbar stay.
 - First run of a page or region: `EmptyPage.Root` + `EmptyPage.Icon` + `EmptyPage.Title` + `EmptyPage.Description` + `EmptyPage.Actions` with one action — not «Здесь пока ничего нет».
-- Page-level persistent problem: `<Banner.Root tone="danger">` first in `Page.Body`; the result of an action: `useNotifications().notify({ tone, title })`.
+- Page-level persistent problem: `<Banner.Root tone="danger">` first in `Page.Body`; the result of an action: `useNotifications().notify({ tone, title })` — a toast never closes the Drawer or Modal it was raised from.
+- A refused sign-in: `invalid` on the fields it concerns and the reason in a `<VisuallyHidden live="assertive">` mounted from the start — not a Banner in a `LoginForm`.
 
 ## Sidebar
 

package/dist/skill/checklist.md

@@ -20,6 +20,7 @@ checks.
 - [ ] Buttons say the verb and the object, errors say how to fix it, empty states offer the next step ([words](ux.md#4-words)).
 - [ ] Money, numbers and dates go through `Intl` with `ru-RU`, in Russian typography ([words](ux.md#4-words)).
 - [ ] The friction of every action matches the cost of a mistake ([friction](ux.md#5-friction-matches-the-cost-of-a-mistake)).
+- [ ] A form in a dialog holds its dismiss with `Modal.Guard` / `Drawer.Guard`, a form that is the page with `Page.Guard` ([friction](ux.md#5-friction-matches-the-cost-of-a-mistake)).
 - [ ] A disabled control says why when the reason is off screen; an action without permission is hidden ([nothing to guess](ux.md#6-nothing-to-guess)).
 - [ ] 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)).
@@ -66,6 +67,8 @@ checks.
 - [ ] Fields show `hint` and `error`; only the minority is marked `required` or `optional` ([forms](api-contract.md#forms)).
 - [ ] Every data block has its loading, empty and error states ([feedback](composition.md#9-feedback)).
 - [ ] Every region swaps its states through `Crossfade`, loading is a `Skeleton` of the data ([continuity](foundations.md#11-state-changes-are-continuous)).
+- [ ] A `Page.Description` that waits for data stays mounted with `loading`, so the title in the bar never jumps ([screen states](composition.md#screen-states)).
+- [ ] A KPI tile that waits for its figure is `Card.Root loading`, its parts mounted ([inside a category](choosing.md#2-inside-a-category)).
 - [ ] While a form saves, its submit is `loading` and its fields sit in a `Fieldset disabled` ([forms](api-contract.md#forms)).
 - [ ] A save that stays says «Сохранено» on its button, one that goes away notifies, a failure always shows ([feedback](composition.md#9-feedback)).
 - [ ] Overlays stay mounted and are driven by `open` only ([motion mistakes](motion.md#6-mistakes)).
@@ -82,4 +85,6 @@ checks.
 - [ ] Every action is reachable by Tab in reading order and works with Enter / Space ([interaction](responsive.md#interaction-and-accessibility)).
 - [ ] Every field has a label (visible, or `aria-label` for a toolbar search) ([forms](api-contract.md#forms)).
 - [ ] Meaning is never colour alone ([tone and color](foundations.md#6-tone-and-color)).
+- [ ] A toned hint says its status in words; a validation problem is `error`, never a `danger` hint ([forms](api-contract.md#forms)).
+- [ ] A refused sign-in marks its fields `invalid` and says why in a hidden live region, with no Banner ([feedback](composition.md#9-feedback)).
 - [ ] Custom `labels` replace the default Russian strings where they do not fit ([system strings](api-contract.md#shared-vocabulary-exported-types)).