@appius-fr/apx 2.5.2 → 2.6.1

package/modules/listen/README.md

@@ -0,0 +1,235 @@
+# APX Listen Module
+
+The `listen` module provides a powerful event handling system for APX objects. It enables event delegation, multiple callback chaining, debouncing via timeouts, and manual event triggering.
+
+---
+
+## Installation
+
+The `listen` module is automatically included when you import APX. It augments all APX objects with the `.listen()` and `.trigger()` methods.
+
+```javascript
+import APX from './APX.mjs';
+// .listen() and .trigger() are now available on all APX objects
+```
+
+---
+
+## Usage
+
+### Basic Event Listening
+
+```javascript
+// Listen to a single event type
+APX('.my-button').listen('click').do((event) => {
+    console.log('Button clicked!', event.target);
+});
+
+// Listen to multiple event types
+APX('.my-input').listen(['input', 'change']).do((event) => {
+    console.log('Input changed:', event.target.value);
+});
+```
+
+### Event Delegation
+
+Use event delegation to handle events on dynamically added elements:
+
+```javascript
+// Listen for clicks on any button inside the container (even if added later)
+APX('#container').listen('click', '.button').do((event) => {
+    console.log('Button clicked:', event.target);
+});
+```
+
+### Multiple Callbacks (Chaining)
+
+Chain multiple callbacks that execute sequentially:
+
+```javascript
+APX('.my-button').listen('click').do((event) => {
+    console.log('First callback');
+    return fetch('/api/data'); // Can return promises
+}).do((event) => {
+    console.log('Second callback (runs after first completes)');
+}).do((event) => {
+    console.log('Third callback');
+});
+```
+
+### Debouncing with Timeout
+
+Add a delay before executing callbacks:
+
+```javascript
+// Wait 300ms after the last event before executing callbacks
+APX('.search-input').listen('input', { timeout: 300 }).do((event) => {
+    console.log('Searching for:', event.target.value);
+    // This will only fire 300ms after the user stops typing
+});
+```
+
+### Manual Event Triggering
+
+Manually trigger events and their registered callbacks:
+
+```javascript
+// Trigger a click event
+APX('.my-button').trigger('click');
+
+// Or trigger with an actual Event object
+const customEvent = new CustomEvent('myevent', { detail: { data: 'value' } });
+APX('.my-element').trigger(customEvent);
+```
+
+---
+
+## API
+
+### `.listen(eventTypes, selector?, options?)`
+
+Adds event listeners to the APX-wrapped elements.
+
+**Parameters:**
+- `eventTypes` (string | string[]): The event type(s) to listen for (e.g., `'click'`, `['input', 'change']`)
+- `selector` (string, optional): CSS selector for event delegation
+- `options` (object, optional): Configuration options
+  - `timeout` (number): Delay in milliseconds before executing callbacks (default: `0`)
+
+**Returns:** An object with a `.do()` method for chaining callbacks.
+
+**Example:**
+```javascript
+APX('.element')
+    .listen('click', '.button', { timeout: 100 })
+    .do((event) => { /* callback 1 */ })
+    .do((event) => { /* callback 2 */ });
+```
+
+### `.do(callback)`
+
+Adds a callback function to the event listener chain. Callbacks execute sequentially, and each callback can return a Promise to delay the next callback.
+
+**Parameters:**
+- `callback` (Function): The callback function that receives the event object
+
+**Returns:** The same object (for chaining)
+
+**Example:**
+```javascript
+APX('.button').listen('click').do((event) => {
+    // Callback is bound to the matched element
+    console.log(this); // The matched element
+    return fetch('/api').then(res => res.json());
+}).do((event) => {
+    // This runs after the fetch completes
+    console.log('Fetch completed');
+});
+```
+
+### `.trigger(event)`
+
+Manually triggers an event on all wrapped elements and executes registered callbacks.
+
+**Parameters:**
+- `event` (string | Event): Event type string or an Event object
+
+**Example:**
+```javascript
+// Trigger with string
+APX('.button').trigger('click');
+
+// Trigger with Event object
+const event = new CustomEvent('custom', { detail: { foo: 'bar' } });
+APX('.element').trigger(event);
+```
+
+---
+
+## Examples
+
+### Form Validation with Debouncing
+
+```javascript
+APX('#email-input').listen('input', { timeout: 500 }).do((event) => {
+    const email = event.target.value;
+    if (email.includes('@')) {
+        validateEmail(email);
+    }
+});
+```
+
+### Dynamic Content with Event Delegation
+
+```javascript
+// Handle clicks on buttons added dynamically
+APX('#dynamic-container').listen('click', '.action-button').do((event) => {
+    const button = event.target;
+    const action = button.dataset.action;
+    handleAction(action);
+});
+```
+
+### Sequential Async Operations
+
+```javascript
+APX('#submit-button').listen('click').do(async (event) => {
+    // First: Validate form
+    const isValid = await validateForm();
+    if (!isValid) throw new Error('Validation failed');
+}).do(async (event) => {
+    // Second: Submit form (only if validation passed)
+    const result = await submitForm();
+    return result;
+}).do((event) => {
+    // Third: Show success message
+    showSuccessMessage();
+});
+```
+
+### Multiple Event Types
+
+```javascript
+APX('.input-field').listen(['focus', 'blur', 'input']).do((event) => {
+    switch (event.type) {
+        case 'focus':
+            highlightField(event.target);
+            break;
+        case 'blur':
+            validateField(event.target);
+            break;
+        case 'input':
+            updatePreview(event.target.value);
+            break;
+    }
+});
+```
+
+---
+
+## Features
+
+- ✅ **Event Delegation**: Handle events on dynamically added elements
+- ✅ **Multiple Callbacks**: Chain multiple callbacks that execute sequentially
+- ✅ **Promise Support**: Callbacks can return Promises for async operations
+- ✅ **Debouncing**: Add timeouts to delay callback execution
+- ✅ **Multiple Event Types**: Listen to multiple event types at once
+- ✅ **Manual Triggering**: Programmatically trigger events and callbacks
+- ✅ **Context Binding**: Callbacks are bound to the matched element (`this`)
+
+---
+
+## Notes
+
+- Callbacks execute sequentially; if a callback returns a Promise, the next callback waits for it to resolve
+- Event delegation uses `closest()` to find the matching element, so it works with nested elements
+- Timeouts are cleared and reset on each event, making it perfect for debouncing
+- The `trigger()` method respects event delegation selectors when executing callbacks
+
+---
+
+## License
+
+Author : Thibault SAELEN  
+Copyright Appius SARL.
+

package/modules/toast/README.md

@@ -66,13 +66,14 @@ APX.toast.use('admin').closeAll();
 {
   position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left', // default 'bottom-right'
   maxToasts: number,                // default 5
-  defaultDurationMs: number,        // default 5000
+  defaultDurationMs: number,       // default 5000
   zIndex: number,                   // default 11000
   ariaLive: 'polite'|'assertive'|'off', // default 'polite'
   gap: number,                      // default 8
-  dedupe: boolean,                  // default false
+  dedupe: boolean,                 // default false
   containerClass: string,           // extra class on container
-  offset: number                    // px offset from screen edges
+  offset: number,                  // px offset from screen edges
+  progress: false | true | { enable, position?, pauseButton? }  // default false; pauseButton default false (v2.6.1)
 }
 
 // ToastOptions (per toast)
@@ -83,6 +84,7 @@ APX.toast.use('admin').closeAll();
   dismissible: boolean,             // default true
   id: string,                       // stable id for dedupe updates
   className: string,                // extra classes on the toast element
+  progress: true | { enable: boolean, position?: 'top'|'bottom', pauseButton?: boolean },  // v2.6.1; pauseButton default false
   onClick: (ref, ev) => void,
   onClose: (ref, reason) => void    // reason: 'timeout'|'close'|'api'|'overflow'
 }
@@ -106,15 +108,39 @@ Class structure (BEM‑like):
 - Container: `APX-toast-container APX-toast-container--{corner}`
 - Toast: `APX-toast APX-toast--{type}`
 - Children: `APX-toast__content`, optional `APX-toast__close`
+- Progress (v2.6.1): `APX-toast__progress`, `APX-toast__progress-track`, `APX-toast__progress-bar`, optional `APX-toast__progress-pause`
 - Animations: `APX-toast--enter/--enter-active`, `APX-toast--exit/--exit-active`
 
+## Progress bar (v2.6.1)
+
+Optional visual countdown for toasts with a duration. Bar shows time remaining (100% → 0%); sync with timer and hover pause.
+
+```js
+// Bar on top (default), no pause button by default
+APX.toast.show({ message: 'Saving…', type: 'info', progress: true });
+
+// Bar with pause/resume button
+APX.toast.show({ message: 'Pausable', type: 'info', progress: { enable: true, position: 'top', pauseButton: true } });
+
+// Bar at bottom
+APX.toast.show({ message: 'Done', type: 'success', progress: { enable: true, position: 'bottom' } });
+
+// Default progress for all toasts from a manager
+APX.toast.configure({ progress: true });
+```
+
+- `progress: true` → bar at top, no pause button.
+- `progress: { enable, position: 'top'|'bottom', pauseButton?: boolean }` — `pauseButton` defaults to `false`; set `pauseButton: true` to show the round pause/resume button on the toast corner.
+- No bar if `durationMs === 0` (sticky). Extra spacing is applied when the button is present so stacked toasts do not overlap.
+
 ## Behavior
 
 - Lazy container creation (first `show`).
 - `maxToasts` enforced; oldest removed with reason `'overflow'`.
-- Hover pauses timer; resumes on mouse leave.
-- `durationMs = 0` makes the toast sticky.
+- Hover pauses timer; resumes on mouse leave (unless user clicked pause).
+- `durationMs = 0` makes the toast sticky (no progress bar).
 - If `dedupe: true` and `id` matches an open toast, it updates instead of creating a new one.
+- With `progress`, a bar and optional pause/resume button show; button toggles pause (same as hover).
 
 ## Accessibility & SSR
 

package/modules/toast/css/toast.css

@@ -51,6 +51,91 @@
     font-size: 16px; line-height: 1; text-align: center;
 }
 
+/* Progress bar (outside content, flush to toast edges) */
+.APX-toast__progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: var(--apx-toast-progress-height, 4px);
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    flex-shrink: 0;
+    border-radius: inherit;
+    overflow: visible;
+}
+.APX-toast__progress--top {
+    top: 0;
+    border-radius: var(--apx-toast-radius, 6px) var(--apx-toast-radius, 6px) 0 0;
+}
+.APX-toast__progress--bottom {
+    bottom: 0;
+    border-radius: 0 0 var(--apx-toast-radius, 6px) var(--apx-toast-radius, 6px);
+}
+/* Track contains the bar; no margin (pause button is on the corner, overlapping) */
+.APX-toast__progress-track {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+.APX-toast__progress-bar {
+    height: 100%;
+    width: 100%;
+    max-width: 100%;
+    transition: width 80ms linear;
+    background: rgba(0, 0, 0, 0.25);
+}
+.APX-toast--info .APX-toast__progress-bar { background: rgba(5, 44, 101, 0.5); }
+.APX-toast--success .APX-toast__progress-bar { background: rgba(0, 0, 0, 0.25); }
+.APX-toast--warning .APX-toast__progress-bar { background: rgba(102, 77, 3, 0.5); }
+.APX-toast--danger .APX-toast__progress-bar { background: rgba(0, 0, 0, 0.25); }
+/* Pause/Resume button: round, center exactly on toast corner (top-left or bottom-left) */
+.APX-toast__progress-pause {
+    position: absolute;
+    width: var(--apx-toast-progress-pause-size, 18px);
+    height: var(--apx-toast-progress-pause-size, 18px);
+    left: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #eee;
+    color: currentColor;
+    border: 1px solid rgba(0, 0, 0, 0.35);
+    border-radius: 50%;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    line-height: 1;
+    opacity: 0.95;
+    transition: opacity 120ms ease;
+    flex-shrink: 0;
+}
+.APX-toast__progress--top .APX-toast__progress-pause {
+    top: 0;
+    transform: translate(-50%, -50%);
+}
+.APX-toast__progress--bottom .APX-toast__progress-pause {
+    bottom: 0;
+    transform: translate(-50%, 50%);
+}
+.APX-toast--info .APX-toast__progress-pause { background: var(--apx-toast-info-bg, #0dcaf0); border-color: rgba(5, 44, 101, 0.55); }
+.APX-toast--success .APX-toast__progress-pause { background: var(--apx-toast-success-bg, #198754); border-color: rgba(0, 0, 0, 0.3); }
+.APX-toast--warning .APX-toast__progress-pause { background: var(--apx-toast-warning-bg, #ffc107); border-color: rgba(102, 77, 3, 0.6); }
+.APX-toast--danger .APX-toast__progress-pause { background: var(--apx-toast-danger-bg, #dc3545); border-color: rgba(0, 0, 0, 0.35); }
+.APX-toast__progress-pause:hover { opacity: 1; }
+.APX-toast__progress-pause:focus { outline: 2px solid rgba(0,0,0,.4); outline-offset: -2px; }
+.APX-toast__progress-pause svg {
+    width: 10px;
+    height: 10px;
+    display: block;
+}
+/* Extra top/bottom padding when progress bar is present (default content padding 10px + bar height) */
+.APX-toast--has-progress-top { padding-top: calc(10px + var(--apx-toast-progress-height, 4px)); }
+.APX-toast--has-progress-bottom { padding-bottom: calc(10px + var(--apx-toast-progress-height, 4px)); }
+/* Reserve space for stacking when pause button is present (button extends outside toast corner) */
+.APX-toast--has-progress-top.APX-toast--has-progress-pause { margin-top: calc(var(--apx-toast-progress-pause-size, 18px) / 2); }
+.APX-toast--has-progress-bottom.APX-toast--has-progress-pause { margin-bottom: calc(var(--apx-toast-progress-pause-size, 18px) / 2); }
+
 /* Animations */
 .APX-toast--enter { opacity: 0; transform: translateY(8px); }
 .APX-toast--enter.APX-toast--enter-active { opacity: 1; transform: translateY(0); }

package/modules/toast/toast.mjs

@@ -30,6 +30,11 @@ import './css/toast.css';
  * @property {string} [containerClass]
  * @property {number} [offset]
  * @property {string} [id]
+ * @property {boolean|{enable: boolean, position: 'top'|'bottom'}} [progress] Default: false. Show progress bar when true or { enable: true, position: 'top'|'bottom' }.
+ */
+
+/**
+ * @typedef {{enable: boolean, position: 'top'|'bottom', pauseButton: boolean}} ProgressOpt
  */
 
 /**
@@ -44,6 +49,7 @@ import './css/toast.css';
  * @property {string} [className]
  * @property {Position} [position]
  * @property {'up'|'down'|'auto'} [flow] Flow direction for stacking toasts. 'auto' determines based on position. Default: 'auto'
+ * @property {boolean|{enable: boolean, position: 'top'|'bottom', pauseButton?: boolean}} [progress] Show progress bar: true = top, or { enable, position, pauseButton } (pauseButton default false).
  */
 
 /**
@@ -104,7 +110,8 @@ const DEFAULT_CONFIG = {
     gap: 8,
     dedupe: false,
     containerClass: '',
-    offset: 0
+    offset: 0,
+    progress: false
 };
 
 /**
@@ -118,6 +125,101 @@ function createEl(tag, classNames) {
     return el;
 }
 
+/** Minimal line-based pause (two bars) / resume (triangle right) icon SVG. Uses currentColor. */
+function getProgressPauseResumeIconSVG(paused) {
+    if (paused) {
+        return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8 6L8 18L17 12Z"/></svg>`;
+    }
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><line x1="9" y1="6" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="18"/></svg>`;
+}
+
+/**
+ * Create and insert progress block (track + bar, optional pause button) into toast. Button is fixed at left via track layout.
+ * @param {HTMLElement} toastEl
+ * @param {HTMLElement} contentEl
+ * @param {HTMLElement|null} closeBtn
+ * @param {ProgressOpt} progressOpt
+ * @returns {{ wrap: HTMLElement, bar: HTMLElement, pauseBtn: HTMLElement|null }}
+ */
+function createProgressBlock(toastEl, contentEl, closeBtn, progressOpt) {
+    const pos = progressOpt.position;
+    const showPauseButton = progressOpt.pauseButton === true;
+    const wrap = createEl('div', `APX-toast__progress APX-toast__progress--${pos}`);
+    const track = createEl('div', 'APX-toast__progress-track');
+    const bar = createEl('div', 'APX-toast__progress-bar');
+    bar.setAttribute('role', 'progressbar');
+    bar.setAttribute('aria-valuemin', '0');
+    bar.setAttribute('aria-valuemax', '100');
+    bar.setAttribute('aria-label', 'Temps restant');
+    bar.setAttribute('aria-valuenow', '100');
+    bar.style.width = '100%';
+    track.appendChild(bar);
+    wrap.appendChild(track);
+    let pauseBtn = null;
+    if (showPauseButton) {
+        pauseBtn = createEl('button', 'APX-toast__progress-pause');
+        pauseBtn.type = 'button';
+        pauseBtn.setAttribute('aria-label', 'Pause');
+        pauseBtn.setAttribute('title', 'Pause');
+        pauseBtn.innerHTML = getProgressPauseResumeIconSVG(false); // running = show pause icon
+        wrap.insertBefore(pauseBtn, track);
+    }
+    if (pos === 'top') {
+        toastEl.insertBefore(wrap, contentEl);
+        toastEl.classList.add('APX-toast--has-progress-top');
+    } else {
+        toastEl.insertBefore(wrap, closeBtn);
+        toastEl.classList.add('APX-toast--has-progress-bottom');
+    }
+    if (showPauseButton) toastEl.classList.add('APX-toast--has-progress-pause');
+    return { wrap, bar, pauseBtn };
+}
+
+/**
+ * Update progress block position (classes + DOM order)
+ * @param {HTMLElement} toastEl
+ * @param {HTMLElement} progressWrap
+ * @param {HTMLElement} contentEl
+ * @param {HTMLElement|null} closeBtn
+ * @param {'top'|'bottom'} pos
+ */
+function applyProgressPosition(toastEl, progressWrap, contentEl, closeBtn, pos) {
+    toastEl.classList.remove('APX-toast--has-progress-top', 'APX-toast--has-progress-bottom');
+    toastEl.classList.add(pos === 'top' ? 'APX-toast--has-progress-top' : 'APX-toast--has-progress-bottom');
+    progressWrap.classList.remove('APX-toast__progress--top', 'APX-toast__progress--bottom');
+    progressWrap.classList.add(`APX-toast__progress--${pos}`);
+    const target = pos === 'top' ? contentEl : closeBtn;
+    if (progressWrap.nextElementSibling !== target) toastEl.insertBefore(progressWrap, target);
+}
+
+/**
+ * Resolve progress option from per-call option and config default
+ * @param {boolean|{enable: boolean, position: 'top'|'bottom'}|undefined} option
+ * @param {boolean|{enable: boolean, position: 'top'|'bottom'}|undefined} configDefault
+ * @returns {ProgressOpt}
+ */
+function resolveProgress(option, configDefault) {
+    const fromConfig = configDefault === true
+        ? { enable: true, position: 'top', pauseButton: false }
+        : (configDefault && typeof configDefault === 'object'
+            ? {
+                enable: !!configDefault.enable,
+                position: configDefault.position === 'bottom' ? 'bottom' : 'top',
+                pauseButton: configDefault.pauseButton === true
+            }
+            : { enable: false, position: 'top', pauseButton: false });
+    if (option === undefined || option === null) return fromConfig;
+    if (option === true) return { enable: true, position: 'top', pauseButton: false };
+    if (typeof option === 'object') {
+        return {
+            enable: !!option.enable,
+            position: option.position === 'bottom' ? 'bottom' : 'top',
+            pauseButton: option.pauseButton === true
+        };
+    }
+    return { enable: false, position: 'top', pauseButton: false };
+}
+
 /**
  * Normalize placement synonyms to CSS values
  * @param {string} placement
@@ -388,6 +490,16 @@ class ToastManager {
             toastEl.appendChild(closeBtn);
         }
 
+        let progressWrap = null;
+        let progressBarEl = null;
+        let progressPauseBtn = null;
+        if (options.progress.enable && options.durationMs > 0) {
+            const created = createProgressBlock(toastEl, contentEl, closeBtn, options.progress);
+            progressWrap = created.wrap;
+            progressBarEl = created.bar;
+            progressPauseBtn = created.pauseBtn;
+        }
+
         // Get or create container for this specific position
         let container = null;
         let positionUpdateFn = null;
@@ -564,12 +676,27 @@ class ToastManager {
         let remaining = options.durationMs;
         let timerId = null;
         let startTs = null;
+        let userPaused = false;
+        let progressRafId = null;
         const handlers = { click: new Set(), close: new Set() };
 
         const startTimer = () => {
             if (!remaining || remaining <= 0) return; // sticky
             startTs = Date.now();
             timerId = window.setTimeout(() => ref.close('timeout'), remaining);
+            if (progressBarEl) {
+                const tick = () => {
+                    if (timerId == null || startTs == null) return;
+                    const elapsed = Date.now() - startTs;
+                    const remainingMs = Math.max(0, remaining - elapsed);
+                    const durationMs = options.durationMs;
+                    const pct = durationMs > 0 ? Math.max(0, Math.min(100, (remainingMs / durationMs) * 100)) : 0;
+                    progressBarEl.style.width = `${pct}%`;
+                    progressBarEl.setAttribute('aria-valuenow', String(Math.round(pct)));
+                    progressRafId = requestAnimationFrame(tick);
+                };
+                progressRafId = requestAnimationFrame(tick);
+            }
         };
         const pauseTimer = () => {
             if (timerId != null) {
@@ -577,6 +704,22 @@ class ToastManager {
                 timerId = null;
                 if (startTs != null) remaining -= (Date.now() - startTs);
             }
+            if (progressRafId != null) {
+                cancelAnimationFrame(progressRafId);
+                progressRafId = null;
+            }
+        };
+
+        const attachProgressPauseHandler = (btn) => {
+            btn.addEventListener('click', (ev) => {
+                ev.stopPropagation();
+                userPaused = !userPaused;
+                if (userPaused) pauseTimer(); else startTimer();
+                const label = userPaused ? 'Reprendre' : 'Pause';
+                btn.setAttribute('aria-label', label);
+                btn.setAttribute('title', label);
+                btn.innerHTML = getProgressPauseResumeIconSVG(userPaused); // paused = resume (triangle)
+            });
         };
 
         /** @type {ToastRef} */
@@ -603,9 +746,34 @@ class ToastManager {
                     if (options.className) toastEl.classList.remove(...options.className.split(' ').filter(Boolean));
                     if (merged.className) toastEl.classList.add(...merged.className.split(' ').filter(Boolean));
                 }
+                // update progress visibility/position
+                options.progress = merged.progress;
+                if (progressWrap) {
+                    if (!merged.progress.enable || merged.durationMs <= 0) {
+                        progressWrap.style.display = 'none';
+                    } else {
+                        progressWrap.style.display = '';
+                        applyProgressPosition(toastEl, progressWrap, contentEl, closeBtn, merged.progress.position);
+                    }
+                } else if (merged.progress.enable && merged.durationMs > 0) {
+                    const created = createProgressBlock(toastEl, contentEl, closeBtn, merged.progress);
+                    progressWrap = created.wrap;
+                    progressBarEl = created.bar;
+                    progressPauseBtn = created.pauseBtn;
+                    if (progressPauseBtn) attachProgressPauseHandler(progressPauseBtn);
+                }
+                if (progressWrap && progressWrap.style.display !== 'none' && merged.progress.pauseButton === true) {
+                    toastEl.classList.add('APX-toast--has-progress-pause');
+                } else {
+                    toastEl.classList.remove('APX-toast--has-progress-pause');
+                }
                 // update duration logic
                 options.durationMs = merged.durationMs;
                 remaining = merged.durationMs;
+                if (progressBarEl) {
+                    progressBarEl.style.width = '100%';
+                    progressBarEl.setAttribute('aria-valuenow', '100');
+                }
                 pauseTimer();
                 startTimer();
             },
@@ -628,7 +796,10 @@ class ToastManager {
             const cleanup = (reason) => {
                 if (!toastEl) return;
                 pauseTimer();
-                
+                if (progressRafId != null) {
+                    cancelAnimationFrame(progressRafId);
+                    progressRafId = null;
+                }
                 // Cleanup position listeners and restore styles
                 if (positionCleanup) {
                     positionCleanup();
@@ -678,9 +849,10 @@ class ToastManager {
 
         // Hover pause
         toastEl.addEventListener('mouseenter', pauseTimer);
-        toastEl.addEventListener('mouseleave', () => startTimer());
+        toastEl.addEventListener('mouseleave', () => { if (!userPaused) startTimer(); });
 
         if (closeBtn) closeBtn.addEventListener('click', (ev) => { ev.stopPropagation(); ref.close('close'); });
+        if (progressPauseBtn) attachProgressPauseHandler(progressPauseBtn);
 
         // Track
         this.open.push(ref);
@@ -719,6 +891,7 @@ class ToastManager {
         if (typeof o.durationMs !== 'number') o.durationMs = this.config.defaultDurationMs;
         // Use id from options if provided, otherwise use id from config, otherwise undefined (will be auto-generated)
         if (!o.id && this.config.id) o.id = this.config.id;
+        o.progress = resolveProgress(opts.progress, this.config.progress);
         return o;
     }