Breadcrumb

1import * as React from 'react';
2 
3// @interlace/breadcrumb v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/breadcrumb
5// What changed since: https://ds.interlace.tools/c/breadcrumb#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — Breadcrumb
10 *
11 * A server-rendered, semantically-tagged trail of ancestor links. The
12 * compositional API mirrors the shadcn surface so consumers swap drop-in, and
13 * `BreadcrumbLink` keeps a server-safe `asChild` seam (`React.cloneElement`,
14 * NOT Base UI `useRender`) so the whole tree stays an RSC and composes with
15 * `next/link` without forcing a client boundary.
16 *
17 * Anatomy:
18 *   Breadcrumb (nav[aria-label="breadcrumb"], data-min-viewport)
19 *     └─ BreadcrumbList (ol)
20 *         ├─ BreadcrumbItem (li)
21 *         │   └─ BreadcrumbLink (a, or asChild = cloned child)
22 *         ├─ BreadcrumbSeparator (li[role="presentation"] · ChevronRight)
23 *         ├─ BreadcrumbItem
24 *         │   └─ BreadcrumbPage (span[aria-current="page"])
25 *         └─ BreadcrumbEllipsis (span · MoreHorizontal + sr-only "More")
26 *
27 * | Rule | Concept                          | Where in this file                                   |
28 * | ---- | -------------------------------- | ---------------------------------------------------- |
29 * | R4   | Extends native els               | Every part extends `React.ComponentProps<'…'>`       |
30 * | R6   | data-slot on every part          | data-slot="breadcrumb" / "-list" / "-item" / …       |
31 * | R7   | className merged + ...rest       | `cn(BASE, className)` + `{...props}` on every part   |
32 * | R10  | Composition seam                 | BreadcrumbLink accepts `asChild` (server-safe slot)  |
33 * | R13  | Ecosystem first                  | Lucide icons (ChevronRight / MoreHorizontal)         |
34 * | R18  | Tailwind only                    | Zero inline style                                    |
35 * | R19  | Tokens only                      | gap-xs / text-ui-sm / text-muted-foreground / size-4 |
36 * | R20  | AA contrast                      | foreground vs muted-foreground; AA-cleared tokens    |
37 * | R25  | Server component                 | No hooks → no 'use client'                           |
38 * | R26  | A11y from native els             | `nav` + ordered list + `aria-current` + role         |
39 *
40 * MIN_VIEWPORT=480 rationale: a 3-segment trail with 24-32ch labels collapses
41// … truncated