Toast stack

<!-- One container per page; toasts are appended by toast.js -->
<div id="toast-region" aria-live="polite" aria-atomic="false"
  class="pointer-events-none fixed inset-x-4 bottom-4 z-50 flex flex-col items-end gap-2 sm:inset-x-auto sm:right-4 sm:w-80"></div>

<button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 text-white"
  onclick="toast('Changes saved', 'success')">Try a toast</button>

const kinds = {
  success: { cls: 'bg-emerald-600', delay: 3500 },
  error: { cls: 'bg-red-600', delay: 7000 },
  info: { cls: 'bg-slate-800', delay: 4500 },
};
const region = document.getElementById('toast-region');

function toast(message, kind = 'info') {
  const { cls, delay } = kinds[kind] ?? kinds.info;
  const el = document.createElement('div');
  el.className = `pointer-events-auto flex w-full items-start gap-3 rounded-lg px-4 py-3 text-sm text-white shadow-lg transition-opacity duration-200 ${cls}`;
  const text = document.createElement('p');
  text.className = 'flex-1';
  text.textContent = message;                 // textContent keeps input inert
  const close = document.createElement('button');
  close.type = 'button';
  close.setAttribute('aria-label', 'Dismiss');
  close.textContent = '×';
  el.append(text, close);
  region.append(el);

  let timer;
  const dismiss = () => {
    clearTimeout(timer);
    el.classList.add('opacity-0');
    setTimeout(() => el.remove(), 200);       // wait for the fade
  };
  const start = () => (timer = setTimeout(dismiss, delay));
  el.addEventListener('mouseenter', () => clearTimeout(timer));
  el.addEventListener('focusin', () => clearTimeout(timer));
  el.addEventListener('mouseleave', start);
  el.addEventListener('focusout', start);
  close.addEventListener('click', dismiss);
  start();
}
window.toast = toast;