wj-elements 0.7.7 → 0.8.0

package/dist/wje-sliding-container.js

@@ -1,1501 +1,477 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-const styles = ":host {\n    display: block;\n    z-index: var(--wje-sliding-container-z-index, 1000);\n    position: relative;\n    height: 100%;\n    right: unset;\n    left: unset;\n    .close-button {\n        position: absolute;\n        top: 0;\n        right: 0;\n        z-index: 2;\n    }\n}\n\n:host([hide-button]) {\n    .close-button {\n        display: none;\n    }\n}\n\n.sliding-container-backdrop {\n    display: none;\n}\n\n.sliding-container-wrapper {\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.native-sliding-container {\n\n    position: absolute;\n    width: 0;\n    height: 100%;\n}\n\n.native-sliding-container-inner {\n    height: 100%;\n    position: absolute;\n}\n\n.sliding-container-sheet-handle-area {\n    display: none;\n}\n\n:host(.bottom-sheet) {\n    inset: 0;\n    pointer-events: none;\n    z-index: var(--wje-sliding-container-bottom-sheet-z-index, var(--wje-sliding-container-z-index, 1000));\n}\n\n:host(.bottom-sheet.open) {\n    overscroll-behavior: contain;\n}\n\n:host(.bottom-sheet) .sliding-container-backdrop {\n    display: none;\n    position: fixed;\n    inset: 0;\n    z-index: var(--wje-sliding-container-bottom-sheet-backdrop-z-index, 0);\n    opacity: 0;\n    pointer-events: none;\n    touch-action: none;\n    overscroll-behavior: none;\n    background: var(--wje-sliding-container-backdrop-background, var(--wje-backdrop, rgba(0, 0, 0, .35)));\n}\n\n:host(.bottom-sheet.open) .sliding-container-backdrop {\n    pointer-events: auto;\n}\n\n:host(.bottom-sheet) .sliding-container-wrapper {\n    position: fixed;\n    inset: 0;\n    overflow: visible;\n    pointer-events: none;\n    z-index: var(--wje-sliding-container-bottom-sheet-panel-z-index, 1);\n}\n\n:host(.bottom-sheet) .sliding-container-transparent {\n    display: none;\n}\n\n:host(.bottom-sheet) .native-sliding-container {\n    position: fixed;\n    top: auto;\n    height: fit-content;\n    overflow: hidden;\n    pointer-events: auto;\n    display: flex;\n    flex-direction: column;\n    overscroll-behavior: contain;\n    background: var(--wje-sliding-container-background);\n    box-shadow: var(--wje-sliding-container-box-shadow, var(--wje-sliding-container-shadow));\n    border-radius: var(--wje-sliding-container-sheet-border-radius, var(--wje-sliding-container-border-radius) var(--wje-sliding-container-border-radius) 0 0);\n}\n\n:host(.bottom-sheet) .native-sliding-container-inner {\n    position: relative;\n    flex: 1 1 auto;\n    min-height: 0;\n    height: auto;\n    max-height: inherit;\n    overflow: auto;\n    overscroll-behavior: contain;\n}\n\n:host(.bottom-sheet) .sliding-container-sheet-handle-area {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 var(--wje-sliding-container-sheet-handle-area-height, 24px);\n    height: var(--wje-sliding-container-sheet-handle-area-height, 24px);\n    cursor: grab;\n    pointer-events: auto;\n    touch-action: none;\n    user-select: none;\n    -webkit-user-select: none;\n}\n\n:host(.bottom-sheet) .sliding-container-sheet-handle-area:active {\n    cursor: grabbing;\n}\n\n:host(.bottom-sheet) .sliding-container-sheet-handle {\n    width: var(--wje-sliding-container-sheet-handle-width, 36px);\n    height: var(--wje-sliding-container-sheet-handle-height, 2px);\n    background: var(--wje-sliding-container-sheet-handle-background, var(--wje-border-color));\n    border-radius: var(--wje-sliding-container-sheet-handle-radius, 999px);\n}\n";
-class SlidingContainer extends WJElement {
-  /**
-   * Creates an instance of SlidingContainer.
-   * @class
-   */
+import t from "./wje-element.js";
+import { event as e } from "./event.js";
+class i extends t {
   constructor() {
     super();
     __publicField(this, "className", "SlidingContainer");
-    /**
-     * Handles backdrop click dismissal.
-     * @param {MouseEvent} e The click event.
-     */
-    __publicField(this, "handleBackdropClick", (e) => {
-      if (this.isEventInsideSheet(e) || Date.now() < this._sheetIgnoreDismissUntil || Date.now() < this._sheetBackdropHandledUntil) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      if (this.isBackdropElement(e.target)) {
-        this.close(e);
-      }
+    __publicField(this, "handleBackdropClick", (t2) => {
+      if (this.isEventInsideSheet(t2) || Date.now() < this._sheetIgnoreDismissUntil || Date.now() < this._sheetBackdropHandledUntil) return t2.preventDefault(), void t2.stopPropagation();
+      this.isBackdropElement(t2.target) && this.close(t2);
     });
-    /**
-     * Stops a handle interaction from dismissing the bottom sheet.
-     * @param {Event} e The interaction emitted by the resize handle.
-     */
-    __publicField(this, "stopSheetHandleEvent", (e) => {
+    __publicField(this, "stopSheetHandleEvent", (t2) => {
       var _a;
-      if (!this.isBottomSheet()) return;
-      this._sheetIgnoreDismissUntil = Date.now() + 500;
-      e.preventDefault();
-      e.stopPropagation();
-      (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
+      this.isBottomSheet() && (this._sheetIgnoreDismissUntil = Date.now() + 500, t2.preventDefault(), t2.stopPropagation(), (_a = t2.stopImmediatePropagation) == null ? void 0 : _a.call(t2));
     });
-    /**
-     * Prevents scroll events from reaching the page behind the bottom sheet.
-     * @param {Event} e The scroll event.
-     */
-    __publicField(this, "preventBottomSheetScroll", (e) => {
-      if (!this.isBottomSheet() || !this.classList.contains("open")) return;
-      e.preventDefault();
-      e.stopPropagation();
+    __publicField(this, "preventBottomSheetScroll", (t2) => {
+      this.isBottomSheet() && this.classList.contains("open") && (t2.preventDefault(), t2.stopPropagation());
     });
-    /**
-     * Starts mobile bottom sheet resizing.
-     * @param {PointerEvent} e The pointer event.
-     */
-    __publicField(this, "handleSheetDragStart", (e) => {
+    __publicField(this, "handleSheetDragStart", (t2) => {
       var _a, _b;
-      if (!this.sheetResizable || !this.isBottomSheet()) return;
-      e.preventDefault();
-      e.stopPropagation();
-      (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
-      this._sheetIgnoreDismissUntil = Date.now() + 500;
-      if (this._sheetDrag) return;
-      this.startSheetDrag(e.pointerId, e.clientY);
-      try {
-        (_b = this.sheetHandleArea) == null ? void 0 : _b.setPointerCapture(e.pointerId);
-      } catch {
+      if (this.sheetResizable && this.isBottomSheet() && (t2.preventDefault(), t2.stopPropagation(), (_a = t2.stopImmediatePropagation) == null ? void 0 : _a.call(t2), this._sheetIgnoreDismissUntil = Date.now() + 500, !this._sheetDrag)) {
+        this.startSheetDrag(t2.pointerId, t2.clientY);
+        try {
+          (_b = this.sheetHandleArea) == null ? void 0 : _b.setPointerCapture(t2.pointerId);
+        } catch {
+        }
+        window.addEventListener("pointermove", this.handleSheetDragMove), window.addEventListener("pointerup", this.handleSheetDragEnd), window.addEventListener("pointercancel", this.handleSheetDragEnd);
       }
-      window.addEventListener("pointermove", this.handleSheetDragMove);
-      window.addEventListener("pointerup", this.handleSheetDragEnd);
-      window.addEventListener("pointercancel", this.handleSheetDragEnd);
     });
-    /**
-     * Starts mobile bottom sheet resizing from a touch event.
-     * @param {TouchEvent} e The touch event.
-     */
-    __publicField(this, "handleSheetTouchStart", (e) => {
+    __publicField(this, "handleSheetTouchStart", (t2) => {
       var _a, _b;
       if (!this.sheetResizable || !this.isBottomSheet() || this._sheetDrag) return;
-      const touch = (_a = e.touches) == null ? void 0 : _a[0];
-      if (!touch) return;
-      e.preventDefault();
-      e.stopPropagation();
-      (_b = e.stopImmediatePropagation) == null ? void 0 : _b.call(e);
-      this._sheetIgnoreDismissUntil = Date.now() + 500;
-      this.startSheetDrag("touch", touch.clientY);
-      window.addEventListener("touchmove", this.handleSheetTouchMove, { passive: false });
-      window.addEventListener("touchend", this.handleSheetTouchEnd, { passive: false });
-      window.addEventListener("touchcancel", this.handleSheetTouchEnd, { passive: false });
+      const e2 = (_a = t2.touches) == null ? void 0 : _a[0];
+      e2 && (t2.preventDefault(), t2.stopPropagation(), (_b = t2.stopImmediatePropagation) == null ? void 0 : _b.call(t2), this._sheetIgnoreDismissUntil = Date.now() + 500, this.startSheetDrag("touch", e2.clientY), window.addEventListener("touchmove", this.handleSheetTouchMove, { passive: false }), window.addEventListener("touchend", this.handleSheetTouchEnd, { passive: false }), window.addEventListener("touchcancel", this.handleSheetTouchEnd, { passive: false }));
     });
-    /**
-     * Starts tracking a possible backdrop dismiss tap.
-     * @param {PointerEvent} e The pointer event.
-     */
-    __publicField(this, "handleBackdropPointerStart", (e) => {
-      if (!this.isBottomSheet() || !this.isBackdropElement(e.target) || this.isEventInsideSheet(e) || Date.now() < this._sheetIgnoreDismissUntil) {
-        this._sheetBackdropGesture = null;
-        return;
-      }
-      this._sheetBackdropGesture = {
-        pointerId: e.pointerId,
-        startX: e.clientX,
-        startY: e.clientY,
-        hasMoved: false
-      };
+    __publicField(this, "handleBackdropPointerStart", (t2) => {
+      !this.isBottomSheet() || !this.isBackdropElement(t2.target) || this.isEventInsideSheet(t2) || Date.now() < this._sheetIgnoreDismissUntil ? this._sheetBackdropGesture = null : this._sheetBackdropGesture = { pointerId: t2.pointerId, startX: t2.clientX, startY: t2.clientY, hasMoved: false };
     });
-    /**
-     * Tracks movement during a possible backdrop dismiss tap.
-     * @param {PointerEvent} e The pointer event.
-     */
-    __publicField(this, "handleBackdropPointerMove", (e) => {
-      if (!this._sheetBackdropGesture || e.pointerId !== this._sheetBackdropGesture.pointerId) return;
-      const distanceX = Math.abs(e.clientX - this._sheetBackdropGesture.startX);
-      const distanceY = Math.abs(e.clientY - this._sheetBackdropGesture.startY);
-      if (distanceX > 8 || distanceY > 8) {
-        this._sheetBackdropGesture.hasMoved = true;
-      }
+    __publicField(this, "handleBackdropPointerMove", (t2) => {
+      if (!this._sheetBackdropGesture || t2.pointerId !== this._sheetBackdropGesture.pointerId) return;
+      const e2 = Math.abs(t2.clientX - this._sheetBackdropGesture.startX), i2 = Math.abs(t2.clientY - this._sheetBackdropGesture.startY);
+      (e2 > 8 || i2 > 8) && (this._sheetBackdropGesture.hasMoved = true);
     });
-    /**
-     * Finishes a possible backdrop dismiss tap.
-     * @param {PointerEvent} e The pointer event.
-     */
-    __publicField(this, "handleBackdropPointerEnd", (e) => {
-      if (!this._sheetBackdropGesture || e.pointerId !== this._sheetBackdropGesture.pointerId) return;
-      const shouldClose = !this._sheetBackdropGesture.hasMoved && this.isBackdropElement(e.target) && !this.isEventInsideSheet(e) && Date.now() >= this._sheetIgnoreDismissUntil;
-      this._sheetBackdropGesture = null;
-      this._sheetBackdropHandledUntil = Date.now() + 350;
-      if (shouldClose) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.close(e);
-      }
+    __publicField(this, "handleBackdropPointerEnd", (t2) => {
+      if (!this._sheetBackdropGesture || t2.pointerId !== this._sheetBackdropGesture.pointerId) return;
+      const e2 = !this._sheetBackdropGesture.hasMoved && this.isBackdropElement(t2.target) && !this.isEventInsideSheet(t2) && Date.now() >= this._sheetIgnoreDismissUntil;
+      this._sheetBackdropGesture = null, this._sheetBackdropHandledUntil = Date.now() + 350, e2 && (t2.preventDefault(), t2.stopPropagation(), this.close(t2));
     });
-    /**
-     * Cancels a possible backdrop dismiss tap.
-     */
     __publicField(this, "handleBackdropPointerCancel", () => {
-      this._sheetBackdropGesture = null;
-      this._sheetBackdropHandledUntil = Date.now() + 350;
+      this._sheetBackdropGesture = null, this._sheetBackdropHandledUntil = Date.now() + 350;
     });
-    /**
-     * Resizes the mobile bottom sheet during dragging.
-     * @param {PointerEvent} e The pointer event.
-     */
-    __publicField(this, "handleSheetDragMove", (e) => {
+    __publicField(this, "handleSheetDragMove", (t2) => {
       var _a;
-      if (!this._sheetDrag || e.pointerId !== this._sheetDrag.pointerId) return;
-      e.preventDefault();
-      e.stopPropagation();
-      (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
-      this.updateSheetDrag(e.clientY);
+      this._sheetDrag && t2.pointerId === this._sheetDrag.pointerId && (t2.preventDefault(), t2.stopPropagation(), (_a = t2.stopImmediatePropagation) == null ? void 0 : _a.call(t2), this.updateSheetDrag(t2.clientY));
     });
-    /**
-     * Resizes the mobile bottom sheet during touch dragging.
-     * @param {TouchEvent} e The touch event.
-     */
-    __publicField(this, "handleSheetTouchMove", (e) => {
+    __publicField(this, "handleSheetTouchMove", (t2) => {
       var _a, _b;
-      if (!this._sheetDrag || this._sheetDrag.pointerId !== "touch") return;
-      const touch = (_a = e.touches) == null ? void 0 : _a[0];
-      if (!touch) return;
-      e.preventDefault();
-      e.stopPropagation();
-      (_b = e.stopImmediatePropagation) == null ? void 0 : _b.call(e);
-      this.updateSheetDrag(touch.clientY);
+      if (!this._sheetDrag || "touch" !== this._sheetDrag.pointerId) return;
+      const e2 = (_a = t2.touches) == null ? void 0 : _a[0];
+      e2 && (t2.preventDefault(), t2.stopPropagation(), (_b = t2.stopImmediatePropagation) == null ? void 0 : _b.call(t2), this.updateSheetDrag(e2.clientY));
     });
-    /**
-     * Ends mobile bottom sheet resizing.
-     * @param {PointerEvent} e The pointer event.
-     */
-    __publicField(this, "handleSheetDragEnd", (e) => {
+    __publicField(this, "handleSheetDragEnd", (t2) => {
       var _a, _b, _c;
-      const hasMoved = (_a = this._sheetDrag) == null ? void 0 : _a.hasMoved;
-      if (this._sheetDrag && (e == null ? void 0 : e.pointerId) === this._sheetDrag.pointerId) {
-        e.preventDefault();
-        e.stopPropagation();
-        (_b = e.stopImmediatePropagation) == null ? void 0 : _b.call(e);
+      const e2 = (_a = this._sheetDrag) == null ? void 0 : _a.hasMoved;
+      if (this._sheetDrag && (t2 == null ? void 0 : t2.pointerId) === this._sheetDrag.pointerId) {
+        t2.preventDefault(), t2.stopPropagation(), (_b = t2.stopImmediatePropagation) == null ? void 0 : _b.call(t2);
         try {
-          (_c = this.sheetHandleArea) == null ? void 0 : _c.releasePointerCapture(e.pointerId);
+          (_c = this.sheetHandleArea) == null ? void 0 : _c.releasePointerCapture(t2.pointerId);
         } catch {
         }
       }
-      if (hasMoved) {
-        this._sheetIgnoreDismissUntil = Date.now() + 350;
-      } else {
-        this._sheetIgnoreDismissUntil = Date.now() + 500;
-      }
-      this.endSheetDrag();
+      this._sheetIgnoreDismissUntil = e2 ? Date.now() + 350 : Date.now() + 500, this.endSheetDrag();
     });
-    /**
-     * Ends mobile bottom sheet resizing from a touch event.
-     * @param {TouchEvent} e The touch event.
-     */
-    __publicField(this, "handleSheetTouchEnd", (e) => {
+    __publicField(this, "handleSheetTouchEnd", (t2) => {
       var _a;
-      if (!this._sheetDrag || this._sheetDrag.pointerId !== "touch") return;
-      const hasMoved = this._sheetDrag.hasMoved;
-      if (e.type !== "touchcancel") {
-        e.preventDefault();
-      }
-      e.stopPropagation();
-      if (e.type !== "touchcancel") {
-        (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
-      }
-      this._sheetIgnoreDismissUntil = Date.now() + (hasMoved ? 350 : 700);
-      this.endSheetDrag();
+      if (!this._sheetDrag || "touch" !== this._sheetDrag.pointerId) return;
+      const e2 = this._sheetDrag.hasMoved;
+      "touchcancel" !== t2.type && t2.preventDefault(), t2.stopPropagation(), "touchcancel" !== t2.type && ((_a = t2.stopImmediatePropagation) == null ? void 0 : _a.call(t2)), this._sheetIgnoreDismissUntil = Date.now() + (e2 ? 350 : 700), this.endSheetDrag();
     });
-    /**
-     * Triggers the event based on the target element.
-     * If the target element is different from the last caller, it refreshes the children by calling the `open` method.
-     * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.
-     * @param {Event} e The event object.
-     */
-    __publicField(this, "triggerEvent", async (e) => {
-      if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {
-        await this.open(e);
-      } else {
-        await this.toggle(e);
-      }
-      this._lastCaller = e.composedPath()[0];
+    __publicField(this, "triggerEvent", async (t2) => {
+      this._lastCaller && this._lastCaller !== t2.composedPath()[0] ? await this.open(t2) : await this.toggle(t2), this._lastCaller = t2.composedPath()[0];
     });
-    this._isOpen = false;
-    this._lastCaller = null;
-    this._sheetDrag = null;
-    this._sheetIgnoreDismissUntil = 0;
-    this._sheetBackdropGesture = null;
-    this._sheetBackdropHandledUntil = 0;
-    this._bottomSheetScopeFrame = null;
-    this._resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        if (entry.contentBoxSize) {
-          if (this.drawingStatus < 3) return;
-          if (this.isBottomSheet()) {
-            this.checkForVariant(this.variant);
-          } else if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
-            if (this.variant !== "over") {
-              this.variant = "over";
-            } else {
-              this.checkForVariant(this.variant);
-            }
-          } else {
-            if (this.variant !== "in-place") {
-              this.variant = "in-place";
-            } else {
-              this.checkForVariant(this.variant);
-            }
-          }
-        }
+    this._isOpen = false, this._lastCaller = null, this._sheetDrag = null, this._sheetIgnoreDismissUntil = 0, this._sheetBackdropGesture = null, this._sheetBackdropHandledUntil = 0, this._bottomSheetScopeFrame = null, this._resizeObserver = new ResizeObserver((t2) => {
+      for (let e2 of t2) if (e2.contentBoxSize) {
+        if (this.drawingStatus < 3) return;
+        this.isBottomSheet() ? this.checkForVariant(this.variant) : this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint ? "over" !== this.variant ? this.variant = "over" : this.checkForVariant(this.variant) : "in-place" !== this.variant ? this.variant = "in-place" : this.checkForVariant(this.variant);
       }
-    });
-    this._resizeObserver.observe(document.documentElement);
-  }
-  /**
-   * Sets the maximum width of an element by updating the 'max-width' attribute.
-   * @param {string} value The maximum width value to be set (e.g., '100px', '50%', etc.).
-   */
-  set maxWidth(value) {
-    this.setAttribute("max-width", value);
-  }
-  /**
-   * Gets the maximum width value of the element.
-   * Retrieves the value of the 'max-width' attribute. If the attribute is not set, it defaults to 'auto'.
-   * @returns {string} The maximum width value of the element or 'auto' if the attribute is not defined.
-   */
+    }), this._resizeObserver.observe(document.documentElement);
+  }
+  set maxWidth(t2) {
+    this.setAttribute("max-width", t2);
+  }
   get maxWidth() {
     return this.getAttribute("max-width") ?? "auto";
   }
-  /**
-   * Sets the maximum height for the element.
-   * @param {string} value The maximum height value to be applied to the element. This can include units such as "px", "em", "%", etc.
-   */
-  set maxHeight(value) {
-    this.setAttribute("max-height", value);
-  }
-  /**
-   * Retrieves the maximum height value of the element, or returns 'auto' if not set.
-   * @returns {string} The maximum height value or 'auto' if the attribute is not specified.
-   */
+  set maxHeight(t2) {
+    this.setAttribute("max-height", t2);
+  }
   get maxHeight() {
     return this.getAttribute("max-height") ?? "auto";
   }
-  /**
-   * Sets the 'trigger' attribute for the element.
-   * @param {string} value The value to set for the 'trigger' attribute.
-   */
-  set trigger(value) {
-    this.setAttribute("trigger", value);
-  }
-  /**
-   * Retrieves the value of the 'trigger' attribute. If the attribute is not set, it defaults to 'sliding-container'.
-   * @returns {string} The value of the 'trigger' attribute or the default value 'sliding-container' if not defined.
-   */
+  set trigger(t2) {
+    this.setAttribute("trigger", t2);
+  }
   get trigger() {
     return this.getAttribute("trigger") ?? "sliding-container";
   }
-  /**
-   * Sets the direction attribute for the element.
-   * @param {string} value The direction value to be assigned. Possible values are typically 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto'.
-   */
-  set direction(value) {
-    this.setAttribute("direction", value);
-  }
-  /**
-   * Retrieves the direction attribute of the instance.
-   * If the direction attribute is not set, it defaults to 'right'.
-   * @returns {string} The value of the direction attribute or 'right' if not set.
-   */
+  set direction(t2) {
+    this.setAttribute("direction", t2);
+  }
   get direction() {
     return this.getAttribute("direction") ?? "right";
   }
-  /**
-   * Sets the value of the `remove-child-after-close` attribute.
-   * This attribute determines if a child element should be removed after a close operation.
-   * @param {boolean|string} value The value to set for the `remove-child-after-close` attribute. The value can be a boolean or a string representation of a boolean.
-   */
-  set removeChildAfterClose(value) {
-    this.setAttribute("remove-child-after-close", value);
-  }
-  /**
-   * Gets the value indicating whether the child element should be removed after closing.
-   *
-   * This property checks the presence of the 'remove-child-after-close' attribute on the element.
-   * Returns `false` if the attribute does not exist.
-   * @returns {boolean} True if the 'remove-child-after-close' attribute is present, otherwise false.
-   */
+  set removeChildAfterClose(t2) {
+    this.setAttribute("remove-child-after-close", t2);
+  }
   get removeChildAfterClose() {
     return this.hasAttribute("remove-child-after-close") ?? false;
   }
-  /**
-   * Sets the 'variant' attribute to the specified value.
-   * @param {string} value The value to set for the 'variant' attribute.
-   */
-  set variant(value) {
-    this.setAttribute("variant", value);
-  }
-  /**
-   * Retrieves the value of the "variant" attribute. If the attribute is not set,
-   * it returns the default value 'in-place'.
-   * @returns {string} The variant value or the default value 'in-place'.
-   */
+  set variant(t2) {
+    this.setAttribute("variant", t2);
+  }
   get variant() {
     return this.getAttribute("variant") ?? "in-place";
   }
-  /**
-   * Retrieves the value of the 'screen-break-point' attribute.
-   * @returns {string} The value of the 'screen-break-point' attribute.
-   */
   get screenBreakPoint() {
     return this.getAttribute("screen-break-point");
   }
-  /**
-   * Sets the screen break point value to determine responsive behavior.
-   * @param {string} value The value to set as the screen break point.
-   */
-  set screenBreakPoint(value) {
-    this.setAttribute("screen-break-point", value);
-  }
-  /**
-   * Sets mobile presentation mode.
-   * @param {string} value The mobile presentation mode.
-   */
-  set mobilePresentation(value) {
-    this.setAttribute("mobile-presentation", value);
-  }
-  /**
-   * Gets mobile presentation mode.
-   * @returns {string|null} The mobile presentation mode.
-   */
+  set screenBreakPoint(t2) {
+    this.setAttribute("screen-break-point", t2);
+  }
+  set mobilePresentation(t2) {
+    this.setAttribute("mobile-presentation", t2);
+  }
   get mobilePresentation() {
     return this.getAttribute("mobile-presentation");
   }
-  /**
-   * Sets the breakpoint for mobile presentation.
-   * @param {string} value The mobile breakpoint.
-   */
-  set mobileBreakPoint(value) {
-    this.setAttribute("mobile-break-point", value);
-  }
-  /**
-   * Gets the breakpoint for mobile presentation.
-   * @returns {string} The mobile breakpoint.
-   */
+  set mobileBreakPoint(t2) {
+    this.setAttribute("mobile-break-point", t2);
+  }
   get mobileBreakPoint() {
     return this.getAttribute("mobile-break-point") || "768";
   }
-  /**
-   * Sets the duration of the animation by updating the `animation-duration` attribute.
-   * @param {string} value The duration value for the animation, specified in a format
-   * such as seconds (e.g., "2s") or milliseconds (e.g., "200ms").
-   */
-  set animationDuration(value) {
-    this.setAttribute("animation-duration", value);
-  }
-  /**
-   * Gets the animation duration for an element.
-   * It retrieves the value of the 'animation-duration' attribute if present; otherwise, it defaults to '500'.
-   * @returns {string} The value of the animation duration, either from the attribute or the default '500'.
-   */
+  set animationDuration(t2) {
+    this.setAttribute("animation-duration", t2);
+  }
   get animationDuration() {
     return this.getAttribute("animation-duration") ?? "500";
   }
-  /**
-   * Sets the easing function for the animation.
-   * @param {string} value The easing function to use for the animation. This can be any valid CSS timing function such as "ease", "linear", "ease-in", "ease-out", etc.
-   */
-  set animationEasing(value) {
-    this.setAttribute("animation-easing", value);
-  }
-  /**
-   * Retrieves the easing function for the animation.
-   * @returns {string} The value of the 'animation-easing' attribute if set, otherwise defaults to 'linear'.
-   */
+  set animationEasing(t2) {
+    this.setAttribute("animation-easing", t2);
+  }
   get animationEasing() {
     return this.getAttribute("animation-easing") ?? "linear";
   }
-  /**
-   * Determines if the element has an 'has-opacity' attribute.
-   * @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.
-   */
   get hasOpacity() {
     return this.hasAttribute("has-opacity") ?? false;
   }
-  /**
-   * Determines if the bottom sheet should close when the backdrop is clicked.
-   * @returns {boolean} True if backdrop dismiss is enabled.
-   */
   get backdropDismiss() {
     return this.hasAttribute("backdrop-dismiss") ?? false;
   }
-  /**
-   * Enables resizing for the mobile bottom sheet.
-   * @returns {boolean} True if the sheet can be resized.
-   */
   get sheetResizable() {
     return this.hasAttribute("sheet-resizable") ?? false;
   }
-  /**
-   * Sets resizing for the mobile bottom sheet.
-   * @param {boolean|string} value The value to set.
-   */
-  set sheetResizable(value) {
-    this.setAttribute("sheet-resizable", value);
-  }
-  /**
-   * Gets the mobile bottom sheet panel scope. The backdrop always covers the viewport.
-   * @returns {string} Either 'viewport', 'container', or 'parent'.
-   */
+  set sheetResizable(t2) {
+    this.setAttribute("sheet-resizable", t2);
+  }
   get sheetScope() {
     return this.getAttribute("sheet-scope") || "viewport";
   }
-  /**
-   * Sets the mobile bottom sheet panel scope.
-   * @param {string} value The new boundary mode for the mobile sheet.
-   */
-  set sheetScope(value) {
-    this.setAttribute("sheet-scope", value);
-  }
-  /**
-   * Gets the selector used for container-scoped mobile bottom sheet panels.
-   * @returns {string|null} A CSS selector used to find the composed boundary ancestor.
-   */
+  set sheetScope(t2) {
+    this.setAttribute("sheet-scope", t2);
+  }
   get sheetBoundary() {
     return this.getAttribute("sheet-boundary");
   }
-  /**
-   * Sets the selector used for container-scoped mobile bottom sheet panels.
-   * @param {string} value Selector for the boundary element.
-   */
-  set sheetBoundary(value) {
-    this.setAttribute("sheet-boundary", value);
-  }
-  /**
-   * Gets the mobile bottom sheet opening height.
-   * @returns {string|null} The opening height.
-   */
+  set sheetBoundary(t2) {
+    this.setAttribute("sheet-boundary", t2);
+  }
   get sheetHeight() {
     return this.getAttribute("sheet-height");
   }
-  /**
-   * Sets the mobile bottom sheet opening height.
-   * @param {string} value The opening height.
-   */
-  set sheetHeight(value) {
-    this.setAttribute("sheet-height", value);
-  }
-  /**
-   * Gets the minimum mobile bottom sheet height while resizing.
-   * @returns {string|null} The minimum height.
-   */
+  set sheetHeight(t2) {
+    this.setAttribute("sheet-height", t2);
+  }
   get sheetMinHeight() {
     return this.getAttribute("sheet-min-height");
   }
-  /**
-   * Sets the minimum mobile bottom sheet height while resizing.
-   * @param {string} value The minimum height.
-   */
-  set sheetMinHeight(value) {
-    this.setAttribute("sheet-min-height", value);
-  }
-  /**
-   * Gets the maximum mobile bottom sheet height while resizing.
-   * @returns {string|null} The maximum height.
-   */
+  set sheetMinHeight(t2) {
+    this.setAttribute("sheet-min-height", t2);
+  }
   get sheetMaxHeight() {
     return this.getAttribute("sheet-max-height");
   }
-  /**
-   * Sets the maximum mobile bottom sheet height while resizing.
-   * @param {string} value The maximum height.
-   */
-  set sheetMaxHeight(value) {
-    this.setAttribute("sheet-max-height", value);
-  }
-  /**
-   * Sets the value of the 'add-to-height' attribute.
-   * This attribute is used to modify or adjust the height dynamically.
-   * @param {string} value The value to be assigned to the 'add-to-height' attribute.
-   */
-  set addToHeight(value) {
-    this.setAttribute("add-to-height", value);
-  }
-  /**
-   * Retrieves the value of the 'add-to-height' attribute from the element.
-   * If the attribute is not set, it defaults to '0'.
-   * @returns {string} The value of the 'add-to-height' attribute or '0' if the attribute is not present.
-   */
+  set sheetMaxHeight(t2) {
+    this.setAttribute("sheet-max-height", t2);
+  }
+  set addToHeight(t2) {
+    this.setAttribute("add-to-height", t2);
+  }
   get addToHeight() {
     return this.getAttribute("add-to-height") ?? "0";
   }
-  /**
-   * Determines whether the current state is open.
-   * @returns {boolean} True if the state is open, otherwise false.
-   */
   get isOpen() {
     return this._isOpen;
   }
-  /**
-   * Returns the observed attributes for the component.
-   * @returns {string[]}
-   */
   static get observedAttributes() {
     return ["max-width", "max-height", "trigger", "direction", "variant", "screen-break-point", "remove-child-after-close", "animation-duration", "animation-easing", "has-opacity", "mobile-presentation", "mobile-break-point", "backdrop-dismiss", "sheet-resizable", "sheet-scope", "sheet-boundary", "sheet-height", "sheet-min-height", "sheet-max-height"];
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:block;z-index:var(--wje-sliding-container-z-index, 1000);position:relative;height:100%;right:unset;left:unset}:host .close-button{position:absolute;top:0;right:0;z-index:2}:host([hide-button]) .close-button{display:none}.sliding-container-backdrop{display:none}.sliding-container-wrapper{height:100%;position:relative;overflow:hidden}.native-sliding-container{position:absolute;width:0;height:100%}.native-sliding-container-inner{height:100%;position:absolute}.sliding-container-sheet-handle-area{display:none}:host(.bottom-sheet){top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:var(--wje-sliding-container-bottom-sheet-z-index, var(--wje-sliding-container-z-index, 1000))}:host(.bottom-sheet.open){overscroll-behavior:contain}:host(.bottom-sheet) .sliding-container-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--wje-sliding-container-bottom-sheet-backdrop-z-index, 0);opacity:0;pointer-events:none;touch-action:none;overscroll-behavior:none;background:var(--wje-sliding-container-backdrop-background, var(--wje-backdrop, rgba(0, 0, 0, .35)))}:host(.bottom-sheet.open) .sliding-container-backdrop{pointer-events:auto}:host(.bottom-sheet) .sliding-container-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:visible;pointer-events:none;z-index:var(--wje-sliding-container-bottom-sheet-panel-z-index, 1)}:host(.bottom-sheet) .sliding-container-transparent{display:none}:host(.bottom-sheet) .native-sliding-container{position:fixed;top:auto;height:fit-content;overflow:hidden;pointer-events:auto;display:flex;flex-direction:column;overscroll-behavior:contain;background:var(--wje-sliding-container-background);box-shadow:var(--wje-sliding-container-box-shadow, var(--wje-sliding-container-shadow));border-radius:var(--wje-sliding-container-sheet-border-radius, var(--wje-sliding-container-border-radius) var(--wje-sliding-container-border-radius) 0 0)}:host(.bottom-sheet) .native-sliding-container-inner{position:relative;flex:1 1 auto;min-height:0;height:auto;max-height:inherit;overflow:auto;overscroll-behavior:contain}:host(.bottom-sheet) .sliding-container-sheet-handle-area{display:flex;align-items:center;justify-content:center;flex:0 0 var(--wje-sliding-container-sheet-handle-area-height, 24px);height:var(--wje-sliding-container-sheet-handle-area-height, 24px);cursor:grab;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}:host(.bottom-sheet) .sliding-container-sheet-handle-area:active{cursor:grabbing}:host(.bottom-sheet) .sliding-container-sheet-handle{width:var(--wje-sliding-container-sheet-handle-width, 36px);height:var(--wje-sliding-container-sheet-handle-height, 2px);background:var(--wje-sliding-container-sheet-handle-background, var(--wje-border-color));border-radius:var(--wje-sliding-container-sheet-handle-radius, 999px)}";
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Executes before drawing the element.
-   */
   beforeDraw() {
     var _a, _b;
-    (_a = this.animation) == null ? void 0 : _a.cancel();
-    (_b = this.nativeAnimation) == null ? void 0 : _b.cancel();
-    this.endSheetDrag();
-    this.removePortalBackdrop();
-    document.removeEventListener(this.trigger, this.triggerEvent);
-  }
-  /**
-   * Cleans up global listeners and portaled layers.
-   */
+    (_a = this.animation) == null ? void 0 : _a.cancel(), (_b = this.nativeAnimation) == null ? void 0 : _b.cancel(), this.endSheetDrag(), this.removePortalBackdrop(), document.removeEventListener(this.trigger, this.triggerEvent);
+  }
   afterDisconnect() {
     var _a, _b, _c;
-    (_a = this.animation) == null ? void 0 : _a.cancel();
-    (_b = this.nativeAnimation) == null ? void 0 : _b.cancel();
-    this.endSheetDrag();
-    this.removePortalBackdrop();
-    (_c = this._resizeObserver) == null ? void 0 : _c.disconnect();
-    document.removeEventListener(this.trigger, this.triggerEvent);
-  }
-  /**
-   * Draws the component.
-   * @param {object} context The context for drawing.
-   * @param {object} store The store for drawing.
-   * @param {object} params The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    const isBottomSheet = this.isBottomSheet();
-    let backdrop = document.createElement("div");
-    backdrop.setAttribute("part", "backdrop");
-    backdrop.classList.add("sliding-container-backdrop");
-    if (this._isOpen && isBottomSheet) {
-      backdrop.style.opacity = "var(--wje-sliding-container-backdrop-opacity, 1)";
-    }
-    this.addBackdropListeners(backdrop);
-    let wrapperDiv = document.createElement("div");
-    wrapperDiv.classList.add("sliding-container-wrapper");
-    let transparentDiv = document.createElement("div");
-    transparentDiv.classList.add("sliding-container-transparent");
-    if (this._isOpen && !isBottomSheet) {
-      transparentDiv.style.width = this.maxWidth;
-    }
-    let native = document.createElement("div");
-    native.setAttribute("part", "sliding-container");
-    native.classList.add("native-sliding-container");
-    native.style.width = isBottomSheet ? "100%" : 0;
-    if (this.hasOpacity) {
-      native.style.opacity = 0;
-    }
-    if (this._isOpen) {
-      native.style.width = isBottomSheet ? "100%" : this.maxWidth;
-      if (isBottomSheet) {
-        native.style.transform = "translateY(0)";
-      }
-      if (this.hasOpacity) {
-        native.style.opacity = 1;
-      }
-    } else if (isBottomSheet) {
-      native.style.transform = "translateY(100%)";
-    }
-    if (isBottomSheet) {
-      native.style.left = 0;
-      native.style.right = 0;
-      native.style.bottom = 0;
-      native.style.maxHeight = this.maxHeight;
-    } else if (this.direction === "right") {
-      native.style.right = 0;
-    } else {
-      native.style.left = 0;
-    }
-    const nativeInner = document.createElement("div");
-    nativeInner.classList.add("native-sliding-container-inner");
-    nativeInner.style.width = isBottomSheet ? "100%" : this.maxWidth;
-    if (isBottomSheet) {
-      nativeInner.style.maxHeight = this.maxHeight;
-    }
-    let slot = document.createElement("slot");
-    this.sheetHandleArea = null;
-    nativeInner.append(slot);
-    nativeInner.append(this.htmlCloseButton());
-    if (this.sheetResizable) {
-      native.append(this.htmlSheetHandle());
-    }
-    native.append(nativeInner);
-    wrapperDiv.append(transparentDiv);
-    wrapperDiv.append(native);
-    fragment.append(backdrop);
-    fragment.append(wrapperDiv);
-    this.backdropElement = backdrop;
-    this.transparentDiv = transparentDiv;
-    this.wrapperDiv = wrapperDiv;
-    this.nativeElement = native;
-    this.nativeInner = nativeInner;
-    return fragment;
-  }
-  /**
-   * Performs actions after the element is drawn on the screen.
-   * Attaches an event listener to the document based on the specified trigger.
-   * Sets the variant to "over" if the document width is smaller than the screen break point.
-   * Calls the checkForVariant method with the current variant.
-   */
+    (_a = this.animation) == null ? void 0 : _a.cancel(), (_b = this.nativeAnimation) == null ? void 0 : _b.cancel(), this.endSheetDrag(), this.removePortalBackdrop(), (_c = this._resizeObserver) == null ? void 0 : _c.disconnect(), document.removeEventListener(this.trigger, this.triggerEvent);
+  }
+  draw(t2, e2, i2) {
+    let n = document.createDocumentFragment();
+    const s = this.isBottomSheet();
+    let a = document.createElement("div");
+    a.setAttribute("part", "backdrop"), a.classList.add("sliding-container-backdrop"), this._isOpen && s && (a.style.opacity = "var(--wje-sliding-container-backdrop-opacity, 1)"), this.addBackdropListeners(a);
+    let o = document.createElement("div");
+    o.classList.add("sliding-container-wrapper");
+    let r = document.createElement("div");
+    r.classList.add("sliding-container-transparent"), this._isOpen && !s && (r.style.width = this.maxWidth);
+    let h = document.createElement("div");
+    h.setAttribute("part", "sliding-container"), h.classList.add("native-sliding-container"), h.style.width = s ? "100%" : 0, this.hasOpacity && (h.style.opacity = 0), this._isOpen ? (h.style.width = s ? "100%" : this.maxWidth, s && (h.style.transform = "translateY(0)"), this.hasOpacity && (h.style.opacity = 1)) : s && (h.style.transform = "translateY(100%)"), s ? (h.style.left = 0, h.style.right = 0, h.style.bottom = 0, h.style.maxHeight = this.maxHeight) : "right" === this.direction ? h.style.right = 0 : h.style.left = 0;
+    const l = document.createElement("div");
+    l.classList.add("native-sliding-container-inner"), l.style.width = s ? "100%" : this.maxWidth, s && (l.style.maxHeight = this.maxHeight);
+    let d = document.createElement("slot");
+    return this.sheetHandleArea = null, l.append(d), l.append(this.htmlCloseButton()), this.sheetResizable && h.append(this.htmlSheetHandle()), h.append(l), o.append(r), o.append(h), n.append(a), n.append(o), this.backdropElement = a, this.transparentDiv = r, this.wrapperDiv = o, this.nativeElement = h, this.nativeInner = l, n;
+  }
   afterDraw() {
-    this.syncAria();
-    document.addEventListener(this.trigger, this.triggerEvent);
-    if (!this.isBottomSheet() && this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
-      this.variant = "over";
-    }
-    this.checkForVariant(this.variant);
+    this.syncAria(), document.addEventListener(this.trigger, this.triggerEvent), !this.isBottomSheet() && this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint && (this.variant = "over"), this.checkForVariant(this.variant);
   }
-  /**
-   * Returns whether the mobile bottom sheet presentation is active.
-   * @returns {boolean}
-   */
   isBottomSheet() {
-    return this.mobilePresentation === "bottom-sheet" && window.innerWidth <= +this.mobileBreakPoint;
-  }
-  /**
-   * Adds interaction listeners to a backdrop element.
-   * @param {HTMLElement} backdrop The backdrop element.
-   */
-  addBackdropListeners(backdrop) {
-    backdrop.addEventListener("wheel", this.preventBottomSheetScroll, { passive: false });
-    backdrop.addEventListener("touchmove", this.preventBottomSheetScroll, { passive: false });
-    if (!this.backdropDismiss) return;
-    backdrop.addEventListener("pointerdown", this.handleBackdropPointerStart);
-    backdrop.addEventListener("pointermove", this.handleBackdropPointerMove);
-    backdrop.addEventListener("pointerup", this.handleBackdropPointerEnd);
-    backdrop.addEventListener("pointercancel", this.handleBackdropPointerCancel);
-    backdrop.addEventListener("click", this.handleBackdropClick);
-  }
-  /**
-   * Removes interaction listeners from a backdrop element.
-   * @param {HTMLElement} backdrop The backdrop element.
-   */
-  removeBackdropListeners(backdrop) {
-    backdrop.removeEventListener("wheel", this.preventBottomSheetScroll);
-    backdrop.removeEventListener("touchmove", this.preventBottomSheetScroll);
-    backdrop.removeEventListener("pointerdown", this.handleBackdropPointerStart);
-    backdrop.removeEventListener("pointermove", this.handleBackdropPointerMove);
-    backdrop.removeEventListener("pointerup", this.handleBackdropPointerEnd);
-    backdrop.removeEventListener("pointercancel", this.handleBackdropPointerCancel);
-    backdrop.removeEventListener("click", this.handleBackdropClick);
-  }
-  /**
-   * Checks whether an element is one of this component's backdrop layers.
-   * @param {EventTarget|null} element The event target.
-   * @returns {boolean}
-   */
-  isBackdropElement(element) {
-    return element === this.backdropElement || element === this._portalBackdropElement;
-  }
-  /**
-   * Gets the backdrop element that is active for the current presentation.
-   * @param {object} options Options for resolving the backdrop.
-   * @param {boolean} options.createPortal Creates the body-level mobile backdrop when needed.
-   * @returns {HTMLElement|null}
-   */
-  getBackdropElement({ createPortal = false } = {}) {
-    if (!this.isBottomSheet()) return this.backdropElement;
-    if (createPortal) return this.ensurePortalBackdrop();
-    return this._portalBackdropElement || this.backdropElement;
-  }
-  /**
-   * Creates the body-level backdrop used by mobile bottom sheets.
-   * @returns {HTMLElement} Element appended to document.body for page-level dimming.
-   */
+    return "bottom-sheet" === this.mobilePresentation && window.innerWidth <= +this.mobileBreakPoint;
+  }
+  addBackdropListeners(t2) {
+    t2.addEventListener("wheel", this.preventBottomSheetScroll, { passive: false }), t2.addEventListener("touchmove", this.preventBottomSheetScroll, { passive: false }), this.backdropDismiss && (t2.addEventListener("pointerdown", this.handleBackdropPointerStart), t2.addEventListener("pointermove", this.handleBackdropPointerMove), t2.addEventListener("pointerup", this.handleBackdropPointerEnd), t2.addEventListener("pointercancel", this.handleBackdropPointerCancel), t2.addEventListener("click", this.handleBackdropClick));
+  }
+  removeBackdropListeners(t2) {
+    t2.removeEventListener("wheel", this.preventBottomSheetScroll), t2.removeEventListener("touchmove", this.preventBottomSheetScroll), t2.removeEventListener("pointerdown", this.handleBackdropPointerStart), t2.removeEventListener("pointermove", this.handleBackdropPointerMove), t2.removeEventListener("pointerup", this.handleBackdropPointerEnd), t2.removeEventListener("pointercancel", this.handleBackdropPointerCancel), t2.removeEventListener("click", this.handleBackdropClick);
+  }
+  isBackdropElement(t2) {
+    return t2 === this.backdropElement || t2 === this._portalBackdropElement;
+  }
+  getBackdropElement({ createPortal: t2 = false } = {}) {
+    return this.isBottomSheet() ? t2 ? this.ensurePortalBackdrop() : this._portalBackdropElement || this.backdropElement : this.backdropElement;
+  }
   ensurePortalBackdrop() {
-    if (!this._portalBackdropElement) {
-      this._portalBackdropElement = document.createElement("div");
-      this._portalBackdropElement.setAttribute("data-wje-sliding-container-backdrop", "");
-      this._portalBackdropElement.classList.add("sliding-container-backdrop", "sliding-container-backdrop-portal");
-      this.addBackdropListeners(this._portalBackdropElement);
-      document.body.append(this._portalBackdropElement);
-    }
-    this.syncPortalBackdropStyles();
-    return this._portalBackdropElement;
+    return this._portalBackdropElement || (this._portalBackdropElement = document.createElement("div"), this._portalBackdropElement.setAttribute("data-wje-sliding-container-backdrop", ""), this._portalBackdropElement.classList.add("sliding-container-backdrop", "sliding-container-backdrop-portal"), this.addBackdropListeners(this._portalBackdropElement), document.body.append(this._portalBackdropElement)), this.syncPortalBackdropStyles(), this._portalBackdropElement;
   }
-  /**
-   * Removes the body-level mobile backdrop.
-   */
   removePortalBackdrop() {
-    if (!this._portalBackdropElement) return;
-    this.removeBackdropListeners(this._portalBackdropElement);
-    this._portalBackdropElement.remove();
-    this._portalBackdropElement = null;
-  }
-  /**
-   * Gets the full-page z-index for the body-level mobile backdrop.
-   * @returns {string}
-   */
+    this._portalBackdropElement && (this.removeBackdropListeners(this._portalBackdropElement), this._portalBackdropElement.remove(), this._portalBackdropElement = null);
+  }
   getPortalBackdropZIndex() {
-    const hostStyle = getComputedStyle(this);
-    const configuredZIndex = hostStyle.getPropertyValue("--wje-sliding-container-portal-backdrop-z-index").trim();
-    if (configuredZIndex) return configuredZIndex;
-    const hostZIndex = Number.parseInt(hostStyle.zIndex, 10);
-    if (Number.isFinite(hostZIndex)) return String(hostZIndex - 1);
-    return "999";
-  }
-  /**
-   * Gets the target opacity for the active mobile backdrop.
-   * @returns {string}
-   */
+    const t2 = getComputedStyle(this), e2 = t2.getPropertyValue("--wje-sliding-container-portal-backdrop-z-index").trim();
+    if (e2) return e2;
+    const i2 = Number.parseInt(t2.zIndex, 10);
+    return Number.isFinite(i2) ? String(i2 - 1) : "999";
+  }
   getBackdropOpenOpacity() {
     return getComputedStyle(this).getPropertyValue("--wje-sliding-container-backdrop-opacity").trim() || "1";
   }
-  /**
-   * Syncs visual styles from the component to the body-level backdrop.
-   */
   syncPortalBackdropStyles() {
     if (!this._portalBackdropElement) return;
-    const backdropStyle = this.backdropElement ? getComputedStyle(this.backdropElement) : null;
-    this._portalBackdropElement.style.position = "fixed";
-    this._portalBackdropElement.style.inset = "0";
-    this._portalBackdropElement.style.display = "block";
-    this._portalBackdropElement.style.opacity = this.classList.contains("open") ? this.getBackdropOpenOpacity() : "0";
-    this._portalBackdropElement.style.pointerEvents = this.classList.contains("open") ? "auto" : "none";
-    this._portalBackdropElement.style.touchAction = "none";
-    this._portalBackdropElement.style.overscrollBehavior = "none";
-    this._portalBackdropElement.style.background = (backdropStyle == null ? void 0 : backdropStyle.background) || "rgba(0, 0, 0, .35)";
-    this._portalBackdropElement.style.zIndex = this.getPortalBackdropZIndex();
-  }
-  /**
-   * Sync ARIA attributes on host.
-   */
+    const t2 = this.backdropElement ? getComputedStyle(this.backdropElement) : null;
+    this._portalBackdropElement.style.position = "fixed", this._portalBackdropElement.style.inset = "0", this._portalBackdropElement.style.display = "block", this._portalBackdropElement.style.opacity = this.classList.contains("open") ? this.getBackdropOpenOpacity() : "0", this._portalBackdropElement.style.pointerEvents = this.classList.contains("open") ? "auto" : "none", this._portalBackdropElement.style.touchAction = "none", this._portalBackdropElement.style.overscrollBehavior = "none", this._portalBackdropElement.style.background = (t2 == null ? void 0 : t2.background) || "rgba(0, 0, 0, .35)", this._portalBackdropElement.style.zIndex = this.getPortalBackdropZIndex();
+  }
   syncAria() {
-    if (!this.hasAttribute("role")) {
-      this.setAriaState({ role: "region" });
-    }
-    this.setAriaState({ hidden: !this.isOpen });
-    const ariaLabel = this.getAttribute("aria-label");
-    const label = this.getAttribute("label");
-    if (!ariaLabel && label) {
-      this.setAriaState({ label });
-    }
+    this.hasAttribute("role") || this.setAriaState({ role: "region" }), this.setAriaState({ hidden: !this.isOpen });
+    const t2 = this.getAttribute("aria-label"), e2 = this.getAttribute("label");
+    !t2 && e2 && this.setAriaState({ label: e2 });
   }
-  /**
-   * Creates and returns a styled close button element with an icon,
-   * including an event listener to trigger the close method.
-   * @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.
-   */
   htmlCloseButton() {
-    let closeButton = document.createElement("wje-button");
-    closeButton.setAttribute("part", "close-button");
-    closeButton.classList.add("close-button");
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("slot", "icon-only");
-    icon.setAttribute("name", "x");
-    closeButton.append(icon);
-    event.addListener(closeButton, "wje-button:click", null, (e) => {
+    let t2 = document.createElement("wje-button");
+    t2.setAttribute("part", "close-button"), t2.classList.add("close-button");
+    let i2 = document.createElement("wje-icon");
+    return i2.setAttribute("slot", "icon-only"), i2.setAttribute("name", "x"), t2.append(i2), e.addListener(t2, "wje-button:click", null, (t3) => {
       this.close();
-    });
-    return closeButton;
+    }), t2;
   }
-  /**
-   * Creates the mobile bottom sheet resize handle.
-   * @returns {HTMLElement} The resize handle element.
-   */
   htmlSheetHandle() {
-    const handleArea = document.createElement("div");
-    handleArea.setAttribute("part", "sheet-handle-area");
-    handleArea.setAttribute("role", "separator");
-    handleArea.setAttribute("aria-orientation", "horizontal");
-    handleArea.classList.add("sliding-container-sheet-handle-area");
-    const handle = document.createElement("div");
-    handle.setAttribute("part", "sheet-handle");
-    handle.classList.add("sliding-container-sheet-handle");
-    handleArea.append(handle);
-    handleArea.addEventListener("pointerdown", this.handleSheetDragStart, { capture: true });
-    handleArea.addEventListener("touchstart", this.handleSheetTouchStart, { capture: true, passive: false });
-    handleArea.addEventListener("click", this.stopSheetHandleEvent, { capture: true });
-    handleArea.addEventListener("mousedown", this.stopSheetHandleEvent, { capture: true });
-    handleArea.addEventListener("mouseup", this.stopSheetHandleEvent, { capture: true });
-    this.sheetHandleArea = handleArea;
-    return handleArea;
-  }
-  /**
-   * Retrieves the parent element of the current element.
-   * If the parent element is not found, it attempts to find the root host element.
-   * @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.
-   */
+    const t2 = document.createElement("div");
+    t2.setAttribute("part", "sheet-handle-area"), t2.setAttribute("role", "separator"), t2.setAttribute("aria-orientation", "horizontal"), t2.classList.add("sliding-container-sheet-handle-area");
+    const e2 = document.createElement("div");
+    return e2.setAttribute("part", "sheet-handle"), e2.classList.add("sliding-container-sheet-handle"), t2.append(e2), t2.addEventListener("pointerdown", this.handleSheetDragStart, { capture: true }), t2.addEventListener("touchstart", this.handleSheetTouchStart, { capture: true, passive: false }), t2.addEventListener("click", this.stopSheetHandleEvent, { capture: true }), t2.addEventListener("mousedown", this.stopSheetHandleEvent, { capture: true }), t2.addEventListener("mouseup", this.stopSheetHandleEvent, { capture: true }), this.sheetHandleArea = t2, t2;
+  }
   getParentElement() {
-    let parentElement = this.parentElement;
-    if (!parentElement) {
-      parentElement = this.getRootNode().host;
-    }
-    return parentElement;
-  }
-  /**
-   * Finds the closest element across shadow DOM boundaries.
-   * @param {string} selector The selector to match.
-   * @returns {Element|null} The matched composed ancestor.
-   */
-  getClosestComposedElement(selector) {
+    let t2 = this.parentElement;
+    return t2 || (t2 = this.getRootNode().host), t2;
+  }
+  getClosestComposedElement(t2) {
     var _a;
-    let currentElement = this;
-    while (currentElement) {
-      let matches = false;
+    let e2 = this;
+    for (; e2; ) {
+      let i2 = false;
       try {
-        matches = currentElement instanceof Element && currentElement.matches(selector);
+        i2 = e2 instanceof Element && e2.matches(t2);
       } catch {
         return null;
       }
-      if (matches) {
-        return currentElement;
-      }
-      if (currentElement.parentElement) {
-        currentElement = currentElement.parentElement;
+      if (i2) return e2;
+      if (e2.parentElement) {
+        e2 = e2.parentElement;
         continue;
       }
-      const root = (_a = currentElement.getRootNode) == null ? void 0 : _a.call(currentElement);
-      currentElement = root instanceof ShadowRoot ? root.host : null;
+      const n = (_a = e2.getRootNode) == null ? void 0 : _a.call(e2);
+      e2 = n instanceof ShadowRoot ? n.host : null;
     }
     return null;
   }
-  /**
-   * Returns the viewport frame.
-   * @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
-   */
   getViewportFrame() {
-    return {
-      top: 0,
-      left: 0,
-      right: window.innerWidth,
-      bottom: window.innerHeight,
-      width: window.innerWidth,
-      height: window.innerHeight
-    };
-  }
-  /**
-   * Returns the element that bounds the mobile bottom sheet panel.
-   * @returns {Element|null} The scope element, or null for viewport scope.
-   */
+    return { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight, width: window.innerWidth, height: window.innerHeight };
+  }
   getBottomSheetScopeElement() {
-    if (this.sheetScope === "viewport") return null;
-    if (this.sheetScope === "parent") return this.getParentElement();
-    if (this.sheetBoundary) return this.getClosestComposedElement(this.sheetBoundary);
-    return this.getParentElement();
-  }
-  /**
-   * Returns the frame used by the mobile bottom sheet panel.
-   * @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
-   */
+    return "viewport" === this.sheetScope ? null : "parent" === this.sheetScope ? this.getParentElement() : this.sheetBoundary ? this.getClosestComposedElement(this.sheetBoundary) : this.getParentElement();
+  }
   getBottomSheetScopeFrame() {
-    const scopeElement = this.getBottomSheetScopeElement();
-    if (!scopeElement) return this.getViewportFrame();
-    const rect = scopeElement.getBoundingClientRect();
-    const top = Math.max(rect.top, 0);
-    const left = Math.max(rect.left, 0);
-    const right = Math.min(rect.right, window.innerWidth);
-    const bottom = Math.min(rect.bottom, window.innerHeight);
-    const width = right - left;
-    const height = bottom - top;
-    if (width <= 0 || height <= 0) {
-      return this.getViewportFrame();
-    }
-    return {
-      top,
-      left,
-      right,
-      bottom,
-      width,
-      height
-    };
-  }
-  /**
-   * Applies a fixed frame to a bottom sheet layer.
-   * @param {HTMLElement|SlidingContainer} element The element to update.
-   * @param {object} frame The frame to apply.
-   */
-  setBottomSheetLayerFrame(element, frame) {
-    element.style.top = frame.top + "px";
-    element.style.left = frame.left + "px";
-    element.style.right = "auto";
-    element.style.bottom = "auto";
-    element.style.width = frame.width + "px";
-    element.style.height = frame.height + "px";
-  }
-  /**
-   * Removes fixed frame styles from a bottom sheet layer.
-   * @param {HTMLElement|SlidingContainer} element The element to reset.
-   */
-  resetBottomSheetLayerFrame(element) {
-    element == null ? void 0 : element.style.removeProperty("top");
-    element == null ? void 0 : element.style.removeProperty("left");
-    element == null ? void 0 : element.style.removeProperty("right");
-    element == null ? void 0 : element.style.removeProperty("bottom");
-    element == null ? void 0 : element.style.removeProperty("width");
-    element == null ? void 0 : element.style.removeProperty("height");
-  }
-  /**
-   * Adjusts the position and dimensions of the current element based on the specified variant.
-   *
-   * The method handles modifications to the element's positioning style, aligns it relative to its parent,
-   * and manages alignment to its siblings based on the specified direction.
-   * @param {string} variant The variant to determine how the element should be updated. For example, when set to 'over', specific adjustments to the position and size are performed.
-   * @returns {void} No value is returned, the method modifies the element's style properties directly.
-   */
-  checkForVariant(variant) {
-    if (this.isBottomSheet()) {
-      this.setBottomSheetVariant();
-      return;
-    }
-    this.resetBottomSheetVariant();
-    if (variant === "over") {
+    const t2 = this.getBottomSheetScopeElement();
+    if (!t2) return this.getViewportFrame();
+    const e2 = t2.getBoundingClientRect(), i2 = Math.max(e2.top, 0), n = Math.max(e2.left, 0), s = Math.min(e2.right, window.innerWidth), a = Math.min(e2.bottom, window.innerHeight), o = s - n, r = a - i2;
+    return o <= 0 || r <= 0 ? this.getViewportFrame() : { top: i2, left: n, right: s, bottom: a, width: o, height: r };
+  }
+  setBottomSheetLayerFrame(t2, e2) {
+    t2.style.top = e2.top + "px", t2.style.left = e2.left + "px", t2.style.right = "auto", t2.style.bottom = "auto", t2.style.width = e2.width + "px", t2.style.height = e2.height + "px";
+  }
+  resetBottomSheetLayerFrame(t2) {
+    t2 == null ? void 0 : t2.style.removeProperty("top"), t2 == null ? void 0 : t2.style.removeProperty("left"), t2 == null ? void 0 : t2.style.removeProperty("right"), t2 == null ? void 0 : t2.style.removeProperty("bottom"), t2 == null ? void 0 : t2.style.removeProperty("width"), t2 == null ? void 0 : t2.style.removeProperty("height");
+  }
+  checkForVariant(t2) {
+    if (this.isBottomSheet()) this.setBottomSheetVariant();
+    else if (this.resetBottomSheetVariant(), "over" === t2) {
       this.style.position = "fixed";
-      let computentStyleOfParent = window.getComputedStyle(this.getParentElement());
-      let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();
-      let heightOfParrentElement = parseFloat(computentStyleOfParent.height);
-      let topOfParrentElement = parseFloat(computentStyleOfParent.top);
-      this.style.height = heightOfParrentElement + +this.addToHeight + "px";
-      this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + "px";
-      this.style.top = topOfParrentElement + "px";
-      const leftSibling = this.previousElementSibling;
-      const rightSibling = this.nextElementSibling;
-      const leftSiblingBoundingbox = leftSibling == null ? void 0 : leftSibling.getBoundingClientRect();
-      const rightSiblingBoundingbox = rightSibling == null ? void 0 : rightSibling.getBoundingClientRect();
-      if (this.direction === "right") {
-        if (leftSiblingBoundingbox) {
-          this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + "px";
-        } else {
-          this.style.left = parentElementBoundingbox.left + "px";
-        }
-      } else {
-        if (rightSiblingBoundingbox) {
-          this.style.right = window.innerWidth - rightSiblingBoundingbox.left + "px";
-        } else {
-          this.style.right = window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + "px";
-        }
-      }
+      let t3 = window.getComputedStyle(this.getParentElement()), e2 = this.getParentElement().getBoundingClientRect(), i2 = parseFloat(t3.height), n = parseFloat(t3.top);
+      this.style.height = i2 + +this.addToHeight + "px", this.wrapperDiv.style.height = i2 + +this.addToHeight + "px", this.style.top = n + "px";
+      const s = this.previousElementSibling, a = this.nextElementSibling, o = s == null ? void 0 : s.getBoundingClientRect(), r = a == null ? void 0 : a.getBoundingClientRect();
+      "right" === this.direction ? this.style.left = o ? o.left + o.width + "px" : e2.left + "px" : this.style.right = r ? window.innerWidth - r.left + "px" : window.innerWidth - (e2.left + e2.width) + "px";
     }
   }
-  /**
-   * Applies the mobile bottom sheet layout.
-   */
   setBottomSheetVariant() {
-    const scopeFrame = this.getBottomSheetScopeFrame();
-    const backdropFrame = this.getViewportFrame();
-    const backdrop = this.getBackdropElement({
-      createPortal: this.classList.contains("open") || this._isOpen
-    });
-    this._bottomSheetScopeFrame = scopeFrame;
-    this.classList.add("bottom-sheet");
-    this.style.position = "fixed";
-    this.setBottomSheetLayerFrame(this, scopeFrame);
-    this.setBottomSheetLayerFrame(backdrop, backdropFrame);
-    this.setBottomSheetLayerFrame(this.wrapperDiv, scopeFrame);
-    this.syncPortalBackdropStyles();
-    this.wrapperDiv.style.height = "100%";
-    this.transparentDiv.style.width = 0;
-    this.nativeElement.style.left = scopeFrame.left + "px";
-    this.nativeElement.style.right = "auto";
-    this.nativeElement.style.bottom = window.innerHeight - scopeFrame.bottom + "px";
-    this.nativeElement.style.top = "auto";
-    this.nativeElement.style.width = scopeFrame.width + "px";
-    if (this._sheetDrag) {
-      this.nativeElement.style.maxHeight = this.getSheetMaxHeightInPixels() + "px";
-    } else {
-      this.setSheetHeight();
-    }
-    this.setBottomSheetVisualState(this.classList.contains("open"));
-    this.nativeInner.style.width = "100%";
-    this.nativeInner.style.maxHeight = this.nativeElement.style.maxHeight;
+    const t2 = this.getBottomSheetScopeFrame(), e2 = this.getViewportFrame(), i2 = this.getBackdropElement({ createPortal: this.classList.contains("open") || this._isOpen });
+    this._bottomSheetScopeFrame = t2, this.classList.add("bottom-sheet"), this.style.position = "fixed", this.setBottomSheetLayerFrame(this, t2), this.setBottomSheetLayerFrame(i2, e2), this.setBottomSheetLayerFrame(this.wrapperDiv, t2), this.syncPortalBackdropStyles(), this.wrapperDiv.style.height = "100%", this.transparentDiv.style.width = 0, this.nativeElement.style.left = t2.left + "px", this.nativeElement.style.right = "auto", this.nativeElement.style.bottom = window.innerHeight - t2.bottom + "px", this.nativeElement.style.top = "auto", this.nativeElement.style.width = t2.width + "px", this._sheetDrag ? this.nativeElement.style.maxHeight = this.getSheetMaxHeightInPixels() + "px" : this.setSheetHeight(), this.setBottomSheetVisualState(this.classList.contains("open")), this.nativeInner.style.width = "100%", this.nativeInner.style.maxHeight = this.nativeElement.style.maxHeight;
   }
-  /**
-   * Removes layout styles managed by the mobile bottom sheet mode.
-   */
   resetBottomSheetVariant() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    if (!this.classList.contains("bottom-sheet")) return;
-    this.classList.remove("bottom-sheet");
-    this.style.removeProperty("position");
-    this.resetBottomSheetLayerFrame(this);
-    this.resetBottomSheetLayerFrame(this.backdropElement);
-    this.removePortalBackdrop();
-    this.resetBottomSheetLayerFrame(this.wrapperDiv);
-    if (this.transparentDiv) {
-      this.transparentDiv.style.width = this._isOpen ? this.maxWidth : 0;
-    }
-    (_a = this.nativeElement) == null ? void 0 : _a.style.removeProperty("left");
-    (_b = this.nativeElement) == null ? void 0 : _b.style.removeProperty("right");
-    (_c = this.nativeElement) == null ? void 0 : _c.style.removeProperty("bottom");
-    (_d = this.nativeElement) == null ? void 0 : _d.style.removeProperty("top");
-    (_e = this.nativeElement) == null ? void 0 : _e.style.removeProperty("height");
-    (_f = this.nativeElement) == null ? void 0 : _f.style.removeProperty("max-height");
-    (_g = this.nativeElement) == null ? void 0 : _g.style.removeProperty("transform");
-    if (this.nativeElement) {
-      if (this.direction === "right") {
-        this.nativeElement.style.right = 0;
-      } else {
-        this.nativeElement.style.left = 0;
-      }
-      this.nativeElement.style.width = this._isOpen ? this.maxWidth : 0;
-    }
-    (_h = this.nativeInner) == null ? void 0 : _h.style.removeProperty("max-height");
-    if (this.nativeInner) {
-      this.nativeInner.style.width = this.maxWidth;
-    }
-    (_i = this.backdropElement) == null ? void 0 : _i.style.removeProperty("opacity");
-    this._bottomSheetScopeFrame = null;
-    this.endSheetDrag();
-  }
-  /**
-   * Applies the current visual open or closed state to the mobile bottom sheet.
-   * @param {boolean} isOpen True when the sheet should be visible.
-   */
-  setBottomSheetVisualState(isOpen) {
-    this.nativeElement.style.transform = isOpen ? "translateY(0)" : "translateY(100%)";
-    const backdrop = this.getBackdropElement({ createPortal: isOpen || Boolean(this._portalBackdropElement) });
-    if (this.hasOpacity) {
-      this.nativeElement.style.opacity = isOpen ? 1 : 0;
-    }
-    if (backdrop) {
-      backdrop.style.opacity = isOpen ? this.getBackdropOpenOpacity() : "0";
-      backdrop.style.pointerEvents = isOpen ? "auto" : "none";
-    }
-    if (!isOpen) {
-      this.removePortalBackdrop();
-    }
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i2;
+    this.classList.contains("bottom-sheet") && (this.classList.remove("bottom-sheet"), this.style.removeProperty("position"), this.resetBottomSheetLayerFrame(this), this.resetBottomSheetLayerFrame(this.backdropElement), this.removePortalBackdrop(), this.resetBottomSheetLayerFrame(this.wrapperDiv), this.transparentDiv && (this.transparentDiv.style.width = this._isOpen ? this.maxWidth : 0), (_a = this.nativeElement) == null ? void 0 : _a.style.removeProperty("left"), (_b = this.nativeElement) == null ? void 0 : _b.style.removeProperty("right"), (_c = this.nativeElement) == null ? void 0 : _c.style.removeProperty("bottom"), (_d = this.nativeElement) == null ? void 0 : _d.style.removeProperty("top"), (_e = this.nativeElement) == null ? void 0 : _e.style.removeProperty("height"), (_f = this.nativeElement) == null ? void 0 : _f.style.removeProperty("max-height"), (_g = this.nativeElement) == null ? void 0 : _g.style.removeProperty("transform"), this.nativeElement && ("right" === this.direction ? this.nativeElement.style.right = 0 : this.nativeElement.style.left = 0, this.nativeElement.style.width = this._isOpen ? this.maxWidth : 0), (_h = this.nativeInner) == null ? void 0 : _h.style.removeProperty("max-height"), this.nativeInner && (this.nativeInner.style.width = this.maxWidth), (_i2 = this.backdropElement) == null ? void 0 : _i2.style.removeProperty("opacity"), this._bottomSheetScopeFrame = null, this.endSheetDrag());
+  }
+  setBottomSheetVisualState(t2) {
+    this.nativeElement.style.transform = t2 ? "translateY(0)" : "translateY(100%)";
+    const e2 = this.getBackdropElement({ createPortal: t2 || Boolean(this._portalBackdropElement) });
+    this.hasOpacity && (this.nativeElement.style.opacity = t2 ? 1 : 0), e2 && (e2.style.opacity = t2 ? this.getBackdropOpenOpacity() : "0", e2.style.pointerEvents = t2 ? "auto" : "none"), t2 || this.removePortalBackdrop();
   }
-  /**
-   * Gets the CSS height limit used for the mobile bottom sheet.
-   * @returns {string} The CSS max height.
-   */
   getSheetMaxHeight() {
     return this.sheetMaxHeight || this.maxHeight;
   }
-  /**
-   * Applies the configured bottom sheet opening height.
-   */
   setSheetHeight() {
-    const maxHeightInPixels = this.getSheetMaxHeightInPixels();
-    this.nativeElement.style.maxHeight = maxHeightInPixels + "px";
-    if (!this.sheetHeight) {
-      this.nativeElement.style.removeProperty("height");
-      return;
-    }
-    const minHeight = Math.min(this.getSheetMinHeightInPixels(), maxHeightInPixels);
-    const height = this.resolveCssHeight(this.sheetHeight, maxHeightInPixels);
-    const clampedHeight = this.clamp(height, minHeight, maxHeightInPixels);
-    this.nativeElement.style.height = clampedHeight + "px";
-  }
-  /**
-   * Resolves the sheet minimum height in pixels.
-   * @returns {number} The minimum height.
-   */
+    const t2 = this.getSheetMaxHeightInPixels();
+    if (this.nativeElement.style.maxHeight = t2 + "px", !this.sheetHeight) return void this.nativeElement.style.removeProperty("height");
+    const e2 = Math.min(this.getSheetMinHeightInPixels(), t2), i2 = this.resolveCssHeight(this.sheetHeight, t2), n = this.clamp(i2, e2, t2);
+    this.nativeElement.style.height = n + "px";
+  }
   getSheetMinHeightInPixels() {
-    const availableHeight = this.getBottomSheetAvailableHeight();
-    return Math.min(
-      this.resolveCssHeight(this.sheetMinHeight || "30vh", availableHeight * 0.3),
-      availableHeight
-    );
-  }
-  /**
-   * Resolves the sheet maximum height in pixels.
-   * @returns {number} The maximum height.
-   */
+    const t2 = this.getBottomSheetAvailableHeight();
+    return Math.min(this.resolveCssHeight(this.sheetMinHeight || "30vh", 0.3 * t2), t2);
+  }
   getSheetMaxHeightInPixels() {
-    const availableHeight = this.getBottomSheetAvailableHeight();
-    return Math.min(
-      this.resolveCssHeight(this.getSheetMaxHeight(), availableHeight * 0.9),
-      availableHeight
-    );
-  }
-  /**
-   * Returns available height for the bottom sheet scope.
-   * @returns {number} Pixel height that can be used inside the current sheet frame.
-   */
+    const t2 = this.getBottomSheetAvailableHeight();
+    return Math.min(this.resolveCssHeight(this.getSheetMaxHeight(), 0.9 * t2), t2);
+  }
   getBottomSheetAvailableHeight() {
     var _a;
     return ((_a = this._bottomSheetScopeFrame) == null ? void 0 : _a.height) || this.getBottomSheetScopeFrame().height || window.innerHeight;
   }
-  /**
-   * Resolves a CSS height value against the viewport.
-   * @param {string} value The configured sheet height.
-   * @param {number} fallback The fallback height in pixels.
-   * @returns {number} The resolved height.
-   */
-  resolveCssHeight(value, fallback) {
-    if (!value || value === "auto") return fallback;
-    const normalizedValue = `${value}`.trim();
-    const parsedValue = Number.parseFloat(normalizedValue);
-    if (Number.isNaN(parsedValue)) return fallback;
-    if (normalizedValue.endsWith("px")) return parsedValue;
-    if (normalizedValue.endsWith("vh")) return window.innerHeight * parsedValue / 100;
-    if (normalizedValue.endsWith("vw")) return window.innerWidth * parsedValue / 100;
-    if (normalizedValue.endsWith("%")) return window.innerHeight * parsedValue / 100;
-    if (/^-?\d+(\.\d+)?$/.test(normalizedValue)) return parsedValue;
-    return fallback;
-  }
-  /**
-   * Clamps a number between min and max.
-   * @param {number} value The measured height.
-   * @param {number} min The minimum.
-   * @param {number} max The maximum.
-   * @returns {number} The clamped value.
-   */
-  clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-  }
-  /**
-   * Checks whether an event came from the resize handle.
-   * @param {Event} e The event to check.
-   * @returns {boolean} True when the event belongs to the resize handle.
-   */
-  isSheetHandleEvent(e) {
-    if (!(e == null ? void 0 : e.composedPath)) return false;
-    return e.composedPath().includes(this.sheetHandleArea);
-  }
-  /**
-   * Checks whether an event happened inside the visible bottom sheet.
-   * @param {Event} e The event to check.
-   * @returns {boolean} True when the event coordinates are inside the sheet.
-   */
-  isEventInsideSheet(e) {
-    if (!this.nativeElement || typeof (e == null ? void 0 : e.clientX) !== "number" || typeof (e == null ? void 0 : e.clientY) !== "number") return false;
-    const rect = this.nativeElement.getBoundingClientRect();
-    return e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
-  }
-  /**
-   * Stores the initial drag state for the mobile bottom sheet.
-   * @param {number|string} pointerId The pointer identifier.
-   * @param {number} startY The starting Y coordinate.
-   */
-  startSheetDrag(pointerId, startY) {
+  resolveCssHeight(t2, e2) {
+    if (!t2 || "auto" === t2) return e2;
+    const i2 = `${t2}`.trim(), n = Number.parseFloat(i2);
+    return Number.isNaN(n) ? e2 : i2.endsWith("px") ? n : i2.endsWith("vh") ? window.innerHeight * n / 100 : i2.endsWith("vw") ? window.innerWidth * n / 100 : i2.endsWith("%") ? window.innerHeight * n / 100 : /^-?\d+(\.\d+)?$/.test(i2) ? n : e2;
+  }
+  clamp(t2, e2, i2) {
+    return Math.min(Math.max(t2, e2), i2);
+  }
+  isSheetHandleEvent(t2) {
+    return !!(t2 == null ? void 0 : t2.composedPath) && t2.composedPath().includes(this.sheetHandleArea);
+  }
+  isEventInsideSheet(t2) {
+    if (!this.nativeElement || "number" != typeof (t2 == null ? void 0 : t2.clientX) || "number" != typeof (t2 == null ? void 0 : t2.clientY)) return false;
+    const e2 = this.nativeElement.getBoundingClientRect();
+    return t2.clientX >= e2.left && t2.clientX <= e2.right && t2.clientY >= e2.top && t2.clientY <= e2.bottom;
+  }
+  startSheetDrag(t2, e2) {
     var _a, _b;
-    if (this.classList.contains("open")) {
-      this.setBottomSheetVisualState(true);
-    }
-    (_a = this.animation) == null ? void 0 : _a.cancel();
-    (_b = this.nativeAnimation) == null ? void 0 : _b.cancel();
-    this.animation = null;
-    this.nativeAnimation = null;
-    const fallbackHeight = this.resolveCssHeight(this.sheetHeight, window.innerHeight * 0.5);
-    const currentHeight = this.nativeElement.getBoundingClientRect().height || fallbackHeight;
-    this._sheetDrag = {
-      pointerId,
-      startY,
-      startHeight: currentHeight,
-      minHeight: this.getSheetMinHeightInPixels(),
-      maxHeight: this.getSheetMaxHeightInPixels(),
-      hasMoved: false
-    };
-  }
-  /**
-   * Applies a new height while the bottom sheet is being dragged.
-   * @param {number} clientY The current Y coordinate.
-   */
-  updateSheetDrag(clientY) {
-    const distance = this._sheetDrag.startY - clientY;
-    if (Math.abs(distance) > 3) {
-      this._sheetDrag.hasMoved = true;
-    }
-    const height = this.clamp(
-      this._sheetDrag.startHeight + distance,
-      this._sheetDrag.minHeight,
-      this._sheetDrag.maxHeight
-    );
-    this.nativeElement.style.height = height + "px";
-  }
-  /**
-   * Cleans up mobile bottom sheet resizing listeners.
-   */
+    this.classList.contains("open") && this.setBottomSheetVisualState(true), (_a = this.animation) == null ? void 0 : _a.cancel(), (_b = this.nativeAnimation) == null ? void 0 : _b.cancel(), this.animation = null, this.nativeAnimation = null;
+    const i2 = this.resolveCssHeight(this.sheetHeight, 0.5 * window.innerHeight), n = this.nativeElement.getBoundingClientRect().height || i2;
+    this._sheetDrag = { pointerId: t2, startY: e2, startHeight: n, minHeight: this.getSheetMinHeightInPixels(), maxHeight: this.getSheetMaxHeightInPixels(), hasMoved: false };
+  }
+  updateSheetDrag(t2) {
+    const e2 = this._sheetDrag.startY - t2;
+    Math.abs(e2) > 3 && (this._sheetDrag.hasMoved = true);
+    const i2 = this.clamp(this._sheetDrag.startHeight + e2, this._sheetDrag.minHeight, this._sheetDrag.maxHeight);
+    this.nativeElement.style.height = i2 + "px";
+  }
   endSheetDrag() {
-    window.removeEventListener("pointermove", this.handleSheetDragMove);
-    window.removeEventListener("pointerup", this.handleSheetDragEnd);
-    window.removeEventListener("pointercancel", this.handleSheetDragEnd);
-    window.removeEventListener("touchmove", this.handleSheetTouchMove);
-    window.removeEventListener("touchend", this.handleSheetTouchEnd);
-    window.removeEventListener("touchcancel", this.handleSheetTouchEnd);
-    this._sheetDrag = null;
-  }
-  /**
-   * Executes before the element is opened.
-   */
-  beforeOpen(e) {
-  }
-  /**
-   * Callback function called after the element is opened.
-   */
-  afterOpen(e) {
-  }
-  /**
-   * Executes before closing the element.
-   */
-  beforeClose(e) {
-  }
-  /**
-   * Callback function that is called after the container is closed.
-   */
-  afterClose(e) {
-  }
-  /**
-   * Animates the transition of elements with specified options, toggling the visibility and/or dimensions
-   * of the associated elements based on their current state.
-   *
-   * This method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)
-   * with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided
-   * elements before initiating a new animation sequence.
-   * @returns {Promise<void>} A promise that resolves when the transition animation is completed.
-   */
+    window.removeEventListener("pointermove", this.handleSheetDragMove), window.removeEventListener("pointerup", this.handleSheetDragEnd), window.removeEventListener("pointercancel", this.handleSheetDragEnd), window.removeEventListener("touchmove", this.handleSheetTouchMove), window.removeEventListener("touchend", this.handleSheetTouchEnd), window.removeEventListener("touchcancel", this.handleSheetTouchEnd), this._sheetDrag = null;
+  }
+  beforeOpen(t2) {
+  }
+  afterOpen(t2) {
+  }
+  beforeClose(t2) {
+  }
+  afterClose(t2) {
+  }
   doAnimateTransition() {
     var _a, _b, _c, _d;
-    const options = {
-      delay: 0,
-      endDelay: 0,
-      fill: "forwards",
-      duration: +this.animationDuration,
-      iterationStart: 0,
-      iterations: 1,
-      direction: "normal",
-      easing: this.animationEasing
-    };
-    if (this.isBottomSheet()) {
-      return this.doAnimateBottomSheetTransition(options);
-    }
-    if (this.animation && ((_b = (_a = this.animation) == null ? void 0 : _a.effect) == null ? void 0 : _b.target) !== this.transparentDiv) {
-      this.animation.cancel();
-      this.animation = null;
-    }
-    if (this.nativeAnimation && ((_d = (_c = this.nativeAnimation) == null ? void 0 : _c.effect) == null ? void 0 : _d.target) !== this.nativeElement) {
-      this.nativeAnimation.cancel();
-      this.nativeAnimation = null;
-    }
-    if (!this._isOpen) {
-      if (this.animation && this.nativeAnimation) {
-        this.animation.reverse();
-        this.nativeAnimation.reverse();
-      } else {
-        this.animation = this.transparentDiv.animate(
-          [
-            {
-              width: 0
-            },
-            {
-              width: this.maxWidth
-            }
-          ],
-          options
-        );
-        this.nativeAnimation = this.nativeElement.animate(
-          [
-            {
-              ...this.hasOpacity ? { opacity: 0 } : {},
-              width: 0
-            },
-            {
-              ...this.hasOpacity ? { opacity: 1 } : {},
-              width: this.maxWidth
-            }
-          ],
-          options
-        );
-      }
-    } else {
-      if (this.animation && this.nativeAnimation) {
-        this.animation.reverse();
-        this.nativeAnimation.reverse();
-      } else {
-        this.animation = this.transparentDiv.animate(
-          [
-            {
-              width: this.maxWidth
-            },
-            {
-              width: 0
-            }
-          ],
-          options
-        );
-        this.nativeAnimation = this.nativeElement.animate(
-          [
-            {
-              ...this.hasOpacity ? { opacity: 1 } : {},
-              width: this.maxWidth
-            },
-            {
-              ...this.hasOpacity ? { opacity: 0 } : {},
-              width: 0
-            }
-          ],
-          options
-        );
-      }
-    }
-    return new Promise((resolve) => {
+    const t2 = { delay: 0, endDelay: 0, fill: "forwards", duration: +this.animationDuration, iterationStart: 0, iterations: 1, direction: "normal", easing: this.animationEasing };
+    return this.isBottomSheet() ? this.doAnimateBottomSheetTransition(t2) : (this.animation && ((_b = (_a = this.animation) == null ? void 0 : _a.effect) == null ? void 0 : _b.target) !== this.transparentDiv && (this.animation.cancel(), this.animation = null), this.nativeAnimation && ((_d = (_c = this.nativeAnimation) == null ? void 0 : _c.effect) == null ? void 0 : _d.target) !== this.nativeElement && (this.nativeAnimation.cancel(), this.nativeAnimation = null), this._isOpen ? this.animation && this.nativeAnimation ? (this.animation.reverse(), this.nativeAnimation.reverse()) : (this.animation = this.transparentDiv.animate([{ width: this.maxWidth }, { width: 0 }], t2), this.nativeAnimation = this.nativeElement.animate([{ ...this.hasOpacity ? { opacity: 1 } : {}, width: this.maxWidth }, { ...this.hasOpacity ? { opacity: 0 } : {}, width: 0 }], t2)) : this.animation && this.nativeAnimation ? (this.animation.reverse(), this.nativeAnimation.reverse()) : (this.animation = this.transparentDiv.animate([{ width: 0 }, { width: this.maxWidth }], t2), this.nativeAnimation = this.nativeElement.animate([{ ...this.hasOpacity ? { opacity: 0 } : {}, width: 0 }, { ...this.hasOpacity ? { opacity: 1 } : {}, width: this.maxWidth }], t2)), new Promise((t3) => {
       this.animation.onfinish = () => {
-        this._isOpen = !this._isOpen;
-        resolve();
+        this._isOpen = !this._isOpen, t3();
       };
-    });
+    }));
   }
-  /**
-   * Animates the mobile bottom sheet and its backdrop.
-   * @param {object} options Web Animation options.
-   * @returns {Promise<void>}
-   */
-  doAnimateBottomSheetTransition(options) {
+  doAnimateBottomSheetTransition(t2) {
     var _a, _b, _c, _d;
-    const shouldOpen = !this._isOpen;
-    const backdropElement = this.getBackdropElement({ createPortal: true });
-    const closedBackdrop = {
-      opacity: 0
-    };
-    const openBackdrop = {
-      opacity: this.getBackdropOpenOpacity()
-    };
-    const closedSheet = {
-      ...this.hasOpacity ? { opacity: 0 } : {},
-      transform: "translateY(100%)"
-    };
-    const openSheet = {
-      ...this.hasOpacity ? { opacity: 1 } : {},
-      transform: "translateY(0)"
-    };
-    if (this.animation && ((_b = (_a = this.animation) == null ? void 0 : _a.effect) == null ? void 0 : _b.target) !== backdropElement) {
-      this.animation.cancel();
-      this.animation = null;
-    }
-    if (this.nativeAnimation && ((_d = (_c = this.nativeAnimation) == null ? void 0 : _c.effect) == null ? void 0 : _d.target) !== this.nativeElement) {
-      this.nativeAnimation.cancel();
-      this.nativeAnimation = null;
-    }
-    if (shouldOpen) {
-      if (this.animation && this.nativeAnimation) {
-        this.animation.reverse();
-        this.nativeAnimation.reverse();
-      } else {
-        this.animation = backdropElement.animate([closedBackdrop, openBackdrop], options);
-        this.nativeAnimation = this.nativeElement.animate([closedSheet, openSheet], options);
-      }
-    } else {
-      if (this.animation && this.nativeAnimation) {
-        this.animation.reverse();
-        this.nativeAnimation.reverse();
-      } else {
-        this.animation = backdropElement.animate([openBackdrop, closedBackdrop], options);
-        this.nativeAnimation = this.nativeElement.animate([openSheet, closedSheet], options);
-      }
-    }
-    return new Promise((resolve) => {
-      let isFinished = false;
-      const finish = () => {
-        if (isFinished) return;
-        isFinished = true;
-        this._isOpen = shouldOpen;
-        this.classList.toggle("open", shouldOpen);
-        this.setBottomSheetVisualState(shouldOpen);
-        resolve();
+    const e2 = !this._isOpen, i2 = this.getBackdropElement({ createPortal: true }), n = { opacity: 0 }, s = { opacity: this.getBackdropOpenOpacity() }, a = { ...this.hasOpacity ? { opacity: 0 } : {}, transform: "translateY(100%)" }, o = { ...this.hasOpacity ? { opacity: 1 } : {}, transform: "translateY(0)" };
+    return this.animation && ((_b = (_a = this.animation) == null ? void 0 : _a.effect) == null ? void 0 : _b.target) !== i2 && (this.animation.cancel(), this.animation = null), this.nativeAnimation && ((_d = (_c = this.nativeAnimation) == null ? void 0 : _c.effect) == null ? void 0 : _d.target) !== this.nativeElement && (this.nativeAnimation.cancel(), this.nativeAnimation = null), e2 ? this.animation && this.nativeAnimation ? (this.animation.reverse(), this.nativeAnimation.reverse()) : (this.animation = i2.animate([n, s], t2), this.nativeAnimation = this.nativeElement.animate([a, o], t2)) : this.animation && this.nativeAnimation ? (this.animation.reverse(), this.nativeAnimation.reverse()) : (this.animation = i2.animate([s, n], t2), this.nativeAnimation = this.nativeElement.animate([o, a], t2)), new Promise((t3) => {
+      let i3 = false;
+      const n2 = () => {
+        i3 || (i3 = true, this._isOpen = e2, this.classList.toggle("open", e2), this.setBottomSheetVisualState(e2), t3());
       };
-      this.nativeAnimation.onfinish = finish;
-      this.nativeAnimation.oncancel = finish;
+      this.nativeAnimation.onfinish = n2, this.nativeAnimation.oncancel = n2;
     });
   }
-  /**
-   * Opens the sliding container by performing necessary preparatory and transitional operations.
-   * @param {Event} e The event that triggered the open operation.
-   * @returns {Promise<void>} A promise that resolves when the open operation, including animations and subsequent handlers, is complete.
-   */
-  async open(e) {
-    await Promise.resolve(this.beforeOpen(e)).then(async () => {
-      if (!this._isOpen) {
-        this.classList.add("open");
-        event.dispatchCustomEvent(this, "wje-sliding-container:beforeOpen");
-        this.checkForVariant(this.variant);
-        await this.doAnimateTransition();
-        this.syncAria();
-        await Promise.resolve(this.afterOpen(e)).then(() => {
-          event.dispatchCustomEvent(this, "wje-sliding-container:open");
-        });
-      }
+  async open(t2) {
+    await Promise.resolve(this.beforeOpen(t2)).then(async () => {
+      this._isOpen || (this.classList.add("open"), e.dispatchCustomEvent(this, "wje-sliding-container:beforeOpen"), this.checkForVariant(this.variant), await this.doAnimateTransition(), this.syncAria(), await Promise.resolve(this.afterOpen(t2)).then(() => {
+        e.dispatchCustomEvent(this, "wje-sliding-container:open");
+      }));
     });
   }
-  /**
-   * Closes the sliding container and performs associated operations such as animations and event dispatches.
-   * @param {Event} e The event object associated with the close action.
-   * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.
-   */
-  async close(e) {
-    if (this.isBottomSheet() && e instanceof Event && (this.isSheetHandleEvent(e) || this.isBackdropElement(e.target) && Date.now() < this._sheetIgnoreDismissUntil)) {
-      return;
-    }
-    await Promise.resolve(this.beforeClose(e)).then(async () => {
-      if (this._isOpen) {
-        this.classList.remove("open");
-        event.dispatchCustomEvent(this, "wje-sliding-container:beforeClose");
-        await this.doAnimateTransition().catch(() => {
-          if (this.isBottomSheet()) {
-            this.setBottomSheetClosedState();
-          }
-        });
-        this.syncAria();
-        await Promise.resolve(this.afterClose(e)).then(() => {
-          if (this.removeChildAfterClose) {
-            this.childNodes.forEach((child) => {
-              child.remove();
-            });
-          }
-          event.dispatchCustomEvent(this, "wje-sliding-container:afterClose");
-        });
-      }
+  async close(t2) {
+    this.isBottomSheet() && t2 instanceof Event && (this.isSheetHandleEvent(t2) || this.isBackdropElement(t2.target) && Date.now() < this._sheetIgnoreDismissUntil) || await Promise.resolve(this.beforeClose(t2)).then(async () => {
+      this._isOpen && (this.classList.remove("open"), e.dispatchCustomEvent(this, "wje-sliding-container:beforeClose"), await this.doAnimateTransition().catch(() => {
+        this.isBottomSheet() && this.setBottomSheetClosedState();
+      }), this.syncAria(), await Promise.resolve(this.afterClose(t2)).then(() => {
+        this.removeChildAfterClose && this.childNodes.forEach((t3) => {
+          t3.remove();
+        }), e.dispatchCustomEvent(this, "wje-sliding-container:afterClose");
+      }));
     });
   }
-  /**
-   * Forces the closed visual state for the mobile bottom sheet.
-   */
   setBottomSheetClosedState() {
-    this._isOpen = false;
-    this.classList.remove("open");
-    this.setBottomSheetVisualState(false);
-  }
-  /**
-   * Toggles the state between open and closed.
-   * @param {Event} e The event object triggering the toggle.
-   * @returns {Promise<void>} A promise that resolves once the toggle operation (open or close) is complete.
-   */
-  async toggle(e) {
-    if (this._isOpen) {
-      await this.close(e);
-    } else {
-      await this.open(e);
-    }
+    this._isOpen = false, this.classList.remove("open"), this.setBottomSheetVisualState(false);
+  }
+  async toggle(t2) {
+    this._isOpen ? await this.close(t2) : await this.open(t2);
   }
-  /**
-   * Cleans up resources associated with the component by disconnecting
-   * the resize observer and setting it to null.
-   * @returns {void} Does not return a value.
-   */
   componentCleanup() {
     var _a;
-    this.endSheetDrag();
-    this.removePortalBackdrop();
-    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
-    this._resizeObserver = null;
+    this.endSheetDrag(), this.removePortalBackdrop(), (_a = this._resizeObserver) == null ? void 0 : _a.disconnect(), this._resizeObserver = null;
   }
 }
-SlidingContainer.define("wje-sliding-container", SlidingContainer);
+i.define("wje-sliding-container", i);
 export {
-  SlidingContainer as default
+  i as default
 };
 //# sourceMappingURL=wje-sliding-container.js.map