Message

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

<!-- data-from: user · assistant · other. data-state: sending · sent · failed (leave it off when delivery is not in question). -->
<article class="tui-message" data-from="user" data-state="failed" aria-labelledby="m1-who">
  <header class="tui-message__meta">
    <span class="tui-label tui-message__who" id="m1-who">You</span>
    <span class="tui-message__state" role="status">
      <span class="tui-lamp" data-on aria-hidden="true"></span><span class="tui-message__words">Not sent</span>
    </span>
    <time class="tui-message__time" datetime="2026-10-07T14:02">14:02</time>
  </header>
  <div class="tui-message__body"><p>Is Studio A free from 15:00 today?</p></div>
  <button class="tui-key tui-key--flat tui-key--sm tui-message__retry" type="button" data-message-retry>Retry</button>
</article>

import { setMessageState } from '/kit/kit.mjs';

setMessageState(message, 'sending');          // the lamp follows data-state; the words change with it
document.addEventListener('tui-message-retry', async (e) => {
  try { await resend(e.detail.message); setMessageState(e.detail.message, 'sent'); }
  catch { setMessageState(e.detail.message, 'failed'); }
});

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

• The message is an <article> named by its sender. The sender, the time, the state and the text are all real text, read in that order; the time is a <time> with a datetime.
• The state is a polite role="status" region, so changing its words says them aloud without moving focus. The lamp is hidden from a screen reader and always sits beside the word that says the same.
• A failure is also bold and says “Not sent”, so it is never a red lamp alone, and Retry appears as a real key in the reading order straight after the text. The words on the paper are in the paper’s own ink, above 6:1.
• When Retry is pressed with the keyboard, the key goes away, so the focus is moved to the message, which takes a visible 2px ring. The blink stops under reduced motion and the lamp stays lit.
• The key is 44px tall on a phone and the plate never scrolls sideways: long words break inside it.

The recess is the one the chat uses for what you type, and the slip is the chat’s: a paper layer cut by a mask with small bites along the top and teeth at the foot, lifted by a shadow filter that follows the torn edge. It is made lighter here, with the perforation as two rows of gradients and no fibres, so a page can hold many. In the flat finishes the paper’s edge is drawn as a line, as the chat’s is.