@tsirosgeorge/toastnotification 5.4.0 → 5.6.0

package/toast.js

@@ -2,7 +2,7 @@
 
 // Single source of truth for the CDN this build points at.
 // `npm run sync:version` rewrites it from package.json, so it can never go stale.
-const TS_TOAST_VERSION = "5.4.0";
+const TS_TOAST_VERSION = "5.6.0";
 // Point this at your own copy of assets/ to self-host the CSS and icons
 // (useful offline, behind a strict CSP, or when you don't want a CDN dependency):
 //   window.TS_TOAST_ASSET_BASE = '/vendor/toastnotification';
@@ -10,6 +10,24 @@ const TS_TOAST_CDN = (typeof window !== 'undefined' && window.TS_TOAST_ASSET_BAS
     ? String(window.TS_TOAST_ASSET_BASE).replace(/\/+$/, '')
     : `https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@${TS_TOAST_VERSION}`;
 
+// How many confirm dialogs are currently open. The body scroll lock belongs to the
+// group, so only the last dialog to close may release it.
+let tsToastOpenModals = 0;
+let tsToastPrevOverflow = '';
+let tsToastPrevPaddingRight = '';
+
+const tsToastReducedMotion = () =>
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+// Everything inside the dialog a keyboard can reach, in DOM order.
+const tsToastFocusable = (root) => Array.from(
+    root.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+).filter((el) => !el.disabled && el.offsetParent !== null);
+
+let tsToastIdCounter = 0;
+
 // Load the stylesheet from the CDN, unless the page opted out by importing it itself
 // (set window.TS_TOAST_NO_CSS = true before loading, or ship assets/css/toast.css yourself).
 (function loadStylesheet() {
@@ -33,6 +51,12 @@ const TS_TOAST_CDN = (typeof window !== 'undefined' && window.TS_TOAST_ASSET_BAS
             /* Ensure center positions exist even if external CSS lacks them */
             .ts-toast-container.top-center { top: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }
             .ts-toast-container.bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }
+            .ts-toast-container.center { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; }
+            .ts-toast-overlay.center { align-items: center; justify-content: center; }
+            @keyframes ts-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+            .ts-toast .ts-toast-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left center; border-radius: 0 0 8px 8px; background: currentColor; opacity: 0.35; pointer-events: none; }
+            .ts-toast .ts-toast-action { order: -1; flex: none; appearance: none; border: 0; background: transparent; color: #3b82f6; font: inherit; font-weight: 600; padding: 4px 8px; margin-left: 4px; border-radius: 6px; cursor: pointer; }
+            .ts-toast .ts-toast-action:hover { background: rgba(59,130,246,0.12); }
             .ts-toast-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2147483646; }
             .ts-toast.ts-toast-confirm { max-width: min(92vw, 440px); width: max(320px, 60%); flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--toast-bg, #fff); color: var(--toast-color, #000); border: 1px solid var(--toast-border, #e5e7eb); border-radius: 12px; box-shadow: var(--toast-shadow, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)); text-align: center; }
             .ts-toast.ts-toast-confirm .ts-toast-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
@@ -56,6 +80,9 @@ const TS_TOAST_CDN = (typeof window !== 'undefined' && window.TS_TOAST_ASSET_BAS
     })();
 
 const toast = function (message, options = {}) {
+        // Site-wide defaults, so a page can turn on things like showProgress once
+        // instead of repeating them at every call site.
+        options = { ...(toast.defaults || {}), ...options };
         const {
             position = 'top-right',
             animation = 'slide-right', // Default fallback animation
@@ -84,6 +111,17 @@ const toast = function (message, options = {}) {
             useOverlay = true,
             closeOnOverlayClick = true,
             showClose = false,
+            // Freeze the countdown while the pointer or keyboard focus is on the toast
+            pauseOnHover = true,
+            // Thin bar counting the remaining time down
+            showProgress = false,
+            // { text, onClick } renders a button inside the toast, e.g. Undo
+            action = null,
+            // Escape cancels a confirm dialog
+            closeOnEscape = true,
+            // `message` is written as HTML for backwards compatibility. Pass false to
+            // render it as plain text, which is what you want for anything user-supplied.
+            allowHtml = true,
             // interactions
             dismissOnClick = true, // ignored if confirm-mode
             onClick = null,      // Custom onClick event listener
@@ -92,6 +130,7 @@ const toast = function (message, options = {}) {
         } = options;
 
         const isConfirm = (mode === 'confirm' || mode === 'swal');
+        const reducedMotion = tsToastReducedMotion();
 
         // Pick an animation intelligently when one wasn't explicitly provided
         const resolvedAnimation = (typeof options.animation === 'string' && options.animation.trim())
@@ -107,10 +146,12 @@ const toast = function (message, options = {}) {
                 };
                 return m[a] || a;
             })(options.animation.trim())
-            : (isConfirm ? 'ts-toast-zoom-in' : (position.startsWith('top') ? 'ts-toast-slide-top'
+            // 'center' has no edge to slide in from, so it zooms like a dialog.
+            : (isConfirm || position === 'center' ? 'ts-toast-zoom-in'
+                : position.startsWith('top') ? 'ts-toast-slide-top'
                 : position.startsWith('bottom') ? 'ts-toast-slide-bottom'
                 : position.endsWith('left') ? 'ts-toast-slide-left'
-                : 'ts-toast-slide-right'));
+                : 'ts-toast-slide-right');
 
         // helper: remove with smooth CSS transition and cleanup (used by alerts)
         const removeWithAnimation = (el, callback) => {
@@ -143,13 +184,24 @@ const toast = function (message, options = {}) {
                 el.classList.remove('ts-toast-slide-out');
                 if (el.parentNode) el.parentNode.removeChild(el);
                 if (typeof callback === 'function') callback();
-            }, 500);
+            }, reducedMotion ? 0 : 500);
         };
 
     const toastElement = document.createElement('div');
         toastElement.className = `ts-toast ts-toast-${type}${isConfirm ? ' ts-toast-confirm' : ''}`;
     toastElement.dataset.anim = resolvedAnimation;
-    toastElement.style.animation = `${resolvedAnimation} 0.5s ease`;
+    if (!reducedMotion) toastElement.style.animation = `${resolvedAnimation} 0.5s ease`;
+
+        const uid = `ts-toast-${++tsToastIdCounter}`;
+        if (isConfirm) {
+            // Without these a screen reader announces nothing, and without tabindex the
+            // dialog cannot take focus away from whatever opened it.
+            toastElement.setAttribute('role', 'dialog');
+            toastElement.setAttribute('aria-modal', 'true');
+            toastElement.tabIndex = -1;
+        } else if (type === 'error' || type === 'warning') {
+            toastElement.setAttribute('role', 'alert');
+        }
         // In confirm mode, we stack content vertically; in alert mode keep original layout
         if (!isConfirm) {
             toastElement.style.flexDirection = 'row-reverse';
@@ -181,7 +233,11 @@ const toast = function (message, options = {}) {
         // Create Body
         const toastBody = document.createElement('div');
         toastBody.className = 'ts-toast-body';
-        toastBody.innerHTML = message; // Allow HTML content in message
+        toastBody.id = `${uid}-body`;
+        // HTML by default for backwards compatibility; pass allowHtml: false for
+        // anything that came from a user.
+        if (allowHtml) toastBody.innerHTML = message;
+        else toastBody.textContent = message;
 
         // Content row for confirm (icon + text side-by-side)
         let contentRow = null;
@@ -192,10 +248,13 @@ const toast = function (message, options = {}) {
             if (title) {
                 const titleEl = document.createElement('div');
                 titleEl.className = 'ts-toast-title';
+                titleEl.id = `${uid}-title`;
                 titleEl.textContent = title;
                 contentRow.appendChild(titleEl);
+                toastElement.setAttribute('aria-labelledby', titleEl.id);
             }
             contentRow.appendChild(toastBody);
+            toastElement.setAttribute('aria-describedby', toastBody.id);
             toastElement.appendChild(contentRow);
         } else {
             toastElement.appendChild(toastBody);
@@ -214,6 +273,13 @@ const toast = function (message, options = {}) {
             inputElement.className = 'ts-toast-input';
             inputElement.placeholder = inputPlaceholder;
             inputElement.value = inputValue;
+            // Enter submits a single-line field, the way a native prompt does.
+            // A textarea keeps Enter for newlines.
+            if (input !== 'textarea') {
+                inputElement.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter') { e.preventDefault(); resolveAndClose(true); }
+                });
+            }
             toastElement.appendChild(inputElement);
         }
 
@@ -223,6 +289,8 @@ const toast = function (message, options = {}) {
         // Assigned in confirm mode; the overlay and (x) handlers below call it so that
         // *every* way of dismissing the dialog settles the promise and the callbacks.
         let resolveAndClose = null;
+        // Releases the scroll lock, the key handler and the focus this dialog took.
+        let releaseModal = () => {};
         if (isConfirm) {
             actionsContainer = document.createElement('div');
             actionsContainer.className = 'ts-toast-actions';
@@ -262,6 +330,7 @@ const toast = function (message, options = {}) {
                 if (confirmed && typeof onConfirm === 'function') onConfirm(result, toastElement);
                 if (!confirmed && typeof onCancel === 'function') onCancel(toastElement);
                 if (typeof onResult === 'function') onResult(result, toastElement);
+                releaseModal();
                 // Use the same slide+fade removal as alerts
                 removeWithAnimation(toastElement, () => {
                     if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
@@ -274,6 +343,31 @@ const toast = function (message, options = {}) {
             confirmBtn.addEventListener('click', (e) => { e.stopPropagation(); resolveAndClose(true); });
         }
 
+        // Action button (e.g. Undo). Clicking it runs the callback and closes the toast.
+        if (!isConfirm && action && typeof action === 'object' && action.text) {
+            const actionBtn = document.createElement('button');
+            actionBtn.className = 'ts-toast-action';
+            actionBtn.type = 'button';
+            actionBtn.textContent = action.text;
+            actionBtn.addEventListener('click', (e) => {
+                e.stopPropagation(); // do not also trigger dismissOnClick
+                if (typeof action.onClick === 'function') action.onClick(toastElement);
+                toastElement._dismiss();
+            });
+            toastElement.appendChild(actionBtn);
+        }
+
+        // Progress bar. The width is driven by a CSS animation whose duration is the
+        // toast's own, so pausing it is one property and never drifts from the timer.
+        let progressBar = null;
+        if (!isConfirm && showProgress && duration > 0 && !reducedMotion) {
+            progressBar = document.createElement('div');
+            progressBar.className = 'ts-toast-progress';
+            progressBar.style.animation = `ts-toast-progress ${duration}ms linear forwards`;
+            progressBar.style.animationPlayState = 'paused';
+            toastElement.appendChild(progressBar);
+        }
+
         // Loader Element
         let loader = null;
         if (showLoader) {
@@ -284,6 +378,7 @@ const toast = function (message, options = {}) {
 
         // Container/Overlay
         let overlay = null;
+        let containerEl = null;
         if (isConfirm && useOverlay) {
             overlay = document.createElement('div');
             // A modal centres by default. The `position` default of 'top-right' is meant
@@ -304,11 +399,17 @@ const toast = function (message, options = {}) {
                 toastElement.appendChild(closeBtn);
             }
             if (closeOnOverlayClick) {
+                // The cancel must both start and end on the backdrop. Selecting text in
+                // the input and releasing the mouse outside the card produced a click
+                // whose target was the overlay, which threw the dialog away mid-edit.
+                let pressedOnBackdrop = false;
+                overlay.addEventListener('pointerdown', (e) => { pressedOnBackdrop = e.target === overlay; });
                 overlay.addEventListener('click', (e) => {
                     // Backdrop click is a cancel: settle the promise and onCancel/onResult,
                     // then close. Previously this resolved only the internal el.result,
                     // so `await toast.confirm(...)` hung forever.
-                    if (e.target === overlay) resolveAndClose(false);
+                    if (e.target === overlay && pressedOnBackdrop) resolveAndClose(false);
+                    pressedOnBackdrop = false;
                 });
             }
         } else {
@@ -319,7 +420,90 @@ const toast = function (message, options = {}) {
                 container.className = `ts-toast-container ${position}`;
                 document.body.appendChild(container);
             }
+            if (!container.hasAttribute('aria-live')) {
+                // Without this a toast is invisible to a screen reader.
+                container.setAttribute('role', 'status');
+                container.setAttribute('aria-live', 'polite');
+                container.setAttribute('aria-relevant', 'additions');
+            }
             container.appendChild(toastElement);
+            containerEl = container;
+        }
+
+        if (isConfirm) {
+            // The dialog has to own the keyboard while it is open. Without this the
+            // element that opened it keeps focus, so pressing Enter or Space activates
+            // it again and stacks a second dialog on top of the first — and Tab walks
+            // through the page behind the backdrop.
+            const previouslyFocused = document.activeElement;
+
+            tsToastOpenModals += 1;
+            if (tsToastOpenModals === 1) {
+                tsToastPrevOverflow = document.body.style.overflow;
+                tsToastPrevPaddingRight = document.body.style.paddingRight;
+                // Hiding the scrollbar makes the page wider, which shifts the whole
+                // layout sideways as the dialog opens. Pad by the scrollbar's width to
+                // hold it still. A no-op where scrollbars are overlays, as on macOS.
+                const scrollbar = window.innerWidth - document.documentElement.clientWidth;
+                if (scrollbar > 0) {
+                    const current = parseFloat(window.getComputedStyle(document.body).paddingRight) || 0;
+                    document.body.style.paddingRight = `${current + scrollbar}px`;
+                }
+                document.body.style.overflow = 'hidden';
+            }
+
+            // With dialogs stacked, only the top one should answer the keyboard.
+            const isTopmost = () => {
+                const open = document.querySelectorAll('.ts-toast.ts-toast-confirm');
+                return open.length === 0 || open[open.length - 1] === toastElement;
+            };
+
+            const onKeydown = (e) => {
+                if (!isTopmost()) return;
+
+                if (e.key === 'Escape' && closeOnEscape) {
+                    e.preventDefault();
+                    resolveAndClose(false);
+                    return;
+                }
+                if (e.key !== 'Tab') return;
+
+                const focusables = tsToastFocusable(toastElement);
+                if (!focusables.length) { e.preventDefault(); return; }
+
+                const first = focusables[0];
+                const last = focusables[focusables.length - 1];
+
+                // Focus can start outside the dialog (the trigger button); pull it back.
+                if (!toastElement.contains(document.activeElement)) {
+                    e.preventDefault();
+                    (e.shiftKey ? last : first).focus();
+                } else if (e.shiftKey && document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                } else if (!e.shiftKey && document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            };
+            document.addEventListener('keydown', onKeydown, true);
+
+            releaseModal = () => {
+                document.removeEventListener('keydown', onKeydown, true);
+                tsToastOpenModals = Math.max(0, tsToastOpenModals - 1);
+                if (tsToastOpenModals === 0) {
+                    document.body.style.overflow = tsToastPrevOverflow;
+                    document.body.style.paddingRight = tsToastPrevPaddingRight;
+                }
+                // Hand the keyboard back to whatever opened the dialog.
+                if (previouslyFocused && typeof previouslyFocused.focus === 'function' &&
+                    document.contains(previouslyFocused)) {
+                    previouslyFocused.focus();
+                }
+            };
+
+            // Land on the input when there is one, otherwise the confirm button.
+            (inputElement || toastElement.querySelector('.ts-toast-btn.confirm') || toastElement).focus();
         }
 
         // Trigger the onShow event if provided
@@ -332,6 +516,10 @@ const toast = function (message, options = {}) {
             toastElement.classList.add('ts-toast-show');
         }, 100);
 
+        // The loader always ran for 2s, so with a shorter duration the toast was gone
+        // before the icon it reveals ever appeared.
+        const loaderMs = duration > 0 ? Math.min(2000, Math.max(0, duration - 500)) : 2000;
+
         // Handle Loader and Icon
         if (showLoader && loader) {
             setTimeout(() => {
@@ -343,7 +531,7 @@ const toast = function (message, options = {}) {
                     if (isConfirm && contentRow) contentRow.appendChild(iconElement);
                     else toastElement.appendChild(iconElement); // Add icon only if not present
                 }
-            }, 2000); // Simulate a loading period of 2 seconds
+            }, loaderMs);
         }
         if (!showLoader) {
             // For confirm, icon already added above inside contentRow; avoid moving it
@@ -352,47 +540,103 @@ const toast = function (message, options = {}) {
             }
         }
 
-        // Auto remove after the duration (skip for confirm mode or when duration <= 0)
-        if (!isConfirm && duration > 0) {
-            const autoRemove = setTimeout(() => {
-                removeWithAnimation(toastElement, () => {
-                    if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
-                });
-            }, duration);
-            toastElement._autoRemove = autoRemove;
+        // Dismissal state lives on the element so toast.update() can rebind the callback
+        // and reuse this exact removal path instead of keeping its own copy of it.
+        toastElement._onDismiss = typeof onDismiss === 'function' ? onDismiss : null;
+
+        // A plain setTimeout cannot be paused, so the countdown is tracked by hand:
+        // `remaining` is what is left, and hovering banks it.
+        let remaining = duration;
+        let timerId = null;
+        let startedAt = 0;
+
+        const stopTimer = () => {
+            if (timerId) { clearTimeout(timerId); timerId = null; }
+        };
+
+        const startTimer = () => {
+            if (isConfirm || remaining <= 0 || timerId) return;
+            startedAt = Date.now();
+            timerId = setTimeout(() => { timerId = null; toastElement._dismiss(); }, remaining);
+            if (progressBar) progressBar.style.animationPlayState = 'running';
+        };
+
+        const pauseTimer = () => {
+            if (!timerId) return;
+            clearTimeout(timerId);
+            timerId = null;
+            remaining -= Date.now() - startedAt;
+            if (progressBar) progressBar.style.animationPlayState = 'paused';
+        };
+
+        toastElement._dismiss = () => {
+            if (toastElement._removing) return; // never run the exit twice
+            toastElement._removing = true;
+            stopTimer();
+            removeWithAnimation(toastElement, () => {
+                if (toastElement._onDismiss) toastElement._onDismiss(toastElement);
+                // Containers used to pile up in the DOM, one per position, forever.
+                if (containerEl && !containerEl.children.length) containerEl.remove();
+            });
+        };
+
+        // Lets toast.update() re-arm the countdown without reaching into internals.
+        toastElement._setDuration = (ms) => {
+            stopTimer();
+            remaining = ms;
+            startTimer();
+        };
+
+        startTimer();
+
+        if (!isConfirm && pauseOnHover) {
+            // Give the reader a chance to finish the sentence.
+            toastElement.addEventListener('mouseenter', pauseTimer);
+            toastElement.addEventListener('mouseleave', startTimer);
+            toastElement.addEventListener('focusin', pauseTimer);
+            toastElement.addEventListener('focusout', startTimer);
         }
 
         // Add event listener for closing the toast when clicked (disabled in confirm mode)
         if (!isConfirm && dismissOnClick) {
             toastElement.addEventListener('click', () => {
-                if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove); // Clear the auto-remove timeout
-                removeWithAnimation(toastElement, () => {
-                    if (onClick && typeof onClick === 'function') onClick(toastElement);
-                    if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
-                });
+                // onClick belongs to the click, not to the end of the exit animation,
+                // which is where it used to fire half a second late.
+                if (onClick && typeof onClick === 'function') onClick(toastElement);
+                toastElement._dismiss();
             });
         }
 
         // Add swipe event listeners for mobile dismissal
         if (!isConfirm) {
             let touchStartX = 0;
+            let touchStartY = 0;
             let touchEndX = 0;
 
+            // Passive: these never preventDefault, and a non-passive touchstart blocks
+            // scrolling on the whole toast.
             toastElement.addEventListener('touchstart', (e) => {
                 touchStartX = e.changedTouches[0].screenX;
-            });
+                touchStartY = e.changedTouches[0].screenY;
+            }, { passive: true });
 
             toastElement.addEventListener('touchend', (e) => {
                 touchEndX = e.changedTouches[0].screenX;
-                if (Math.abs(touchStartX - touchEndX) > 50) { // Swipe distance threshold
-                    if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove);
-                    removeWithAnimation(toastElement, () => {
-                        if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
-                    });
-                }
+                const dx = Math.abs(touchStartX - touchEndX);
+                const dy = Math.abs(touchStartY - e.changedTouches[0].screenY);
+                // Only a mostly-horizontal swipe dismisses, so scrolling the page past a
+                // toast no longer throws it away on a bit of sideways drift.
+                if (dx > 50 && dx > dy) toastElement._dismiss();
             });
         }
 
+        // Let callers dismiss a toast they are holding, instead of only waiting out
+        // the duration or making the user click it.
+        toastElement.close = () => {
+            if (isConfirm) { resolveAndClose(false); return; }
+            toastElement._dismiss();
+        };
+
         return toastElement;
     };
 
@@ -419,10 +663,9 @@ const toast = function (message, options = {}) {
             type = null,
             icon = null,
             showLoader = false,
-            duration = 3000, // Default duration (in ms)
-            onClick = null,      // Custom onClick event listener
-            onShow = null,       // Custom onShow event listener
-            onDismiss = null     // Custom onDismiss event listener
+            duration = 3000, // Default duration (in ms); 0 keeps the toast on screen
+            allowHtml = true,
+            onDismiss = null     // Replaces the callback the toast was created with
         } = options;
 
         // Remove old loader (if any)
@@ -440,7 +683,8 @@ const toast = function (message, options = {}) {
         }
         const toastBody = toastElement.querySelector('.ts-toast-body');
         if (toastBody) {
-            toastBody.innerHTML = message;
+            if (allowHtml) toastBody.innerHTML = message;
+            else toastBody.textContent = message;
         }
 
         // Handle Icon update only if it's new or hasn't been set yet
@@ -468,9 +712,12 @@ const toast = function (message, options = {}) {
             iconElement.appendChild(img);
         }
 
-        // Append the new icon immediately (inside the content row for confirm dialogs)
-        const contentRow = toastElement.querySelector('.ts-toast-content');
-        (contentRow || toastElement).appendChild(iconElement);
+        // Only attach an icon we actually have. Without a type and without an explicit
+        // icon this used to append an empty <span><img></span>.
+        if (icon || iconElement.querySelector('img[src]')) {
+            const contentRow = toastElement.querySelector('.ts-toast-content');
+            (contentRow || toastElement).appendChild(iconElement);
+        }
 
         // Handle loader if requested
         if (showLoader) {
@@ -479,33 +726,19 @@ const toast = function (message, options = {}) {
             toastElement.appendChild(loader);
             setTimeout(() => {
                 loader.classList.add('done');
-            }, 2000);  // Simulate loader completion after 2 seconds
-        }
-
-        // Clear previous auto-remove timer if needed
-        if (toastElement._autoRemove) {
-            clearTimeout(toastElement._autoRemove);
+            }, duration > 0 ? Math.min(2000, Math.max(0, duration - 500)) : 2000);
         }
 
-        // Set the auto-remove timer again to ensure toast disappears after the duration
-        const autoRemove = setTimeout(() => {
-            const removeWithAnimation = (el, cb) => {
-                el.classList.add('ts-toast-slide-out');
-                el.classList.remove('ts-toast-show');
-                el.style.animation = '';
-                setTimeout(() => {
-                    el.classList.remove('ts-toast-slide-out');
-                    if (el.parentNode) el.parentNode.removeChild(el);
-                    if (typeof cb === 'function') cb();
-                }, 500);
-            };
+        // Rebind the dismiss callback rather than leaving the creation-time one in place,
+        // which meant an updated toast fired two different onDismiss handlers.
+        if (typeof onDismiss === 'function') toastElement._onDismiss = onDismiss;
 
-            removeWithAnimation(toastElement, () => {
-                if (onDismiss && typeof onDismiss === 'function') onDismiss(toastElement);
-            });
-        }, duration);
-
-        toastElement._autoRemove = autoRemove; // Re-set the auto-remove timer
+        // Re-arm the countdown through the toast's own timer, so duration: 0 keeps the
+        // toast on screen. This used to schedule setTimeout(..., 0) and remove it at once,
+        // which broke every `toast.loading(...).update(msg, { duration: 0 })`.
+        if (typeof toastElement._setDuration === 'function') {
+            toastElement._setDuration(duration);
+        }
     };
 
     toast.loading = function (message, options = {}) {
@@ -553,15 +786,11 @@ const toast = function (message, options = {}) {
                     showLoader: false // Disable loader when updating the message
                 });
             },
+            // Reuse the element's own close so onDismiss fires, which this
+            // hand-rolled copy of the removal never did.
             close: () => {
-                if (toastElement._autoRemove) clearTimeout(toastElement._autoRemove);
-                toastElement.classList.add('ts-toast-slide-out');
-                toastElement.classList.remove('ts-toast-show');
-                toastElement.style.animation = '';
-                setTimeout(() => {
-                    toastElement.classList.remove('ts-toast-slide-out');
-                    if (toastElement.parentNode) toastElement.parentNode.removeChild(toastElement);
-                }, 500);
+                toastElement._managedByLoading = false;
+                toastElement.close();
             }
         };
     };
@@ -583,6 +812,41 @@ const toast = function (message, options = {}) {
         });
     };
 
+    // Wraps an async action: one loading toast that becomes the success or error
+    // message, instead of hand-rolling loading/update/catch at every call site.
+    toast.promise = function (promise, messages = {}, options = {}) {
+        const {
+            loading = 'Loading…',
+            success = 'Done',
+            error = 'Something went wrong'
+        } = messages;
+
+        const handle = toast.loading(loading, options);
+        // Messages may be functions so they can name what actually came back.
+        const text = (msg, value) => (typeof msg === 'function' ? msg(value) : msg);
+
+        return Promise.resolve(promise).then(
+            (value) => {
+                handle.update(text(success, value), { type: 'success', duration: options.duration });
+                return value;
+            },
+            (err) => {
+                handle.update(text(error, err), { type: 'error', duration: options.duration });
+                throw err; // the caller still owns the failure
+            }
+        );
+    };
+
+    // Options applied to every toast unless the call overrides them.
+    toast.defaults = {};
+
+    // Close every toast currently on screen. Confirm dialogs settle as a cancel.
+    toast.dismissAll = function () {
+        document.querySelectorAll('.ts-toast').forEach((el) => {
+            if (typeof el.close === 'function') el.close();
+        });
+    };
+
 // Expose globally for CDN / browser usage
 if (typeof window !== 'undefined') {
     window.toast = toast;