Submenu

---
// src/components/ui/overlays/submenu/SubMenu.astro — headless primitive (see ../../README.md).
// A menu nested inside another menu. Pair it with SubMenuTrigger, and RENDER BOTH INSIDE THE PARENT
// MENU — the nesting is not decorative:
//
//   • The Popover API treats a `popover="auto"` whose invoker sits inside another open popover as a
//     nested one, so opening the submenu does NOT dismiss its parent, light-dismiss closes the whole
//     stack at once, and Escape closes only the topmost. That is the hard part of a submenu, and the
//     platform does all of it — but only if the trigger is inside the parent panel.
//   • `_menu` roves items by walking to the nearest `role="menu"`, so a panel that is a DOM
//     descendant of its parent is correctly excluded from the parent's own arrow-key order.
//
// What the shared `_menu` controller adds on top: ArrowRight on the trigger opens and steps in,
// ArrowLeft anywhere inside closes and steps back out (native focus return puts the caret on the
// trigger), and pointer intent — an open delay so it does not fire on a pass-by, and a close delay
// long enough for the pointer to cross the gap into the panel, which is the difference between a
// submenu that works with a mouse and one that slams shut on the way in.
//
// `side="right"` by default: a submenu goes beside its parent, and `_anchor` flips it to the left
// near the edge of the viewport.
import "../../../../styles/structure.css";

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

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

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

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

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

---
// src/components/ui/overlays/submenu/SubMenuTrigger.astro — SubMenu compound part (see ../../README.md).
// The parent-menu item that opens a SubMenu whose `id` equals this trigger's `for`. It is itself a
// `role="menuitem"`, so it takes its place in the parent's arrow-key order like any other item —
// with `aria-haspopup="menu"` marking it as the one that leads somewhere, which is both what a
// screen reader announces and what `_menu` keys ArrowRight on.
//
// `aria-expanded` is kept in sync by the shared `_anchor` controller, so a theme can turn the
// chevron with `[data-slot="submenu-trigger"][aria-expanded="true"] [data-slot="chevron"]`.
import type { HTMLAttributes } from "astro/types";

import Chevron from "../../_Chevron.astro";

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="submenu-trigger"
  class={className}
  {...rest}
>
  <slot />
  <slot name="chevron"><Chevron /></slot>
</button>

import SubMenu from "./SubMenu.astro";
import SubMenuTrigger from "./SubMenuTrigger.astro";

export { SubMenu, SubMenuTrigger };
export default SubMenu;