ds
Components
Toast

Toast

Short confirmations at the bottom of the screen.

Saved to file

Code

<div class="toast" role="status">Copied as topo text</div>

Toasts confirm something that already happened: copied, saved, added. Ink on paper, bottom centre, gone after 1.6 seconds. They never hold an action you need.

let el, t;
export function toast(msg) {
  el ??= Object.assign(document.body.appendChild(document.createElement('div')), { className: 'toast', role: 'status' });
  el.textContent = msg;
  requestAnimationFrame(() => el.classList.add('show'));
  clearTimeout(t);
  t = setTimeout(() => el.classList.remove('show'), 1600);
}

Class	On	What it does
`.toast`	div[role=status]	Fixed at the bottom centre, hidden until .show.
`.show`	.toast	Visible: fades and rises in.
`.inline`	.toast	Static, for documentation and previews.