{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "menubar",
  "title": "Menubar",
  "type": "registry:ui",
  "description": "Top-level menu bar — File / Edit / View — for desktop-style apps. Same primitives as Dropdown Menu but laid out horizontally and keyboard-navigable across siblings (left/right arrows).",
  "categories": [
    "navigation"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/menubar/menubar.ts",
      "content": "import { LitElement, css, html, type TemplateResult } from 'lit'\nimport { MenuBase, setAttr, type MenuClasses, type Placement } from '../dropdown-menu/menu-core'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\n// React's class strings, verbatim (packages/registry-react/components/menubar).\nconst classes: MenuClasses = {\n  content:\n    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',\n  subContent:\n    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n  item: \"focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  checkboxItem:\n    \"focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  radioItem:\n    \"focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  label: 'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n  separator: 'bg-border -mx-1 my-1 h-px',\n  shortcut: 'text-muted-foreground ml-auto text-xs tracking-widest',\n  subTrigger:\n    'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus-visible:ring-2 focus-visible:ring-inset data-[inset]:pl-8',\n  subChevron: 'ml-auto size-4',\n  originVar: '--radix-menubar-content-transform-origin',\n  availableHeightVar: '--radix-menubar-content-available-height',\n}\n\nconst triggerClass =\n  'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none cursor-default'\n\n/**\n * <uip-menubar-menu> — A single menu item inside a Menubar.\n */\nexport class UipMenubarMenu extends MenuBase {\n  protected readonly menuPrefix = 'menubar' as const\n  protected readonly C = classes\n  protected readonly defaults: Placement = { side: 'bottom', align: 'start', sideOffset: 8, alignOffset: -4 }\n\n  get trigger(): HTMLElement | null {\n    const slot = this.renderRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const slotted = slot?.assignedElements()[0] as HTMLElement | undefined\n    return slotted ?? null\n  }\n\n  protected isTriggerEvent(path: EventTarget[]) {\n    const t = this.trigger\n    return !!t && path.includes(t)\n  }\n\n  protected focusTrigger() {\n    this.trigger?.focus()\n  }\n\n  protected menuLabel() {\n    const t = this.trigger\n    return t?.getAttribute('aria-label') || t?.textContent?.trim() || undefined\n  }\n\n  protected onOpenStateRendered() {\n    const t = this.trigger\n    if (!t) return\n    setAttr(t, 'data-uipkge', '')\n    setAttr(t, 'data-slot', 'menubar-trigger')\n    setAttr(t, 'role', 'menuitem')\n    setAttr(t, 'aria-haspopup', 'menu')\n    setAttr(t, 'aria-expanded', this.open ? 'true' : 'false')\n    setAttr(t, 'data-state', this.open ? 'open' : 'closed')\n    if (!t.classList.contains('menubar-trigger-styled')) {\n      t.className = cn(triggerClass, t.className)\n      t.classList.add('menubar-trigger-styled')\n    }\n  }\n\n  private disabledTrigger() {\n    const t = this.trigger\n    return !t || (t.hasAttribute('disabled') && t.getAttribute('disabled') !== 'false')\n  }\n\n  openFrom(focus: 'first' | 'last' | 'content') {\n    this.anchor = this.trigger\n    this.focusOnOpen = focus\n    this.setOpen(true)\n  }\n\n  closeMenu(returnFocus = false) {\n    this.closeAll(returnFocus)\n  }\n\n  private onTriggerPointerDown(e: PointerEvent) {\n    if (this.disabledTrigger() || e.button !== 0 || e.ctrlKey) return\n    if (this.open) this.closeAll(false)\n    else {\n      e.preventDefault()\n      this.openFrom('content')\n    }\n  }\n\n  private onTriggerKeyDown(e: KeyboardEvent) {\n    if (this.disabledTrigger()) return\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      if (this.open) this.closeAll(true)\n      else this.openFrom('first')\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      if (this.open) this.closeAll(true)\n      else this.openFrom('last')\n    }\n  }\n\n  private onTriggerPointerEnter() {\n    const menubar = this.closest('uip-menubar') as UipMenubar | null\n    if (menubar && menubar.hasAnyOpenMenu() && !this.open) {\n      menubar.closeAllMenus()\n      this.openFrom('content')\n    }\n  }\n\n  protected renderTrigger(): TemplateResult {\n    return html`<slot\n      name=\"trigger\"\n      @slotchange=${() => this.onOpenStateRendered()}\n      @pointerdown=${this.onTriggerPointerDown}\n      @keydown=${this.onTriggerKeyDown}\n      @pointerenter=${this.onTriggerPointerEnter}\n    ></slot>`\n  }\n}\n\n/**\n * <uip-menubar-trigger> — Optional wrapper for menubar menu trigger.\n */\nexport class UipMenubarTrigger extends LitElement {\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('slot', 'trigger')\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'menubar-trigger')\n    this.setAttribute('tabindex', '0')\n  }\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\n/**\n * <uip-menubar> — The container for menubar menus.\n */\nexport class UipMenubar extends LitElement {\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\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', 'menubar')\n    this.setAttribute('role', 'menubar')\n    this.setAttribute('aria-orientation', 'horizontal')\n    this.addEventListener('keydown', this.onKeyDown.bind(this))\n  }\n\n  hasAnyOpenMenu(): boolean {\n    const menus = Array.from(this.querySelectorAll('uip-menubar-menu')) as UipMenubarMenu[]\n    return menus.some((m) => m.open)\n  }\n\n  closeAllMenus() {\n    const menus = Array.from(this.querySelectorAll('uip-menubar-menu')) as UipMenubarMenu[]\n    menus.forEach((m) => m.closeMenu(false))\n  }\n\n  private onKeyDown(e: KeyboardEvent) {\n    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\n      const menus = Array.from(this.querySelectorAll('uip-menubar-menu')) as UipMenubarMenu[]\n      if (menus.length === 0) return\n      const triggers = menus.map((m) => m.trigger).filter(Boolean) as HTMLElement[]\n      const activeIdx = triggers.findIndex((t) => t === document.activeElement || t.contains(document.activeElement))\n      if (activeIdx === -1) return\n\n      e.preventDefault()\n      const nextIdx =\n        e.key === 'ArrowRight'\n          ? (activeIdx + 1) % triggers.length\n          : (activeIdx - 1 + triggers.length) % triggers.length\n      const nextTrigger = triggers[nextIdx]\n      nextTrigger?.focus()\n\n      if (this.hasAnyOpenMenu()) {\n        this.closeAllMenus()\n        menus[nextIdx]?.openFrom('first')\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        data-uipkge=\"\"\n        data-slot=\"menubar\"\n        class=\"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs\"\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-menubar-trigger') || customElements.define('uip-menubar-trigger', UipMenubarTrigger)\ncustomElements.get('uip-menubar-menu') || customElements.define('uip-menubar-menu', UipMenubarMenu)\ncustomElements.get('uip-menubar') || customElements.define('uip-menubar', UipMenubar)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-menubar': UipMenubar\n    'uip-menubar-menu': UipMenubarMenu\n    'uip-menubar-trigger': UipMenubarTrigger\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/menubar/menubar.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/dropdown-menu.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}