@surdeddd/bottom-sheet 0.7.0 → 0.8.1

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
@@ -2916,45 +2917,52 @@ 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 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"))
@@ -3035,6 +3043,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 = "";
@@ -3046,6 +3058,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3111,6 +3124,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3317,9 +3331,13 @@ 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", {
@@ -3351,7 +3369,7 @@ var BottomSheetEngine = class {
   }
   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/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-7BDK2OWX.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-7BDK2OWX.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-BFTb0-4Z.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-BFTb0-4Z.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';
 

package/dist/index.js

@@ -2362,6 +2362,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
@@ -2914,45 +2915,52 @@ 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 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"))
@@ -3033,6 +3041,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 = "";
@@ -3044,6 +3056,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3109,6 +3122,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3315,9 +3329,13 @@ 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", {
@@ -3349,7 +3367,7 @@ var BottomSheetEngine = class {
   }
   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/integrations/formik.d.cts

@@ -1,4 +1,4 @@
-import { e as SheetEventMap } from '../BottomSheetEngine-CqiCz64W.cjs';
+import { e as SheetEventMap } from '../BottomSheetEngine-7BDK2OWX.cjs';
 import '../transform-jVfAikE9.cjs';
 
 type FormikStateLike = {

package/dist/integrations/formik.d.ts

@@ -1,4 +1,4 @@
-import { e as SheetEventMap } from '../BottomSheetEngine-BHjKFtnM.js';
+import { e as SheetEventMap } from '../BottomSheetEngine-BFTb0-4Z.js';
 import '../transform-jVfAikE9.js';
 
 type FormikStateLike = {

package/dist/integrations/react-hook-form.d.cts

@@ -1,4 +1,4 @@
-import { e as SheetEventMap } from '../BottomSheetEngine-CqiCz64W.cjs';
+import { e as SheetEventMap } from '../BottomSheetEngine-7BDK2OWX.cjs';
 import '../transform-jVfAikE9.cjs';
 
 type RhfFormStateLike = {

package/dist/integrations/react-hook-form.d.ts

@@ -1,4 +1,4 @@
-import { e as SheetEventMap } from '../BottomSheetEngine-BHjKFtnM.js';
+import { e as SheetEventMap } from '../BottomSheetEngine-BFTb0-4Z.js';
 import '../transform-jVfAikE9.js';
 
 type RhfFormStateLike = {

package/dist/preact.d.cts

@@ -1,5 +1,5 @@
 export { BottomSheet, BottomSheetFromConfig, BottomSheetFromConfigProps, BottomSheetHandle, BottomSheetProps, HeaderProp, Overlay, OverlayHandle, OverlayProps, SheetConfig, UseBottomSheetRefs, UseBottomSheetReturn, UseOverlayReturn, useBottomSheet, useOverlay } from './react.cjs';
-export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-CqiCz64W.cjs';
+export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-7BDK2OWX.cjs';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.cjs';
 import 'react';
 import './transform-jVfAikE9.cjs';

package/dist/preact.d.ts

@@ -1,5 +1,5 @@
 export { BottomSheet, BottomSheetFromConfig, BottomSheetFromConfigProps, BottomSheetHandle, BottomSheetProps, HeaderProp, Overlay, OverlayHandle, OverlayProps, SheetConfig, UseBottomSheetRefs, UseBottomSheetReturn, UseOverlayReturn, useBottomSheet, useOverlay } from './react.js';
-export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-BHjKFtnM.js';
+export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-BFTb0-4Z.js';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.js';
 import 'react';
 import './transform-jVfAikE9.js';

package/dist/qwik.cjs

@@ -2360,6 +2360,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
@@ -2912,45 +2913,52 @@ 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 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"))
@@ -3031,6 +3039,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 = "";
@@ -3042,6 +3054,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3107,6 +3120,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3313,9 +3327,13 @@ 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", {
@@ -3347,7 +3365,7 @@ var BottomSheetEngine = class {
   }
   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;
@@ -3439,6 +3457,8 @@ var BottomSheet = qwik.component$((props) => {
   const contentRef = qwik.useSignal();
   const backdropRef = qwik.useSignal();
   const scrimRef = qwik.useSignal();
+  const headerRef = qwik.useSignal();
+  const footerRef = qwik.useSignal();
   const initialActive = props.initial ?? props.snapPoints[0]?.id ?? "default";
   const state = qwik.useStore({
     size: 0,
@@ -3473,6 +3493,11 @@ var BottomSheet = qwik.component$((props) => {
       lockBodyScroll: props.lockBodyScroll,
       rubberBand: props.rubberBand,
       backdropRange: props.backdropRange,
+      persistent: props.persistent,
+      disableClose: props.disableClose,
+      disableDrag: props.disableDrag,
+      closeOnRouteChange: props.closeOnRouteChange,
+      returnFocusTo: props.returnFocusTo,
       radius: props.radius,
       maxHeight: props.maxHeight
     };
@@ -3494,7 +3519,25 @@ var BottomSheet = qwik.component$((props) => {
     });
     engine.on("dragstart", sync);
     engine.on("dragend", sync);
+    let onBackdropClick;
+    if (props.backdrop !== false && props.closeOnBackdrop !== false && backdropRef.value) {
+      onBackdropClick = () => {
+        if (engine.canDismiss()) void engine.close("backdrop");
+      };
+      backdropRef.value.addEventListener("click", onBackdropClick);
+    }
+    const collapseEmpty = (el) => {
+      if (!el) return;
+      const empty = el.children.length === 0 && el.textContent?.trim() === "";
+      if (empty) el.setAttribute("hidden", "");
+      else el.removeAttribute("hidden");
+    };
+    collapseEmpty(headerRef.value);
+    collapseEmpty(footerRef.value);
     cleanup(() => {
+      if (onBackdropClick && backdropRef.value) {
+        backdropRef.value.removeEventListener("click", onBackdropClick);
+      }
       engineStore.engine = void 0;
       engine.destroy();
     });
@@ -3544,9 +3587,9 @@ var BottomSheet = qwik.component$((props) => {
               "aria-label": "Resize sheet"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-header", children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "header" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-header", ref: headerRef, children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "header" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-content", ref: contentRef, children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-footer", children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "footer" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-footer", ref: footerRef, children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "footer" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bs-sr-only", role: "status", "aria-live": "polite", children: state.activeId })
         ]
       }

package/dist/qwik.d.cts

@@ -1,7 +1,7 @@
 import * as _builder_io_qwik from '@builder.io/qwik';
 import { QRL } from '@builder.io/qwik';
-import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-CqiCz64W.cjs';
-export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-CqiCz64W.cjs';
+import { a as SnapPointDef, b as SheetMode, c as EngineOptions, E as EngineState } from './BottomSheetEngine-7BDK2OWX.cjs';
+export { d as SnapPoint } from './BottomSheetEngine-7BDK2OWX.cjs';
 import './transform-jVfAikE9.cjs';
 
 type BottomSheetProps<TId extends string = string> = {
@@ -23,6 +23,11 @@ type BottomSheetProps<TId extends string = string> = {
     backdropRange?: [number, number];
     backdrop?: boolean;
     closeOnBackdrop?: boolean;
+    persistent?: boolean;
+    disableClose?: boolean;
+    disableDrag?: boolean;
+    closeOnRouteChange?: boolean;
+    returnFocusTo?: EngineOptions["returnFocusTo"];
     ariaLabel?: string;
     radius?: string | number;
     maxHeight?: string | number;
@@ -33,4 +38,4 @@ type BottomSheetProps<TId extends string = string> = {
 };
 declare const BottomSheet: _builder_io_qwik.Component<BottomSheetProps<string>>;
 
-export { BottomSheet, type BottomSheetProps, EngineState, SheetMode, SnapPointDef };
+export { BottomSheet, type BottomSheetProps, EngineOptions, EngineState, SheetMode, SnapPointDef };

package/dist/qwik.d.ts

@@ -1,7 +1,7 @@
 import * as _builder_io_qwik from '@builder.io/qwik';
 import { QRL } from '@builder.io/qwik';
-import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-BHjKFtnM.js';
-export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-BHjKFtnM.js';
+import { a as SnapPointDef, b as SheetMode, c as EngineOptions, E as EngineState } from './BottomSheetEngine-BFTb0-4Z.js';
+export { d as SnapPoint } from './BottomSheetEngine-BFTb0-4Z.js';
 import './transform-jVfAikE9.js';
 
 type BottomSheetProps<TId extends string = string> = {
@@ -23,6 +23,11 @@ type BottomSheetProps<TId extends string = string> = {
     backdropRange?: [number, number];
     backdrop?: boolean;
     closeOnBackdrop?: boolean;
+    persistent?: boolean;
+    disableClose?: boolean;
+    disableDrag?: boolean;
+    closeOnRouteChange?: boolean;
+    returnFocusTo?: EngineOptions["returnFocusTo"];
     ariaLabel?: string;
     radius?: string | number;
     maxHeight?: string | number;
@@ -33,4 +38,4 @@ type BottomSheetProps<TId extends string = string> = {
 };
 declare const BottomSheet: _builder_io_qwik.Component<BottomSheetProps<string>>;
 
-export { BottomSheet, type BottomSheetProps, EngineState, SheetMode, SnapPointDef };
+export { BottomSheet, type BottomSheetProps, EngineOptions, EngineState, SheetMode, SnapPointDef };