Breadcrumb

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Breadcrumb — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// shadcn source of truth (React/Radix anatomy we mirror):
8//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx
9//   repos/shadcn-ui/apps/v4/content/docs/components/radix/breadcrumb.mdx
10//
11// APG pattern (the accessibility contract):
12//   repos/aria-practices/content/patterns/breadcrumb/breadcrumb-pattern.html
13// The APG says: keyboard interaction is "Not applicable" — a breadcrumb is
14// just a list of links, so there is ZERO JS here. The ARIA contract is:
15//   1. The trail lives inside a navigation landmark.            (<nav>)
16//   2. The landmark is labelled via aria-label / aria-labelledby.
17//   3. The link to the current page carries aria-current="page".
18//      "If the element representing the current page is not a link,
19//       aria-current is optional."
20//
21// HOW WE DIFFER FROM RADIX shadcn:
22//   - Radix renders BreadcrumbPage as <span role="link" aria-disabled="true"
23//     aria-current="page">. That role="link" is an emulation that makes AT
24//     announce a non-interactive element as a link — exactly the kind of
25//     platform-faking AGENTS.md forbids. We drop role/aria-disabled and ship
26//     a plain <span aria-current="page">: a real non-link element, which the
27//     APG explicitly endorses ("If … not a link, aria-current is optional").
28//     We keep aria-current because it still conveys "this is the current page"
29//     and is harmless on a span:
30//       repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-current/
31//   - Radix BreadcrumbSeparator/Ellipsis use role="presentation"; we use plain
32//     aria-hidden="true" which already removes the node from the a11y tree
33//     (MDN aria-hidden) — no extra role needed for a decorative <li>/<span>.
34//   - We render BreadcrumbList as <ol> (ordered: hierarchy has a direction),
35//     matching the APG description "list of links … in hierarchical order".
36//       repos/mdn/files/en-us/web/html/reference/elements/ol/
37 
38// Root navigation landmark. data-slot="breadcrumb".
39type BreadcrumbProps = PropsWithChildren<{
40  // Accessible name for the navigation landmark.
41  ariaLabel?: string
42  // Id of a visible heading that labels the landmark. When set, that heading
43  // is the name source and the defaulted aria-label is NOT emitted, so the
44// … truncated