{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "type": "registry:ui",
  "description": "Hierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.",
  "categories": [
    "navigation"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/breadcrumb/breadcrumb.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { ChevronRight, Ellipsis } from 'lucide'\nimport { icon } from '../../lib/icon'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\n/**\n * Breadcrumb as small composable elements (no id references between parts, so\n * they can be separate elements, like React's parts):\n *\n *   <uip-breadcrumb>                      nav[aria-label=breadcrumb] > ol (Breadcrumb + BreadcrumbList)\n *     <uip-breadcrumb-item>               role=listitem (BreadcrumbItem)\n *       <uip-breadcrumb-link href=\"#\">    <a> (BreadcrumbLink)\n *     <uip-breadcrumb-separator>          role=presentation; default chevron, slot to override\n *     <uip-breadcrumb-item>\n *       <uip-breadcrumb-page>             aria-current=page (BreadcrumbPage)\n *     <uip-breadcrumb-ellipsis>           (BreadcrumbEllipsis)\n *\n * Item/separator hosts ARE the list items (ElementInternals role), so the\n * <ol> → listitem relationship holds in the accessibility tree and classes\n * such as `hidden md:inline-flex` go straight on the host.\n * React's `className` on the inner <a>/<ol> → `::part(base)`.\n */\n\nabstract class Base extends LitElement {\n  protected internals = this.attachInternals()\n  protected abstract slotName: string\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', this.slotName)\n  }\n}\n\nexport class UipBreadcrumb extends Base {\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n  protected slotName = 'breadcrumb'\n\n  render() {\n    return html`<nav aria-label=\"breadcrumb\">\n      <ol\n        part=\"base\"\n        data-slot=\"breadcrumb-list\"\n        class=\"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\"\n      >\n        <slot></slot>\n      </ol>\n    </nav>`\n  }\n}\n\nexport class UipBreadcrumbItem extends Base {\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n  protected slotName = 'breadcrumb-item'\n\n  constructor() {\n    super()\n    this.internals.role = 'listitem'\n  }\n\n  render() {\n    return html`<span part=\"base\" class=\"inline-flex items-center gap-1.5\"><slot></slot></span>`\n  }\n}\n\n/** `href`, `target`, `rel` forward to the inner <a>; the host's aria-label too. */\nexport class UipBreadcrumbLink extends Base {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: inline; }`]\n  protected slotName = 'breadcrumb-link'\n\n  static properties = {\n    href: {},\n    target: {},\n    rel: {},\n    accessibleLabel: { attribute: 'aria-label' },\n  }\n\n  href?: string\n  target?: string\n  rel?: string\n  accessibleLabel?: string\n\n  render() {\n    return html`<a\n      part=\"base\"\n      data-slot=\"breadcrumb-link\"\n      href=${this.href ?? nothing}\n      target=${this.target ?? nothing}\n      rel=${this.rel ?? nothing}\n      aria-label=${this.accessibleLabel ?? nothing}\n      class=\"hover:text-foreground focus-visible:outline-ring rounded-sm underline-offset-4 transition-colors duration-200 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2\"\n      ><slot></slot\n    ></a>`\n  }\n}\n\nexport class UipBreadcrumbPage extends Base {\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: inline; }`]\n  protected slotName = 'breadcrumb-page'\n\n  render() {\n    return html`<span part=\"base\" data-slot=\"breadcrumb-page\" aria-current=\"page\" class=\"text-foreground cursor-default font-normal\"\n      ><slot></slot\n    ></span>`\n  }\n}\n\n/** Slot any node (an icon, `·`) to replace the default chevron. */\nexport class UipBreadcrumbSeparator extends Base {\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n  protected slotName = 'breadcrumb-separator'\n\n  constructor() {\n    super()\n    this.internals.role = 'presentation'\n    this.internals.ariaHidden = 'true'\n  }\n\n  render() {\n    return html`<span part=\"base\" class=\"[&_svg]:size-3.5\"\n      ><slot class=\"[&::slotted(svg)]:size-3.5\">${icon(ChevronRight, 'chevron-right')}</slot></span\n    >`\n  }\n}\n\nexport class UipBreadcrumbEllipsis extends Base {\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n  protected slotName = 'breadcrumb-ellipsis'\n\n  render() {\n    return html`<span part=\"base\" data-slot=\"breadcrumb-ellipsis\" class=\"flex size-11 items-center justify-center\">\n      <slot>${icon(Ellipsis, 'ellipsis', 'size-4')}</slot>\n      <span class=\"sr-only\">More</span>\n    </span>`\n  }\n}\n\nconst define = (tag: string, cls: CustomElementConstructor) => customElements.get(tag) || customElements.define(tag, cls)\ndefine('uip-breadcrumb', UipBreadcrumb)\ndefine('uip-breadcrumb-item', UipBreadcrumbItem)\ndefine('uip-breadcrumb-link', UipBreadcrumbLink)\ndefine('uip-breadcrumb-page', UipBreadcrumbPage)\ndefine('uip-breadcrumb-separator', UipBreadcrumbSeparator)\ndefine('uip-breadcrumb-ellipsis', UipBreadcrumbEllipsis)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-breadcrumb': UipBreadcrumb\n    'uip-breadcrumb-item': UipBreadcrumbItem\n    'uip-breadcrumb-link': UipBreadcrumbLink\n    'uip-breadcrumb-page': UipBreadcrumbPage\n    'uip-breadcrumb-separator': UipBreadcrumbSeparator\n    'uip-breadcrumb-ellipsis': UipBreadcrumbEllipsis\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/breadcrumb/breadcrumb.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}