Toast Stack

<!--
  A stack is a queue with a cap. Three things make it different from N copies of
  a single toast:

  1. The cap. Unbounded stacks are how a retry loop covers the whole screen.
     Overflow waits its turn rather than rendering.
  2. One region, N children. The live region is the container - announcing each
     toast means appending into the SAME mounted region, not mounting a region
     per toast.
  3. Newest first, visually - but appended last in the DOM, so reading order
     matches the queue. column-reverse keeps those two facts independent.
-->
<div class="toast-stack" role="status" aria-live="polite"></div>

<script>
  const MAX_VISIBLE = 3;
  const stack = document.querySelector('.toast-stack');
  const queue = [];

  function render() {
    stack.replaceChildren();
    queue.slice(0, MAX_VISIBLE).forEach((toast) => {
      const el = document.createElement('div');
      el.className = 'toast';
      el.innerHTML =
        '<p class="toast__title"></p><button class="toast__close" type="button" aria-label="Dismiss">&times;</button>';
      el.querySelector('.toast__title').textContent = toast.title;
      el.querySelector('.toast__close').addEventListener('click', () => dismiss(toast.id));
      stack.append(el);
    });
  }

  function dismiss(id) {
    const index = queue.findIndex((t) => t.id === id);
    if (index > -1) queue.splice(index, 1);
    render();
  }

  function push(title, duration = 5000) {
    const id = crypto.randomUUID();
    queue.unshift({ id, title });
    render();
    setTimeout(() => dismiss(id), duration);
  }
</script>