@ecoma-io/loom 0.3.0 → 0.5.0

package/dist/packages/primitives/live-region/src/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../../packages/primitives/live-region/src/context.ts"],"sourcesContent":["import { createApp } from \"vue\";\nimport type { InjectionKey } from \"vue\";\n// Self-import: the fallback pair is real LiveRegion instances, so it\n// inherits the VisuallyHidden clip technique instead of duplicating it. The\n// cycle is benign — this module touches the SFC only inside\n// `ensureStandaloneRegions()`, long after both modules have evaluated.\nimport LiveRegion from \"./LiveRegion.vue\";\n\n/**\n * The seam's machinery, kept out of the SFC so the module-level state it\n * needs — the writer registries and the standalone fallback — is genuinely\n * module-level rather than per-instance.\n */\nexport type LiveRegionPoliteness = \"polite\" | \"assertive\";\n\n/** The write half of the seam — what `useAnnounce()` hands back. */\nexport type Announce = (message: string, politeness?: LiveRegionPoliteness) => void;\n\n/** The provide/inject shape a mounted region shares with its subtree. */\nexport interface LiveRegionContext {\n  announce: Announce;\n}\n\nexport const LIVE_REGION_KEY: InjectionKey<LiveRegionContext> = Symbol(\"loom-live-region\");\n\n/** The write function a mounted region registers. */\ntype Writer = Announce;\n\n/**\n * Writers registered by regions mounted in the component tree, per\n * politeness. The earliest still-mounted region of a politeness wins, so a\n * region near the app root owns the channel and a stray duplicate deeper in\n * the tree stays silent.\n */\nconst regionWriters = new Map<LiveRegionPoliteness, Writer[]>();\n\n/**\n * Writers for the standalone pair mounted on `document.body`, kept apart\n * from `regionWriters` so an in-tree region always outranks the fallback\n * without the lookup depending on mount order.\n */\nconst standaloneWriters = new Map<LiveRegionPoliteness, Writer>();\n\nexport function registerWriter(\n  politeness: LiveRegionPoliteness,\n  writer: Writer,\n  standalone: boolean,\n): () => void {\n  if (standalone) {\n    standaloneWriters.set(politeness, writer);\n    return () => {\n      if (standaloneWriters.get(politeness) === writer) standaloneWriters.delete(politeness);\n    };\n  }\n  const list = regionWriters.get(politeness) ?? [];\n  list.push(writer);\n  regionWriters.set(politeness, list);\n  return () => {\n    regionWriters.set(\n      politeness,\n      (regionWriters.get(politeness) ?? []).filter((registered) => registered !== writer),\n    );\n  };\n}\n\n/**\n * True while the fallback pair is mounting, so those instances register as\n * the fallback rather than as in-tree regions. `createApp().mount()` runs\n * synchronously, so the flag cannot interleave.\n */\nexport let mountingStandalone = false;\n\nlet standaloneMounted = false;\n\n/**\n * Mounts the standalone polite + assertive pair on `document.body` — the\n * default for callers that never mounted a region. It runs when the seam is\n * first asked for (`useAnnounce()`), never at announce time: a region added\n * in the same tick as its message is announced unreliably, so the pair has\n * to pre-exist the first message.\n */\nexport function ensureStandaloneRegions(): void {\n  if (standaloneMounted || typeof document === \"undefined\") return;\n  standaloneMounted = true;\n  const host = document.createElement(\"div\");\n  host.setAttribute(\"data-loom-live-region\", \"\");\n  const apps: ReturnType<typeof createApp>[] = [];\n  for (const politeness of [\"polite\", \"assertive\"] as const) {\n    const mountPoint = document.createElement(\"div\");\n    host.appendChild(mountPoint);\n    mountingStandalone = true;\n    try {\n      const app = createApp(LiveRegion, { politeness });\n      app.mount(mountPoint);\n      apps.push(app);\n    } finally {\n      mountingStandalone = false;\n    }\n  }\n  document.body.appendChild(host);\n  // The pair is a page-lifetime singleton — it must outlive the component\n  // that first asked for it, or in-flight announcements would die with it —\n  // so its teardown rides the page's, not any caller's.\n  window.addEventListener(\n    \"pagehide\",\n    () => {\n      for (const app of apps) app.unmount();\n      standaloneWriters.clear();\n      standaloneMounted = false;\n      host.remove();\n    },\n    { once: true },\n  );\n}\n\n/**\n * The shared announcer: the in-tree region of that politeness if one is\n * mounted, else the standalone pair. Never mounts anything — regions must\n * pre-exist announcements, so the pair is mounted when `useAnnounce()` first\n * runs, not here.\n */\nexport const announce: Announce = (message, politeness = \"polite\") => {\n  if (typeof document === \"undefined\") return;\n  const writer = regionWriters.get(politeness)?.[0] ?? standaloneWriters.get(politeness);\n  writer?.(message);\n};\n"],"mappings":";;;AAuBA,IAAa,kBAAmD,OAAO,kBAAkB;;;;;;;AAWzF,IAAM,gCAAgB,IAAI,IAAoC;;;;;;AAO9D,IAAM,oCAAoB,IAAI,IAAkC;AAEhE,SAAgB,eACd,YACA,QACA,YACY;CACZ,IAAI,YAAY;EACd,kBAAkB,IAAI,YAAY,MAAM;EACxC,aAAa;GACX,IAAI,kBAAkB,IAAI,UAAU,MAAM,QAAQ,kBAAkB,OAAO,UAAU;EACvF;CACF;CACA,MAAM,OAAO,cAAc,IAAI,UAAU,KAAK,CAAC;CAC/C,KAAK,KAAK,MAAM;CAChB,cAAc,IAAI,YAAY,IAAI;CAClC,aAAa;EACX,cAAc,IACZ,aACC,cAAc,IAAI,UAAU,KAAK,CAAC,EAAA,CAAG,QAAQ,eAAe,eAAe,MAAM,CACpF;CACF;AACF;;;;;;AAOA,IAAW,qBAAqB;AAEhC,IAAI,oBAAoB;;;;;;;;AASxB,SAAgB,0BAAgC;CAC9C,IAAI,qBAAqB,OAAO,aAAa,aAAa;CAC1D,oBAAoB;CACpB,MAAM,OAAO,SAAS,cAAc,KAAK;CACzC,KAAK,aAAa,yBAAyB,EAAE;CAC7C,MAAM,OAAuC,CAAC;CAC9C,KAAK,MAAM,cAAc,CAAC,UAAU,WAAW,GAAY;EACzD,MAAM,aAAa,SAAS,cAAc,KAAK;EAC/C,KAAK,YAAY,UAAU;EAC3B,qBAAqB;EACrB,IAAI;GACF,MAAM,MAAM,UAAU,oBAAY,EAAE,WAAW,CAAC;GAChD,IAAI,MAAM,UAAU;GACpB,KAAK,KAAK,GAAG;EACf,UAAU;GACR,qBAAqB;EACvB;CACF;CACA,SAAS,KAAK,YAAY,IAAI;CAI9B,OAAO,iBACL,kBACM;EACJ,KAAK,MAAM,OAAO,MAAM,IAAI,QAAQ;EACpC,kBAAkB,MAAM;EACxB,oBAAoB;EACpB,KAAK,OAAO;CACd,GACA,EAAE,MAAM,KAAK,CACf;AACF;;;;;;;AAQA,IAAa,YAAsB,SAAS,aAAa,aAAa;CACpE,IAAI,OAAO,aAAa,aAAa;CAErC,CADe,cAAc,IAAI,UAAU,CAAC,GAAG,MAAM,kBAAkB,IAAI,UAAU,EAAA,GAC5E,OAAO;AAClB"}

package/dist/packages/primitives/live-region/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./LiveRegion.vue";
+export { useAnnounce } from "./useAnnounce";
+export type { Announce, LiveRegionContext, LiveRegionPoliteness } from "./context";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/live-region/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/live-region/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC"}

package/dist/packages/primitives/live-region/src/index.js

@@ -0,0 +1,3 @@
+import LiveRegion_default from "./LiveRegion.js";
+import { useAnnounce } from "./useAnnounce.js";
+export { LiveRegion_default as default, useAnnounce };

package/dist/packages/primitives/live-region/src/useAnnounce.d.ts

@@ -0,0 +1,17 @@
+import type { Announce } from "./context";
+/**
+ * The announcement seam. Call once in `setup()`:
+ *
+ *   const announce = useAnnounce();
+ *   announce("3 results found");            // politely
+ *   announce("Upload failed", "assertive"); // interrupting
+ *
+ * Under a mounted `<LiveRegion>` the message goes to the region registered
+ * for that politeness; with no region in the tree it goes to the standalone
+ * pair that this call mounts on `document.body` — mounted here, at setup
+ * time, so the regions pre-exist the first message rather than appearing in
+ * the same tick as it. SSR-safe: with no `document` there is nowhere to
+ * announce to, and the function is a no-op.
+ */
+export declare function useAnnounce(): Announce;
+//# sourceMappingURL=useAnnounce.d.ts.map

package/dist/packages/primitives/live-region/src/useAnnounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnounce.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/live-region/src/useAnnounce.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAGtC"}

package/dist/packages/primitives/live-region/src/useAnnounce.js

@@ -0,0 +1,25 @@
+import { LIVE_REGION_KEY, announce, ensureStandaloneRegions } from "./context.js";
+import { inject } from "vue";
+//#region packages/primitives/live-region/src/useAnnounce.ts
+/**
+* The announcement seam. Call once in `setup()`:
+*
+*   const announce = useAnnounce();
+*   announce("3 results found");            // politely
+*   announce("Upload failed", "assertive"); // interrupting
+*
+* Under a mounted `<LiveRegion>` the message goes to the region registered
+* for that politeness; with no region in the tree it goes to the standalone
+* pair that this call mounts on `document.body` — mounted here, at setup
+* time, so the regions pre-exist the first message rather than appearing in
+* the same tick as it. SSR-safe: with no `document` there is nowhere to
+* announce to, and the function is a no-op.
+*/
+function useAnnounce() {
+	ensureStandaloneRegions();
+	return inject(LIVE_REGION_KEY, null)?.announce ?? announce;
+}
+//#endregion
+export { useAnnounce };
+
+//# sourceMappingURL=useAnnounce.js.map

package/dist/packages/primitives/live-region/src/useAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnounce.js","names":[],"sources":["../../../../../packages/primitives/live-region/src/useAnnounce.ts"],"sourcesContent":["import { inject } from \"vue\";\nimport { LIVE_REGION_KEY, ensureStandaloneRegions, announce } from \"./context\";\nimport type { Announce } from \"./context\";\n\n/**\n * The announcement seam. Call once in `setup()`:\n *\n *   const announce = useAnnounce();\n *   announce(\"3 results found\");            // politely\n *   announce(\"Upload failed\", \"assertive\"); // interrupting\n *\n * Under a mounted `<LiveRegion>` the message goes to the region registered\n * for that politeness; with no region in the tree it goes to the standalone\n * pair that this call mounts on `document.body` — mounted here, at setup\n * time, so the regions pre-exist the first message rather than appearing in\n * the same tick as it. SSR-safe: with no `document` there is nowhere to\n * announce to, and the function is a no-op.\n */\nexport function useAnnounce(): Announce {\n  ensureStandaloneRegions();\n  return inject(LIVE_REGION_KEY, null)?.announce ?? announce;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,cAAwB;CACtC,wBAAwB;CACxB,OAAO,OAAO,iBAAiB,IAAI,CAAC,EAAE,YAAY;AACpD"}

package/dist/packages/primitives/menubar/src/Menubar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menubar.js","names":[],"sources":["../../../../../packages/primitives/menubar/src/Menubar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Menubar — the classic desktop-app menu strip (File · View · Help …).\n *\n * Data-driven: pass a `menus` array; the component owns open/close, hover-to-switch,\n * keyboard nav and click-outside. Selecting an item emits `select` with its `command`\n * id — the host maps that id to an action (keeps the primitive free of app logic).\n *\n * A11y: WAI-ARIA menubar semantics (roles + aria-expanded/haspopup) with Escape,\n * Arrow, Home/End and Enter/Space handling. When richer focus-trapping is needed we\n * can later delegate to Reka UI without changing this call-site contract.\n */\nexport interface MenubarItem {\n  /** Visible label. */\n  label: string;\n  /** Command id emitted on select. Omit for a non-actionable row. */\n  command?: string;\n  /** Right-aligned accelerator hint, e.g. \"Ctrl+S\". */\n  shortcut?: string;\n  /** Render a divider instead of an item (label ignored). */\n  separator?: boolean;\n  disabled?: boolean;\n}\n\nexport interface MenubarMenu {\n  id: string;\n  label: string;\n  items: MenubarItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount, ref, nextTick } from \"vue\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The top-level menus, left to right, each carrying its own item list. */\n  menus: MenubarMenu[];\n}>();\nconst emit = defineEmits<{ (e: \"select\", command: string): void }>();\n\nconst openId = ref<string | null>(null);\nconst activeIndex = ref(-1); // highlighted item within the open menu\n\nconst openMenu = (menu: MenubarMenu | undefined) => menu?.items ?? [];\nconst firstEnabled = (items: MenubarItem[], from = 0, dir = 1): number => {\n  for (let i = from; i >= 0 && i < items.length; i += dir) {\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n};\n\nfunction toggle(id: string): void {\n  openId.value = openId.value === id ? null : id;\n  activeIndex.value = -1;\n}\nfunction hover(id: string): void {\n  if (openId.value !== null && openId.value !== id) {\n    openId.value = id;\n    activeIndex.value = -1;\n  }\n}\nfunction choose(item: MenubarItem): void {\n  if (item.separator || item.disabled) return;\n  close();\n  if (item.command) emit(\"select\", item.command);\n}\nfunction close(): void {\n  openId.value = null;\n  activeIndex.value = -1;\n}\n\nfunction moveMenu(dir: 1 | -1): void {\n  const ids = props.menus.map((m) => m.id);\n  const cur = openId.value ? ids.indexOf(openId.value) : 0;\n  const next = (cur + dir + ids.length) % ids.length;\n  openId.value = ids[next] ?? null;\n  activeIndex.value = -1;\n}\n\nasync function onTriggerKeydown(e: KeyboardEvent, menu: MenubarMenu): Promise<void> {\n  switch (e.key) {\n    case \"ArrowDown\":\n    case \"Enter\":\n    case \" \":\n      e.preventDefault();\n      openId.value = menu.id;\n      await nextTick();\n      activeIndex.value = firstEnabled(menu.items);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      if (openId.value) moveMenu(1);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      if (openId.value) moveMenu(-1);\n      break;\n    case \"Escape\":\n      close();\n      break;\n  }\n}\n\nfunction onMenuKeydown(e: KeyboardEvent, menu: MenubarMenu): void {\n  const items = menu.items;\n  switch (e.key) {\n    case \"ArrowDown\":\n      e.preventDefault();\n      activeIndex.value = firstEnabled(items, Math.max(activeIndex.value, -1) + 1, 1);\n      if (activeIndex.value === -1) activeIndex.value = firstEnabled(items, 0, 1);\n      break;\n    case \"ArrowUp\":\n      e.preventDefault();\n      activeIndex.value =\n        activeIndex.value <= 0\n          ? firstEnabled(items, items.length - 1, -1)\n          : firstEnabled(items, activeIndex.value - 1, -1);\n      break;\n    case \"Home\":\n      e.preventDefault();\n      activeIndex.value = firstEnabled(items, 0, 1);\n      break;\n    case \"End\":\n      e.preventDefault();\n      activeIndex.value = firstEnabled(items, items.length - 1, -1);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      moveMenu(1);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      moveMenu(-1);\n      break;\n    case \"Enter\":\n    case \" \": {\n      e.preventDefault();\n      const item = activeIndex.value >= 0 ? items[activeIndex.value] : undefined;\n      if (item) choose(item);\n      break;\n    }\n    case \"Escape\":\n      e.preventDefault();\n      close();\n      break;\n  }\n}\n\nonMounted(() => window.addEventListener(\"click\", close));\nonBeforeUnmount(() => window.removeEventListener(\"click\", close));\n</script>\n\n<template>\n  <div\n    role=\"menubar\"\n    class=\"flex items-center gap-0.5\"\n    style=\"-webkit-app-region: no-drag\"\n    @click.stop\n  >\n    <div v-for=\"menu in menus\" :key=\"menu.id\" class=\"relative\">\n      <button\n        :id=\"`menubar-trigger-${menu.id}`\"\n        type=\"button\"\n        role=\"menuitem\"\n        :aria-haspopup=\"true\"\n        :aria-expanded=\"openId === menu.id\"\n        class=\"min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground\"\n        :class=\"openId === menu.id && 'bg-subtle text-foreground'\"\n        @click.stop=\"toggle(menu.id)\"\n        @mouseenter=\"hover(menu.id)\"\n        @focus=\"hover(menu.id)\"\n        @keydown=\"onTriggerKeydown($event, menu)\"\n      >\n        {{ menu.label }}\n      </button>\n\n      <div\n        v-if=\"openId === menu.id\"\n        role=\"menu\"\n        :aria-label=\"menu.label\"\n        tabindex=\"-1\"\n        class=\"absolute left-0 top-full z-50 mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-scale-in\"\n        @click.stop\n        @keydown=\"onMenuKeydown($event, menu)\"\n      >\n        <template v-for=\"(item, i) in openMenu(menu)\" :key=\"i\">\n          <div v-if=\"item.separator\" role=\"separator\" class=\"my-1 h-px bg-border\" />\n          <!-- The row's colour, not its alpha, says it is unavailable. A menu\n               row is nothing but its label, and `disabled:opacity-40` composited\n               that label to 2.40:1 on the popover — a disabled row a reader\n               cannot make out tells them nothing about what is unavailable,\n               which is the only thing it is there to say. Muted instead: 5.76:1\n               at rest, and a clear drop from the 15.46:1 an available row wears,\n               so the state still reads at a glance. The shortcut beside it\n               declares `text-muted-foreground` on its own element, so it lands\n               on the same colour rather than inheriting this one. -->\n          <button\n            v-else\n            type=\"button\"\n            role=\"menuitem\"\n            :disabled=\"item.disabled\"\n            :data-highlighted=\"activeIndex === i || undefined\"\n            :style=\"{ animationDelay: listStaggerDelay(i) }\"\n            class=\"flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-xs text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle animate-fade-rise\"\n            @click=\"choose(item)\"\n            @mouseenter=\"activeIndex = i\"\n            @focus=\"activeIndex = i\"\n          >\n            <span>{{ item.label }}</span>\n            <span v-if=\"item.shortcut\" class=\"tabular text-[0.6875rem] text-muted-foreground\">\n              {{ item.shortcut }}\n            </span>\n          </button>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Menubar.js","names":[],"sources":["../../../../../packages/primitives/menubar/src/Menubar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Menubar — the classic desktop-app menu strip (File · View · Help …).\n *\n * Data-driven: pass a `menus` array; the component owns open/close, hover-to-switch,\n * keyboard nav and click-outside. Selecting an item emits `select` with its `command`\n * id — the host maps that id to an action (keeps the primitive free of app logic).\n *\n * A11y: WAI-ARIA menubar semantics over real DOM focus, not aria-activedescendant.\n * Opening a menu moves focus onto its first enabled row and the arrows walk it from\n * there, so \"the highlighted row\" and \"the focused row\" are the same thing by\n * construction and a screen reader announces each walked row natively — no\n * bookkeeping that could drift out of sync with what is actually announced.\n */\nexport interface MenubarItem {\n  /** Visible label. */\n  label: string;\n  /** Command id emitted on select. Omit for a non-actionable row. */\n  command?: string;\n  /** Right-aligned accelerator hint, e.g. \"Ctrl+S\". */\n  shortcut?: string;\n  /** Render a divider instead of an item (label ignored). */\n  separator?: boolean;\n  disabled?: boolean;\n}\n\nexport interface MenubarMenu {\n  id: string;\n  label: string;\n  items: MenubarItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, nextTick } from \"vue\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The top-level menus; their reading order follows `dir`. */\n  menus: MenubarMenu[];\n  /**\n   * Reading direction. Right-to-left mirrors the strip's arrow keys —\n   * ArrowRight travels toward the visual left — which a hand-rolled\n   * handler must do itself, unlike its Reka siblings.\n   */\n  dir?: \"ltr\" | \"rtl\";\n}>();\nconst emit = defineEmits<{ select: [command: string] }>();\n\n// Horizontal arrows are visual, not logical: in right-to-left, ArrowRight\n// moves toward the previous menu.\nconst horizontal = computed(() => (props.dir === \"rtl\" ? -1 : 1) as 1 | -1);\n\nconst openId = ref<string | null>(null);\nconst activeIndex = ref(-1); // the focused row within the open menu\n// String refs would do here only outside a v-for; inside one Vue collects them\n// into arrays. Function refs keyed BY MENU ID instead: during a menu switch the\n// incoming panel can mount before the outgoing one unmounts, so a single\n// latest-wins slot would let the outgoing null clobber the just-bound element.\nconst panelEls = new Map<string, HTMLElement>();\nconst triggerEls = new Map<string, HTMLButtonElement>();\n\nfunction bindPanel(id: string, el: unknown): void {\n  if (el instanceof HTMLElement) panelEls.set(id, el);\n  else panelEls.delete(id);\n}\n\nfunction bindTrigger(id: string, el: unknown): void {\n  if (el instanceof HTMLButtonElement) triggerEls.set(id, el);\n  else triggerEls.delete(id);\n}\n\nfunction boundPanel(): HTMLElement | null {\n  return openId.value ? (panelEls.get(openId.value) ?? null) : null;\n}\n\nconst openMenu = (menu: MenubarMenu | undefined) => menu?.items ?? [];\nconst firstEnabled = (items: MenubarItem[], from = 0, dir = 1): number => {\n  for (let i = from; i >= 0 && i < items.length; i += dir) {\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n};\n\n/** One arrow-step away from `from`, wrapping through every slot exactly once. */\nfunction neighborEnabled(items: MenubarItem[], from: number, dir: 1 | -1): number {\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (((from + dir * step) % n) + n) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled) return i;\n  }\n  return -1;\n}\n\n/** Rows render only for non-separator items, so an item index maps to its button's ordinal among the rendered ones. */\nfunction rowOrdinal(items: MenubarItem[], index: number): number {\n  let ordinal = -1;\n  for (let k = 0; k <= index && k < items.length; k++) {\n    if (!items[k]?.separator) ordinal++;\n  }\n  return ordinal;\n}\n\nfunction rowButtons(): HTMLButtonElement[] {\n  const panel = boundPanel();\n  return panel\n    ? Array.from(panel.querySelectorAll<HTMLButtonElement>('button[role=\"menuitem\"]'))\n    : [];\n}\n\nfunction focusRow(items: MenubarItem[], index: number): void {\n  rowButtons()[rowOrdinal(items, index)]?.focus();\n}\n\nfunction goTo(items: MenubarItem[], index: number): void {\n  if (index < 0) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\nasync function openAndFocusFirst(id: string, items: MenubarItem[]): Promise<void> {\n  await nextTick();\n  // A hover or another key can supersede this open within the same tick; only\n  // the menu that still owns `openId` may claim focus.\n  if (openId.value !== id) return;\n  goTo(items, firstEnabled(items));\n}\n\nasync function toggle(id: string): Promise<void> {\n  if (openId.value === id) {\n    close(true);\n    return;\n  }\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(id, menu.items);\n}\n\nasync function hover(id: string, via: \"pointer\" | \"trigger-focus\"): Promise<void> {\n  if (openId.value === null || openId.value === id) return;\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = id;\n  activeIndex.value = -1;\n  // Pointer switching takes focus into the new menu like a desktop menubar.\n  // A switch caused by tabbing between triggers must not yank focus out of\n  // the tab order mid-Tab, so it switches the panel and leaves focus alone.\n  if (via === \"pointer\") await openAndFocusFirst(id, menu.items);\n}\n\nfunction choose(item: MenubarItem): void {\n  if (item.separator || item.disabled) return;\n  close(true);\n  if (item.command) emit(\"select\", item.command);\n}\n\nfunction close(restoreFocus = false): void {\n  const id = openId.value;\n  openId.value = null;\n  activeIndex.value = -1;\n  // Escape and selection hand focus back to the owning trigger; Tab-out and\n  // outside clicks do not — focus has already gone where the user sent it.\n  if (restoreFocus && id) triggerEls.get(id)?.focus();\n}\n\nasync function moveMenu(dir: 1 | -1): Promise<void> {\n  const ids = props.menus.map((m) => m.id);\n  const cur = openId.value ? ids.indexOf(openId.value) : 0;\n  const id = ids[(cur + dir + ids.length) % ids.length];\n  const menu = props.menus.find((m) => m.id === id);\n  if (!menu) return;\n  openId.value = menu.id;\n  activeIndex.value = -1;\n  await openAndFocusFirst(menu.id, menu.items);\n}\n\n/**\n * Pointer highlight of an enabled row moves focus with it — under the roving\n * model the highlighted row IS the focused row, and screen readers announce\n * focus changes, not CSS classes.\n */\nfunction pointAtRow(items: MenubarItem[], item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator || activeIndex.value === index) return;\n  activeIndex.value = index;\n  focusRow(items, index);\n}\n\n/** Native focus landing on a row keeps `activeIndex` truthful about it. */\nfunction noteFocus(item: MenubarItem, index: number): void {\n  if (item.disabled || item.separator) return;\n  activeIndex.value = index;\n}\n/*\n * The typeahead. APG menubars match a prefix of the item's label, starting\n * after the focused row and wrapping; a character's repeated key re-cycles\n * to its own next match rather than extending the prefix to a non-match, so\n * the pending buffer is kept but the repeated final character is not\n * appended. The buffer is 500 ms, case-insensitive, and the timer is released\n * on unmount so a menubar torn down mid-typeahead leaves nothing pending —\n * the same contract the TreeView sibling keeps.\n */\nconst TYPEAHEAD_RESET_MS = 500;\nlet typeaheadBuffer = \"\";\nlet typeaheadTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction typeaheadJump(items: MenubarItem[], from: number): void {\n  const query = typeaheadBuffer;\n  // The whole buffered prefix decides the match: repeated characters extend\n  // it, and a fresh character restarts it, so \"Co\" reaches \"Copy\" only when\n  // both keys follow each other within the timeout.\n  const n = items.length;\n  for (let step = 1; step <= n; step++) {\n    const i = (from + step) % n;\n    const item = items[i];\n    if (item && !item.separator && !item.disabled && item.label.toLowerCase().startsWith(query)) {\n      goTo(items, i);\n      break;\n    }\n  }\n}\n\nfunction handleTypeahead(e: KeyboardEvent, items: MenubarItem[]): void {\n  if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;\n  if (e.key === \" \" || e.key === \"Enter\") return; // activation keys, handled above\n  const char = e.key.toLowerCase();\n  if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;\n  e.preventDefault();\n  typeaheadJump(items, activeIndex.value);\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n  typeaheadTimer = setTimeout(() => {\n    typeaheadBuffer = \"\";\n    typeaheadTimer = undefined;\n  }, TYPEAHEAD_RESET_MS);\n}\n\nonBeforeUnmount(() => {\n  if (typeaheadTimer !== undefined) clearTimeout(typeaheadTimer);\n});\n\n/**\n * The APG's closed-state traversal: Left/Right across the strip land on the\n * neighbouring trigger without opening anything — opening is ArrowDown,\n * Enter or Space's job.\n */\nfunction moveTriggerFocus(from: string, dir: 1 | -1): void {\n  const ids = props.menus.map((m) => m.id);\n  const cur = ids.indexOf(from);\n  if (cur === -1) return;\n  triggerEls.get(ids[(cur + dir + ids.length) % ids.length] ?? \"\")?.focus();\n}\n\nasync function onTriggerKeydown(e: KeyboardEvent, menu: MenubarMenu): Promise<void> {\n  switch (e.key) {\n    case \"ArrowDown\":\n    case \"Enter\":\n    case \" \":\n      e.preventDefault(); // suppresses the button's own activation click\n      openId.value = menu.id;\n      activeIndex.value = -1;\n      await openAndFocusFirst(menu.id, menu.items);\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(horizontal.value);\n      else moveTriggerFocus(menu.id, horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      if (openId.value) void moveMenu(-horizontal.value as 1 | -1);\n      else moveTriggerFocus(menu.id, -horizontal.value as 1 | -1);\n      break;\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n  }\n}\n\nfunction onMenuKeydown(e: KeyboardEvent, menu: MenubarMenu): void {\n  const items = menu.items;\n  switch (e.key) {\n    case \"ArrowDown\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, 1));\n      break;\n    case \"ArrowUp\":\n      e.preventDefault();\n      goTo(items, neighborEnabled(items, activeIndex.value, -1));\n      break;\n    case \"Home\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, 0, 1));\n      break;\n    case \"End\":\n      e.preventDefault();\n      goTo(items, firstEnabled(items, items.length - 1, -1));\n      break;\n    case \"ArrowRight\":\n      e.preventDefault();\n      void moveMenu(horizontal.value);\n      break;\n    case \"ArrowLeft\":\n      e.preventDefault();\n      void moveMenu(-horizontal.value as 1 | -1);\n      break;\n    // Handled here rather than left to the button's native activation:\n    // preventDefault stops the browser's synthesized click, which would run\n    // choose() a second time alongside this delegated handler.\n    case \"Enter\":\n    case \" \": {\n      e.preventDefault();\n      const item = items[activeIndex.value];\n      if (item) choose(item);\n      break;\n    }\n    case \"Escape\":\n      e.preventDefault();\n      close(true);\n      break;\n    // Every other key is a printable character: APG typeahead moves focus to\n    // the next item whose label begins with it. `default` sees only these —\n    // Space/Enter/Escape each have their own case above.\n    default:\n      handleTypeahead(e, items);\n      break;\n  }\n}\n\nfunction onRootFocusout(e: FocusEvent): void {\n  if (!openId.value) return;\n  const root = e.currentTarget;\n  const next = e.relatedTarget;\n  // Tab out of the strip dismisses the menu and leaves focus where the browser\n  // put it. Moves that stay inside the menubar (opening handing focus to a\n  // row) keep it.\n  if (!(root instanceof Element) || !(next instanceof Node) || !root.contains(next)) close();\n}\n\n// A wrapper, not `close` itself: the listener's event argument would otherwise\n// arrive as `restoreFocus`, and an outside click would yank focus back to the\n// trigger instead of leaving it where the press landed.\nconst onWindowClick = (): void => close();\nonMounted(() => window.addEventListener(\"click\", onWindowClick));\nonBeforeUnmount(() => window.removeEventListener(\"click\", onWindowClick));\n</script>\n\n<template>\n  <!-- The attribute rides the strip itself, not just the prop: a host may\n       pass dir without setting document direction, and both the flex order\n       and the mirrored keys must agree with what is on screen. -->\n  <div\n    :dir=\"dir\"\n    role=\"menubar\"\n    class=\"flex items-center gap-0.5\"\n    style=\"-webkit-app-region: no-drag\"\n    @click.stop\n    @focusout=\"onRootFocusout\"\n  >\n    <div v-for=\"menu in menus\" :key=\"menu.id\" class=\"relative\">\n      <button\n        :id=\"`menubar-trigger-${menu.id}`\"\n        :ref=\"(el) => bindTrigger(menu.id, el)\"\n        type=\"button\"\n        role=\"menuitem\"\n        :aria-haspopup=\"'menu'\"\n        :aria-expanded=\"openId === menu.id\"\n        class=\"min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n        :class=\"openId === menu.id && 'bg-subtle text-foreground'\"\n        @click.stop=\"toggle(menu.id)\"\n        @mouseenter=\"hover(menu.id, 'pointer')\"\n        @focus=\"hover(menu.id, 'trigger-focus')\"\n        @keydown=\"onTriggerKeydown($event, menu)\"\n      >\n        {{ menu.label }}\n      </button>\n\n      <!-- Scoped presence, matching every sibling overlay: enter animates in,\n           leave answers with scale-out. The unconditional mount-only animation\n           this used to carry never plays on close at all. In jsdom, with no\n           stylesheet loaded, Vue computes zero animation duration and ends both\n           phases immediately, so tests see plain unmount. -->\n      <Transition enter-active-class=\"animate-scale-in\" leave-active-class=\"animate-scale-out\">\n        <div\n          v-if=\"openId === menu.id\"\n          :ref=\"(el) => bindPanel(menu.id, el)\"\n          role=\"menu\"\n          :aria-label=\"menu.label\"\n          tabindex=\"-1\"\n          class=\"absolute left-0 top-full z-overlay mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n          @click.stop\n          @keydown=\"onMenuKeydown($event, menu)\"\n        >\n          <template v-for=\"(item, i) in openMenu(menu)\" :key=\"i\">\n            <div v-if=\"item.separator\" role=\"separator\" class=\"my-1 h-px bg-border\" />\n            <!-- The row's colour, not its alpha, says it is unavailable. A menu\n                 row is nothing but its label, and `disabled:opacity-40` composited\n                 that label to 2.40:1 on the popover — a disabled row a reader\n                 cannot make out tells them nothing about what is unavailable,\n                 which is the only thing it is there to say. Muted instead: 5.76:1\n                 at rest, and a clear drop from the 15.46:1 an available row wears,\n                 so the state still reads at a glance. The shortcut beside it\n                 declares `text-muted-foreground` on its own element, so it lands\n                 on the same colour rather than inheriting this one.\n\n                 Rows sit at text-sm/py-1.5 like DropdownMenu's — one row grammar\n                 across menus; the compact trigger above stays desktop chrome.\n                 Every row carries tabindex -1: focus arrives programmatically,\n                 never by tabbing through the strip. -->\n            <button\n              v-else\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              :disabled=\"item.disabled\"\n              :data-highlighted=\"activeIndex === i || undefined\"\n              :style=\"{ animationDelay: listStaggerDelay(i) }\"\n              class=\"flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo animate-fade-rise\"\n              @click=\"choose(item)\"\n              @mouseenter=\"pointAtRow(openMenu(menu), item, i)\"\n              @focus=\"noteFocus(item, i)\"\n            >\n              <span>{{ item.label }}</span>\n              <span v-if=\"item.shortcut\" class=\"tabular text-micro text-muted-foreground\">\n                {{ item.shortcut }}\n              </span>\n            </button>\n          </template>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/menubar/src/Menubar.vue.d.ts

@@ -5,9 +5,11 @@
  * keyboard nav and click-outside. Selecting an item emits `select` with its `command`
  * id — the host maps that id to an action (keeps the primitive free of app logic).
  *
- * A11y: WAI-ARIA menubar semantics (roles + aria-expanded/haspopup) with Escape,
- * Arrow, Home/End and Enter/Space handling. When richer focus-trapping is needed we
- * can later delegate to Reka UI without changing this call-site contract.
+ * A11y: WAI-ARIA menubar semantics over real DOM focus, not aria-activedescendant.
+ * Opening a menu moves focus onto its first enabled row and the arrows walk it from
+ * there, so "the highlighted row" and "the focused row" are the same thing by
+ * construction and a screen reader announces each walked row natively — no
+ * bookkeeping that could drift out of sync with what is actually announced.
  */
 export interface MenubarItem {
     /** Visible label. */
@@ -28,13 +30,25 @@ export interface MenubarMenu {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
-    /** The top-level menus, left to right, each carrying its own item list. */
+    /** The top-level menus; their reading order follows `dir`. */
     menus: MenubarMenu[];
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    /**
+     * Reading direction. Right-to-left mirrors the strip's arrow keys —
+     * ArrowRight travels toward the visual left — which a hand-rolled
+     * handler must do itself, unlike its Reka siblings.
+     */
+    dir?: "ltr" | "rtl";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (command: string) => any;
 }, string, import("vue").PublicProps, Readonly<{
-    /** The top-level menus, left to right, each carrying its own item list. */
+    /** The top-level menus; their reading order follows `dir`. */
     menus: MenubarMenu[];
+    /**
+     * Reading direction. Right-to-left mirrors the strip's arrow keys —
+     * ArrowRight travels toward the visual left — which a hand-rolled
+     * handler must do itself, unlike its Reka siblings.
+     */
+    dir?: "ltr" | "rtl";
 }> & Readonly<{
     onSelect?: (command: string) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/packages/primitives/menubar/src/Menubar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menubar.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/menubar/src/Menubar.vue"],"names":[],"mappings":"AAmOA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB,2EAA2E;WACpE,WAAW,EAAE;;;;IADpB,2EAA2E;WACpE,WAAW,EAAE;;;kFAkUlB,CAAC"}
+{"version":3,"file":"Menubar.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/menubar/src/Menubar.vue"],"names":[],"mappings":"AA2bA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB,8DAA8D;WACvD,WAAW,EAAE;IACpB;;;;OAIG;UACG,KAAK,GAAG,KAAK;;;;IAPnB,8DAA8D;WACvD,WAAW,EAAE;IACpB;;;;OAIG;UACG,KAAK,GAAG,KAAK;;;kFA+hBjB,CAAC"}

package/dist/packages/primitives/menubar/src/Menubar.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
 import { listStaggerDelay } from "../../../core/src/motion.js";
 import "../../../core/src/index.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, withModifiers } from "vue";
+import { Fragment, Transition, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
 //#region packages/primitives/menubar/src/Menubar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
+var _hoisted_1 = ["dir"];
+var _hoisted_2 = [
 	"id",
 	"aria-expanded",
 	"onClick",
@@ -10,32 +11,49 @@ var _hoisted_1 = [
 	"onFocus",
 	"onKeydown"
 ];
-var _hoisted_2 = ["aria-label", "onKeydown"];
-var _hoisted_3 = {
+var _hoisted_3 = ["aria-label", "onKeydown"];
+var _hoisted_4 = {
 	key: 0,
 	role: "separator",
 	class: "my-1 h-px bg-border"
 };
-var _hoisted_4 = [
+var _hoisted_5 = [
 	"disabled",
 	"data-highlighted",
 	"onClick",
 	"onMouseenter",
 	"onFocus"
 ];
-var _hoisted_5 = {
+var _hoisted_6 = {
 	key: 0,
-	class: "tabular text-[0.6875rem] text-muted-foreground"
+	class: "tabular text-micro text-muted-foreground"
 };
 var Menubar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Menubar",
-	props: { menus: {} },
+	props: {
+		menus: {},
+		dir: {}
+	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const horizontal = computed(() => props.dir === "rtl" ? -1 : 1);
 		const openId = ref(null);
 		const activeIndex = ref(-1);
+		const panelEls = /* @__PURE__ */ new Map();
+		const triggerEls = /* @__PURE__ */ new Map();
+		function bindPanel(id, el) {
+			if (el instanceof HTMLElement) panelEls.set(id, el);
+			else panelEls.delete(id);
+		}
+		function bindTrigger(id, el) {
+			if (el instanceof HTMLButtonElement) triggerEls.set(id, el);
+			else triggerEls.delete(id);
+		}
+		function boundPanel() {
+			return openId.value ? panelEls.get(openId.value) ?? null : null;
+		}
 		const openMenu = (menu) => menu?.items ?? [];
 		const firstEnabled = (items, from = 0, dir = 1) => {
 			for (let i = from; i >= 0 && i < items.length; i += dir) {
@@ -44,30 +62,134 @@ var Menubar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			}
 			return -1;
 		};
-		function toggle(id) {
-			openId.value = openId.value === id ? null : id;
-			activeIndex.value = -1;
+		/** One arrow-step away from `from`, wrapping through every slot exactly once. */
+		function neighborEnabled(items, from, dir) {
+			const n = items.length;
+			for (let step = 1; step <= n; step++) {
+				const i = ((from + dir * step) % n + n) % n;
+				const item = items[i];
+				if (item && !item.separator && !item.disabled) return i;
+			}
+			return -1;
 		}
-		function hover(id) {
-			if (openId.value !== null && openId.value !== id) {
-				openId.value = id;
-				activeIndex.value = -1;
+		/** Rows render only for non-separator items, so an item index maps to its button's ordinal among the rendered ones. */
+		function rowOrdinal(items, index) {
+			let ordinal = -1;
+			for (let k = 0; k <= index && k < items.length; k++) if (!items[k]?.separator) ordinal++;
+			return ordinal;
+		}
+		function rowButtons() {
+			const panel = boundPanel();
+			return panel ? Array.from(panel.querySelectorAll("button[role=\"menuitem\"]")) : [];
+		}
+		function focusRow(items, index) {
+			rowButtons()[rowOrdinal(items, index)]?.focus();
+		}
+		function goTo(items, index) {
+			if (index < 0) return;
+			activeIndex.value = index;
+			focusRow(items, index);
+		}
+		async function openAndFocusFirst(id, items) {
+			await nextTick();
+			if (openId.value !== id) return;
+			goTo(items, firstEnabled(items));
+		}
+		async function toggle(id) {
+			if (openId.value === id) {
+				close(true);
+				return;
 			}
+			const menu = props.menus.find((m) => m.id === id);
+			if (!menu) return;
+			openId.value = id;
+			activeIndex.value = -1;
+			await openAndFocusFirst(id, menu.items);
+		}
+		async function hover(id, via) {
+			if (openId.value === null || openId.value === id) return;
+			const menu = props.menus.find((m) => m.id === id);
+			if (!menu) return;
+			openId.value = id;
+			activeIndex.value = -1;
+			if (via === "pointer") await openAndFocusFirst(id, menu.items);
 		}
 		function choose(item) {
 			if (item.separator || item.disabled) return;
-			close();
+			close(true);
 			if (item.command) emit("select", item.command);
 		}
-		function close() {
+		function close(restoreFocus = false) {
+			const id = openId.value;
 			openId.value = null;
 			activeIndex.value = -1;
+			if (restoreFocus && id) triggerEls.get(id)?.focus();
 		}
-		function moveMenu(dir) {
+		async function moveMenu(dir) {
 			const ids = props.menus.map((m) => m.id);
-			const next = ((openId.value ? ids.indexOf(openId.value) : 0) + dir + ids.length) % ids.length;
-			openId.value = ids[next] ?? null;
+			const id = ids[((openId.value ? ids.indexOf(openId.value) : 0) + dir + ids.length) % ids.length];
+			const menu = props.menus.find((m) => m.id === id);
+			if (!menu) return;
+			openId.value = menu.id;
 			activeIndex.value = -1;
+			await openAndFocusFirst(menu.id, menu.items);
+		}
+		/**
+		* Pointer highlight of an enabled row moves focus with it — under the roving
+		* model the highlighted row IS the focused row, and screen readers announce
+		* focus changes, not CSS classes.
+		*/
+		function pointAtRow(items, item, index) {
+			if (item.disabled || item.separator || activeIndex.value === index) return;
+			activeIndex.value = index;
+			focusRow(items, index);
+		}
+		/** Native focus landing on a row keeps `activeIndex` truthful about it. */
+		function noteFocus(item, index) {
+			if (item.disabled || item.separator) return;
+			activeIndex.value = index;
+		}
+		const TYPEAHEAD_RESET_MS = 500;
+		let typeaheadBuffer = "";
+		let typeaheadTimer;
+		function typeaheadJump(items, from) {
+			const query = typeaheadBuffer;
+			const n = items.length;
+			for (let step = 1; step <= n; step++) {
+				const i = (from + step) % n;
+				const item = items[i];
+				if (item && !item.separator && !item.disabled && item.label.toLowerCase().startsWith(query)) {
+					goTo(items, i);
+					break;
+				}
+			}
+		}
+		function handleTypeahead(e, items) {
+			if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;
+			if (e.key === " " || e.key === "Enter") return;
+			const char = e.key.toLowerCase();
+			if (typeaheadBuffer.slice(-1) !== char) typeaheadBuffer += char;
+			e.preventDefault();
+			typeaheadJump(items, activeIndex.value);
+			if (typeaheadTimer !== void 0) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadBuffer = "";
+				typeaheadTimer = void 0;
+			}, TYPEAHEAD_RESET_MS);
+		}
+		onBeforeUnmount(() => {
+			if (typeaheadTimer !== void 0) clearTimeout(typeaheadTimer);
+		});
+		/**
+		* The APG's closed-state traversal: Left/Right across the strip land on the
+		* neighbouring trigger without opening anything — opening is ArrowDown,
+		* Enter or Space's job.
+		*/
+		function moveTriggerFocus(from, dir) {
+			const ids = props.menus.map((m) => m.id);
+			const cur = ids.indexOf(from);
+			if (cur === -1) return;
+			triggerEls.get(ids[(cur + dir + ids.length) % ids.length] ?? "")?.focus();
 		}
 		async function onTriggerKeydown(e, menu) {
 			switch (e.key) {
@@ -76,18 +198,22 @@ var Menubar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				case " ":
 					e.preventDefault();
 					openId.value = menu.id;
-					await nextTick();
-					activeIndex.value = firstEnabled(menu.items);
+					activeIndex.value = -1;
+					await openAndFocusFirst(menu.id, menu.items);
 					break;
 				case "ArrowRight":
 					e.preventDefault();
-					if (openId.value) moveMenu(1);
+					if (openId.value) moveMenu(horizontal.value);
+					else moveTriggerFocus(menu.id, horizontal.value);
 					break;
 				case "ArrowLeft":
 					e.preventDefault();
-					if (openId.value) moveMenu(-1);
+					if (openId.value) moveMenu(-horizontal.value);
+					else moveTriggerFocus(menu.id, -horizontal.value);
 					break;
-				case "Escape": close();
+				case "Escape":
+					e.preventDefault();
+					close(true);
 			}
 		}
 		function onMenuKeydown(e, menu) {
@@ -95,87 +221,108 @@ var Menubar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			switch (e.key) {
 				case "ArrowDown":
 					e.preventDefault();
-					activeIndex.value = firstEnabled(items, Math.max(activeIndex.value, -1) + 1, 1);
-					if (activeIndex.value === -1) activeIndex.value = firstEnabled(items, 0, 1);
+					goTo(items, neighborEnabled(items, activeIndex.value, 1));
 					break;
 				case "ArrowUp":
 					e.preventDefault();
-					activeIndex.value = activeIndex.value <= 0 ? firstEnabled(items, items.length - 1, -1) : firstEnabled(items, activeIndex.value - 1, -1);
+					goTo(items, neighborEnabled(items, activeIndex.value, -1));
 					break;
 				case "Home":
 					e.preventDefault();
-					activeIndex.value = firstEnabled(items, 0, 1);
+					goTo(items, firstEnabled(items, 0, 1));
 					break;
 				case "End":
 					e.preventDefault();
-					activeIndex.value = firstEnabled(items, items.length - 1, -1);
+					goTo(items, firstEnabled(items, items.length - 1, -1));
 					break;
 				case "ArrowRight":
 					e.preventDefault();
-					moveMenu(1);
+					moveMenu(horizontal.value);
 					break;
 				case "ArrowLeft":
 					e.preventDefault();
-					moveMenu(-1);
+					moveMenu(-horizontal.value);
 					break;
 				case "Enter":
 				case " ": {
 					e.preventDefault();
-					const item = activeIndex.value >= 0 ? items[activeIndex.value] : void 0;
+					const item = items[activeIndex.value];
 					if (item) choose(item);
 					break;
 				}
 				case "Escape":
 					e.preventDefault();
-					close();
+					close(true);
+					break;
+				default: handleTypeahead(e, items);
 			}
 		}
-		onMounted(() => window.addEventListener("click", close));
-		onBeforeUnmount(() => window.removeEventListener("click", close));
+		function onRootFocusout(e) {
+			if (!openId.value) return;
+			const root = e.currentTarget;
+			const next = e.relatedTarget;
+			if (!(root instanceof Element) || !(next instanceof Node) || !root.contains(next)) close();
+		}
+		const onWindowClick = () => close();
+		onMounted(() => window.addEventListener("click", onWindowClick));
+		onBeforeUnmount(() => window.removeEventListener("click", onWindowClick));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				dir: __props.dir,
 				role: "menubar",
 				class: "flex items-center gap-0.5",
 				style: { "-webkit-app-region": "no-drag" },
-				onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+				onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+				onFocusout: onRootFocusout
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.menus, (menu) => {
 				return openBlock(), createElementBlock("div", {
 					key: menu.id,
 					class: "relative"
 				}, [createElementVNode("button", {
 					id: `menubar-trigger-${menu.id}`,
+					ref_for: true,
+					ref: (el) => bindTrigger(menu.id, el),
 					type: "button",
 					role: "menuitem",
-					"aria-haspopup": true,
+					"aria-haspopup": "menu",
 					"aria-expanded": openId.value === menu.id,
-					class: normalizeClass(["min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground", openId.value === menu.id && "bg-subtle text-foreground"]),
+					class: normalizeClass(["min-h-6 rounded-sm px-2 py-1 text-xs text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", openId.value === menu.id && "bg-subtle text-foreground"]),
 					onClick: withModifiers(($event) => toggle(menu.id), ["stop"]),
-					onMouseenter: ($event) => hover(menu.id),
-					onFocus: ($event) => hover(menu.id),
+					onMouseenter: ($event) => hover(menu.id, "pointer"),
+					onFocus: ($event) => hover(menu.id, "trigger-focus"),
 					onKeydown: ($event) => onTriggerKeydown($event, menu)
-				}, toDisplayString(menu.label), 43, _hoisted_1), openId.value === menu.id ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					role: "menu",
-					"aria-label": menu.label,
-					tabindex: "-1",
-					class: "absolute left-0 top-full z-50 mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-scale-in",
-					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
-					onKeydown: ($event) => onMenuKeydown($event, menu)
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(openMenu(menu), (item, i) => {
-					return openBlock(), createElementBlock(Fragment, { key: i }, [item.separator ? (openBlock(), createElementBlock("div", _hoisted_3)) : (openBlock(), createElementBlock("button", {
-						key: 1,
-						type: "button",
-						role: "menuitem",
-						disabled: item.disabled,
-						"data-highlighted": activeIndex.value === i || void 0,
-						style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(i) }),
-						class: "flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-xs text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle animate-fade-rise",
-						onClick: ($event) => choose(item),
-						onMouseenter: ($event) => activeIndex.value = i,
-						onFocus: ($event) => activeIndex.value = i
-					}, [createElementVNode("span", null, toDisplayString(item.label), 1), item.shortcut ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true)], 44, _hoisted_4))], 64);
-				}), 128))], 40, _hoisted_2)) : createCommentVNode("", true)]);
-			}), 128))]);
+				}, toDisplayString(menu.label), 43, _hoisted_2), createVNode(Transition, {
+					"enter-active-class": "animate-scale-in",
+					"leave-active-class": "animate-scale-out"
+				}, {
+					default: withCtx(() => [openId.value === menu.id ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_for: true,
+						ref: (el) => bindPanel(menu.id, el),
+						role: "menu",
+						"aria-label": menu.label,
+						tabindex: "-1",
+						class: "absolute left-0 top-full z-overlay mt-1 min-w-[13rem] origin-top-left rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+						onKeydown: ($event) => onMenuKeydown($event, menu)
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(openMenu(menu), (item, i) => {
+						return openBlock(), createElementBlock(Fragment, { key: i }, [item.separator ? (openBlock(), createElementBlock("div", _hoisted_4)) : (openBlock(), createElementBlock("button", {
+							key: 1,
+							type: "button",
+							role: "menuitem",
+							tabindex: "-1",
+							disabled: item.disabled,
+							"data-highlighted": activeIndex.value === i || void 0,
+							style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(i) }),
+							class: "flex w-full items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle disabled:pointer-events-none disabled:text-muted-foreground data-[highlighted]:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo animate-fade-rise",
+							onClick: ($event) => choose(item),
+							onMouseenter: ($event) => pointAtRow(openMenu(menu), item, i),
+							onFocus: ($event) => noteFocus(item, i)
+						}, [createElementVNode("span", null, toDisplayString(item.label), 1), item.shortcut ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true)], 44, _hoisted_5))], 64);
+					}), 128))], 40, _hoisted_3)) : createCommentVNode("", true)]),
+					_: 2
+				}, 1024)]);
+			}), 128))], 40, _hoisted_1);
 		};
 	}
 });