prime-ui-kit 0.16.0 → 0.17.0

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

@@ -1,6 +1,5 @@
-/** A support messenger as a work screen: the title and the unread count in the app header, 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, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. */
 import {
-  AppHeader,
   Avatar,
   Card,
   Chat,
@@ -16,7 +15,7 @@ import {
   Icon,
   Message,
   type MessageStatus,
-  PageContent,
+  Page,
   type UploadContext,
   useUploadQueue,
   VoicePlayer,
@@ -573,123 +572,117 @@ export default function ChatScreenExample() {
   };
 
   return (
-    <>
-      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
-          the only h1 and one line of data; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Поддержка
-            <AppHeader.Description>{unreadLabel(unreadTotal)}</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-      </AppHeader.Root>
-
-      <PageContent.Root fill>
-        <PageContent.Body>
-          <PageContent.Split
-            open={dialogId !== null}
-            onOpenChange={(next) => {
-              if (!next) setDialogId(null);
-            }}
-          >
-            <PageContent.Panel kind="list">
-              <Card.Root className={styles.paneCard}>
-                <ChatList.Root
-                  items={foundDialogs}
-                  getKey={(item) => item.id}
-                  value={dialogId}
-                  onValueChange={setDialogId}
-                  search={dialogQuery}
-                  onSearchChange={setDialogQuery}
+    <Page.Root fill>
+      {/* A work screen titles itself in its top bar: the only h1 and one line of data. */}
+      <Page.TopBar>
+        <Page.Heading>
+          <Page.Title>Поддержка</Page.Title>
+          <Page.Description>{unreadLabel(unreadTotal)}</Page.Description>
+        </Page.Heading>
+      </Page.TopBar>
+      <Page.Body>
+        <Page.Split
+          open={dialogId !== null}
+          onOpenChange={(next) => {
+            if (!next) setDialogId(null);
+          }}
+        >
+          <Page.List>
+            <Card.Root className={styles.paneCard}>
+              <ChatList.Root
+                items={foundDialogs}
+                getKey={(item) => item.id}
+                value={dialogId}
+                onValueChange={setDialogId}
+                search={dialogQuery}
+                onSearchChange={setDialogQuery}
+                now={NOW}
+                renderItem={(item) => {
+                  const last = lastOf(item);
+                  return (
+                    <ChatList.Item
+                      time={last?.sentAt ?? item.at}
+                      status={last?.from === "me" ? last.status : undefined}
+                      unread={unread[item.id] ?? 0}
+                      typing={item.id === dialogId && clientTyping}
+                    >
+                      <ChatList.ItemIcon>
+                        <Avatar.Root color={hueOf(item.id)}>
+                          <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                          {item.id === "vector" ? <Avatar.Status status="online" /> : null}
+                        </Avatar.Root>
+                      </ChatList.ItemIcon>
+                      <ChatList.ItemText>{item.name}</ChatList.ItemText>
+                      <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
+                        {previewOf(item)}
+                      </ChatList.ItemDescription>
+                    </ChatList.Item>
+                  );
+                }}
+              />
+            </Card.Root>
+          </Page.List>
+
+          <Page.Detail>
+            <Card.Root className={styles.paneCard}>
+              <Chat.Root typing={clientTyping}>
+                <Chat.Header>
+                  <Page.BackButton />
+                  <Avatar.Root color={hueOf(dialog.id)}>
+                    <Avatar.Fallback>{dialog.initials}</Avatar.Fallback>
+                    {dialog.id === "vector" ? <Avatar.Status status="online" /> : null}
+                  </Avatar.Root>
+                  <Chat.Title>{dialog.name}</Chat.Title>
+                  <Chat.Description>{dialog.contact}</Chat.Description>
+                  <Chat.Actions>
+                    <Chat.SearchButton />
+                  </Chat.Actions>
+                </Chat.Header>
+                <Chat.Search />
+                <Chat.Messages
+                  loading={loadedId !== dialogId}
+                  items={messages}
+                  getKey={(message) => message.id}
+                  getAuthor={(message) => message.from}
+                  getDate={(message) => message.sentAt}
+                  renderMessage={renderMessage}
+                  unread={FIRST_UNREAD}
                   now={NOW}
-                  renderItem={(item) => {
-                    const last = lastOf(item);
-                    return (
-                      <ChatList.Item
-                        time={last?.sentAt ?? item.at}
-                        status={last?.from === "me" ? last.status : undefined}
-                        unread={unread[item.id] ?? 0}
-                        typing={item.id === dialogId && clientTyping}
-                      >
-                        <ChatList.ItemIcon>
-                          <Avatar.Root color={hueOf(item.id)}>
-                            <Avatar.Fallback>{item.initials}</Avatar.Fallback>
-                            {item.id === "vector" ? <Avatar.Status status="online" /> : null}
-                          </Avatar.Root>
-                        </ChatList.ItemIcon>
-                        <ChatList.ItemText>{item.name}</ChatList.ItemText>
-                        <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
-                          {previewOf(item)}
-                        </ChatList.ItemDescription>
-                      </ChatList.Item>
-                    );
+                  hasOlder={hasOlder}
+                  onLoadOlder={loadOlder}
+                  onNewMessage={(_, { direction }) => {
+                    if (direction !== "incoming" || !dialogId) return;
+                    setUnread((current) => ({
+                      ...current,
+                      [dialogId]: (current[dialogId] ?? 0) + 1,
+                    }));
+                  }}
+                  onRead={(values) => {
+                    if (!dialogId) return;
+                    setUnread((current) => ({
+                      ...current,
+                      [dialogId]: Math.max(0, (current[dialogId] ?? 0) - values.length),
+                    }));
                   }}
                 />
-              </Card.Root>
-            </PageContent.Panel>
-
-            <PageContent.Panel kind="detail">
-              <Card.Root className={styles.paneCard}>
-                <Chat.Root typing={clientTyping}>
-                  <Chat.Header>
-                    <PageContent.BackButton />
-                    <Avatar.Root color={hueOf(dialog.id)}>
-                      <Avatar.Fallback>{dialog.initials}</Avatar.Fallback>
-                      {dialog.id === "vector" ? <Avatar.Status status="online" /> : null}
-                    </Avatar.Root>
-                    <Chat.Title>{dialog.name}</Chat.Title>
-                    <Chat.Description>{dialog.contact}</Chat.Description>
-                    <Chat.Actions>
-                      <Chat.SearchButton />
-                    </Chat.Actions>
-                  </Chat.Header>
-                  <Chat.Search />
-                  <Chat.Messages
-                    loading={loadedId !== dialogId}
-                    items={messages}
-                    getKey={(message) => message.id}
-                    getAuthor={(message) => message.from}
-                    getDate={(message) => message.sentAt}
-                    renderMessage={renderMessage}
-                    unread={FIRST_UNREAD}
-                    now={NOW}
-                    hasOlder={hasOlder}
-                    onLoadOlder={loadOlder}
-                    onNewMessage={(_, { direction }) => {
-                      if (direction !== "incoming" || !dialogId) return;
-                      setUnread((current) => ({
-                        ...current,
-                        [dialogId]: (current[dialogId] ?? 0) + 1,
-                      }));
-                    }}
-                    onRead={(values) => {
-                      if (!dialogId) return;
-                      setUnread((current) => ({
-                        ...current,
-                        [dialogId]: Math.max(0, (current[dialogId] ?? 0) - values.length),
-                      }));
-                    }}
+                <Chat.Footer>
+                  <ChatComposer
+                    replyTo={replyTo}
+                    replyAuthor={dialog.contactTo}
+                    editing={editing}
+                    onReplyDismiss={() => setReplyTo(null)}
+                    onEditDismiss={() => setEditing(null)}
+                    onEditLast={editLast}
+                    onPost={post}
+                    onSave={save}
+                    onActivityChange={reportActivity}
                   />
-                  <Chat.Footer>
-                    <ChatComposer
-                      replyTo={replyTo}
-                      replyAuthor={dialog.contactTo}
-                      editing={editing}
-                      onReplyDismiss={() => setReplyTo(null)}
-                      onEditDismiss={() => setEditing(null)}
-                      onEditLast={editLast}
-                      onPost={post}
-                      onSave={save}
-                      onActivityChange={reportActivity}
-                    />
-                  </Chat.Footer>
-                </Chat.Root>
-              </Card.Root>
-            </PageContent.Panel>
-          </PageContent.Split>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+                </Chat.Footer>
+              </Chat.Root>
+            </Card.Root>
+          </Page.Detail>
+        </Page.Split>
+      </Page.Body>
+    </Page.Root>
   );
 }

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

@@ -171,7 +171,7 @@ The search field takes the tier too; counts are one tier down (the Badge's own r
 Root attribute: `data-size`. Every motion honours reduced motion (durations collapse, glides and ghosts are skipped).
 
 ## Layout & spacing
-- The root is a flex column that fills its host's height: put it straight into a `Card.Root` or a `PageContent.Panel kind="list"` pane with a height; the scroller takes the rest under the search field.
+- The root is a flex column that fills its host's height: put it straight into a `Card.Root` or a `Page.List` pane with a height; the scroller takes the rest under the search field.
 - One inset all round, the panel's 4px: the search field and the rows stand 4px from every edge of the host, so in a card (radius 12) their 8px corners follow the card's (nested radius = outer − padding). Rows stand 4px apart (a margin inside each `<li>`, so the virtual window measures rows with their space); the last row's margin is the inset below it.
 - A row: avatar · name and preview · time over the counts. The name and the preview truncate; glyphs, the time and the counts never do.
 - From 100 dialogs only the rows around the view render; spacers hold the rest of the height. The row with the Tab stop and the row with an open menu stay rendered.
@@ -259,4 +259,4 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 
 ## Related
 - **Built from:** [List](../list/COMPONENT.md) (rows, current fill, focus, touch height), [Input](../input/COMPONENT.md) (search), [ScrollContainer](../scroll-container/COMPONENT.md), [Crossfade](../crossfade/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Badge](../badge/COMPONENT.md) (counts), [Dropdown](../dropdown/COMPONENT.md) (row menu), [VisuallyHidden](../visually-hidden/COMPONENT.md), `useFlipList` (the glide of a new order)
-- **See also:** [Chat](../chat/COMPONENT.md), [Message](../message/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [PageContent](../page-content/COMPONENT.md), [ConfirmDialog](../confirm-dialog/COMPONENT.md)
+- **See also:** [Chat](../chat/COMPONENT.md), [Message](../message/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [Page](../../layout/page/COMPONENT.md), [ConfirmDialog](../confirm-dialog/COMPONENT.md)

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

@@ -56,7 +56,7 @@ export default function ChatListControlledExample() {
   const dialog = dialogs.find((item) => item.id === dialogId);
 
   return (
-    <div className={styles.stage}>
+    <div className={styles.screen}>
       <div className={styles.bar}>
         <Button.Root
           variant="soft"
@@ -93,7 +93,7 @@ export default function ChatListControlledExample() {
         <Card.Root>
           <Card.Body>
             <Typography variant="body-m" tone={dialog ? "default" : "muted"}>
-              {dialog ? `Открыт диалог: ${dialog.name}` : "Выберите диалог слева"}
+              {dialog ? `Открыт диалог: ${dialog.name}` : "Выберите диалог в списке"}
             </Typography>
           </Card.Body>
         </Card.Root>

package/dist/skill/reference/components/chat-list/examples/examples.module.css

@@ -29,6 +29,14 @@
   gap: var(--prime-space-2);
 }
 
+/* controlled: a list + detail screen, as wide as the preview gives (no pane cap). */
+.screen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  inline-size: 100%;
+}
+
 /* controlled: the list beside the open dialog; they stack in a narrow column. */
 .split {
   display: flex;

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

@@ -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)
@@ -87,8 +88,16 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
 | `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`.
 
@@ -245,7 +254,7 @@ 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 |
@@ -277,7 +286,7 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 
 ## 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.
@@ -300,7 +309,7 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 <!-- 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 +324,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. |
@@ -349,8 +359,8 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 ## 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`. |
@@ -369,8 +379,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`), [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/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/crossfade/COMPONENT.md

@@ -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.