Alert

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<div class="tui-alert" data-alert="error" role="alert">
  <span class="tui-alert__legend">Fault</span>
  <p class="tui-alert__text"><b>The inverter stopped answering at 14:02.</b>
    The house is on the grid until it restarts.</p>
  <div class="tui-alert__actions">
    <button class="tui-key tui-key--sm">Restart inverter</button>
  </div>
  <button class="tui-key tui-key--flat tui-key--icon tui-key--sm tui-alert__dismiss"
          aria-label="Dismiss" data-tip="Dismiss" data-alert-dismiss>…×…</button>
</div>

import '/kit/kit.mjs';   // wires every [data-alert-dismiss]

document.addEventListener('tui-alert-dismiss', (e) => remember(e.target.id));
// From a script:
import { dismissAlert } from '/kit/kit.mjs';
dismissAlert(document.querySelector('#inverter-fault'));

Needs kit.css and kit.mjs. How to install the kit.

• Colour is never alone: the legend is a word, and the text says what happened. The red legend is lifted toward white to read at 4.5:1 on its glass.
• Use role="alert" only for a fault that appears while someone is working, so it interrupts; role="status" is read politely.
• After a dismiss, focus moves to the next focusable element on the page, never to the top of the document.
• The × key has an aria-label; the tip repeats it for pointer and keyboard users.

The window is the kit’s recess. The annunciator is a 24px strip of display glass (the VFD background, an inset shadow, a faint glare) with the word in Geist Mono lit by --lit and a two-step glow; a radial wash of the same light sits behind it, the way a lamp shows through printed film. data-alert only sets --lit. The dismiss is fifteen lines in alert.mjs, delegated from the document, so alerts added later work too.