toastify-pro 1.5.0 → 1.7.0

package/dist/toastify-pro.umd.js

@@ -19,11 +19,18 @@
    * - Responsive design for mobile devices
    * - Framework agnostic (works with React, Vue, Angular, etc.)
    * - Confirmation dialogs with customizable buttons and callbacks
+   * - Input prompts with validation and async support
    * - Confirmation overlay with blur effect for focus
    * - Center position support for enhanced focus
    * - Independent positioning for confirmations
+   * - Action buttons in toasts with customizable callbacks
+   * - Pause on hover functionality
+   * - Queue management (maxToasts, newestOnTop)
+   * - Full accessibility support (ARIA, keyboard navigation, reduced motion)
+   * - Focus management for confirmation and input dialogs
+   * - Improved dismiss handling (no hover interference)
    * 
-   * @version 1.5.0
+   * @version 1.7.0
    * @author ToastifyPro Team
    * @license MIT
    */
@@ -41,6 +48,10 @@
      * @param {number} options.maxLength - Maximum message length
      * @param {string} options.primaryColor - Primary color for custom() method
      * @param {string} options.secondaryColor - Secondary color for gradient in custom() method
+     * @param {boolean} options.pauseOnHover - Pause timeout when hovering over toast (default: true)
+     * @param {number} options.maxToasts - Maximum number of visible toasts (0 for unlimited)
+     * @param {boolean} options.newestOnTop - Show newest toasts on top (default: true)
+     * @param {boolean} options.ariaLive - ARIA live region setting: 'polite' or 'assertive' (default: 'polite')
      */
     constructor(options = {}) {
       // Validate options parameter
@@ -57,7 +68,14 @@
         maxLength: options.maxLength || 100,
         primaryColor: options.primaryColor || null, // Custom primary color for custom() method
         secondaryColor: options.secondaryColor || null, // Custom secondary color for gradient
+        pauseOnHover: options.pauseOnHover !== false, // default true - pause timeout on hover
+        maxToasts: options.maxToasts || 0, // 0 = unlimited
+        newestOnTop: options.newestOnTop !== false, // default true
+        ariaLive: options.ariaLive || 'polite', // 'polite' or 'assertive'
       };
+      
+      // Track active toasts for queue management
+      this.activeToasts = [];
 
       // Validate position
       const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'center'];
@@ -90,6 +108,46 @@
 
       // Inject styles once
       this.injectStyles();
+      
+      // Setup global keyboard event listener for accessibility
+      this.setupKeyboardNavigation();
+    }
+    
+    /**
+     * Sets up keyboard navigation for accessibility
+     * - Escape key dismisses the most recent toast or confirmation
+     * - Tab key cycles through focusable elements in confirmations
+     */
+    setupKeyboardNavigation() {
+      // Only setup once globally
+      if (window._toastifyProKeyboardSetup) return;
+      window._toastifyProKeyboardSetup = true;
+      
+      document.addEventListener('keydown', (e) => {
+        // Escape key - dismiss toast or confirmation
+        if (e.key === 'Escape') {
+          // First check for active confirmation
+          if (globalActiveConfirmation && globalActiveConfirmation.element) {
+            const loadingBtn = globalActiveConfirmation.element.querySelector('.toast-btn-confirm.loading');
+            if (!loadingBtn) {
+              globalActiveConfirmation.close();
+            }
+            return;
+          }
+          
+          // Otherwise dismiss the most recent toast
+          const containers = document.querySelectorAll('.toastify-pro-container');
+          containers.forEach(container => {
+            const toasts = container.querySelectorAll('.toastify-pro:not(.confirmation)');
+            if (toasts.length > 0) {
+              const lastToast = toasts[toasts.length - 1];
+              if (lastToast && lastToast._toastInstance) {
+                lastToast._toastInstance.removeToast(lastToast);
+              }
+            }
+          });
+        }
+      });
     }
 
     /**
@@ -213,19 +271,19 @@
     @keyframes airdropPop {
       0% { 
         opacity: 0;
-        transform: scale(0.3) rotateY(-20deg); 
+        transform: scale(0.5) rotateY(-15deg) translateY(20px); 
       }
-      30% { 
-        opacity: 0.8;
-        transform: scale(1.1) rotateY(10deg); 
+      50% { 
+        opacity: 0.95;
+        transform: scale(1.03) rotateY(5deg) translateY(-3px); 
       }
-      60% { 
+      75% { 
         opacity: 1;
-        transform: scale(0.98) rotateY(-3deg); 
+        transform: scale(0.99) rotateY(-1deg) translateY(1px); 
       }
       100% { 
         opacity: 1;
-        transform: scale(1) rotateY(0deg); 
+        transform: scale(1) rotateY(0deg) translateY(0); 
       }
     }
     
@@ -234,13 +292,13 @@
         opacity: 1;
         transform: scale(1) translateY(0); 
       }
-      15% { 
+      12% { 
         opacity: 1;
-        transform: scale(1.02) translateY(-8px); 
+        transform: scale(1.015) translateY(-6px); 
       }
       100% { 
         opacity: 0;
-        transform: scale(0.8) translateY(200px); 
+        transform: scale(0.85) translateY(150px); 
       }
     }
     
@@ -249,13 +307,13 @@
         opacity: 1;
         transform: scale(1) translateY(0); 
       }
-      15% { 
+      12% { 
         opacity: 1;
-        transform: scale(1.02) translateY(8px); 
+        transform: scale(1.015) translateY(6px); 
       }
       100% { 
         opacity: 0;
-        transform: scale(0.8) translateY(-200px); 
+        transform: scale(0.85) translateY(-150px); 
       }
     }
     
@@ -264,13 +322,13 @@
         opacity: 1;
         transform: scale(1) translateX(0); 
       }
-      15% { 
+      12% { 
         opacity: 1;
-        transform: scale(1.02) translateX(8px); 
+        transform: scale(1.015) translateX(6px); 
       }
       100% { 
         opacity: 0;
-        transform: scale(0.8) translateX(-300px); 
+        transform: scale(0.85) translateX(-250px); 
       }
     }
     
@@ -279,13 +337,13 @@
         opacity: 1;
         transform: scale(1) translateX(0); 
       }
-      15% { 
+      12% { 
         opacity: 1;
-        transform: scale(1.02) translateX(-8px); 
+        transform: scale(1.015) translateX(-6px); 
       }
       100% { 
         opacity: 0;
-        transform: scale(0.8) translateX(300px); 
+        transform: scale(0.85) translateX(250px); 
       }
     }
     
@@ -294,13 +352,13 @@
         opacity: 1;
         transform: scale(1) translateY(0); 
       }
-      15% { 
+      12% { 
         opacity: 1;
-        transform: scale(1.02) translateY(-5px); 
+        transform: scale(1.015) translateY(-4px); 
       }
       100% { 
         opacity: 0;
-        transform: scale(0.6) translateY(150px); 
+        transform: scale(0.7) translateY(120px); 
       }
     }
     
@@ -337,7 +395,7 @@
     .toastify-pro.show { 
       opacity: 1; 
       transform: scale(1);
-      animation: airdropPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      animation: airdropPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
     
     .toastify-pro.success { 
@@ -416,9 +474,9 @@
     }
     
     @keyframes iconBounce {
-      0% { transform: scale(0.2) rotate(-15deg); }
-      40% { transform: scale(1.2) rotate(8deg); }
-      70% { transform: scale(0.95) rotate(-3deg); }
+      0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
+      50% { transform: scale(1.1) rotate(5deg); opacity: 1; }
+      70% { transform: scale(0.97) rotate(-2deg); }
       100% { transform: scale(1) rotate(0deg); }
     }
     
@@ -427,12 +485,12 @@
         transform: scale(1) rotate(0deg); 
         opacity: 1;
       }
-      20% { 
-        transform: scale(1.1) rotate(-10deg); 
-        opacity: 0.9;
+      25% { 
+        transform: scale(1.08) rotate(-8deg); 
+        opacity: 0.85;
       }
       100% { 
-        transform: scale(0.3) rotate(180deg); 
+        transform: scale(0.4) rotate(120deg); 
         opacity: 0;
       }
     }
@@ -441,6 +499,11 @@
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
+    
+    @keyframes spinFast {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
 
     .toastify-pro .toast-icon svg {
       width: 18px;
@@ -484,6 +547,7 @@
       transition: all 0.2s ease;
       flex-shrink: 0;
       width: 32px;
+      border: none;
       height: 32px;
       display: flex;
       align-items: center;
@@ -715,6 +779,9 @@
     }
 
     .toast-btn-confirm {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       color: white;
       font-weight: 700;
       border: 2px solid rgba(255, 255, 255, 0.4);
@@ -753,17 +820,20 @@
     
     .toast-btn-confirm .btn-spinner {
       display: none;
-      width: 16px;
-      height: 16px;
-      border: 2px solid rgba(255, 255, 255, 0.3);
-      border-top-color: white;
-      border-radius: 50%;
-      animation: spin 0.6s linear infinite;
-      margin-right: 8px;
+      align-items: center;
+      justify-content: center;
+      margin-left: 8px;
+    }
+    
+    .toast-btn-confirm .btn-spinner svg {
+      width: 25px;
+      height: 25px;
+      animation: spinFast 0.5s linear infinite;
+      color: currentColor;
     }
     
     .toast-btn-confirm.loading .btn-spinner {
-      display: inline-block;
+      display: inline-flex;
     }
     
     .toast-btn-confirm.loading .btn-text {
@@ -853,6 +923,356 @@
     .toastify-pro-overlay.show {
       opacity: 1;
     }
+    
+    /* Action Button Styles */
+    .toastify-pro .toast-action {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      margin-top: 8px;
+      border: none;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      background: rgba(255, 255, 255, 0.2);
+      color: inherit;
+      backdrop-filter: blur(10px);
+    }
+    
+    .toastify-pro .toast-action:hover {
+      background: rgba(255, 255, 255, 0.3);
+      transform: translateY(-1px);
+    }
+    
+    .toastify-pro .toast-action:active {
+      transform: translateY(0);
+    }
+    
+    .toastify-pro.light .toast-action {
+      background: rgba(15, 23, 42, 0.1);
+    }
+    
+    .toastify-pro.light .toast-action:hover {
+      background: rgba(15, 23, 42, 0.15);
+    }
+    
+    /* Paused state - pause progress bar */
+    .toastify-pro.paused::after {
+      animation-play-state: paused;
+    }
+    
+    /* Progress restart - used after hover to restart progress bar only */
+    .toastify-pro.progress-restart::after {
+      animation: none;
+    }
+    
+    /* Focus styles for accessibility */
+    .toastify-pro .close-btn:focus,
+    .toastify-pro .toast-action:focus,
+    .toast-btn:focus {
+      outline: 1px solid rgba(255, 255, 255, 0.8);
+    }
+    
+    .toastify-pro.light .close-btn:focus,
+    .toastify-pro.light .toast-action:focus {
+      outline-color: 1px solid rgba(15, 23, 42, 0.5);
+    }
+    
+    /* Screen reader only class */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+    
+    /* ===== INPUT TOAST STYLES ===== */
+    .toastify-pro.input-toast {
+      min-width: 340px;
+      max-width: 450px;
+      padding: 24px 24px 20px;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 16px;
+    }
+    
+    .toastify-pro.input-toast .toast-input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+    }
+    
+    .toastify-pro.input-toast .toast-input-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+    }
+    
+    .toastify-pro.input-toast .toast-input {
+      width: 100%;
+      padding: 12px 16px;
+      border: 1.5px solid rgba(255, 255, 255, 0.2);
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.08);
+      backdrop-filter: blur(12px);
+      color: inherit;
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 450;
+      outline: none;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+    
+    .toastify-pro.input-toast .toast-input::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+      font-weight: 400;
+    }
+    
+    .toastify-pro.input-toast .toast-input:focus {
+      border-color: rgba(255, 255, 255, 0.45);
+      background: rgba(255, 255, 255, 0.12);
+      box-shadow: 
+        inset 0 1px 2px rgba(0, 0, 0, 0.1),
+        0 0 0 3px rgba(255, 255, 255, 0.08);
+    }
+    
+    .toastify-pro.input-toast .toast-input:hover:not(:focus) {
+      border-color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
+    }
+    
+    .toastify-pro.input-toast.light .toast-input {
+      border-color: rgba(15, 23, 42, 0.15);
+      background: rgba(15, 23, 42, 0.04);
+      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
+    }
+    
+    .toastify-pro.input-toast.light .toast-input::placeholder {
+      color: rgba(15, 23, 42, 0.45);
+    }
+    
+    .toastify-pro.input-toast.light .toast-input:focus {
+      border-color: rgba(15, 23, 42, 0.35);
+      background: rgba(15, 23, 42, 0.06);
+      box-shadow: 
+        inset 0 1px 2px rgba(15, 23, 42, 0.06),
+        0 0 0 3px rgba(15, 23, 42, 0.06);
+    }
+    
+    .toastify-pro.input-toast.light .toast-input:hover:not(:focus) {
+      border-color: rgba(15, 23, 42, 0.25);
+      background: rgba(15, 23, 42, 0.06);
+    }
+    
+    .toastify-pro.input-toast .toast-input-actions {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+    }
+    
+    .toastify-pro.input-toast .input-btn {
+      padding: 10px 20px;
+      border-radius: 10px;
+      font-size: 14px;
+      font-weight: 550;
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      border: 1.5px solid transparent;
+      position: relative;
+      overflow: hidden;
+    }
+    
+    .toastify-pro.input-toast .input-btn-cancel {
+      background: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.9);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+    
+    .toastify-pro.input-toast .input-btn-cancel:hover {
+      background: rgba(255, 255, 255, 0.18);
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+    
+    .toastify-pro.input-toast .input-btn-submit {
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
+      color: #1e293b;
+      border-color: rgba(255, 255, 255, 0.4);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    }
+    
+    .toastify-pro.input-toast .input-btn-submit:hover {
+      background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 100%);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+      transform: translateY(-1px);
+    }
+    
+    .toastify-pro.input-toast .input-btn-submit:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    }
+    
+    .toastify-pro.input-toast.light .input-btn-cancel {
+      background: rgba(15, 23, 42, 0.06);
+      color: rgba(15, 23, 42, 0.85);
+      border-color: rgba(15, 23, 42, 0.15);
+    }
+    
+    .toastify-pro.input-toast.light .input-btn-cancel:hover {
+      background: rgba(15, 23, 42, 0.1);
+      border-color: rgba(15, 23, 42, 0.25);
+    }
+    
+    .toastify-pro.input-toast.light .input-btn-submit {
+      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+      color: white;
+      border-color: rgba(15, 23, 42, 0.3);
+    }
+    
+    .toastify-pro.input-toast.light .input-btn-submit:hover {
+      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25);
+    }
+    
+    /* Input toast loading state */
+    .toastify-pro.input-toast .input-btn-submit.loading {
+      opacity: 0.7;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    
+    .toastify-pro.input-toast .input-btn-submit .btn-spinner {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      margin-left: 6px;
+    }
+    
+    .toastify-pro.input-toast .input-btn-submit .btn-spinner svg {
+      width: 16px;
+      height: 16px;
+      animation: spinFast 0.5s linear infinite;
+    }
+    
+    .toastify-pro.input-toast .input-btn-submit.loading .btn-spinner {
+      display: inline-flex;
+    }
+    
+    .toastify-pro.input-toast .input-btn-submit.loading .btn-text {
+      opacity: 0.7;
+    }
+    
+    /* Input validation error state */
+    .toastify-pro.input-toast .toast-input.error {
+      border-color: rgba(239, 68, 68, 0.6);
+      background: rgba(239, 68, 68, 0.08);
+      animation: inputShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+    }
+    
+    .toastify-pro.input-toast .toast-input-error {
+      color: #f87171;
+      font-size: 12px;
+      font-weight: 450;
+      margin-top: -8px;
+      opacity: 0;
+      transform: translateY(-4px);
+      transition: all 0.2s ease;
+    }
+    
+    .toastify-pro.input-toast .toast-input-error.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    
+    .toastify-pro.input-toast.light .toast-input.error {
+      border-color: rgba(239, 68, 68, 0.5);
+      background: rgba(239, 68, 68, 0.06);
+    }
+    
+    .toastify-pro.input-toast.light .toast-input-error {
+      color: #dc2626;
+    }
+    
+    @keyframes inputShake {
+      0%, 100% { transform: translateX(0); }
+      20%, 60% { transform: translateX(-6px); }
+      40%, 80% { transform: translateX(6px); }
+    }
+    
+    /* Hide progress bar for input toasts */
+    .toastify-pro.input-toast::after {
+      display: none;
+    }
+    
+    @media (max-width: 640px) {
+      .toastify-pro.input-toast {
+        min-width: 280px;
+        max-width: calc(100vw - 32px);
+      }
+      
+      .toastify-pro.input-toast .toast-input-actions {
+        flex-direction: column;
+      }
+      
+      .toastify-pro.input-toast .input-btn {
+        width: 100%;
+      }
+    }
+    
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      .toastify-pro {
+        transition: opacity 0.3s ease;
+        transform: none !important;
+      }
+      
+      .toastify-pro.show {
+        animation: none !important;
+        opacity: 1;
+        transform: none !important;
+      }
+      
+      .toastify-pro .toast-icon {
+        animation: none !important;
+      }
+      
+      .toastify-pro::before {
+        animation: none !important;
+      }
+      
+      .toastify-pro::after {
+        animation: progress var(--duration, 5s) linear !important;
+      }
+      
+      .toastify-pro-overlay {
+        transition: opacity 0.2s ease;
+      }
+      
+      .toast-btn::after {
+        display: none;
+      }
+      
+      .toast-btn:hover {
+        transform: none;
+      }
+      
+      .toastify-pro.confirmation .conf-close-btn:hover {
+        transform: scale(1.05);
+      }
+      
+      .btn-spinner svg {
+        animation: spinFast 0.5s linear infinite !important;
+      }
+    }
   `;
         document.head.appendChild(style);
       } catch (error) {
@@ -869,6 +1289,9 @@
      * @param {number} opts.timeout - Override default timeout
      * @param {boolean} opts.allowClose - Override close button setting
      * @param {number} opts.maxLength - Override max message length
+     * @param {Object} opts.action - Action button configuration { label, onClick }
+     * @param {boolean} opts.pauseOnHover - Pause timeout on hover
+     * @param {string} opts.ariaLive - ARIA live region type ('polite' or 'assertive')
      */
     show(message, type = "dark", opts = {}) {
       // Input validation
@@ -898,10 +1321,30 @@
       const options = { ...this.defaultOptions, ...opts };
 
       try {
+        // Queue management - remove oldest toasts if limit exceeded
+        if (options.maxToasts > 0 && this.activeToasts.length >= options.maxToasts) {
+          const toastsToRemove = this.activeToasts.length - options.maxToasts + 1;
+          for (let i = 0; i < toastsToRemove; i++) {
+            const oldestToast = this.activeToasts.shift();
+            if (oldestToast && oldestToast.element) {
+              this.removeToast(oldestToast.element);
+            }
+          }
+        }
+        
         // Create toast element
         const toast = document.createElement("div");
         toast.className = `toastify-pro ${type}`;
         
+        // Store reference to this instance for keyboard navigation
+        toast._toastInstance = this;
+        
+        // ARIA accessibility attributes
+        const ariaLive = type === 'error' || type === 'warning' ? 'assertive' : (options.ariaLive || 'polite');
+        toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
+        toast.setAttribute('aria-live', ariaLive);
+        toast.setAttribute('aria-atomic', 'true');
+        
         // Set duration for progress bar animation
         if (options.timeout > 0) {
           toast.style.setProperty('--duration', `${options.timeout}ms`);
@@ -910,6 +1353,7 @@
         // Create icon wrapper
         const iconWrapper = document.createElement("div");
         iconWrapper.className = "toast-icon";
+        iconWrapper.setAttribute('aria-hidden', 'true');
         iconWrapper.innerHTML = this.getIconSVG(type);
         toast.appendChild(iconWrapper);
 
@@ -931,20 +1375,51 @@
           contentWrapper.appendChild(descriptionElement);
         }
         
+        // Action button support
+        if (options.action && typeof options.action === 'object') {
+          const actionBtn = document.createElement("button");
+          actionBtn.className = "toast-action";
+          actionBtn.textContent = options.action.label || 'Action';
+          actionBtn.setAttribute('type', 'button');
+          if (typeof options.action.onClick === 'function') {
+            actionBtn.onclick = (e) => {
+              e.stopPropagation();
+              options.action.onClick({ close: () => this.removeToast(toast), event: e });
+            };
+          }
+          contentWrapper.appendChild(actionBtn);
+        }
+        
         toast.appendChild(contentWrapper);
 
         // Add close button if enabled
         if (options.allowClose) {
-          const closeBtn = document.createElement("span");
+          const closeBtn = document.createElement("button");
           closeBtn.className = "close-btn";
           closeBtn.innerHTML = "&times;";
+          closeBtn.setAttribute('type', 'button');
           closeBtn.setAttribute('aria-label', 'Close notification');
           closeBtn.onclick = () => this.removeToast(toast);
           toast.appendChild(closeBtn);
         }
 
-        // Add toast to container
-        this.container.appendChild(toast);
+        // Add toast to container (respect newestOnTop setting)
+        if (options.newestOnTop && this.container.firstChild) {
+          this.container.insertBefore(toast, this.container.firstChild);
+        } else {
+          this.container.appendChild(toast);
+        }
+        
+        // Track toast for queue management
+        const toastData = {
+          element: toast,
+          timeout: null,
+          remainingTime: options.timeout,
+          startTime: null,
+          isPaused: false,
+          isRemoving: false // Flag to prevent hover interference during removal
+        };
+        this.activeToasts.push(toastData);
 
         // Apple AirDrop-style entrance animation
         setTimeout(() => {
@@ -956,16 +1431,94 @@
           }
         }, 10);
 
+        // Pause on hover functionality
+        if (options.pauseOnHover && options.timeout > 0) {
+          toast.addEventListener('mouseenter', () => {
+            // Don't pause if toast is being removed
+            if (toastData.isRemoving) return;
+            if (toastData.timeout) {
+              clearTimeout(toastData.timeout);
+              toastData.isPaused = true;
+              toastData.remainingTime -= (Date.now() - toastData.startTime);
+              toast.classList.add('paused');
+            }
+          });
+          
+          toast.addEventListener('mouseleave', () => {
+            // Don't restart timer if toast is being removed
+            if (toastData.isRemoving) return;
+            if (toastData.isPaused && toastData.remainingTime > 0) {
+              toastData.isPaused = false;
+              toastData.startTime = Date.now();
+              toast.classList.remove('paused');
+              // Update CSS variable for remaining progress
+              toast.style.setProperty('--duration', `${toastData.remainingTime}ms`);
+              // Restart the progress bar animation only (not the main toast animation)
+              // Using class toggle to reset pseudo-element animation without affecting main element
+              toast.classList.add('progress-restart');
+              void toast.offsetHeight; // Force reflow
+              toast.classList.remove('progress-restart');
+              
+              toastData.timeout = setTimeout(() => this.removeToast(toast), toastData.remainingTime);
+            }
+          });
+        }
+
         // Auto-remove after timeout
         if (options.timeout > 0) {
-          setTimeout(() => this.removeToast(toast), options.timeout);
+          toastData.startTime = Date.now();
+          toastData.timeout = setTimeout(() => this.removeToast(toast), options.timeout);
         }
 
-        return toast; // Return element for potential future manipulation
+        // Return toast control object
+        return {
+          element: toast,
+          dismiss: () => this.removeToast(toast),
+          update: (newMessage, newOpts) => this.updateToast(toast, newMessage, newOpts)
+        };
       } catch (error) {
         console.error('ToastifyPro: Failed to create toast:', error);
       }
     }
+    
+    /**
+     * Updates an existing toast's content
+     * @param {HTMLElement} toast - Toast element to update
+     * @param {string} message - New message text
+     * @param {Object} opts - Options to update
+     */
+    updateToast(toast, message, opts = {}) {
+      if (!toast || !toast.parentNode) return;
+      
+      const messageEl = toast.querySelector('.toast-message');
+      const descEl = toast.querySelector('.toast-description');
+      
+      if (message && messageEl) {
+        messageEl.textContent = message;
+      }
+      
+      if (opts.description && descEl) {
+        descEl.textContent = opts.description;
+      } else if (opts.description) {
+        const descriptionElement = document.createElement("div");
+        descriptionElement.className = "toast-description";
+        descriptionElement.textContent = opts.description;
+        toast.querySelector('.toast-content')?.appendChild(descriptionElement);
+      }
+      
+      // Update type/style if provided
+      if (opts.type) {
+        const validTypes = ['success', 'error', 'info', 'warning', 'dark', 'light'];
+        if (validTypes.includes(opts.type)) {
+          validTypes.forEach(t => toast.classList.remove(t));
+          toast.classList.add(opts.type);
+          const iconWrapper = toast.querySelector('.toast-icon');
+          if (iconWrapper) {
+            iconWrapper.innerHTML = this.getIconSVG(opts.type);
+          }
+        }
+      }
+    }
 
     /**
      * Removes a toast with position-aware car swipe animation
@@ -978,6 +1531,25 @@
       }
 
       try {
+        // Remove from active toasts tracking and set removal flag
+        const toastIndex = this.activeToasts.findIndex(t => t.element === toast);
+        if (toastIndex > -1) {
+          const toastData = this.activeToasts[toastIndex];
+          // Prevent hover events from interfering during removal
+          toastData.isRemoving = true;
+          if (toastData.timeout) {
+            clearTimeout(toastData.timeout);
+          }
+          this.activeToasts.splice(toastIndex, 1);
+        }
+        
+        // Mark the toast element as removing to prevent double-removal
+        if (toast.dataset.removing === 'true') return;
+        toast.dataset.removing = 'true';
+        
+        // Disable pointer events during exit animation to prevent hover issues
+        toast.style.pointerEvents = 'none';
+        
         // Detect position to choose the right swipe direction
         const container = toast.parentNode;
         const position = container.className.split(' ')[1]; // get position class
@@ -998,12 +1570,12 @@
         }
         
         // Apply fast car swipe animation with improved easing
-        toast.style.animation = `${swipeAnimation} 0.4s cubic-bezier(0.4, 0.0, 1, 1) forwards`;
+        toast.style.animation = `${swipeAnimation} 0.35s cubic-bezier(0.55, 0.0, 0.85, 0.36) forwards`;
         
         // Add spinning icon animation for extra polish
         const icon = toast.querySelector('.toast-icon');
         if (icon) {
-          icon.style.animation = 'iconCarExit 0.4s cubic-bezier(0.4, 0.0, 1, 1) forwards';
+          icon.style.animation = 'iconCarExit 0.35s cubic-bezier(0.55, 0.0, 0.85, 0.36) forwards';
         }
         
         // Remove element after animation completes
@@ -1011,7 +1583,7 @@
           if (toast.parentNode) {
             toast.remove();
           }
-        }, 400);
+        }, 350);
       } catch (error) {
         console.error('ToastifyPro: Error removing toast:', error);
         // Fallback: remove immediately if animation fails
@@ -1020,6 +1592,33 @@
         }
       }
     }
+    
+    /**
+     * Dismisses all active toasts
+     * @param {string} type - Optional: only dismiss toasts of this type
+     */
+    dismissAll(type = null) {
+      const toastsCopy = [...this.activeToasts];
+      toastsCopy.forEach(toastData => {
+        if (toastData.element) {
+          if (type) {
+            if (toastData.element.classList.contains(type)) {
+              this.removeToast(toastData.element);
+            }
+          } else {
+            this.removeToast(toastData.element);
+          }
+        }
+      });
+    }
+    
+    /**
+     * Gets the count of active toasts
+     * @returns {number} Number of active toasts
+     */
+    getActiveCount() {
+      return this.activeToasts.length;
+    }
 
     /**
      * Shows a success toast notification
@@ -1194,6 +1793,14 @@
         const toast = document.createElement("div");
         toast.className = `toastify-pro custom${options.customTextLight ? ' light-text' : ''}`;
         
+        // Store reference to this instance
+        toast._toastInstance = this;
+        
+        // ARIA accessibility attributes
+        toast.setAttribute('role', 'status');
+        toast.setAttribute('aria-live', options.ariaLive || 'polite');
+        toast.setAttribute('aria-atomic', 'true');
+        
         // Apply custom gradient
         if (options.customGradient) {
           toast.style.background = options.customGradient;
@@ -1206,6 +1813,7 @@
         // Create icon wrapper
         const iconWrapper = document.createElement("div");
         iconWrapper.className = "toast-icon";
+        iconWrapper.setAttribute('aria-hidden', 'true');
         iconWrapper.innerHTML = this.getIconSVG('success'); // Use success icon for custom
         toast.appendChild(iconWrapper);
 
@@ -1228,15 +1836,53 @@
         toast.appendChild(contentWrapper);
 
         if (options.allowClose) {
-          const closeBtn = document.createElement("span");
+          const closeBtn = document.createElement("button");
           closeBtn.className = "close-btn";
           closeBtn.innerHTML = "&times;";
+          closeBtn.setAttribute('type', 'button');
           closeBtn.setAttribute('aria-label', 'Close notification');
           closeBtn.onclick = () => this.removeToast(toast);
           toast.appendChild(closeBtn);
         }
 
-        this.container.appendChild(toast);
+        // Add toast to container (respect newestOnTop setting)
+        if (options.newestOnTop && this.container.firstChild) {
+          this.container.insertBefore(toast, this.container.firstChild);
+        } else {
+          this.container.appendChild(toast);
+        }
+        
+        // Track toast for queue management
+        const toastData = {
+          element: toast,
+          timeout: null,
+          remainingTime: options.timeout,
+          startTime: null,
+          isPaused: false
+        };
+        this.activeToasts.push(toastData);
+
+        // Pause on hover functionality
+        if (options.pauseOnHover && options.timeout > 0) {
+          toast.addEventListener('mouseenter', () => {
+            if (toastData.timeout) {
+              clearTimeout(toastData.timeout);
+              toastData.isPaused = true;
+              toastData.remainingTime -= (Date.now() - toastData.startTime);
+              toast.classList.add('paused');
+            }
+          });
+          
+          toast.addEventListener('mouseleave', () => {
+            if (toastData.isPaused && toastData.remainingTime > 0) {
+              toastData.isPaused = false;
+              toastData.startTime = Date.now();
+              toast.classList.remove('paused');
+              toast.style.setProperty('--duration', `${toastData.remainingTime}ms`);
+              toastData.timeout = setTimeout(() => this.removeToast(toast), toastData.remainingTime);
+            }
+          });
+        }
 
         setTimeout(() => {
           toast.classList.add("show");
@@ -1247,10 +1893,15 @@
         }, 10);
 
         if (options.timeout > 0) {
-          setTimeout(() => this.removeToast(toast), options.timeout);
+          toastData.startTime = Date.now();
+          toastData.timeout = setTimeout(() => this.removeToast(toast), options.timeout);
         }
 
-        return toast;
+        return {
+          element: toast,
+          dismiss: () => this.removeToast(toast),
+          update: (newMessage, newOpts) => this.updateToast(toast, newMessage, newOpts)
+        };
       } catch (error) {
         console.error('ToastifyPro: Failed to create custom toast:', error);
       }
@@ -1560,9 +2211,10 @@
         }
 
         // Create close button for confirmation
-        const closeBtn = document.createElement("span");
+        const closeBtn = document.createElement("button");
         closeBtn.className = "conf-close-btn";
         closeBtn.innerHTML = "&times;";
+        closeBtn.setAttribute('type', 'button');
         closeBtn.setAttribute('aria-label', 'Cancel confirmation');
         closeBtn.onclick = () => {
           if (!isLoading) {
@@ -1578,6 +2230,7 @@
         // Create icon wrapper
         const iconWrapper = document.createElement("div");
         iconWrapper.className = "toast-icon";
+        iconWrapper.setAttribute('aria-hidden', 'true');
         iconWrapper.innerHTML = this.getIconSVG('info'); // Default to info icon
         if (confirmOptions.primaryColor) {
           iconWrapper.style.color = textColor;
@@ -1598,8 +2251,9 @@
         contentWrapper.appendChild(messageElement);
         
         // Optional description
+        let descriptionElement = null;
         if (description) {
-          const descriptionElement = document.createElement("div");
+          descriptionElement = document.createElement("div");
           descriptionElement.className = "toast-description";
           descriptionElement.textContent = description.substring(0, this.defaultOptions.maxLength * 2);
           if (confirmOptions.primaryColor) {
@@ -1617,6 +2271,7 @@
         // Cancel button
         const cancelBtn = document.createElement("button");
         cancelBtn.className = "toast-btn toast-btn-cancel";
+        cancelBtn.setAttribute('type', 'button');
         cancelBtn.textContent = confirmOptions.cancelText;
         cancelBtn.onclick = () => {
           if (!isLoading) {
@@ -1638,18 +2293,25 @@
         // Confirm button
         const confirmBtn = document.createElement("button");
         confirmBtn.className = `toast-btn toast-btn-confirm`;
-        
-        // Create spinner element
-        const spinner = document.createElement("span");
-        spinner.className = "btn-spinner";
-        confirmBtn.appendChild(spinner);
-        
+        confirmBtn.setAttribute('type', 'button');
+
         // Create text wrapper
         const textWrapper = document.createElement("span");
         textWrapper.className = "btn-text";
         textWrapper.textContent = confirmOptions.confirmText;
         confirmBtn.appendChild(textWrapper);
         
+        // Create spinner element with custom SVG
+        const spinner = document.createElement("span");
+        spinner.className = "btn-spinner";
+        spinner.innerHTML = `
+        <svg width="25" height="25" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9.5 2.9375V5.5625M9.5 13.4375V16.0625M2.9375 9.5H5.5625M13.4375 9.5H16.0625" stroke="currentColor" stroke-width="1.875" stroke-linecap="round" />
+          <path d="M4.86011 4.85961L6.71627 6.71577M12.2847 12.2842L14.1409 14.1404M4.86011 14.1404L6.71627 12.2842M12.2847 6.71577L14.1409 4.85961" stroke="currentColor" stroke-width="1.875" stroke-linecap="round" />
+        </svg>
+      `;
+        confirmBtn.appendChild(spinner);
+        
         confirmBtn.onclick = () => {
           if (!isLoading) {
             handleConfirmation(true);
@@ -1700,6 +2362,53 @@
           setLoading(true);
         }
 
+        // ARIA accessibility for confirmation dialog
+        toast.setAttribute('role', 'alertdialog');
+        toast.setAttribute('aria-modal', 'true');
+        toast.setAttribute('aria-labelledby', 'toast-conf-title');
+        if (description) {
+          toast.setAttribute('aria-describedby', 'toast-conf-desc');
+        }
+        messageElement.id = 'toast-conf-title';
+        if (description && descriptionElement) {
+          descriptionElement.id = 'toast-conf-desc';
+        }
+        
+        // Store previously focused element for restoration
+        const previouslyFocused = document.activeElement;
+        
+        // Focus trap for confirmation dialog
+        const focusableElements = [cancelBtn, confirmBtn, closeBtn].filter(Boolean);
+        let currentFocusIndex = 0;
+        
+        const handleTabKey = (e) => {
+          if (e.key === 'Tab' && toastElement && toastElement.parentNode) {
+            e.preventDefault();
+            if (e.shiftKey) {
+              currentFocusIndex = (currentFocusIndex - 1 + focusableElements.length) % focusableElements.length;
+            } else {
+              currentFocusIndex = (currentFocusIndex + 1) % focusableElements.length;
+            }
+            focusableElements[currentFocusIndex]?.focus();
+          }
+        };
+        
+        document.addEventListener('keydown', handleTabKey);
+        
+        // Store cleanup function
+        const originalClose = closeConfirmation;
+        const cleanupAndClose = () => {
+          document.removeEventListener('keydown', handleTabKey);
+          // Restore focus to previously focused element
+          if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
+            setTimeout(() => previouslyFocused.focus(), 100);
+          }
+          originalClose();
+        };
+        
+        // Update control object with enhanced close
+        controlObject.close = cleanupAndClose;
+
         // Entrance animation
         setTimeout(() => {
           toast.classList.add("show");
@@ -1707,6 +2416,11 @@
           if (icon) {
             icon.style.animation = 'iconBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
           }
+          
+          // Focus the confirm button after animation
+          setTimeout(() => {
+            confirmBtn.focus();
+          }, 100);
         }, 10);
 
         // Return control object with toast element and control functions
@@ -1725,6 +2439,527 @@
     confirm(message, descriptionOrCallback, callback) {
       return this.conf(message, descriptionOrCallback, callback);
     }
+
+    /**
+     * Shows an input prompt toast with a text field
+     * @param {string} message - Main prompt question
+     * @param {string|Function|Object} descriptionOrCallback - Description text, callback function, or options object
+     * @param {Function} callback - Callback function (if description provided)
+     * @returns {Object} Control object with element, close, setValue, getValue methods
+     * 
+     * Options object:
+     * - description: {string} Optional description text
+     * - placeholder: {string} Input placeholder text (default: 'Enter your response...')
+     * - submitText: {string} Submit button text (default: 'Submit')
+     * - cancelText: {string} Cancel button text (default: 'Cancel')
+     * - defaultValue: {string} Default input value
+     * - required: {boolean} Whether input is required (default: true)
+     * - type: {string} Input type: 'text', 'email', 'number', 'password', 'url' (default: 'text')
+     * - validate: {Function} Custom validation function (receives value, returns true or error string)
+     * - onSubmit: {Function} Called when user submits (receives value, control object)
+     * - onCancel: {Function} Called when user cancels
+     * - theme: {string} Toast theme: 'dark' or 'light' (default: 'dark')
+     * - position: {string} Override default position
+     * - overlay: {boolean} Show overlay behind toast (default: true)
+     * - primaryColor: {string} Custom primary color
+     * - secondaryColor: {string} Custom secondary color for gradient
+     * 
+     * @example
+     * // Simple usage
+     * toast.input('What is your name?', (value) => console.log(value));
+     * 
+     * // With description
+     * toast.input('Enter your email', 'We will send you updates', (value) => {...});
+     * 
+     * // Full options
+     * toast.input('Enter password', {
+     *   type: 'password',
+     *   placeholder: 'Minimum 8 characters',
+     *   validate: (val) => val.length >= 8 || 'Password must be at least 8 characters',
+     *   onSubmit: (value) => { ... },
+     *   theme: 'light'
+     * });
+     */
+    input(message, descriptionOrCallback, callback) {
+      try {
+        // Parse arguments like confirm method
+        let description = '';
+        let options = {};
+        let resultCallback = null;
+
+        if (typeof descriptionOrCallback === 'string') {
+          description = descriptionOrCallback;
+          if (typeof callback === 'function') {
+            resultCallback = callback;
+          } else if (typeof callback === 'object') {
+            options = callback || {};
+            resultCallback = options.onSubmit || null;
+          }
+        } else if (typeof descriptionOrCallback === 'function') {
+          resultCallback = descriptionOrCallback;
+        } else if (typeof descriptionOrCallback === 'object') {
+          options = descriptionOrCallback || {};
+          description = options.description || '';
+          resultCallback = options.onSubmit || null;
+        }
+
+        // Default options
+        const inputOptions = {
+          placeholder: options.placeholder || 'Enter your response...',
+          submitText: options.submitText || 'Submit',
+          cancelText: options.cancelText || 'Cancel',
+          defaultValue: options.defaultValue || '',
+          required: options.required !== false, // default true
+          type: options.type || 'text',
+          validate: options.validate || null,
+          onCancel: options.onCancel || null,
+          theme: options.theme || 'dark',
+          position: options.position || this.defaultOptions.position,
+          overlay: options.overlay !== false, // default true
+          primaryColor: options.primaryColor || null,
+          secondaryColor: options.secondaryColor || null,
+        };
+
+        // Validate input type
+        const validTypes = ['text', 'email', 'number', 'password', 'url', 'tel'];
+        if (!validTypes.includes(inputOptions.type)) {
+          inputOptions.type = 'text';
+        }
+
+        // Create or get container for the specified position
+        let inputContainer;
+        const positionClass = inputOptions.position.replace(' ', '-');
+        const existingContainer = document.querySelector(
+          `.toastify-pro-container.${positionClass}`
+        );
+        
+        if (existingContainer) {
+          inputContainer = existingContainer;
+        } else {
+          inputContainer = document.createElement("div");
+          inputContainer.className = `toastify-pro-container ${positionClass}`;
+          document.body.appendChild(inputContainer);
+        }
+
+        // Create overlay if enabled
+        let overlay = null;
+        if (inputOptions.overlay) {
+          overlay = document.createElement("div");
+          overlay.className = "toastify-pro-overlay";
+          document.body.appendChild(overlay);
+          setTimeout(() => overlay.classList.add("visible"), 10);
+        }
+
+        // Create input toast element
+        const toast = document.createElement("div");
+        toast.className = `toastify-pro input-toast ${inputOptions.theme}`;
+        toast.setAttribute('role', 'dialog');
+        toast.setAttribute('aria-modal', 'true');
+        toast.setAttribute('aria-labelledby', 'toast-input-title');
+
+        // Track state
+        let isLoading = false;
+        let isClosed = false;
+        let inputElement = null;
+        let submitBtnElement = null;
+        let cancelBtnElement = null;
+        let errorElement = null;
+
+        // Helper: Check if a color is light or dark
+        const isLightColor = (color) => {
+          if (!color) return false;
+          const hex = color.replace('#', '');
+          if (hex.length === 3) {
+            const r = parseInt(hex[0] + hex[0], 16);
+            const g = parseInt(hex[1] + hex[1], 16);
+            const b = parseInt(hex[2] + hex[2], 16);
+            return (r * 299 + g * 587 + b * 114) / 1000 > 128;
+          }
+          const r = parseInt(hex.substr(0, 2), 16);
+          const g = parseInt(hex.substr(2, 2), 16);
+          const b = parseInt(hex.substr(4, 2), 16);
+          return (r * 299 + g * 587 + b * 114) / 1000 > 128;
+        };
+
+        // Apply custom colors
+        let textColor = inputOptions.theme === 'light' ? '#1e293b' : 'white';
+        if (inputOptions.primaryColor) {
+          const primary = inputOptions.primaryColor;
+          const secondary = inputOptions.secondaryColor;
+          
+          if (secondary) {
+            toast.style.background = `linear-gradient(135deg, ${primary} 0%, ${secondary} 100%)`;
+          } else {
+            toast.style.background = `linear-gradient(135deg, ${primary} 0%, ${primary}dd 100%)`;
+          }
+          
+          textColor = isLightColor(primary) ? '#1e293b' : 'white';
+          toast.style.color = textColor;
+          
+          const borderOpacity = isLightColor(primary) ? '0.2' : '0.15';
+          toast.style.borderColor = `rgba(255, 255, 255, ${borderOpacity})`;
+        }
+
+        // Set loading state
+        const setLoading = (loading) => {
+          isLoading = loading;
+          if (submitBtnElement) {
+            if (loading) {
+              submitBtnElement.classList.add('loading');
+            } else {
+              submitBtnElement.classList.remove('loading');
+            }
+          }
+          if (cancelBtnElement) {
+            cancelBtnElement.disabled = loading;
+            cancelBtnElement.style.opacity = loading ? '0.5' : '1';
+            cancelBtnElement.style.cursor = loading ? 'not-allowed' : 'pointer';
+          }
+          if (inputElement) {
+            inputElement.disabled = loading;
+            inputElement.style.opacity = loading ? '0.6' : '1';
+          }
+        };
+
+        // Close the input toast
+        const closeInput = () => {
+          if (isClosed) return;
+          isClosed = true;
+
+          // Remove overlay
+          if (overlay) {
+            overlay.classList.remove("visible");
+            setTimeout(() => overlay.remove(), 300);
+          }
+
+          // Exit animation
+          toast.style.pointerEvents = 'none';
+          toast.style.animation = 'carSwipeCenter 0.35s cubic-bezier(0.55, 0.0, 0.85, 0.36) forwards';
+          
+          const icon = toast.querySelector('.toast-icon');
+          if (icon) {
+            icon.style.animation = 'iconCarExit 0.35s cubic-bezier(0.55, 0.0, 0.85, 0.36) forwards';
+          }
+
+          setTimeout(() => {
+            if (toast.parentNode) {
+              toast.remove();
+            }
+          }, 350);
+
+          // Restore focus
+          if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
+            setTimeout(() => previouslyFocused.focus(), 100);
+          }
+
+          // Cleanup keyboard handler
+          document.removeEventListener('keydown', handleKeyDown);
+        };
+
+        // Validate input
+        const validateInput = (value) => {
+          // Required check
+          if (inputOptions.required && !value.trim()) {
+            return 'This field is required';
+          }
+
+          // Type-specific validation
+          if (value.trim()) {
+            if (inputOptions.type === 'email') {
+              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+              if (!emailRegex.test(value)) {
+                return 'Please enter a valid email address';
+              }
+            } else if (inputOptions.type === 'url') {
+              try {
+                new URL(value);
+              } catch {
+                return 'Please enter a valid URL';
+              }
+            } else if (inputOptions.type === 'number') {
+              if (isNaN(Number(value))) {
+                return 'Please enter a valid number';
+              }
+            }
+          }
+
+          // Custom validation
+          if (inputOptions.validate) {
+            const customResult = inputOptions.validate(value);
+            if (customResult !== true && customResult) {
+              return customResult;
+            }
+          }
+
+          return null; // Valid
+        };
+
+        // Show error message
+        const showError = (message) => {
+          if (errorElement) {
+            errorElement.textContent = message;
+            errorElement.classList.add('visible');
+            inputElement.classList.add('error');
+          }
+        };
+
+        // Clear error message
+        const clearError = () => {
+          if (errorElement) {
+            errorElement.classList.remove('visible');
+            inputElement.classList.remove('error');
+          }
+        };
+
+        // Handle submit
+        const handleSubmit = async () => {
+          if (isLoading || isClosed) return;
+
+          const value = inputElement.value;
+          const error = validateInput(value);
+
+          if (error) {
+            showError(error);
+            inputElement.focus();
+            return;
+          }
+
+          clearError();
+
+          if (resultCallback) {
+            const result = resultCallback(value, { setLoading, close: closeInput, setValue: (v) => inputElement.value = v });
+            
+            // Handle async callbacks
+            if (result && typeof result.then === 'function') {
+              setLoading(true);
+              try {
+                await result;
+                if (!isClosed) {
+                  closeInput();
+                }
+              } catch (err) {
+                setLoading(false);
+                if (err && typeof err === 'string') {
+                  showError(err);
+                } else if (err && err.message) {
+                  showError(err.message);
+                }
+              }
+            } else if (!isLoading) {
+              closeInput();
+            }
+          } else {
+            closeInput();
+          }
+        };
+
+        // Handle cancel
+        const handleCancel = () => {
+          if (isLoading || isClosed) return;
+          
+          if (inputOptions.onCancel) {
+            inputOptions.onCancel();
+          }
+          closeInput();
+        };
+
+        // Store previously focused element
+        const previouslyFocused = document.activeElement;
+
+        // Keyboard handler
+        const handleKeyDown = (e) => {
+          if (isClosed) return;
+          
+          if (e.key === 'Escape' && !isLoading) {
+            handleCancel();
+          } else if (e.key === 'Enter' && e.target === inputElement && !isLoading) {
+            e.preventDefault();
+            handleSubmit();
+          }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+
+        // Build toast content
+        // Header with icon and content
+        const headerWrapper = document.createElement("div");
+        headerWrapper.className = "toast-input-header";
+
+        // Icon
+        const iconWrapper = document.createElement("div");
+        iconWrapper.className = "toast-icon";
+        iconWrapper.setAttribute('aria-hidden', 'true');
+        iconWrapper.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M18.5 2.50001C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.50001C21.8978 2.89784 22.1213 3.43739 22.1213 4.00001C22.1213 4.56262 21.8978 5.10219 21.5 5.50001L12 15L8 16L9 12L18.5 2.50001Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>`;
+        if (inputOptions.primaryColor) {
+          iconWrapper.style.color = textColor;
+        }
+        headerWrapper.appendChild(iconWrapper);
+
+        // Content wrapper
+        const contentWrapper = document.createElement("div");
+        contentWrapper.className = "toast-content";
+
+        // Message
+        const messageElement = document.createElement("div");
+        messageElement.className = "toast-message";
+        messageElement.id = "toast-input-title";
+        messageElement.textContent = message.substring(0, this.defaultOptions.maxLength);
+        if (inputOptions.primaryColor) {
+          messageElement.style.color = textColor;
+        }
+        contentWrapper.appendChild(messageElement);
+
+        // Description
+        if (description) {
+          const descriptionElement = document.createElement("div");
+          descriptionElement.className = "toast-description";
+          descriptionElement.id = "toast-input-desc";
+          descriptionElement.textContent = description.substring(0, this.defaultOptions.maxLength * 2);
+          if (inputOptions.primaryColor) {
+            descriptionElement.style.color = textColor;
+          }
+          contentWrapper.appendChild(descriptionElement);
+          toast.setAttribute('aria-describedby', 'toast-input-desc');
+        }
+
+        headerWrapper.appendChild(contentWrapper);
+
+        // Input wrapper
+        const inputWrapper = document.createElement("div");
+        inputWrapper.className = "toast-input-wrapper";
+        inputWrapper.appendChild(headerWrapper);
+
+        // Input field
+        inputElement = document.createElement("input");
+        inputElement.className = "toast-input";
+        inputElement.type = inputOptions.type;
+        inputElement.placeholder = inputOptions.placeholder;
+        inputElement.value = inputOptions.defaultValue;
+        inputElement.setAttribute('aria-label', message);
+        
+        if (inputOptions.primaryColor) {
+          const isLight = isLightColor(inputOptions.primaryColor);
+          inputElement.style.borderColor = isLight ? 'rgba(15, 23, 42, 0.2)' : 'rgba(255, 255, 255, 0.2)';
+          inputElement.style.background = isLight ? 'rgba(15, 23, 42, 0.06)' : 'rgba(255, 255, 255, 0.08)';
+          inputElement.style.color = textColor;
+        }
+        
+        // Clear error on input
+        inputElement.addEventListener('input', () => {
+          if (errorElement && errorElement.classList.contains('visible')) {
+            clearError();
+          }
+        });
+        
+        inputWrapper.appendChild(inputElement);
+
+        // Error message element
+        errorElement = document.createElement("div");
+        errorElement.className = "toast-input-error";
+        errorElement.setAttribute('role', 'alert');
+        inputWrapper.appendChild(errorElement);
+
+        // Actions wrapper
+        const actionsWrapper = document.createElement("div");
+        actionsWrapper.className = "toast-input-actions";
+
+        // Cancel button
+        cancelBtnElement = document.createElement("button");
+        cancelBtnElement.className = "input-btn input-btn-cancel";
+        cancelBtnElement.type = "button";
+        cancelBtnElement.textContent = inputOptions.cancelText;
+        cancelBtnElement.onclick = handleCancel;
+        
+        if (inputOptions.primaryColor) {
+          const isLight = isLightColor(inputOptions.primaryColor);
+          cancelBtnElement.style.background = isLight ? 'rgba(15, 23, 42, 0.08)' : 'rgba(255, 255, 255, 0.1)';
+          cancelBtnElement.style.color = textColor;
+          cancelBtnElement.style.borderColor = isLight ? 'rgba(15, 23, 42, 0.2)' : 'rgba(255, 255, 255, 0.2)';
+        }
+
+        // Submit button
+        submitBtnElement = document.createElement("button");
+        submitBtnElement.className = "input-btn input-btn-submit";
+        submitBtnElement.type = "button";
+        
+        const textWrapper = document.createElement("span");
+        textWrapper.className = "btn-text";
+        textWrapper.textContent = inputOptions.submitText;
+        submitBtnElement.appendChild(textWrapper);
+
+        // Spinner
+        const spinner = document.createElement("span");
+        spinner.className = "btn-spinner";
+        spinner.innerHTML = `<svg width="16" height="16" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9.5 2.9375V5.5625M9.5 13.4375V16.0625M2.9375 9.5H5.5625M13.4375 9.5H16.0625" stroke="currentColor" stroke-width="1.875" stroke-linecap="round" />
+        <path d="M4.86011 4.85961L6.71627 6.71577M12.2847 12.2842L14.1409 14.1404M4.86011 14.1404L6.71627 12.2842M12.2847 6.71577L14.1409 4.85961" stroke="currentColor" stroke-width="1.875" stroke-linecap="round" />
+      </svg>`;
+        submitBtnElement.appendChild(spinner);
+        
+        submitBtnElement.onclick = handleSubmit;
+        
+        if (inputOptions.primaryColor) {
+          const primary = inputOptions.primaryColor;
+          const isLight = isLightColor(primary);
+          submitBtnElement.style.background = isLight 
+            ? 'linear-gradient(135deg, #1e293b 0%, #334155 100%)' 
+            : 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%)';
+          submitBtnElement.style.color = isLight ? 'white' : '#1e293b';
+          submitBtnElement.style.borderColor = isLight ? 'rgba(15, 23, 42, 0.3)' : 'rgba(255, 255, 255, 0.4)';
+        }
+
+        actionsWrapper.appendChild(cancelBtnElement);
+        actionsWrapper.appendChild(submitBtnElement);
+        inputWrapper.appendChild(actionsWrapper);
+
+        toast.appendChild(inputWrapper);
+        inputContainer.appendChild(toast);
+
+        // Entrance animation
+        setTimeout(() => {
+          toast.classList.add("show");
+          const icon = toast.querySelector('.toast-icon');
+          if (icon) {
+            icon.style.animation = 'iconBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
+          }
+          
+          // Focus input after animation
+          setTimeout(() => {
+            inputElement.focus();
+            // Select default value if present
+            if (inputOptions.defaultValue) {
+              inputElement.select();
+            }
+          }, 150);
+        }, 10);
+
+        // Return control object
+        return {
+          element: toast,
+          close: closeInput,
+          setLoading,
+          getValue: () => inputElement.value,
+          setValue: (value) => { inputElement.value = value; },
+          setError: showError,
+          clearError
+        };
+      } catch (error) {
+        console.error('ToastifyPro: Failed to create input toast:', error);
+      }
+    }
+
+    /**
+     * Alias for input() method - shows an input prompt
+     * @param {string} message - Main prompt question  
+     * @param {string|Function|Object} descriptionOrCallback - Description text, callback function, or options object
+     * @param {Function} callback - Callback function (if description provided)
+     */
+    prompt(message, descriptionOrCallback, callback) {
+      return this.input(message, descriptionOrCallback, callback);
+    }
   }
 
   /**