system.cssthe engine GitHub

State

State — the data-ui-* grammar Server-stamped state, engine-styled. A state outranks any variant it lands on.
THE SELECTION VOCABULARY (gf-191) Four spellings, four meanings — never interchangeable. aria-current="page" = REAL currentness (the org switcher's org, a step strip's station). aria-pressed = a toggle's on. aria-selected = a listbox's CHOSEN row — generalized into the .menu and .tabs paints (see it live on the combo-box rocket bench; a bare .menu can't render in flow by design). .active = the GLOBAL UTILITY for a transient client highlight (a combobox's keyboard row): paint without stolen semantics.
aria-current="page" — where you ARE
on · off on = the engine's focus ring; off = drained (grayscale — .tag keeps its own quieter recipe).
tag on tag off
svg-only span — the roster column toggles
active The .pri position as a STATE — lens sort/filter toggles wear it. Skin layer, after the variants: --bg 1 must beat .bare's --bg 0.
btn bare tag
btn bare at rest
leaving The exit choreography: toast-card sets data-ui-state="leaving", the engine animates the collapse. Live on Rockets → toast-card.
The wider data-ui-* vocabulary Preference knobs on html, stamped by the shell, read by the engine: data-ui-theme · -skin · -size · -font · -motion · -radius. Component-local state, stamped by rockets/views: data-ui-selected · -today · -start · -end · -inrange · -adjacent · -preview · -confirm · -grid · -kind (the calendar family) · -bill (settings).