@appius-fr/apx 2.5.0 → 2.5.2

package/dist/APX.standalone.js

@@ -1612,7 +1612,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   toast: () => (/* binding */ toast)
 /* harmony export */ });
 /* harmony import */ var _css_toast_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css/toast.css */ "./modules/toast/css/toast.css");
-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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -1627,13 +1626,30 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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); }
 // Minimal, framework-agnostic ToastManager for APX
 // ESM-first, no side effects on import. DOM only when used.
 
 
+/**
+ * @typedef {Object} PositionObject
+ * @property {'sticky'|'relative'|'anchored'} [type]
+ * @property {string} [x]
+ * @property {string} [y]
+ * @property {HTMLElement} [element]
+ * @property {'top'|'right'|'bottom'|'left'|'above'|'below'|'before'|'after'} [placement]
+ * @property {string} [gap]
+ * @property {boolean} [useNativeCSS]
+ */
+
+/**
+ * @typedef {string|PositionObject} Position
+ */
+
 /**
  * @typedef {Object} ToastConfig
- * @property {'bottom-right'|'bottom-left'|'top-right'|'top-left'} [position]
+ * @property {Position} [position]
+ * @property {'up'|'down'|'auto'} [flow] Flow direction for stacking toasts. 'auto' determines based on position. Default: 'auto'
  * @property {number} [maxToasts]
  * @property {number} [defaultDurationMs]
  * @property {number} [zIndex]
@@ -1642,6 +1658,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * @property {boolean} [dedupe]
  * @property {string} [containerClass]
  * @property {number} [offset]
+ * @property {string} [id]
  */
 
 /**
@@ -1654,6 +1671,8 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * @property {(ref: ToastRef, ev: MouseEvent) => void} [onClick]
  * @property {(ref: ToastRef, reason: 'timeout'|'close'|'api'|'overflow') => void} [onClose]
  * @property {string} [className]
+ * @property {Position} [position]
+ * @property {'up'|'down'|'auto'} [flow] Flow direction for stacking toasts. 'auto' determines based on position. Default: 'auto'
  */
 
 /**
@@ -1668,6 +1687,40 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  */
 
 var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+// Shared container cache: Map<position, HTMLElement>
+// Containers are shared between managers with the same position
+var _containerCache = new Map();
+
+// Garbage collection: cleanup empty unmanaged containers after a delay
+var GC_DELAY_MS = 20000; // 20 seconds
+var _gcTimeoutId = null;
+
+// Wrapper for all toast containers (keeps DOM clean)
+var _toastWrapper = null;
+
+/**
+ * Get or create the toast containers wrapper
+ * @returns {HTMLElement|null}
+ */
+function getToastWrapper() {
+  if (!isBrowser) return null;
+  if (!_toastWrapper) {
+    _toastWrapper = document.querySelector('.APX-toast-wrapper');
+    if (!_toastWrapper) {
+      _toastWrapper = createEl('div', 'APX-toast-wrapper');
+      _toastWrapper.style.position = 'fixed';
+      _toastWrapper.style.top = '0';
+      _toastWrapper.style.left = '0';
+      _toastWrapper.style.width = '0';
+      _toastWrapper.style.height = '0';
+      _toastWrapper.style.pointerEvents = 'none';
+      _toastWrapper.style.zIndex = '10000'; // Below containers but above most content
+      document.body.appendChild(_toastWrapper);
+    }
+  }
+  return _toastWrapper;
+}
 var DEFAULT_CONFIG = {
   position: 'bottom-right',
   maxToasts: 5,
@@ -1693,6 +1746,194 @@ function createEl(tag, classNames) {
   return el;
 }
 
+/**
+ * Normalize placement synonyms to CSS values
+ * @param {string} placement
+ * @returns {'top'|'right'|'bottom'|'left'}
+ */
+function normalizePlacement(placement) {
+  var synonyms = {
+    'above': 'top',
+    'below': 'bottom',
+    'before': 'left',
+    'after': 'right'
+  };
+  return synonyms[placement] || placement;
+}
+
+/**
+ * Determine flow direction based on position
+ * @param {Position} position
+ * @returns {'up'|'down'}
+ */
+function determineFlow(position) {
+  if (typeof position === 'string') {
+    // String positions: top = up, bottom = down
+    if (position.includes('top')) return 'up';
+    if (position.includes('bottom')) return 'down';
+    return 'down'; // default
+  }
+
+  if (_typeof(position) === 'object' && position !== null) {
+    var type = position.type || (position.x || position.y ? 'sticky' : null);
+    if (type === 'sticky' || !type && (position.x || position.y)) {
+      // Sticky: determine based on y coordinate
+      if (position.y !== undefined) {
+        // If y starts with '-' or is a small value, likely top (up)
+        // If y is a large value or percentage, likely bottom (down)
+        if (position.y.startsWith('-')) {
+          // Negative = from bottom, so flow down
+          return 'down';
+        }
+        var num = parseFloat(position.y);
+        if (!isNaN(num)) {
+          // If y < 50% of viewport height, likely top (up)
+          // Otherwise likely bottom (down)
+          if (position.y.includes('%')) {
+            return num < 50 ? 'up' : 'down';
+          }
+          // For px values, assume < 400px is top (up)
+          return num < 400 ? 'up' : 'down';
+        }
+      }
+      return 'down'; // default
+    }
+
+    if (type === 'anchored' && position.placement) {
+      // Anchored: placement determines flow
+      var placement = normalizePlacement(position.placement);
+      if (placement === 'top' || placement === 'above') return 'up';
+      if (placement === 'bottom' || placement === 'below') return 'down';
+      // For left/right, default to down
+      return 'down';
+    }
+    if (type === 'relative') {
+      // Relative: determine based on y offset
+      if (position.y !== undefined) {
+        var _num = parseFloat(position.y);
+        if (!isNaN(_num)) {
+          // Negative y = above element = flow up
+          // Positive y = below element = flow down
+          return _num < 0 ? 'up' : 'down';
+        }
+      }
+      return 'down'; // default
+    }
+  }
+
+  return 'down'; // default
+}
+
+/**
+ * Garbage collection: remove empty unmanaged containers
+ */
+function cleanupEmptyContainers() {
+  if (!isBrowser) return;
+  var containers = document.querySelectorAll('.APX-toast-container:not([data-apx-toast-managed="true"])');
+  containers.forEach(function (container) {
+    // Check if container is empty (no toasts)
+    if (container.children.length === 0) {
+      var positionKey = container.getAttribute('data-apx-toast-position');
+      if (positionKey) {
+        _containerCache["delete"](positionKey);
+      }
+      container.remove();
+    }
+  });
+
+  // Clean up wrapper if it's empty (all containers removed)
+  if (_toastWrapper && _toastWrapper.children.length === 0) {
+    _toastWrapper.remove();
+    _toastWrapper = null;
+  }
+  _gcTimeoutId = null;
+}
+
+/**
+ * Schedule garbage collection for empty unmanaged containers
+ */
+function scheduleGarbageCollection() {
+  if (_gcTimeoutId) {
+    clearTimeout(_gcTimeoutId);
+  }
+  _gcTimeoutId = setTimeout(cleanupEmptyContainers, GC_DELAY_MS);
+}
+
+/**
+ * Find all scrollable parent elements
+ * @param {HTMLElement} element
+ * @returns {HTMLElement[]}
+ */
+function findScrollableParents(element) {
+  var scrollables = [];
+  var current = element.parentElement;
+  while (current && current !== document.body && current !== document.documentElement) {
+    var style = window.getComputedStyle(current);
+    var overflow = style.overflow + style.overflowY + style.overflowX;
+    if (overflow.includes('scroll') || overflow.includes('auto')) {
+      scrollables.push(current);
+    }
+    current = current.parentElement;
+  }
+  return scrollables;
+}
+
+/**
+ * Hash an element to create a unique identifier
+ * @param {HTMLElement} el
+ * @returns {string}
+ */
+function hashElement(el) {
+  var rect = el.getBoundingClientRect();
+  var str = "".concat(el.tagName, "_").concat(rect.left, "_").concat(rect.top, "_").concat(rect.width, "_").concat(rect.height);
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    var _char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + _char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+
+  return Math.abs(hash).toString(36);
+}
+
+/**
+ * Serialize position options into a unique key
+ * @param {Position} position
+ * @returns {string}
+ */
+function serializePosition(position) {
+  if (typeof position === 'string') {
+    return "s:".concat(position);
+  }
+  if (_typeof(position) === 'object' && position !== null) {
+    var parts = [];
+
+    // Type (default: sticky if x/y provided)
+    var type = position.type || (position.x || position.y ? 'sticky' : null);
+    if (type) parts.push("t:".concat(type));
+
+    // Coordinates
+    if (position.x !== undefined) parts.push("x:".concat(position.x));
+    if (position.y !== undefined) parts.push("y:".concat(position.y));
+
+    // For relative/anchored: use element ID or hash
+    if (position.element) {
+      var _position$element$dat;
+      var elementId = position.element.id || ((_position$element$dat = position.element.dataset) === null || _position$element$dat === void 0 ? void 0 : _position$element$dat.apxToastAnchorId) || "el_".concat(hashElement(position.element));
+      parts.push("el:".concat(elementId));
+    }
+    if (position.placement) {
+      // Normalize placement for serialization (use CSS values)
+      var normalized = normalizePlacement(position.placement);
+      parts.push("p:".concat(normalized));
+    }
+    if (position.gap !== undefined) parts.push("g:".concat(position.gap));
+    if (position.useNativeCSS) parts.push("native:true");
+    return "o:".concat(parts.join('|'));
+  }
+  return 's:bottom-right';
+}
+
 /**
  * ToastManager class
  */
@@ -1747,9 +1988,17 @@ var ToastManager = /*#__PURE__*/function () {
         _ref.update(options);
         return _ref;
       }
+
+      // Determine position and flow for this toast (options take precedence over config)
+      var position = options.position || this.config.position || 'bottom-right';
+      var flow = options.flow !== undefined ? options.flow : this.config.flow !== undefined ? this.config.flow : 'auto';
+      var finalFlow = flow === 'auto' ? determineFlow(position) : flow;
+
+      // Ensure default container is set (for backward compatibility)
       this.ensureContainer();
       var toastEl = createEl('div', "APX-toast APX-toast--".concat(options.type));
       toastEl.setAttribute('role', 'status');
+      // Priority: options.id > config.id > auto-generated
       var toastId = options.id || "t_".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2, 8));
       toastEl.dataset.toastId = toastId;
       if (options.className) toastEl.className += " ".concat(options.className);
@@ -1767,7 +2016,172 @@ var ToastManager = /*#__PURE__*/function () {
         closeBtn.type = 'button';
         toastEl.appendChild(closeBtn);
       }
-      this.container.appendChild(toastEl);
+
+      // Get or create container for this specific position
+      var container = null;
+      var positionUpdateFn = null;
+      var positionCleanup = null;
+      var originalElementStyle = null;
+      if (position && _typeof(position) === 'object' && position !== null) {
+        var type = position.type || (position.x || position.y ? 'sticky' : null);
+        if (position.useNativeCSS && (type === 'relative' || type === 'anchored') && position.element) {
+          // useNativeCSS: true - create container in target element using native CSS
+          var targetEl = position.element;
+          originalElementStyle = targetEl.style.position;
+          targetEl.style.position = 'relative';
+
+          // Create a container for stacking toasts (reuse if exists)
+          var positionKey = serializePosition(position);
+          var nativeContainer = targetEl.querySelector("[data-apx-toast-position=\"".concat(positionKey, "\"]"));
+          if (!nativeContainer) {
+            nativeContainer = createEl('div', 'APX-toast-container APX-toast-container-native');
+            nativeContainer.setAttribute('data-apx-toast-position', positionKey);
+            nativeContainer.style.position = 'absolute';
+            nativeContainer.style.zIndex = String(this.config.zIndex);
+            nativeContainer.style.gap = "".concat(this.config.gap, "px");
+            nativeContainer.setAttribute('aria-live', String(this.config.ariaLive));
+            nativeContainer.style.flexDirection = finalFlow === 'up' ? 'column-reverse' : 'column';
+
+            // Apply positioning to container
+            if (type === 'relative') {
+              // Relative: use x/y directly
+              if (position.x !== undefined) {
+                if (position.x.startsWith('-')) {
+                  nativeContainer.style.right = position.x.substring(1);
+                } else {
+                  nativeContainer.style.left = position.x;
+                }
+              }
+              if (position.y !== undefined) {
+                if (position.y.startsWith('-')) {
+                  nativeContainer.style.bottom = position.y.substring(1);
+                } else {
+                  nativeContainer.style.top = position.y;
+                }
+              }
+            } else if (type === 'anchored') {
+              // Anchored: position outside the element using 100% (element size) + gap
+              var placement = normalizePlacement(position.placement);
+              var gap = position.gap || '1em';
+              switch (placement) {
+                case 'top':
+                  nativeContainer.style.bottom = "calc(100% + ".concat(gap, ")");
+                  nativeContainer.style.left = '0';
+                  break;
+                case 'bottom':
+                  nativeContainer.style.top = "calc(100% + ".concat(gap, ")");
+                  nativeContainer.style.left = '0';
+                  break;
+                case 'left':
+                  nativeContainer.style.right = "calc(100% + ".concat(gap, ")");
+                  nativeContainer.style.top = '0';
+                  break;
+                case 'right':
+                  nativeContainer.style.left = "calc(100% + ".concat(gap, ")");
+                  nativeContainer.style.top = '0';
+                  break;
+              }
+            }
+            targetEl.appendChild(nativeContainer);
+          } else {
+            // Update flow direction if container exists
+            nativeContainer.style.flexDirection = finalFlow === 'up' ? 'column-reverse' : 'column';
+          }
+          container = nativeContainer;
+          positionCleanup = function positionCleanup() {
+            if (targetEl && targetEl.parentElement) {
+              targetEl.style.position = originalElementStyle || '';
+              // Remove native container if empty
+              if (nativeContainer && nativeContainer.children.length === 0) {
+                var _positionKey = nativeContainer.getAttribute('data-apx-toast-position');
+                if (_positionKey) {
+                  _containerCache["delete"](_positionKey);
+                }
+                nativeContainer.remove();
+              }
+            }
+          };
+        } else {
+          // Default: get or create container for this position
+          container = this.getContainerForPosition(position, finalFlow);
+          var updateContainerPosition = function updateContainerPosition() {
+            var styles = _this.calculatePosition(position, container);
+            Object.assign(container.style, styles);
+          };
+          updateContainerPosition();
+
+          // For relative/anchored, listen to scroll/resize
+          if ((type === 'relative' || type === 'anchored') && position.element) {
+            var rafId = null;
+            var lastUpdate = 0;
+            var throttleMs = 16; // ~60fps
+
+            var throttledUpdate = function throttledUpdate() {
+              var now = Date.now();
+              if (now - lastUpdate < throttleMs) {
+                if (rafId) cancelAnimationFrame(rafId);
+                rafId = requestAnimationFrame(function () {
+                  updateContainerPosition();
+                  lastUpdate = Date.now();
+                });
+              } else {
+                updateContainerPosition();
+                lastUpdate = now;
+              }
+            };
+
+            // Find all scrollable parents
+            var scrollableParents = findScrollableParents(position.element);
+
+            // Listen to scroll on window and all scrollable parents
+            window.addEventListener('scroll', throttledUpdate, {
+              passive: true
+            });
+            window.addEventListener('resize', throttledUpdate, {
+              passive: true
+            });
+
+            // Listen to scroll on all scrollable parent elements
+            scrollableParents.forEach(function (parent) {
+              parent.addEventListener('scroll', throttledUpdate, {
+                passive: true
+              });
+            });
+
+            // Watch for element removal
+            var observer = new MutationObserver(function () {
+              if (!position.element.parentElement) {
+                ref.close('api');
+              }
+            });
+            observer.observe(document.body, {
+              childList: true,
+              subtree: true
+            });
+            positionUpdateFn = updateContainerPosition;
+            positionCleanup = function positionCleanup() {
+              window.removeEventListener('scroll', throttledUpdate);
+              window.removeEventListener('resize', throttledUpdate);
+              scrollableParents.forEach(function (parent) {
+                parent.removeEventListener('scroll', throttledUpdate);
+              });
+              observer.disconnect();
+              if (rafId) cancelAnimationFrame(rafId);
+            };
+          }
+        }
+      } else {
+        // String position - get or create container for this position
+        container = this.getContainerForPosition(position, finalFlow);
+      }
+
+      // Append toast to the appropriate container
+      if (container) {
+        container.appendChild(toastEl);
+      } else {
+        // Fallback to default container
+        this.container.appendChild(toastEl);
+      }
 
       // Enter animation
       toastEl.classList.add('APX-toast--enter');
@@ -1864,6 +2278,13 @@ var ToastManager = /*#__PURE__*/function () {
         var cleanup = function cleanup(reason) {
           if (!toastEl) return;
           pauseTimer();
+
+          // Cleanup position listeners and restore styles
+          if (positionCleanup) {
+            positionCleanup();
+            positionCleanup = null;
+          }
+
           // If overflow, remove immediately to enforce hard cap
           if (reason === 'overflow') {
             if (toastEl.parentElement) toastEl.parentElement.removeChild(toastEl);
@@ -1885,6 +2306,9 @@ var ToastManager = /*#__PURE__*/function () {
             var idx = _this.open.indexOf(ref);
             if (idx >= 0) _this.open.splice(idx, 1);
             _this.idToRef["delete"](toastId);
+
+            // Schedule garbage collection for unmanaged containers
+            scheduleGarbageCollection();
             finish(reason);
           };
           toastEl.addEventListener('transitionend', removeEl);
@@ -1984,42 +2408,245 @@ var ToastManager = /*#__PURE__*/function () {
       if (!o.type) o.type = 'info';
       if (typeof o.dismissible !== 'boolean') o.dismissible = true;
       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;
       return o;
     }
+
+    /**
+     * Find or create a container for a specific position
+     * @param {Position} position
+     * @param {'up'|'down'} [flow] Flow direction (already determined, not 'auto')
+     * @param {boolean} [managed] Whether this container is managed by a manager (default: false)
+     * @returns {HTMLElement|null}
+     */
+  }, {
+    key: "getContainerForPosition",
+    value: function getContainerForPosition(position, flow) {
+      var managed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      if (!isBrowser) return null;
+      var positionKey = serializePosition(position);
+
+      // Flow should already be determined ('up' or 'down'), but fallback to auto if needed
+      var finalFlow = flow && flow !== 'auto' ? flow : determineFlow(position);
+
+      // 1. Check memory cache
+      var c = _containerCache.get(positionKey);
+
+      // 2. If not in cache, search in DOM by data attribute
+      if (!c && isBrowser) {
+        c = document.querySelector("[data-apx-toast-position=\"".concat(positionKey, "\"]"));
+        if (c) {
+          _containerCache.set(positionKey, c);
+        }
+      }
+
+      // 3. If still not found, create new container
+      if (!c) {
+        c = createEl('div', 'APX-toast-container');
+        c.setAttribute('data-apx-toast-position', positionKey);
+
+        // Mark as managed if created by a manager
+        if (managed) {
+          c.setAttribute('data-apx-toast-managed', 'true');
+        }
+
+        // Determine position class (for CSS)
+        var posClass = typeof position === 'string' ? position : position.type || 'bottom-right';
+        c.classList.add("APX-toast-container--".concat(posClass));
+        c.setAttribute('aria-live', String(this.config.ariaLive));
+        c.style.zIndex = String(this.config.zIndex);
+        c.style.gap = "".concat(this.config.gap, "px");
+
+        // Apply flow direction
+        c.style.flexDirection = finalFlow === 'up' ? 'column-reverse' : 'column';
+
+        // Apply position styles if object position
+        if (_typeof(position) === 'object' && position !== null) {
+          c.style.position = 'fixed';
+          var styles = this.calculatePosition(position, c);
+          Object.assign(c.style, styles);
+        }
+
+        // Append to wrapper for clean DOM organization
+        var wrapper = getToastWrapper();
+        if (wrapper) {
+          wrapper.appendChild(c);
+        } else {
+          document.body.appendChild(c);
+        }
+        _containerCache.set(positionKey, c);
+      } else {
+        // Update flow direction if container exists (may be shared)
+        c.style.flexDirection = finalFlow === 'up' ? 'column-reverse' : 'column';
+
+        // If container exists and is now managed, mark it
+        if (managed && !c.hasAttribute('data-apx-toast-managed')) {
+          c.setAttribute('data-apx-toast-managed', 'true');
+        }
+      }
+      return c;
+    }
   }, {
     key: "ensureContainer",
     value: function ensureContainer() {
       if (this.container || !isBrowser) return;
-      var c = createEl('div', 'APX-toast-container');
-      var pos = this.config.position || 'bottom-right';
-      c.classList.add("APX-toast-container--".concat(pos));
-      if (this.config.containerClass) c.classList.add(this.config.containerClass);
-      c.style.zIndex = String(this.config.zIndex);
-      c.style.gap = "".concat(this.config.gap, "px");
-      if (this.config.offset) {
-        var offset = "".concat(this.config.offset, "px");
-        if (pos.includes('bottom')) c.style.bottom = offset;else c.style.top = offset;
-        if (pos.includes('right')) c.style.right = offset;else c.style.left = offset;
-      }
-      c.setAttribute('aria-live', String(this.config.ariaLive));
-      document.body.appendChild(c);
-      this.container = c;
+      var position = this.config.position || 'bottom-right';
+      var flow = this.config.flow !== undefined ? this.config.flow : 'auto';
+      // Containers created by ensureContainer are managed
+      this.container = this.getContainerForPosition(position, flow, true);
       this.applyContainerConfig();
     }
   }, {
     key: "applyContainerConfig",
     value: function applyContainerConfig() {
-      var _this$container$class;
+      var _this2 = this;
       if (!this.container) return;
+      var position = this.config.position || 'bottom-right';
+      var pos = typeof position === 'string' ? position : position.type || 'bottom-right';
+
+      // Apply styles (these may be overridden by other managers sharing the container)
       this.container.style.zIndex = String(this.config.zIndex);
       this.container.style.gap = "".concat(this.config.gap, "px");
       this.container.setAttribute('aria-live', String(this.config.ariaLive));
-      // Update position class
-      var posClasses = ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(function (p) {
-        return "APX-toast-container--".concat(p);
-      });
-      (_this$container$class = this.container.classList).remove.apply(_this$container$class, _toConsumableArray(posClasses));
-      this.container.classList.add("APX-toast-container--".concat(this.config.position));
+
+      // Update position class (only for string positions)
+      if (typeof position === 'string') {
+        var _this$container$class;
+        var posClasses = ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(function (p) {
+          return "APX-toast-container--".concat(p);
+        });
+        (_this$container$class = this.container.classList).remove.apply(_this$container$class, _toConsumableArray(posClasses));
+        this.container.classList.add("APX-toast-container--".concat(pos));
+      }
+
+      // Apply container class if specified
+      if (this.config.containerClass) {
+        this.config.containerClass.split(' ').filter(Boolean).forEach(function (cls) {
+          _this2.container.classList.add(cls);
+        });
+      }
+
+      // Apply offset (only for string positions)
+      if (typeof position === 'string') {
+        if (this.config.offset) {
+          var offset = "".concat(this.config.offset, "px");
+          if (pos.includes('bottom')) this.container.style.bottom = offset;else this.container.style.top = offset;
+          if (pos.includes('right')) this.container.style.right = offset;else this.container.style.left = offset;
+        } else {
+          // Reset offset if not specified
+          if (pos.includes('bottom')) this.container.style.bottom = '';else this.container.style.top = '';
+          if (pos.includes('right')) this.container.style.right = '';else this.container.style.left = '';
+        }
+      } else if (_typeof(position) === 'object' && position !== null) {
+        // For object positions, ensure container has position: fixed
+        this.container.style.position = 'fixed';
+      }
+    }
+
+    /**
+     * Calculate position for a container based on position config
+     * @param {Position} position
+     * @param {HTMLElement} containerEl
+     * @returns {{left?: string, top?: string, right?: string, bottom?: string}}
+     */
+  }, {
+    key: "calculatePosition",
+    value: function calculatePosition(position, containerEl) {
+      if (typeof position === 'string') {
+        // String positions are handled by container CSS
+        return {};
+      }
+      if (_typeof(position) === 'object' && position !== null) {
+        var type = position.type || (position.x || position.y ? 'sticky' : null);
+        if (type === 'sticky' || !type && (position.x || position.y)) {
+          // Sticky: fixed position relative to viewport
+          var styles = {};
+          if (position.x !== undefined) {
+            if (position.x.startsWith('-')) {
+              styles.right = position.x.substring(1);
+            } else {
+              styles.left = position.x;
+            }
+          }
+          if (position.y !== undefined) {
+            if (position.y.startsWith('-')) {
+              styles.bottom = position.y.substring(1);
+            } else {
+              styles.top = position.y;
+            }
+          }
+          return styles;
+        }
+        if (type === 'relative' && position.element) {
+          // Relative: position relative to element with x/y offset
+          // Use fixed positioning, so getBoundingClientRect() is relative to viewport
+          var rect = position.element.getBoundingClientRect();
+
+          // Parse x/y offsets (can be px, em, etc.)
+          var parseOffset = function parseOffset(val) {
+            if (!val) return 0;
+            var num = parseFloat(val);
+            if (val.includes('em')) {
+              // Convert em to px (approximate: 1em = 16px)
+              return num * 16;
+            }
+            return num;
+          };
+          var offsetX = parseOffset(position.x || '0');
+          var offsetY = parseOffset(position.y || '0');
+          var _styles = {
+            left: "".concat(rect.left + offsetX, "px"),
+            top: "".concat(rect.top + offsetY, "px")
+          };
+          return _styles;
+        }
+        if (type === 'anchored' && position.element) {
+          // Anchored: position relative to element with placement
+          var _rect = position.element.getBoundingClientRect();
+          var gap = position.gap || '1em';
+
+          // Parse gap (can be px, em, etc.)
+          var parseGap = function parseGap(val) {
+            var num = parseFloat(val);
+            if (val.includes('em')) {
+              return num * 16; // Approximate: 1em = 16px
+            }
+
+            return num;
+          };
+          var gapPx = parseGap(gap);
+          var _styles2 = {};
+
+          // Normalize placement synonyms (above/below/before/after) to CSS values
+          var placement = normalizePlacement(position.placement);
+          switch (placement) {
+            case 'top':
+              // Toast above element: bottom of toast = top of element - gap
+              // bottom = viewport height - (element top - gap) = viewport height - element top + gap
+              _styles2.bottom = "".concat(window.innerHeight - _rect.top + gapPx, "px");
+              _styles2.left = "".concat(_rect.left, "px");
+              break;
+            case 'bottom':
+              // Toast below element: top of toast = bottom of element + gap
+              _styles2.top = "".concat(_rect.bottom + gapPx, "px");
+              _styles2.left = "".concat(_rect.left, "px");
+              break;
+            case 'left':
+              // Toast to the left: right of toast = left of element - gap
+              _styles2.right = "".concat(window.innerWidth - _rect.left + gapPx, "px");
+              _styles2.top = "".concat(_rect.top, "px");
+              break;
+            case 'right':
+              // Toast to the right: left of toast = right of element + gap
+              _styles2.left = "".concat(_rect.right + gapPx, "px");
+              _styles2.top = "".concat(_rect.top, "px");
+              break;
+          }
+          return _styles2;
+        }
+      }
+      return {};
     }
   }]);
   return ToastManager;