prime-ui-kit 0.9.0 → 0.9.2

package/src/components/kanban/examples/overview.tsx

@@ -0,0 +1,130 @@
+/** A release board: cards move within and between columns by drag, a touch hold or Alt + arrows; a card shows its meta line, labels, comments and assignee — `Kanban.Root`, `Kanban.Item`, `renderItem`, `renderColumnActions`. */
+import { Avatar, Badge, Button, Icon, Kanban, type PaletteColor } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Task = {
+  id: string;
+  title: string;
+  due: string;
+  labels: { text: string; color: PaletteColor }[];
+  comments: number;
+  assignee: { initials: string; name: string; color: PaletteColor };
+};
+
+const COLUMNS = [
+  { id: "backlog", title: "Бэклог" },
+  { id: "progress", title: "В работе" },
+  { id: "review", title: "На проверке" },
+  { id: "done", title: "Готово" },
+];
+
+const ANNA = { initials: "АК", name: "Анна Котова", color: "purple" } as const;
+const ILYA = { initials: "ИС", name: "Илья Смирнов", color: "teal" } as const;
+const MARIA = { initials: "МВ", name: "Мария Волкова", color: "orange" } as const;
+
+const TASKS: Task[] = [
+  {
+    id: "PRJ-214",
+    title: "Экспорт счетов в CSV для бухгалтерии",
+    due: "14 окт",
+    labels: [{ text: "Биллинг", color: "blue" }],
+    comments: 3,
+    assignee: ANNA,
+  },
+  {
+    id: "PRJ-221",
+    title: "Фильтр заказов по складу",
+    due: "17 окт",
+    labels: [{ text: "Заказы", color: "green" }],
+    comments: 0,
+    assignee: ILYA,
+  },
+  {
+    id: "PRJ-198",
+    title: "Повторная отправка приглашений в команду",
+    due: "10 окт",
+    labels: [
+      { text: "Команда", color: "purple" },
+      { text: "Срочно", color: "red" },
+    ],
+    comments: 5,
+    assignee: MARIA,
+  },
+  {
+    id: "PRJ-205",
+    title: "Тёмная тема для отчётов",
+    due: "12 окт",
+    labels: [{ text: "Дизайн", color: "pink" }],
+    comments: 2,
+    assignee: ANNA,
+  },
+  {
+    id: "PRJ-187",
+    title: "Лимиты API для партнёров",
+    due: "9 окт",
+    labels: [{ text: "API", color: "sky" }],
+    comments: 8,
+    assignee: ILYA,
+  },
+  {
+    id: "PRJ-176",
+    title: "Онбординг нового проекта",
+    due: "3 окт",
+    labels: [{ text: "Проекты", color: "yellow" }],
+    comments: 1,
+    assignee: MARIA,
+  },
+];
+
+const PLACEMENT = {
+  backlog: ["PRJ-214", "PRJ-221"],
+  progress: ["PRJ-198", "PRJ-205"],
+  review: ["PRJ-187"],
+  done: ["PRJ-176"],
+};
+
+export default function KanbanOverviewExample() {
+  return (
+    <Kanban.Root
+      aria-label="Задачи релиза 2.4"
+      className={styles.board}
+      columns={COLUMNS}
+      items={TASKS}
+      getId={(task) => task.id}
+      getLabel={(task) => task.title}
+      defaultValue={PLACEMENT}
+      renderColumnActions={(column) => (
+        <Button.Root variant="ghost" tone="neutral" aria-label={`Добавить в «${column.title}»`}>
+          <Button.Icon>
+            <Icon name="action.add" />
+          </Button.Icon>
+        </Button.Root>
+      )}
+      renderItem={(task) => (
+        <Kanban.Item>
+          <Kanban.ItemTitle>{task.title}</Kanban.ItemTitle>
+          <Kanban.ItemDescription>
+            {task.id} · до {task.due}
+          </Kanban.ItemDescription>
+          <Kanban.ItemBadges>
+            {task.labels.map((label) => (
+              <Badge.Root key={label.text} color={label.color}>
+                {label.text}
+              </Badge.Root>
+            ))}
+          </Kanban.ItemBadges>
+          <Kanban.ItemFooter>
+            <Kanban.ItemCount>
+              <Icon name="object.message" />
+              {task.comments}
+            </Kanban.ItemCount>
+            <Avatar.Root size="s" color={task.assignee.color} aria-label={task.assignee.name}>
+              <Avatar.Fallback>{task.assignee.initials}</Avatar.Fallback>
+            </Avatar.Root>
+          </Kanban.ItemFooter>
+        </Kanban.Item>
+      )}
+    />
+  );
+}

package/src/components/kanban/examples/states.tsx

@@ -0,0 +1,75 @@
+/** 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";
+
+import styles from "./examples.module.css";
+
+type Order = { id: string; title: string; total: string };
+
+const COLUMNS = [
+  { id: "new", title: "Новые" },
+  { id: "packing", title: "Сборка" },
+  { id: "shipped", title: "Отгружены" },
+];
+
+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 ₽" },
+];
+
+const PLACEMENT = { new: ["ORD-5531", "ORD-5529"], packing: [], shipped: ["ORD-5524"] };
+
+const LOAD_MS = 1200;
+
+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>
+      </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/src/components/kanban/examples/structure.tsx

@@ -0,0 +1,76 @@
+/** Cards take only the parts they need: a title alone, a meta line, labels, a footer with counts and an assignee — `Kanban.ItemTitle`, `Kanban.ItemDescription`, `Kanban.ItemBadges`, `Kanban.ItemFooter`, `Kanban.ItemCount`. */
+import { Avatar, Badge, Icon, Kanban } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Card = {
+  id: string;
+  title: string;
+  meta?: string;
+  label?: string;
+  comments?: number;
+  attachments?: number;
+  assignee?: { initials: string; name: string };
+};
+
+const COLUMNS = [
+  { id: "inbox", title: "Входящие" },
+  { id: "planned", title: "Запланировано" },
+];
+
+const CARDS: Card[] = [
+  { id: "c1", title: "Уточнить реквизиты поставщика" },
+  { id: "c2", title: "Сверка остатков на складе", meta: "INV-3102 · до 15 окт" },
+  { id: "c3", title: "Новый тариф для партнёров", label: "Продажи" },
+  {
+    id: "c4",
+    title: "Акт сверки с ООО «Вектор»",
+    meta: "INV-3088 · до 11 окт",
+    label: "Финансы",
+    comments: 4,
+    attachments: 2,
+    assignee: { initials: "ОБ", name: "Ольга Белова" },
+  },
+];
+
+const PLACEMENT = { inbox: ["c1", "c2"], planned: ["c3", "c4"] };
+
+export default function KanbanStructureExample() {
+  return (
+    <Kanban.Root
+      aria-label="Задачи отдела закупок"
+      className={styles.board}
+      columns={COLUMNS}
+      items={CARDS}
+      getId={(card) => card.id}
+      getLabel={(card) => card.title}
+      defaultValue={PLACEMENT}
+      renderItem={(card) => (
+        <Kanban.Item>
+          <Kanban.ItemTitle>{card.title}</Kanban.ItemTitle>
+          {card.meta ? <Kanban.ItemDescription>{card.meta}</Kanban.ItemDescription> : null}
+          {card.label ? (
+            <Kanban.ItemBadges>
+              <Badge.Root color="blue">{card.label}</Badge.Root>
+            </Kanban.ItemBadges>
+          ) : null}
+          {card.assignee ? (
+            <Kanban.ItemFooter>
+              <Kanban.ItemCount>
+                <Icon name="object.message" />
+                {card.comments}
+              </Kanban.ItemCount>
+              <Kanban.ItemCount>
+                <Icon name="object.document" />
+                {card.attachments}
+              </Kanban.ItemCount>
+              <Avatar.Root size="s" color="green" aria-label={card.assignee.name}>
+                <Avatar.Fallback>{card.assignee.initials}</Avatar.Fallback>
+              </Avatar.Root>
+            </Kanban.ItemFooter>
+          ) : null}
+        </Kanban.Item>
+      )}
+    />
+  );
+}

package/src/components/kbd/COMPONENT.md

@@ -1,17 +1,17 @@
 # Kbd
 
 **Category:** data-display
+**Kind:** primitive
 
 > A key cap for a keyboard key or a shortcut, rendered as a native `<kbd>`.
 
 ## When to use
-- Shortcut hints inside buttons, search fields and menu items ("Найти ⌘K", "/").
+- Shortcut hints inside buttons, search fields and menu items («Найти ⌘K», «/»).
 - Hotkey reference lists in help panels or settings.
 - Keys mentioned in instructions.
 
 ## When not to use
 - A status, category or counter → use [Badge](../badge/COMPONENT.md).
-- A removable value → use [Tag](../tag/COMPONENT.md).
 - A clickable control → use [Button](../button/COMPONENT.md).
 - A block of code → use [CodeBlock](../code-block/COMPONENT.md).
 
@@ -20,95 +20,80 @@
 import { Kbd } from "prime-ui-kit";
 ```
 
+## Anatomy
+```
+Kbd              <kbd>; one key, its badge tier, children (text, Icon or both)
+```
+
 ## API
 
-### Kbd.Root
-Forwards `ref` to the `<kbd>` element. No `asChild`. Leaf component: one key per `Kbd.Root`.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Kbd
+`ref` → `HTMLElement`. A native `<kbd>`: one key per `Kbd`; passes its tier to a nested `Icon`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | Key label, an icon, or icon + text. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` (`ControlSize`) | — (inherited, else `"m"`) | Badge tier. Without it the key follows the surrounding control one tier down; outside a control it is `m`. |
-| `className` | `string` | — | Extra class on the `<kbd>`. |
-
-+ native props of `<kbd>` (`HTMLAttributes<HTMLElement>` without `size`), e.g. `title`, `aria-label`. `data-size` / `data-tier` are always set by the component.
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | — | Badge tier, 16 · 20 · 24 · 28 · 32 px high. Without it the key follows the surrounding control one tier down (m → s); outside a control it is `m`. |
+| `children` | `ReactNode` | — | Key label, an `Icon`, or an icon and text. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "size">` | — | `className`, `title`, `aria-label` and the other `<kbd>` attributes. |
 
 ## Variants
-
 Kbd has one look: monospace text in `text-secondary` on a translucent `fill-subtle-active` wash, no border, weight 500. No `variant`, `tone` or `color`.
 
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `xs` | 16px high, padding 4, text 12, icon 12 | Inside `xs`/`s` buttons, dense menus | |
-| `s` | 20px high, padding 6, text 12, icon 12 | Inside `m` controls (inherited automatically) | |
-| `m` | 24px high, padding 8, text 12, icon 14 | Standalone keys in lists and text | yes (outside controls) |
-| `l` | 28px high, padding 10, text 13, icon 16 | Larger help panels | |
-| `xl` | 32px high, padding 12, text 14, icon 16 | Onboarding / hero hints | |
+| `xs` | 16px high, text 12, icon 12 | inside `xs` / `s` controls, dense menus | |
+| `s` | 20px high, text 12, icon 12 | inside `m` controls (inherited automatically) | |
+| `m` | 24px high, text 12, icon 14 | standalone keys in lists and text | yes (outside controls) |
+| `l` | 28px high, text 13, icon 16 | larger help panels | |
+| `xl` | 32px high, text 14, icon 16 | onboarding hints | |
+| — (omitted) | one tier below the surrounding control: `xs`/`s` → `xs`, `m` → `s`, `l` → `m`, `xl` → `l` | inside Button, Input, menu items | yes (inside controls) |
 
 Minimum width equals the height, so single-character keys are square.
 
-**Combinations**
-- Recommended: no `size` inside controls; one `Kbd.Root` per key in a chord.
-- Allowed: an explicit smaller `size` inside a control for a secondary hint (`<Kbd.Root size="xs">↵</Kbd.Root>` in an `m` button).
-- Avoid: one `Kbd.Root` holding a whole chord with "+" text inside; symbols without an accessible name.
-
-**Sizes**
-Same tiers as Badge and Tag. Without `size` inside a control: `xs`/`s` → `xs`, `m` → `s`, `l` → `m`, `xl` → `l`.
-
 ## States
-Kbd is static: no hover, focus, disabled or loading.
-
-| Attribute | Driven by | Notes |
+| State | Driven by | DOM |
 |---|---|---|
-| `data-size` | `size`, else surrounding control size, else `m` | Nominal size. |
-| `data-tier` | resolved tier | One step down from the control when inherited. Drives dimensions. |
-
-Kbd also provides its tier to children through the control-size context, so a nested `Icon` matches the key.
+| static | — | no hover, focus, disabled or loading |
+| 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 text left, chord right (`justify-content: space-between`), rows `gap: var(--prime-space-3)`.
-- In a field, put Kbd in `Input.InlineAffix side="end"`.
+- 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)`.
+- In a field, put the key in `Input.InlineAffix side="end"`.
 
 ## Accessibility
+
+### Keyboard
+No keyboard interaction.
+
+### ARIA
 - Renders a native `<kbd>`; its text is read as is.
-- Symbol keys (⌘ ⌥ ⇧ ↵) need `aria-label` and preferably `title` ("Command", "Shift").
-- Visual separators like "+" between keys get `aria-hidden="true"`.
-- No `labels` keys.
+- Symbol keys (⌘ ⌥ ⇧ ↵) need `aria-label` and `title` («Command», «Shift»).
+- A visual «+» between keys gets `aria-hidden="true"`.
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [sizes.tsx](examples/sizes.tsx) | A chord in tiers xs–xl | Standalone shortcuts in text and docs |
-| [in-controls.tsx](examples/in-controls.tsx) | ⌘ + K chord in Button s/m/l, explicit `xs` ↵ with `aria-label`, key in a search field | Shortcut hints inside controls |
-| [modifier-keys.tsx](examples/modifier-keys.tsx) | ⌘ + ⇧ + P with `aria-label` / `title`, hidden "+" | Symbol keys |
-| [shortcut-list.tsx](examples/shortcut-list.tsx) | Hotkey reference list, key with icon and text | Help panels and settings |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-```tsx
-import { Kbd } from "prime-ui-kit";
+No `labels`.
 
-export function SaveHint() {
-  return (
-    <span>
-      <Kbd.Root aria-label="Command" title="Command">
-        ⌘
-      </Kbd.Root>
-      <Kbd.Root>S</Kbd.Root>
-    </span>
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [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. |
 
 ## Mistakes
-- `<Kbd.Root>⌘ + Shift + P</Kbd.Root>` → one `Kbd.Root` per key with an `aria-hidden` "+" between.
-- `<Kbd.Root>⌘</Kbd.Root>` without a name → add `aria-label="Command"`.
-- `<Button.Root>Найти <Kbd.Root size="m">⌘K</Kbd.Root></Button.Root>` → drop `size` and use one key per `Kbd.Root`: `<Kbd.Root aria-label="Command">⌘</Kbd.Root><Kbd.Root>K</Kbd.Root>`; the keys follow the button one tier down.
-- A `<span>` styled as a key → use `Kbd.Root`.
-- `Badge` used for a key → use `Kbd.Root` (monospace, semantic `<kbd>`).
+- `<Kbd>⌘ + Shift + P</Kbd>` → one `Kbd` per key with an `aria-hidden` «+» between.
+- `<Kbd>⌘</Kbd>` without a name → add `aria-label="Command"`.
+- An explicit `size="m"` inside an `m` button → drop `size`; the key follows the button one tier down.
+- A `<span>` styled as a key, or a `Badge` used for a key → use `Kbd`.
 
 ## Related
-- [Badge](../badge/COMPONENT.md), [Tag](../tag/COMPONENT.md) — same tiers.
-- [CommandMenu](../command-menu/COMPONENT.md) — shortcut hints in the footer.
-- [Dropdown](../dropdown/COMPONENT.md) — shortcuts in menu items.
+- **Built from:** —
+- **See also:** [Badge](../badge/COMPONENT.md) (same tiers), [CommandMenu](../command-menu/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md)

package/src/components/kbd/examples/examples.module.css

@@ -1,57 +1,27 @@
-.stack {
-  display: grid;
-  gap: var(--prime-space-4);
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--prime-space-3);
-}
-
-.sizeRow {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: center;
-  gap: var(--prime-space-6);
-}
-
-.sizeCell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
+/* Layout of the Kbd scenarios: semantic tokens only. */
 
+/* Keys of one chord: tighter than a control gap. */
 .chord {
   display: inline-flex;
   align-items: center;
   gap: var(--prime-space-1);
 }
 
-/* Keys of one chord inside a control: tighter than the control gap. */
-.keys {
-  display: inline-flex;
+/* in-controls.tsx: two buttons and a search field. */
+.controls {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--prime-space-1);
-}
-
-.field {
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
+  justify-content: center;
+  gap: var(--prime-space-3);
+  width: min(100%, var(--prime-modal-width-s));
 }
 
+/* shortcut-list.tsx: action left, keys right. */
 .list {
   display: grid;
   gap: var(--prime-space-3);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
+  width: min(100%, var(--prime-modal-width-s));
   margin: 0;
 }
 

package/src/components/kbd/examples/in-controls.tsx

@@ -1,40 +1,34 @@
-/** Without `size` a key inside Button or Input takes the tier one step down (button m → Kbd s); an explicit `size` overrides it. Use for shortcut hints in buttons and search fields. */
+/** Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. */
 import { Button, Input, Kbd } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function KbdInControlsExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.row}>
-        {(["s", "m", "l"] as const).map((size) => (
-          <Button.Root variant="outline" tone="neutral" key={size} size={size}>
-            Найти
-            <span className={styles.keys}>
-              <Kbd.Root aria-label="Command" title="Command">
-                ⌘
-              </Kbd.Root>
-              <Kbd.Root>K</Kbd.Root>
-            </span>
-          </Button.Root>
-        ))}
-        <Button.Root tone="neutral">
-          Отправить
-          <Kbd.Root size="xs" aria-label="Enter" title="Enter">
-            ↵
-          </Kbd.Root>
-        </Button.Root>
-      </div>
-      <div className={styles.field}>
-        <Input.Root>
-          <Input.Wrapper>
-            <Input.Field type="search" placeholder="Поиск по документам" aria-label="Поиск" />
-            <Input.InlineAffix side="end">
-              <Kbd.Root>/</Kbd.Root>
-            </Input.InlineAffix>
-          </Input.Wrapper>
-        </Input.Root>
-      </div>
+    <div className={styles.controls}>
+      <Button.Root variant="outline" tone="neutral">
+        Найти
+        <span className={styles.chord}>
+          <Kbd aria-label="Command" title="Command">
+            ⌘
+          </Kbd>
+          <Kbd>K</Kbd>
+        </span>
+      </Button.Root>
+      <Button.Root tone="neutral">
+        Отправить
+        <Kbd size="xs" aria-label="Enter" title="Enter">
+          ↵
+        </Kbd>
+      </Button.Root>
+      <Input.Root>
+        <Input.Wrapper>
+          <Input.Field type="search" placeholder="Поиск по документам" aria-label="Поиск" />
+          <Input.InlineAffix side="end">
+            <Kbd>/</Kbd>
+          </Input.InlineAffix>
+        </Input.Wrapper>
+      </Input.Root>
     </div>
   );
 }

package/src/components/kbd/examples/overview.tsx

@@ -0,0 +1,24 @@
+/** A shortcut as one key per `Kbd`; symbol keys get a name — `aria-label`, `title`. */
+import { Kbd, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function KbdOverviewExample() {
+  return (
+    <span className={styles.chord}>
+      <Kbd aria-label="Command" title="Command">
+        ⌘
+      </Kbd>
+      <Typography as="span" variant="body-m" tone="muted" aria-hidden="true">
+        +
+      </Typography>
+      <Kbd aria-label="Shift" title="Shift">
+        ⇧
+      </Kbd>
+      <Typography as="span" variant="body-m" tone="muted" aria-hidden="true">
+        +
+      </Typography>
+      <Kbd>P</Kbd>
+    </span>
+  );
+}

package/src/components/kbd/examples/shortcut-list.tsx

@@ -1,12 +1,12 @@
-/** Shortcut reference: one `Kbd.Root` per key in a chord, a key with an icon and text. Use for help panels and settings pages listing hotkeys. */
+/** A hotkey reference: action on the left, its keys on the right, an icon inside a key. */
 import { Icon, Kbd, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 /** Accessible names for symbol keys. */
-const keyNames: Partial<Record<string, string>> = { "⌘": "Command" };
+const KEY_NAMES: Partial<Record<string, string>> = { "⌘": "Command" };
 
-const shortcuts = [
+const SHORTCUTS = [
   { action: "Открыть палитру команд", keys: ["⌘", "K"] },
   { action: "Сохранить черновик", keys: ["⌘", "S"] },
   { action: "Перейти к поиску", keys: ["/"] },
@@ -15,33 +15,33 @@ const shortcuts = [
 export default function KbdShortcutListExample() {
   return (
     <dl className={styles.list}>
-      {shortcuts.map((item) => (
+      {SHORTCUTS.map((item) => (
         <div key={item.action} className={styles.listRow}>
           <dt>
-            <Typography.Root as="span" variant="body-m">
+            <Typography as="span" variant="body-m">
               {item.action}
-            </Typography.Root>
+            </Typography>
           </dt>
           <dd className={styles.chord}>
             {item.keys.map((key) => (
-              <Kbd.Root key={key} aria-label={keyNames[key]} title={keyNames[key]}>
+              <Kbd key={key} aria-label={KEY_NAMES[key]} title={KEY_NAMES[key]}>
                 {key}
-              </Kbd.Root>
+              </Kbd>
             ))}
           </dd>
         </div>
       ))}
       <div className={styles.listRow}>
         <dt>
-          <Typography.Root as="span" variant="body-m">
+          <Typography as="span" variant="body-m">
             Закрыть окно
-          </Typography.Root>
+          </Typography>
         </dt>
         <dd className={styles.chord}>
-          <Kbd.Root>
+          <Kbd>
             <Icon name="action.close" />
             Esc
-          </Kbd.Root>
+          </Kbd>
         </dd>
       </div>
     </dl>