@surdeddd/bottom-sheet 0.6.1 → 0.8.0

package/dist/element.js

@@ -2597,6 +2597,7 @@ var init_BottomSheetEngine = __esm({
         __publicField(this, "progressWriteSentinel", new WriteSentinel());
         __publicField(this, "isTopSheet", true);
         __publicField(this, "opening", false);
+        __publicField(this, "allowOvershoot", false);
         __publicField(this, "progressPayload", {
           value: 0,
           size: 0
@@ -2887,8 +2888,8 @@ var init_BottomSheetEngine = __esm({
         this.updateAriaSlider();
         this.emit("snap", {
           id,
-          size: target.size,
-          progress: this.computeProgress(target.size)
+          size: this.size,
+          progress: this.computeProgress(this.size)
         });
         if (wasClosed && target.size > 0) {
           this.emit("open", { id });
@@ -2967,12 +2968,12 @@ var init_BottomSheetEngine = __esm({
         const value = typeof h === "number" ? `${h}px` : h;
         const axis = layoutAxis(this.mode);
         this.element.style.setProperty(
-          axis === "height" ? "maxHeight" : "maxWidth",
+          axis === "height" ? "max-height" : "max-width",
           value
         );
         if (typeof h === "number") {
           this.maxHeightCap = h;
-          this.clampToMaxHeight();
+          this.recompute();
         } else if (typeof window !== "undefined") {
           const probe2 = document.createElement("div");
           probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2980,7 +2981,7 @@ var init_BottomSheetEngine = __esm({
           const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
           probe2.remove();
           this.maxHeightCap = measured > 0 ? measured : void 0;
-          this.clampToMaxHeight();
+          this.recompute();
         }
       }
       clampToMaxHeight() {
@@ -2988,9 +2989,6 @@ var init_BottomSheetEngine = __esm({
         if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
           this.snaps.setMaxAxisSize(this.maxHeightCap);
         }
-        if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
-          this.applySize(this.maxHeightCap);
-        }
       }
       setAllowed(ids, snap) {
         if (this.destroyed) return;
@@ -3128,6 +3126,7 @@ var init_BottomSheetEngine = __esm({
       recompute() {
         if (this.destroyed) return;
         this.snaps.recompute();
+        this.clampToMaxHeight();
         this.scrim.invalidateOpacityCache();
         if (this.gesture?.isDragging) return;
         const current = this.snaps.findById(this.activeId);
@@ -3151,43 +3150,36 @@ var init_BottomSheetEngine = __esm({
         }
         return out;
       }
-      measureContentExtent(vertical) {
+      measureSheetNatural(vertical) {
+        const el = this.element;
         const content = this.scrollContainer;
-        if (!content) return 0;
-        const targets = this.contentTargets();
-        if (targets.length === 0) {
-          return vertical ? content.scrollHeight : content.scrollWidth;
-        }
-        let min = Infinity;
-        let max = -Infinity;
-        for (const el of targets) {
-          const r = el.getBoundingClientRect();
-          if (vertical) {
-            if (r.top < min) min = r.top;
-            if (r.bottom > max) max = r.bottom;
-          } else {
-            if (r.left < min) min = r.left;
-            if (r.right > max) max = r.right;
-          }
-        }
-        if (!isFinite(min) || !isFinite(max) || max <= min) {
-          return vertical ? content.scrollHeight : content.scrollWidth;
+        if (!content) {
+          return vertical ? el.offsetHeight : el.offsetWidth;
         }
-        let pad = 0;
-        if (typeof getComputedStyle !== "undefined") {
-          const cs = getComputedStyle(content);
-          pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
-        }
-        return max - min + pad;
+        const axis = vertical ? "height" : "width";
+        const sheetStyle = el.style;
+        const cs = content.style;
+        const prevSheet = sheetStyle[axis];
+        const prevFlex = cs.flex;
+        const prevContent = vertical ? cs.height : cs.width;
+        sheetStyle[axis] = "auto";
+        cs.flex = "none";
+        if (vertical) cs.height = "auto";
+        else cs.width = "auto";
+        const natural = vertical ? el.offsetHeight : el.offsetWidth;
+        sheetStyle[axis] = prevSheet;
+        cs.flex = prevFlex;
+        if (vertical) cs.height = prevContent;
+        else cs.width = prevContent;
+        return natural;
       }
       measureFitSize() {
         const vertical = layoutAxis(this.mode) === "height";
-        const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
-        const content = this.scrollContainer;
-        const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
-        if (typeof window === "undefined") return natural;
+        const natural = this.measureSheetNatural(vertical);
+        const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
+        if (typeof window === "undefined") return capped;
         const viewport = vertical ? window.innerHeight : window.innerWidth;
-        return viewport > 0 ? Math.min(natural, viewport) : natural;
+        return viewport > 0 ? Math.min(capped, viewport) : capped;
       }
       installFitObserver() {
         if (typeof ResizeObserver === "undefined") return;
@@ -3269,6 +3261,10 @@ var init_BottomSheetEngine = __esm({
           this.backdrop.style.opacity = "";
           this.backdrop.style.pointerEvents = "";
         }
+        if (this.anchorHost) {
+          this.anchorHost.style.removeProperty("--bs-size");
+          this.anchorHost.style.removeProperty("--bs-progress");
+        }
         if (this.screenComponent) {
           this.screenComponent.style.opacity = "";
           this.screenComponent.style.display = "";
@@ -3280,6 +3276,7 @@ var init_BottomSheetEngine = __esm({
         this.bus.emit(event, payload);
       }
       newCycle() {
+        this.allowOvershoot = false;
         this.currentAbort.abort();
         this.currentAbort = new AbortController();
         return this.currentAbort.signal;
@@ -3345,6 +3342,7 @@ var init_BottomSheetEngine = __esm({
           seen.add(p.id);
         }
         this.snaps.setRaw(this.snapPointsRaw);
+        this.clampToMaxHeight();
         this.scrim.invalidateOpacityCache();
       }
       getAllowedRange() {
@@ -3551,15 +3549,19 @@ var init_BottomSheetEngine = __esm({
           this.opening = true;
           sheetStack.promote(this.id);
         }
-        void this.animation.animateTo(target.size, velocity).then(() => {
-          this.opening = false;
+        const settleCap = this.snaps.getMaxAxisSize();
+        const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+        this.allowOvershoot = true;
+        void this.animation.animateTo(settleSize, velocity).then(() => {
           if (signal.aborted) return;
+          this.allowOvershoot = false;
+          this.opening = false;
           this.scrollCache.restore(target.id, previousSize, target.size);
           this.updateAriaSlider();
           this.emit("snap", {
             id: target.id,
-            size: target.size,
-            progress: this.computeProgress(target.size)
+            size: this.size,
+            progress: this.computeProgress(this.size)
           });
           this.haptic();
           if (previousSnapSize === 0 && target.size > 0) {
@@ -3584,23 +3586,25 @@ var init_BottomSheetEngine = __esm({
         }
       }
       applySize(size) {
-        this.size = size;
-        const offset = this.snaps.getMaxAxisSize() - size;
+        const cap = this.snaps.getMaxAxisSize();
+        const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
+        this.size = clamped;
+        const offset = cap - clamped;
         const style = this.element.style;
         style.transform = this.transformTemplate(offset);
-        if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
-          style.setProperty("--bs-size", `${size}px`);
+        if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+          style.setProperty("--bs-size", `${clamped}px`);
           if (this.scrimParent) {
-            this.scrimParent.style.setProperty("--bs-size", `${size}px`);
+            this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
           }
           if (this.anchorHost && this.anchorHost !== this.scrimParent) {
-            this.anchorHost.style.setProperty("--bs-size", `${size}px`);
+            this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
           }
           if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
-            this.rootEl.style.setProperty("--bs-size", `${size}px`);
+            this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
           }
         }
-        const progress = this.computeProgress(size);
+        const progress = this.computeProgress(clamped);
         const progressChanged = this.progressWriteSentinel.shouldWrite(
           progress,
           OPACITY_WRITE_EPSILON
@@ -3617,14 +3621,15 @@ var init_BottomSheetEngine = __esm({
         this.scrim.applyOpacity(progress, progressChanged);
         if (progressChanged && this.bus.listenerCount("progress") > 0) {
           this.progressPayload.value = progress;
-          this.progressPayload.size = size;
+          this.progressPayload.size = clamped;
           this.emit("progress", this.progressPayload);
         }
       }
       computeProgress(size) {
         const { min, max } = this.getAllowedRange();
-        if (max <= min) return 0;
-        return Math.min(Math.max((size - min) / (max - min), 0), 1);
+        const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
+        if (reachableMax <= min) return 0;
+        return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
       }
       handleOpen() {
         sheetStack.promote(this.id);
@@ -3648,8 +3653,8 @@ var init_BottomSheetEngine = __esm({
         this.updateAriaSlider();
         this.emit("snap", {
           id: target.id,
-          size: target.size,
-          progress: this.computeProgress(target.size)
+          size: this.size,
+          progress: this.computeProgress(this.size)
         });
         if (target.size > 0 && !this.lifecycle.isInstalled) {
           this.emit("open", { id: target.id });
@@ -3675,7 +3680,7 @@ var init_BottomSheetEngine = __esm({
 var baseStyles;
 var init_baseStyles = __esm({
   "src/web-component/baseStyles.ts"() {
-    baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-header-min-height:80px;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba(0,0,0,calc(var(--bs-progress,0) * 0.15 + 0.12))}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,0.12);padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:8px 16px 4px;cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-header{flex:0 0 auto;padding:0 16px 8px;background:var(--bs-surface,var(--bs-surface-d))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:0 16px 16px}.bs-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)){padding-bottom:0}.bs-header:not(:has(*)),.bs-footer:not(:has(*)),.bs-header[hidden],.bs-footer[hidden]{display:none}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
+    baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-header-min-height:80px;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba(0,0,0,calc(var(--bs-progress,0) * 0.15 + 0.12))}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,0.12);padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:var(--bs-handle-padding,8px 16px 4px);cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-header{flex:0 0 auto;padding:var(--bs-header-padding,0 16px 8px);background:var(--bs-surface,var(--bs-surface-d))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:var(--bs-content-padding,0 16px 16px)}.bs-footer{flex:0 0 auto;padding:var(--bs-footer-padding,12px 16px calc(12px + env(safe-area-inset-bottom)));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)){padding-bottom:0}.bs-header:not(:has(*)),.bs-footer:not(:has(*)),.bs-header[hidden],.bs-footer[hidden]{display:none}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
   }
 });
 

package/dist/index.cjs

@@ -2364,6 +2364,7 @@ var BottomSheetEngine = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
       size: 0
@@ -2654,8 +2655,8 @@ var BottomSheetEngine = class {
     this.updateAriaSlider();
     this.emit("snap", {
       id,
-      size: target.size,
-      progress: this.computeProgress(target.size)
+      size: this.size,
+      progress: this.computeProgress(this.size)
     });
     if (wasClosed && target.size > 0) {
       this.emit("open", { id });
@@ -2734,12 +2735,12 @@ var BottomSheetEngine = class {
     const value = typeof h === "number" ? `${h}px` : h;
     const axis = layoutAxis(this.mode);
     this.element.style.setProperty(
-      axis === "height" ? "maxHeight" : "maxWidth",
+      axis === "height" ? "max-height" : "max-width",
       value
     );
     if (typeof h === "number") {
       this.maxHeightCap = h;
-      this.clampToMaxHeight();
+      this.recompute();
     } else if (typeof window !== "undefined") {
       const probe2 = document.createElement("div");
       probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2747,7 +2748,7 @@ var BottomSheetEngine = class {
       const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
       probe2.remove();
       this.maxHeightCap = measured > 0 ? measured : void 0;
-      this.clampToMaxHeight();
+      this.recompute();
     }
   }
   clampToMaxHeight() {
@@ -2755,9 +2756,6 @@ var BottomSheetEngine = class {
     if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
       this.snaps.setMaxAxisSize(this.maxHeightCap);
     }
-    if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
-      this.applySize(this.maxHeightCap);
-    }
   }
   setAllowed(ids, snap) {
     if (this.destroyed) return;
@@ -2895,6 +2893,7 @@ var BottomSheetEngine = class {
   recompute() {
     if (this.destroyed) return;
     this.snaps.recompute();
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
     if (this.gesture?.isDragging) return;
     const current = this.snaps.findById(this.activeId);
@@ -2918,43 +2917,36 @@ var BottomSheetEngine = class {
     }
     return out;
   }
-  measureContentExtent(vertical) {
+  measureSheetNatural(vertical) {
+    const el = this.element;
     const content = this.scrollContainer;
-    if (!content) return 0;
-    const targets = this.contentTargets();
-    if (targets.length === 0) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let min = Infinity;
-    let max = -Infinity;
-    for (const el of targets) {
-      const r = el.getBoundingClientRect();
-      if (vertical) {
-        if (r.top < min) min = r.top;
-        if (r.bottom > max) max = r.bottom;
-      } else {
-        if (r.left < min) min = r.left;
-        if (r.right > max) max = r.right;
-      }
-    }
-    if (!isFinite(min) || !isFinite(max) || max <= min) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let pad = 0;
-    if (typeof getComputedStyle !== "undefined") {
-      const cs = getComputedStyle(content);
-      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
-    }
-    return max - min + pad;
+    if (!content) {
+      return vertical ? el.offsetHeight : el.offsetWidth;
+    }
+    const axis = vertical ? "height" : "width";
+    const sheetStyle = el.style;
+    const cs = content.style;
+    const prevSheet = sheetStyle[axis];
+    const prevFlex = cs.flex;
+    const prevContent = vertical ? cs.height : cs.width;
+    sheetStyle[axis] = "auto";
+    cs.flex = "none";
+    if (vertical) cs.height = "auto";
+    else cs.width = "auto";
+    const natural = vertical ? el.offsetHeight : el.offsetWidth;
+    sheetStyle[axis] = prevSheet;
+    cs.flex = prevFlex;
+    if (vertical) cs.height = prevContent;
+    else cs.width = prevContent;
+    return natural;
   }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
-    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
-    const content = this.scrollContainer;
-    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
-    if (typeof window === "undefined") return natural;
+    const natural = this.measureSheetNatural(vertical);
+    const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
+    if (typeof window === "undefined") return capped;
     const viewport = vertical ? window.innerHeight : window.innerWidth;
-    return viewport > 0 ? Math.min(natural, viewport) : natural;
+    return viewport > 0 ? Math.min(capped, viewport) : capped;
   }
   installFitObserver() {
     if (typeof ResizeObserver === "undefined") return;
@@ -3036,6 +3028,10 @@ var BottomSheetEngine = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
+    if (this.anchorHost) {
+      this.anchorHost.style.removeProperty("--bs-size");
+      this.anchorHost.style.removeProperty("--bs-progress");
+    }
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3047,6 +3043,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3112,6 +3109,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3318,15 +3316,19 @@ var BottomSheetEngine = class {
       this.opening = true;
       sheetStack.promote(this.id);
     }
-    void this.animation.animateTo(target.size, velocity).then(() => {
-      this.opening = false;
+    const settleCap = this.snaps.getMaxAxisSize();
+    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+    this.allowOvershoot = true;
+    void this.animation.animateTo(settleSize, velocity).then(() => {
       if (signal.aborted) return;
+      this.allowOvershoot = false;
+      this.opening = false;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
       this.emit("snap", {
         id: target.id,
-        size: target.size,
-        progress: this.computeProgress(target.size)
+        size: this.size,
+        progress: this.computeProgress(this.size)
       });
       this.haptic();
       if (previousSnapSize === 0 && target.size > 0) {
@@ -3351,23 +3353,25 @@ var BottomSheetEngine = class {
     }
   }
   applySize(size) {
-    this.size = size;
-    const offset = this.snaps.getMaxAxisSize() - size;
+    const cap = this.snaps.getMaxAxisSize();
+    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
+    this.size = clamped;
+    const offset = cap - clamped;
     const style = this.element.style;
     style.transform = this.transformTemplate(offset);
-    if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
-      style.setProperty("--bs-size", `${size}px`);
+    if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+      style.setProperty("--bs-size", `${clamped}px`);
       if (this.scrimParent) {
-        this.scrimParent.style.setProperty("--bs-size", `${size}px`);
+        this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
       }
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
-        this.anchorHost.style.setProperty("--bs-size", `${size}px`);
+        this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
       }
       if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
-        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+        this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
       }
     }
-    const progress = this.computeProgress(size);
+    const progress = this.computeProgress(clamped);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
       progress,
       OPACITY_WRITE_EPSILON
@@ -3384,14 +3388,15 @@ var BottomSheetEngine = class {
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
       this.progressPayload.value = progress;
-      this.progressPayload.size = size;
+      this.progressPayload.size = clamped;
       this.emit("progress", this.progressPayload);
     }
   }
   computeProgress(size) {
     const { min, max } = this.getAllowedRange();
-    if (max <= min) return 0;
-    return Math.min(Math.max((size - min) / (max - min), 0), 1);
+    const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
+    if (reachableMax <= min) return 0;
+    return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
   handleOpen() {
     sheetStack.promote(this.id);
@@ -3415,8 +3420,8 @@ var BottomSheetEngine = class {
     this.updateAriaSlider();
     this.emit("snap", {
       id: target.id,
-      size: target.size,
-      progress: this.computeProgress(target.size)
+      size: this.size,
+      progress: this.computeProgress(this.size)
     });
     if (target.size > 0 && !this.lifecycle.isInstalled) {
       this.emit("open", { id: target.id });

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { d as SnapPoint, b as SheetMode, a as SnapPointDef, c as EngineOptions, f as ScrimOverlayPosition } from './BottomSheetEngine-CqiCz64W.cjs';
-export { g as AnchorAnimationPreset, h as AnchorAnimationSpec, i as AnchorHandle, A as AnchorOptions, j as AnchorPosition, k as AnchorState, B as BottomSheetEngine, C as CloseReason, E as EngineState, P as Plugin, l as SCRIM_PRESETS, m as ScrimOverlayOptions, n as ScrimPreset, o as ScrimPresetConfig, p as ScrimStageDef, S as ScrimStagesOptions, q as ScrimUpdate, e as SheetEventMap, r as SnapId, T as TeardownScope, s as runAnchorTransition } from './BottomSheetEngine-CqiCz64W.cjs';
+import { d as SnapPoint, b as SheetMode, a as SnapPointDef, c as EngineOptions, f as ScrimOverlayPosition } from './BottomSheetEngine-BD1mSExI.cjs';
+export { g as AnchorAnimationPreset, h as AnchorAnimationSpec, i as AnchorHandle, A as AnchorOptions, j as AnchorPosition, k as AnchorState, B as BottomSheetEngine, C as CloseReason, E as EngineState, P as Plugin, l as SCRIM_PRESETS, m as ScrimOverlayOptions, n as ScrimPreset, o as ScrimPresetConfig, p as ScrimStageDef, S as ScrimStagesOptions, q as ScrimUpdate, e as SheetEventMap, r as SnapId, T as TeardownScope, s as runAnchorTransition } from './BottomSheetEngine-BD1mSExI.cjs';
 export { OVERLAY_PRESETS, Overlay, OverlayAnimation, OverlayCloseReason, OverlayEdge, Overlay as OverlayEngine, OverlayEventMap, OverlayMountTarget, OverlayOptions, OverlayPreset, OverlayState, OverlayUpdate, SwipeToCloseConfig, createOverlay } from './overlay.cjs';
 import './transform-jVfAikE9.cjs';
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { d as SnapPoint, b as SheetMode, a as SnapPointDef, c as EngineOptions, f as ScrimOverlayPosition } from './BottomSheetEngine-BHjKFtnM.js';
-export { g as AnchorAnimationPreset, h as AnchorAnimationSpec, i as AnchorHandle, A as AnchorOptions, j as AnchorPosition, k as AnchorState, B as BottomSheetEngine, C as CloseReason, E as EngineState, P as Plugin, l as SCRIM_PRESETS, m as ScrimOverlayOptions, n as ScrimPreset, o as ScrimPresetConfig, p as ScrimStageDef, S as ScrimStagesOptions, q as ScrimUpdate, e as SheetEventMap, r as SnapId, T as TeardownScope, s as runAnchorTransition } from './BottomSheetEngine-BHjKFtnM.js';
+import { d as SnapPoint, b as SheetMode, a as SnapPointDef, c as EngineOptions, f as ScrimOverlayPosition } from './BottomSheetEngine-BDGRWa2i.js';
+export { g as AnchorAnimationPreset, h as AnchorAnimationSpec, i as AnchorHandle, A as AnchorOptions, j as AnchorPosition, k as AnchorState, B as BottomSheetEngine, C as CloseReason, E as EngineState, P as Plugin, l as SCRIM_PRESETS, m as ScrimOverlayOptions, n as ScrimPreset, o as ScrimPresetConfig, p as ScrimStageDef, S as ScrimStagesOptions, q as ScrimUpdate, e as SheetEventMap, r as SnapId, T as TeardownScope, s as runAnchorTransition } from './BottomSheetEngine-BDGRWa2i.js';
 export { OVERLAY_PRESETS, Overlay, OverlayAnimation, OverlayCloseReason, OverlayEdge, Overlay as OverlayEngine, OverlayEventMap, OverlayMountTarget, OverlayOptions, OverlayPreset, OverlayState, OverlayUpdate, SwipeToCloseConfig, createOverlay } from './overlay.js';
 import './transform-jVfAikE9.js';