Menubar

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Menubar — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// An app-style, visually-persistent horizontal bar of menus (File / Edit /
8// View …). Each top-level item is a button that opens a submenu.
9//
10// shadcn-ui ships @radix-ui/react-menubar; we rebuild the SAME semantics on
11// web standards instead of a JS-driven overlay:
12//   - The bar is role="menubar" (default aria-orientation horizontal).
13//   - Each trigger is role="menuitem" with aria-haspopup="menu" +
14//     aria-expanded, and opens its submenu via the native Popover API
15//     (popovertarget + popover="auto"). The platform then gives us light
16//     dismiss, ESC, top-layer rendering, and focus restoration for free —
17//     exactly like dropdown-menu.tsx.
18//   - Submenu items are role="menuitem" and reuse the dropdown-menu item
19//     styling/contract.
20//
21// The APG composite-widget keyboard contract (roving tabindex on the bar,
22// ArrowLeft/Right along the bar, ArrowDown to open + focus first item,
23// ArrowUp/Down inside a menu, Home/End, type-ahead, ESC) lives in
24// public/site.js keyed on data-slot="menubar" — the platform does not
25// provide composite menu navigation.
26//
27// Refs:
28//   repos/aria-practices/content/patterns/menubar/menu-and-menubar-pattern.html
29//     (Menu and Menubar pattern: roles/states + full keyboard contract)
30//   repos/aria-practices/content/patterns/menubar/examples/menubar-navigation.html
31//     (roving tabindex: first menuitem tabindex=0, parents carry
32//      aria-haspopup + aria-expanded)
33//   repos/mdn/files/en-us/web/api/popover_api/
34//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/menubar_role/
35//   registry/ui/dropdown-menu.tsx (submenu/popover + item styling reused here)
36 
37// --- Root --------------------------------------------------------------
38 
39const menubarBase =
40  "inline-flex h-9 items-center gap-0.5 rounded-md border bg-background p-1 shadow-xs"
41 
42export function Menubar(
43  props: PropsWithChildren<{
44    ariaLabel?: string
45    // Id of a visible element (e.g. a heading) that names the menubar.
46    // APG prefers aria-labelledby over aria-label when a visible label
47    // exists (menu-and-menubar-pattern.html:220-222; MDN menubar_role:32).
48    ariaLabelledby?: string
49    class?: ClassValue
50  }>,
51) {
52  const { ariaLabel, ariaLabelledby, class: className, children } = props
53  return (
54    <div
55// … truncated