Ticket toast

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-ticket-toasts tui-ticket-toasts--flow" data-open role="region" aria-label="Notices">
  <div class="tui-ticket-toasts__slot" aria-hidden="true"></div>
  <div class="tui-ticket-toast" role="status" data-tone="green">
    <div class="tui-ticket-toast__paper">
      <div class="tui-ticket-toast__stub">
        <span class="tui-ticket-toast__label">No.</span>
        <span class="tui-ticket-toast__no">042</span>
        <span class="tui-lamp" data-on aria-hidden="true"></span>
      </div>
      <div class="tui-ticket-toast__main">
        <p class="tui-ticket-toast__text">Signing key revoked.</p>
        <div class="tui-ticket-toast__keys">
          <button type="button" class="tui-key tui-key--sm tui-ticket-toast__action">Undo</button>
        </div>
        <button type="button" class="tui-key tui-key--sm tui-key--icon tui-key--flat tui-ticket-toast__tear"
                aria-label="Tear off ticket 042">…</button>
      </div>
    </div>
  </div>
</div>

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

// The slot appears at the bottom right of the screen the first time you issue one.
const ticket = ticketToast({ text: 'Signing key lode-prod-3 revoked.', action: { label: 'Undo', onClick: restoreKey } });
ticket.number;      // '042'
ticket.dismiss();   // pull it back into the slot now

ticketToast({ text: 'Disk at 91% on db-2.', tone: 'amber' });
ticketToast({ text: 'Canary rolled back: p95 passed 800 ms.', tone: 'red' });   // role="alert", stays until torn off

// Into a box of your own (position: relative; overflow: hidden) instead of the screen:
ticketToast({ text: 'Saved.', into: document.querySelector('.device') });

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

• Each ticket is a live region of its own: role="status", read after the current sentence, or role="alert" for red, read at once. A screen reader gets “Error.” or “Warning.” before the words. The lamp is a second signal.
• The time belongs to the reader. The timer stops while the pointer is over a ticket or focus is inside it, and starts again with whatever was left. A red ticket has no timer.
• Tearing off is never the only way out. The close key is a real button named “Tear off ticket 042”, and Escape does the same from anywhere in the ticket. The swipe is the quick way.
• Focus is not dropped when a ticket goes. If it was inside, it moves to the close key of the next ticket, or back to where it was before the ticket came.
• The action key is a real button named by its own words. Keep them to the act: “Undo”, “Open runbook”.
• Keys sit on paper, which is light in both finishes, so their focus ring and printing use the paper’s ink, not the finish’s.
• With reduced motion tickets appear and leave at once: no sliding, leaning or tearing. The timers still run and everything is still said.

The slot is drawn in two halves with the tickets between them: a dark mouth behind and a raised lip in front, set apart by z-index, so paper comes out of the mouth and goes back into it. The paper is the kit’s paper tokens, the same in both finishes. Its torn edge is a mask of downward triangles, which would clip a shadow, so the shadow is a drop-shadow on the wrapper round it. The stub is set off by a dashed perforation. The lean of the stack is the individual rotate and translate properties, which leaves transform free for the Web Animations API: the slide out of the slot, the tear, and the older tickets riding up when a new one comes (a FLIP). The timer is ticketClock, which is pure and tested, held by the hover and by focus. A swipe is judged by ticketVerdict: a third of the width, or fast.