How it works
@starting-style defines the from-state on insertion; transition-behavior: allow-discrete lets display and overlay transition.
@starting-style Entry/Exit
Popover and <dialog> entry/exit animations in pure CSS, including display:none transitions.
sketchCSS
Performance
No JS at all — the top layer and animations are handled by the browser.
Accessibility & reduced motion
Native popover/dialog give focus management and Esc handling for free.
Export
transition={{ duration: 0.35, ease: [0.2, 0.9, 0.3, 1.2] }}