Popover

Open it and scroll the page: the panel follows the button. That is anchor-name and position-try-fallbacks, not a scroll listener — it is the part that used to mean shipping Popper or Floating UI.

The top layer, light dismiss and Escape are the browser’s as well, and none of it is scripted. One thing is not free, despite what you may have read: measured 2026-08-08 on all three engines, in the DOM and in the accessibility tree, an invoker using command="toggle-popover" or popovertarget gets no aria-expanded at all, open or closed — so a screen reader is never told this button reveals a panel. That is why every panel here carries data-ui="popover": it wires applyCommandAria(), which reads the state from the popover’s own toggle event and so stays right through light dismiss and Escape. The component opens without script; it is not accessible without script, and we would rather say so than let the demo imply otherwise.

The flip when a panel would overflow is instant, and it cannot be a transition — measured in Chromium on 2026-08-09 with a one-second transition: inset on a panel forced into flip-block, the panel was at its final position in the first frame.

That is structural rather than a gap: a position-try fallback is resolved at used-value time, after style computation, so there are no two computed values to interpolate. What is animatable, measured in the same session, is an anchor() in an ordinary inset-* declaration when the anchor itself changes — which is how segmented and tabs slide their indicators — but a fallback is not a different anchor, it is a different position against the same one. The placement classes are logical and set one custom property between them, so they mirror in RTL for nothing and anything they do not cover is a --popover-area of your own. Do not add aria-haspopup to these buttons: the panel is a plain stack of controls, and aria-haspopup="menu" on a thing that is not a menu is a lie the screen reader repeats.