wj-elements 0.3.8 → 0.4.1

package/dist/wje-toast.js

@@ -4,7 +4,55 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import WJElement from "./wje-element.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Toast ]\n*/\n\n:host {\n    position: relative;\n    z-index: 9999;\n    width: 300px;\n    margin: 0.5rem 0;\n    display: none;\n}\n\n:host([open]) {\n    display: block;\n}\n\n.native-toast {\n    display: flex;\n    align-items: center;\n    padding: 1rem;\n    overflow: hidden;\n    margin: 0;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--wje-border-radius-large);\n    position: relative;\n\n    &.has-media slot[name='media'] {\n        flex: 0 0 1.5rem;\n        width: 1.5rem;\n        display: flex;\n        margin-right: 0.5rem;\n        justify-content: center;\n    }\n\n    .content {\n        font-size: var(--wje-font-size-small);\n        .headline {\n            font-size: var(--wje-font-size);\n            font-weight: var(--wje-font-weight-bold);\n        }\n    }\n\n    wje-button {\n        --wje-button-margin-inline: auto 0;\n        margin-left: auto !important;\n    }\n\n    .countdown {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 4px;\n        .countdown-bar {\n            height: 100%;\n        }\n    }\n}\n\n:host([position='top']) {\n    animation: slideDown 0.3s ease-out forwards;\n    top: 1rem;\n    left: auto;\n    right: auto;\n}\n\n:host::part(icon) {\n    margin-right: 0.5rem;\n}\n\n@keyframes slideDown {\n    0% {\n        transform: translateY(-100%);\n    }\n    100% {\n        transform: translateY(0);\n    }\n}\n\n/*PRIMARY*/\n:host([color='primary']) .native-toast {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .native-toast {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color='success']) .native-toast {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color='warning']) .native-toast {\n    background-color: var(--wje-color-warning-1);\n    color: var(--wje-color-warning-11);\n    border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color='danger']) .native-toast {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color='info']) .native-toast {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-11);\n    border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .native-toast {\n    background-color: var(--wje-color-contrast-2);\n    color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-3);\n}\n\n/*PRIMARY*/\n:host([color='primary']) .countdown-bar {\n    background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .countdown-bar {\n    background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color='success']) .countdown-bar {\n    background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color='warning']) .countdown-bar {\n    background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color='danger']) .countdown-bar {\n    background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color='info']) .countdown-bar {\n    background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .countdown-bar {\n    background-color: var(--wje-color-contrast-9);\n}\n";
+const styles = "/*\n[ WJ Toast ]\n*/\n\n:host {\n    --wje-toast-stack-z: 9999;\n    --wje-toast-stack-host-margin-top: 0.5rem;\n    --wje-toast-stack-host-margin-bottom: 0.5rem;\n    --wje-toast-stack-layout-duration: 0.2s;\n    --wje-toast-stack-visual-duration: 0.2s;\n    --wje-toast-stack-opacity: 1;\n    --wje-toast-stack-shift: 0px;\n    --wje-toast-enter-offset: 0px;\n    --wje-toast-stack-scale: 1;\n    --wje-toast-stack-origin: center top;\n    position: relative;\n    z-index: var(--wje-toast-stack-z);\n    width: 300px;\n    max-width: min(100%, calc(100vw - 1rem));\n    margin: var(--wje-toast-stack-host-margin-top) 0 var(--wje-toast-stack-host-margin-bottom);\n    display: none;\n    transition:\n        margin-top var(--wje-toast-stack-layout-duration) ease,\n        margin-bottom var(--wje-toast-stack-layout-duration) ease;\n}\n\n:host([open]) {\n    display: block;\n}\n\n.native-toast {\n    display: flex;\n    align-items: center;\n    padding: 1rem;\n    overflow: hidden;\n    margin: 0;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--wje-border-radius-large);\n    position: relative;\n    opacity: var(--wje-toast-stack-opacity);\n    transform: translateY(calc(var(--wje-toast-stack-shift) + var(--wje-toast-enter-offset))) scale(var(--wje-toast-stack-scale));\n    transform-origin: var(--wje-toast-stack-origin);\n    transition:\n        transform var(--wje-toast-stack-visual-duration) ease,\n        opacity var(--wje-toast-stack-visual-duration) ease;\n\n    &.has-media slot[name='media'] {\n        flex: 0 0 1.5rem;\n        width: 1.5rem;\n        display: flex;\n        margin-right: 0.5rem;\n        justify-content: center;\n    }\n\n    .content {\n        font-size: var(--wje-font-size-small);\n        .headline {\n            font-size: var(--wje-font-size);\n            font-weight: var(--wje-font-weight-bold);\n        }\n    }\n\n    wje-button {\n        --wje-button-margin-inline: auto 0;\n        margin-left: auto !important;\n    }\n\n    .countdown {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 4px;\n        .countdown-bar {\n            height: 100%;\n        }\n    }\n}\n\n:host([position='top']) {\n    animation: slideDown 0.3s ease-out forwards;\n    top: 1rem;\n    left: auto;\n    right: auto;\n}\n\n:host::part(icon) {\n    margin-right: 0.5rem;\n}\n\n@keyframes slideDown {\n    0% {\n        transform: translateY(-100%);\n    }\n    100% {\n        transform: translateY(0);\n    }\n}\n\n/*PRIMARY*/\n:host([color='primary']) .native-toast {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .native-toast {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color='success']) .native-toast {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color='warning']) .native-toast {\n    background-color: var(--wje-color-warning-1);\n    color: var(--wje-color-warning-11);\n    border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color='danger']) .native-toast {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color='info']) .native-toast {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-11);\n    border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .native-toast {\n    background-color: var(--wje-color-contrast-2);\n    color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-3);\n}\n\n/*PRIMARY*/\n:host([color='primary']) .countdown-bar {\n    background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .countdown-bar {\n    background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color='success']) .countdown-bar {\n    background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color='warning']) .countdown-bar {\n    background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color='danger']) .countdown-bar {\n    background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color='info']) .countdown-bar {\n    background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .countdown-bar {\n    background-color: var(--wje-color-contrast-9);\n}\n";
+const DEFAULT_STACK_POSITION = "top-end";
+const DEFAULT_STACK_DEPTH = 3;
+const VALID_STACK_POSITIONS = /* @__PURE__ */ new Set([
+  "top-start",
+  "top-center",
+  "top-end",
+  "bottom-start",
+  "bottom-center",
+  "bottom-end"
+]);
+const STACKED_SCALE_STEP = 0.04;
+const STACKED_MIN_SCALE = 0.88;
+const STACKED_MIN_OPACITY = 0.72;
+const STACKED_VISIBLE_SLICE = 16;
+const STACKED_EXPANDED_MARGIN = "0.5rem";
+const STACKED_PADDING = "1rem";
+const STACKED_ENTER_OFFSET = 24;
+const toggleStackExpanded = (stack, expanded) => {
+  if (expanded) {
+    stack.dataset.expanded = "true";
+    return;
+  }
+  delete stack.dataset.expanded;
+};
+const syncExpandedStackToasts = (stack, expanded) => {
+  Array.from(stack.children).filter((child) => child.tagName === "WJE-TOAST").forEach((toast) => {
+    var _a, _b;
+    if (expanded) {
+      (_a = toast.pause) == null ? void 0 : _a.call(toast);
+      return;
+    }
+    (_b = toast.resume) == null ? void 0 : _b.call(toast);
+  });
+};
+const setStackExpandedState = (stack, expanded) => {
+  var _a;
+  let shouldExpand = stack.dataset.stacked === "true" && expanded;
+  let isExpanded = stack.dataset.expanded === "true";
+  if (shouldExpand === isExpanded) {
+    return;
+  }
+  toggleStackExpanded(stack, shouldExpand);
+  syncExpandedStackToasts(stack, shouldExpand);
+  (_a = stack.updateToastLayout) == null ? void 0 : _a.call(stack);
+};
+const syncStackExpandedState = (stack) => {
+  setStackExpandedState(stack, stack.matches(":hover") || stack.matches(":focus-within"));
+};
 class Toast extends WJElement {
   /**
    * Creates an instance of Toast.
@@ -54,8 +102,11 @@ class Toast extends WJElement {
      * Resumes the countdown animation and resumes the timer.
      */
     __publicField(this, "resume", () => {
-      var _a;
-      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
+      var _a, _b;
+      if (((_a = this.toastStack) == null ? void 0 : _a.dataset.expanded) === "true") {
+        return;
+      }
+      (_b = this.countdownAnimation) == null ? void 0 : _b.play();
       this.resumeTimer();
     });
     /**
@@ -67,19 +118,50 @@ class Toast extends WJElement {
      */
     __publicField(this, "start", () => {
       return new Promise((resolve) => {
-        let stack = document.body.querySelector(".wje-toast-stack");
+        var _a;
+        let stack = document.body.querySelector(`.wje-toast-stack[data-stack-key="${this.getToastStackKey()}"]`);
         if (stack) {
           this.toastStack = stack;
+        } else {
+          this.toastStack = this.createToastStack();
         }
+        this.syncToastStack(this.toastStack);
         if (this.toastStack.parentElement === null) {
           document.body.append(this.toastStack);
         }
         this.toastStack.append(this);
-        this.show();
+        if (this.stacked) {
+          this.toastStack.style.setProperty("--wje-toast-stack-layout-duration", "0s");
+          this.toastStack.style.setProperty("--wje-toast-stack-visual-duration", "0s");
+          this.style.setProperty(
+            "--wje-toast-enter-offset",
+            this.stackPosition.startsWith("bottom") ? `${STACKED_ENTER_OFFSET}px` : `-${STACKED_ENTER_OFFSET}px`
+          );
+          this.style.visibility = "hidden";
+          this.show();
+          this.updateToastStack(this.toastStack);
+        } else {
+          this.updateToastStack(this.toastStack);
+          this.show();
+        }
+        if (this.toastStack.dataset.expanded === "true") {
+          this.pause();
+        }
+        requestAnimationFrame(() => {
+          this.updateToastStack(this.toastStack);
+          if (this.stacked) {
+            this.style.removeProperty("visibility");
+            this.toastStack.style.removeProperty("--wje-toast-stack-layout-duration");
+            this.toastStack.style.removeProperty("--wje-toast-stack-visual-duration");
+            requestAnimationFrame(() => this.style.setProperty("--wje-toast-enter-offset", "0px"));
+          }
+        });
+        (_a = this.updateComplete) == null ? void 0 : _a.then(() => this.updateToastStack(this.toastStack));
         this.addEventListener("wje-toast:after-hide", this.removeChildAndStack);
+        resolve(this);
       });
     });
-    this.toastStack = Object.assign(document.createElement("div"), { className: "wje-toast-stack" });
+    this.toastStack = this.createToastStack();
   }
   /**
    * Set headline value of the toast.
@@ -166,6 +248,67 @@ class Toast extends WJElement {
   get countdown() {
     return this.hasAttribute("countdown");
   }
+  /**
+   * Set stacked value of the toast.
+   * @param value
+   */
+  set stacked(value) {
+    this.toggleAttribute("stacked", WjElementUtils.stringToBoolean(value));
+  }
+  /**
+   * Get stacked value of the toast.
+   * @returns {boolean}
+   */
+  get stacked() {
+    return this.hasAttribute("stacked");
+  }
+  /**
+   * Set stack depth of the toast.
+   * @param value
+   */
+  set stackDepth(value) {
+    if (value === null || value === void 0 || value === "") {
+      this.removeAttribute("stack-depth");
+      return;
+    }
+    this.setAttribute("stack-depth", value);
+  }
+  /**
+   * Get stack depth of the toast.
+   * @returns {number}
+   */
+  get stackDepth() {
+    let value = Number.parseInt(this.getAttribute("stack-depth"), 10);
+    if (Number.isFinite(value) && value > 0) {
+      return value;
+    }
+    return DEFAULT_STACK_DEPTH;
+  }
+  /**
+   * Set stack position of the toast.
+   * @param value
+   */
+  set stackPosition(value) {
+    if (!value) {
+      this.removeAttribute("stack-position");
+      return;
+    }
+    this.setAttribute("stack-position", value);
+  }
+  /**
+   * Get stack position of the toast.
+   * @returns {string}
+   */
+  get stackPosition() {
+    let value = this.getAttribute("stack-position");
+    if (VALID_STACK_POSITIONS.has(value)) {
+      return value;
+    }
+    if (this.getAttribute("position") === "bottom") {
+      return "bottom-end";
+    }
+    return DEFAULT_STACK_POSITION;
+  }
   /**
    * Set icon value of the toast.
    * @param value
@@ -180,6 +323,222 @@ class Toast extends WJElement {
   get icon() {
     return this.getAttribute("icon");
   }
+  /**
+   * Creates a toast stack container.
+   * @returns {HTMLDivElement}
+   */
+  createToastStack() {
+    let stack = Object.assign(document.createElement("div"), { className: "wje-toast-stack" });
+    stack.addEventListener("mouseenter", () => setStackExpandedState(stack, true));
+    stack.addEventListener("mouseleave", () => requestAnimationFrame(() => syncStackExpandedState(stack)));
+    stack.addEventListener("focusin", () => setStackExpandedState(stack, true));
+    stack.addEventListener("focusout", () => requestAnimationFrame(() => syncStackExpandedState(stack)));
+    this.syncToastStack(stack);
+    return stack;
+  }
+  /**
+   * Returns the key of the toast stack.
+   * @returns {string}
+   */
+  getToastStackKey() {
+    return `${this.stackPosition}:${this.stacked ? `stacked:${this.stackDepth}` : "default"}`;
+  }
+  /**
+   * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.
+   * @param {HTMLDivElement} stack
+   */
+  applyToastStackPlacement(stack = this.toastStack) {
+    const positions = {
+      "top-start": {
+        top: "0",
+        bottom: "auto",
+        left: "0",
+        right: "auto",
+        transform: "none",
+        margin: "0.5rem"
+      },
+      "top-center": {
+        top: "0",
+        bottom: "auto",
+        left: "50%",
+        right: "auto",
+        transform: "translateX(-50%)",
+        margin: "0.5rem 0 0"
+      },
+      "top-end": {
+        top: "0",
+        bottom: "auto",
+        left: "auto",
+        right: "0",
+        transform: "none",
+        margin: "0.5rem"
+      },
+      "bottom-start": {
+        top: "auto",
+        bottom: "0",
+        left: "0",
+        right: "auto",
+        transform: "none",
+        margin: "0 0.5rem 0.5rem"
+      },
+      "bottom-center": {
+        top: "auto",
+        bottom: "0",
+        left: "50%",
+        right: "auto",
+        transform: "translateX(-50%)",
+        margin: "0 0 0.5rem"
+      },
+      "bottom-end": {
+        top: "auto",
+        bottom: "0",
+        left: "auto",
+        right: "0",
+        transform: "none",
+        margin: "0 0.5rem 0.5rem"
+      }
+    };
+    stack.style.removeProperty("inset-inline");
+    stack.style.removeProperty("inset-inline-start");
+    stack.style.removeProperty("inset-inline-end");
+    Object.assign(stack.style, positions[this.stackPosition] || positions[DEFAULT_STACK_POSITION]);
+  }
+  /**
+   * Applies the current toast stack configuration to a stack element.
+   * @param {HTMLDivElement} stack
+   */
+  syncToastStack(stack = this.toastStack) {
+    stack.dataset.position = this.stackPosition;
+    stack.dataset.stackKey = this.getToastStackKey();
+    stack.updateToastLayout = () => this.updateToastStack(stack);
+    stack.style.display = "flex";
+    stack.style.alignItems = "stretch";
+    stack.style.width = "min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem))";
+    stack.style.maxWidth = "calc(100vw - 1rem)";
+    stack.style.maxHeight = "calc(100vh - 1rem)";
+    stack.style.zIndex = "9999";
+    this.applyToastStackPlacement(stack);
+    if (this.stacked) {
+      stack.dataset.stacked = "true";
+      stack.dataset.stackDepth = String(this.stackDepth);
+    } else {
+      delete stack.dataset.stacked;
+      delete stack.dataset.stackDepth;
+      delete stack.dataset.expanded;
+    }
+  }
+  /**
+   * Clears transient stack styling from a toast.
+   * @param {Toast} toast
+   */
+  clearStackItemStyles(toast) {
+    [
+      "--wje-toast-stack-scale",
+      "--wje-toast-stack-shift",
+      "--wje-toast-stack-opacity",
+      "--wje-toast-stack-z",
+      "--wje-toast-stack-origin",
+      "--wje-toast-stack-host-margin-top",
+      "--wje-toast-stack-host-margin-bottom",
+      "order",
+      "position",
+      "top",
+      "left",
+      "right",
+      "width",
+      "margin",
+      "margin-top",
+      "margin-bottom"
+    ].forEach((property) => toast.style.removeProperty(property));
+  }
+  /**
+   * Measures the rendered height of a toast for stack overlap calculations.
+   * @param {Toast} toast
+   * @returns {number}
+   */
+  getToastVisualHeight(toast) {
+    var _a, _b;
+    let hostHeight = toast.getBoundingClientRect().height;
+    let nativeHeight = ((_b = (_a = toast.shadowRoot) == null ? void 0 : _a.querySelector(".native-toast")) == null ? void 0 : _b.getBoundingClientRect().height) || 0;
+    return Math.max(hostHeight, nativeHeight, toast.offsetHeight || 0);
+  }
+  /**
+   * Recomputes the visual order of toasts inside the stack.
+   * @param {HTMLDivElement} stack
+   */
+  updateToastStack(stack = this.toastStack) {
+    var _a, _b;
+    let toasts = Array.from(stack.children).filter((child) => child.tagName === "WJE-TOAST");
+    let isStacked = stack.dataset.stacked === "true";
+    let isExpanded = stack.dataset.expanded === "true";
+    let isBottomStack = (_a = stack.dataset.position) == null ? void 0 : _a.startsWith("bottom");
+    let transformOrigin = ((_b = stack.dataset.position) == null ? void 0 : _b.startsWith("bottom")) ? "center bottom" : "center top";
+    let stackHeight = 0;
+    stack.dataset.count = String(toasts.length);
+    stack.style.gap = "var(--wje-spacing-x-small)";
+    stack.style.flexDirection = "column";
+    stack.style.overflow = isStacked ? isExpanded ? "auto" : "visible" : "auto";
+    if (isStacked) {
+      stack.style.paddingTop = isExpanded ? isBottomStack ? STACKED_PADDING : "0px" : STACKED_PADDING;
+      stack.style.paddingBottom = isExpanded ? isBottomStack ? "0px" : STACKED_PADDING : STACKED_PADDING;
+    } else {
+      stack.style.removeProperty("padding-top");
+      stack.style.removeProperty("padding-bottom");
+    }
+    if (!isStacked || isExpanded) {
+      stack.style.removeProperty("height");
+    }
+    toasts.forEach((toast, index) => {
+      this.clearStackItemStyles(toast);
+      toast.style.setProperty("--wje-toast-stack-z", String(index + 1));
+      if (!isStacked) {
+        return;
+      }
+      if (isExpanded) {
+        let visualOrder = isBottomStack ? index : toasts.length - index - 1;
+        let isVisualFirst = visualOrder === 0;
+        let isVisualLast = visualOrder === toasts.length - 1;
+        toast.style.setProperty("--wje-toast-stack-scale", "1.000");
+        toast.style.setProperty("--wje-toast-stack-shift", "0px");
+        toast.style.setProperty("--wje-toast-stack-opacity", "1.000");
+        toast.style.setProperty("--wje-toast-stack-origin", transformOrigin);
+        toast.style.order = String(visualOrder);
+        toast.style.width = "100%";
+        toast.style.setProperty(
+          "--wje-toast-stack-host-margin-top",
+          isBottomStack && !isVisualFirst ? STACKED_EXPANDED_MARGIN : "0px"
+        );
+        toast.style.setProperty(
+          "--wje-toast-stack-host-margin-bottom",
+          !isBottomStack && !isVisualLast ? STACKED_EXPANDED_MARGIN : "0px"
+        );
+        return;
+      }
+      let toastHeight = this.getToastVisualHeight(toast);
+      let maxDepth = Math.max(0, this.stackDepth - 1);
+      let visibleLevels = Math.min(toasts.length, this.stackDepth);
+      let depth = Math.min(toasts.length - index - 1, maxDepth);
+      let visibleIndex = Math.max(0, index - Math.max(0, toasts.length - this.stackDepth));
+      let targetTop = isBottomStack ? visibleIndex * STACKED_VISIBLE_SLICE : (visibleLevels - 1 - visibleIndex) * STACKED_VISIBLE_SLICE;
+      let scale = Math.max(STACKED_MIN_SCALE, 1 - depth * STACKED_SCALE_STEP);
+      let opacity = Math.max(STACKED_MIN_OPACITY, 1 - depth * 0.08);
+      toast.style.setProperty("--wje-toast-stack-scale", scale.toFixed(3));
+      toast.style.setProperty("--wje-toast-stack-shift", "0px");
+      toast.style.setProperty("--wje-toast-stack-opacity", opacity.toFixed(3));
+      toast.style.setProperty("--wje-toast-stack-origin", transformOrigin);
+      toast.style.position = "absolute";
+      toast.style.top = `${targetTop}px`;
+      toast.style.left = "0";
+      toast.style.right = "0";
+      toast.style.width = "100%";
+      toast.style.setProperty("--wje-toast-stack-host-margin-top", "0px");
+      toast.style.setProperty("--wje-toast-stack-host-margin-bottom", "0px");
+      stackHeight = Math.max(stackHeight, targetTop + toastHeight);
+    });
+    if (isStacked && !isExpanded) {
+      stack.style.height = `${stackHeight}px`;
+    }
+  }
   /**
    * Returns the CSS stylesheet for the component.
    * @static
@@ -294,6 +653,7 @@ class Toast extends WJElement {
     if (this.timeoutID) {
       clearTimeout(this.timeoutID);
     }
+    this.isTimerPaused = false;
     this.timeoutID = window.setTimeout(() => {
       this.hide();
     }, this.remainingTime);
@@ -304,11 +664,14 @@ class Toast extends WJElement {
    * The method is called when the toast notification is paused.
    */
   stopTimer() {
-    if (this.timeoutID) {
-      window.clearTimeout(this.timeoutID);
+    if (!this.timeoutID || this.isTimerPaused) {
+      return;
     }
+    window.clearTimeout(this.timeoutID);
+    this.timeoutID = null;
     const elapsedTime = Date.now() - this.startTime;
-    this.remainingTime -= elapsedTime;
+    this.remainingTime = Math.max(0, this.remainingTime - elapsedTime);
+    this.isTimerPaused = true;
   }
   /**
    * Resumes the timer.
@@ -316,7 +679,7 @@ class Toast extends WJElement {
    * than zero. The method is called when the toast notification is resumed.
    */
   resumeTimer() {
-    if (this.remainingTime > 0) {
+    if (this.isTimerPaused && this.remainingTime > 0) {
       this.startTimer();
     }
   }
@@ -328,7 +691,16 @@ class Toast extends WJElement {
    * empty.
    */
   removeChildAndStack() {
-    this.toastStack.removeChild(this);
+    if (this.parentElement === this.toastStack) {
+      this.toastStack.removeChild(this);
+    }
+    this.toastStack.style.setProperty("--wje-toast-stack-layout-duration", "0s");
+    this.toastStack.style.setProperty("--wje-toast-stack-visual-duration", "0s");
+    this.updateToastStack(this.toastStack);
+    requestAnimationFrame(() => {
+      this.toastStack.style.removeProperty("--wje-toast-stack-layout-duration");
+      this.toastStack.style.removeProperty("--wje-toast-stack-visual-duration");
+    });
     if (this.toastStack.querySelector("wje-toast") === null) {
       this.toastStack.remove();
     }

package/dist/wje-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.\n * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this.toastStack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n    }\n\n    /**\n     * Set headline value of the toast.\n     * @param value\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Get headline value of the toast.\n     * @returns {string}\n     */\n    get headline() {\n        return this.getAttribute('headline');\n    }\n\n    /**\n     * Set open value of the toast.\n     * @param value\n     */\n    set open(value) {\n        this.removeAttribute('open');\n\n        if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n    }\n\n    /**\n     * Get open value of the toast.\n     * @returns {boolean}\n     */\n    get open() {\n        return this.hasAttribute('open');\n    }\n\n    /**\n     * Set duration value of the toast.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Get duration value of the toast.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration');\n    }\n\n    /**\n     * Set closable value of the toast.\n     * @param value\n     */\n    set closable(value) {\n        this.setAttribute('closable', value || '');\n    }\n\n    /**\n     * Get closable value of the toast.\n     * @returns {boolean}\n     */\n    get closable() {\n        return this.hasAttribute('closable');\n    }\n\n    /**\n     * Set color value of the toast.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Get color value of the toast.\n     * @returns {string}\n     */\n    get color() {\n        return this.getAttribute('color');\n    }\n\n    /**\n     * Set countdown value of the toast.\n     * @param value\n     */\n    set countdown(value) {\n        if (value) this.setAttribute('countdown', value);\n    }\n\n    /**\n     * Get countdown value of the toast.\n     * @returns {boolean}\n     */\n    get countdown() {\n        return this.hasAttribute('countdown');\n    }\n\n    /**\n     * Set icon value of the toast.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Get icon value of the toast.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toast';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({\n            role: 'status',\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toast');\n\n        let mediaSlot = document.createElement('slot');\n        mediaSlot.setAttribute('name', 'media');\n        mediaSlot.classList.add('media');\n        mediaSlot.addEventListener('slotchange', () => {\n            if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n                mediaSlot.parentElement.classList.add('has-media');\n            } else {\n                mediaSlot.parentElement.classList.remove('has-media');\n            }\n        });\n\n        let content = document.createElement('div');\n        content.classList.add('content');\n        content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n        let iconX = document.createElement('wje-icon');\n        iconX.setAttribute('name', 'x');\n\n        let closeBtn = document.createElement('wje-button');\n        closeBtn.setAttribute('fill', 'link');\n        closeBtn.setAttribute('color', this.color);\n        closeBtn.setAttribute('size', 'small');\n        closeBtn.classList.add('close');\n        closeBtn.setAttribute('aria-label', 'Close');\n\n        let countdownEl = document.createElement('div');\n        countdownEl.classList.add('countdown');\n\n        let countdownBar = document.createElement('div');\n        countdownBar.classList.add('countdown-bar');\n\n        closeBtn.appendChild(iconX);\n        countdownEl.appendChild(countdownBar);\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            icon.setAttribute('color', this.color);\n            icon.setAttribute('slot', 'media');\n            icon.setAttribute('part', 'icon');\n\n            this.appendChild(icon);\n        }\n\n        native.appendChild(mediaSlot);\n        native.appendChild(content);\n\n        if (this.closable) native.appendChild(closeBtn);\n\n        if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n        fragment.appendChild(native);\n\n        this.closeBtn = closeBtn;\n        this.countdownBar = countdownBar;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toast notification.\n     */\n    afterDraw() {\n        this.closeBtn.addEventListener('wje-button:click', this.hide);\n        this.addEventListener('mouseenter', this.pause);\n        this.addEventListener('mouseleave', this.resume);\n\n        if (this.hasAttribute('countdown')) {\n            const startWidth = '100%';\n            const endWidth = '0';\n\n            this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n                duration: this.duration,\n                easing: 'linear',\n            });\n        }\n\n        if (this.duration > 0) {\n            this.remainingTime = this.duration;\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Before disconnect method\n     * This method is called before the element is disconnected from the document.\n     */\n    beforeDisconnect() {\n        this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n        this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        this.removeEventListener('mouseenter', this.pause);\n        this.removeEventListener('mouseleave', this.resume);\n\n        clearTimeout(this.timeoutID);\n    }\n\n    /**\n     * Starts the timer.\n     * This method sets the `startTime` property to the current time and sets\n     * the `timeoutID` property to the ID of the timeout. The method also\n     * dispatches the `wje-toast:after-hide` custom event when the timeout\n     * expires.\n     */\n    startTimer() {\n        this.startTime = Date.now();\n        if (this.timeoutID) {\n            clearTimeout(this.timeoutID);\n        }\n        this.timeoutID = window.setTimeout(() => {\n            this.hide();\n        }, this.remainingTime);\n    }\n\n    /**\n     * Stops the timer.\n     * This method clears the timeout and calculates the remaining time.\n     * The method is called when the toast notification is paused.\n     */\n    stopTimer() {\n        if (this.timeoutID) {\n            window.clearTimeout(this.timeoutID);\n        }\n        const elapsedTime = Date.now() - this.startTime;\n        this.remainingTime -= elapsedTime;\n    }\n\n    /**\n     * Resumes the timer.\n     * This method resumes the timer if the remaining time is greater\n     * than zero. The method is called when the toast notification is resumed.\n     */\n    resumeTimer() {\n        if (this.remainingTime > 0) {\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Asynchronously shows the toast notification.\n     * This method sets the `open` property to `true` and dispatches the\n     * `wje-toast:after-show` custom event. If the toast is already open,\n     * the method returns `undefined`.\n     */\n    show = () => {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        event.dispatchCustomEvent(this, 'wje-toast:after-show');\n    };\n\n    /**\n     * Asynchronously hides the toast notification.\n     * This method sets the `open` property to `false` and dispatches the\n     * `wje-toast:after-hide` custom event. If the toast is already hidden,\n     * the method returns `undefined`.\n     */\n    hide = () => {\n        if (!this.open) {\n            return;\n        }\n\n        this.open = false;\n        event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n    };\n\n    /**\n     * Pauses the countdown animation and stops the timer.\n     */\n    pause = () => {\n        this.countdownAnimation?.pause();\n        this.stopTimer();\n    };\n\n    /**\n     * Resumes the countdown animation and resumes the timer.\n     */\n    resume = () => {\n        this.countdownAnimation?.play();\n        this.resumeTimer();\n    };\n\n    /**\n     * Removes the toast notification and the toast stack.\n     *\n     * This method removes the toast notification from the toast stack and\n     * removes the toast stack from the document body if the toast stack is\n     * empty.\n     */\n    removeChildAndStack() {\n        this.toastStack.removeChild(this);\n\n        if (this.toastStack.querySelector('wje-toast') === null) {\n            this.toastStack.remove();\n        }\n    }\n\n    /**\n     * Asynchronously starts the toast notification.\n     * This method appends the toast notification to the document body and\n     * shows the toast notification. The method returns a promise that\n     * resolves when the toast notification is shown.\n     * @returns {Promise<unknown>}\n     */\n    start = () => {\n        return new Promise((resolve) => {\n            let stack = document.body.querySelector('.wje-toast-stack');\n            if (stack) {\n                this.toastStack = stack;\n            }\n\n            if (this.toastStack.parentElement === null) {\n                document.body.append(this.toastStack);\n            }\n\n            this.toastStack.append(this);\n\n            this.show();\n\n            this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        });\n    };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst DEFAULT_STACK_POSITION = 'top-end';\nconst DEFAULT_STACK_DEPTH = 3;\nconst VALID_STACK_POSITIONS = new Set([\n    'top-start',\n    'top-center',\n    'top-end',\n    'bottom-start',\n    'bottom-center',\n    'bottom-end',\n]);\nconst STACKED_SCALE_STEP = 0.04;\nconst STACKED_MIN_SCALE = 0.88;\nconst STACKED_MIN_OPACITY = 0.72;\nconst STACKED_VISIBLE_SLICE = 16;\nconst STACKED_EXPANDED_MARGIN = '0.5rem';\nconst STACKED_PADDING = '1rem';\nconst STACKED_ENTER_OFFSET = 24;\n\nconst toggleStackExpanded = (stack, expanded) => {\n    if (expanded) {\n        stack.dataset.expanded = 'true';\n        return;\n    }\n\n    delete stack.dataset.expanded;\n};\n\nconst syncExpandedStackToasts = (stack, expanded) => {\n    Array.from(stack.children)\n        .filter((child) => child.tagName === 'WJE-TOAST')\n        .forEach((toast) => {\n            if (expanded) {\n                toast.pause?.();\n                return;\n            }\n\n            toast.resume?.();\n        });\n};\n\nconst setStackExpandedState = (stack, expanded) => {\n    let shouldExpand = stack.dataset.stacked === 'true' && expanded;\n    let isExpanded = stack.dataset.expanded === 'true';\n\n    if (shouldExpand === isExpanded) {\n        return;\n    }\n\n    toggleStackExpanded(stack, shouldExpand);\n    syncExpandedStackToasts(stack, shouldExpand);\n    stack.updateToastLayout?.();\n};\n\nconst syncStackExpandedState = (stack) => {\n    setStackExpandedState(stack, stack.matches(':hover') || stack.matches(':focus-within'));\n};\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * @attribute {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @attribute {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @attribute {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @attribute {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @attribute {string} color - Defines the color variant of the toast. Supports values such as `primary`, `complete`, `success`, `warning`, `danger`, `info`, and `contrast`.\n * @attribute {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @attribute {boolean} stacked - Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.\n * @attribute {string} stack-position - Defines where the toast stack is placed on the screen. Supports `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, and `bottom-end`.\n * @attribute {number} stack-depth - Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is `3`.\n * @attribute {string} icon - Adds a leading icon into the `media` slot by icon name.\n * @cssproperty [--wje-toast-stack-width=300px] - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this.toastStack = this.createToastStack();\n    }\n\n    /**\n     * Set headline value of the toast.\n     * @param value\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Get headline value of the toast.\n     * @returns {string}\n     */\n    get headline() {\n        return this.getAttribute('headline');\n    }\n\n    /**\n     * Set open value of the toast.\n     * @param value\n     */\n    set open(value) {\n        this.removeAttribute('open');\n\n        if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n    }\n\n    /**\n     * Get open value of the toast.\n     * @returns {boolean}\n     */\n    get open() {\n        return this.hasAttribute('open');\n    }\n\n    /**\n     * Set duration value of the toast.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Get duration value of the toast.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration');\n    }\n\n    /**\n     * Set closable value of the toast.\n     * @param value\n     */\n    set closable(value) {\n        this.setAttribute('closable', value || '');\n    }\n\n    /**\n     * Get closable value of the toast.\n     * @returns {boolean}\n     */\n    get closable() {\n        return this.hasAttribute('closable');\n    }\n\n    /**\n     * Set color value of the toast.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Get color value of the toast.\n     * @returns {string}\n     */\n    get color() {\n        return this.getAttribute('color');\n    }\n\n    /**\n     * Set countdown value of the toast.\n     * @param value\n     */\n    set countdown(value) {\n        if (value) this.setAttribute('countdown', value);\n    }\n\n    /**\n     * Get countdown value of the toast.\n     * @returns {boolean}\n     */\n    get countdown() {\n        return this.hasAttribute('countdown');\n    }\n\n    /**\n     * Set stacked value of the toast.\n     * @param value\n     */\n    set stacked(value) {\n        this.toggleAttribute('stacked', WjElementUtils.stringToBoolean(value));\n    }\n\n    /**\n     * Get stacked value of the toast.\n     * @returns {boolean}\n     */\n    get stacked() {\n        return this.hasAttribute('stacked');\n    }\n\n    /**\n     * Set stack depth of the toast.\n     * @param value\n     */\n    set stackDepth(value) {\n        if (value === null || value === undefined || value === '') {\n            this.removeAttribute('stack-depth');\n            return;\n        }\n\n        this.setAttribute('stack-depth', value);\n    }\n\n    /**\n     * Get stack depth of the toast.\n     * @returns {number}\n     */\n    get stackDepth() {\n        let value = Number.parseInt(this.getAttribute('stack-depth'), 10);\n\n        if (Number.isFinite(value) && value > 0) {\n            return value;\n        }\n\n        return DEFAULT_STACK_DEPTH;\n    }\n\n    /**\n     * Set stack position of the toast.\n     * @param value\n     */\n    set stackPosition(value) {\n        if (!value) {\n            this.removeAttribute('stack-position');\n            return;\n        }\n\n        this.setAttribute('stack-position', value);\n    }\n\n    /**\n     * Get stack position of the toast.\n     * @returns {string}\n     */\n    get stackPosition() {\n        let value = this.getAttribute('stack-position');\n\n        if (VALID_STACK_POSITIONS.has(value)) {\n            return value;\n        }\n\n        if (this.getAttribute('position') === 'bottom') {\n            return 'bottom-end';\n        }\n\n        return DEFAULT_STACK_POSITION;\n    }\n\n    /**\n     * Set icon value of the toast.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Get icon value of the toast.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * Creates a toast stack container.\n     * @returns {HTMLDivElement}\n     */\n    createToastStack() {\n        let stack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n\n        stack.addEventListener('mouseenter', () => setStackExpandedState(stack, true));\n        stack.addEventListener('mouseleave', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n        stack.addEventListener('focusin', () => setStackExpandedState(stack, true));\n        stack.addEventListener('focusout', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n\n        this.syncToastStack(stack);\n\n        return stack;\n    }\n\n    /**\n     * Returns the key of the toast stack.\n     * @returns {string}\n     */\n    getToastStackKey() {\n        return `${this.stackPosition}:${this.stacked ? `stacked:${this.stackDepth}` : 'default'}`;\n    }\n\n    /**\n     * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.\n     * @param {HTMLDivElement} stack\n     */\n    applyToastStackPlacement(stack = this.toastStack) {\n        const positions = {\n            'top-start': {\n                top: '0',\n                bottom: 'auto',\n                left: '0',\n                right: 'auto',\n                transform: 'none',\n                margin: '0.5rem',\n            },\n            'top-center': {\n                top: '0',\n                bottom: 'auto',\n                left: '50%',\n                right: 'auto',\n                transform: 'translateX(-50%)',\n                margin: '0.5rem 0 0',\n            },\n            'top-end': {\n                top: '0',\n                bottom: 'auto',\n                left: 'auto',\n                right: '0',\n                transform: 'none',\n                margin: '0.5rem',\n            },\n            'bottom-start': {\n                top: 'auto',\n                bottom: '0',\n                left: '0',\n                right: 'auto',\n                transform: 'none',\n                margin: '0 0.5rem 0.5rem',\n            },\n            'bottom-center': {\n                top: 'auto',\n                bottom: '0',\n                left: '50%',\n                right: 'auto',\n                transform: 'translateX(-50%)',\n                margin: '0 0 0.5rem',\n            },\n            'bottom-end': {\n                top: 'auto',\n                bottom: '0',\n                left: 'auto',\n                right: '0',\n                transform: 'none',\n                margin: '0 0.5rem 0.5rem',\n            },\n        };\n\n        stack.style.removeProperty('inset-inline');\n        stack.style.removeProperty('inset-inline-start');\n        stack.style.removeProperty('inset-inline-end');\n        Object.assign(stack.style, positions[this.stackPosition] || positions[DEFAULT_STACK_POSITION]);\n    }\n\n    /**\n     * Applies the current toast stack configuration to a stack element.\n     * @param {HTMLDivElement} stack\n     */\n    syncToastStack(stack = this.toastStack) {\n        stack.dataset.position = this.stackPosition;\n        stack.dataset.stackKey = this.getToastStackKey();\n        stack.updateToastLayout = () => this.updateToastStack(stack);\n        stack.style.display = 'flex';\n        stack.style.alignItems = 'stretch';\n        stack.style.width = 'min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem))';\n        stack.style.maxWidth = 'calc(100vw - 1rem)';\n        stack.style.maxHeight = 'calc(100vh - 1rem)';\n        stack.style.zIndex = '9999';\n        this.applyToastStackPlacement(stack);\n\n        if (this.stacked) {\n            stack.dataset.stacked = 'true';\n            stack.dataset.stackDepth = String(this.stackDepth);\n        } else {\n            delete stack.dataset.stacked;\n            delete stack.dataset.stackDepth;\n            delete stack.dataset.expanded;\n        }\n    }\n\n    /**\n     * Clears transient stack styling from a toast.\n     * @param {Toast} toast\n     */\n    clearStackItemStyles(toast) {\n        [\n            '--wje-toast-stack-scale',\n            '--wje-toast-stack-shift',\n            '--wje-toast-stack-opacity',\n            '--wje-toast-stack-z',\n            '--wje-toast-stack-origin',\n            '--wje-toast-stack-host-margin-top',\n            '--wje-toast-stack-host-margin-bottom',\n            'order',\n            'position',\n            'top',\n            'left',\n            'right',\n            'width',\n            'margin',\n            'margin-top',\n            'margin-bottom',\n        ].forEach((property) => toast.style.removeProperty(property));\n    }\n\n    /**\n     * Measures the rendered height of a toast for stack overlap calculations.\n     * @param {Toast} toast\n     * @returns {number}\n     */\n    getToastVisualHeight(toast) {\n        let hostHeight = toast.getBoundingClientRect().height;\n        let nativeHeight = toast.shadowRoot?.querySelector('.native-toast')?.getBoundingClientRect().height || 0;\n\n        return Math.max(hostHeight, nativeHeight, toast.offsetHeight || 0);\n    }\n\n    /**\n     * Recomputes the visual order of toasts inside the stack.\n     * @param {HTMLDivElement} stack\n     */\n    updateToastStack(stack = this.toastStack) {\n        let toasts = Array.from(stack.children).filter((child) => child.tagName === 'WJE-TOAST');\n        let isStacked = stack.dataset.stacked === 'true';\n        let isExpanded = stack.dataset.expanded === 'true';\n        let isBottomStack = stack.dataset.position?.startsWith('bottom');\n        let transformOrigin = stack.dataset.position?.startsWith('bottom') ? 'center bottom' : 'center top';\n        let stackHeight = 0;\n\n        stack.dataset.count = String(toasts.length);\n        stack.style.gap = 'var(--wje-spacing-x-small)';\n        stack.style.flexDirection = 'column';\n        stack.style.overflow = isStacked ? (isExpanded ? 'auto' : 'visible') : 'auto';\n\n        if (isStacked) {\n            stack.style.paddingTop = isExpanded ? (isBottomStack ? STACKED_PADDING : '0px') : STACKED_PADDING;\n            stack.style.paddingBottom = isExpanded ? (isBottomStack ? '0px' : STACKED_PADDING) : STACKED_PADDING;\n        } else {\n            stack.style.removeProperty('padding-top');\n            stack.style.removeProperty('padding-bottom');\n        }\n\n        if (!isStacked || isExpanded) {\n            stack.style.removeProperty('height');\n        }\n\n        toasts.forEach((toast, index) => {\n            this.clearStackItemStyles(toast);\n\n            toast.style.setProperty('--wje-toast-stack-z', String(index + 1));\n\n            if (!isStacked) {\n                return;\n            }\n\n            if (isExpanded) {\n                let visualOrder = isBottomStack ? index : toasts.length - index - 1;\n                let isVisualFirst = visualOrder === 0;\n                let isVisualLast = visualOrder === toasts.length - 1;\n\n                toast.style.setProperty('--wje-toast-stack-scale', '1.000');\n                toast.style.setProperty('--wje-toast-stack-shift', '0px');\n                toast.style.setProperty('--wje-toast-stack-opacity', '1.000');\n                toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n                toast.style.order = String(visualOrder);\n                toast.style.width = '100%';\n                toast.style.setProperty(\n                    '--wje-toast-stack-host-margin-top',\n                    isBottomStack && !isVisualFirst ? STACKED_EXPANDED_MARGIN : '0px'\n                );\n                toast.style.setProperty(\n                    '--wje-toast-stack-host-margin-bottom',\n                    !isBottomStack && !isVisualLast ? STACKED_EXPANDED_MARGIN : '0px'\n                );\n                return;\n            }\n\n            let toastHeight = this.getToastVisualHeight(toast);\n            let maxDepth = Math.max(0, this.stackDepth - 1);\n            let visibleLevels = Math.min(toasts.length, this.stackDepth);\n            let depth = Math.min(toasts.length - index - 1, maxDepth);\n            let visibleIndex = Math.max(0, index - Math.max(0, toasts.length - this.stackDepth));\n            let targetTop = isBottomStack\n                ? visibleIndex * STACKED_VISIBLE_SLICE\n                : (visibleLevels - 1 - visibleIndex) * STACKED_VISIBLE_SLICE;\n            let scale = Math.max(STACKED_MIN_SCALE, 1 - depth * STACKED_SCALE_STEP);\n            let opacity = Math.max(STACKED_MIN_OPACITY, 1 - depth * 0.08);\n\n            toast.style.setProperty('--wje-toast-stack-scale', scale.toFixed(3));\n            toast.style.setProperty('--wje-toast-stack-shift', '0px');\n            toast.style.setProperty('--wje-toast-stack-opacity', opacity.toFixed(3));\n            toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n            toast.style.position = 'absolute';\n            toast.style.top = `${targetTop}px`;\n            toast.style.left = '0';\n            toast.style.right = '0';\n            toast.style.width = '100%';\n            toast.style.setProperty('--wje-toast-stack-host-margin-top', '0px');\n            toast.style.setProperty('--wje-toast-stack-host-margin-bottom', '0px');\n\n            stackHeight = Math.max(stackHeight, targetTop + toastHeight);\n        });\n\n        if (isStacked && !isExpanded) {\n            stack.style.height = `${stackHeight}px`;\n        }\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toast';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({\n            role: 'status',\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toast');\n\n        let mediaSlot = document.createElement('slot');\n        mediaSlot.setAttribute('name', 'media');\n        mediaSlot.classList.add('media');\n        mediaSlot.addEventListener('slotchange', () => {\n            if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n                mediaSlot.parentElement.classList.add('has-media');\n            } else {\n                mediaSlot.parentElement.classList.remove('has-media');\n            }\n        });\n\n        let content = document.createElement('div');\n        content.classList.add('content');\n        content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n        let iconX = document.createElement('wje-icon');\n        iconX.setAttribute('name', 'x');\n\n        let closeBtn = document.createElement('wje-button');\n        closeBtn.setAttribute('fill', 'link');\n        closeBtn.setAttribute('color', this.color);\n        closeBtn.setAttribute('size', 'small');\n        closeBtn.classList.add('close');\n        closeBtn.setAttribute('aria-label', 'Close');\n\n        let countdownEl = document.createElement('div');\n        countdownEl.classList.add('countdown');\n\n        let countdownBar = document.createElement('div');\n        countdownBar.classList.add('countdown-bar');\n\n        closeBtn.appendChild(iconX);\n        countdownEl.appendChild(countdownBar);\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            icon.setAttribute('color', this.color);\n            icon.setAttribute('slot', 'media');\n            icon.setAttribute('part', 'icon');\n\n            this.appendChild(icon);\n        }\n\n        native.appendChild(mediaSlot);\n        native.appendChild(content);\n\n        if (this.closable) native.appendChild(closeBtn);\n\n        if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n        fragment.appendChild(native);\n\n        this.closeBtn = closeBtn;\n        this.countdownBar = countdownBar;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toast notification.\n     */\n    afterDraw() {\n        this.closeBtn.addEventListener('wje-button:click', this.hide);\n        this.addEventListener('mouseenter', this.pause);\n        this.addEventListener('mouseleave', this.resume);\n\n        if (this.hasAttribute('countdown')) {\n            const startWidth = '100%';\n            const endWidth = '0';\n\n            this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n                duration: this.duration,\n                easing: 'linear',\n            });\n        }\n\n        if (this.duration > 0) {\n            this.remainingTime = this.duration;\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Before disconnect method\n     * This method is called before the element is disconnected from the document.\n     */\n    beforeDisconnect() {\n        this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n        this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        this.removeEventListener('mouseenter', this.pause);\n        this.removeEventListener('mouseleave', this.resume);\n\n        clearTimeout(this.timeoutID);\n    }\n\n    /**\n     * Starts the timer.\n     * This method sets the `startTime` property to the current time and sets\n     * the `timeoutID` property to the ID of the timeout. The method also\n     * dispatches the `wje-toast:after-hide` custom event when the timeout\n     * expires.\n     */\n    startTimer() {\n        this.startTime = Date.now();\n        if (this.timeoutID) {\n            clearTimeout(this.timeoutID);\n        }\n        this.isTimerPaused = false;\n        this.timeoutID = window.setTimeout(() => {\n            this.hide();\n        }, this.remainingTime);\n    }\n\n    /**\n     * Stops the timer.\n     * This method clears the timeout and calculates the remaining time.\n     * The method is called when the toast notification is paused.\n     */\n    stopTimer() {\n        if (!this.timeoutID || this.isTimerPaused) {\n            return;\n        }\n\n        window.clearTimeout(this.timeoutID);\n        this.timeoutID = null;\n        const elapsedTime = Date.now() - this.startTime;\n        this.remainingTime = Math.max(0, this.remainingTime - elapsedTime);\n        this.isTimerPaused = true;\n    }\n\n    /**\n     * Resumes the timer.\n     * This method resumes the timer if the remaining time is greater\n     * than zero. The method is called when the toast notification is resumed.\n     */\n    resumeTimer() {\n        if (this.isTimerPaused && this.remainingTime > 0) {\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Asynchronously shows the toast notification.\n     * This method sets the `open` property to `true` and dispatches the\n     * `wje-toast:after-show` custom event. If the toast is already open,\n     * the method returns `undefined`.\n     */\n    show = () => {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        event.dispatchCustomEvent(this, 'wje-toast:after-show');\n    };\n\n    /**\n     * Asynchronously hides the toast notification.\n     * This method sets the `open` property to `false` and dispatches the\n     * `wje-toast:after-hide` custom event. If the toast is already hidden,\n     * the method returns `undefined`.\n     */\n    hide = () => {\n        if (!this.open) {\n            return;\n        }\n\n        this.open = false;\n        event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n    };\n\n    /**\n     * Pauses the countdown animation and stops the timer.\n     */\n    pause = () => {\n        this.countdownAnimation?.pause();\n        this.stopTimer();\n    };\n\n    /**\n     * Resumes the countdown animation and resumes the timer.\n     */\n    resume = () => {\n        if (this.toastStack?.dataset.expanded === 'true') {\n            return;\n        }\n\n        this.countdownAnimation?.play();\n        this.resumeTimer();\n    };\n\n    /**\n     * Removes the toast notification and the toast stack.\n     *\n     * This method removes the toast notification from the toast stack and\n     * removes the toast stack from the document body if the toast stack is\n     * empty.\n     */\n    removeChildAndStack() {\n        if (this.parentElement === this.toastStack) {\n            this.toastStack.removeChild(this);\n        }\n\n        this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n        this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n        this.updateToastStack(this.toastStack);\n\n        requestAnimationFrame(() => {\n            this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n            this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n        });\n\n        if (this.toastStack.querySelector('wje-toast') === null) {\n            this.toastStack.remove();\n        }\n    }\n\n    /**\n     * Asynchronously starts the toast notification.\n     * This method appends the toast notification to the document body and\n     * shows the toast notification. The method returns a promise that\n     * resolves when the toast notification is shown.\n     * @returns {Promise<unknown>}\n     */\n    start = () => {\n        return new Promise((resolve) => {\n            let stack = document.body.querySelector(`.wje-toast-stack[data-stack-key=\"${this.getToastStackKey()}\"]`);\n            if (stack) {\n                this.toastStack = stack;\n            } else {\n                this.toastStack = this.createToastStack();\n            }\n\n            this.syncToastStack(this.toastStack);\n\n            if (this.toastStack.parentElement === null) {\n                document.body.append(this.toastStack);\n            }\n\n            this.toastStack.append(this);\n            if (this.stacked) {\n                this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n                this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n                this.style.setProperty(\n                    '--wje-toast-enter-offset',\n                    this.stackPosition.startsWith('bottom') ? `${STACKED_ENTER_OFFSET}px` : `-${STACKED_ENTER_OFFSET}px`\n                );\n                this.style.visibility = 'hidden';\n                this.show();\n                this.updateToastStack(this.toastStack);\n            } else {\n                this.updateToastStack(this.toastStack);\n                this.show();\n            }\n\n            if (this.toastStack.dataset.expanded === 'true') {\n                this.pause();\n            }\n\n            requestAnimationFrame(() => {\n                this.updateToastStack(this.toastStack);\n\n                if (this.stacked) {\n                    this.style.removeProperty('visibility');\n                    this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n                    this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n\n                    requestAnimationFrame(() => this.style.setProperty('--wje-toast-enter-offset', '0px'));\n                }\n            });\n            this.updateComplete?.then(() => this.updateToastStack(this.toastStack));\n\n            this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n\n            resolve(this);\n        });\n    };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":";;;;;;;AAGA,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB,oBAAI,IAAI;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AACD,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,0BAA0B;AAChC,MAAM,kBAAkB;AACxB,MAAM,uBAAuB;AAE7B,MAAM,sBAAsB,CAAC,OAAO,aAAa;AAC7C,MAAI,UAAU;AACV,UAAM,QAAQ,WAAW;AACzB;AAAA,EACJ;AAEA,SAAO,MAAM,QAAQ;AACzB;AAEA,MAAM,0BAA0B,CAAC,OAAO,aAAa;AACjD,QAAM,KAAK,MAAM,QAAQ,EACpB,OAAO,CAAC,UAAU,MAAM,YAAY,WAAW,EAC/C,QAAQ,CAAC,UAAU;;AAChB,QAAI,UAAU;AACV,kBAAM,UAAN;AACA;AAAA,IACJ;AAEA,gBAAM,WAAN;AAAA,EACJ,CAAC;AACT;AAEA,MAAM,wBAAwB,CAAC,OAAO,aAAa;;AAC/C,MAAI,eAAe,MAAM,QAAQ,YAAY,UAAU;AACvD,MAAI,aAAa,MAAM,QAAQ,aAAa;AAE5C,MAAI,iBAAiB,YAAY;AAC7B;AAAA,EACJ;AAEA,sBAAoB,OAAO,YAAY;AACvC,0BAAwB,OAAO,YAAY;AAC3C,cAAM,sBAAN;AACJ;AAEA,MAAM,yBAAyB,CAAC,UAAU;AACtC,wBAAsB,OAAO,MAAM,QAAQ,QAAQ,KAAK,MAAM,QAAQ,eAAe,CAAC;AAC1F;AA0Be,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAK;AAsbT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAoLZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAO,MAAM;AACT,UAAI,KAAK,MAAM;AACX;AAAA,MACJ;AAEA,WAAK,OAAO;AACZ,YAAM,oBAAoB,MAAM,sBAAsB;AAAA,IAC1D;AAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAO,MAAM;AACT,UAAI,CAAC,KAAK,MAAM;AACZ;AAAA,MACJ;AAEA,WAAK,OAAO;AACZ,YAAM,oBAAoB,MAAM,sBAAsB;AAAA,IAC1D;AAKA;AAAA;AAAA;AAAA,iCAAQ,MAAM;;AACV,iBAAK,uBAAL,mBAAyB;AACzB,WAAK,UAAS;AAAA,IAClB;AAKA;AAAA;AAAA;AAAA,kCAAS,MAAM;;AACX,YAAI,UAAK,eAAL,mBAAiB,QAAQ,cAAa,QAAQ;AAC9C;AAAA,MACJ;AAEA,iBAAK,uBAAL,mBAAyB;AACzB,WAAK,YAAW;AAAA,IACpB;AAmCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAQ,MAAM;AACV,aAAO,IAAI,QAAQ,CAAC,YAAY;;AAC5B,YAAI,QAAQ,SAAS,KAAK,cAAc,oCAAoC,KAAK,kBAAkB,IAAI;AACvG,YAAI,OAAO;AACP,eAAK,aAAa;AAAA,QACtB,OAAO;AACH,eAAK,aAAa,KAAK,iBAAgB;AAAA,QAC3C;AAEA,aAAK,eAAe,KAAK,UAAU;AAEnC,YAAI,KAAK,WAAW,kBAAkB,MAAM;AACxC,mBAAS,KAAK,OAAO,KAAK,UAAU;AAAA,QACxC;AAEA,aAAK,WAAW,OAAO,IAAI;AAC3B,YAAI,KAAK,SAAS;AACd,eAAK,WAAW,MAAM,YAAY,qCAAqC,IAAI;AAC3E,eAAK,WAAW,MAAM,YAAY,qCAAqC,IAAI;AAC3E,eAAK,MAAM;AAAA,YACP;AAAA,YACA,KAAK,cAAc,WAAW,QAAQ,IAAI,GAAG,oBAAoB,OAAO,IAAI,oBAAoB;AAAA,UACpH;AACgB,eAAK,MAAM,aAAa;AACxB,eAAK,KAAI;AACT,eAAK,iBAAiB,KAAK,UAAU;AAAA,QACzC,OAAO;AACH,eAAK,iBAAiB,KAAK,UAAU;AACrC,eAAK,KAAI;AAAA,QACb;AAEA,YAAI,KAAK,WAAW,QAAQ,aAAa,QAAQ;AAC7C,eAAK,MAAK;AAAA,QACd;AAEA,8BAAsB,MAAM;AACxB,eAAK,iBAAiB,KAAK,UAAU;AAErC,cAAI,KAAK,SAAS;AACd,iBAAK,MAAM,eAAe,YAAY;AACtC,iBAAK,WAAW,MAAM,eAAe,mCAAmC;AACxE,iBAAK,WAAW,MAAM,eAAe,mCAAmC;AAExE,kCAAsB,MAAM,KAAK,MAAM,YAAY,4BAA4B,KAAK,CAAC;AAAA,UACzF;AAAA,QACJ,CAAC;AACD,mBAAK,mBAAL,mBAAqB,KAAK,MAAM,KAAK,iBAAiB,KAAK,UAAU;AAErE,aAAK,iBAAiB,wBAAwB,KAAK,mBAAmB;AAEtE,gBAAQ,IAAI;AAAA,MAChB,CAAC;AAAA,IACL;AAzuBI,SAAK,aAAa,KAAK,iBAAgB;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACZ,SAAK,gBAAgB,MAAM;AAE3B,QAAI,eAAe,gBAAgB,KAAK,EAAG,MAAK,aAAa,QAAQ,KAAK;AAAA,EAC9E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,UAAU;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,SAAS,EAAE;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU,OAAO;AACjB,QAAI,MAAO,MAAK,aAAa,aAAa,KAAK;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ,OAAO;AACf,SAAK,gBAAgB,WAAW,eAAe,gBAAgB,KAAK,CAAC;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW,OAAO;AAClB,QAAI,UAAU,QAAQ,UAAU,UAAa,UAAU,IAAI;AACvD,WAAK,gBAAgB,aAAa;AAClC;AAAA,IACJ;AAEA,SAAK,aAAa,eAAe,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,aAAa;AACb,QAAI,QAAQ,OAAO,SAAS,KAAK,aAAa,aAAa,GAAG,EAAE;AAEhE,QAAI,OAAO,SAAS,KAAK,KAAK,QAAQ,GAAG;AACrC,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,cAAc,OAAO;AACrB,QAAI,CAAC,OAAO;AACR,WAAK,gBAAgB,gBAAgB;AACrC;AAAA,IACJ;AAEA,SAAK,aAAa,kBAAkB,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAgB;AAChB,QAAI,QAAQ,KAAK,aAAa,gBAAgB;AAE9C,QAAI,sBAAsB,IAAI,KAAK,GAAG;AAClC,aAAO;AAAA,IACX;AAEA,QAAI,KAAK,aAAa,UAAU,MAAM,UAAU;AAC5C,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB;AACf,QAAI,QAAQ,OAAO,OAAO,SAAS,cAAc,KAAK,GAAG,EAAE,WAAW,mBAAmB;AAEzF,UAAM,iBAAiB,cAAc,MAAM,sBAAsB,OAAO,IAAI,CAAC;AAC7E,UAAM,iBAAiB,cAAc,MAAM,sBAAsB,MAAM,uBAAuB,KAAK,CAAC,CAAC;AACrG,UAAM,iBAAiB,WAAW,MAAM,sBAAsB,OAAO,IAAI,CAAC;AAC1E,UAAM,iBAAiB,YAAY,MAAM,sBAAsB,MAAM,uBAAuB,KAAK,CAAC,CAAC;AAEnG,SAAK,eAAe,KAAK;AAEzB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB;AACf,WAAO,GAAG,KAAK,aAAa,IAAI,KAAK,UAAU,WAAW,KAAK,UAAU,KAAK,SAAS;AAAA,EAC3F;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,yBAAyB,QAAQ,KAAK,YAAY;AAC9C,UAAM,YAAY;AAAA,MACd,aAAa;AAAA,QACT,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,MACxB;AAAA,MACY,cAAc;AAAA,QACV,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,MACxB;AAAA,MACY,WAAW;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,MACxB;AAAA,MACY,gBAAgB;AAAA,QACZ,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,MACxB;AAAA,MACY,iBAAiB;AAAA,QACb,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,MACxB;AAAA,MACY,cAAc;AAAA,QACV,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,MACxB;AAAA,IACA;AAEQ,UAAM,MAAM,eAAe,cAAc;AACzC,UAAM,MAAM,eAAe,oBAAoB;AAC/C,UAAM,MAAM,eAAe,kBAAkB;AAC7C,WAAO,OAAO,MAAM,OAAO,UAAU,KAAK,aAAa,KAAK,UAAU,sBAAsB,CAAC;AAAA,EACjG;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAe,QAAQ,KAAK,YAAY;AACpC,UAAM,QAAQ,WAAW,KAAK;AAC9B,UAAM,QAAQ,WAAW,KAAK,iBAAgB;AAC9C,UAAM,oBAAoB,MAAM,KAAK,iBAAiB,KAAK;AAC3D,UAAM,MAAM,UAAU;AACtB,UAAM,MAAM,aAAa;AACzB,UAAM,MAAM,QAAQ;AACpB,UAAM,MAAM,WAAW;AACvB,UAAM,MAAM,YAAY;AACxB,UAAM,MAAM,SAAS;AACrB,SAAK,yBAAyB,KAAK;AAEnC,QAAI,KAAK,SAAS;AACd,YAAM,QAAQ,UAAU;AACxB,YAAM,QAAQ,aAAa,OAAO,KAAK,UAAU;AAAA,IACrD,OAAO;AACH,aAAO,MAAM,QAAQ;AACrB,aAAO,MAAM,QAAQ;AACrB,aAAO,MAAM,QAAQ;AAAA,IACzB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,qBAAqB,OAAO;AACxB;AAAA,MACI;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACZ,EAAU,QAAQ,CAAC,aAAa,MAAM,MAAM,eAAe,QAAQ,CAAC;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,qBAAqB,OAAO;;AACxB,QAAI,aAAa,MAAM,sBAAqB,EAAG;AAC/C,QAAI,iBAAe,iBAAM,eAAN,mBAAkB,cAAc,qBAAhC,mBAAkD,wBAAwB,WAAU;AAEvG,WAAO,KAAK,IAAI,YAAY,cAAc,MAAM,gBAAgB,CAAC;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB,QAAQ,KAAK,YAAY;;AACtC,QAAI,SAAS,MAAM,KAAK,MAAM,QAAQ,EAAE,OAAO,CAAC,UAAU,MAAM,YAAY,WAAW;AACvF,QAAI,YAAY,MAAM,QAAQ,YAAY;AAC1C,QAAI,aAAa,MAAM,QAAQ,aAAa;AAC5C,QAAI,iBAAgB,WAAM,QAAQ,aAAd,mBAAwB,WAAW;AACvD,QAAI,oBAAkB,WAAM,QAAQ,aAAd,mBAAwB,WAAW,aAAY,kBAAkB;AACvF,QAAI,cAAc;AAElB,UAAM,QAAQ,QAAQ,OAAO,OAAO,MAAM;AAC1C,UAAM,MAAM,MAAM;AAClB,UAAM,MAAM,gBAAgB;AAC5B,UAAM,MAAM,WAAW,YAAa,aAAa,SAAS,YAAa;AAEvE,QAAI,WAAW;AACX,YAAM,MAAM,aAAa,aAAc,gBAAgB,kBAAkB,QAAS;AAClF,YAAM,MAAM,gBAAgB,aAAc,gBAAgB,QAAQ,kBAAmB;AAAA,IACzF,OAAO;AACH,YAAM,MAAM,eAAe,aAAa;AACxC,YAAM,MAAM,eAAe,gBAAgB;AAAA,IAC/C;AAEA,QAAI,CAAC,aAAa,YAAY;AAC1B,YAAM,MAAM,eAAe,QAAQ;AAAA,IACvC;AAEA,WAAO,QAAQ,CAAC,OAAO,UAAU;AAC7B,WAAK,qBAAqB,KAAK;AAE/B,YAAM,MAAM,YAAY,uBAAuB,OAAO,QAAQ,CAAC,CAAC;AAEhE,UAAI,CAAC,WAAW;AACZ;AAAA,MACJ;AAEA,UAAI,YAAY;AACZ,YAAI,cAAc,gBAAgB,QAAQ,OAAO,SAAS,QAAQ;AAClE,YAAI,gBAAgB,gBAAgB;AACpC,YAAI,eAAe,gBAAgB,OAAO,SAAS;AAEnD,cAAM,MAAM,YAAY,2BAA2B,OAAO;AAC1D,cAAM,MAAM,YAAY,2BAA2B,KAAK;AACxD,cAAM,MAAM,YAAY,6BAA6B,OAAO;AAC5D,cAAM,MAAM,YAAY,4BAA4B,eAAe;AACnE,cAAM,MAAM,QAAQ,OAAO,WAAW;AACtC,cAAM,MAAM,QAAQ;AACpB,cAAM,MAAM;AAAA,UACR;AAAA,UACA,iBAAiB,CAAC,gBAAgB,0BAA0B;AAAA,QAChF;AACgB,cAAM,MAAM;AAAA,UACR;AAAA,UACA,CAAC,iBAAiB,CAAC,eAAe,0BAA0B;AAAA,QAChF;AACgB;AAAA,MACJ;AAEA,UAAI,cAAc,KAAK,qBAAqB,KAAK;AACjD,UAAI,WAAW,KAAK,IAAI,GAAG,KAAK,aAAa,CAAC;AAC9C,UAAI,gBAAgB,KAAK,IAAI,OAAO,QAAQ,KAAK,UAAU;AAC3D,UAAI,QAAQ,KAAK,IAAI,OAAO,SAAS,QAAQ,GAAG,QAAQ;AACxD,UAAI,eAAe,KAAK,IAAI,GAAG,QAAQ,KAAK,IAAI,GAAG,OAAO,SAAS,KAAK,UAAU,CAAC;AACnF,UAAI,YAAY,gBACV,eAAe,yBACd,gBAAgB,IAAI,gBAAgB;AAC3C,UAAI,QAAQ,KAAK,IAAI,mBAAmB,IAAI,QAAQ,kBAAkB;AACtE,UAAI,UAAU,KAAK,IAAI,qBAAqB,IAAI,QAAQ,IAAI;AAE5D,YAAM,MAAM,YAAY,2BAA2B,MAAM,QAAQ,CAAC,CAAC;AACnE,YAAM,MAAM,YAAY,2BAA2B,KAAK;AACxD,YAAM,MAAM,YAAY,6BAA6B,QAAQ,QAAQ,CAAC,CAAC;AACvE,YAAM,MAAM,YAAY,4BAA4B,eAAe;AACnE,YAAM,MAAM,WAAW;AACvB,YAAM,MAAM,MAAM,GAAG,SAAS;AAC9B,YAAM,MAAM,OAAO;AACnB,YAAM,MAAM,QAAQ;AACpB,YAAM,MAAM,QAAQ;AACpB,YAAM,MAAM,YAAY,qCAAqC,KAAK;AAClE,YAAM,MAAM,YAAY,wCAAwC,KAAK;AAErE,oBAAc,KAAK,IAAI,aAAa,YAAY,WAAW;AAAA,IAC/D,CAAC;AAED,QAAI,aAAa,CAAC,YAAY;AAC1B,YAAM,MAAM,SAAS,GAAG,WAAW;AAAA,IACvC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,IAClB,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,OAAO;AACtC,cAAU,UAAU,IAAI,OAAO;AAC/B,cAAU,iBAAiB,cAAc,MAAM;AAC3C,UAAI,eAAe,eAAe,KAAK,SAAS,OAAO,GAAG;AACtD,kBAAU,cAAc,UAAU,IAAI,WAAW;AAAA,MACrD,OAAO;AACH,kBAAU,cAAc,UAAU,OAAO,WAAW;AAAA,MACxD;AAAA,IACJ,CAAC;AAED,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,SAAS;AAC/B,YAAQ,YAAY,yBAAyB,KAAK,QAAQ;AAE1D,QAAI,QAAQ,SAAS,cAAc,UAAU;AAC7C,UAAM,aAAa,QAAQ,GAAG;AAE9B,QAAI,WAAW,SAAS,cAAc,YAAY;AAClD,aAAS,aAAa,QAAQ,MAAM;AACpC,aAAS,aAAa,SAAS,KAAK,KAAK;AACzC,aAAS,aAAa,QAAQ,OAAO;AACrC,aAAS,UAAU,IAAI,OAAO;AAC9B,aAAS,aAAa,cAAc,OAAO;AAE3C,QAAI,cAAc,SAAS,cAAc,KAAK;AAC9C,gBAAY,UAAU,IAAI,WAAW;AAErC,QAAI,eAAe,SAAS,cAAc,KAAK;AAC/C,iBAAa,UAAU,IAAI,eAAe;AAE1C,aAAS,YAAY,KAAK;AAC1B,gBAAY,YAAY,YAAY;AAEpC,QAAI,KAAK,aAAa,MAAM,KAAK,KAAK,MAAM;AACxC,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,KAAK,IAAI;AACnC,WAAK,aAAa,SAAS,KAAK,KAAK;AACrC,WAAK,aAAa,QAAQ,OAAO;AACjC,WAAK,aAAa,QAAQ,MAAM;AAEhC,WAAK,YAAY,IAAI;AAAA,IACzB;AAEA,WAAO,YAAY,SAAS;AAC5B,WAAO,YAAY,OAAO;AAE1B,QAAI,KAAK,SAAU,QAAO,YAAY,QAAQ;AAE9C,QAAI,KAAK,aAAa,WAAW,EAAG,QAAO,YAAY,WAAW;AAElE,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAChB,SAAK,eAAe;AAEpB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,SAAS,iBAAiB,oBAAoB,KAAK,IAAI;AAC5D,SAAK,iBAAiB,cAAc,KAAK,KAAK;AAC9C,SAAK,iBAAiB,cAAc,KAAK,MAAM;AAE/C,QAAI,KAAK,aAAa,WAAW,GAAG;AAChC,YAAM,aAAa;AACnB,YAAM,WAAW;AAEjB,WAAK,qBAAqB,KAAK,aAAa,QAAQ,CAAC,EAAE,OAAO,WAAU,GAAI,EAAE,OAAO,SAAQ,CAAE,GAAG;AAAA,QAC9F,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,MACxB,CAAa;AAAA,IACL;AAEA,QAAI,KAAK,WAAW,GAAG;AACnB,WAAK,gBAAgB,KAAK;AAC1B,WAAK,WAAU;AAAA,IACnB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB;;AACf,eAAK,aAAL,mBAAe,oBAAoB,oBAAoB,KAAK;AAC5D,SAAK,oBAAoB,wBAAwB,KAAK,mBAAmB;AACzE,SAAK,oBAAoB,cAAc,KAAK,KAAK;AACjD,SAAK,oBAAoB,cAAc,KAAK,MAAM;AAElD,iBAAa,KAAK,SAAS;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,aAAa;AACT,SAAK,YAAY,KAAK,IAAG;AACzB,QAAI,KAAK,WAAW;AAChB,mBAAa,KAAK,SAAS;AAAA,IAC/B;AACA,SAAK,gBAAgB;AACrB,SAAK,YAAY,OAAO,WAAW,MAAM;AACrC,WAAK,KAAI;AAAA,IACb,GAAG,KAAK,aAAa;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,KAAK,eAAe;AACvC;AAAA,IACJ;AAEA,WAAO,aAAa,KAAK,SAAS;AAClC,SAAK,YAAY;AACjB,UAAM,cAAc,KAAK,IAAG,IAAK,KAAK;AACtC,SAAK,gBAAgB,KAAK,IAAI,GAAG,KAAK,gBAAgB,WAAW;AACjE,SAAK,gBAAgB;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,cAAc;AACV,QAAI,KAAK,iBAAiB,KAAK,gBAAgB,GAAG;AAC9C,WAAK,WAAU;AAAA,IACnB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2DA,sBAAsB;AAClB,QAAI,KAAK,kBAAkB,KAAK,YAAY;AACxC,WAAK,WAAW,YAAY,IAAI;AAAA,IACpC;AAEA,SAAK,WAAW,MAAM,YAAY,qCAAqC,IAAI;AAC3E,SAAK,WAAW,MAAM,YAAY,qCAAqC,IAAI;AAC3E,SAAK,iBAAiB,KAAK,UAAU;AAErC,0BAAsB,MAAM;AACxB,WAAK,WAAW,MAAM,eAAe,mCAAmC;AACxE,WAAK,WAAW,MAAM,eAAe,mCAAmC;AAAA,IAC5E,CAAC;AAED,QAAI,KAAK,WAAW,cAAc,WAAW,MAAM,MAAM;AACrD,WAAK,WAAW,OAAM;AAAA,IAC1B;AAAA,EACJ;AA8DJ;ACj0BA,MAAM,OAAO,aAAa,KAAK;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.3.8",
+  "version": "0.4.1",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -50,8 +50,9 @@
     "test:badge": "web-test-runner --files packages/wje-badge/badge.test.js",
     "test:breadcrumbs": "web-test-runner --files packages/wje-breadcrumbs/breadcrumbs.test.js",
     "test:button": "web-test-runner --files packages/wje-button/button.test.js",
-    "test:chip": "web-test-runner --files packages/wje-chip/chip.test.js",
+    "test:carousel": "web-test-runner --files packages/wje-carousel/carousel.test.js",
     "test:checkbox": "web-test-runner --files packages/wje-checkbox/checkbox.test.js",
+    "test:chip": "web-test-runner --files packages/wje-chip/chip.test.js",
     "test:color-picker": "web-test-runner --files packages/wje-color-picker/color-picker.test.js",
     "test:dialog": "web-test-runner --files packages/wje-dialog/dialog.test.js",
     "test:dropdown": "web-test-runner --files packages/wje-dropdown/dropdown.test.js",
@@ -138,4 +139,4 @@
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-javascript-obfuscator": "^3.1.0"
   }
-}
+}