system.cssthe engine GitHub

Drawers

Drawers <dialog class="drawer left|right|top|bottom">, opened by commandfor + command="show-modal", closed by closedby="any". The slide, scrim and timing are the engine's, on the motion clock. .glass frosts the scrim. .drawer-grow sizes the panel to its content. On a live page add data-preserve-attr="open".
Left
The primary navigation on a phone lives here: the rail's items, one per line. HomeEventsSettings
Right
A record's detail beside the roster: the row stays in view, the panel edits it.
Warehouse
Top
Notifications: a band under the header, the page still visible beneath.
actionYour passkey is ready to add.
Bottom
A phone's sheet: the verbs for the thing the thumb is on.
Right · glass
The frost lives on the backdrop, so the page beneath is sampled reliably.