Menu

---
// src/components/ui/overlays/menu/MenuCheckboxItem.astro — Menu part (see ../../README.md).
// A menu item that holds an on/off state — "Show hidden files", "Word wrap". `role="menuitemcheckbox"`
// plus `aria-checked` is the whole contract: the shared `_menu` controller flips that attribute on
// activation and dispatches a bubbling `change`, and `aria-checked` is also the state a theme draws
// the tick from. No data attribute was minted for it, because ARIA already carried it (rule 4).
//
// Unlike a plain item this does NOT close the menu — a checkbox menu exists to set several things at
// once, and one that dismissed itself after the first would make its own second option unreachable.
//
// It ships a tick, in a `menu-item-indicator` span that structure.css hides while `aria-checked` is
// false — because a row of checkbox items that all look identical does not report the state it is
// in, and this library's floor is that a primitive stays honest with no theme at all. The span is
// `aria-hidden` (the state is `aria-checked`, and announcing both would say it twice), and
// `<slot name="indicator">` replaces the glyph with your own.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & { checked?: boolean };

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

<button
  type="button"
  role="menuitemcheckbox"
  aria-checked={checked ? "true" : "false"}
  data-slot="menu-checkbox-item"
  class={className}
  {...rest}
>
  <span aria-hidden="true" data-slot="menu-item-indicator"
    ><slot name="indicator">&#10003;</slot></span
  >
  <slot />
</button>

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

---
// src/components/ui/overlays/menu/MenuGroup.astro — Menu part (see ../../README.md).
// Groups related items inside any `role="menu"` — Dropdown's, ContextMenu's, Menubar's, a SubMenu's.
// `role="group"` is what makes a screen reader announce "Sort by, 3 items" on entering, instead of
// reading six commands as one undifferentiated list; `labelledby` should name a MenuLabel's `id`, or
// the group is a boundary with nothing to call it.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & { labelledby?: string };

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

<div role="group" aria-labelledby={labelledby} data-slot="menu-group" class={className} {...rest}>
  <slot />
</div>

---
// src/components/ui/overlays/menu/MenuLabel.astro — Menu part (see ../../README.md).
// The heading for a MenuGroup. Give it an `id` and point the group's `labelledby` at it.
//
// It is deliberately NOT a menu item: no role, no tabindex, no place in the roving order. `_menu`
// discovers items by role, so a label is skipped by the arrow keys for free — which is the whole
// reason a menu heading needs its own component rather than being a styled item.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

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

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

---
// src/components/ui/overlays/menu/MenuRadioGroup.astro — Menu part (see ../../README.md).
// A set of mutually exclusive MenuRadioItems. This element is the EXCLUSIVITY SCOPE: the shared
// `_menu` controller clears `aria-checked` on the other items inside this group and nowhere else, so
// two independent radio sets can sit in one menu without fighting. Leave an item ungrouped and the
// whole menu becomes its scope, which is almost never what you meant.
//
// `role="group"` and a `labelledby` pointing at a MenuLabel, exactly like MenuGroup — the difference
// is the data-slot, which is the hook the controller looks for.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & { labelledby?: string };

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

<div
  role="group"
  aria-labelledby={labelledby}
  data-slot="menu-radio-group"
  class={className}
  {...rest}
>
  <slot />
</div>

---
// src/components/ui/overlays/menu/MenuRadioItem.astro — Menu part (see ../../README.md).
// One choice in a MenuRadioGroup — "Sort by name / date / size". `role="menuitemradio"` plus
// `aria-checked`; the shared `_menu` controller sets this one true and the others in the same
// MenuRadioGroup false, then dispatches a bubbling `change`.
//
// Like MenuCheckboxItem it leaves the menu open, and like MenuCheckboxItem it ships a
// `menu-item-indicator` that structure.css hides while unchecked — override the glyph with
// `<slot name="indicator">`; its default is a dot rather than a tick, the convention for an
// exclusive choice.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & { checked?: boolean };

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

<button
  type="button"
  role="menuitemradio"
  aria-checked={checked ? "true" : "false"}
  data-slot="menu-radio-item"
  class={className}
  {...rest}
>
  <span aria-hidden="true" data-slot="menu-item-indicator"
    ><slot name="indicator">&#8226;</slot></span
  >
  <slot />
</button>

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

---
// src/components/ui/overlays/menu/MenuSeparator.astro — Menu part (see ../../README.md).
// A divider between groups of menu items. `role="separator"` rather than an <hr> so it is legal
// inside `role="menu"`, whose only permitted children are items, groups and separators — an <hr>
// there is markup a screen reader may simply drop, taking the grouping with it.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & { orientation?: "horizontal" | "vertical" };

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

<div
  role="separator"
  aria-orientation={orientation}
  data-slot="menu-separator"
  data-orientation={orientation}
  class={className}
  {...rest}
>
</div>

import MenuCheckboxItem from "./MenuCheckboxItem.astro";
import MenuGroup from "./MenuGroup.astro";
import MenuLabel from "./MenuLabel.astro";
import MenuRadioGroup from "./MenuRadioGroup.astro";
import MenuRadioItem from "./MenuRadioItem.astro";
import MenuSeparator from "./MenuSeparator.astro";

export { MenuCheckboxItem, MenuGroup, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator };
export default MenuGroup;