@appius-fr/apx 2.6.0 → 2.6.1

package/dist/APX.standalone.js

@@ -247,6 +247,91 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.APX-toast-container {
     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); }
@@ -254,7 +339,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.APX-toast-container {
 .APX-toast--exit.APX-toast--exit-active { opacity: 0; transform: translateY(8px); }
 
 
-`, "",{"version":3,"sources":["webpack://./modules/toast/css/toast.css"],"names":[],"mappings":"AAAA;IACI,eAAe;IACf,aAAa;IACb,sBAAsB;IACtB,8BAA8B;IAC9B,wCAAwC;IACxC,oBAAoB;AACxB;;AAEA,qCAAqC,WAAW,EAAE,YAAY,EAAE,qBAAqB,EAAE;AACvF,oCAAoC,UAAU,EAAE,YAAY,EAAE,uBAAuB,EAAE;AACvF,kCAAkC,WAAW,EAAE,SAAS,EAAE,qBAAqB,EAAE;AACjF,iCAAiC,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE;;AAEjF;IACI,4CAA4C;IAC5C,4CAA4C;IAC5C,2CAA2C;IAC3C,2CAA2C;IAC3C,+DAA+D;IAC/D,sDAAsD;IACtD,WAAW;IACX,gBAAgB;IAChB,oBAAoB;IACpB,kBAAkB;IAClB,oDAAoD;AACxD;;AAEA,mBAAmB,6CAA6C,EAAE,wCAAwC,EAAE;AAC5G,sBAAsB,gDAAgD,EAAE,2CAA2C,EAAE;AACrH,sBAAsB,gDAAgD,EAAE,2CAA2C,EAAE;AACrH,qBAAqB,+CAA+C,EAAE,0CAA0C,EAAE;;AAElH,sBAAsB,iBAAiB,EAAE;;AAEzC;IACI,kBAAkB;IAClB,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,YAAY;IACzB,2BAA2B;IAC3B,oBAAoB,EAAE,mBAAmB,EAAE,uBAAuB;IAClE,uBAAuB,EAAE,mBAAmB;IAC5C,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,SAAS;IACpD,eAAe,EAAE,gBAAgB,EAAE,wBAAwB;IAC3D,YAAY,EAAE,8BAA8B;AAChD;AACA,0BAA0B,UAAU,EAAE;AACtC,0BAA0B,iCAAiC,EAAE,mBAAmB,EAAE;AAClF;IACI,YAAY;IACZ,eAAe,EAAE,cAAc,EAAE,kBAAkB;AACvD;;AAEA,eAAe;AACf,oBAAoB,UAAU,EAAE,0BAA0B,EAAE;AAC5D,4CAA4C,UAAU,EAAE,wBAAwB,EAAE;AAClF,mBAAmB,UAAU,EAAE,wBAAwB,EAAE;AACzD,0CAA0C,UAAU,EAAE,0BAA0B,EAAE","sourcesContent":[".APX-toast-container {\r\n    position: fixed;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--apx-toast-gap, 8px);\r\n    z-index: var(--apx-toast-z-index, 11000);\r\n    pointer-events: none;\r\n}\r\n\r\n.APX-toast-container--bottom-right { right: 12px; bottom: 12px; align-items: flex-end; }\r\n.APX-toast-container--bottom-left { left: 12px; bottom: 12px; align-items: flex-start; }\r\n.APX-toast-container--top-right { right: 12px; top: 12px; align-items: flex-end; }\r\n.APX-toast-container--top-left { left: 12px; top: 12px; align-items: flex-start; }\r\n\r\n.APX-toast {\r\n    min-width: var(--apx-toast-min-width, 260px);\r\n    max-width: var(--apx-toast-max-width, 420px);\r\n    font-size: var(--apx-toast-font-size, 14px);\r\n    border-radius: var(--apx-toast-radius, 6px);\r\n    box-shadow: var(--apx-toast-shadow, 0 6px 24px rgba(0,0,0,0.2));\r\n    padding: var(--apx-toast-padding, 10px 42px 10px 14px);\r\n    color: #111;\r\n    background: #eee;\r\n    pointer-events: auto;\r\n    position: relative;\r\n    transition: opacity 180ms ease, transform 180ms ease;\r\n}\r\n\r\n.APX-toast--info { background: var(--apx-toast-info-bg, #0dcaf0); color: var(--apx-toast-info-fg, #052c65); }\r\n.APX-toast--success { background: var(--apx-toast-success-bg, #198754); color: var(--apx-toast-success-fg, #ffffff); }\r\n.APX-toast--warning { background: var(--apx-toast-warning-bg, #ffc107); color: var(--apx-toast-warning-fg, #664d03); }\r\n.APX-toast--danger { background: var(--apx-toast-danger-bg, #dc3545); color: var(--apx-toast-danger-fg, #ffffff); }\r\n\r\n.APX-toast__content { line-height: 1.35; }\r\n\r\n.APX-toast__close {\r\n    position: absolute;\r\n    top: 50%; right: 10px;\r\n    width: 24px; height: 24px;\r\n    transform: translateY(-50%);\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    background: transparent; color: currentColor;\r\n    border: 0; border-radius: 4px; padding: 0; margin: 0;\r\n    cursor: pointer; appearance: none; -webkit-appearance: none;\r\n    opacity: .75; transition: opacity 120ms ease;\r\n}\r\n.APX-toast__close:hover { opacity: 1; }\r\n.APX-toast__close:focus { outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }\r\n.APX-toast__close::before {\r\n    content: '×';\r\n    font-size: 16px; line-height: 1; text-align: center;\r\n}\r\n\r\n/* Animations */\r\n.APX-toast--enter { opacity: 0; transform: translateY(8px); }\r\n.APX-toast--enter.APX-toast--enter-active { opacity: 1; transform: translateY(0); }\r\n.APX-toast--exit { opacity: 1; transform: translateY(0); }\r\n.APX-toast--exit.APX-toast--exit-active { opacity: 0; transform: translateY(8px); }\r\n\r\n\r\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./modules/toast/css/toast.css"],"names":[],"mappings":"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","sourcesContent":[".APX-toast-container {\r\n    position: fixed;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--apx-toast-gap, 8px);\r\n    z-index: var(--apx-toast-z-index, 11000);\r\n    pointer-events: none;\r\n}\r\n\r\n.APX-toast-container--bottom-right { right: 12px; bottom: 12px; align-items: flex-end; }\r\n.APX-toast-container--bottom-left { left: 12px; bottom: 12px; align-items: flex-start; }\r\n.APX-toast-container--top-right { right: 12px; top: 12px; align-items: flex-end; }\r\n.APX-toast-container--top-left { left: 12px; top: 12px; align-items: flex-start; }\r\n\r\n.APX-toast {\r\n    min-width: var(--apx-toast-min-width, 260px);\r\n    max-width: var(--apx-toast-max-width, 420px);\r\n    font-size: var(--apx-toast-font-size, 14px);\r\n    border-radius: var(--apx-toast-radius, 6px);\r\n    box-shadow: var(--apx-toast-shadow, 0 6px 24px rgba(0,0,0,0.2));\r\n    padding: var(--apx-toast-padding, 10px 42px 10px 14px);\r\n    color: #111;\r\n    background: #eee;\r\n    pointer-events: auto;\r\n    position: relative;\r\n    transition: opacity 180ms ease, transform 180ms ease;\r\n}\r\n\r\n.APX-toast--info { background: var(--apx-toast-info-bg, #0dcaf0); color: var(--apx-toast-info-fg, #052c65); }\r\n.APX-toast--success { background: var(--apx-toast-success-bg, #198754); color: var(--apx-toast-success-fg, #ffffff); }\r\n.APX-toast--warning { background: var(--apx-toast-warning-bg, #ffc107); color: var(--apx-toast-warning-fg, #664d03); }\r\n.APX-toast--danger { background: var(--apx-toast-danger-bg, #dc3545); color: var(--apx-toast-danger-fg, #ffffff); }\r\n\r\n.APX-toast__content { line-height: 1.35; }\r\n\r\n.APX-toast__close {\r\n    position: absolute;\r\n    top: 50%; right: 10px;\r\n    width: 24px; height: 24px;\r\n    transform: translateY(-50%);\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    background: transparent; color: currentColor;\r\n    border: 0; border-radius: 4px; padding: 0; margin: 0;\r\n    cursor: pointer; appearance: none; -webkit-appearance: none;\r\n    opacity: .75; transition: opacity 120ms ease;\r\n}\r\n.APX-toast__close:hover { opacity: 1; }\r\n.APX-toast__close:focus { outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }\r\n.APX-toast__close::before {\r\n    content: '×';\r\n    font-size: 16px; line-height: 1; text-align: center;\r\n}\r\n\r\n/* Progress bar (outside content, flush to toast edges) */\r\n.APX-toast__progress {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    height: var(--apx-toast-progress-height, 4px);\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: stretch;\r\n    flex-shrink: 0;\r\n    border-radius: inherit;\r\n    overflow: visible;\r\n}\r\n.APX-toast__progress--top {\r\n    top: 0;\r\n    border-radius: var(--apx-toast-radius, 6px) var(--apx-toast-radius, 6px) 0 0;\r\n}\r\n.APX-toast__progress--bottom {\r\n    bottom: 0;\r\n    border-radius: 0 0 var(--apx-toast-radius, 6px) var(--apx-toast-radius, 6px);\r\n}\r\n/* Track contains the bar; no margin (pause button is on the corner, overlapping) */\r\n.APX-toast__progress-track {\r\n    flex: 1;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n}\r\n.APX-toast__progress-bar {\r\n    height: 100%;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    transition: width 80ms linear;\r\n    background: rgba(0, 0, 0, 0.25);\r\n}\r\n.APX-toast--info .APX-toast__progress-bar { background: rgba(5, 44, 101, 0.5); }\r\n.APX-toast--success .APX-toast__progress-bar { background: rgba(0, 0, 0, 0.25); }\r\n.APX-toast--warning .APX-toast__progress-bar { background: rgba(102, 77, 3, 0.5); }\r\n.APX-toast--danger .APX-toast__progress-bar { background: rgba(0, 0, 0, 0.25); }\r\n/* Pause/Resume button: round, center exactly on toast corner (top-left or bottom-left) */\r\n.APX-toast__progress-pause {\r\n    position: absolute;\r\n    width: var(--apx-toast-progress-pause-size, 18px);\r\n    height: var(--apx-toast-progress-pause-size, 18px);\r\n    left: 0;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: #eee;\r\n    color: currentColor;\r\n    border: 1px solid rgba(0, 0, 0, 0.35);\r\n    border-radius: 50%;\r\n    padding: 0;\r\n    margin: 0;\r\n    cursor: pointer;\r\n    line-height: 1;\r\n    opacity: 0.95;\r\n    transition: opacity 120ms ease;\r\n    flex-shrink: 0;\r\n}\r\n.APX-toast__progress--top .APX-toast__progress-pause {\r\n    top: 0;\r\n    transform: translate(-50%, -50%);\r\n}\r\n.APX-toast__progress--bottom .APX-toast__progress-pause {\r\n    bottom: 0;\r\n    transform: translate(-50%, 50%);\r\n}\r\n.APX-toast--info .APX-toast__progress-pause { background: var(--apx-toast-info-bg, #0dcaf0); border-color: rgba(5, 44, 101, 0.55); }\r\n.APX-toast--success .APX-toast__progress-pause { background: var(--apx-toast-success-bg, #198754); border-color: rgba(0, 0, 0, 0.3); }\r\n.APX-toast--warning .APX-toast__progress-pause { background: var(--apx-toast-warning-bg, #ffc107); border-color: rgba(102, 77, 3, 0.6); }\r\n.APX-toast--danger .APX-toast__progress-pause { background: var(--apx-toast-danger-bg, #dc3545); border-color: rgba(0, 0, 0, 0.35); }\r\n.APX-toast__progress-pause:hover { opacity: 1; }\r\n.APX-toast__progress-pause:focus { outline: 2px solid rgba(0,0,0,.4); outline-offset: -2px; }\r\n.APX-toast__progress-pause svg {\r\n    width: 10px;\r\n    height: 10px;\r\n    display: block;\r\n}\r\n/* Extra top/bottom padding when progress bar is present (default content padding 10px + bar height) */\r\n.APX-toast--has-progress-top { padding-top: calc(10px + var(--apx-toast-progress-height, 4px)); }\r\n.APX-toast--has-progress-bottom { padding-bottom: calc(10px + var(--apx-toast-progress-height, 4px)); }\r\n/* Reserve space for stacking when pause button is present (button extends outside toast corner) */\r\n.APX-toast--has-progress-top.APX-toast--has-progress-pause { margin-top: calc(var(--apx-toast-progress-pause-size, 18px) / 2); }\r\n.APX-toast--has-progress-bottom.APX-toast--has-progress-pause { margin-bottom: calc(var(--apx-toast-progress-pause-size, 18px) / 2); }\r\n\r\n/* Animations */\r\n.APX-toast--enter { opacity: 0; transform: translateY(8px); }\r\n.APX-toast--enter.APX-toast--enter-active { opacity: 1; transform: translateY(0); }\r\n.APX-toast--exit { opacity: 1; transform: translateY(0); }\r\n.APX-toast--exit.APX-toast--exit-active { opacity: 0; transform: translateY(8px); }\r\n\r\n\r\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1659,6 +1744,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
  * @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
  */
 
 /**
@@ -1673,6 +1763,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
  * @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).
  */
 
 /**
@@ -1730,7 +1821,8 @@ var DEFAULT_CONFIG = {
   gap: 8,
   dedupe: false,
   containerClass: '',
-  offset: 0
+  offset: 0,
+  progress: false
 };
 
 /**
@@ -1746,6 +1838,117 @@ 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) {
+  var pos = progressOpt.position;
+  var showPauseButton = progressOpt.pauseButton === true;
+  var wrap = createEl('div', "APX-toast__progress APX-toast__progress--".concat(pos));
+  var track = createEl('div', 'APX-toast__progress-track');
+  var 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);
+  var 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: wrap,
+    bar: bar,
+    pauseBtn: 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--".concat(pos));
+  var 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) {
+  var 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
@@ -2016,6 +2219,15 @@ var ToastManager = /*#__PURE__*/function () {
         closeBtn.type = 'button';
         toastEl.appendChild(closeBtn);
       }
+      var progressWrap = null;
+      var progressBarEl = null;
+      var progressPauseBtn = null;
+      if (options.progress.enable && options.durationMs > 0) {
+        var created = createProgressBlock(toastEl, contentEl, closeBtn, options.progress);
+        progressWrap = created.wrap;
+        progressBarEl = created.bar;
+        progressPauseBtn = created.pauseBtn;
+      }
 
       // Get or create container for this specific position
       var container = null;
@@ -2193,6 +2405,8 @@ var ToastManager = /*#__PURE__*/function () {
       var remaining = options.durationMs;
       var timerId = null;
       var startTs = null;
+      var userPaused = false;
+      var progressRafId = null;
       var handlers = {
         click: new Set(),
         close: new Set()
@@ -2203,6 +2417,19 @@ var ToastManager = /*#__PURE__*/function () {
         timerId = window.setTimeout(function () {
           return ref.close('timeout');
         }, remaining);
+        if (progressBarEl) {
+          var tick = function tick() {
+            if (timerId == null || startTs == null) return;
+            var elapsed = Date.now() - startTs;
+            var remainingMs = Math.max(0, remaining - elapsed);
+            var durationMs = options.durationMs;
+            var pct = durationMs > 0 ? Math.max(0, Math.min(100, remainingMs / durationMs * 100)) : 0;
+            progressBarEl.style.width = "".concat(pct, "%");
+            progressBarEl.setAttribute('aria-valuenow', String(Math.round(pct)));
+            progressRafId = requestAnimationFrame(tick);
+          };
+          progressRafId = requestAnimationFrame(tick);
+        }
       };
       var pauseTimer = function pauseTimer() {
         if (timerId != null) {
@@ -2210,6 +2437,21 @@ var ToastManager = /*#__PURE__*/function () {
           timerId = null;
           if (startTs != null) remaining -= Date.now() - startTs;
         }
+        if (progressRafId != null) {
+          cancelAnimationFrame(progressRafId);
+          progressRafId = null;
+        }
+      };
+      var attachProgressPauseHandler = function attachProgressPauseHandler(btn) {
+        btn.addEventListener('click', function (ev) {
+          ev.stopPropagation();
+          userPaused = !userPaused;
+          if (userPaused) pauseTimer();else startTimer();
+          var label = userPaused ? 'Reprendre' : 'Pause';
+          btn.setAttribute('aria-label', label);
+          btn.setAttribute('title', label);
+          btn.innerHTML = getProgressPauseResumeIconSVG(userPaused); // paused = resume (triangle)
+        });
       };
 
       /** @type {ToastRef} */
@@ -2239,9 +2481,34 @@ var ToastManager = /*#__PURE__*/function () {
             if (options.className) (_toastEl$classList = toastEl.classList).remove.apply(_toastEl$classList, _toConsumableArray(options.className.split(' ').filter(Boolean)));
             if (merged.className) (_toastEl$classList2 = toastEl.classList).add.apply(_toastEl$classList2, _toConsumableArray(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) {
+            var _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();
         },
@@ -2278,7 +2545,10 @@ var ToastManager = /*#__PURE__*/function () {
         var cleanup = function cleanup(reason) {
           if (!toastEl) return;
           pauseTimer();
-
+          if (progressRafId != null) {
+            cancelAnimationFrame(progressRafId);
+            progressRafId = null;
+          }
           // Cleanup position listeners and restore styles
           if (positionCleanup) {
             positionCleanup();
@@ -2333,12 +2603,13 @@ var ToastManager = /*#__PURE__*/function () {
       // Hover pause
       toastEl.addEventListener('mouseenter', pauseTimer);
       toastEl.addEventListener('mouseleave', function () {
-        return startTimer();
+        if (!userPaused) startTimer();
       });
       if (closeBtn) closeBtn.addEventListener('click', function (ev) {
         ev.stopPropagation();
         ref.close('close');
       });
+      if (progressPauseBtn) attachProgressPauseHandler(progressPauseBtn);
 
       // Track
       this.open.push(ref);
@@ -2410,6 +2681,7 @@ var ToastManager = /*#__PURE__*/function () {
       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;
     }