Mega Menu

---
// src/components/ui/overlays/mega-menu/MegaMenu.astro — headless primitive (see ../../README.md).
// Mega menu on the native Popover API — a Dropdown with a wide multi-column panel (the same move as
// Sheet reusing Dialog): a MegaMenuTrigger toggles the MegaMenuPanel it points at (by id), which
// renders in the top layer with native light-dismiss + Escape + focus-return. Placement and
// aria-expanded sync come from the shared `_popover` controller; there's no roving — a panel is a
// grid of links, so natural Tab order is the right keyboard model. Compose MegaMenuTrigger /
// MegaMenuPanel / MegaMenuItem, typically inside a NavItem.
// ponytail: click-to-open only — no hover trigger. Hover menus are hostile to touch
// and keyboard users; if a project insists, add hover at the composition layer, not here.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

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

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

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

---
// src/components/ui/overlays/mega-menu/MegaMenuItem.astro — MegaMenu compound part (see ../../README.md).
// Rich panel link: optional `icon` slot, title (default slot), optional `description` slot. Plain
// <a>, natural Tab order. Each part carries its own data-slot; the icon and description wrappers are
// rendered only when their slot is filled, so a theme never has to style an empty box.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a"> & { href: string };

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

<a href={href} data-slot="mega-menu-item" class={className} {...rest}>
  {
    Astro.slots.has("icon") && (
      <span data-slot="mega-menu-item-icon" aria-hidden="true">
        <slot name="icon" />
      </span>
    )
  }
  <span data-slot="mega-menu-item-body">
    <span data-slot="mega-menu-item-title"><slot /></span>
    {
      Astro.slots.has("description") && (
        <span data-slot="mega-menu-item-description">
          <slot name="description" />
        </span>
      )
    }
  </span>
</a>

---
// src/components/ui/overlays/mega-menu/MegaMenuPanel.astro — MegaMenu compound part (see ../../README.md).
// Top-layer panel via the native Popover API (`popover="auto"`): hidden until its MegaMenuTrigger
// (`popovertarget` = this panel's `id`) toggles it, with native light-dismiss + Escape. `id` is
// required. `align` tells the shared `_popover` controller which trigger edge to anchor to (it writes
// `top`/`left` in px — structure.css supplies the `position: fixed` that makes those mean anything).
// `columns` is a theme hook for width + column count.
import "../../../../styles/structure.css";

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

type Props = HTMLAttributes<"div"> & {
  id: string;
  align?: "start" | "end";
  columns?: 1 | 2 | 3;
};

const { columns = 3, align = "start", class: className, ...rest } = Astro.props;
---

<div
  popover="auto"
  data-slot="mega-menu-panel"
  data-align={align}
  data-columns={columns}
  class={className}
  {...rest}
>
  <slot />
</div>

---
// src/components/ui/overlays/mega-menu/MegaMenuTrigger.astro — MegaMenu compound part (see ../../README.md).
// Button that toggles the MegaMenuPanel whose `id` equals this trigger's `for`, via the native
// Popover API (`popovertarget`). It carries NavLink's `data-variant` surface so a theme can style it
// seamlessly between NavLinks in a Nav bar. The shared `_popover` controller syncs `aria-expanded`,
// which a theme uses to rotate the chevron. No `aria-haspopup`: the panel is a plain region of links,
// not a menu, so button + aria-expanded is the correct disclosure pattern.
import type { HTMLAttributes } from "astro/types";

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

type Props = HTMLAttributes<"button"> & {
  for: string;
  variant?: "underline" | "pills" | "segment";
};

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

<button
  type="button"
  popovertarget={target}
  aria-expanded="false"
  data-slot="mega-menu-trigger"
  data-variant={variant}
  class={className}
  {...rest}
>
  <slot />
  <slot name="chevron"><Chevron /></slot>
</button>

import MegaMenu from "./MegaMenu.astro";
import MegaMenuItem from "./MegaMenuItem.astro";
import MegaMenuPanel from "./MegaMenuPanel.astro";
import MegaMenuTrigger from "./MegaMenuTrigger.astro";

export { MegaMenu, MegaMenuItem, MegaMenuPanel, MegaMenuTrigger };
export default MegaMenu;