Over a modal

<div class="demo">
  <button class="demo-btn" id="open">Open a modal</button>
  <dialog id="modal" class="demo-card">
    <p><b>Delete this invoice?</b></p>
    <p class="demo-hint">Invoice #1041 · AED 4,200</p>
    <div class="demo-row">
      <button class="demo-btn" id="delete">Delete</button>
      <button class="demo-btn" id="cancel">Cancel</button>
    </div>
  </dialog>
  <p class="demo-hint">The toast appears above the modal — and its Undo button still takes a click.</p>
</div>

import { toast, configure } from 'https://devix.pk/cdn/oss/toast@1.0.0/index.js';

configure({ position: 'bottom-center' });
const modal = document.getElementById('modal');

document.getElementById('open').addEventListener('click', () => modal.showModal());
document.getElementById('cancel').addEventListener('click', () => modal.close());
document.getElementById('delete').addEventListener('click', () => {
  // The toaster moves inside the open modal, so this Undo is clickable rather than inert.
  toast('Invoice deleted', {
    duration: 0,
    action: { label: 'Undo', onClick: () => toast.success('Invoice restored') },
  });
});

@import url('https://devix.pk/cdn/oss/toast@1.0.0/toast.min.css');

dialog { border: 1px solid var(--demo-line-strong); border-radius: var(--demo-radius); background: var(--demo-surface); color: inherit; }
dialog::backdrop { background: rgb(0 0 0 / .4); }