wj-elements 0.6.0 → 0.7.0

package/dist/wje-sliding-container.js

@@ -3,7 +3,9 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 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: 9999;\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: 1000;\n    }\n}\n\n:host([hide-button]) {\n    .close-button {\n        display: none;\n    }\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";
+const styles = ":host {\n    display: block;\n    z-index: 9999;\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: 1000;\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}\n\n:host(.bottom-sheet.open) {\n    pointer-events: auto;\n    overscroll-behavior: contain;\n}\n\n:host(.bottom-sheet) .sliding-container-backdrop {\n    display: block;\n    position: fixed;\n    inset: 0;\n    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: 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: ns-resize;\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 {\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";
+let documentScrollLocks = 0;
+let documentScrollState = null;
 class SlidingContainer extends WJElement {
   /**
    * Creates an instance of SlidingContainer.
@@ -12,6 +14,183 @@ class SlidingContainer extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "SlidingContainer");
+    /**
+     * Stops a handle interaction from dismissing the bottom sheet.
+     * @param {Event} e The interaction emitted by the resize handle.
+     */
+    __publicField(this, "stopSheetHandleEvent", (e) => {
+      var _a;
+      if (!this.isBottomSheet()) return;
+      this._sheetIgnoreDismissUntil = Date.now() + 500;
+      e.preventDefault();
+      e.stopPropagation();
+      (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
+    });
+    /**
+     * 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();
+    });
+    /**
+     * Starts mobile bottom sheet resizing.
+     * @param {PointerEvent} e The pointer event.
+     */
+    __publicField(this, "handleSheetDragStart", (e) => {
+      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 {
+      }
+      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) => {
+      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 });
+    });
+    /**
+     * Starts tracking a possible backdrop dismiss tap.
+     * @param {PointerEvent} e The pointer event.
+     */
+    __publicField(this, "handleBackdropPointerStart", (e) => {
+      if (!this.isBottomSheet() || e.target !== this.backdropElement || this.isEventInsideSheet(e) || Date.now() < this._sheetIgnoreDismissUntil) {
+        this._sheetBackdropGesture = null;
+        return;
+      }
+      this._sheetBackdropGesture = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.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;
+      }
+    });
+    /**
+     * 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 && e.target === this.backdropElement && !this.isEventInsideSheet(e) && Date.now() >= this._sheetIgnoreDismissUntil;
+      this._sheetBackdropGesture = null;
+      this._sheetBackdropHandledUntil = Date.now() + 350;
+      if (shouldClose) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.close(e);
+      }
+    });
+    /**
+     * Cancels a possible backdrop dismiss tap.
+     */
+    __publicField(this, "handleBackdropPointerCancel", () => {
+      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) => {
+      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);
+    });
+    /**
+     * Resizes the mobile bottom sheet during touch dragging.
+     * @param {TouchEvent} e The touch event.
+     */
+    __publicField(this, "handleSheetTouchMove", (e) => {
+      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);
+    });
+    /**
+     * Ends mobile bottom sheet resizing.
+     * @param {PointerEvent} e The pointer event.
+     */
+    __publicField(this, "handleSheetDragEnd", (e) => {
+      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);
+        try {
+          (_c = this.sheetHandleArea) == null ? void 0 : _c.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+      }
+      if (hasMoved) {
+        this._sheetIgnoreDismissUntil = Date.now() + 350;
+      } else {
+        this._sheetIgnoreDismissUntil = Date.now() + 500;
+      }
+      this.endSheetDrag();
+    });
+    /**
+     * Ends mobile bottom sheet resizing from a touch event.
+     * @param {TouchEvent} e The touch event.
+     */
+    __publicField(this, "handleSheetTouchEnd", (e) => {
+      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();
+    });
     /**
      * 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.
@@ -28,11 +207,19 @@ class SlidingContainer extends WJElement {
     });
     this._isOpen = false;
     this._lastCaller = null;
+    this._sheetDrag = null;
+    this._sheetIgnoreDismissUntil = 0;
+    this._sheetBackdropGesture = null;
+    this._sheetBackdropHandledUntil = 0;
+    this._hasLockedDocumentScroll = false;
+    this._bottomSheetScopeFrame = null;
     this._resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
         if (entry.contentBoxSize) {
           if (this.drawingStatus < 3) return;
-          if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
+          if (this.isBottomSheet()) {
+            this.checkForVariant(this.variant);
+          } else if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
             if (this.variant !== "over") {
               this.variant = "over";
             } else {
@@ -155,6 +342,34 @@ class SlidingContainer extends WJElement {
   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.
+   */
+  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.
+   */
+  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
@@ -192,6 +407,97 @@ class SlidingContainer extends WJElement {
   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 scope.
+   * @returns {string} Either 'viewport', 'container', or 'parent'.
+   */
+  get sheetScope() {
+    return this.getAttribute("sheet-scope") || "viewport";
+  }
+  /**
+   * Sets the mobile bottom sheet 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 sheets.
+   * @returns {string|null} A CSS selector used to find the composed boundary ancestor.
+   */
+  get sheetBoundary() {
+    return this.getAttribute("sheet-boundary");
+  }
+  /**
+   * Sets the selector used for container-scoped mobile bottom sheets.
+   * @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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
@@ -220,7 +526,7 @@ class SlidingContainer extends WJElement {
    * @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"];
+    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.
@@ -244,6 +550,7 @@ class SlidingContainer extends WJElement {
     var _a, _b;
     (_a = this.animation) == null ? void 0 : _a.cancel();
     (_b = this.nativeAnimation) == null ? void 0 : _b.cancel();
+    this.endSheetDrag();
     document.removeEventListener(this.trigger, this.triggerEvent);
   }
   /**
@@ -255,44 +562,89 @@ class SlidingContainer extends WJElement {
    */
   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)";
+    }
+    backdrop.addEventListener("wheel", this.preventBottomSheetScroll, { passive: false });
+    backdrop.addEventListener("touchmove", this.preventBottomSheetScroll, { passive: false });
+    if (this.backdropDismiss) {
+      backdrop.addEventListener("pointerdown", this.handleBackdropPointerStart);
+      backdrop.addEventListener("pointermove", this.handleBackdropPointerMove);
+      backdrop.addEventListener("pointerup", this.handleBackdropPointerEnd);
+      backdrop.addEventListener("pointercancel", this.handleBackdropPointerCancel);
+      backdrop.addEventListener("click", (e) => {
+        if (this.isEventInsideSheet(e) || Date.now() < this._sheetIgnoreDismissUntil || Date.now() < this._sheetBackdropHandledUntil) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        if (e.target === backdrop) {
+          this.close(e);
+        }
+      });
+    }
     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) {
+    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 = 0;
+    native.style.width = isBottomSheet ? "100%" : 0;
     if (this.hasOpacity) {
       native.style.opacity = 0;
     }
     if (this._isOpen) {
-      native.style.width = this.maxWidth;
+      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 (this.direction === "right") {
+    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;
     }
-    let slot = document.createElement("slot");
     const nativeInner = document.createElement("div");
     nativeInner.classList.add("native-sliding-container-inner");
-    nativeInner.style.width = this.maxWidth;
+    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;
   }
   /**
@@ -304,11 +656,18 @@ class SlidingContainer extends WJElement {
   afterDraw() {
     this.syncAria();
     document.addEventListener(this.trigger, this.triggerEvent);
-    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
+    if (!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;
+  }
   /**
    * Sync ARIA attributes on host.
    */
@@ -341,6 +700,28 @@ class SlidingContainer extends WJElement {
     });
     return closeButton;
   }
+  /**
+   * 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.
@@ -353,6 +734,108 @@ class SlidingContainer extends WJElement {
     }
     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) {
+    var _a;
+    let currentElement = this;
+    while (currentElement) {
+      let matches = false;
+      try {
+        matches = currentElement instanceof Element && currentElement.matches(selector);
+      } catch {
+        return null;
+      }
+      if (matches) {
+        return currentElement;
+      }
+      if (currentElement.parentElement) {
+        currentElement = currentElement.parentElement;
+        continue;
+      }
+      const root = (_a = currentElement.getRootNode) == null ? void 0 : _a.call(currentElement);
+      currentElement = root instanceof ShadowRoot ? root.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.
+   * @returns {Element|null} The scope element, or null for viewport scope.
+   */
+  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.
+   * @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
+   */
+  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.
    *
@@ -362,6 +845,11 @@ class SlidingContainer extends WJElement {
    * @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") {
       this.style.position = "fixed";
       let computentStyleOfParent = window.getComputedStyle(this.getParentElement());
@@ -390,6 +878,286 @@ class SlidingContainer extends WJElement {
       }
     }
   }
+  /**
+   * Applies the mobile bottom sheet layout.
+   */
+  setBottomSheetVariant() {
+    const scopeFrame = this.getBottomSheetScopeFrame();
+    this._bottomSheetScopeFrame = scopeFrame;
+    this.classList.add("bottom-sheet");
+    this.style.position = "fixed";
+    this.setBottomSheetLayerFrame(this, scopeFrame);
+    this.setBottomSheetLayerFrame(this.backdropElement, scopeFrame);
+    this.setBottomSheetLayerFrame(this.wrapperDiv, scopeFrame);
+    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;
+  }
+  /**
+   * 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.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();
+    this.unlockDocumentScroll();
+  }
+  /**
+   * 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%)";
+    if (this.hasOpacity) {
+      this.nativeElement.style.opacity = isOpen ? 1 : 0;
+    }
+    this.backdropElement.style.opacity = isOpen ? "var(--wje-sliding-container-backdrop-opacity, 1)" : 0;
+  }
+  /**
+   * 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.
+   */
+  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.
+   */
+  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.
+   */
+  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;
+  }
+  /**
+   * Prevents the page behind the mobile bottom sheet from scrolling.
+   */
+  lockDocumentScroll() {
+    if (!this.isBottomSheet() || this.sheetScope !== "viewport" || this._hasLockedDocumentScroll) return;
+    if (documentScrollLocks === 0) {
+      documentScrollState = {
+        bodyOverflow: document.body.style.overflow,
+        documentOverflow: document.documentElement.style.overflow,
+        bodyOverscrollBehavior: document.body.style.overscrollBehavior,
+        documentOverscrollBehavior: document.documentElement.style.overscrollBehavior,
+        bodyPosition: document.body.style.position,
+        bodyTop: document.body.style.top,
+        bodyLeft: document.body.style.left,
+        bodyRight: document.body.style.right,
+        bodyWidth: document.body.style.width,
+        scrollX: window.scrollX,
+        scrollY: window.scrollY
+      };
+      document.body.style.overflow = "hidden";
+      document.documentElement.style.overflow = "hidden";
+      document.body.style.overscrollBehavior = "none";
+      document.documentElement.style.overscrollBehavior = "none";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${documentScrollState.scrollY}px`;
+      document.body.style.left = `-${documentScrollState.scrollX}px`;
+      document.body.style.right = "0";
+      document.body.style.width = "100%";
+    }
+    documentScrollLocks++;
+    this._hasLockedDocumentScroll = true;
+  }
+  /**
+   * Restores page scrolling after the mobile bottom sheet is closed.
+   */
+  unlockDocumentScroll() {
+    if (!this._hasLockedDocumentScroll) return;
+    documentScrollLocks = Math.max(documentScrollLocks - 1, 0);
+    this._hasLockedDocumentScroll = false;
+    if (documentScrollLocks > 0 || !documentScrollState) return;
+    document.body.style.overflow = documentScrollState.bodyOverflow;
+    document.documentElement.style.overflow = documentScrollState.documentOverflow;
+    document.body.style.overscrollBehavior = documentScrollState.bodyOverscrollBehavior;
+    document.documentElement.style.overscrollBehavior = documentScrollState.documentOverscrollBehavior;
+    document.body.style.position = documentScrollState.bodyPosition;
+    document.body.style.top = documentScrollState.bodyTop;
+    document.body.style.left = documentScrollState.bodyLeft;
+    document.body.style.right = documentScrollState.bodyRight;
+    document.body.style.width = documentScrollState.bodyWidth;
+    window.scrollTo(documentScrollState.scrollX, documentScrollState.scrollY);
+    documentScrollState = null;
+  }
+  /**
+   * 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) {
+    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.
+   */
+  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.
    */
@@ -431,6 +1199,9 @@ class SlidingContainer extends WJElement {
       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;
@@ -500,13 +1271,74 @@ class SlidingContainer extends WJElement {
         );
       }
     }
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       this.animation.onfinish = () => {
         this._isOpen = !this._isOpen;
         resolve();
       };
     });
   }
+  /**
+   * Animates the mobile bottom sheet and its backdrop.
+   * @param {object} options Web Animation options.
+   * @returns {Promise<void>}
+   */
+  doAnimateBottomSheetTransition(options) {
+    var _a, _b, _c, _d;
+    const shouldOpen = !this._isOpen;
+    const closedBackdrop = {
+      opacity: 0
+    };
+    const openBackdrop = {
+      opacity: "var(--wje-sliding-container-backdrop-opacity, 1)"
+    };
+    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) !== this.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 = this.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 = this.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();
+      };
+      this.nativeAnimation.onfinish = finish;
+      this.nativeAnimation.oncancel = finish;
+    });
+  }
   /**
    * Opens the sliding container by performing necessary preparatory and transitional operations.
    * @param {Event} e The event that triggered the open operation.
@@ -518,6 +1350,7 @@ class SlidingContainer extends WJElement {
         this.classList.add("open");
         event.dispatchCustomEvent(this, "wje-sliding-container:beforeOpen");
         this.checkForVariant(this.variant);
+        this.lockDocumentScroll();
         await this.doAnimateTransition();
         this.syncAria();
         await Promise.resolve(this.afterOpen(e)).then(() => {
@@ -532,12 +1365,20 @@ class SlidingContainer extends WJElement {
    * @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) || e.target === this.backdropElement && 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();
+        await this.doAnimateTransition().catch(() => {
+          if (this.isBottomSheet()) {
+            this.setBottomSheetClosedState();
+          }
+        });
         this.syncAria();
+        this.unlockDocumentScroll();
         await Promise.resolve(this.afterClose(e)).then(() => {
           if (this.removeChildAfterClose) {
             this.childNodes.forEach((child) => {
@@ -549,6 +1390,14 @@ class SlidingContainer extends WJElement {
       }
     });
   }
+  /**
+   * 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.
@@ -556,9 +1405,9 @@ class SlidingContainer extends WJElement {
    */
   async toggle(e) {
     if (this._isOpen) {
-      await this.close(event);
+      await this.close(e);
     } else {
-      await this.open(event);
+      await this.open(e);
     }
   }
   /**
@@ -568,6 +1417,8 @@ class SlidingContainer extends WJElement {
    */
   componentCleanup() {
     var _a;
+    this.endSheetDrag();
+    this.unlockDocumentScroll();
     (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
     this._resizeObserver = null;
   }