system.cssthe engine GitHub

The .active utility

Menu
HomeHow-toEngineComponentsLand & streamChartsAdvancedLabDemosSkills
OverviewThe recipeDatastar bindings these components useState belongs in `data-ui-*`, not `data-*`Don't hand-roll layoutContainer-responsiveAnchored popoverThe six componentsRocket componentsThe stepped dialogMorph armorThe .active utilityThe rocket state canonPre-ship checklistOne bad expression takes the whole page downDialogs on a live page

THE .active UTILITY (gf-191, per Mike)

A TRANSIENT client highlight (keyboard focus row in a combobox/menu, a hover-independent "this one" marker) is the .active utility class — never aria-current, which keeps its REAL meaning (the current page / step / date in a set: the org switcher's current org, the wizard strip's current station). Rockets toggle .active for paint and the proper ARIA attribute for semantics (aria-selected in a listbox). The engine's paint recipes list .active beside their ARIA selectors.