Popover

---
// src/components/ui/overlays/popover/Popover.astro — headless primitive (see ../../README.md).
// The generic anchored overlay the library was missing, on the native Popover API: a PopoverTrigger
// toggles the PopoverContent it points at (by id), which renders in the top layer — so it is never
// clipped by an ancestor's `overflow` — with native light-dismiss, native Escape, and native focus
// return to the trigger. The shared `_anchor` controller positions it on the requested side, flips
// it when there is no room, reflows it on scroll/resize, and syncs `aria-expanded` on the trigger.
//
// Unlike Dropdown this carries no menu semantics: the content is a `role="dialog"` that can hold
// anything — a form, a colour picker, prose. Compose PopoverTrigger / PopoverContent, and optionally
// PopoverClose and PopoverArrow.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

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

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

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

---
// src/components/ui/overlays/popover/PopoverArrow.astro — Popover compound part (see ../../README.md).
// An empty, `aria-hidden` element for a theme to draw the little pointer with. It ships no shape of
// its own; what it ships is the HOOK — the arrow has to know which way the panel went, and after a
// flip that is not the side the author asked for.
//
// The answer needs no JavaScript here: `_anchor` keeps `data-side` on PopoverContent truthful, so a
// theme selects on the parent — `[data-slot="popover-content"][data-side="top"] [data-slot="popover-arrow"]`
// — and the arrow follows a flip automatically. See theme-default.css for the worked example.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span">;

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

<span aria-hidden="true" class={className} data-slot="popover-arrow" {...rest}></span>

---
// src/components/ui/overlays/popover/PopoverClose.astro — Popover compound part (see ../../README.md).
// Closes the popover whose `id` equals this button's `for`, using the platform's own
// `popovertargetaction="hide"` — no script at all.
//
// It exists because light dismiss only serves the pointer. A keyboard user has Escape, but a screen
// reader user exploring the panel with a virtual cursor has neither, and a visible, labelled control
// is the only thing that works for everyone. Mirrors DialogClose.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  for: string;
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
};

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

<button
  type="button"
  popovertarget={target}
  popovertargetaction="hide"
  data-slot="popover-close"
  data-variant={variant}
  data-size={size}
  class={className}
  {...rest}
>
  <slot />
</button>

---
// src/components/ui/overlays/popover/PopoverContent.astro — Popover compound part (see ../../README.md).
// Top-layer panel via the native Popover API (`popover="auto"`): hidden until its PopoverTrigger
// (`popovertarget` = this panel's `id`) toggles it, with native light-dismiss and Escape. `id` is
// required — the trigger references it.
//
// `data-anchor` is what opts the panel into the shared `_anchor` controller; any element carrying it
// (including one of your own) gets placed, flipped and reflowed by the same code. The controller
// writes viewport pixels into `left`/`top`, so the panel must be `position: fixed` — structure.css
// does that, which is why this file imports it.
//
// `data-side` is rendered here with the REQUESTED side and rewritten by the controller with the side
// actually used, so it is never absent and always truthful: point a PopoverArrow or a slide-in
// transition at it and both follow a flip for free.
import "../../../../styles/structure.css";

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

type Props = HTMLAttributes<"div"> & {
  id: string;
  side?: "bottom" | "top" | "left" | "right";
  align?: "start" | "center" | "end";
  /** Distance from the trigger, and the minimum margin kept to the viewport edge. Pixels. */
  offset?: number;
};

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

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

---
// src/components/ui/overlays/popover/PopoverTrigger.astro — Popover compound part (see ../../README.md).
// Button that toggles the PopoverContent whose `id` equals this trigger's `for`, via the native
// Popover API (`popovertarget`). The shared `_anchor` controller syncs `aria-expanded`, so a theme
// can style the open state with `[data-slot="popover-trigger"][aria-expanded="true"]`.
// `aria-haspopup="dialog"` rather than `menu`: the content is not a menu and must not be announced
// as one — that is the whole difference between this and DropdownTrigger.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  for: string;
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
};

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

<button
  type="button"
  popovertarget={target}
  aria-haspopup="dialog"
  aria-expanded="false"
  data-slot="popover-trigger"
  data-variant={variant}
  data-size={size}
  class={className}
  {...rest}
>
  <slot />
</button>

import Popover from "./Popover.astro";
import PopoverArrow from "./PopoverArrow.astro";
import PopoverClose from "./PopoverClose.astro";
import PopoverContent from "./PopoverContent.astro";
import PopoverTrigger from "./PopoverTrigger.astro";

export { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger };
export default Popover;