The native Popover API — two attributes, no JS

<div class="wrap">
    <h1>🎮 Two attributes, a real popover</h1>
    <p class="sub">
      The card below is a <strong>native popover</strong> — wired with just
      <code>&lt;button popovertarget&gt;</code> + <code>popover="auto"</code>. No JavaScript for
      open/close, click-outside dismiss, Escape, or z-index. The log shows the browser's own
      <code>toggle</code> events. Everything you touch here is the real feature.
    </p>

<div class="note" id="unsupported" hidden>
      ⚠️ Your browser doesn't support the <strong>Popover API</strong> yet, so the live demo is hidden.
      It's Baseline 2024 — try a recent Chrome, Edge, Safari, or Firefox to poke it. The
      before/after code below still tells the story.
    </div>

<div class="panel live">
      <h2>1 · Open it, then dismiss it three ways</h2>
      <p class="cap">
        Click <strong>Open settings</strong>. Then close it however you like: click the button
        again, <strong>click anywhere outside</strong>, or press <strong>Esc</strong>. Watch the log
        in panel 3 name each event.
      </p>
      <div class="controls">
        <button id="open-btn" class="open-btn" popovertarget="settings-pop">⚙&nbsp; Open settings</button>
        <button id="reset" class="ghost">Reset demo</button>
      </div>

<div id="settings-pop" popover="auto">
        <p class="pop-title">Settings</p>
        <p class="pop-note">A plain <code class="inline">&lt;div popover&gt;</code> in the top layer — above every stacking context.</p>
        <div class="setting"><span>Dark mode</span><input type="checkbox" checked aria-label="Dark mode" /></div>
        <div class="setting"><span>Email notifications</span><input type="checkbox" aria-label="Email notifications" /></div>
        <div class="setting"><span>Compact rows</span><input type="checkbox" checked aria-label="Compact rows" /></div>
        <div class="pop-actions">
          
          <button class="ghost" popovertarget="confirm-pop">Reset defaults…</button>
          
          <button popovertarget="settings-pop" popovertargetaction="hide">Close</button>
        </div>
      </div>

<div id="confirm-pop" popover="auto">
        <p class="pop-title">Reset to defaults?</p>
        <p class="pop-note">This popover opened from inside the other one — both stack in the top layer, and there isn't a single <code class="inline">z-index</code> in this demo.</p>
        <div class="pop-actions">
          <button popovertarget="confirm-pop" popovertargetaction="hide">Confirm</button>
          <button class="ghost" popovertarget="confirm-pop" popovertargetaction="hide">Cancel</button>
        </div>
      </div>
    </div>

<div class="panel live">
      <h2>2 · Feel the two knobs</h2>
      <div class="row">
        <span class="lbl">Dismiss mode</span>
        <div class="seg" role="group" aria-label="Dismiss mode">
          <button data-mode="auto" aria-pressed="true">auto</button>
          <button data-mode="manual" aria-pressed="false">manual</button>
        </div>
      </div>
      <p class="cap" id="mode-hint">auto: click outside or press Esc to dismiss, and only one auto popover is open at a time.</p>
      <div class="row">
        <span class="lbl">Entrance</span>
        <label><input type="checkbox" id="anim-chk" checked /> Animate with <code class="inline">@starting-style</code></label>
      </div>
      <p class="cap">Off = the popover snaps in instantly. On = it fades and slides — the whole animation is one <code class="inline">@starting-style</code> block, no keyframes. Reopen the popover after toggling to see the difference.</p>
    </div>

<div class="panel live">
      <h2>3 · The browser is doing the work</h2>
      <div class="status">
        <span><span class="k">state:</span> <span class="val off" id="st-state">CLOSED</span></span>
        <span><span class="k">popover=</span> <span class="val mode" id="st-mode">auto</span></span>
      </div>
      <ul class="log" id="log" aria-live="polite"></ul>
      <p class="cap" style="margin-top:12px">Each line is a native <code class="inline">toggle</code> event — the same event you'd listen to in real code. You wrote none of the dismiss logic.</p>
    </div>

<div class="panel">
      <h2>4 · What you used to write vs. now</h2>
      <div class="pair">
        <div class="side">
          <span class="tag old">the old way</span>
<pre><code><span class="c">// state + a click-outside listener</span>
<span class="k2">const</span> [open, setOpen] = useState(false);
useEffect(() => {
  <span class="k2">const</span> h = (e) =&gt; {
    <span class="k2">if</span> (!ref.current<span class="a">?</span>.contains(e.target))
      setOpen(false);
  };
  document.addEventListener(<span class="v">'mousedown'</span>, h);
  <span class="k2">return</span> () =&gt; document
    .removeEventListener(<span class="v">'mousedown'</span>, h);
}, []);
<span class="c">/* + Escape handler + aria-expanded
   + position:absolute; <span class="a">z-index:9999</span> */</span></code></pre>
        </div>
        <div class="side">
          <span class="tag now">now</span>
<pre><code><span class="k2">&lt;button</span> <span class="v">popovertarget</span>=<span class="v">"menu"</span><span class="k2">&gt;</span>
  Options
<span class="k2">&lt;/button&gt;</span>

<span class="k2">&lt;div</span> <span class="v">id</span>=<span class="v">"menu"</span> <span class="v">popover</span><span class="k2">&gt;</span>
  …
<span class="k2">&lt;/div&gt;</span>

<span class="c">// open/close, click-outside,
// Escape, top layer, aria-expanded
// — all free. Zero JavaScript.</span></code></pre>
        </div>
      </div>
    </div>

<p class="foot">
      Baseline 2024 (Chrome 114, Firefox 125, Safari 17). What the API doesn't do: viewport-aware
      <em>positioning</em> — this card just uses the browser's default centering. For dropdowns that flip
      and shift you still reach for Floating UI or CSS Anchor Positioning.
    </p>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.