prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/{patterns/kanban-board.tsx → reference/components/kanban/examples/screen.tsx}

@@ -1,5 +1,6 @@
-/** A sales pipeline board: header with one primary action, search and filter with a board / list switch, a Kanban of deals by stage with totals, moves saved on the server that can be refused, movable stages and the deal in a Drawer. */
+/** A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemOpen`. */
 import {
+  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -27,7 +28,7 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./kanban-board.module.css";
+import styles from "./screen.module.css";
 
 type Owner = { name: string; initials: string; color: PaletteColor };
 
@@ -41,25 +42,17 @@ type Deal = {
   source: string;
   probability: number;
   contract: boolean;
-  comments: number;
-  tags: { text: string; color: PaletteColor }[];
 };
 
 type DealRow = Deal & { stage: string };
 
-/** The stages of the pipeline; the first and the last are system stages and stay in place. */
+/** The stages of the pipeline, in order; the stage color repeats on its count and its Badge. */
 const STAGES: KanbanColumn[] = [
-  {
-    id: "new",
-    title: "Новая",
-    description: "Связаться в течение дня",
-    color: "blue",
-    locked: true,
-  },
-  { id: "qualified", title: "Квалификация", description: "Бюджет и сроки", color: "purple" },
-  { id: "proposal", title: "Предложение", description: "КП отправлено", color: "orange" },
-  { id: "negotiation", title: "Переговоры", description: "Условия договора", color: "yellow" },
-  { id: "won", title: "Выиграна", description: "Договор подписан", color: "green", locked: true },
+  { id: "new", title: "Новая", color: "blue" },
+  { id: "qualified", title: "Квалификация", color: "purple" },
+  { id: "proposal", title: "Предложение", color: "orange" },
+  { id: "negotiation", title: "Переговоры", color: "yellow" },
+  { id: "won", title: "Выиграна", color: "green" },
 ];
 
 const ANNA: Owner = { name: "Анна Климова", initials: "АК", color: "purple" };
@@ -77,8 +70,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 20,
     contract: false,
-    comments: 2,
-    tags: [{ text: "Входящая", color: "sky" }],
   },
   {
     id: "DL-338",
@@ -90,8 +81,6 @@ const DEALS: Deal[] = [
     source: "Выставка",
     probability: 25,
     contract: false,
-    comments: 0,
-    tags: [{ text: "Тендер", color: "blue" }],
   },
   {
     id: "DL-332",
@@ -103,8 +92,6 @@ const DEALS: Deal[] = [
     source: "Рекомендация",
     probability: 40,
     contract: false,
-    comments: 4,
-    tags: [{ text: "Повторная", color: "green" }],
   },
   {
     id: "DL-327",
@@ -116,8 +103,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 40,
     contract: false,
-    comments: 1,
-    tags: [{ text: "Просрочена", color: "red" }],
   },
   {
     id: "DL-321",
@@ -129,8 +114,6 @@ const DEALS: Deal[] = [
     source: "Холодный звонок",
     probability: 60,
     contract: false,
-    comments: 6,
-    tags: [{ text: "Горячая", color: "orange" }],
   },
   {
     id: "DL-316",
@@ -142,11 +125,6 @@ const DEALS: Deal[] = [
     source: "Рекомендация",
     probability: 75,
     contract: true,
-    comments: 9,
-    tags: [
-      { text: "Тендер", color: "blue" },
-      { text: "Горячая", color: "orange" },
-    ],
   },
   {
     id: "DL-309",
@@ -158,8 +136,6 @@ const DEALS: Deal[] = [
     source: "Выставка",
     probability: 80,
     contract: false,
-    comments: 3,
-    tags: [{ text: "Ждём подпись", color: "yellow" }],
   },
   {
     id: "DL-298",
@@ -171,8 +147,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 100,
     contract: true,
-    comments: 2,
-    tags: [{ text: "Повторная", color: "green" }],
   },
 ];
 
@@ -246,11 +220,6 @@ function saveStage(deal: Deal, to: string) {
   });
 }
 
-/** The server's answer to a new order of the stages. */
-function saveStageOrder() {
-  return new Promise<void>((resolve) => window.setTimeout(resolve, SAVE_MS));
-}
-
 const ownerAvatar = (owner: Owner) => (
   <Avatar.Root size="s" color={owner.color} aria-label={owner.name}>
     <Avatar.Fallback>{owner.initials}</Avatar.Fallback>
@@ -268,6 +237,7 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
     header: "Компания",
     accessor: "company",
     sortable: true,
+    minWidth: "14rem",
     cell: (row) => (
       <span className={styles.company}>
         <Typography as="span" variant="body-m">
@@ -283,6 +253,7 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
   {
     id: "owner",
     header: "Ответственный",
+    minWidth: "12rem",
     cell: (row) => (
       <span className={styles.owner}>
         {ownerAvatar(row.owner)}
@@ -310,16 +281,13 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
   },
 ];
 
-export default function KanbanBoardPattern() {
+export default function KanbanScreenExample() {
   const { notify } = useNotifications();
   const [loading, setLoading] = React.useState(true);
   const [view, setView] = React.useState("board");
   const [filter, setFilter] = React.useState<SmartFilterValue>({});
   const [search, setSearch] = React.useState("");
   const [placement, setPlacement] = React.useState(PLACEMENT);
-  const [stageOrder, setStageOrder] = React.useState<readonly string[]>(
-    STAGES.map((stage) => stage.id),
-  );
   const [openId, setOpenId] = React.useState<string | null>(null);
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [saving, setSaving] = React.useState(false);
@@ -339,6 +307,11 @@ export default function KanbanBoardPattern() {
   );
   const rows: DealRow[] = deals.map((deal) => ({ ...deal, stage: stageOf(placement, deal.id) }));
   const shown = new Set(deals.map((deal) => deal.id));
+  // The header's data line: what the filtered pipeline holds, open deals only.
+  const inWork = deals.filter((deal) => stageOf(placement, deal.id) !== "won");
+  const pipeline = `${inWork.length} ${dealsWord(inWork.length)} в работе · ${RUBLES.format(
+    inWork.reduce((total, deal) => total + deal.amount, 0),
+  )}`;
 
   const figures = (column: KanbanColumn) => {
     const ids = (placement[column.id] ?? []).filter((id) => shown.has(id));
@@ -383,32 +356,22 @@ export default function KanbanBoardPattern() {
 
   const deal = openId === null ? undefined : BY_ID.get(openId);
   const dealStage = deal ? stageOf(placement, deal.id) : "new";
-  const nextStage = STAGE_BY_ID.get(stageOrder[stageOrder.indexOf(dealStage) + 1] ?? "");
+  const nextStage = STAGES[STAGES.findIndex((stage) => stage.id === dealStage) + 1];
 
   return (
-    <PageContent.Page aria-labelledby="deals-title">
-      <PageContent.Header>
-        <PageContent.Title id="deals-title">Сделки</PageContent.Title>
-        <PageContent.Description>
-          Воронка отдела продаж: перетащите сделку на следующий этап или откройте её карточку.
-        </PageContent.Description>
-        <PageContent.Actions>
-          <Button.Root variant="soft" tone="neutral">
-            <Button.Icon>
-              <Icon name="action.download" />
-            </Button.Icon>
-            Экспорт
-          </Button.Root>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Новая сделка
-          </Button.Root>
-        </PageContent.Actions>
-      </PageContent.Header>
-      <PageContent.Body>
-        <div className={styles.workspace}>
+    <>
+      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
+          the only h1 and the page's tools; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Сделки
+            <AppHeader.Description>
+              {loading ? "Загружаем воронку…" : pipeline}
+            </AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
           <SmartFilter.Root
             fields={FIELDS}
             value={filter}
@@ -436,18 +399,30 @@ export default function KanbanBoardPattern() {
                   </SegmentedControl.Item>
                 </SegmentedControl.Root>
               </PageToolbar.View>
+              <PageToolbar.Actions>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новая сделка
+                </Button.Root>
+              </PageToolbar.Actions>
               <PageToolbar.Chips>
                 <SmartFilter.Chips />
               </PageToolbar.Chips>
             </PageToolbar.Root>
           </SmartFilter.Root>
-          <Crossfade state={view}>
+        </AppHeader.Tools>
+      </AppHeader.Root>
+
+      <PageContent.Root fill>
+        <PageContent.Body>
+          <Crossfade state={view} fill>
             {view === "board" ? (
               // `plain` (the default): the board is the page's main region, so the stages are no
               // boxes — their headers and the deal cards stand on the page, one level of nesting.
               <Kanban.Root
                 aria-label="Воронка продаж"
-                className={styles.board}
                 columns={STAGES}
                 items={deals}
                 getId={(item) => item.id}
@@ -465,35 +440,16 @@ export default function KanbanBoardPattern() {
                   }
                   setPlacement(next);
                 }}
-                reorderableColumns
-                columnOrder={stageOrder}
-                onColumnOrderChange={async (next) => {
-                  await saveStageOrder();
-                  setStageOrder(next);
-                }}
                 renderColumnMeta={figures}
                 loading={loading}
-                onItemClick={(item) => openDeal(item.id)}
+                onItemOpen={(item) => openDeal(item.id)}
                 renderItem={(item) => (
                   <Kanban.Item>
                     <Kanban.ItemTitle>{item.company}</Kanban.ItemTitle>
                     <Kanban.ItemDescription>
                       {RUBLES.format(item.amount)} · до {DAY.format(new Date(item.due))}
                     </Kanban.ItemDescription>
-                    <Kanban.ItemBadges>
-                      {item.tags.map((tag) => (
-                        <Badge.Root key={tag.text} color={tag.color}>
-                          {tag.text}
-                        </Badge.Root>
-                      ))}
-                    </Kanban.ItemBadges>
-                    <Kanban.ItemFooter>
-                      <Kanban.ItemCount>
-                        <Icon name="object.message" />
-                        {item.comments}
-                      </Kanban.ItemCount>
-                      {ownerAvatar(item.owner)}
-                    </Kanban.ItemFooter>
+                    <Kanban.ItemFooter>{ownerAvatar(item.owner)}</Kanban.ItemFooter>
                   </Kanban.Item>
                 )}
               />
@@ -505,7 +461,9 @@ export default function KanbanBoardPattern() {
                 getRowKey={(row) => row.id}
                 getRowLabel={(row) => row.company}
                 onRowClick={(row) => openDeal(row.id)}
-                pageSize={8}
+                paging="none"
+                scrollHeight="fill"
+                stickyHeader
                 defaultSort={{ columnId: "due", order: "asc" }}
                 empty={
                   <EmptyPage.Root size="s" role="status" aria-labelledby="deals-empty">
@@ -528,87 +486,89 @@ export default function KanbanBoardPattern() {
               />
             )}
           </Crossfade>
-        </div>
-        <Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
-          <Drawer.Content>
-            <Drawer.Guard busy={saving} />
-            <Drawer.Header>
-              <Drawer.Title>{deal?.company}</Drawer.Title>
-              <Drawer.Description>
-                {deal?.id} · {STAGE_BY_ID.get(dealStage)?.title}
-              </Drawer.Description>
-            </Drawer.Header>
-            <Drawer.Body>
-              {deal ? (
-                <DescriptionList.Root>
-                  <DescriptionList.Item label="Этап">{stageBadge(dealStage)}</DescriptionList.Item>
-                  <DescriptionList.Item label="Сумма">
-                    {RUBLES.format(deal.amount)}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Вероятность">
-                    {deal.probability} %
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Срок закрытия">
-                    {DAY.format(new Date(deal.due))}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Ответственный">
-                    <span className={styles.owner}>
-                      {ownerAvatar(deal.owner)}
-                      {deal.owner.name}
-                    </span>
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Контакт">{deal.contact}</DescriptionList.Item>
-                  <DescriptionList.Item label="Источник">{deal.source}</DescriptionList.Item>
-                  <DescriptionList.Item label="Договор">
-                    {deal.contract ? (
-                      <Badge.Root color="green">Подписан</Badge.Root>
-                    ) : (
-                      <Badge.Root color="gray">Не подписан</Badge.Root>
-                    )}
-                  </DescriptionList.Item>
-                </DescriptionList.Root>
-              ) : null}
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Закрыть
-                </Button.Root>
-              </Drawer.Close>
-              <Dropdown.Root>
-                <Dropdown.Trigger>
-                  <Button.Root variant="soft" tone="neutral" disabled={saving}>
-                    Сменить этап
+          <Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
+            <Drawer.Content>
+              <Drawer.Guard busy={saving} />
+              <Drawer.Header>
+                <Drawer.Title>{deal?.company}</Drawer.Title>
+                <Drawer.Description>
+                  {deal?.id} · {STAGE_BY_ID.get(dealStage)?.title}
+                </Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>
+                {deal ? (
+                  <DescriptionList.Root>
+                    <DescriptionList.Item label="Этап">
+                      {stageBadge(dealStage)}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Сумма">
+                      {RUBLES.format(deal.amount)}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Вероятность">
+                      {deal.probability} %
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Срок закрытия">
+                      {DAY.format(new Date(deal.due))}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Ответственный">
+                      <span className={styles.owner}>
+                        {ownerAvatar(deal.owner)}
+                        {deal.owner.name}
+                      </span>
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Контакт">{deal.contact}</DescriptionList.Item>
+                    <DescriptionList.Item label="Источник">{deal.source}</DescriptionList.Item>
+                    <DescriptionList.Item label="Договор">
+                      {deal.contract ? (
+                        <Badge.Root tone="success">Подписан</Badge.Root>
+                      ) : (
+                        <Badge.Root tone="neutral">Не подписан</Badge.Root>
+                      )}
+                    </DescriptionList.Item>
+                  </DescriptionList.Root>
+                ) : null}
+              </Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Закрыть
                   </Button.Root>
-                </Dropdown.Trigger>
-                <Dropdown.Content>
-                  {stageOrder.map((id) => (
-                    <Dropdown.Item
-                      key={id}
-                      disabled={id === dealStage}
-                      onSelect={() => {
-                        if (deal) void moveDeal(deal, id);
-                      }}
-                    >
-                      {STAGE_BY_ID.get(id)?.title}
-                    </Dropdown.Item>
-                  ))}
-                </Dropdown.Content>
-              </Dropdown.Root>
-              {nextStage ? (
-                <Button.Root
-                  loading={saving}
-                  onClick={() => {
-                    if (deal) void moveDeal(deal, nextStage.id);
-                  }}
-                >
-                  В «{nextStage.title}»
-                </Button.Root>
-              ) : null}
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Root>
-      </PageContent.Body>
-    </PageContent.Page>
+                </Drawer.Close>
+                <Dropdown.Root>
+                  <Dropdown.Trigger>
+                    <Button.Root variant="soft" tone="neutral" disabled={saving}>
+                      Сменить этап
+                    </Button.Root>
+                  </Dropdown.Trigger>
+                  <Dropdown.Content>
+                    {STAGES.map((stage) => (
+                      <Dropdown.Item
+                        key={stage.id}
+                        disabled={stage.id === dealStage}
+                        onSelect={() => {
+                          if (deal) void moveDeal(deal, stage.id);
+                        }}
+                      >
+                        {stage.title}
+                      </Dropdown.Item>
+                    ))}
+                  </Dropdown.Content>
+                </Dropdown.Root>
+                {nextStage ? (
+                  <Button.Root
+                    loading={saving}
+                    onClick={() => {
+                      if (deal) void moveDeal(deal, nextStage.id);
+                    }}
+                  >
+                    В «{nextStage.title}»
+                  </Button.Root>
+                ) : null}
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Root>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
   );
 }

package/dist/skill/reference/components/kanban/examples/states.tsx

@@ -1,10 +1,7 @@
-/** Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a read-only board drags nothing — `loading`, `disabled`. */
-import { Button, Icon, Kanban, Switch } from "prime-ui-kit";
-import * as React from "react";
+/** Loading draws skeleton cards in the card geometry; an empty column keeps its drop area and a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. */
+import { Badge, Kanban, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
-type Order = { id: string; title: string; total: string };
+type Order = { id: string; title: string; total: string; closed?: boolean };
 
 const COLUMNS = [
   { id: "new", title: "Новые" },
@@ -12,64 +9,57 @@ const COLUMNS = [
   { id: "shipped", title: "Отгружены" },
 ];
 
+/** A closed order has signed documents: its card stays where it is. */
 const ORDERS: Order[] = [
   { id: "ORD-5531", title: "ООО «Север» · 12 позиций", total: "48 300 ₽" },
   { id: "ORD-5529", title: "ИП Лебедев · 3 позиции", total: "7 950 ₽" },
-  { id: "ORD-5524", title: "АО «Гранит» · 40 позиций", total: "212 000 ₽" },
+  { id: "ORD-5524", title: "АО «Гранит» · 40 позиций", total: "212 000 ₽", closed: true },
+  { id: "ORD-5518", title: "ООО «Вектор» · 6 позиций", total: "31 400 ₽" },
 ];
 
-const PLACEMENT = { new: ["ORD-5531", "ORD-5529"], packing: [], shipped: ["ORD-5524"] };
+const PLACEMENT = {
+  new: ["ORD-5531", "ORD-5529"],
+  packing: [],
+  shipped: ["ORD-5524", "ORD-5518"],
+};
 
-const LOAD_MS = 1200;
+const STATES = [
+  { caption: "loading", loading: true, disabled: false },
+  { caption: "Kanban.Item disabled", loading: false, disabled: false },
+  { caption: "disabled", loading: false, disabled: true },
+];
 
 export default function KanbanStatesExample() {
-  const [loading, setLoading] = React.useState(true);
-  const [readOnly, setReadOnly] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!loading) return;
-    const timer = window.setTimeout(() => setLoading(false), LOAD_MS);
-    return () => window.clearTimeout(timer);
-  }, [loading]);
-
-  return (
-    <div className={styles.stage}>
-      <div className={styles.toolbar}>
-        <Switch.Root checked={readOnly} onCheckedChange={setReadOnly}>
-          <Switch.Label>Только просмотр</Switch.Label>
-        </Switch.Root>
-        <div className={styles.spacer} />
-        <Button.Root
-          variant="soft"
-          tone="neutral"
-          loading={loading}
-          onClick={() => setLoading(true)}
-        >
-          <Button.Icon>
-            <Icon name="action.refresh" />
-          </Button.Icon>
-          Обновить
-        </Button.Root>
+  return STATES.map((state) => (
+    <div key={state.caption}>
+      <div>
+        <Kanban.Root
+          aria-label={`Заказы склада: ${state.caption}`}
+          columns={COLUMNS}
+          items={ORDERS}
+          getId={(order) => order.id}
+          getLabel={(order) => order.id}
+          defaultValue={PLACEMENT}
+          loading={state.loading}
+          disabled={state.disabled}
+          renderItem={(order) => (
+            <Kanban.Item disabled={order.closed}>
+              <Kanban.ItemTitle>{order.id}</Kanban.ItemTitle>
+              <Kanban.ItemDescription>
+                {order.title} · {order.total}
+              </Kanban.ItemDescription>
+              {order.closed ? (
+                <Kanban.ItemBadges>
+                  <Badge.Root color="gray">Закрыт</Badge.Root>
+                </Kanban.ItemBadges>
+              ) : null}
+            </Kanban.Item>
+          )}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          {state.caption}
+        </Typography>
       </div>
-      <Kanban.Root
-        aria-label="Заказы склада"
-        className={styles.board}
-        columns={COLUMNS}
-        items={ORDERS}
-        getId={(order) => order.id}
-        getLabel={(order) => order.id}
-        defaultValue={PLACEMENT}
-        loading={loading}
-        disabled={readOnly}
-        renderItem={(order) => (
-          <Kanban.Item>
-            <Kanban.ItemTitle>{order.id}</Kanban.ItemTitle>
-            <Kanban.ItemDescription>
-              {order.title} · {order.total}
-            </Kanban.ItemDescription>
-          </Kanban.Item>
-        )}
-      />
     </div>
-  );
+  ));
 }

package/dist/skill/reference/components/kanban/examples/variants.tsx

@@ -1,8 +1,6 @@
 /** The same release board in three looks: no wells with a header plate, no wells with a header over a line, and columns as filled wells holding their cards — `variant`. */
 import { Badge, Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Task = { id: string; title: string; due: string; label: string };
 
 const VARIANTS: KanbanVariant[] = ["plain", "line", "well"];
@@ -37,7 +35,6 @@ export default function KanbanVariantsExample() {
       <div>
         <Kanban.Root
           aria-label={`Задачи релиза: ${variant}`}
-          className={styles.board}
           variant={variant}
           columns={COLUMNS}
           items={TASKS}

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

@@ -60,17 +60,21 @@ Minimum width equals the height, so single-character keys are square.
 | size | `size`, else the surrounding control, else `m` | `data-size` (nominal), `data-tier` (visual tier, drives every dimension) |
 
 ## Layout & spacing
-- Inline-flex, centered content, never shrinks, `vertical-align: middle`.
-- Keys of one chord: `gap: var(--prime-space-1)`; an optional «+» between them is `aria-hidden`.
-- In a hotkey list: action left, keys right (`justify-content: space-between`), rows `gap: var(--prime-space-3)`.
+- Inline-flex, centered content, never shrinks, `vertical-align: middle`. The key owns its line box; a kit `Icon` (or a raw svg) inside takes the tier icon size.
+- Keys of one chord sit 4px apart; an optional «+» between them is `aria-hidden`.
+- In a hotkey list: a `DescriptionList` — the action is the label, its keys the value.
 - In a field, put the key in `Input.InlineAffix side="end"`.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Renders a native `<kbd>`; its text is read as is.
 - Symbol keys (⌘ ⌥ ⇧ ↵) need `aria-label` and `title` («Command», «Shift»).
 - A visual «+» between keys gets `aria-hidden="true"`.
@@ -85,8 +89,8 @@ No `labels`.
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A shortcut as one key per `Kbd`; symbol keys get a name — `aria-label`, `title`. |
 | [sizes.tsx](examples/sizes.tsx) | Every badge tier, 16 to 32 px high — `size`. |
-| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. |
-| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: action on the left, its keys on the right, an icon inside a key. |
+| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit size overrides it — `size`. |
+| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: the action, then its keys, one of them with an icon inside — `aria-label`, `title`. |
 
 ## Mistakes
 - `<Kbd>⌘ + Shift + P</Kbd>` → one `Kbd` per key with an `aria-hidden` «+» between.
@@ -95,5 +99,5 @@ No `labels`.
 - A `<span>` styled as a key, or a `Badge` used for a key → use `Kbd`.
 
 ## Related
-- **Built from:** —
+- **Built from:** `internal/chipTier` (the Badge tiers)
 - **See also:** [Badge](../badge/COMPONENT.md) (same tiers), [CommandMenu](../command-menu/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md)