@surdeddd/bottom-sheet 0.6.0 → 0.7.0

package/dist/svelte.cjs

@@ -2644,7 +2644,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -2669,8 +2671,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 });
@@ -2749,12 +2751,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};`;
@@ -2762,7 +2764,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() {
@@ -2770,9 +2772,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;
@@ -2910,6 +2909,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);
@@ -2967,9 +2967,10 @@ var BottomSheetEngine = class {
     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 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;
@@ -3340,8 +3341,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)
       });
       this.haptic();
       if (previousSnapSize === 0 && target.size > 0) {
@@ -3366,23 +3367,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 ? 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
@@ -3399,14 +3402,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);
@@ -3430,8 +3434,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/svelte.d.cts

@@ -27,6 +27,9 @@ export type SvelteBottomSheetOpts<TId extends string = string> = Omit<
   snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
   allowed?: TId[] | ReadonlyArray<TId>;
   initial?: TId;
+  teleportTo?: string | HTMLElement | null;
+  backdropColor?: string;
+  backdropOpacity?: number;
   onSnap?: (id: TId) => void;
 };
 

package/dist/svelte.d.ts

@@ -27,6 +27,9 @@ export type SvelteBottomSheetOpts<TId extends string = string> = Omit<
   snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
   allowed?: TId[] | ReadonlyArray<TId>;
   initial?: TId;
+  teleportTo?: string | HTMLElement | null;
+  backdropColor?: string;
+  backdropOpacity?: number;
   onSnap?: (id: TId) => void;
 };
 

package/dist/svelte.js

@@ -2622,7 +2622,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -2647,8 +2649,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 });
@@ -2727,12 +2729,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};`;
@@ -2740,7 +2742,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() {
@@ -2748,9 +2750,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;
@@ -2888,6 +2887,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);
@@ -2945,9 +2945,10 @@ var BottomSheetEngine = class {
     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 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;
@@ -3318,8 +3319,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)
       });
       this.haptic();
       if (previousSnapSize === 0 && target.size > 0) {
@@ -3344,23 +3345,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 ? 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
@@ -3377,14 +3380,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);
@@ -3408,8 +3412,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/vue.cjs

@@ -2622,7 +2622,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -2647,8 +2649,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 });
@@ -2727,12 +2729,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};`;
@@ -2740,7 +2742,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() {
@@ -2748,9 +2750,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;
@@ -2888,6 +2887,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);
@@ -2945,9 +2945,10 @@ var BottomSheetEngine = class {
     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 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;
@@ -3318,8 +3319,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)
       });
       this.haptic();
       if (previousSnapSize === 0 && target.size > 0) {
@@ -3344,23 +3345,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 ? 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
@@ -3377,14 +3380,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);
@@ -3408,8 +3412,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/vue.d.cts

@@ -28,6 +28,9 @@ export type UseBottomSheetVueOptions<TId extends string = string> = Omit<
   snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
   allowed?: TId[] | ReadonlyArray<TId>;
   initial?: TId;
+  teleportTo?: string | HTMLElement | null;
+  backdropColor?: string;
+  backdropOpacity?: number;
   onSnap?: (id: TId) => void;
 };
 

package/dist/vue.d.ts

@@ -28,6 +28,9 @@ export type UseBottomSheetVueOptions<TId extends string = string> = Omit<
   snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
   allowed?: TId[] | ReadonlyArray<TId>;
   initial?: TId;
+  teleportTo?: string | HTMLElement | null;
+  backdropColor?: string;
+  backdropOpacity?: number;
   onSnap?: (id: TId) => void;
 };
 

package/dist/vue.js

@@ -2620,7 +2620,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -2645,8 +2647,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 });
@@ -2725,12 +2727,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};`;
@@ -2738,7 +2740,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() {
@@ -2746,9 +2748,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;
@@ -2886,6 +2885,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);
@@ -2943,9 +2943,10 @@ var BottomSheetEngine = class {
     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 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;
@@ -3316,8 +3317,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)
       });
       this.haptic();
       if (previousSnapSize === 0 && target.size > 0) {
@@ -3342,23 +3343,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 ? 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
@@ -3375,14 +3378,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);
@@ -3406,8 +3410,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",