Presence
CSS paints an open or closed state. JavaScript still owns mounting, focus, inertness, ARIA, Escape, portals, and final hiding.
Example
state: open
State-owner contract
Opening removes hidden, inert, and aria-hidden before setting data-presence="open". Closing returns focus first, sets inert and aria-hidden, then paints data-presence="closed" and waits for the longest utility transition before setting hidden.
Presence never changes display. Use presence-none for an explicit instant visual opt-out. Reduced motion and missing inert support finish synchronously.
<div class="presence presence-rise" data-presence="open"> <!-- the owner controls hidden, inert, aria-hidden, and focus return --></div>API
presence supplies state hooks and closed-state pointer blocking. Combine it with exactly one of presence-fade, presence-rise, presence-pop, or presence-none.
Customise --presence-duration, --presence-exit-duration, --presence-ease, --presence-distance, and --presence-scale.