Toast Physics <mv-toast-physics>

node scripts/add.mjs toast-physics --out ./src/marvelous

<div id="tp-demo" style="display:grid;gap:1rem;justify-items:center;text-align:center">
  <div style="display:grid;gap:.25rem">
    <strong style="font-size:var(--mv-text-base)">Stone &amp; Linen Studio · back office</strong>
    <span style="font-size:var(--mv-text-sm);color:var(--mv-fg-muted)">Notifications drop into the tray at the bottom right. Errors weigh more.</span>
  </div>
  <div style="display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:36rem">
    <button class="mv-button" data-variant="outline" type="button" data-t="success">Order shipped</button>
    <button class="mv-button" data-variant="outline" type="button" data-t="info">New customer review</button>
    <button class="mv-button" data-variant="outline" type="button" data-t="warning">Low stock</button>
    <button class="mv-button" data-variant="destructive" type="button" data-t="error">Payment declined</button>
    <button class="mv-button" data-variant="secondary" type="button" data-t="burst">Burst ×4</button>
  </div>
  <p style="margin:0;font-size:.8125rem;color:var(--mv-fg-muted)">Grab a card and <strong style="color:var(--mv-fg);font-weight:500">fling it</strong> to dismiss · <strong style="color:var(--mv-fg);font-weight:500">Alt + T</strong> then <strong style="color:var(--mv-fg);font-weight:500">Delete</strong> from the keyboard</p>
  <mv-toast-physics position="bottom-right"></mv-toast-physics>
</div>
<script type="module">
  // In an app: import { toast } from "./components/toast-physics/toast-physics.js";
  const { toast } = await customElements.whenDefined("mv-toast-physics");
  const n = () => 4800 + Math.floor(Math.random() * 400);
  const demos = {
    success: () => toast.success(`Order #${n()} shipped`, { description: "UPS · arriving Thursday, Sep 24" }),
    info: () => toast.info("New customer review ★★★★★", { description: "“Gorgeous mugs, beautifully packed.” (Hannah K.)" }),
    warning: () => toast.warning("Low stock: Stoneware Mug 12 oz", { description: "Only 3 left. Time to restock.", action: { label: "Reorder", onClick: () => toast.success("Purchase order sent to the studio") } }),
    error: () => toast.error("Payment declined", { description: "Order #4827 · card expired, the customer has been notified.", action: { label: "Retry", onClick: () => {} } }),
    burst: () => ["info", "success", "warning", "success"].forEach((k, i) => setTimeout(demos[k], i * 170)),
  };
  document.getElementById("tp-demo").addEventListener("click", (e) => {
    const k = e.target.closest("[data-t]")?.dataset.t;
    if (k) demos[k]();
  });
  // Arrival: two light cards, then an error that sinks beneath them.
  setTimeout(() => toast.info("New customer review ★★★★★", { description: "“Gorgeous mugs, beautifully packed.” (Hannah K.)", duration: 16000 }), 150);
  setTimeout(() => toast.success("Order #4821 shipped", { description: "UPS · arriving Thursday, Sep 24", duration: 16000 }), 450);
  setTimeout(() => toast.error("Payment declined", { description: "Order #4827 · card expired, the customer has been notified.", duration: 20000 }), 1000);
</script>