@duskmoon-dev/el-bottom-sheet 0.4.0

package/dist/cjs/index.js

@@ -0,0 +1,425 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  register: () => register,
+  ElDmBottomSheet: () => ElDmBottomSheet
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/el-dm-bottom-sheet.ts
+var import_el_core = require("@duskmoon-dev/el-core");
+var styles = import_el_core.css`
+  :host {
+    display: contents;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .bottom-sheet-wrapper {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .bottom-sheet-wrapper.open {
+    pointer-events: auto;
+  }
+
+  .bottom-sheet-backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transition: opacity 300ms ease;
+  }
+
+  .bottom-sheet-wrapper.open .bottom-sheet-backdrop {
+    opacity: 1;
+  }
+
+  .bottom-sheet {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+    max-height: 100dvh;
+    background-color: var(--color-surface);
+    border-radius: 1rem 1rem 0 0;
+    box-shadow: 0 -4px 20px rgb(0 0 0 / 0.15);
+    transform: translateY(100%);
+    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
+    touch-action: none;
+    will-change: transform;
+    pointer-events: auto;
+  }
+
+  .bottom-sheet-wrapper.open .bottom-sheet {
+    transform: translateY(0);
+  }
+
+  .bottom-sheet.dragging {
+    transition: none;
+  }
+
+  .bottom-sheet-handle-area {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 0;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .bottom-sheet-handle-area:active {
+    cursor: grabbing;
+  }
+
+  .bottom-sheet-handle {
+    width: 2.5rem;
+    height: 0.25rem;
+    background-color: var(--color-outline);
+    border-radius: 0.125rem;
+    transition: background-color 150ms ease;
+  }
+
+  .bottom-sheet-handle-area:hover .bottom-sheet-handle {
+    background-color: var(--color-outline-variant, var(--color-outline));
+  }
+
+  .bottom-sheet-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem 0.75rem;
+    border-bottom: 1px solid var(--color-outline);
+  }
+
+  .bottom-sheet-header:empty {
+    display: none;
+  }
+
+  .bottom-sheet-content {
+    flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* Focus trap indicator for modal */
+  .bottom-sheet:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+  }
+
+  /* Safe area padding for notched devices */
+  @supports (padding-bottom: env(safe-area-inset-bottom)) {
+    .bottom-sheet-content {
+      padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+    }
+  }
+`;
+
+class ElDmBottomSheet extends import_el_core.BaseElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    modal: { type: Boolean, reflect: true },
+    persistent: { type: Boolean, reflect: true },
+    snapPoints: { type: String, reflect: true, attribute: "snap-points" }
+  };
+  _startY = 0;
+  _currentY = 0;
+  _sheetHeight = 0;
+  _isDragging = false;
+  _parsedSnapPoints = [];
+  _currentSnapIndex = -1;
+  _focusableElements = [];
+  _previouslyFocused = null;
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this._parseSnapPoints();
+  }
+  _parseSnapPoints() {
+    if (!this.snapPoints) {
+      this._parsedSnapPoints = [100];
+      return;
+    }
+    this._parsedSnapPoints = this.snapPoints.split(",").map((point) => {
+      const trimmed = point.trim();
+      if (trimmed.endsWith("%")) {
+        return parseFloat(trimmed);
+      }
+      return parseFloat(trimmed);
+    }).filter((point) => !isNaN(point) && point > 0 && point <= 100).sort((a, b) => a - b);
+    if (this._parsedSnapPoints.length === 0) {
+      this._parsedSnapPoints = [100];
+    }
+  }
+  _handleBackdropClick = (event) => {
+    if (!this.persistent && event.target === event.currentTarget) {
+      this.hide();
+    }
+  };
+  _handleKeyDown = (event) => {
+    if (event.key === "Escape" && !this.persistent) {
+      this.hide();
+      return;
+    }
+    if (this.modal && event.key === "Tab") {
+      this._trapFocus(event);
+    }
+  };
+  _trapFocus(event) {
+    const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+    if (!sheet)
+      return;
+    this._focusableElements = Array.from(sheet.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+    const slotContent = this.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    this._focusableElements.push(...Array.from(slotContent));
+    if (this._focusableElements.length === 0)
+      return;
+    const firstFocusable = this._focusableElements[0];
+    const lastFocusable = this._focusableElements[this._focusableElements.length - 1];
+    if (event.shiftKey && document.activeElement === firstFocusable) {
+      event.preventDefault();
+      lastFocusable.focus();
+    } else if (!event.shiftKey && document.activeElement === lastFocusable) {
+      event.preventDefault();
+      firstFocusable.focus();
+    }
+  }
+  _handleTouchStart = (event) => {
+    const touch = event.touches[0];
+    this._startY = touch.clientY;
+    this._isDragging = true;
+    const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+    if (sheet) {
+      this._sheetHeight = sheet.getBoundingClientRect().height;
+      sheet.classList.add("dragging");
+    }
+  };
+  _handleTouchMove = (event) => {
+    if (!this._isDragging)
+      return;
+    const touch = event.touches[0];
+    this._currentY = touch.clientY;
+    const deltaY = this._currentY - this._startY;
+    if (deltaY > 0) {
+      event.preventDefault();
+      const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+      if (sheet) {
+        sheet.style.transform = `translateY(${deltaY}px)`;
+      }
+    }
+  };
+  _handleTouchEnd = () => {
+    if (!this._isDragging)
+      return;
+    this._isDragging = false;
+    const deltaY = this._currentY - this._startY;
+    const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+    if (sheet) {
+      sheet.classList.remove("dragging");
+      sheet.style.transform = "";
+    }
+    const threshold = this._sheetHeight * 0.25;
+    if (!this.persistent && deltaY > threshold) {
+      this.hide();
+    } else if (this._parsedSnapPoints.length > 1) {
+      this._snapToNearestPoint(deltaY);
+    }
+    this._startY = 0;
+    this._currentY = 0;
+  };
+  _handleMouseDown = (event) => {
+    this._startY = event.clientY;
+    this._isDragging = true;
+    const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+    if (sheet) {
+      this._sheetHeight = sheet.getBoundingClientRect().height;
+      sheet.classList.add("dragging");
+    }
+    document.addEventListener("mousemove", this._handleMouseMove);
+    document.addEventListener("mouseup", this._handleMouseUp);
+  };
+  _handleMouseMove = (event) => {
+    if (!this._isDragging)
+      return;
+    this._currentY = event.clientY;
+    const deltaY = this._currentY - this._startY;
+    if (deltaY > 0) {
+      const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+      if (sheet) {
+        sheet.style.transform = `translateY(${deltaY}px)`;
+      }
+    }
+  };
+  _handleMouseUp = () => {
+    if (!this._isDragging)
+      return;
+    this._isDragging = false;
+    const deltaY = this._currentY - this._startY;
+    const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+    if (sheet) {
+      sheet.classList.remove("dragging");
+      sheet.style.transform = "";
+    }
+    document.removeEventListener("mousemove", this._handleMouseMove);
+    document.removeEventListener("mouseup", this._handleMouseUp);
+    const threshold = this._sheetHeight * 0.25;
+    if (!this.persistent && deltaY > threshold) {
+      this.hide();
+    } else if (this._parsedSnapPoints.length > 1) {
+      this._snapToNearestPoint(deltaY);
+    }
+    this._startY = 0;
+    this._currentY = 0;
+  };
+  _snapToNearestPoint(deltaY) {
+    const currentHeightPercent = (this._sheetHeight - deltaY) / window.innerHeight * 100;
+    let nearestIndex = 0;
+    let nearestDistance = Math.abs(this._parsedSnapPoints[0] - currentHeightPercent);
+    for (let i = 1;i < this._parsedSnapPoints.length; i++) {
+      const distance = Math.abs(this._parsedSnapPoints[i] - currentHeightPercent);
+      if (distance < nearestDistance) {
+        nearestDistance = distance;
+        nearestIndex = i;
+      }
+    }
+    if (nearestIndex !== this._currentSnapIndex) {
+      this._currentSnapIndex = nearestIndex;
+      const snapHeight = this._parsedSnapPoints[nearestIndex];
+      const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+      if (sheet) {
+        sheet.style.height = `${snapHeight}vh`;
+      }
+      this.emit("snap", {
+        height: `${snapHeight}%`,
+        index: nearestIndex
+      });
+    }
+  }
+  show() {
+    this._parseSnapPoints();
+    this._previouslyFocused = document.activeElement;
+    this.open = true;
+    document.addEventListener("keydown", this._handleKeyDown);
+    document.body.style.overflow = "hidden";
+    if (this._parsedSnapPoints.length > 0) {
+      this._currentSnapIndex = this._parsedSnapPoints.length - 1;
+      const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+      if (sheet) {
+        sheet.style.height = `${this._parsedSnapPoints[this._currentSnapIndex]}vh`;
+      }
+    }
+    this.emit("open");
+    if (this.modal) {
+      requestAnimationFrame(() => {
+        const sheet = this.shadowRoot?.querySelector(".bottom-sheet");
+        sheet?.focus();
+      });
+    }
+  }
+  hide() {
+    this.open = false;
+    document.removeEventListener("keydown", this._handleKeyDown);
+    document.body.style.overflow = "";
+    this.emit("close");
+    if (this._previouslyFocused) {
+      this._previouslyFocused.focus();
+      this._previouslyFocused = null;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    document.removeEventListener("keydown", this._handleKeyDown);
+    document.removeEventListener("mousemove", this._handleMouseMove);
+    document.removeEventListener("mouseup", this._handleMouseUp);
+    document.body.style.overflow = "";
+  }
+  render() {
+    return `
+      <div class="bottom-sheet-wrapper ${this.open ? "open" : ""}" part="wrapper">
+        ${this.modal ? '<div class="bottom-sheet-backdrop" part="backdrop"></div>' : ""}
+        <div
+          class="bottom-sheet"
+          role="dialog"
+          aria-modal="${this.modal ? "true" : "false"}"
+          tabindex="-1"
+          part="sheet"
+        >
+          <div class="bottom-sheet-handle-area" part="handle-area">
+            <div class="bottom-sheet-handle" part="handle"></div>
+          </div>
+          <div class="bottom-sheet-header" part="header">
+            <slot name="header"></slot>
+          </div>
+          <div class="bottom-sheet-content" part="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  update() {
+    super.update();
+    const backdrop = this.shadowRoot?.querySelector(".bottom-sheet-backdrop");
+    backdrop?.addEventListener("click", this._handleBackdropClick);
+    const handleArea = this.shadowRoot?.querySelector(".bottom-sheet-handle-area");
+    handleArea?.addEventListener("touchstart", this._handleTouchStart, {
+      passive: false
+    });
+    handleArea?.addEventListener("touchmove", this._handleTouchMove, {
+      passive: false
+    });
+    handleArea?.addEventListener("touchend", this._handleTouchEnd);
+    handleArea?.addEventListener("mousedown", this._handleMouseDown);
+  }
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-bottom-sheet")) {
+    customElements.define("el-dm-bottom-sheet", ElDmBottomSheet);
+  }
+}
+
+//# debugId=F0E78987FED4EAE464756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": ["../../src/el-dm-bottom-sheet.ts", "../../src/index.ts"],
+  "sourcesContent": [
+    "/**\n * DuskMoon Bottom Sheet Element\n *\n * A mobile bottom panel/sheet component for displaying content that slides up from the bottom.\n * Supports snap points, swipe gestures, and modal mode.\n *\n * @element el-dm-bottom-sheet\n *\n * @attr {boolean} open - Whether the bottom sheet is open\n * @attr {boolean} modal - Whether to show backdrop and trap focus\n * @attr {boolean} persistent - Prevent dismiss by outside click or swipe down\n * @attr {string} snap-points - Comma-separated list of snap point heights (e.g., \"25%,50%,100%\")\n *\n * @slot - Default slot for sheet content\n * @slot header - Header content above the drag handle\n *\n * @csspart sheet - The sheet container\n * @csspart backdrop - The backdrop overlay (modal mode)\n * @csspart handle - The drag handle\n * @csspart content - The content wrapper\n * @csspart header - The header section\n *\n * @fires open - Fired when sheet opens\n * @fires close - Fired when sheet closes\n * @fires snap - Fired when sheet snaps to a point, detail contains { height, index }\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nconst styles = css`\n  :host {\n    display: contents;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  .bottom-sheet-wrapper {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    pointer-events: none;\n  }\n\n  .bottom-sheet-wrapper.open {\n    pointer-events: auto;\n  }\n\n  .bottom-sheet-backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    opacity: 0;\n    transition: opacity 300ms ease;\n  }\n\n  .bottom-sheet-wrapper.open .bottom-sheet-backdrop {\n    opacity: 1;\n  }\n\n  .bottom-sheet {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    flex-direction: column;\n    max-height: 100vh;\n    max-height: 100dvh;\n    background-color: var(--color-surface);\n    border-radius: 1rem 1rem 0 0;\n    box-shadow: 0 -4px 20px rgb(0 0 0 / 0.15);\n    transform: translateY(100%);\n    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n    touch-action: none;\n    will-change: transform;\n    pointer-events: auto;\n  }\n\n  .bottom-sheet-wrapper.open .bottom-sheet {\n    transform: translateY(0);\n  }\n\n  .bottom-sheet.dragging {\n    transition: none;\n  }\n\n  .bottom-sheet-handle-area {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.75rem 0;\n    cursor: grab;\n    touch-action: none;\n  }\n\n  .bottom-sheet-handle-area:active {\n    cursor: grabbing;\n  }\n\n  .bottom-sheet-handle {\n    width: 2.5rem;\n    height: 0.25rem;\n    background-color: var(--color-outline);\n    border-radius: 0.125rem;\n    transition: background-color 150ms ease;\n  }\n\n  .bottom-sheet-handle-area:hover .bottom-sheet-handle {\n    background-color: var(--color-outline-variant, var(--color-outline));\n  }\n\n  .bottom-sheet-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 1rem 0.75rem;\n    border-bottom: 1px solid var(--color-outline);\n  }\n\n  .bottom-sheet-header:empty {\n    display: none;\n  }\n\n  .bottom-sheet-content {\n    flex: 1;\n    padding: 1rem;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n\n  /* Focus trap indicator for modal */\n  .bottom-sheet:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: -2px;\n  }\n\n  /* Safe area padding for notched devices */\n  @supports (padding-bottom: env(safe-area-inset-bottom)) {\n    .bottom-sheet-content {\n      padding-bottom: calc(1rem + env(safe-area-inset-bottom));\n    }\n  }\n`;\n\ninterface SnapEvent {\n  height: string;\n  index: number;\n}\n\nexport class ElDmBottomSheet extends BaseElement {\n  static properties = {\n    open: { type: Boolean, reflect: true },\n    modal: { type: Boolean, reflect: true },\n    persistent: { type: Boolean, reflect: true },\n    snapPoints: { type: String, reflect: true, attribute: 'snap-points' },\n  };\n\n  declare open: boolean;\n  declare modal: boolean;\n  declare persistent: boolean;\n  declare snapPoints: string;\n\n  private _startY = 0;\n  private _currentY = 0;\n  private _sheetHeight = 0;\n  private _isDragging = false;\n  private _parsedSnapPoints: number[] = [];\n  private _currentSnapIndex = -1;\n  private _focusableElements: HTMLElement[] = [];\n  private _previouslyFocused: HTMLElement | null = null;\n\n  constructor() {\n    super();\n    this.attachStyles(styles);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback?.();\n    this._parseSnapPoints();\n  }\n\n  private _parseSnapPoints(): void {\n    if (!this.snapPoints) {\n      this._parsedSnapPoints = [100];\n      return;\n    }\n\n    this._parsedSnapPoints = this.snapPoints\n      .split(',')\n      .map((point) => {\n        const trimmed = point.trim();\n        if (trimmed.endsWith('%')) {\n          return parseFloat(trimmed);\n        }\n        return parseFloat(trimmed);\n      })\n      .filter((point) => !isNaN(point) && point > 0 && point <= 100)\n      .sort((a, b) => a - b);\n\n    if (this._parsedSnapPoints.length === 0) {\n      this._parsedSnapPoints = [100];\n    }\n  }\n\n  private _handleBackdropClick = (event: Event): void => {\n    if (!this.persistent && event.target === event.currentTarget) {\n      this.hide();\n    }\n  };\n\n  private _handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && !this.persistent) {\n      this.hide();\n      return;\n    }\n\n    if (this.modal && event.key === 'Tab') {\n      this._trapFocus(event);\n    }\n  };\n\n  private _trapFocus(event: KeyboardEvent): void {\n    const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n    if (!sheet) return;\n\n    this._focusableElements = Array.from(\n      sheet.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    );\n\n    const slotContent = this.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    this._focusableElements.push(...Array.from(slotContent));\n\n    if (this._focusableElements.length === 0) return;\n\n    const firstFocusable = this._focusableElements[0];\n    const lastFocusable = this._focusableElements[this._focusableElements.length - 1];\n\n    if (event.shiftKey && document.activeElement === firstFocusable) {\n      event.preventDefault();\n      lastFocusable.focus();\n    } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n      event.preventDefault();\n      firstFocusable.focus();\n    }\n  }\n\n  private _handleTouchStart = (event: TouchEvent): void => {\n    const touch = event.touches[0];\n    this._startY = touch.clientY;\n    this._isDragging = true;\n\n    const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n    if (sheet) {\n      this._sheetHeight = sheet.getBoundingClientRect().height;\n      sheet.classList.add('dragging');\n    }\n  };\n\n  private _handleTouchMove = (event: TouchEvent): void => {\n    if (!this._isDragging) return;\n\n    const touch = event.touches[0];\n    this._currentY = touch.clientY;\n    const deltaY = this._currentY - this._startY;\n\n    if (deltaY > 0) {\n      event.preventDefault();\n      const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n      if (sheet) {\n        sheet.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n  };\n\n  private _handleTouchEnd = (): void => {\n    if (!this._isDragging) return;\n\n    this._isDragging = false;\n    const deltaY = this._currentY - this._startY;\n    const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n\n    if (sheet) {\n      sheet.classList.remove('dragging');\n      sheet.style.transform = '';\n    }\n\n    const threshold = this._sheetHeight * 0.25;\n\n    if (!this.persistent && deltaY > threshold) {\n      this.hide();\n    } else if (this._parsedSnapPoints.length > 1) {\n      this._snapToNearestPoint(deltaY);\n    }\n\n    this._startY = 0;\n    this._currentY = 0;\n  };\n\n  private _handleMouseDown = (event: MouseEvent): void => {\n    this._startY = event.clientY;\n    this._isDragging = true;\n\n    const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n    if (sheet) {\n      this._sheetHeight = sheet.getBoundingClientRect().height;\n      sheet.classList.add('dragging');\n    }\n\n    document.addEventListener('mousemove', this._handleMouseMove);\n    document.addEventListener('mouseup', this._handleMouseUp);\n  };\n\n  private _handleMouseMove = (event: MouseEvent): void => {\n    if (!this._isDragging) return;\n\n    this._currentY = event.clientY;\n    const deltaY = this._currentY - this._startY;\n\n    if (deltaY > 0) {\n      const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n      if (sheet) {\n        sheet.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n  };\n\n  private _handleMouseUp = (): void => {\n    if (!this._isDragging) return;\n\n    this._isDragging = false;\n    const deltaY = this._currentY - this._startY;\n    const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n\n    if (sheet) {\n      sheet.classList.remove('dragging');\n      sheet.style.transform = '';\n    }\n\n    document.removeEventListener('mousemove', this._handleMouseMove);\n    document.removeEventListener('mouseup', this._handleMouseUp);\n\n    const threshold = this._sheetHeight * 0.25;\n\n    if (!this.persistent && deltaY > threshold) {\n      this.hide();\n    } else if (this._parsedSnapPoints.length > 1) {\n      this._snapToNearestPoint(deltaY);\n    }\n\n    this._startY = 0;\n    this._currentY = 0;\n  };\n\n  private _snapToNearestPoint(deltaY: number): void {\n    const currentHeightPercent = ((this._sheetHeight - deltaY) / window.innerHeight) * 100;\n\n    let nearestIndex = 0;\n    let nearestDistance = Math.abs(this._parsedSnapPoints[0] - currentHeightPercent);\n\n    for (let i = 1; i < this._parsedSnapPoints.length; i++) {\n      const distance = Math.abs(this._parsedSnapPoints[i] - currentHeightPercent);\n      if (distance < nearestDistance) {\n        nearestDistance = distance;\n        nearestIndex = i;\n      }\n    }\n\n    if (nearestIndex !== this._currentSnapIndex) {\n      this._currentSnapIndex = nearestIndex;\n      const snapHeight = this._parsedSnapPoints[nearestIndex];\n\n      const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n      if (sheet) {\n        sheet.style.height = `${snapHeight}vh`;\n      }\n\n      this.emit<SnapEvent>('snap', {\n        height: `${snapHeight}%`,\n        index: nearestIndex,\n      });\n    }\n  }\n\n  show(): void {\n    this._parseSnapPoints();\n    this._previouslyFocused = document.activeElement as HTMLElement;\n    this.open = true;\n    document.addEventListener('keydown', this._handleKeyDown);\n    document.body.style.overflow = 'hidden';\n\n    if (this._parsedSnapPoints.length > 0) {\n      this._currentSnapIndex = this._parsedSnapPoints.length - 1;\n      const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n      if (sheet) {\n        sheet.style.height = `${this._parsedSnapPoints[this._currentSnapIndex]}vh`;\n      }\n    }\n\n    this.emit('open');\n\n    if (this.modal) {\n      requestAnimationFrame(() => {\n        const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n        sheet?.focus();\n      });\n    }\n  }\n\n  hide(): void {\n    this.open = false;\n    document.removeEventListener('keydown', this._handleKeyDown);\n    document.body.style.overflow = '';\n\n    this.emit('close');\n\n    if (this._previouslyFocused) {\n      this._previouslyFocused.focus();\n      this._previouslyFocused = null;\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    document.removeEventListener('keydown', this._handleKeyDown);\n    document.removeEventListener('mousemove', this._handleMouseMove);\n    document.removeEventListener('mouseup', this._handleMouseUp);\n    document.body.style.overflow = '';\n  }\n\n  render(): string {\n    return `\n      <div class=\"bottom-sheet-wrapper ${this.open ? 'open' : ''}\" part=\"wrapper\">\n        ${this.modal ? '<div class=\"bottom-sheet-backdrop\" part=\"backdrop\"></div>' : ''}\n        <div\n          class=\"bottom-sheet\"\n          role=\"dialog\"\n          aria-modal=\"${this.modal ? 'true' : 'false'}\"\n          tabindex=\"-1\"\n          part=\"sheet\"\n        >\n          <div class=\"bottom-sheet-handle-area\" part=\"handle-area\">\n            <div class=\"bottom-sheet-handle\" part=\"handle\"></div>\n          </div>\n          <div class=\"bottom-sheet-header\" part=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"bottom-sheet-content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  update(): void {\n    super.update();\n\n    const backdrop = this.shadowRoot?.querySelector('.bottom-sheet-backdrop');\n    backdrop?.addEventListener('click', this._handleBackdropClick);\n\n    const handleArea = this.shadowRoot?.querySelector('.bottom-sheet-handle-area');\n    handleArea?.addEventListener('touchstart', this._handleTouchStart as EventListener, {\n      passive: false,\n    });\n    handleArea?.addEventListener('touchmove', this._handleTouchMove as EventListener, {\n      passive: false,\n    });\n    handleArea?.addEventListener('touchend', this._handleTouchEnd);\n    handleArea?.addEventListener('mousedown', this._handleMouseDown as EventListener);\n  }\n}\n",
+    "import { ElDmBottomSheet } from './el-dm-bottom-sheet.js';\n\nexport { ElDmBottomSheet };\n\nexport function register(): void {\n  if (!customElements.get('el-dm-bottom-sheet')) {\n    customElements.define('el-dm-bottom-sheet', ElDmBottomSheet);\n  }\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "F0E78987FED4EAE464756E2164756E21",
+  "names": []
+}