Popover

A native popover: popovertarget on the button and popover plus data-popover on the panel. The browser opens and closes it; s72.js only decides where it lands.

Basic

<button popovertarget="account" data-variant="ghost" aria-label="Account: A. Reyes"><span data-avatar="sm">AR</span></button>
<div popover id="account" data-popover>
  <p><strong>A. Reyes</strong></p>
  <p>Signed in on this machine.</p>
  <menu>
    <li><button data-toast="Status set to focus" data-toast-tone="go">Set status</button></li>
    <li><button data-variant="line">Sign out</button></li>
  </menu>
</div>

Escape and a click outside close it, because that is what the Popover API already does.

Notes

• s72.js places the panel under its button with a 6px gap, flips it above when the bottom is close, and keeps it 8px inside the viewport.
• It follows scroll and resize while open, and stops listening when it closes.
• The panel is a card in the float tokens, so it matches dialogs and dropdown menus.
• Use a dialog instead when the reader must answer before carrying on; a popover never traps focus.