Commit key

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

<tui-commit data-busy="Deploying…" data-done="Deployed" data-failed="Deploy failed">
  <button class="tui-key tui-key--primary tui-key--lg" type="button">Deploy to production</button>
</tui-commit>

<tui-commit data-guard data-busy="Deleting…" data-done="Deleted" data-failed="Delete failed">
  <button class="tui-key tui-key--lg tui-key--danger" type="button">Delete workspace</button>
</tui-commit>

import '/kit/kit.mjs';   // defines <tui-commit>

const deploy = document.querySelector('tui-commit');

// Hand it the real work: busy lasts exactly as long as the promise.
deploy.addEventListener('commit', (e) => e.detail.wait(api.deploy('main')));

// Or run it yourself. A rejection's message is what the key prints.
try {
  await deploy.run(() => api.deploy('main'));   // "Deployed"
} catch (err) {
  // The key already says "Deploy failed — " + err.message
}

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

• It stays a native <button>. While busy it takes aria-busy="true" and aria-disabled="true" (not disabled) so focus stays on it and a screen reader hears that it is working.
• A polite live region says each state in words: “Deploying…”, “Deployed”, “Payment failed — card declined”. The button’s own name is always the legend showing.
• The matrix is decoration (aria-hidden); the words carry the state, and each state has its own lamp colour as well as its own pattern: scan, tick, cross.
• The guard is two ordinary presses, so it works with a keyboard, a switch and a screen reader; the key describes the cover, the live region says when it has lifted, Escape drops it.
• Reduced motion stops the scan, the spring and the cover’s swing: the matrix lights steady amber while busy, and every state still shows.

The key is the kit key, unchanged, standing in its own cut: a recess 3px bigger than the cap whose lower lip sits where the skirt meets the plate. Busy moves the cap its skirt plus 2px (past a normal press, under the lip) and deepens the shading from the cut’s upper wall. The matrix is sixteen dots behind a small dark window in the cap, each with a lit layer whose opacity alone animates, delayed by its diagonal, so the amber wave runs corner to corner; done and failed light fixed patterns in green and red. The four legends share one grid cell, so the widest sets the key and a swap only fades. Done springs the cap back up 1px past rest; failed pops it straight back. The guard is a smoked cover on a hinge barrel, turned about its top edge with a 3D rotateX.