prime-ui-kit 0.15.0 → 0.16.0

package/dist/skill/reference/components/badge/examples/controlled.tsx

@@ -0,0 +1,32 @@
+/** Delivery cities as toggle chips whose state the screen owns: the summary counts the chosen ones — `pressed`, `onPressedChange`. */
+import { Badge, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const CITIES = ["Москва", "Казань", "Екатеринбург", "Новосибирск"];
+
+export default function BadgeControlledExample() {
+  const [chosen, setChosen] = React.useState<string[]>(["Москва"]);
+  const toggle = (city: string, pressed: boolean) =>
+    setChosen((prev) => (pressed ? [...prev, city] : prev.filter((item) => item !== city)));
+
+  return (
+    <div className={styles.filters}>
+      <div className={styles.badges}>
+        {CITIES.map((city) => (
+          <Badge.Root
+            key={city}
+            pressed={chosen.includes(city)}
+            onPressedChange={(pressed) => toggle(city, pressed)}
+          >
+            {city}
+          </Badge.Root>
+        ))}
+      </div>
+      <Typography variant="body-s" tone="muted">
+        {chosen.length > 0 ? `Доставка в: ${chosen.join(", ")}` : "Города доставки не выбраны"}
+      </Typography>
+    </div>
+  );
+}

package/dist/skill/reference/components/badge/examples/examples.module.css

@@ -7,14 +7,14 @@
   align-items: flex-end;
   justify-content: center;
   gap: var(--prime-space-3);
-  width: min(100%, var(--prime-modal-width-m));
+  width: min(100%, var(--prime-layout-form-width-m));
 }
 
 /* applied-filters.tsx, server-tags.tsx: a row of badges above a list. */
 .filters {
   display: grid;
   gap: var(--prime-space-3);
-  width: min(100%, var(--prime-modal-width-s));
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 .badges {

package/dist/skill/reference/components/badge/examples/filter-values.tsx

@@ -1,4 +1,4 @@
-/** Filter values as toggles with a hide action that slides in without changing the width — `onPress`, `pressed`, `Badge.Action`, `persistent`. */
+/** Filter values as toggles with a hide action that slides in without changing the width — `pressed`, `onPressedChange`, `Badge.Action`, `persistent`. */
 import { Badge } from "prime-ui-kit";
 import * as React from "react";
 
@@ -10,8 +10,7 @@ const VALUES = ["Москва", "Казань", "Новосибирск", "Со
 
 export default function BadgeFilterValuesExample() {
   const [modes, setModes] = React.useState<Record<string, Mode>>({ Казань: "show", Сочи: "hide" });
-  const set = (value: string, mode: Exclude<Mode, undefined>) =>
-    setModes((prev) => ({ ...prev, [value]: prev[value] === mode ? undefined : mode }));
+  const set = (value: string, mode: Mode) => setModes((prev) => ({ ...prev, [value]: mode }));
 
   return (
     <div className={styles.badges}>
@@ -20,16 +19,15 @@ export default function BadgeFilterValuesExample() {
         return (
           <Badge.Root
             key={value}
-            color={mode === "show" ? "blue" : mode === "hide" ? "red" : "gray"}
             pressed={mode === "show"}
-            onPress={() => set(value, "show")}
+            onPressedChange={(pressed) => set(value, pressed ? "show" : undefined)}
           >
             {mode === "hide" ? `НЕ ${value}` : value}
             <Badge.Action
               label={mode === "hide" ? `Не скрывать ${value}` : `Скрыть ${value}`}
               pressed={mode === "hide"}
               persistent={mode === "hide"}
-              onClick={() => set(value, "hide")}
+              onClick={() => set(value, mode === "hide" ? undefined : "hide")}
             />
           </Badge.Root>
         );

package/dist/skill/reference/components/badge/examples/in-controls.tsx

@@ -1,4 +1,4 @@
-/** Inside a button or a field the badge takes the tier one step down without `size`. */
+/** Inside a button or a field the badge takes the tier one step down by itself — `Badge.Root`. */
 import { Badge, Button, Input } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/dist/skill/reference/components/badge/examples/overview.tsx

@@ -1,13 +1,14 @@
-/** Publication statuses: soft badges where the text carries the meaning and the hue repeats it — `color`. */
+/** Invoice statuses: soft badges where the text carries the meaning and the tone repeats it — `tone`. */
 import { Badge } from "prime-ui-kit";
 
 export default function BadgeOverviewExample() {
   return (
     <>
-      <Badge.Root>Черновик</Badge.Root>
-      <Badge.Root color="blue">На ревью</Badge.Root>
-      <Badge.Root color="green">Опубликован</Badge.Root>
-      <Badge.Root color="red">Ошибка</Badge.Root>
+      <Badge.Root tone="neutral">Черновик</Badge.Root>
+      <Badge.Root tone="info">Выставлен</Badge.Root>
+      <Badge.Root tone="success">Оплачен</Badge.Root>
+      <Badge.Root tone="warning">Ждёт оплаты</Badge.Root>
+      <Badge.Root tone="danger">Просрочен</Badge.Root>
     </>
   );
 }

package/dist/skill/reference/components/badge/examples/square.tsx

@@ -0,0 +1,21 @@
+/** File formats as square tiles of text, large enough for three letters; the hue sorts them by kind — `shape`, `size`, `color`. */
+import { Badge } from "prime-ui-kit";
+
+const FORMATS = [
+  { format: "PDF", color: "red" },
+  { format: "XLS", color: "green" },
+  { format: "DOC", color: "blue" },
+  { format: "ZIP", color: "gray" },
+] as const;
+
+export default function BadgeSquareExample() {
+  return (
+    <>
+      {FORMATS.map((item) => (
+        <Badge.Root key={item.format} shape="square" size="xl" color={item.color}>
+          {item.format}
+        </Badge.Root>
+      ))}
+    </>
+  );
+}

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

@@ -1,4 +1,4 @@
-/** An inactive badge, a pressable toggle off and on, a removable one and one that waits on a request — `disabled`, `onPress`, `pressed`, `onRemove`, `loading`. */
+/** An inactive badge, a toggle chip off and on, a removable one and one that waits on a request — `disabled`, `pressed`, `onRemove`, `loading`. */
 import { Badge, Typography } from "prime-ui-kit";
 
 const noop = () => undefined;
@@ -15,15 +15,15 @@ export default function BadgeStatesExample() {
         </Typography>
       </div>
       <div>
-        <Badge.Root color="blue" onPress={noop} pressed={false}>
+        <Badge.Root pressed={false} onPressedChange={noop}>
           Москва
         </Badge.Root>
         <Typography as="span" variant="caption" tone="muted">
-          onPress
+          pressed: false
         </Typography>
       </div>
       <div>
-        <Badge.Root color="blue" onPress={noop} pressed>
+        <Badge.Root pressed onPressedChange={noop}>
           Москва
         </Badge.Root>
         <Typography as="span" variant="caption" tone="muted">

package/dist/skill/reference/components/badge/examples/with-icon.tsx

@@ -1,4 +1,4 @@
-/** A leading dot, a leading or trailing icon and an icon-only square with a name — `Badge.Dot`, `Badge.Icon`, `aria-label`. */
+/** A leading dot in the text color or its own hue, a leading or trailing icon and an icon-only square with a name — `Badge.Dot`, `color`, `Badge.Icon`, `aria-label`. */
 import { Badge, Icon, Typography } from "prime-ui-kit";
 
 export default function BadgeWithIconExample() {
@@ -13,6 +13,15 @@ export default function BadgeWithIconExample() {
           Badge.Dot
         </Typography>
       </div>
+      <div>
+        <Badge.Root>
+          <Badge.Dot color="purple" />
+          Проект «Север»
+        </Badge.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          Badge.Dot · color
+        </Typography>
+      </div>
       <div>
         <Badge.Root color="purple">
           <Badge.Icon>

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

@@ -44,9 +44,9 @@ Banner.Root                 <div>; variant, tone, size, placement
 |---|---|---|---|
 | `variant` | `"solid" \| "soft" \| "outline"` | `"soft"` | `soft` tinted fill, `solid` saturated fill for urgent messages, `outline` card fill with a tone ring. |
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"info"` | Semantic color of the message. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Spacing, icon and title follow the control tier; the description is one step smaller. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Spacing, icon and title follow the control tier; the description is one step smaller. Without it the tier of the host. |
 | `placement` | `"inset" \| "page"` | `"inset"` | `inset` — rounded block in the flow or in a card; `page` — edge-to-edge strip above a page, content aligned to the page column. |
-| `onDismiss` | `() => void` | — | Renders a close button (top-right, or last in `Banner.Actions`) and calls this on click; the parent unmounts the banner, which closes up in place, and moves focus to a sensible place. |
+| `onDismiss` | `() => void` | — | Renders a close button (top-right, or last in `Banner.Actions`) and calls this on click; the parent unmounts the banner, which closes up in place; focus inside it moves to the next tab stop of the page. |
 | `labels` | `Partial<BannerLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `role` (`alert`, `status`, `region`), `aria-label` and the other div attributes. |
 
@@ -127,14 +127,18 @@ No `open` prop: the parent mounts and unmounts the banner. A mounted banner ente
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Actions and the close button are regular buttons in Tab order. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The banner has no role of its own: give an error after an action `role="alert"`, a calm status `role="status"`, a page strip `role="region"` with `aria-label`.
 - The icon is `aria-hidden`: the title carries the meaning, not the color.
-- The close button is named by `labels.dismiss`. It leaves with the banner, so after dismissing the parent moves focus to a sensible place: the control that takes the banner's spot, or the next heading or action of the section (see `dismissible.tsx`).
+- The close button is named by `labels.dismiss`. It leaves with the banner, and focus inside the banner moves to the next tab stop of the page (the previous one at its end); inside `Crossfade` it moves to the state that takes the banner's place (see `dismissible.tsx`).
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -146,11 +150,11 @@ No `open` prop: the parent mounts and unmounts the banner. A mounted banner ente
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | A maintenance notice: icon, title and description on a soft info fill. |
+| [overview.tsx](examples/overview.tsx) | A maintenance notice: icon, title and description on a soft info fill — `Banner.Icon`, `Banner.Title`, `Banner.Description`. |
 | [variants.tsx](examples/variants.tsx) | Every treatment on every tone: soft by default, solid for urgent, outline for calm — `variant`, `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier: padding, icon and title follow the control tier, the description is one step smaller — `size`. |
 | [structure.tsx](examples/structure.tsx) | 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`. |
-| [dismissible.tsx](examples/dismissible.tsx) | The parent owns visibility: the close button calls back, the banner closes up and focus moves to the restore button; the button name comes from labels — `onDismiss`, `labels`. |
+| [dismissible.tsx](examples/dismissible.tsx) | The parent owns visibility: the close button calls back, the banner fades into the restore button and focus follows it; the button name comes from labels — `onDismiss`, `labels`. |
 | [page-strip.tsx](examples/page-strip.tsx) | An edge-to-edge strip above a page and a rounded block inside a card — `placement`. |
 | [narrow.tsx](examples/narrow.tsx) | Below 36rem of its own width the banner moves the actions under the text — `Banner.Actions`. |
 

package/dist/skill/reference/components/banner/examples/dismissible.tsx

@@ -1,4 +1,4 @@
-/** The parent owns visibility: the close button calls back, the banner closes up and focus moves to the restore button; the button name comes from labels — `onDismiss`, `labels`. */
+/** The parent owns visibility: the close button calls back, the banner fades into the restore button and focus follows it; the button name comes from labels — `onDismiss`, `labels`. */
 import { Banner, Button, Crossfade, Icon } from "prime-ui-kit";
 import * as React from "react";
 
@@ -6,29 +6,13 @@ import styles from "./examples.module.css";
 
 export default function BannerDismissibleExample() {
   const [visible, setVisible] = React.useState(true);
-  const bannerRef = React.useRef<HTMLDivElement>(null);
-  const restoreRef = React.useRef<HTMLButtonElement>(null);
-  const toggled = React.useRef(false);
-
-  // The pressed button leaves with its block: focus goes to the control that takes its place.
-  React.useEffect(() => {
-    if (!toggled.current) return;
-    if (visible) bannerRef.current?.querySelector("button")?.focus();
-    else restoreRef.current?.focus();
-  }, [visible]);
-
-  const toggle = (next: boolean) => {
-    toggled.current = true;
-    setVisible(next);
-  };
 
   return (
     <Crossfade state={visible ? "banner" : "restore"} className={styles.region}>
       {visible ? (
         <Banner.Root
-          ref={bannerRef}
           tone="accent"
-          onDismiss={() => toggle(false)}
+          onDismiss={() => setVisible(false)}
           labels={{ dismiss: "Скрыть объявление" }}
         >
           <Banner.Content>
@@ -40,7 +24,7 @@ export default function BannerDismissibleExample() {
           </Banner.Content>
         </Banner.Root>
       ) : (
-        <Button.Root ref={restoreRef} variant="outline" tone="neutral" onClick={() => toggle(true)}>
+        <Button.Root variant="outline" tone="neutral" onClick={() => setVisible(true)}>
           Вернуть баннер
         </Button.Root>
       )}

package/dist/skill/reference/components/banner/examples/overview.tsx

@@ -1,4 +1,4 @@
-/** A maintenance notice: icon, title and description on a soft info fill. */
+/** A maintenance notice: icon, title and description on a soft info fill — `Banner.Icon`, `Banner.Title`, `Banner.Description`. */
 import { Banner, Icon } from "prime-ui-kit";
 
 export default function BannerOverviewExample() {

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

@@ -22,7 +22,7 @@ import { Breadcrumb } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Breadcrumb.Root           <nav aria-label> + <ol>; size; chevrons between levels; auto-collapse
+Breadcrumb.Root           <nav aria-label> + <ol>; size; chevrons between levels; auto-collapse into a «…» menu
 ├─ Breadcrumb.Item        <li>: a link (href → LinkButton), text, or the current page (current)
 └─ Breadcrumb.Ellipsis    <li> with «…» for levels skipped on purpose
 ```
@@ -32,11 +32,11 @@ Breadcrumb.Root           <nav aria-label> + <ol>; size; chevrons between levels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Breadcrumb.Root
-`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.
+`ref` → `HTMLElement` (the `<nav>`). `<nav aria-label>` with an `<ol>`; draws the chevrons between levels, sets the size and, on narrow containers, collapses the middle levels into a «…» menu button that lists them.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Text of the links, the current page and the ellipsis; chevrons and icons take the same tier. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Text of the links, the current page and the ellipsis; chevrons, icons and the collapse menu take the same tier. Without it the tier of its host, else `m`. |
 | `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`. |
@@ -73,7 +73,7 @@ Breadcrumb.Root           <nav aria-label> + <ol>; size; chevrons between levels
 ### Item kind
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| link (`href`) | muted text, medium weight; primary text on hover and focus, no underline | every ancestor level | |
+| link (`href`) | a `LinkButton` in the muted trail tone (`tone="muted"`): muted text, primary 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 | |
@@ -86,7 +86,8 @@ Use links for every ancestor and `current` on the last item; `s` above a `headin
 | 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 level truncates with an ellipsis, max width `2 × --prime-space-24` (192; `--prime-space-24 + --prime-space-6`, 120, when its container is below 30rem — its own for 3+ levels, the nearest one above for 1–2); the last 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 |
+| auto-collapse | 3+ levels and a container `< 30rem` | `data-collapsible="true"`; middle levels are `display: none` and replaced by «… ›»: a ghost menu button (`Dropdown.Trigger`, named by `labels.ellipsis`) whose menu lists them — links stay links, a level without `href` is a disabled row |
+| collapse menu open | a press, `Enter` or `ArrowDown` on the «…» | `aria-expanded="true"` on the button; a `role="menu"` panel at the tier size |
 
 Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 
@@ -99,15 +100,20 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
-| `Tab` | Moves focus between the level links; the current page is not focusable. |
-| `Enter` | Follows the link. |
+| `Tab` | Moves focus between the level links and the «…» of a collapsed path; the current page is not focusable. |
+| `Enter` | Follows the link; on the «…» opens the menu of the hidden levels. |
+| `ArrowDown` · `ArrowUp` · `Escape` | In the menu of hidden levels: move between them, close it and return to the «…». |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - `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`.
+- Collapsed middle levels leave the layout and the tab order (no invisible focus stops); the automatic «…» is a menu button (`aria-haspopup="menu"`) named by `labels.ellipsis`, and its menu lists them as links.
 - Icon-only links need `aria-label` on the Item.
 
 ### Labels
@@ -116,7 +122,7 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 | Key | Default | Used for |
 |---|---|---|
 | `nav` | `"Навигационная цепочка"` | `aria-label` of the `nav` landmark. |
-| `ellipsis` | `"Скрытые разделы"` | Hidden text of `Breadcrumb.Ellipsis`. |
+| `ellipsis` | `"Скрытые разделы"` | Name of the collapse menu button and hidden text of `Breadcrumb.Ellipsis`. |
 
 ## Examples
 | Example | Shows |
@@ -124,7 +130,7 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 | [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 — `Breadcrumb.Item`, `current`. |
+| [overflow.tsx](examples/overflow.tsx) | A long path: levels truncate, and in a 320px container the middle ones collapse into a «…» menu that lists them — `Breadcrumb.Item`, `current`. |
 | [ellipsis.tsx](examples/ellipsis.tsx) | Levels skipped on purpose shown as «…» whose hidden text names them for screen readers — `Breadcrumb.Ellipsis`, `labels`. |
 
 ## Mistakes
@@ -134,5 +140,5 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 - Home icon link without `aria-label` → add `aria-label="Главная"`.
 
 ## Related
-- **Built from:** [LinkButton](../link-button/COMPONENT.md), Icon (`nav.chevronRight`)
+- **Built from:** [LinkButton](../link-button/COMPONENT.md) (`tone="muted"`), [Button](../button/COMPONENT.md) and [Dropdown](../dropdown/COMPONENT.md) (the collapse menu), Icon (`nav.chevronRight`), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Tabs](../tabs/COMPONENT.md), [PageContent](../page-content/COMPONENT.md), [Stepper](../stepper/COMPONENT.md)

package/dist/skill/reference/components/breadcrumb/examples/examples.module.css

@@ -7,5 +7,5 @@
 
 /* 320px — the narrowest supported width. */
 .narrow {
-  width: min(100%, calc(var(--prime-drawer-width-s) - var(--prime-space-10)));
+  width: min(100%, var(--prime-layout-min-width));
 }

package/dist/skill/reference/components/breadcrumb/examples/overflow.tsx

@@ -1,4 +1,4 @@
-/** A long path: levels truncate, and in a 320px container the middle ones collapse into «…», which screen readers announce as hidden levels — `Breadcrumb.Item`, `current`. */
+/** A long path: levels truncate, and in a 320px container the middle ones collapse into a «…» menu that lists them — `Breadcrumb.Item`, `current`. */
 import { Breadcrumb } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/dist/skill/reference/components/breadcrumb/examples/sizes.tsx

@@ -1,24 +1,22 @@
 /** 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 = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function BreadcrumbSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.wide}>
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
           <Breadcrumb.Root size={size}>
             <Breadcrumb.Item href="#orders">Заказы</Breadcrumb.Item>
             <Breadcrumb.Item current>№ 48 213</Breadcrumb.Item>
           </Breadcrumb.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
         </div>
       ))}
-    </>
+    </div>
   );
 }

package/dist/skill/reference/components/breadcrumb/examples/with-icon.tsx

@@ -1,14 +1,21 @@
 /** 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";
+import { Breadcrumb, Icon, Typography } 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>
+    <div>
+      <div>
+        <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>
+        <Typography as="span" variant="caption" tone="muted">
+          aria-label
+        </Typography>
+      </div>
+    </div>
   );
 }