{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"breadcrumb-clean","type":"registry:ui","title":"Breadcrumb (Clean)","description":"Where a page sits and the way back up – links with quiet separators, the current page last, a long middle folded into a … menu, long names shortened with the full one on hover","dependencies":[],"files":[{"path":"registry/breadcrumb-clean/breadcrumb-clean.tsx","type":"registry:ui","content":"\"use client\";\n\nimport {\n  createElement,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\n\n/*\n * Breadcrumb – a single self-contained file, clean style.\n * The trail from the top of a hierarchy to the page you are on: links with a quiet slash or chevron between them and\n * the current page last, in ink. A long trail folds its middle into a … button that opens the hidden crumbs as a\n * menu – past maxItems, and on its own when the row gets too narrow for them. Long names shorten with … and show in\n * full on hover. The styles are injected below, so no extra files are needed.\n */\n\n/** An icon from Hugeicons (e.g. `import { Folder01Icon } from \"@hugeicons/core-free-icons\"`) – drawn inline */\nexport type HugeIcon = readonly (readonly [string, { readonly [key: string]: string | number }])[];\n\nexport type BreadcrumbItem = {\n  label: string;\n  /** Makes the crumb a link */\n  href?: string;\n  /** Makes the crumb a button when there is no href – or runs before a link navigates (e.g. a router's navigate) */\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  /** A 14px glyph before the label: an inline SVG or a Hugeicons icon object */\n  icon?: ReactNode | HugeIcon;\n};\n\nexport type BreadcrumbProps = Omit<ComponentPropsWithRef<\"nav\">, \"children\"> & {\n  /** From the top down; the last one is the page you are on */\n  items: BreadcrumbItem[];\n  /** What sits between the crumbs */\n  separator?: \"slash\" | \"chevron\" | ReactNode;\n  /** The most crumbs shown before the middle folds into … (the first and the last ones stay) */\n  maxItems?: number;\n};\n\nexport function Breadcrumb({\n  items,\n  separator = \"slash\",\n  maxItems = 4,\n  className,\n  \"aria-label\": ariaLabel = \"Breadcrumb\",\n  ref,\n  ...rest\n}: BreadcrumbProps) {\n  const list = useRef<HTMLOListElement>(null);\n  const n = items.length;\n  // Folded by count: everything past maxItems, taken from just after the first crumb\n  const byCount = n > Math.max(2, maxItems) ? n - Math.max(2, maxItems) : 0;\n  // Folded by width: one more each time the row doesn't fit, until only the first and the current are left\n  const [extra, setExtra] = useState(0);\n  const [, setWidth] = useState(0);\n  const sig = items.map((i) => i.label).join(\"\\u0000\") + `|${maxItems}`;\n  const [seen, setSeen] = useState(sig);\n  if (seen !== sig) {\n    setSeen(sig);\n    setExtra(0);\n  }\n  const hidden = Math.min(Math.max(0, n - 2), byCount + extra);\n  const folded = items.slice(1, 1 + hidden);\n\n  // Before paint: still too tight for every crumb at a readable width – fold one more\n  useLayoutEffect(() => {\n    const ol = list.current;\n    if (!ol || hidden >= n - 2) return;\n    if (need(ol) > ol.clientWidth + 1) setExtra((e) => e + 1);\n  });\n\n  // A narrower or wider row starts over from the folding by count\n  useEffect(() => {\n    const ol = list.current;\n    if (!ol || typeof ResizeObserver === \"undefined\") return;\n    let width = ol.clientWidth;\n    const ro = new ResizeObserver(() => {\n      if (Math.abs(ol.clientWidth - width) < 1) return;\n      width = ol.clientWidth;\n      setExtra(0);\n      setWidth(width);\n    });\n    ro.observe(ol);\n    return () => ro.disconnect();\n  }, [n === 0]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (n === 0) return null;\n\n  const sep = (key: string) => (\n    <li key={key} className=\"ui-bcrc__sep\" role=\"presentation\" aria-hidden=\"true\">\n      {separator === \"slash\" ? \"/\" : separator === \"chevron\" ? <ChevronIcon /> : separator}\n    </li>\n  );\n\n  const nodes: ReactNode[] = [];\n  items.forEach((item, i) => {\n    if (i > 0 && i <= hidden) {\n      if (i === 1) {\n        nodes.push(sep(\"s-more\"));\n        nodes.push(\n          <li key=\"more\" className=\"ui-bcrc__item\">\n            <More items={folded} />\n          </li>,\n        );\n      }\n      return;\n    }\n    if (i > 0) nodes.push(sep(`s-${i}`));\n    const last = i === n - 1;\n    nodes.push(\n      <li key={`${i}-${item.label}`} className=\"ui-bcrc__item\" data-current={last || undefined}>\n        <Crumb item={item} current={last} />\n      </li>,\n    );\n  });\n\n  return (\n    <nav\n      {...rest}\n      ref={ref}\n      aria-label={ariaLabel}\n      className={[\"ui-bcrc\", className].filter(Boolean).join(\" \")}\n      data-tight={hidden >= n - 2 && n > 2 ? \"\" : undefined}\n    >\n      {/* React 19 hoists this into <head> once, no matter how many breadcrumbs render */}\n      <style href=\"ui-breadcrumb-clean\" precedence=\"default\">\n        {css}\n      </style>\n      <ol ref={list} className=\"ui-bcrc__list\">\n        {nodes}\n      </ol>\n    </nav>\n  );\n}\n\n/* ---------- One crumb ---------- */\n\nfunction Crumb({ item, current }: { item: BreadcrumbItem; current: boolean }) {\n  const inner = (\n    <>\n      {item.icon != null && (\n        <span className=\"ui-bcrc__icon\" aria-hidden=\"true\">\n          <Glyph icon={item.icon} />\n        </span>\n      )}\n      <span className=\"ui-bcrc__label\" data-label=\"\" dir=\"auto\">\n        {item.label}\n      </span>\n    </>\n  );\n  if (current)\n    return (\n      <span className=\"ui-bcrc__current\" aria-current=\"page\" onPointerEnter={fullTitle(item.label)}>\n        {inner}\n      </span>\n    );\n  if (item.href)\n    return (\n      <a className=\"ui-bcrc__link\" href={item.href} onClick={item.onClick} onPointerEnter={fullTitle(item.label)}>\n        {inner}\n      </a>\n    );\n  if (item.onClick)\n    return (\n      <button type=\"button\" className=\"ui-bcrc__link\" onClick={item.onClick} onPointerEnter={fullTitle(item.label)}>\n        {inner}\n      </button>\n    );\n  return (\n    <span className=\"ui-bcrc__link\" data-static=\"\" onPointerEnter={fullTitle(item.label)}>\n      {inner}\n    </span>\n  );\n}\n\n/** The full name as a tooltip – only while it is cut short */\nconst fullTitle = (label: string) => (e: MouseEvent<HTMLElement>) => {\n  const text = e.currentTarget.querySelector<HTMLElement>(\"[data-label]\");\n  if (!text) return;\n  if (text.scrollWidth > text.clientWidth + 1) e.currentTarget.title = label;\n  else e.currentTarget.removeAttribute(\"title\");\n};\n\n/** The width the crumbs want: each at its full name, but no more than the 200px a label may take */\nfunction need(ol: HTMLElement) {\n  let sum = 0;\n  for (const li of Array.from(ol.children) as HTMLElement[]) {\n    const label = li.querySelector<HTMLElement>(\"[data-label]\");\n    const box = li.getBoundingClientRect().width;\n    sum += label ? box - label.getBoundingClientRect().width + Math.min(label.scrollWidth, CAP) : box;\n  }\n  return sum;\n}\nconst CAP = 200;\n\n/* ---------- The folded crumbs: … and its menu ---------- */\n\nfunction More({ items }: { items: BreadcrumbItem[] }) {\n  const uid = useId();\n  const [open, setOpen] = useState(false);\n  const button = useRef<HTMLButtonElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n\n  const rows = () => Array.from(panel.current?.querySelectorAll<HTMLElement>(\"[role='menuitem']\") ?? []);\n  const close = (refocus: boolean) => {\n    setOpen(false);\n    if (refocus) button.current?.focus({ preventScroll: true });\n  };\n\n  // Into the top layer under the button, before paint; the first row takes the focus\n  useLayoutEffect(() => {\n    const el = panel.current;\n    const b = button.current;\n    if (!open || !el || !b) return;\n    if (\"showPopover\" in el && !el.matches(\":popover-open\")) el.showPopover();\n    const update = () => place(el, b.getBoundingClientRect());\n    update();\n    rows()[0]?.focus({ preventScroll: true });\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      if (\"hidePopover\" in el && el.isConnected && el.matches(\":popover-open\")) el.hidePopover();\n    };\n  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // A press outside closes it\n  useEffect(() => {\n    if (!open) return;\n    const down = (e: PointerEvent) => {\n      const t = e.target as Node;\n      if (!panel.current?.contains(t) && !button.current?.contains(t)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", down, true);\n    return () => document.removeEventListener(\"pointerdown\", down, true);\n  }, [open]);\n\n  const onKey = (e: KeyboardEvent<HTMLDivElement>) => {\n    const all = rows();\n    const at = all.indexOf(document.activeElement as HTMLElement);\n    const go = (i: number) => all[(i + all.length) % all.length]?.focus();\n    if (e.key === \"ArrowDown\") go(at + 1);\n    else if (e.key === \"ArrowUp\") go(at - 1);\n    else if (e.key === \"Home\") go(0);\n    else if (e.key === \"End\") go(all.length - 1);\n    else if (e.key === \"Escape\") close(true);\n    else if (e.key === \"Tab\") return setOpen(false);\n    else return;\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const pick = (item: BreadcrumbItem) => (e: MouseEvent<HTMLElement>) => {\n    item.onClick?.(e);\n    close(!item.href);\n  };\n\n  return (\n    <>\n      <button\n        ref={button}\n        type=\"button\"\n        className=\"ui-bcrc__more\"\n        aria-label={items.length === 1 ? \"Show 1 more crumb\" : `Show ${items.length} more crumbs`}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={open ? `${uid}-menu` : undefined}\n        title={items.map((i) => i.label).join(\" / \")}\n        onClick={() => setOpen((o) => !o)}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowDown\" && !open) {\n            e.preventDefault();\n            setOpen(true);\n          }\n        }}\n      >\n        <MoreIcon />\n      </button>\n      {open && (\n        <div ref={panel} id={`${uid}-menu`} className=\"ui-bcrc__menu\" role=\"menu\" aria-label=\"More crumbs\" popover=\"manual\" onKeyDown={onKey}>\n          {items.map((item, i) => {\n            const body = (\n              <>\n                <span className=\"ui-bcrc__menu-icon\" aria-hidden=\"true\">\n                  {item.icon != null ? <Glyph icon={item.icon} /> : <NestIcon />}\n                </span>\n                <span className=\"ui-bcrc__menu-label\" dir=\"auto\">\n                  {item.label}\n                </span>\n              </>\n            );\n            const style = { \"--depth\": Math.min(i, 3) } as CSSProperties;\n            return item.href ? (\n              <a key={i} role=\"menuitem\" tabIndex={-1} className=\"ui-bcrc__menu-item\" style={style} href={item.href} title={item.label} onClick={pick(item)}>\n                {body}\n              </a>\n            ) : (\n              <button\n                key={i}\n                type=\"button\"\n                role=\"menuitem\"\n                tabIndex={-1}\n                className=\"ui-bcrc__menu-item\"\n                style={style}\n                title={item.label}\n                aria-disabled={item.onClick ? undefined : true}\n                onClick={item.onClick ? pick(item) : undefined}\n              >\n                {body}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** Under the button, or above it when there is no room; pushed inside the window */\nfunction place(el: HTMLElement, r: DOMRect) {\n  const pad = 8;\n  const gap = 6;\n  const vw = document.documentElement.clientWidth || window.innerWidth;\n  const vh = window.innerHeight;\n  el.style.maxHeight = \"\";\n  const w = el.offsetWidth;\n  const h = el.offsetHeight;\n  const below = vh - r.bottom - gap - pad;\n  const above = r.top - gap - pad;\n  const down = below >= h || below >= above;\n  const fit = Math.max(120, Math.min(h, down ? below : above));\n  const rtl = getComputedStyle(el).direction === \"rtl\";\n  let left = rtl ? r.right - w : r.left - 4;\n  left = Math.min(Math.max(pad, left), vw - pad - w);\n  el.style.top = `${Math.round(down ? r.bottom + gap : r.top - gap - fit)}px`;\n  el.style.left = `${Math.round(left)}px`;\n  if (h > fit) el.style.maxHeight = `${fit}px`;\n  el.dataset.side = down ? \"bottom\" : \"top\";\n}\n\n/* ---------- Icons ---------- */\n\nconst isHugeIcon = (icon: unknown): icon is HugeIcon =>\n  Array.isArray(icon) && icon.length > 0 && icon.every((part) => Array.isArray(part) && typeof part[0] === \"string\");\n\n/** Draws a Hugeicons icon object as an inline SVG; anything else is shown as it is */\nfunction Glyph({ icon }: { icon: ReactNode | HugeIcon }) {\n  if (!isHugeIcon(icon)) return <>{icon}</>;\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" focusable=\"false\">\n      {icon.map(([tag, { key, ...attrs }], i) => createElement(tag, { ...attrs, key: String(key ?? i) }))}\n    </svg>\n  );\n}\n\n/* Icons: Hugeicons Free (MIT, © Hugeicons, hugeicons.com) */\nfunction ChevronIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" focusable=\"false\">\n      <path d=\"M9 6s6 4.42 6 6-6 6-6 6\" />\n    </svg>\n  );\n}\nfunction MoreIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" focusable=\"false\" aria-hidden=\"true\">\n      <path d=\"M6 12.5V12m12 .5V12m-6 .5V12m-5 .5a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm12 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-6 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z\" />\n    </svg>\n  );\n}\nfunction NestIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" focusable=\"false\">\n      <path d=\"M19 15h-7c-3.77 0-5.66 0-6.83-1.17C4 12.66 4 10.77 4 7V4\" />\n      <path d=\"M15 20s5-3.68 5-5-5-5-5-5\" />\n    </svg>\n  );\n}\n\n/* ---------- Styles ---------- */\n\nconst css = /* css */ `\n/* Colors as variables – override them on .ui-bcrc (see Theming in the docs) */\n.ui-bcrc {\n  --ui-bcrc-ink: var(--aui-ink, rgba(0, 0, 0, 0.88));\n  --ui-bcrc-muted: var(--aui-muted, rgba(0, 0, 0, 0.45));\n  --ui-bcrc-faint: var(--aui-placeholder, rgba(0, 0, 0, 0.27));\n  --ui-bcrc-wash: rgba(0, 0, 0, 0.04);\n  --ui-bcrc-surface: var(--aui-overlay, var(--aui-surface, #ffffff));\n  --ui-bcrc-text: rgba(0, 0, 0, 0.61);\n  --ui-bcrc-glow: rgba(0, 0, 0, 0.035);\n  --ui-bcrc-shadow: var(--aui-shadow-popover, 0 0 0 0.5px var(--aui-border-strong, rgba(0, 0, 0, 0.1)), 0 12px 32px -8px rgba(0, 0, 0, 0.16));\n  --ui-bcrc-focus: var(--aui-focus, rgba(0, 96, 226, 0.7));\n  --ui-bcrc-ease: var(--aui-ease, cubic-bezier(0.22, 1, 0.36, 1));\n  --ui-bcrc-radius: calc(var(--aui-radius-sm, 5px) - 1px);\n\n  display: block;\n  min-width: 0;\n  font-family: var(--aui-font, \"Inter\", \"InterVariable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  font-size: 13px;\n  line-height: 20px;\n  font-weight: 400;\n  color: var(--ui-bcrc-muted);\n  -webkit-font-smoothing: antialiased;\n}\n.ui-bcrc *, .ui-bcrc *::before, .ui-bcrc *::after { box-sizing: border-box; }\n\n/* One line; the crumbs shorten before anything wraps */\n.ui-bcrc__list {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n}\n/* The other crumbs keep their names (each capped at 200px, and folded into … when the row is short); only the\n   current page shortens to fit */\n.ui-bcrc__item { display: flex; flex: none; align-items: center; min-width: 0; }\n.ui-bcrc__item[data-current] { flex: 0 1 auto; }\n\n.ui-bcrc__sep {\n  display: grid;\n  flex: none;\n  place-items: center;\n  min-width: 20px;\n  padding: 0 2px;\n  color: var(--ui-bcrc-faint);\n  user-select: none;\n}\n.ui-bcrc__sep > svg { display: block; width: 12px; height: 12px; }\n.ui-bcrc__sep > svg:dir(rtl) { transform: scaleX(-1); }\n\n/* The links: quiet text that turns to ink on hover */\n.ui-bcrc__link,\n.ui-bcrc__current {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ui-bcrc-radius);\n  background: none;\n  font: inherit;\n  color: inherit;\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.ui-bcrc__link { cursor: pointer; transition: color 120ms ease; }\n.ui-bcrc__link[data-static] { cursor: default; }\n.ui-bcrc__link:not([data-static]):hover { color: var(--ui-bcrc-ink); }\n.ui-bcrc__link:focus-visible,\n.ui-bcrc__more:focus-visible { outline: 2px solid var(--ui-bcrc-focus); outline-offset: 2px; }\n.ui-bcrc__current { font-weight: 500; color: var(--ui-bcrc-ink); cursor: default; animation: ui-bcrc-in 260ms var(--ui-bcrc-ease) both; }\n\n/* Long names shorten with … – the full one on hover */\n.ui-bcrc__label { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ui-bcrc__current .ui-bcrc__label { max-width: none; }\n.ui-bcrc__icon { display: grid; flex: none; place-items: center; width: 14px; height: 14px; }\n.ui-bcrc__icon > svg, .ui-bcrc__icon > img { display: block; width: 14px; height: 14px; }\n\n/* The … for the folded crumbs */\n.ui-bcrc__more {\n  position: relative;\n  display: grid;\n  flex: none;\n  place-items: center;\n  width: 24px;\n  height: 20px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ui-bcrc-radius);\n  background: none;\n  color: var(--ui-bcrc-muted);\n  font: inherit;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ui-bcrc__more:hover, .ui-bcrc__more[aria-expanded=\"true\"] { background: var(--ui-bcrc-wash); color: var(--ui-bcrc-ink); }\n.ui-bcrc__more > svg { display: block; width: 16px; height: 16px; }\n\n/* The menu with the folded crumbs: the Dropdown Menu's card in the top layer */\n.ui-bcrc__menu {\n  position: fixed;\n  inset: auto;\n  z-index: 1000;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  align-content: start;\n  gap: 1px;\n  box-sizing: border-box;\n  min-width: 168px;\n  max-width: min(320px, calc(100vw - 16px));\n  max-height: calc(100vh - 16px);\n  margin: 0;\n  padding: 4px;\n  border: 0;\n  border-radius: calc(var(--aui-radius-lg, 10px) + 2px);\n  background: var(--ui-bcrc-surface);\n  box-shadow: var(--ui-bcrc-shadow);\n  color: var(--ui-bcrc-text);\n  font-family: var(--aui-font, \"Inter\", \"InterVariable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  font-size: 13px;\n  line-height: 20px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  -webkit-font-smoothing: antialiased;\n  transform-origin: top left;\n  animation: ui-bcrc-menu 220ms var(--ui-bcrc-ease) both;\n}\n.ui-bcrc__menu::backdrop { display: none; }\n.ui-bcrc__menu[data-side=\"top\"] { transform-origin: bottom left; animation-name: ui-bcrc-menu-up; }\n.ui-bcrc__menu-item {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 32px;\n  margin: 0;\n  padding: 0 10px 0 calc(10px + var(--depth, 0) * 12px);\n  border: 0;\n  border-radius: calc(var(--aui-radius-sm, 5px) + 3px);\n  background: none;\n  font: inherit;\n  color: inherit;\n  text-align: start;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ui-bcrc__menu-item:hover:not([aria-disabled]), .ui-bcrc__menu-item:focus { background: var(--ui-bcrc-glow); color: var(--ui-bcrc-ink); outline: none; }\n.ui-bcrc__menu-item:focus-visible { outline: 2px solid var(--ui-bcrc-focus); outline-offset: -2px; }\n.ui-bcrc__menu-item[aria-disabled] { cursor: default; }\n.ui-bcrc__menu-icon { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--ui-bcrc-muted); }\n.ui-bcrc__menu-icon > svg, .ui-bcrc__menu-icon > img { display: block; width: 15px; height: 15px; }\n.ui-bcrc__menu-icon > svg:dir(rtl) { transform: scaleX(-1); }\n.ui-bcrc__menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n\n@keyframes ui-bcrc-in { from { opacity: 0; transform: translateX(-4px); } }\n@keyframes ui-bcrc-menu { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }\n@keyframes ui-bcrc-menu-up { from { opacity: 0; transform: scale(0.96) translateY(4px); } }\n\n/* Touch screens: crumbs and rows a finger can hit, without moving the text */\n@media (pointer: coarse) {\n  .ui-bcrc__link:not([data-static]) { position: relative; }\n  .ui-bcrc__link:not([data-static])::after { content: \"\"; position: absolute; inset: -10px -4px; }\n  .ui-bcrc__more::after { content: \"\"; position: absolute; inset: -8px -6px; }\n  .ui-bcrc__menu-item { min-height: 40px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ui-bcrc__current, .ui-bcrc__menu { animation: none; }\n  .ui-bcrc__link, .ui-bcrc__more, .ui-bcrc__menu-item { transition-duration: 1ms; }\n}\n\n/* Dark mode: follows a .dark class or data-theme=\"dark\" on any ancestor, e.g. <html> */\n:where(.dark, [data-theme=\"dark\"]) .ui-bcrc {\n  --ui-bcrc-ink: var(--aui-ink, rgba(255, 255, 255, 0.9));\n  --ui-bcrc-muted: var(--aui-muted, rgba(255, 255, 255, 0.45));\n  --ui-bcrc-faint: var(--aui-placeholder, rgba(255, 255, 255, 0.28));\n  --ui-bcrc-wash: rgba(255, 255, 255, 0.06);\n  --ui-bcrc-surface: var(--aui-overlay, var(--aui-surface, #1b1b1e));\n  --ui-bcrc-text: rgba(255, 255, 255, 0.62);\n  --ui-bcrc-glow: rgba(255, 255, 255, 0.06);\n  --ui-bcrc-shadow: var(--aui-shadow-popover, 0 0 0 0.5px var(--aui-border-strong, rgba(255, 255, 255, 0.14)), 0 12px 32px -8px rgba(0, 0, 0, 0.6));\n  --ui-bcrc-focus: var(--aui-focus, rgba(77, 141, 255, 0.8));\n}\n`;\n"}]}