cat-dropdown / cat-datepicker: render popups in the top layer (fix clipping in modals)

[drewda]

Summary

A dropdown menu or datepicker calendar opened inside a scrollable container (most visibly a cat-modal body, which now has overflow: auto) was clipped at the container's edge. This affects real usage: CALACT's Feed Archive modal (interline-io/calact-network-analysis-tool#390) composes datepickers inside a modal, so the calendar was cut off. cat-tooltip solved the same class of problem in 0.3.0 with the Popover API; this brings cat-dropdown and cat-datepicker in line.

Changes

• New src/util/anchored-popover.ts composable. When the Popover API is available it sets popover="manual" on the popup, shows it with showPopover(), and positions it with fixed viewport coordinates computed from the trigger's bounding box. The top layer escapes ancestor overflow clipping, z-index stacking, and transformed containing blocks. manual (not auto) so the popup does not light-dismiss outside the components' own Escape/click-outside handling.
• The popup stays in place in the DOM (the Popover API renders in the top layer without moving the element), so scoped styles, aria-controls/aria-activedescendant, focus management, and click-outside containment via root.contains() are all unchanged.
• Vertical-side flip when the preferred side lacks room, viewport clamping on both axes, and reposition on scroll (capture phase, so scrolling any ancestor works) and resize.
• Browsers without the Popover API (and jsdom) fall back to the existing absolute positioning; no behavior change there, and all existing widget tests pass unchanged.
• The positioning math is a pure exported function computePopoverPosition with 8 unit tests (alignment, flip both directions, no-flip, horizontal clamp, left-margin clamp, oversized clamp).

Test plan

• In the playground, open the modal layered-Escape demo (/controls/modal) and open the dropdown and datepicker inside it: the menu and calendar should render fully, not clipped by the modal body.
• Open a datepicker near the bottom of the viewport: the calendar should flip above the input.
• Open a bottom-right-positioned dropdown: the menu should right-align to the trigger.
• Scroll the page with a popup open: it should track the trigger.
• Confirm standalone (non-modal) dropdowns/datepickers still open, position, and dismiss correctly.

Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying catenary with    Cloudflare Pages

Latest commit:	f5e89cd
Status:	✅  Deploy successful!
Preview URL:	https://be6d470c.catenary-5bw.pages.dev
Branch Preview URL:	https://popup-top-layer.catenary-5bw.pages.dev

View logs