prime-ui-kit 0.16.0 → 0.17.0

package/src/components/chart-frame/COMPONENT.md

@@ -105,7 +105,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `height` | `number \| "fill"` | `240`, `160` under `30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least. |
+| `height` | `number \| "fill"` | `240`, `160` under `30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `Page.Cell` with `rows`), the default height at least. |
 | `renderPlot` | `(area: ChartFramePlotArea) => ReactNode` | — | Renders the chart at the measured `{ width, height }` with every series `{ id, label, color, hidden }` — for libraries that need explicit sizes (Chart.js, visx). |
 | `children` | `ReactNode` | — | A chart that sizes itself to its container (an SVG with a `viewBox`, `ResponsiveContainer`); it fills the area. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |

package/src/components/chart-frame/examples/fill-height.tsx

@@ -1,5 +1,5 @@
 /** Revenue against the plan beside two KPI tiles: the plot takes the height of the stretched grid cell, and the plan line starts hidden until the legend turns it on — `height`, `defaultHiddenSeries`. */
-import { Card, ChartFrame, type ChartFrameSeries, chartColors, PageContent } from "prime-ui-kit";
+import { Card, ChartFrame, type ChartFrameSeries, chartColors, Page } from "prime-ui-kit";
 
 const SERIES: ChartFrameSeries[] = [
   { id: "fact", label: "Факт" },
@@ -22,9 +22,9 @@ const formatMillions = (value: number) => `${value.toLocaleString("ru-RU")} мл
 
 export default function ChartFrameFillHeightExample() {
   return (
-    <PageContent.Grid>
+    <Page.Grid>
       {/* The cell spans two rows beside the tiles; `height="fill"` takes all of it. */}
-      <PageContent.Cell span={8} rows={2}>
+      <Page.Cell span={8} rows={2}>
         <ChartFrame.Root
           series={SERIES}
           defaultHiddenSeries={["plan"]}
@@ -95,23 +95,23 @@ export default function ChartFrameFillHeightExample() {
           />
           <ChartFrame.Legend />
         </ChartFrame.Root>
-      </PageContent.Cell>
+      </Page.Cell>
 
-      <PageContent.Cell span={4}>
+      <Page.Cell span={4}>
         <Card.Root variant="stat-trend">
           <Card.Label>Выполнение плана</Card.Label>
           <Card.Value>96%</Card.Value>
           <Card.Delta tone="warning">−4 п. п. за октябрь</Card.Delta>
         </Card.Root>
-      </PageContent.Cell>
+      </Page.Cell>
 
-      <PageContent.Cell span={4}>
+      <Page.Cell span={4}>
         <Card.Root variant="stat-trend">
           <Card.Label>Прогноз на год</Card.Label>
           <Card.Value>84 млн ₽</Card.Value>
           <Card.Delta>План — 86 млн ₽</Card.Delta>
         </Card.Root>
-      </PageContent.Cell>
-    </PageContent.Grid>
+      </Page.Cell>
+    </Page.Grid>
   );
 }

package/src/components/chat/COMPONENT.md

@@ -107,7 +107,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (a `PageContent.BackButton`, an `Avatar`, `Chat.Title`, `Chat.Description`, `Chat.Actions`), `className`. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (a `Page.BackButton`, an `Avatar`, `Chat.Title`, `Chat.Description`, `Chat.Actions`), `className`. |
 
 ### Chat.Title
 `ref` → `HTMLHeadingElement`. Who the chat is with, one line that ellipsizes; it also names the message list (`aria-labelledby`).
@@ -193,7 +193,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` — the actions (`Button.Root size="s"`: Переслать, Удалить), `className`. |
 
 ### Chat.Separator
-`ref` → `HTMLDivElement`. A date between messages (`items` add them for you) («Сегодня», «12 марта» — `formatMessageDate`): a pill in the middle that stays at the top while its day scrolls.
+`ref` → `HTMLDivElement`. A date between messages (`items` add them for you) («Сегодня», «12 марта» — `formatMessageDate`): a pill a step above the bubbles that stays at the top while its day scrolls, until the next date pushes it out.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -308,7 +308,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `newMessages` | `"Новых сообщений: {count}. К последним сообщениям"` | The name of that button while new messages wait below. |
 | `typing` | `"печатает…"` | The status line of the header while the other side types. |
 | `search` | `"Поиск по переписке"` | The search button and the name of the search field. |
-| `searchPlaceholder` | `"Поиск по сообщениям"` | The placeholder of the search field. |
+| `searchPlaceholder` | `"Поиск"` | The placeholder of the search field. |
 | `matches` | `"{index} из {count}"` | The place of the current match, counted from the newest. |
 | `noMatches` | `"Нет совпадений"` | The search found nothing. |
 | `previousMatch` | `"Предыдущее совпадение"` | The button that goes to the older match. |
@@ -337,7 +337,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | [states.tsx](examples/states.tsx) | The first load of a conversation: bubble-shaped placeholders on both sides stand in the list's place, then cross-fade into the messages — `loading`. |
 | [controlled.tsx](examples/controlled.tsx) | Selection mode owned by the screen: the Select item of a message's menu starts it, a check stands beside every message, a press toggles one while the others step back, the bar counts and acts, Escape leaves — `selected`, `onSelectedChange`, `Chat.SelectionBar`. |
 | [narrow.tsx](examples/narrow.tsx) | At phone width the header keeps its actions and lets the title ellipsize, bubbles take up to 85% of the chat, long links wrap and an album keeps its layout — `Chat.Root`, `Chat.Header`, `Chat.Messages`, `Chat.Footer`. |
-| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in 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`. |
+| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in its top bar, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. |
 
 ## Mistakes
 - A header, a search bar and a scroller of your own around the messages → `Chat.Header`, `Chat.Search`, `Chat.Messages`: the chat wires typing, search, jumps and selection between them.

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

@@ -1,5 +1,5 @@
 /* Messenger: a work screen — the header carries the title, the page fills the app panel
-   (`AppShell.Root fillViewport` + `PageContent.Root fill`); each pane is a card with a scrolling
+   (`AppShell.Root fillViewport` + `Page.Root fill`); each pane is a card with a scrolling
    region. */
 
 .paneCard {

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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>
   );
 }