Menubar

---
// src/components/ui/overlays/menubar/Menubar.astro — headless primitive (see ../../README.md).
// The application-style menu bar: File / Edit / View. Compose MenubarMenu pairs inside it.
//
// It is not a row of Dropdowns, and the difference is what the shared `_menu` controller adds:
// ArrowLeft/ArrowRight walk between menus — from a closed trigger, and from INSIDE an open menu,
// where they close this one and open the neighbour — ArrowDown opens the focused menu, and once any
// menu is open the pointer alone switches between them, which is what every desktop menu bar does
// and what makes a bar of dropdowns feel wrong when it does not.
//
// One deliberate deviation from the ARIA menubar pattern: every trigger stays in the tab order
// rather than sharing one roving tab stop. Roving `tabindex` would have to be applied by script, and
// this library's floor is that a primitive is operable with its script absent — a menubar with no
// tab stops at all is not. The arrow keys are the addition, not the only way in.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div role="menubar" class={className} data-slot="menubar" {...rest}>
  <slot />
</div>

<script>
  import "../../_menu";
</script>

---
// src/components/ui/overlays/menubar/MenubarContent.astro — Menubar compound part (see ../../README.md).
// One menu's panel: a top-layer `role="menu"` on the native Popover API, with native light-dismiss,
// Escape and focus return. `data-anchor` opts it into the shared `_anchor` controller, which places
// it under its trigger and flips it up near the bottom of the viewport. `id` is required — the
// trigger's `popovertarget` names it.
//
// Compose ContextMenuItem, the Menu parts, or a SubMenu inside: every menu surface in this library
// is discovered by role, so they are interchangeable.
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  id: string;
  side?: "bottom" | "top" | "left" | "right";
  align?: "start" | "center" | "end";
  offset?: number;
};

const { side = "bottom", align = "start", offset, class: className, ...rest } = Astro.props;
---

<div
  popover="auto"
  role="menu"
  data-slot="menubar-content"
  data-anchor
  data-side={side}
  data-align={align}
  data-offset={offset}
  class={className}
  {...rest}
>
  <slot />
</div>

---
// src/components/ui/overlays/menubar/MenubarMenu.astro — Menubar compound part (see ../../README.md).
// Holds one MenubarTrigger and its MenubarContent so the pair stays together in the markup.
//
// `role="none"` is load-bearing, not tidiness: the only children a `role="menubar"` may own are menu
// items, and a bare wrapper <div> between the bar and its triggers puts a generic container in the
// accessibility tree where an item belongs. Removing the wrapper from the tree makes each trigger a
// direct child of the bar again, which is what a screen reader needs to count and announce them.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div role="none" class={className} data-slot="menubar-menu" {...rest}>
  <slot />
</div>

---
// src/components/ui/overlays/menubar/MenubarTrigger.astro — Menubar compound part (see ../../README.md).
// One menu's name in the bar. Toggles the MenubarContent whose `id` equals this trigger's `for`, via
// the native Popover API — so showing one menu natively dismisses its sibling, which is exactly the
// mutual exclusion a menu bar needs and none of it is ours to write.
//
// `role="menuitem"` because in a menubar the trigger IS an item of the bar, and `aria-haspopup="menu"`
// says it leads to a menu. `aria-expanded` is synced by the shared `_anchor` controller; the shared
// `_menu` controller is what makes the arrow keys and pointer-follow work.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & { for: string };

const { for: target, class: className, ...rest } = Astro.props;
---

<button
  type="button"
  popovertarget={target}
  role="menuitem"
  aria-haspopup="menu"
  aria-expanded="false"
  data-slot="menubar-trigger"
  class={className}
  {...rest}
>
  <slot />
</button>

import Menubar from "./Menubar.astro";
import MenubarContent from "./MenubarContent.astro";
import MenubarMenu from "./MenubarMenu.astro";
import MenubarTrigger from "./MenubarTrigger.astro";

export { Menubar, MenubarContent, MenubarMenu, MenubarTrigger };
export default Menubar;