@surdeddd/bottom-sheet 0.7.0 → 0.8.1

package/dist/{BottomSheetEngine-CqiCz64W.d.cts → BottomSheetEngine-7BDK2OWX.d.cts}

@@ -236,6 +236,7 @@ declare class BottomSheetEngine {
     private progressWriteSentinel;
     private isTopSheet;
     private opening;
+    private allowOvershoot;
     private progressPayload;
     private dragContextBuf;
     private bus;
@@ -294,8 +295,9 @@ declare class BottomSheetEngine {
     setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
     recompute(): void;
     private contentTargets;
-    private measureContentExtent;
+    private measureSheetNatural;
     private measureFitSize;
+    private containingExtent;
     private installFitObserver;
     destroy(): void;
     private emit;

package/dist/{BottomSheetEngine-BHjKFtnM.d.ts → BottomSheetEngine-BFTb0-4Z.d.ts}

@@ -236,6 +236,7 @@ declare class BottomSheetEngine {
     private progressWriteSentinel;
     private isTopSheet;
     private opening;
+    private allowOvershoot;
     private progressPayload;
     private dragContextBuf;
     private bus;
@@ -294,8 +295,9 @@ declare class BottomSheetEngine {
     setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
     recompute(): void;
     private contentTargets;
-    private measureContentExtent;
+    private measureSheetNatural;
     private measureFitSize;
+    private containingExtent;
     private installFitObserver;
     destroy(): void;
     private emit;

package/dist/element.cjs

@@ -2599,6 +2599,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
@@ -3151,45 +3152,52 @@ 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;
+        if (!content) {
+          return vertical ? el.offsetHeight : el.offsetWidth;
         }
-        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;
+        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 poked = vertical ? el.offsetHeight : el.offsetWidth;
+        const contentBox = vertical ? content.clientHeight : content.clientWidth;
+        const contentScroll = vertical ? content.scrollHeight : content.scrollWidth;
+        const natural = Math.max(poked, poked - contentBox + contentScroll);
+        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;
+        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;
+        const viewport = this.containingExtent(vertical);
         return viewport > 0 ? Math.min(capped, viewport) : capped;
       }
+      // The fit cap is the sheet's containing block, not always the window: a
+      // position:fixed sheet nested under a transform/filter/will-change ancestor
+      // is clipped to that ancestor, so capping by window.innerHeight oversizes the
+      // sheet and the content/footer get clipped. offsetParent resolves to that
+      // ancestor when present, and is null (→ viewport) for a plain fixed sheet.
+      containingExtent(vertical) {
+        const op = this.element.offsetParent;
+        if (op && op !== document.body && op !== document.documentElement) {
+          return vertical ? op.clientHeight : op.clientWidth;
+        }
+        return vertical ? window.innerHeight : window.innerWidth;
+      }
       installFitObserver() {
         if (typeof ResizeObserver === "undefined") return;
         if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
@@ -3270,6 +3278,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 = "";
@@ -3281,6 +3293,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;
@@ -3346,6 +3359,7 @@ var init_BottomSheetEngine = __esm({
           seen.add(p.id);
         }
         this.snaps.setRaw(this.snapPointsRaw);
+        this.clampToMaxHeight();
         this.scrim.invalidateOpacityCache();
       }
       getAllowedRange() {
@@ -3552,9 +3566,13 @@ 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", {
@@ -3586,7 +3604,7 @@ var init_BottomSheetEngine = __esm({
       }
       applySize(size) {
         const cap = this.snaps.getMaxAxisSize();
-        const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
+        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;

package/dist/element.d.cts

@@ -1,4 +1,4 @@
-import { B as BottomSheetEngine, C as CloseReason, A as AnchorOptions, S as ScrimStagesOptions, E as EngineState } from './BottomSheetEngine-CqiCz64W.cjs';
+import { B as BottomSheetEngine, C as CloseReason, A as AnchorOptions, S as ScrimStagesOptions, E as EngineState } from './BottomSheetEngine-7BDK2OWX.cjs';
 import './transform-jVfAikE9.cjs';
 
 declare const BaseHTMLElement: typeof HTMLElement;

package/dist/element.d.ts

@@ -1,4 +1,4 @@
-import { B as BottomSheetEngine, C as CloseReason, A as AnchorOptions, S as ScrimStagesOptions, E as EngineState } from './BottomSheetEngine-BHjKFtnM.js';
+import { B as BottomSheetEngine, C as CloseReason, A as AnchorOptions, S as ScrimStagesOptions, E as EngineState } from './BottomSheetEngine-BFTb0-4Z.js';
 import './transform-jVfAikE9.js';
 
 declare const BaseHTMLElement: typeof HTMLElement;