@appius-fr/apx 2.6.0 → 2.6.2

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;
     }
 
@@ -2784,12 +3056,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(apx) {
   /**
    * Convertit le premier formulaire sélectionné en objet JSON
+   * @param {Object} [options] - Options passées à packFormToJSON (ex. { numericKeysAlwaysArray: true })
    * @returns {Object} L'objet JSON résultant
    * @throws {Error} Si aucun formulaire n'est trouvé ou si le premier élément n'est pas un formulaire
    * @example
    * const data = APX('form.myformclass').pack();
+   * const dataLegacy = APX('form').pack({ numericKeysAlwaysArray: true });
    */
-  apx.pack = function () {
+  apx.pack = function (options) {
     var firstElement = this.first();
     if (!firstElement) {
       throw new Error('No element found');
@@ -2797,7 +3071,7 @@ __webpack_require__.r(__webpack_exports__);
     if (firstElement.tagName !== 'FORM') {
       throw new Error('Element is not a form');
     }
-    return (0,_packToJson_mjs__WEBPACK_IMPORTED_MODULE_0__.packFormToJSON)(firstElement);
+    return (0,_packToJson_mjs__WEBPACK_IMPORTED_MODULE_0__.packFormToJSON)(firstElement, options);
   };
   return apx;
 }
@@ -2816,6 +3090,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   packFormToJSON: () => (/* binding */ packFormToJSON)
 /* harmony export */ });
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
@@ -2826,14 +3104,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 /**
  * Convertit un formulaire HTML en objet JSON
  * @param {HTMLFormElement} form - Le formulaire à convertir
+ * @param {Object} [options] - Options de conversion
+ * @param {boolean} [options.numericKeysAlwaysArray=false] - Si true, toute clé numérique est traitée comme index de tableau (comportement d'avant 2.6.2). Sinon, heuristique : tableau seulement si indices denses 0,1,2,…,n.
  * @returns {Object} L'objet JSON résultant
  * @throws {TypeError} Si form n'est pas un HTMLFormElement
  */
 var packFormToJSON = function packFormToJSON(form) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   // Validation de l'entrée
   if (!form || !(form instanceof HTMLFormElement)) {
     throw new TypeError('packFormToJSON expects an HTMLFormElement');
   }
+  var numericKeysAlwaysArray = options.numericKeysAlwaysArray === true;
   var formData = new FormData(form);
   var jsonData = {};
 
@@ -2872,6 +3154,7 @@ var packFormToJSON = function packFormToJSON(form) {
 
   var pathUsage = new Map(); // Map<pathString, PathUsage>
   var keyAnalysis = new Map(); // Map<basePath, {hasNumeric: boolean, hasString: boolean}>
+  var numericIndicesByPath = new Map(); // Map<pathString, Set<number>> — indices under each parent path
   var allEntries = [];
 
   /**
@@ -2931,6 +3214,13 @@ var packFormToJSON = function packFormToJSON(form) {
         if (_part.type === 'key') {
           currentPath = currentPath ? "".concat(currentPath, "[").concat(_part.name, "]") : _part.name;
         } else if (_part.type === 'numeric') {
+          var _parentPath = currentPath;
+          var set = numericIndicesByPath.get(_parentPath);
+          if (!set) {
+            set = new Set();
+            numericIndicesByPath.set(_parentPath, set);
+          }
+          set.add(_part.index);
           currentPath = "".concat(currentPath, "[").concat(_part.index, "]");
         } else if (_part.type === 'array') {
           currentPath = "".concat(currentPath, "[]");
@@ -3054,6 +3344,36 @@ var packFormToJSON = function packFormToJSON(form) {
     return (analysis === null || analysis === void 0 ? void 0 : analysis.hasNumeric) && (analysis === null || analysis === void 0 ? void 0 : analysis.hasString);
   };
 
+  /**
+   * True if indices are exactly 0, 1, 2, ..., n (dense, sequential from 0).
+   * @param {number[]} indices - Sorted array of indices
+   * @returns {boolean}
+   */
+  var isDenseSequential = function isDenseSequential(indices) {
+    if (indices.length === 0) return false;
+    var sorted = _toConsumableArray(indices).sort(function (a, b) {
+      return a - b;
+    });
+    for (var j = 0; j < sorted.length; j++) {
+      if (sorted[j] !== j) return false;
+    }
+    return true;
+  };
+
+  /**
+   * True if numeric keys under this path should be treated as array indices.
+   * With numericKeysAlwaysArray: always true when path has numeric children.
+   * Otherwise: true only when indices are dense 0..n.
+   * @param {string} parentPath - Path to the container that has numeric children
+   * @returns {boolean}
+   */
+  var useArrayForNumericPath = function useArrayForNumericPath(parentPath) {
+    var set = numericIndicesByPath.get(parentPath);
+    if (!set || set.size === 0) return true;
+    if (numericKeysAlwaysArray) return true;
+    return isDenseSequential(_toConsumableArray(set));
+  };
+
   /**
    * Convertit un tableau en objet en préservant les indices numériques comme propriétés
    * @param {Array} arr - Le tableau à convertir
@@ -3156,8 +3476,9 @@ var packFormToJSON = function packFormToJSON(form) {
    * @param {*} value - La valeur à assigner
    * @param {Object} parent - Le conteneur parent
    * @param {string} basePath - Le chemin de base pour la détection de conflit
+   * @param {string} parentPath - Chemin du conteneur actuel (pour heuristique numeric)
    */
-  var processFinalValue = function processFinalValue(container, part, value, parent, basePath) {
+  var processFinalValue = function processFinalValue(container, part, value, parent, basePath, parentPath) {
     if (part.type === 'array') {
       var _container, _part$name, _container$_part$name;
       // Tableau explicite avec []
@@ -3168,13 +3489,18 @@ var packFormToJSON = function packFormToJSON(form) {
         container[part.name] = [container[part.name], value];
       }
     } else if (part.type === 'numeric') {
-      // Indice numérique final
       var index = part.index;
-      container = ensureArray(container, parent.key, parent.container);
-      while (container.length <= index) {
-        container.push(undefined);
+      var useArray = useArrayForNumericPath(parentPath);
+      if (useArray) {
+        container = ensureArray(container, parent.key, parent.container);
+        while (container.length <= index) {
+          container.push(undefined);
+        }
+        container[index] = value;
+      } else {
+        container = ensureObject(container, parent.key, parent.container, true);
+        container[index] = value;
       }
-      container[index] = value;
     } else {
       // Clé simple finale
       var conflict = hasConflict(basePath);
@@ -3218,30 +3544,26 @@ var packFormToJSON = function packFormToJSON(form) {
    */
   var processIntermediatePart = function processIntermediatePart(container, part, nextPart, parent, basePath, parts, i, key) {
     if (part.type === 'numeric') {
-      // Indice numérique : le container doit être un tableau ou un objet (selon conflit)
       var index = part.index;
-      var _conflict = hasConflict(basePath);
-      if (_conflict) {
+      var parentPath = buildPathString(parts.slice(0, i));
+      var useArray = useArrayForNumericPath(parentPath) && !hasConflict(basePath);
+      if (!useArray) {
         var _container2, _container2$index;
-        // Conflit : utiliser un objet (les indices seront des propriétés)
         container = ensureObject(container, parent.key, parent.container, true);
         (_container2$index = (_container2 = container)[index]) !== null && _container2$index !== void 0 ? _container2$index : _container2[index] = {};
         if (_typeof(container[index]) !== 'object' || container[index] === null) {
-          // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
           var pathParts = parts.slice(0, i + 1);
           var currentPath = buildPathString(pathParts);
           throw new Error("Cannot access property on primitive value. " + "Key \"".concat(key, "\" tries to access \"").concat(currentPath, "\" but it is already a ").concat(_typeof(container[index]), " value: ").concat(JSON.stringify(container[index]), ". ") + "This should have been detected during conflict detection phase.");
         }
       } else {
         var _container3, _container3$index;
-        // Pas de conflit : utiliser un tableau
         container = ensureArray(container, parent.key, parent.container);
         while (container.length <= index) {
           container.push(undefined);
         }
         (_container3$index = (_container3 = container)[index]) !== null && _container3$index !== void 0 ? _container3$index : _container3[index] = {};
         if (_typeof(container[index]) !== 'object' || container[index] === null) {
-          // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
           var _pathParts = parts.slice(0, i + 1);
           var _currentPath = buildPathString(_pathParts);
           throw new Error("Cannot access property on primitive value. " + "Key \"".concat(key, "\" tries to access \"").concat(_currentPath, "\" but it is already a ").concat(_typeof(container[index]), " value: ").concat(JSON.stringify(container[index]), ". ") + "This should have been detected during conflict detection phase.");
@@ -3317,8 +3639,8 @@ var packFormToJSON = function packFormToJSON(form) {
       var nextPart = i + 1 < parts.length ? parts[i + 1] : null;
       var parent = path[path.length - 1];
       if (isLast) {
-        // Dernière partie : assigner la valeur
-        processFinalValue(container, part, value, parent, basePath);
+        var parentPath = buildPathString(parts.slice(0, i));
+        processFinalValue(container, part, value, parent, basePath, parentPath);
       } else {
         // Partie intermédiaire : créer la structure
         var newContainer = processIntermediatePart(container, part, nextPart, parent, basePath, parts, i, key);