prime-ui-kit 0.16.0 → 0.18.0

package/dist/skill/reference/components/chat-list/examples/router.tsx

@@ -0,0 +1,63 @@
+/** Router links as the dialogs, the times in the zone of the operator's profile; render it inside a router — `asChild`, `timeZone`. */
+import { Avatar, Card, ChatList, hueOf } from "prime-ui-kit";
+import { Link } from "react-router-dom";
+
+import styles from "./examples.module.css";
+
+const NOW = new Date(Date.UTC(2026, 9, 15, 4, 0));
+const utc = (day: number, hour: number, minute: number) =>
+  new Date(Date.UTC(2026, 9, day, hour, minute));
+
+const DIALOGS = [
+  {
+    id: "c-311",
+    name: "ООО «Вектор»",
+    initials: "ВК",
+    preview: "Машина на месте, начинаем выгрузку",
+    at: utc(15, 0, 10),
+    unread: 1,
+  },
+  {
+    id: "c-308",
+    name: "ООО «Гранит»",
+    initials: "ГР",
+    preview: "Счёт № 2041 оплачен",
+    at: utc(14, 14, 30),
+    unread: 0,
+  },
+  {
+    id: "c-297",
+    name: "ИП Козлов",
+    initials: "ИК",
+    preview: "Пришлите, пожалуйста, акт сверки",
+    at: utc(12, 6, 15),
+    unread: 0,
+  },
+];
+
+export default function ChatListRouterExample() {
+  return (
+    <Card.Root className={styles.short}>
+      <ChatList.Root
+        items={DIALOGS}
+        getKey={(item) => item.id}
+        defaultValue="c-311"
+        now={NOW}
+        timeZone="Asia/Vladivostok"
+        renderItem={(item) => (
+          <ChatList.Item asChild time={item.at} unread={item.unread}>
+            <Link to={`/chats/${item.id}`}>
+              <ChatList.ItemIcon>
+                <Avatar.Root color={hueOf(item.id)}>
+                  <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                </Avatar.Root>
+              </ChatList.ItemIcon>
+              <ChatList.ItemText>{item.name}</ChatList.ItemText>
+              <ChatList.ItemDescription>{item.preview}</ChatList.ItemDescription>
+            </Link>
+          </ChatList.Item>
+        )}
+      />
+    </Card.Root>
+  );
+}

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

@@ -50,6 +50,7 @@ Checkbox.Indicator     the box alone, no input — a mark inside option / menu r
 | `optional` | `boolean` | `false` | Muted `labels.optional` after the label text; the field may stay off. |
 | `labels` | `Partial<CheckboxLabels>` | — | Built-in strings, see Labels. |
 | `hint` | `ReactNode` | — | Help text under the label text. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger ring on the unchecked box and `aria-invalid`. A non-empty `error` implies it. |
 | `disabled` | `boolean` | `false` | Disabled fill, dimmed label and hint, no toggling. |

package/dist/skill/reference/components/checkbox/examples/examples.module.css

@@ -19,12 +19,13 @@
   width: min(100%, var(--prime-layout-form-width-s));
 }
 
-/* indicator.tsx: selectable tiles in a fluid grid. */
+/* indicator.tsx: selectable tiles in a fluid grid; a column holds a whole module name (a tile
+   label stays on one line), so a narrow column stacks the tiles instead of truncating them. */
 .tiles {
   display: grid;
   grid-template-columns: repeat(
       auto-fit,
-      minmax(min(100%, var(--prime-layout-tile-min-width)), 1fr)
+      minmax(min(100%, calc(var(--prime-layout-tile-min-width) * 1.5)), 1fr)
     );
   gap: var(--prime-space-4);
   width: 100%;

package/dist/skill/reference/components/code-block/COMPONENT.md

@@ -69,7 +69,7 @@ Syntax tokens: keywords purple (weight 500), strings teal, numbers orange, JSX t
 ## Layout & spacing
 - `max-width: 100%`; the block takes the column width and long lines scroll horizontally inside it (`white-space: pre`, tab size 2), with the kit's thin scrollbar.
 - Heading / text → code block: space step 2–4 (8–16px).
-- Constrain the column (PageContent `maxWidth="readable"` for docs), not the block.
+- Constrain the column (`Page.Root maxWidth="readable"` for docs), not the block.
 
 ## Accessibility
 

package/dist/skill/reference/components/code-block/examples/color-scheme.tsx

@@ -1,16 +1,14 @@
 /** A block fixed to one scheme looks the same in both page themes — `colorScheme`. */
 import { CodeBlock } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SAMPLE = `const retries = 3; // повторы при ошибке сети
 export const isReady = (status: "idle" | "busy") => status === "idle";`;
 
 export default function CodeBlockColorSchemeExample() {
   return (
-    <div className={styles.grid}>
+    <>
       <CodeBlock code={SAMPLE} colorScheme="light" aria-label="Светлая схема" />
       <CodeBlock code={SAMPLE} colorScheme="dark" aria-label="Тёмная схема" />
-    </div>
+    </>
   );
 }

package/dist/skill/reference/components/code-block/examples/examples.module.css

@@ -6,17 +6,6 @@
   min-width: 0;
 }
 
-/* color-scheme.tsx: two blocks side by side, stacked when narrow. */
-.grid {
-  display: grid;
-  grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, var(--prime-layout-tile-min-width)), 1fr)
-    );
-  gap: var(--prime-space-4);
-  width: 100%;
-}
-
 /* narrow.tsx: a column narrower than the line. */
 .narrow {
   width: min(100%, var(--prime-layout-form-width-s));

package/dist/skill/reference/components/color-field/COMPONENT.md

@@ -12,7 +12,7 @@
 
 ## When not to use
 - The color comes from a short fixed palette and the choice should be visible at once → use [ColorSwatches](../color-swatches/COMPONENT.md).
-- A compact color next to a field or in a dense list row → use [ColorPresets](../color-picker/COMPONENT.md) (square trigger + palette).
+- A compact color next to a field or in a dense list row → use [ColorPresets](../color-picker/COMPONENT.md) (square trigger + palette; `allowCustom` adds a hex field for any other color).
 - The picker panel itself is the screen (a design tool, an inline editor) → compose [ColorPicker](../color-picker/COMPONENT.md) parts.
 - A plain text field for a hex code → use [Input](../input/COMPONENT.md).
 
@@ -55,6 +55,7 @@ ColorField                       field frame: label · field button · hint | er
 | `required` | `boolean` | `false` | Red `*` after the label; the field button is described by `labels.required` (a button takes no `aria-required`). |
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | — | Danger ring and `aria-invalid` without a message. A non-empty `error` implies it. |
 | `disabled` | `boolean` | `false` | Disables the field: it shows the color and does not open. |

package/dist/skill/reference/components/color-picker/COMPONENT.md

@@ -7,7 +7,7 @@
 
 ## When to use
 - `ColorPicker` — any color is allowed and the picker parts are laid out by hand: an inline panel, a design tool, a hex field with a custom trigger.
-- `ColorPresets` — a color from a fixed palette with an optional «no color»: label, project or calendar colors, one trigger per row.
+- `ColorPresets` — a color from a fixed palette with an optional «no color»: label, project or calendar colors, one trigger per row. With `allowCustom` the palette is a shortcut, not a limit: any hex is typed under it (a spec color on a site, a brand color in a dense list row).
 - `parseColor` — turning a CSS string into a `Color` for a controlled `ColorPicker`.
 
 ## When not to use
@@ -31,7 +31,8 @@ in `prime-ui-kit/bundle.css`. `ColorPresets` stays in the main entry and needs n
 ```
 ColorPicker.Root                 shared Color + value format (no DOM)
 ├─ ColorPicker.HexInput          kit Input bound to the hex of the current color
-├─ ColorPicker.TriggerSwatch     square of the current color for a trigger button
+│  └─ ColorPicker.SwatchButton   end segment of the field box: the current color, opens a panel
+├─ ColorPicker.TriggerSwatch     square of the current color for your own trigger button
 └─ ColorPicker.Panel             vertical stack, optional raised surface
    ├─ ColorPicker.FormatSelect   kit Select: HSL / RGB / Hex
    ├─ ColorPicker.Area           2D area (4:3)
@@ -48,6 +49,7 @@ ColorPresets.Root                value, open, presets (no DOM)
 ├─ ColorPresets.Trigger          slot around one element
 │  └─ ColorPresets.SwatchButton  square swatch button (or your Button with ColorPresets.Swatch)
 └─ ColorPresets.Content          popover with the swatch grid (listbox)
+   └─ Input                      hex field with the typed color's chip (`allowCustom`)
 ```
 Helpers: `parseColor(value)` (throws on invalid input; back to text with `color.toString("hex" | "hexa" | "css")`), `COLOR_PRESETS` (16 colors: step 500 and step 700 of eight hues), types `ColorPickerColorValue`, `ColorValueFormat`, `ColorPreset`.
 
@@ -85,10 +87,19 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 |---|---|---|---|
 | `label` | `ReactNode` | — | Field label; defaults to `labels.hex`. |
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; marks the field invalid. |
 | `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring of the fields (`data-focus-ring="false"`); focus, keyboard and ARIA stay. |
+| `children` | `ReactNode` | — | End segments of the field box after the value: `ColorPicker.SwatchButton` (in a `Popover.Trigger`), so the hex and its swatch read as one field. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange">` | — | `className`, `data-*` and the other attributes of the field frame `<div>` (field-root rule: `className`, `ref` and the rest → frame, `id` → control). |
 
+### ColorPicker.SwatchButton
+`ref` → `HTMLButtonElement`. The current color as a button segment at the end of `HexInput`: full field height, named `labels.palette`, with a tooltip. Wrap it in `Popover.Trigger` to open the panel.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" \| "children">` | — | `className`, `disabled`, `onClick` and the other attributes of the `<button>`. |
+
 ### ColorPicker.TriggerSwatch
 `ref` → `HTMLSpanElement`. A square of the current color for a trigger button (`aria-hidden`); follows the host icon size, e.g. inside `Button.Icon`.
 
@@ -155,7 +166,7 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `presets` | `readonly ColorPreset[]` | `COLOR_PRESETS` | Swatches `{ value, label }`; the label names the swatch. |
-| `label · hint · error · invalid · required · optional · disabled · size · id · labels · aria-label · aria-labelledby · aria-describedby` | `ColorSwatchesProps` | — | As on `ColorSwatches`. |
+| `label · hint · hintTone · error · invalid · required · optional · disabled · size · id · labels · aria-label · aria-labelledby · aria-describedby` | `ColorSwatchesProps` | — | As on `ColorSwatches`. |
 | `…rest` | `Omit<ColorSwatchesProps, "value" \| "defaultValue" \| "onValueChange" \| "allowEmpty" \| "name">` | — | `className` and the other attributes of the field frame. |
 
 ### ColorPicker.EyeDropperButton
@@ -185,6 +196,7 @@ No DOM and no ref, except a field frame in a FieldList cell (the column heading
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the trigger, the swatches and the panel. Without it the tier of its host, else `m`. |
 | `disabled` | `boolean` | `false` | The trigger is disabled and does not open the panel. A disabled `Fieldset` around it sets it too. |
 | `allowEmpty` | `boolean` | `false` | Adds the «no color» swatch after the presets (value `null`). |
+| `allowCustom` | `boolean` | `false` | Any color beyond the palette: a hex field under the swatches (`labels.custom`) shows the typed color, Enter picks it as `#rrggbb`; invalid text gets `labels.customInvalid`. |
 | `closeOnSelect` | `boolean` | `true` | Close the panel after a pick (focus returns to the trigger). |
 | `labels` | `Partial<ColorPresetsLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — (required) | `ColorPresets.Trigger` and `ColorPresets.Content`. |
@@ -245,12 +257,13 @@ No `variant` / `tone` / `color`.
 | `l` | 40px, 28px swatches | spacious forms | |
 | `xl` | 48px, 32px swatches | touch-first screens | |
 
-**Sizes:** `ColorPresets.SwatchButton` is a square of the control height, so it lines up with an Input of the same size; HexInput + a square soft `Button.Root` of the same `size` with `TriggerSwatch` inside `Button.Icon` match too. Area, sliders and the channel strip have no size axis (always tier `m`).
+**Sizes:** `ColorPresets.SwatchButton` is a square of the control height, so it lines up with an Input of the same size; `ColorPicker.SwatchButton` is a segment inside HexInput, so it takes the field's tier with it. Area, sliders and the channel strip have no size axis (always tier `m`).
 
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `allowEmpty` (ColorPresets) | checkerboard «Без цвета» swatch at the end | the color is optional | `false` |
+| `allowCustom` (ColorPresets) | a «Свой цвет» hex field under the swatches, its chip showing the typed color | any color is valid, the palette only speeds the common ones | `false` |
 | `closeOnSelect={false}` (ColorPresets) | panel stays open after a pick | trying several colors in a row | `true` |
 | `closeOnOutsideClick={false}` (ColorPresets) | a press beside the panel keeps it open | comparing presets with the page | `true` |
 | `closeOnEscape={false}` (ColorPresets) | Escape leaves the panel open | the panel closes only by a pick or the trigger | `true` |
@@ -271,13 +284,14 @@ No `variant` / `tone` / `color`.
 | eyedropper unsupported | no `window.EyeDropper` | button `disabled`, `aria-hidden` |
 | selected swatch | the color | `data-state="checked"`; a check mark that contrasts with the color draws in — no ring, the check is the selection |
 | ColorPresets open | `open` / click / ArrowDown · ArrowUp on the trigger | popover `data-state`; focus on the selected swatch |
+| ColorPresets custom color | `allowCustom` + a value that is no preset, or Enter in the hex field | no swatch is checked; the hex field holds the value; the trigger is named «`labels.trigger`: #rrggbb»; invalid text on Enter shows `labels.customInvalid` as the field's error (the error drops in, the field shakes once) |
 | ColorPresets empty | value `null` | the trigger shows the checkerboard fill and is named «`labels.trigger`: `labels.empty`» |
 
 There is no `disabled` on `ColorPicker.Root` — disable parts individually. Controlled: `value` + `onValueChange` (both components), `open` + `onOpenChange` (ColorPresets). Uncontrolled: `defaultValue`, `defaultOpen`.
 
 ## Layout & spacing
 - Panel width comes from the layout: a popover or a column wide enough for the area and four channel fields.
-- Field + trigger row: a small gap, `align-items: flex-end` so the trigger aligns with the field box under a label.
+- Hex field + palette trigger: `ColorPicker.SwatchButton` as a child of `HexInput` — one field box, the swatch a full-height segment at its end; no row of your own.
 - Panel parts gap: 12px (`--prime-space-3`) from `ColorPicker.Panel`.
 - ColorPresets.Content `align="auto"`: a trigger near the end of the screen lines up the panel's end edge and the panel grows toward the start, and the other way near the start; a fixed `align` still flips at the screen edge.
 - ColorPresets grid: one row for up to 8 presets (+ «no color»), else rows of 8 (`columns` overrides); a panel narrower than the row wraps the swatches into balanced rows (16 → 8 + 8, never 14 + 2). On a coarse pointer every swatch grows to the 44 px touch target and the grid wraps into more rows, so it still fits a 320px panel; the arrow keys walk the rows on screen.
@@ -292,15 +306,15 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 | `ArrowLeft` · `ArrowRight` · `ArrowUp` · `ArrowDown` | Move the area thumb or a slider; in the ColorPresets grid, move between swatches. |
 | `PageUp` · `PageDown` | Larger steps on the area and the sliders. |
 | `Home` · `End` | Slider ends; the first / last swatch in the ColorPresets grid. |
-| `Enter` · `Space` | Commit a field; pick the focused preset swatch and close. |
-| `Tab` | Moves through the parts; inside the ColorPresets grid returns to the trigger and closes. |
+| `Enter` · `Space` | Commit a field; pick the focused preset swatch and close. In the ColorPresets hex field (`allowCustom`) Enter picks the typed color. |
+| `Tab` | Moves through the parts; inside the ColorPresets grid returns to the trigger and closes. With `allowCustom` Tab goes from the grid to the hex field; past it the panel closes and focus goes on from the trigger. |
 | `Escape` | Closes the ColorPresets panel. |
 
 ### ARIA
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 - Area and sliders are React Aria primitives with their own `role="slider"` names.
-- `TriggerSwatch` and `ColorPresets.Swatch` are `aria-hidden` — give the trigger button an `aria-label` (`ColorPresets.Trigger` names its element «`labels.trigger`: <color name>» unless the element has its own `aria-label`).
+- `SwatchButton` is a button named `labels.palette` with a tooltip. `TriggerSwatch` and `ColorPresets.Swatch` are `aria-hidden` — give the trigger button an `aria-label` (`ColorPresets.Trigger` names its element «`labels.trigger`: <color name>» unless the element has its own `aria-label`).
 - `ColorPicker.Swatches` is a `role="radiogroup"` (ColorSwatches): name it with `label` or `aria-label`.
 - The ColorPresets grid is `role="listbox"` with `role="option"` swatches (roving tabindex), named by the Content `label` or `labels.list`.
 - Channel fields are named by `labels` (`hue`, `red`…); HexInput by its label (`labels.hex` by default).
@@ -315,6 +329,7 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 | `format` | `"Формат значений цвета"` | Name of `ColorPicker.FormatSelect`. |
 | `eyeDropper` | `"Пипетка"` | Name of `ColorPicker.EyeDropperButton`. |
 | `hex` | `"Hex"` | Hex field of `ChannelStrip` and the default `HexInput` label. |
+| `palette` | `"Открыть палитру"` | Name and tooltip of `ColorPicker.SwatchButton`. |
 | `hue` | `"Оттенок, градусы"` | Hue channel field. |
 | `saturation` | `"Насыщенность, проценты"` | Saturation channel field. |
 | `lightness` | `"Яркость, проценты"` | Lightness channel field. |
@@ -345,23 +360,27 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 | `trigger` | `"Цвет"` | ColorPresets trigger name prefix: «<trigger>: <color name>»; in a FieldList cell the column heading. |
 | `list` | `"Цвета"` | ColorPresets swatch list name when `Content` has no `label`. |
 | `empty` | `"Без цвета"` | ColorPresets «no color» swatch and the trigger name for an empty value. |
+| `custom` | `"Свой цвет"` | Label of the ColorPresets hex field (`allowCustom`). |
+| `customInvalid` | `"Введите цвет в формате #RRGGBB"` | Error of the ColorPresets hex field when Enter finds no hex color. |
 
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A color field: a hex value and a swatch button that opens the picker panel — `ColorPicker.HexInput`, `ColorPicker.TriggerSwatch`. |
-| [sizes.tsx](examples/sizes.tsx) | Every tier of the picker: the hex field and a swatch button inside take it from the root — `size`. |
+| [overview.tsx](examples/overview.tsx) | A color field: a hex value and a swatch segment at its end that opens the picker panel — `ColorPicker.HexInput`, `ColorPicker.SwatchButton`. |
+| [sizes.tsx](examples/sizes.tsx) | Every tier of the picker: the hex field and its swatch segment take it from the root — `size`. |
 | [states.tsx](examples/states.tsx) | A disabled area, hue slider and preset trigger keep showing the color but take no input — `disabled`. |
 | [validation.tsx](examples/validation.tsx) | A button color checked live: a too light color shakes in an error that leaves once the color is darker; a hint under the other field, invalid text reverts on blur — `hint`, `error`. |
 | [panel.tsx](examples/panel.tsx) | The full raised panel and its part order: format, area, hue and alpha sliders, channels, brand swatches — `ColorPicker.Panel`, `surface`, `ColorPicker.Swatches`. |
 | [formats.tsx](examples/formats.tsx) | The channel strip in each value format; three pickers edit one color — `defaultFormat`, `ColorPicker.ChannelStrip`. |
 | [presets.tsx](examples/presets.tsx) | A quick color from the palette: a square trigger with «no color» and a Button trigger whose grid of four columns stays open after a pick — `ColorPresets`, `allowEmpty`, `ColorPresets.Trigger`, `columns`, `closeOnSelect`. |
+| [presets-custom.tsx](examples/presets-custom.tsx) | A spec's color on the site: the brand palette one click away and any hex typed under it — `ColorPresets`, `allowCustom`. |
 | [presets-sizes.tsx](examples/presets-sizes.tsx) | The preset trigger in every size, a square of the control height next to an input of the same tier — `ColorPresets`, `size`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the color and its format: brand swatches and the channels edit it, the format stays as picked, a button resets both — `value`, `onValueChange`, `format`, `onFormatChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent opens the preset palette from its own button and keeps the chosen color — `open`, `onOpenChange`, `value`, `onValueChange`. |
 | [in-form.tsx](examples/in-form.tsx) | Theme settings: the color goes with the form, a too light color shakes in an error on save that leaves once the color changes — `value`, `error`. |
 
 ## Mistakes
+- A ColorPresets palette padded with dozens of colors so that «any» color fits, or a ColorField beside it for the rest → `allowCustom`: the palette stays short, any hex is typed under it.
 - Trigger in one `ColorPicker.Root` and panel in another → they will not share the color; wrap both in one Root.
 - `isDisabled` on Area / Slider → use `disabled`.
 - `onChange` on `ColorPicker.Root` → use `onValueChange`.
@@ -369,8 +388,9 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 - `surface="raised"` inside a Popover → use the default `none`.
 - Expecting `ColorPresets` to return a `Color` → it returns the preset string (or `null`).
 - `<ColorPresets.Trigger onKeyDown={…}>` or `className` on the Trigger → it is a slot with no props of its own; put them on the child element.
+- A hex field and a separate swatch `Button` side by side in your own row → put `ColorPicker.SwatchButton` inside `HexInput`.
 - `<ColorPresets.Trigger />` with no child → put `ColorPresets.SwatchButton` (or your Button) inside it.
 
 ## Related
-- **Built from:** [Input](../input/COMPONENT.md) (`HexInput`), [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md) (the `HexInput` label, hint and error), [Select](../select/COMPONENT.md) (`FormatSelect`), [Button](../button/COMPONENT.md) (`EyeDropperButton`), [ColorSwatches](../color-swatches/COMPONENT.md) (`Swatches`), [Popover](../popover/COMPONENT.md) (`ColorPresets.Root`, `ColorPresets.Content`), `Icon` (pipette), [VisuallyHidden](../visually-hidden/COMPONENT.md)
+- **Built from:** [Input](../input/COMPONENT.md) (`HexInput`; its field action segment for `SwatchButton`; the hex field of `ColorPresets allowCustom`), [Tooltip](../tooltip/COMPONENT.md) (`SwatchButton`), [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md) (the `HexInput` label, hint and error), [Select](../select/COMPONENT.md) (`FormatSelect`), [Button](../button/COMPONENT.md) (`EyeDropperButton`), [ColorSwatches](../color-swatches/COMPONENT.md) (`Swatches`), [Popover](../popover/COMPONENT.md) (`ColorPresets.Root`, `ColorPresets.Content`), `Icon` (pipette), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [ColorField](../color-field/COMPONENT.md), [ColorSwatches](../color-swatches/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md)

package/dist/skill/reference/components/color-picker/examples/examples.module.css

@@ -9,11 +9,8 @@
   max-width: 100%;
 }
 
-/* Hex field + swatch button of the same tier, bottom-aligned with the field box. */
-.fieldRow {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--prime-space-2);
+/* overview.tsx: the hex field with its swatch segment at a field's width. */
+.field {
   width: var(--prime-layout-min-width);
   max-width: 100%;
 }

package/dist/skill/reference/components/color-picker/examples/overview.tsx

@@ -1,5 +1,5 @@
-/** A color field: a hex value and a swatch button that opens the picker panel — `ColorPicker.HexInput`, `ColorPicker.TriggerSwatch`. */
-import { Button, Popover } from "prime-ui-kit";
+/** A color field: a hex value and a swatch segment at its end that opens the picker panel — `ColorPicker.HexInput`, `ColorPicker.SwatchButton`. */
+import { Popover } from "prime-ui-kit";
 import { ColorPicker } from "prime-ui-kit/color-picker";
 
 import styles from "./examples.module.css";
@@ -7,15 +7,10 @@ import styles from "./examples.module.css";
 export default function ColorPickerOverviewExample() {
   return (
     <ColorPicker.Root defaultValue="#5b5bd6">
-      <div className={styles.fieldRow}>
-        <ColorPicker.HexInput label="Акцентный цвет" />
+      <ColorPicker.HexInput label="Акцентный цвет" className={styles.field}>
         <Popover.Root>
           <Popover.Trigger>
-            <Button.Root variant="soft" tone="neutral" aria-label="Открыть палитру">
-              <Button.Icon>
-                <ColorPicker.TriggerSwatch />
-              </Button.Icon>
-            </Button.Root>
+            <ColorPicker.SwatchButton />
           </Popover.Trigger>
           <Popover.Content>
             <ColorPicker.Panel className={styles.panel}>
@@ -31,7 +26,7 @@ export default function ColorPickerOverviewExample() {
             </ColorPicker.Panel>
           </Popover.Content>
         </Popover.Root>
-      </div>
+      </ColorPicker.HexInput>
     </ColorPicker.Root>
   );
 }

package/dist/skill/reference/components/color-picker/examples/presets-custom.tsx

@@ -0,0 +1,31 @@
+/** A spec's color on the site: the brand palette one click away and any hex typed under it — `ColorPresets`, `allowCustom`. */
+import { ColorPresets } from "prime-ui-kit";
+import * as React from "react";
+
+const BRAND_COLORS = [
+  { value: "#5b5bd6", label: "Индиго" },
+  { value: "#0090ff", label: "Синий" },
+  { value: "#12a594", label: "Бирюзовый" },
+  { value: "#30a46c", label: "Зелёный" },
+  { value: "#f76b15", label: "Оранжевый" },
+  { value: "#e5484d", label: "Красный" },
+];
+
+export default function ColorPickerPresetsCustomExample() {
+  const [color, setColor] = React.useState<string | null>("#8e4ec6");
+
+  return (
+    <ColorPresets.Root
+      presets={BRAND_COLORS}
+      allowCustom
+      value={color}
+      onValueChange={setColor}
+      labels={{ trigger: "Цвет характеристики" }}
+    >
+      <ColorPresets.Trigger>
+        <ColorPresets.SwatchButton />
+      </ColorPresets.Trigger>
+      <ColorPresets.Content label="Цвет характеристики" />
+    </ColorPresets.Root>
+  );
+}

package/dist/skill/reference/components/color-picker/examples/sizes.tsx

@@ -1,5 +1,4 @@
-/** Every tier of the picker: the hex field and a swatch button inside take it from the root — `size`. */
-import { Button } from "prime-ui-kit";
+/** Every tier of the picker: the hex field and its swatch segment take it from the root — `size`. */
 import { ColorPicker } from "prime-ui-kit/color-picker";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
@@ -10,12 +9,9 @@ export default function ColorPickerSizesExample() {
       {SIZES.map((size) => (
         <div key={size}>
           <ColorPicker.Root defaultValue="#0090ff" size={size}>
-            <ColorPicker.HexInput label={size} />
-            <Button.Root variant="soft" tone="neutral" aria-label="Открыть палитру">
-              <Button.Icon>
-                <ColorPicker.TriggerSwatch />
-              </Button.Icon>
-            </Button.Root>
+            <ColorPicker.HexInput label={size}>
+              <ColorPicker.SwatchButton />
+            </ColorPicker.HexInput>
           </ColorPicker.Root>
         </div>
       ))}

package/dist/skill/reference/components/color-swatches/COMPONENT.md

@@ -49,6 +49,7 @@ ColorSwatches                 field frame: label → swatches → hint | error
 | `required` | `boolean` | — | Red `*` after the label and `aria-required` on the group. |
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the swatches. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | — | Danger inner edge on every swatch and `aria-invalid`. A non-empty `error` implies it. |
 | `disabled` | `boolean` | `false` | Disables every swatch (grey, half transparent). |

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

@@ -45,7 +45,7 @@ Crossfade          <div>; holds the region's height while it changes
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `state` | `string \| number` | — (required) | Key of what the region shows: `"loading"`, `"ready"`, `"empty"`, `"error"` or a record id. A new value cross-fades the old content into the new one; the same value updates in place. |
-| `fill` | `boolean` | `false` | The region takes its parent's height (a flex or grid item, or a sized block) and every state stretches to it; the height never glides. |
+| `fill` | `boolean` | `false` | The region takes its parent's height (a flex or grid item, or a sized block) and every state stretches to it; the height never glides. A `Crossfade` that is the child of a `Page.Cell` fills it unless `fill` is set. |
 | `children` | `ReactNode` | — | Content of the current `state`. Nothing (`null`, `false`) leaves no box once the old state has faded: no gap in a grid or a flex column. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `aria-busy`, `aria-live`, `role` and the other div attributes. |
 
@@ -79,7 +79,7 @@ Motion is opacity only, so nothing shifts under the pointer; the leaving content
 
 ## Layout & spacing
 - No padding, gap or fill of its own: it sits where the swapped content would sit (inside `Card.Body`, a page section, a panel).
-- Width follows the parent; height is the current content's height except while gliding — or, with `fill`, the parent's height (the parent needs one: a flex or grid column with a height, `PageContent.Root fill`).
+- Width follows the parent; height is the current content's height except while gliding — or, with `fill`, the parent's height (the parent needs one: a flex or grid column with a height, `Page.Root fill`).
 - An empty Crossfade has no box: an optional block above a list keeps the page rhythm whether it is there or not.
 - The loading state is a `Skeleton` with the geometry of the data it stands for (same rows, same line heights), so the swap to data changes neither layout nor height.
 
@@ -108,7 +108,7 @@ No `labels`.
 | [overview.tsx](examples/overview.tsx) | A card region that cross-fades between loading, data, empty and error and glides to the new height — `state`. |
 | [record-switch.tsx](examples/record-switch.tsx) | A detail panel keyed by the record id: picking another client cross-fades the details of a different height — `state`. |
 | [fill.tsx](examples/fill.tsx) | A deal board that fills its panel's height while it swaps between loading and data, and a notice slot above it that takes no room while empty — `fill`, `state`. |
-| [screen.tsx](examples/screen.tsx) | Screen states: the title and the date of the statement in the app header, a page-level error in a Banner with a retry, a region loading with a Skeleton of its rows and a table skeleton, the table error in place and a first-run EmptyPage; regions cross-fade between states — `state`. |
+| [screen.tsx](examples/screen.tsx) | Screen states: the title and the date of the statement in its top bar, a page-level error in a Banner with a retry, a region loading with a Skeleton of its rows and a table skeleton, the table error in place and a first-run EmptyPage; regions cross-fade between states — `state`. |
 
 ## Mistakes
 - A new `state` on every data refresh (`state={Date.now()}`) → key by what the region shows, not by when it was fetched.