prime-ui-kit 0.9.0 → 0.9.2

package/src/components/banner/examples/page-strip.tsx

@@ -0,0 +1,53 @@
+/** An edge-to-edge strip above a page and a rounded block inside a card — `placement`. */
+import { Banner, Button, Card, Icon, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function BannerPageStripExample() {
+  return (
+    <div className={styles.sections}>
+      <Card.Root>
+        <Banner.Root
+          tone="warning"
+          placement="page"
+          role="region"
+          aria-label="Пробный период"
+          onDismiss={() => undefined}
+        >
+          <Banner.Content>
+            <Banner.Icon>
+              <Icon name="status.warning" />
+            </Banner.Icon>
+            <Banner.Title>Пробный период закончится 12 октября</Banner.Title>
+          </Banner.Content>
+        </Banner.Root>
+        <div className={styles.pageBody}>
+          <Typography as="h3" variant="heading-s">
+            Отчёты
+          </Typography>
+        </div>
+      </Card.Root>
+      <Card.Root variant="panel">
+        <Card.Header>
+          <Card.Title>Оплата</Card.Title>
+        </Card.Header>
+        <Card.Body>
+          <Banner.Root tone="danger">
+            <Banner.Content>
+              <Banner.Icon>
+                <Icon name="status.danger" />
+              </Banner.Icon>
+              <Banner.Title>Не удалось списать оплату</Banner.Title>
+              <Banner.Description>
+                Карта •••• 4242 отклонена банком. Обновите способ оплаты до 15 октября.
+              </Banner.Description>
+              <Banner.Actions>
+                <Button.Root tone="danger">Обновить карту</Button.Root>
+              </Banner.Actions>
+            </Banner.Content>
+          </Banner.Root>
+        </Card.Body>
+      </Card.Root>
+    </div>
+  );
+}

package/src/components/banner/examples/sizes.tsx

@@ -1,28 +1,29 @@
-/** Sizes xs–xl: padding, icon and title follow the control tier, the description is one step smaller; pass the same `size` to action buttons. Match the banner size to the density of the surrounding UI. */
-import { Info } from "lucide-react";
-import { Banner, Button, type ControlSize } from "prime-ui-kit";
+/** Every tier: padding, icon and title follow the control tier, the description is one step smaller — `size`. */
+import { Banner, Icon, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
-const sizes: ControlSize[] = ["xs", "s", "m", "l", "xl"];
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function BannerSizesExample() {
   return (
-    <div className={styles.stack}>
-      {sizes.map((size) => (
-        <Banner.Root key={size} size={size} variant="soft" onDismiss={() => {}}>
-          <Banner.Content>
-            <Banner.Icon as={Info} aria-hidden />
-            <Banner.Title>Размер {size}</Banner.Title>
-            <Banner.Description>Описание на ступень мельче заголовка.</Banner.Description>
-            <Banner.Actions>
-              <Button.Root variant="outline" tone="neutral" size={size}>
-                Подробнее
-              </Button.Root>
-            </Banner.Actions>
-          </Banner.Content>
-        </Banner.Root>
+    <>
+      {SIZES.map((size) => (
+        <div key={size}>
+          <div>
+            <Banner.Root size={size}>
+              <Banner.Content>
+                <Banner.Icon>
+                  <Icon name="status.info" />
+                </Banner.Icon>
+                <Banner.Title>Доступен новый отчёт</Banner.Title>
+                <Banner.Description>Описание на ступень мельче заголовка.</Banner.Description>
+              </Banner.Content>
+            </Banner.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
+        </div>
       ))}
-    </div>
+    </>
   );
 }

package/src/components/banner/examples/structure.tsx

@@ -0,0 +1,45 @@
+/** Optional parts: a one-line title, a title with a description, and actions where the close button joins the row — `Banner.Description`, `Banner.Actions`, `onDismiss`. */
+import { Banner, Button, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const noop = () => undefined;
+
+export default function BannerStructureExample() {
+  return (
+    <div className={styles.stack}>
+      <Banner.Root tone="success">
+        <Banner.Content>
+          <Banner.Icon>
+            <Icon name="status.success" />
+          </Banner.Icon>
+          <Banner.Title>Оплата прошла</Banner.Title>
+        </Banner.Content>
+      </Banner.Root>
+      <Banner.Root tone="warning" onDismiss={noop}>
+        <Banner.Content>
+          <Banner.Icon>
+            <Icon name="status.warning" />
+          </Banner.Icon>
+          <Banner.Title>Подтвердите email</Banner.Title>
+          <Banner.Description>Без него уведомления о заказах не приходят.</Banner.Description>
+        </Banner.Content>
+      </Banner.Root>
+      <Banner.Root tone="warning" onDismiss={noop}>
+        <Banner.Content>
+          <Banner.Icon>
+            <Icon name="status.warning" />
+          </Banner.Icon>
+          <Banner.Title>Пробный период закончится 12 октября</Banner.Title>
+          <Banner.Description>Выберите тариф, чтобы сохранить отчёты команды.</Banner.Description>
+          <Banner.Actions>
+            <Button.Root variant="outline" tone="neutral">
+              Сравнить
+            </Button.Root>
+            <Button.Root>Выбрать тариф</Button.Root>
+          </Banner.Actions>
+        </Banner.Content>
+      </Banner.Root>
+    </div>
+  );
+}

package/src/components/banner/examples/variants.tsx

@@ -1,70 +1,43 @@
-/** Three variants (`soft`, `solid`, `outline`) × all tones; with a description the title and text stack, without it the banner reads as one line. Use `soft` by default, `solid` for urgent, `outline` for calm notices. */
-import { Bell, CircleAlert, CircleCheck, Info, Sparkles, TriangleAlert } from "lucide-react";
-import { Banner, type BannerRootProps, LinkButton, Typography } from "prime-ui-kit";
+/** Every treatment on every tone: soft by default, solid for urgent, outline for calm — `variant`, `tone`. */
+import { Banner, Icon, type IconName, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
-const variants: { variant: NonNullable<BannerRootProps["variant"]>; note: string }[] = [
-  { variant: "soft", note: "мягкая заливка тона, нейтральный текст (по умолчанию)" },
-  { variant: "solid", note: "насыщенная заливка тона — срочное" },
-  { variant: "outline", note: "заливка карточки с тонкой обводкой тона — спокойное" },
-];
-
-const tones: {
-  tone: NonNullable<BannerRootProps["tone"]>;
-  icon: typeof Info;
+const TONES: {
+  tone: "info" | "success" | "warning" | "danger" | "accent" | "neutral";
+  icon: IconName;
   title: string;
-  description?: string;
 }[] = [
-  {
-    tone: "info",
-    icon: Info,
-    title: "Плановые работы в ночь на субботу",
-    description: "С 02:00 до 04:00 по Москве отчёты будут доступны только для чтения.",
-  },
-  { tone: "success", icon: CircleCheck, title: "Оплата прошла" },
-  {
-    tone: "warning",
-    icon: TriangleAlert,
-    title: "Пробный период закончится через 3 дня",
-    description: "После этого создание новых отчётов будет недоступно.",
-  },
-  { tone: "danger", icon: CircleAlert, title: "Не удалось синхронизировать склад" },
-  { tone: "accent", icon: Sparkles, title: "Новое: экспорт отчётов в XLSX" },
-  { tone: "neutral", icon: Bell, title: "Уведомления по почте отключены" },
+  { tone: "info", icon: "status.info", title: "Плановые работы" },
+  { tone: "success", icon: "status.success", title: "Оплата прошла" },
+  { tone: "warning", icon: "status.warning", title: "Квота почти исчерпана" },
+  { tone: "danger", icon: "status.danger", title: "Склад не синхронизирован" },
+  { tone: "accent", icon: "status.info", title: "Новое: экспорт в XLSX" },
+  { tone: "neutral", icon: "status.info", title: "Рассылка отключена" },
 ];
 
+const VARIANTS = ["soft", "solid", "outline"] as const;
+
 export default function BannerVariantsExample() {
   return (
-    <div className={styles.sections}>
-      {variants.map(({ variant, note }) => (
-        <div key={variant} className={styles.group}>
-          <Typography.Root variant="caption" tone="muted">
-            <Typography.Root as="span" variant="code" tone="muted">
-              variant="{variant}"
-            </Typography.Root>{" "}
-            — {note}
-          </Typography.Root>
-          <div className={styles.stack}>
-            {tones.map(({ tone, icon, title, description }) => (
-              <Banner.Root key={tone} variant={variant} tone={tone}>
+    <>
+      {TONES.map(({ tone, icon, title }) => (
+        <div key={tone}>
+          {VARIANTS.map((variant) => (
+            <div key={variant}>
+              <Banner.Root variant={variant} tone={tone}>
                 <Banner.Content>
-                  <Banner.Icon as={icon} aria-hidden />
+                  <Banner.Icon>
+                    <Icon name={icon} />
+                  </Banner.Icon>
                   <Banner.Title>{title}</Banner.Title>
-                  {description ? <Banner.Description>{description}</Banner.Description> : null}
-                  {tone === "accent" && variant !== "solid" ? (
-                    <Banner.Actions>
-                      <LinkButton.Root href="#" size="s">
-                        Подробнее
-                      </LinkButton.Root>
-                    </Banner.Actions>
-                  ) : null}
                 </Banner.Content>
               </Banner.Root>
-            ))}
-          </div>
+              <Typography as="span" variant="caption" tone="muted">
+                {variant} · {tone}
+              </Typography>
+            </div>
+          ))}
         </div>
       ))}
-    </div>
+    </>
   );
 }

package/src/components/breadcrumb/COMPONENT.md

@@ -1,6 +1,7 @@
 # Breadcrumb
 
 **Category:** navigation
+**Kind:** navigation
 
 > Breadcrumbs: the path to the current page.
 
@@ -12,7 +13,7 @@
 - Switching sections of the same screen → use [Tabs](../tabs/COMPONENT.md).
 - Progress through a sequential process → use [Stepper](../stepper/COMPONENT.md).
 - Primary app navigation → use [Sidebar](../../layout/sidebar/COMPONENT.md).
-- A single "back" or standalone link → use [LinkButton](../link-button/COMPONENT.md).
+- A single «back» or standalone link → use [LinkButton](../link-button/COMPONENT.md).
 
 ## Import
 ```tsx
@@ -20,45 +21,43 @@ import { Breadcrumb } from "prime-ui-kit";
 ```
 
 ## Anatomy
-- `Breadcrumb.Root` — `<nav aria-label>` with an `<ol>`; sets the size and enables auto-collapse.
-  - `Breadcrumb.Item` — `<li>`: a link (`href`, rendered by LinkButton), plain text, or the current page (`current`).
-  - `Breadcrumb.Separator` — `<li aria-hidden>` with a chevron (or custom children).
-  - `Breadcrumb.Ellipsis` — `<li>` with a manual «…» for skipped levels.
+```
+Breadcrumb.Root           <nav aria-label> + <ol>; size; chevrons between levels; auto-collapse
+├─ Breadcrumb.Item        <li>: a link (href → LinkButton), text, or the current page (current)
+└─ Breadcrumb.Ellipsis    <li> with «…» for levels skipped on purpose
+```
 
 ## API
-No part forwards a ref.
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Breadcrumb.Root
-+ native `<nav>` props (`HTMLAttributes<HTMLElement>`); an `aria-label` passed here overrides `labels.nav`.
+`ref` → `HTMLElement` (the `<nav>`). `<nav aria-label>` with an `<ol>`; draws the chevrons between levels, sets the size and collapses the middle levels on narrow containers.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Text, chevron and icon size of links, current page and ellipsis. |
-| `labels` | `Partial<BreadcrumbLabels>` | see Accessibility | Built-in strings. |
-| `children` | `ReactNode` | — (required) | Items, separators and ellipsis, in order. |
-| `className` | `string` | — | Extra class on the `nav`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Text of the links, the current page and the ellipsis; chevrons and icons take the same tier. |
+| `labels` | `Partial<BreadcrumbLabels>` | — | Built-in strings, see Labels. |
+| `children` | `ReactNode` | — | `Breadcrumb.Item`s and `Breadcrumb.Ellipsis`, in order; no separators by hand. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other `nav` attributes; an `aria-label` here overrides `labels.nav`. |
 
 ### Breadcrumb.Item
-No native props.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `href` | `string` | — | Renders a muted link (`LinkButton`). Without `href` the item is text. |
-| `current` | `boolean` | — | Current page: `aria-current="page"`, primary text, medium weight. Use on the last item without `href`. |
-| `aria-label` | `string` | — | Name of a link without visible text (e.g. a home icon). |
-| `children` | `ReactNode` | — | Text or an icon. A string child also becomes the `title` of a text item (full text on hover when truncated). |
-| `className` | `string` | — | Extra class on the `li`. |
+`ref` → `HTMLLIElement`. `<li>`: a muted `LinkButton` (`href`), plain text, or the current page (`current`).
 
-### Breadcrumb.Separator
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | chevron icon | Custom separator. |
-| `className` | `string` | — | Extra class. |
+| `href` | `string` | — | Renders a link; without it the item is text. |
+| `current` | `boolean` | — | Current page: `aria-current="page"` (on the link when `href` is set), primary text, medium weight. Usually the last item, without `href`. |
+| `aria-label` | `string` | — | Name of a link without visible text (e.g. a home icon); set on the link, not the `li`. |
+| `children` | `ReactNode` | — | Text or an `Icon`. A string also becomes the `title` of a text item (full text when truncated). |
+| `…rest` | `Omit<LiHTMLAttributes<HTMLLIElement>, "aria-label">` | — | `className` and the other `li` attributes. |
 
 ### Breadcrumb.Ellipsis
+`ref` → `HTMLLIElement`. `<li>` with «…» for levels skipped on purpose, with visually hidden `labels.ellipsis`.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `className` | `string` | — | Extra class. |
+| `…rest` | `Omit<LiHTMLAttributes<HTMLLIElement>, "children">` | — | `className` and the other `li` attributes. |
 
 ## Variants
 
@@ -77,19 +76,17 @@ No native props.
 | link (`href`) | muted text, medium weight; primary text on hover and focus, no underline | every ancestor level | |
 | text (no `href`, no `current`) | muted text | a level without its own page | yes |
 | current (`current`) | primary text, medium weight | the last item — this page | |
-| icon link (`href` + `aria-label`, icon child) | icon at the tier icon size | a "home" root | |
+| icon link (`href` + `aria-label`, `Icon` child) | icon at the tier icon size | a «home» root | |
 
-**Combinations**
-- Recommended: links for every ancestor, `current` on the last item, `Separator` between each pair; `s` above a `heading-m` page title.
-- Avoid: `href` on the current item; separators at the start or the end; two `current` items.
+Use links for every ancestor and `current` on the last item; `s` above a `heading-m` page title. Avoid `href` on the current item and two `current` items.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| current | `current` | `aria-current="page"` on the text span |
+| current | `current` | `aria-current="page"` on the text span, or on the link when the item has `href` |
 | hover / focus-visible on links | pointer / keyboard | text → primary; focus ring from LinkButton |
-| truncation | width | each segment truncates with an ellipsis, max width `2 × --prime-space-24`; the current item shrinks last |
-| auto-collapse | 5+ children (item, separator, item, separator, item) and container `< 30rem` | `data-collapsible="true"`; middle items are visually hidden (still announced) and replaced by «… ›» |
+| truncation | width | each level truncates with an ellipsis, max width `2 × --prime-space-24`; the current item shrinks last |
+| auto-collapse | 3+ levels and a container `< 30rem` | `data-collapsible="true"`; middle levels are `display: none` and replaced by «… ›», whose hidden text (`labels.ellipsis`) names them |
 
 Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 
@@ -99,43 +96,42 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 - The list never wraps.
 
 ## Accessibility
-- `nav` landmark with `aria-label` from `labels.nav`; an ordered list; separators and the auto «…» are `aria-hidden`.
-- `Breadcrumb.Ellipsis` has visually hidden text `labels.ellipsis`.
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves focus between the level links; the current page is not focusable. |
+| `Enter` | Follows the link. |
+
+### ARIA
+- `nav` landmark with `aria-label` from `labels.nav`; an ordered list.
+- The current page has `aria-current="page"`; the chevrons are `aria-hidden` spans inside the levels, so every list item is a level.
+- Collapsed middle levels leave the layout and the tab order (no invisible focus stops); the automatic «…» reads as `labels.ellipsis`.
 - Icon-only links need `aria-label` on the Item.
 
-| `labels` key | Default | Used for |
-|---|---|---|
-| `nav` | `"Навигационная цепочка"` | `aria-label` of the `nav` |
-| `ellipsis` | `"Скрытые разделы"` | hidden text of `Breadcrumb.Ellipsis` |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-## Examples
-| File | Scenario | When to use this pattern |
+| Key | Default | Used for |
 |---|---|---|
-| [page-header.tsx](examples/page-header.tsx) | `s` trail with a home icon above the title and actions | detail page headers |
-| [sizes.tsx](examples/sizes.tsx) | Five size tiers | matching the header size |
-| [collapse.tsx](examples/collapse.tsx) | Truncation, auto-collapse at 320px, manual `Breadcrumb.Ellipsis` | deep hierarchies, narrow screens |
-
-```tsx
-import { Breadcrumb } from "prime-ui-kit";
+| `nav` | `"Навигационная цепочка"` | `aria-label` of the `nav` landmark. |
+| `ellipsis` | `"Скрытые разделы"` | Hidden text of `Breadcrumb.Ellipsis`. |
 
-export function OrderTrail() {
-  return (
-    <Breadcrumb.Root>
-      <Breadcrumb.Item href="/orders">Заказы</Breadcrumb.Item>
-      <Breadcrumb.Separator />
-      <Breadcrumb.Item current>№ 48 213</Breadcrumb.Item>
-    </Breadcrumb.Root>
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | The path to this page: links to the levels above and the current page last — `href`, `current`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier; text and chevrons follow the control tier — `size`. |
+| [with-icon.tsx](examples/with-icon.tsx) | The root level as a home icon; a link without text is named for screen readers — `aria-label`. |
+| [overflow.tsx](examples/overflow.tsx) | A long path: levels truncate, and in a 320px container the middle ones collapse into «…», which screen readers announce as hidden levels. |
+| [ellipsis.tsx](examples/ellipsis.tsx) | Levels skipped on purpose shown as «…» with hidden text for screen readers — `Breadcrumb.Ellipsis`. |
 
 ## Mistakes
-- Items without `Breadcrumb.Separator` between them → add a separator between every pair.
+- Separators by hand between items → the root draws the chevrons.
 - `<Breadcrumb.Item href="…" current>` → the current page has no `href`.
 - Breadcrumb inside a flex row collapsing to zero width → give it `flex: 1 1 auto; min-width: 0`.
 - Home icon link without `aria-label` → add `aria-label="Главная"`.
 
 ## Related
-- [LinkButton](../link-button/COMPONENT.md)
-- [Tabs](../tabs/COMPONENT.md)
-- [PageContent](../page-content/COMPONENT.md)
+- **Built from:** [LinkButton](../link-button/COMPONENT.md), Icon (`nav.chevronRight`)
+- **See also:** [Tabs](../tabs/COMPONENT.md), [PageContent](../page-content/COMPONENT.md), [Stepper](../stepper/COMPONENT.md)

package/src/components/breadcrumb/examples/ellipsis.tsx

@@ -0,0 +1,12 @@
+/** Levels skipped on purpose shown as «…» with hidden text for screen readers — `Breadcrumb.Ellipsis`. */
+import { Breadcrumb } from "prime-ui-kit";
+
+export default function BreadcrumbEllipsisExample() {
+  return (
+    <Breadcrumb.Root>
+      <Breadcrumb.Item href="#catalog">Каталог</Breadcrumb.Item>
+      <Breadcrumb.Ellipsis />
+      <Breadcrumb.Item current>Кресло «Оптима»</Breadcrumb.Item>
+    </Breadcrumb.Root>
+  );
+}

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

@@ -1,60 +1,11 @@
-/* Layout for the Breadcrumb examples: semantic tokens only. */
+/* Layout of the Breadcrumb scenarios: semantic tokens only. */
 
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
+/* The trail measures its own width (container query), so its wrapper needs one. */
+.wide {
   width: 100%;
-  min-width: 0;
-}
-
-.sizeRow {
-  display: flex;
-  align-items: center;
-  gap: var(--prime-space-4);
-  min-width: 0;
-}
-
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-.caption {
-  flex: none;
-  min-width: var(--prime-space-8);
 }
 
 /* 320px — the narrowest supported width. */
 .narrow {
   width: min(100%, calc(var(--prime-drawer-width-s) - var(--prime-space-10)));
 }
-
-.header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  width: 100%;
-  min-width: 0;
-}
-
-.titleRow {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-}
-
-.actions {
-  display: flex;
-  gap: var(--prime-space-2);
-}
-
-/* Breadcrumb is a size container: it needs a definite width inside a flex row. */
-.trail {
-  flex: 1 1 auto;
-  min-width: 0;
-}

package/src/components/breadcrumb/examples/overflow.tsx

@@ -0,0 +1,26 @@
+/** A long path: levels truncate, and in a 320px container the middle ones collapse into «…», which screen readers announce as hidden levels. */
+import { Breadcrumb } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const LEVELS = ["Каталог", "Мебель", "Офисные кресла"];
+const CURRENT = "Эргономичное кресло с подголовником и поддержкой поясницы";
+
+export default function BreadcrumbOverflowExample() {
+  return (
+    <>
+      {[styles.wide, styles.narrow].map((width) => (
+        <div key={width} className={width}>
+          <Breadcrumb.Root>
+            {LEVELS.map((level) => (
+              <Breadcrumb.Item key={level} href={`#${level}`}>
+                {level}
+              </Breadcrumb.Item>
+            ))}
+            <Breadcrumb.Item current>{CURRENT}</Breadcrumb.Item>
+          </Breadcrumb.Root>
+        </div>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,12 @@
+/** The path to this page: links to the levels above and the current page last — `href`, `current`. */
+import { Breadcrumb } from "prime-ui-kit";
+
+export default function BreadcrumbOverviewExample() {
+  return (
+    <Breadcrumb.Root>
+      <Breadcrumb.Item href="#crm">CRM</Breadcrumb.Item>
+      <Breadcrumb.Item href="#clients">Клиенты</Breadcrumb.Item>
+      <Breadcrumb.Item current>ООО «Северный ветер»</Breadcrumb.Item>
+    </Breadcrumb.Root>
+  );
+}

package/src/components/breadcrumb/examples/sizes.tsx

@@ -1,27 +1,24 @@
-/** All five size tiers; text and chevron follow the control tier. Use to match the trail to the page header or the panel it sits in. */
-import { Breadcrumb, type ControlSize, Typography } from "prime-ui-kit";
+/** Every size tier; text and chevrons follow the control tier — `size`. */
+import { Breadcrumb, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-const sizes: ControlSize[] = ["xs", "s", "m", "l", "xl"];
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function BreadcrumbSizesExample() {
   return (
-    <div className={styles.stack}>
-      {sizes.map((size) => (
-        <div key={size} className={styles.sizeRow}>
-          <Typography.Root as="span" variant="code" tone="muted" className={styles.caption}>
+    <>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.wide}>
+          <Typography as="span" variant="caption" tone="muted">
             {size}
-          </Typography.Root>
-          <Breadcrumb.Root size={size} className={styles.trail}>
-            <Breadcrumb.Item href="#">Главная</Breadcrumb.Item>
-            <Breadcrumb.Separator />
-            <Breadcrumb.Item href="#">Заказы</Breadcrumb.Item>
-            <Breadcrumb.Separator />
+          </Typography>
+          <Breadcrumb.Root size={size}>
+            <Breadcrumb.Item href="#orders">Заказы</Breadcrumb.Item>
             <Breadcrumb.Item current>№ 48 213</Breadcrumb.Item>
           </Breadcrumb.Root>
         </div>
       ))}
-    </div>
+    </>
   );
 }

package/src/components/breadcrumb/examples/with-icon.tsx

@@ -0,0 +1,14 @@
+/** The root level as a home icon; a link without text is named for screen readers — `aria-label`. */
+import { Breadcrumb, Icon } from "prime-ui-kit";
+
+export default function BreadcrumbWithIconExample() {
+  return (
+    <Breadcrumb.Root>
+      <Breadcrumb.Item href="#home" aria-label="Главная">
+        <Icon name="nav.home" />
+      </Breadcrumb.Item>
+      <Breadcrumb.Item href="#invoices">Счета</Breadcrumb.Item>
+      <Breadcrumb.Item current>Счёт № 2041</Breadcrumb.Item>
+    </Breadcrumb.Root>
+  );
+}