Native Popover Reveal (@starting-style)

A button that opens a real native Popover (the `popover` attribute + `popovertarget`, not a hand-rolled div-and-JS tooltip) which fades and scales in from a true 'before it was even shown' state via `@starting-style`, then reverses the exact same way on close — the browser keeps `display` and the top-layer `overlay` property around for the full transition via `transition-behavior: allow-discrete` instead of yanking the element away mid-animation. Genuinely zero JavaScript: `popovertarget`/`popovertargetaction="hide"` are plain HTML attributes, not event listeners. Real, current, sourced via WebSearch, cross-checked across multiple independent sources (Chrome Developer Blog's 'Four new CSS features for smooth entry and exit animations', web-standards.dev's 'Entry and exit transitions with modern CSS' (2026-06), carmenansio.com's '@starting-style: Animate display:none & height:auto', and alexanderburgos.netlify.app's 'transition-behavior: allow-discrete' writeup — all agreeing on the same mechanism): `@starting-style` plus `transition-behavior: allow-discrete` reached Baseline 'Newly available' together on 2024-08-06 when Firefox 129 shipped (Chrome/Edge had it from 117, Safari from 17.4), and sit around 91% global support per caniuse as of early 2026 — clean, wide-support territory, the same end of the spectrum as this catalog's `light-dark()`/`color-mix()` entry, not the Chromium-only end some older entries sat at. The Popover API itself (`popover`, `popovertarget`, `:popover-open`) is its own, even longer-shipped baseline (Chrome 114, Firefox 125, Safari 17) — this entry's actual new ground is only the entry/exit transition layered on top, not the popover mechanism itself, which this catalog already uses once (see 'Anchor Popover Menu'). **Honest fallback:** without `@starting-style`/`allow-discrete` support the popover still opens and closes correctly — that's native browser behavior, not something this entry adds — it just snaps open/closed instantly instead of fading, same 'never broken, never half-done' bar as every other entry here. No WebGL, no scroll-jacking, no router. (Vanilla example: live iframe preview + HTML/CSS tabs, no JS tab at all — click the button, then Close, and watch it fade+scale both ways.)

<div class="svp-wrap">
  <button class="svp-trigger" type="button" popovertarget="svp-panel">
    What's new <span aria-hidden="true">+</span>
  </button>
  <div id="svp-panel" class="svp-panel" popover>
    <strong class="svp-title">Native popover, native transition</strong>
    <p class="svp-body">This panel fades and scales in from @starting-style, and reverses the same way on close via transition-behavior: allow-discrete — zero JavaScript, just the native Popover API.</p>
    <button class="svp-close" type="button" popovertarget="svp-panel" popovertargetaction="hide">Close</button>
  </div>
</div>