Hover, focus and active

A link with no hover is not a finished link, and a button that does not respond is not a button. States are part of the design, not something to be added later by somebody else.

Where they are

On the element’s name, at the top of the right-hand rail:

section__link  | hover | focus | active

Click one and the whole panel points at it. Everything works exactly as it normally does — colours, type, spacing, corners, shadows, layers — and what you set is written to .section__link:hover instead of .section__link. A state that already has something in it is drawn as a thing rather than an invitation.

Everything can be hovered. Only something you can reach and press gets focus and active: a link, a button, or anything carrying a button or link styling tag. Offering three tabs on a heading would be two that do nothing.

The canvas shows it

While a state is open the canvas paints the element in that state, with a badge saying so:

Showing hover — the canvas is not live

Nothing about the preview reaches your files. It is a rule added to the live stylesheet only, and it disappears the moment you leave the state.

Focus is handled for you

Giving something a hover gives it a focus ring, using your design system’s own --focus-ring and --focus-offset. You do not have to remember, and you do not have to know why.

The why: a hover is a promise that the element responds to being reached. A mouse gets that promise and a keyboard does not, unless something makes the focus visible — and a page whose buttons cannot be seen when tabbed to cannot be used without a mouse at all.

Most of the time nothing is written, because GenCSS has already done it: its reset gives a focus ring to every <a>, to .btn--* and to .link--*. The only case that needs anything is an element wearing a styling tag of your own, where those selectors do not reach. That is the one this fills in.

It is :focus-visible, not :focus, so the ring appears for a keyboard and not on every mouse click — which is what made people start switching focus rings off.

With layers

A state and a layer can be open together. The rule that comes out is .card:hover::before — the state before the layer, which is the only order CSS accepts.