Twenty-four widgets answered the pointer with a cursor.

What the catalogue actually did

Counted, not remembered, across the hundred and thirty functions of eui_builders.sl as it stood. The theming was excellent — two hardcoded colours in the whole file, both deliberate scrims. Everything the pointer and the keyboard touch was not.

The reference page opposite claimed every widget was “themeable through roles, keyboard-navigable, and carries documented accessibility semantics”. Only the first clause was true.

A state belongs to exactly one side

The eight states do not live in one place, and most of the mess in a widget catalogue comes from pretending they do. Hover is the client's and costs no network; selection is the server's and costs a render; focus belongs to neither, and a server that tries to style it gets it wrong.

A tone is a resting colour set and two deltas

Deltas, not whole styles. Merged over whatever base a caller ended up with, they keep every geometry choice inside all three states — so a size, a selection, or a patch applied from outside cannot go missing under the pointer. That is the invariant restyle used to repair afterwards, made structural instead.

These five are real buttons. Hover them, hold them down, tab to them.

Only accent has a hover and an active offset — the theme derives them in OKLCH from the adjusted base. The status roles have neither, so there is no danger.active to reach for: danger presses to a sunken surface and keeps its own colour in the label. That is a constraint of the palette, not an oversight in the widget, and danger.base carries a guaranteed 3:1 against a surface either way.

base = {
  "border": 1,
  "border_color": "none",
  "transition": "fast"
}
hover = base.merge(tone["hover"])

"pointer_enter": {
  "local": "self.style = @hover",
  "styles": {"hover": hover}
}

Every interactive widget is control plus a body

The options hash is the signature. It is how twenty-odd widgets gain seven capabilities without a single call site changing: each keeps its old positional arguments and grows a trailing o = {}.

One deletion, right three times and wrong once

Disabling a control does not add a state. It removes the handler map, and that single act is correct almost everywhere:

• No click reaches the server. Dispatch walks up from the hit node looking for a handler and finds nothing on the path, so no event is ever encoded.
• It leaves the Tab order. The client’s focus order is exactly the nodes holding a click, key or editable handler — so a handler-less node drops out for free, with nothing to keep in sync.
• The cursor and the colours follow. not_allowed, text.disabled and border.subtle, all from one patch — and the disabled roles carry their own contrast guarantee in every mode.
• And it disappears from the accessibility tree. The client infers a role from the node’s kind and the presence of a click handler. With the handler gone there is no button to infer, and a disabled control decays into an unnamed group: a screen reader reads its label as loose text, with no hint that it is a control at all, let alone an unavailable one.

Which is the whole argument for the semantics below. disabled has to be something the widget says, not something it stops doing.

Rest, then disabled. The second one is not a colour scheme — it is the absence of the handlers, and the cursor says so before anything is clicked.

Publish    Publish

Size is the application’s. Density is the viewer’s.

These are two axes and conflating them scales everything twice. pad, gap and margin are space indices, and the client already multiplies each one by the viewer’s density before it lands in a frame. A server that resolved them to pixels first would have them scaled again. So the size table stays in indices, and a data-dense application asks for size: "sm" — it does not get to choose a density, because that choice is not the application’s to make.

There is deliberately no height in that table. Height is the text line plus the padding, which the client scales on both axes for free; a height pinned in pixels clips its own label the moment the viewer raises their font scale. Fixed boxes are for the places where a fixed box is the point — an icon button, a day cell, a row height — and those go through control_px, which mirrors the density factors: compact 0.8, cozy 1.0, comfortable 1.25.

What a widget says about itself

A node’s props are already a generic bag the client reads by name. So a widget can declare what it is at no cost on the wire, and a client that does not know a prop ignores it. Every migrated builder emits these now.

Half-built, and worth saying so. The builders emit these today; the client does not read them yet. Its mapping is still kind-based — anything with a click handler is a button named by the text inside it — so a checkbox, a switch, a tab and a menu item all still reach AT-SPI, UIA and AX as “Button”. Teaching the client to prefer a declared role over an inferred one is the other half, and it is a change to one file and one paragraph of the specification, not to the protocol.

Four of twenty-four

checkbox, switch, tabs and icon_button are migrated. Each kept its positional arguments, so nothing that called them changed; each gained hover, press, disabled, a size and its semantics. The gallery renders to the same 762 quads over 902 nodes it did before, in light and in dark — the point was to add states, not to restyle anything.

Twenty builders still answer the pointer with a cursor and nothing else: menu, select_option, navbar, sidebar, breadcrumb, segmented, accordion, tree_view, day_cell, pagination and the rest. They are the next pass, and the base they are moving onto is the one above.