prime-ui-kit 0.7.11 → 0.9.0

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

@@ -0,0 +1,48 @@
+/* Layout helpers for the Banner examples. Semantic tokens only. */
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  width: 100%;
+  min-width: 0;
+}
+
+.sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-6);
+  width: 100%;
+  min-width: 0;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+/* 320px column: the banner's own container query moves actions under the text. */
+.narrow {
+  width: min(100%, calc(var(--prime-space-20) * 4));
+}
+
+.pageFrame {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--prime-card-radius);
+  background: var(--prime-color-card-bg);
+  box-shadow: var(--prime-card-shadow);
+}
+
+.pageBody {
+  padding: var(--prime-space-5) var(--prime-space-4) var(--prime-space-8);
+}
+
+.restore {
+  align-self: flex-start;
+}

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

@@ -0,0 +1,92 @@
+/** `placement="page"` is an edge-to-edge strip above a page, `placement="inset"` (default) a rounded block in the flow or in a card; below 36rem of its own width the actions move under the text. Use `page` for account-wide notices, `inset` for section messages. */
+import { CreditCard, TriangleAlert } from "lucide-react";
+import { Banner, Button, Card, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+function TrialBanner({ placement }: { placement?: "inset" | "page" }) {
+  return (
+    <Banner.Root
+      tone="warning"
+      placement={placement}
+      role="region"
+      aria-label="Пробный период"
+      onDismiss={() => {}}
+    >
+      <Banner.Content>
+        <Banner.Icon as={TriangleAlert} aria-hidden />
+        <Banner.Title>Пробный период закончится 12 октября</Banner.Title>
+        <Banner.Description>
+          Выберите тариф, чтобы сохранить отчёты и настройки команды. Данные останутся доступны ещё
+          30 дней.
+        </Banner.Description>
+        <Banner.Actions>
+          <Button.Root variant="outline" tone="neutral">
+            Сравнить тарифы
+          </Button.Root>
+          <Button.Root>Выбрать тариф</Button.Root>
+        </Banner.Actions>
+      </Banner.Content>
+    </Banner.Root>
+  );
+}
+
+export default function BannerPlacementExample() {
+  return (
+    <div className={styles.sections}>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          <Typography.Root as="span" variant="code" tone="muted">
+            placement="page"
+          </Typography.Root>{" "}
+          — над страницей
+        </Typography.Root>
+        <div className={styles.pageFrame}>
+          <TrialBanner placement="page" />
+          <div className={styles.pageBody}>
+            <Typography.Root as="h3" variant="heading-s">
+              Отчёты
+            </Typography.Root>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          <Typography.Root as="span" variant="code" tone="muted">
+            placement="inset"
+          </Typography.Root>{" "}
+          — внутри карточки
+        </Typography.Root>
+        <Card.Root variant="panel">
+          <Card.SectionHeader>
+            <Card.SectionTitle>Оплата</Card.SectionTitle>
+          </Card.SectionHeader>
+          <Card.Body>
+            <Banner.Root tone="danger">
+              <Banner.Content>
+                <Banner.Icon as={CreditCard} aria-hidden />
+                <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>
+
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          320px — действия под текстом
+        </Typography.Root>
+        <div className={styles.narrow}>
+          <TrialBanner />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+/** 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";
+
+import styles from "./examples.module.css";
+
+const sizes: ControlSize[] = ["xs", "s", "m", "l", "xl"];
+
+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>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+/** 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";
+
+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;
+  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: "Уведомления по почте отключены" },
+];
+
+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}>
+                <Banner.Content>
+                  <Banner.Icon as={icon} aria-hidden />
+                  <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>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/breadcrumb/COMPONENT.md

@@ -1,139 +1,141 @@
 # Breadcrumb
 
-**Проектирование по умолчанию:** при проектировании экранов и примеров изначально выбирай **`m`** для `size` (где есть ось размера), если явно не оговорено иное.
+**Category:** navigation
 
-## Canonical
+> Breadcrumbs: the path to the current page.
 
-**What it is:** A `nav` with an ordered list (`ol`) of trail segments. **`Breadcrumb.Item`** with **`href`** uses **`LinkButton`**; without **`href`** it is plain text. **`Breadcrumb.Separator`** defaults to a subtle chevron icon; **`Breadcrumb.Ellipsis`** renders a static middle collapse marker (`…`). **`Breadcrumb.Root`** sets **`size`** (`s` | `m` | `l` | `xl`) for links, current text, ellipsis, and the default separator icon via context and **`ControlSizeProvider`**.
+## When to use
+- Detail and nested pages, above the page title, to show where the page sits and to jump up a level.
+- Deep hierarchies (catalogs, documentation) — the trail truncates and collapses instead of wrapping.
 
-**When to use**
+## When not to use
+- 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).
 
-- Hierarchical URLs (docs, catalog, admin) where jumping to a parent beats reopening the main nav.
-- Deep screens (orders, settings leaf pages) to answer “where am I”.
-- Long trails where you manually keep root, near parent, and leaf and insert **`Ellipsis`** for skipped middle levels.
-
-**When not to use**
-
-- Primary IA — sidebars and top nav own top-level structure; breadcrumbs are supplemental.
-- Flat or two-level apps — a title or back control may be enough.
-- Need to pick hidden levels — **`Ellipsis`** is not interactive; use a dropdown or popover separately.
-- As the only page heading — keep a real **`h1`** (or [Typography](../typography/COMPONENT.md)); breadcrumbs do not replace it.
+## Import
+```tsx
+import { Breadcrumb } from "prime-ui-kit";
+```
 
-**Minimal pattern**
+## 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.
+
+## API
+No part forwards a ref.
+
+### Breadcrumb.Root
++ native `<nav>` props (`HTMLAttributes<HTMLElement>`); an `aria-label` passed here overrides `labels.nav`.
+
+| 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`. |
+
+### 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`. |
+
+### Breadcrumb.Separator
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | chevron icon | Custom separator. |
+| `className` | `string` | — | Extra class. |
+
+### Breadcrumb.Ellipsis
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | — | Extra class. |
+
+## Variants
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` | 12/16 text, 14 icon, no gap | dense panels | |
+| `s` | 13/20 text, 16 icon, gap 4 | page headers above a heading | |
+| `m` | 14/20 text, 16 icon, gap 4 | default | yes |
+| `l` | 16/24 text, 20 icon, gap 8 | large page headers | |
+| `xl` | 18/24 text (title-l), 20 icon, gap 8 | hero headers | |
+
+### 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 | |
+| 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 | |
+
+**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.
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| current | `current` | `aria-current="page"` on the text span |
+| 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 «… ›» |
+
+Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
+
+## Layout & spacing
+- The root is a size container (`container-type: inline-size`, `inline-size: 100%`): inside a flex row give it `flex: 1 1 auto; min-width: 0`.
+- Above a page title: `gap: var(--prime-space-2)` between the trail and the title row.
+- 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`.
+- 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` |
+
+## Examples
+| File | Scenario | When to use this pattern |
+|---|---|---|
+| [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";
 
-export function Example() {
+export function OrderTrail() {
   return (
     <Breadcrumb.Root>
-      <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+      <Breadcrumb.Item href="/orders">Заказы</Breadcrumb.Item>
       <Breadcrumb.Separator />
-      <Breadcrumb.Item current>Current page</Breadcrumb.Item>
+      <Breadcrumb.Item current>№ 48 213</Breadcrumb.Item>
     </Breadcrumb.Root>
   );
 }
 ```
 
-**Non‑negotiables**
-
-- **Current page:** omit **`href`** on the active segment and set **`current`**. With **`href`**, the segment is always a link and does **not** get **`aria-current="page"`**.
-- **List semantics:** only **`Item`**, **`Separator`**, and **`Ellipsis`** as **direct** children of **`Root`** (each renders an **`li`**). Do not inject arbitrary wrappers inside the list.
-- **No routing API:** URLs and navigation are app-owned; there is no `asChild`, no controlled “value”, and **no built‑in auto-collapse** — you place **`Ellipsis`** where you want it.
-
-**Runnable examples (package import)**
-
-| Scenario | File |
-|----------|------|
-| Minimal trail | [`examples/canonical.tsx`](./examples/canonical.tsx) |
-| Four `size` rows (`s`–`xl` on `Root`) | [`examples/sizes.tsx`](./examples/sizes.tsx) |
-| Links + `current`; middle segment without `href` | [`examples/states.tsx`](./examples/states.tsx) |
-| Icon-only first `Item` (`aria-label`) + custom `Separator` | [`examples/composition.tsx`](./examples/composition.tsx) |
-| Narrow container; trail wraps (`flex-wrap`) | [`examples/full-width.tsx`](./examples/full-width.tsx) |
-| Long path + `Ellipsis` | [`examples/long-path-ellipsis.tsx`](./examples/long-path-ellipsis.tsx) |
-| Deep docs path | [`examples/deep-documentation.tsx`](./examples/deep-documentation.tsx) |
-| E‑commerce PDP | [`examples/ecommerce-product.tsx`](./examples/ecommerce-product.tsx) |
-| SaaS settings hierarchy | [`examples/saas-settings.tsx`](./examples/saas-settings.tsx) |
-
-**Playground snippets** (app alias `@/…`, same scenarios as the rows above where noted)
-
-| File | Coverage |
-|------|----------|
-| [`playground/snippets/breadcrumb/sizes.tsx`](../../../playground/snippets/breadcrumb/sizes.tsx) | `size` `s`–`xl` |
-| [`playground/snippets/breadcrumb/states.tsx`](../../../playground/snippets/breadcrumb/states.tsx) | Links + `current`; `Item` without `href` |
-| [`playground/snippets/breadcrumb/composition.tsx`](../../../playground/snippets/breadcrumb/composition.tsx) | Home icon + `/` separators |
-| [`playground/snippets/breadcrumb/full-width.tsx`](../../../playground/snippets/breadcrumb/full-width.tsx) | Narrow box; long labels wrap |
-| [`playground/snippets/breadcrumb/long-ellipsis.tsx`](../../../playground/snippets/breadcrumb/long-ellipsis.tsx) | Same trail shape as `long-path-ellipsis.tsx` (Russian copy in playground) |
-
----
-
-## Extended
-
-### Composition
-
-- **`Breadcrumb.Root`** — `nav` with default **`aria-label="Breadcrumb"`**; spread **`…rest`** for overrides (e.g. localized label). Inner structure is a single **`ol`**.
-- **Typical sequence:** `[Item] [Separator] [Item] [Separator] … [Item]`; for a collapsed middle, use **`[Item] [Separator] … [Ellipsis] [Separator] … [Item]`** as in [`long-path-ellipsis.tsx`](./examples/long-path-ellipsis.tsx).
-- **`Separator`** — **`aria-hidden="true"`**; override **`children`** for `/`, `>`, or other glyphs.
-- **Icon-only first item** — set **`aria-label`** on **`Item`** when **`href`** is set and there is no visible text.
-
-### Scenarios (extended)
-
-1. **Deep documentation path** — mirror the doc tree so each segment links to its index page; last segment is current text ([`deep-documentation.tsx`](./examples/deep-documentation.tsx)).
-2. **E‑commerce** — storefront → category → subcategory → … → SKU name; every ancestor is a link, PDP title is **`current`** ([`ecommerce-product.tsx`](./examples/ecommerce-product.tsx)).
-3. **SaaS settings hierarchy** — org → settings area → section → leaf (e.g. invoices); matches how admins mental-model nested admin URLs ([`saas-settings.tsx`](./examples/saas-settings.tsx)).
-4. **Long trail + ellipsis** — show first levels and the tail; **`Ellipsis`** stands in for omitted middle **only visually** — screen readers still read the visible segments in order ([`long-path-ellipsis.tsx`](./examples/long-path-ellipsis.tsx)). On very narrow viewports the row may **wrap** (flex wrap in styles); do not rely on breadcrumbs alone for mobile orientation if the path is long.
-
-### Rules
-
-- **`Item` props are not an escape hatch** — only **`href`**, **`current`**, **`children`**, **`className`**, and **`aria-label`**; extra **`li`** attributes are not forwarded.
-- **No disabled, loading, or error props** on **`Item`**.
-- **Separators** are decorative; meaning lives in **`Item`** labels and route targets.
-
-### API
-
-#### Breadcrumb.Root
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| children | `React.ReactNode` | — | yes | `Item`, `Separator`, and `Ellipsis` as direct children of the inner `ol` |
-| className | `string` | — | no | Extra class on the `nav` |
-| size | `BreadcrumbSize` | `"m"` | no | Scale for links, current text, ellipsis, default separator icon (`"s"` \| `"m"` \| `"l"` \| `"xl"`) |
-| …rest | `React.HTMLAttributes<HTMLElement>` | — | no | Additional attributes on the `nav` |
-
-#### Breadcrumb.Item
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| href | `string` | — | no | If set, renders `LinkButton`; otherwise renders a `span` |
-| current | `boolean` | — | no | Current-page styling and `aria-current="page"` on the `span` when there is no `href` |
-| children | `React.ReactNode` | — | no | Label or custom content (e.g. icon) |
-| className | `string` | — | no | Class on the `li` |
-| aria-label | `string` | — | no | For link items without visible text (e.g. icon-only home) |
-
-#### Breadcrumb.Separator
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| children | `React.ReactNode` | `Icon` `nav.chevronRight` (`tone="subtle"`) | no | Custom separator content |
-| className | `string` | — | no | Class on the `li` |
-
-#### Breadcrumb.Ellipsis
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| className | `string` | — | no | Class on the `li` that displays the ellipsis character |
-
-### Related
-
-- [LinkButton](../link-button/COMPONENT.md) — used inside `Item` when `href` is set.
-- [Typography](../typography/COMPONENT.md) — page titles and captions beside the trail.
-
----
-
-## Note for LLM and codegen
+## Mistakes
+- Items without `Breadcrumb.Separator` between them → add a separator between every pair.
+- `<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="Главная"`.
 
-- Import **`Breadcrumb`** from **`prime-ui-kit`**; compose **`Root` → `Item` / `Separator` / `Ellipsis`** only — no hidden slots or `asChild`.
-- Mark the active route with **`current`** and **no `href`** on that **`Item`**; otherwise **`aria-current="page"`** will not apply.
-- Collapsing the path is **manual**: insert **`Breadcrumb.Ellipsis`** between **`Separator`** nodes; it is **not** a menu and does not expose hidden links to assistive tech.
-- Icon-only links require **`aria-label`** on **`Item`**.
-- For copy-paste recipes, prefer the files under **`src/components/breadcrumb/examples/`** (including **`sizes`**, **`states`**, **`composition`**, **`full-width`** aligned with playground); for interactive kit demos see **`playground/snippets/breadcrumb/`**.
+## Related
+- [LinkButton](../link-button/COMPONENT.md)
+- [Tabs](../tabs/COMPONENT.md)
+- [PageContent](../page-content/COMPONENT.md)

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

@@ -0,0 +1,56 @@
+/** Long path: segments truncate, from five children the middle collapses into «…» below 30rem (still announced), plus a manual `Breadcrumb.Ellipsis`. Use for deep catalogs and long page names. */
+import { Breadcrumb, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+function Path() {
+  return (
+    <Breadcrumb.Root>
+      <Breadcrumb.Item href="#">Каталог</Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Item href="#">Мебель</Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Item href="#">Офисные кресла</Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Item current>
+        Эргономичное кресло с подголовником и поддержкой поясницы
+      </Breadcrumb.Item>
+    </Breadcrumb.Root>
+  );
+}
+
+export default function BreadcrumbCollapseExample() {
+  return (
+    <div className={styles.stack}>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          Полная ширина
+        </Typography.Root>
+        <Path />
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          320px — автосворачивание
+        </Typography.Root>
+        <div className={styles.narrow}>
+          <Path />
+        </div>
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          Вручную:{" "}
+          <Typography.Root as="span" variant="code" tone="muted">
+            Breadcrumb.Ellipsis
+          </Typography.Root>
+        </Typography.Root>
+        <Breadcrumb.Root>
+          <Breadcrumb.Item href="#">Каталог</Breadcrumb.Item>
+          <Breadcrumb.Separator />
+          <Breadcrumb.Ellipsis />
+          <Breadcrumb.Separator />
+          <Breadcrumb.Item current>Кресло «Оптима»</Breadcrumb.Item>
+        </Breadcrumb.Root>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+/* Layout for the Breadcrumb examples: semantic tokens only. */
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-5);
+  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/page-header.tsx

@@ -0,0 +1,31 @@
+/** Page header: an `s` breadcrumb above the title and actions, the first link is a home icon with `aria-label`. Use at the top of detail pages. */
+import { Breadcrumb, Button, Icon, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function BreadcrumbPageHeaderExample() {
+  return (
+    <header className={styles.header}>
+      <Breadcrumb.Root size="s">
+        <Breadcrumb.Item href="#" aria-label="Главная">
+          <Icon name="nav.home" />
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item href="#">Клиенты</Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item current>ООО «Северный ветер»</Breadcrumb.Item>
+      </Breadcrumb.Root>
+      <div className={styles.titleRow}>
+        <Typography.Root as="h2" variant="heading-m">
+          ООО «Северный ветер»
+        </Typography.Root>
+        <div className={styles.actions}>
+          <Button.Root variant="outline" tone="neutral">
+            Изменить
+          </Button.Root>
+          <Button.Root>Новый счёт</Button.Root>
+        </div>
+      </div>
+    </header>
+  );
+}