@surdeddd/bottom-sheet 0.20.2 → 0.21.0

package/dist/element.js

@@ -950,22 +950,18 @@ var init_scrim_controller = __esm({
         if (this.backdrop) {
           const [s, e] = this.backdropRange;
           const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-          const backdropOpacity = Math.min(
-            Math.max((progress - s) / range, 0),
-            1
-          );
-          if (this.isTopSheet() || backdropOpacity === 0) {
-            if (this.backdropOpacitySentinel.shouldWrite(
-              backdropOpacity,
-              OPACITY_WRITE_EPSILON
-            )) {
-              this.backdrop.style.opacity = String(backdropOpacity);
-            }
-            const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
-            if (nextPointer !== this.lastBackdropPointer) {
-              this.backdrop.style.pointerEvents = nextPointer;
-              this.lastBackdropPointer = nextPointer;
-            }
+          const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+          const backdropOpacity = this.isTopSheet() ? ramp : 0;
+          if (this.backdropOpacitySentinel.shouldWrite(
+            backdropOpacity,
+            OPACITY_WRITE_EPSILON
+          )) {
+            this.backdrop.style.opacity = String(backdropOpacity);
+          }
+          const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+          if (nextPointer !== this.lastBackdropPointer) {
+            this.backdrop.style.pointerEvents = nextPointer;
+            this.lastBackdropPointer = nextPointer;
           }
         }
         if (this.screenComponent && this.scrimMode !== "off") {
@@ -1526,18 +1522,20 @@ var init_animation_runner = __esm({
       get isAnimating() {
         return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
       }
+      cancelWaapi() {
+        if (!this.currentWaapi) return;
+        const entry = this.currentWaapi;
+        this.currentWaapi = null;
+        entry.stop();
+        try {
+          entry.anim.cancel();
+        } catch {
+        }
+      }
       cancel() {
         this.currentTween?.cancel();
         this.currentSpring?.cancel();
-        if (this.currentWaapi) {
-          const entry = this.currentWaapi;
-          this.currentWaapi = null;
-          entry.stop();
-          try {
-            entry.anim.cancel();
-          } catch {
-          }
-        }
+        this.cancelWaapi();
       }
       async animateTo(target, velocityPxPerMs) {
         if (target === this.getSize()) {
@@ -1548,6 +1546,7 @@ var init_animation_runner = __esm({
         }
         this.currentTween?.cancel();
         this.currentSpring?.cancel();
+        this.cancelWaapi();
         this.getRootEl()?.setAttribute("data-animating", "true");
         this.element.style.willChange = "transform";
         if (this.reducedMotion) {
@@ -3676,12 +3675,19 @@ var init_BottomSheetCore = __esm({
             for (const anchor of this.anchors) anchor.syncZ(z + 1);
           },
           setIsTop: (isTop) => {
+            if (this.isTopSheet === isTop) return;
             this.isTopSheet = isTop;
+            this.repaintScrim();
           },
           isOpen: () => this.size > 0 || this.opening,
           setDepth: (depth) => this.applyStackDepth(depth)
         }));
       }
+      repaintScrim() {
+        if (this.destroyed) return;
+        this.scrim.invalidateOpacityCache();
+        this.scrim.applyOpacity(this.computeProgress(this.size), true);
+      }
       applyStackDepth(depth) {
         if (!this.stackEffectEnabled) return;
         this.element.setAttribute("data-stack-depth", String(depth));
@@ -4688,6 +4694,7 @@ var init_attributes = __esm({
     ATTR_SCRIM_COLOR = "scrim-color";
     ATTR_SNAP = "snap";
     LIVE_ATTRS = /* @__PURE__ */ new Set([
+      ATTR_MODE,
       ATTR_RADIUS,
       ATTR_MAX_HEIGHT,
       ATTR_BACKDROP_COLOR,
@@ -4914,6 +4921,9 @@ var init_BottomSheetElement = __esm({
             if (mode) this.engine.setDragFrom(mode);
             break;
           }
+          case ATTR_MODE:
+            this.engine.setMode(parseMode(value));
+            break;
           case ATTR_SNAP:
             if (value && value !== this.engine.state.activeId) {
               void this.engine.snapTo(value);

package/dist/features.d.cts

@@ -1,5 +1,5 @@
-import { f as EngineFeature } from './BottomSheetCore-VPJZcKcg.cjs';
-export { m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage } from './BottomSheetCore-VPJZcKcg.cjs';
+import { f as EngineFeature } from './BottomSheetCore-CK8Rh1He.cjs';
+export { m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage } from './BottomSheetCore-CK8Rh1He.cjs';
 import './transform-jVfAikE9.cjs';
 
 declare function routeFeature(): EngineFeature;

package/dist/features.d.ts

@@ -1,5 +1,5 @@
-import { f as EngineFeature } from './BottomSheetCore-Cgn8b_6A.js';
-export { m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage } from './BottomSheetCore-Cgn8b_6A.js';
+import { f as EngineFeature } from './BottomSheetCore-CIijwtdi.js';
+export { m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage } from './BottomSheetCore-CIijwtdi.js';
 import './transform-jVfAikE9.js';
 
 declare function routeFeature(): EngineFeature;

package/dist/{index-CnfbOKx0.d.cts → index-BEX-NHRJ.d.cts}

@@ -1,4 +1,4 @@
-import { a as SnapPointDef, b as SheetMode } from './BottomSheetCore-VPJZcKcg.cjs';
+import { a as SnapPointDef, b as SheetMode } from './BottomSheetCore-CK8Rh1He.cjs';
 
 type ResolvedSnap = {
     id: string;

package/dist/{index-DcMkhXAy.d.ts → index-BqLHKOeM.d.ts}

@@ -1,4 +1,4 @@
-import { a as SnapPointDef, b as SheetMode } from './BottomSheetCore-Cgn8b_6A.js';
+import { a as SnapPointDef, b as SheetMode } from './BottomSheetCore-CIijwtdi.js';
 
 type ResolvedSnap = {
     id: string;

package/dist/index.cjs

@@ -841,22 +841,18 @@ var ScrimController = class {
     if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
-      if (this.isTopSheet() || backdropOpacity === 0) {
-        if (this.backdropOpacitySentinel.shouldWrite(
-          backdropOpacity,
-          OPACITY_WRITE_EPSILON
-        )) {
-          this.backdrop.style.opacity = String(backdropOpacity);
-        }
-        const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
-        if (nextPointer !== this.lastBackdropPointer) {
-          this.backdrop.style.pointerEvents = nextPointer;
-          this.lastBackdropPointer = nextPointer;
-        }
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
+      if (this.backdropOpacitySentinel.shouldWrite(
+        backdropOpacity,
+        OPACITY_WRITE_EPSILON
+      )) {
+        this.backdrop.style.opacity = String(backdropOpacity);
+      }
+      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      if (nextPointer !== this.lastBackdropPointer) {
+        this.backdrop.style.pointerEvents = nextPointer;
+        this.lastBackdropPointer = nextPointer;
       }
     }
     if (this.screenComponent && this.scrimMode !== "off") {
@@ -1386,18 +1382,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1408,6 +1406,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3400,12 +3399,19 @@ var BottomSheetCore = class {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));

package/dist/index.d.cts

@@ -1,8 +1,8 @@
-export { B as BottomSheetEngine } from './BottomSheetEngine-B8C2CwF9.cjs';
-import { d as SnapPoint, b as SheetMode, c as EngineOptions, P as PhysicalSheetMode, g as ScrimOverlayPosition } from './BottomSheetCore-VPJZcKcg.cjs';
-export { h as AnchorAnimationPreset, i as AnchorAnimationSpec, j as AnchorHandle, A as AnchorOptions, k as AnchorPosition, l as AnchorState, B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, E as EngineState, L as LogicalSheetMode, p as Plugin, q as SCRIM_PRESETS, r as ScrimOverlayOptions, s as ScrimPreset, t as ScrimPresetConfig, u as ScrimStageDef, e as ScrimStagesOptions, v as ScrimUpdate, S as SheetEventMap, w as SnapId, a as SnapPointDef, T as TeardownScope, x as runAnchorTransition } from './BottomSheetCore-VPJZcKcg.cjs';
+export { B as BottomSheetEngine } from './BottomSheetEngine-hLSAxzla.cjs';
+import { d as SnapPoint, b as SheetMode, c as EngineOptions, P as PhysicalSheetMode, g as ScrimOverlayPosition } from './BottomSheetCore-CK8Rh1He.cjs';
+export { h as AnchorAnimationPreset, i as AnchorAnimationSpec, j as AnchorHandle, A as AnchorOptions, k as AnchorPosition, l as AnchorState, B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, E as EngineState, L as LogicalSheetMode, p as Plugin, q as SCRIM_PRESETS, r as ScrimOverlayOptions, s as ScrimPreset, t as ScrimPresetConfig, u as ScrimStageDef, e as ScrimStagesOptions, v as ScrimUpdate, S as SheetEventMap, w as SnapId, a as SnapPointDef, T as TeardownScope, x as runAnchorTransition } from './BottomSheetCore-CK8Rh1He.cjs';
 export { autoCollapseFeature, contentSwipeFeature, defaultEngineFeatures, persistFeature, routeFeature, visualViewportFeature } from './features.cjs';
-export { R as ResolvedSnap, r as resolveSnapList } from './index-CnfbOKx0.cjs';
+export { R as ResolvedSnap, r as resolveSnapList } from './index-BEX-NHRJ.cjs';
 import './transform-jVfAikE9.cjs';
 
 declare const resolveSnap: (point: SnapPoint | string, mode: SheetMode, measureFit?: () => number) => number;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { B as BottomSheetEngine } from './BottomSheetEngine-DwYR_ygJ.js';
-import { d as SnapPoint, b as SheetMode, c as EngineOptions, P as PhysicalSheetMode, g as ScrimOverlayPosition } from './BottomSheetCore-Cgn8b_6A.js';
-export { h as AnchorAnimationPreset, i as AnchorAnimationSpec, j as AnchorHandle, A as AnchorOptions, k as AnchorPosition, l as AnchorState, B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, E as EngineState, L as LogicalSheetMode, p as Plugin, q as SCRIM_PRESETS, r as ScrimOverlayOptions, s as ScrimPreset, t as ScrimPresetConfig, u as ScrimStageDef, e as ScrimStagesOptions, v as ScrimUpdate, S as SheetEventMap, w as SnapId, a as SnapPointDef, T as TeardownScope, x as runAnchorTransition } from './BottomSheetCore-Cgn8b_6A.js';
+export { B as BottomSheetEngine } from './BottomSheetEngine-CZglPsTF.js';
+import { d as SnapPoint, b as SheetMode, c as EngineOptions, P as PhysicalSheetMode, g as ScrimOverlayPosition } from './BottomSheetCore-CIijwtdi.js';
+export { h as AnchorAnimationPreset, i as AnchorAnimationSpec, j as AnchorHandle, A as AnchorOptions, k as AnchorPosition, l as AnchorState, B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, E as EngineState, L as LogicalSheetMode, p as Plugin, q as SCRIM_PRESETS, r as ScrimOverlayOptions, s as ScrimPreset, t as ScrimPresetConfig, u as ScrimStageDef, e as ScrimStagesOptions, v as ScrimUpdate, S as SheetEventMap, w as SnapId, a as SnapPointDef, T as TeardownScope, x as runAnchorTransition } from './BottomSheetCore-CIijwtdi.js';
 export { autoCollapseFeature, contentSwipeFeature, defaultEngineFeatures, persistFeature, routeFeature, visualViewportFeature } from './features.js';
-export { R as ResolvedSnap, r as resolveSnapList } from './index-DcMkhXAy.js';
+export { R as ResolvedSnap, r as resolveSnapList } from './index-BqLHKOeM.js';
 import './transform-jVfAikE9.js';
 
 declare const resolveSnap: (point: SnapPoint | string, mode: SheetMode, measureFit?: () => number) => number;

package/dist/index.js

@@ -839,22 +839,18 @@ var ScrimController = class {
     if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
-      if (this.isTopSheet() || backdropOpacity === 0) {
-        if (this.backdropOpacitySentinel.shouldWrite(
-          backdropOpacity,
-          OPACITY_WRITE_EPSILON
-        )) {
-          this.backdrop.style.opacity = String(backdropOpacity);
-        }
-        const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
-        if (nextPointer !== this.lastBackdropPointer) {
-          this.backdrop.style.pointerEvents = nextPointer;
-          this.lastBackdropPointer = nextPointer;
-        }
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
+      if (this.backdropOpacitySentinel.shouldWrite(
+        backdropOpacity,
+        OPACITY_WRITE_EPSILON
+      )) {
+        this.backdrop.style.opacity = String(backdropOpacity);
+      }
+      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      if (nextPointer !== this.lastBackdropPointer) {
+        this.backdrop.style.pointerEvents = nextPointer;
+        this.lastBackdropPointer = nextPointer;
       }
     }
     if (this.screenComponent && this.scrimMode !== "off") {
@@ -1384,18 +1380,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1406,6 +1404,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3398,12 +3397,19 @@ var BottomSheetCore = class {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));

package/dist/integrations/formik.d.cts

@@ -1,4 +1,4 @@
-import { S as SheetEventMap } from '../BottomSheetCore-VPJZcKcg.cjs';
+import { S as SheetEventMap } from '../BottomSheetCore-CK8Rh1He.cjs';
 import '../transform-jVfAikE9.cjs';
 
 type FormikStateLike = {

package/dist/integrations/formik.d.ts

@@ -1,4 +1,4 @@
-import { S as SheetEventMap } from '../BottomSheetCore-Cgn8b_6A.js';
+import { S as SheetEventMap } from '../BottomSheetCore-CIijwtdi.js';
 import '../transform-jVfAikE9.js';
 
 type FormikStateLike = {

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

@@ -1,4 +1,4 @@
-import { S as SheetEventMap } from '../BottomSheetCore-VPJZcKcg.cjs';
+import { S as SheetEventMap } from '../BottomSheetCore-CK8Rh1He.cjs';
 import '../transform-jVfAikE9.cjs';
 
 type RhfFormStateLike = {

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

@@ -1,4 +1,4 @@
-import { S as SheetEventMap } from '../BottomSheetCore-Cgn8b_6A.js';
+import { S as SheetEventMap } from '../BottomSheetCore-CIijwtdi.js';
 import '../transform-jVfAikE9.js';
 
 type RhfFormStateLike = {

package/dist/preact.d.cts

@@ -1,7 +1,7 @@
 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 './BottomSheetCore-VPJZcKcg.cjs';
+export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-CK8Rh1He.cjs';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.cjs';
 import 'react';
-import './BottomSheetEngine-B8C2CwF9.cjs';
+import './BottomSheetEngine-hLSAxzla.cjs';
 import './teleport-7uYNiEAT.cjs';
 import './transform-jVfAikE9.cjs';

package/dist/preact.d.ts

@@ -1,7 +1,7 @@
 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 './BottomSheetCore-Cgn8b_6A.js';
+export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-CIijwtdi.js';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.js';
 import 'react';
-import './BottomSheetEngine-DwYR_ygJ.js';
+import './BottomSheetEngine-CZglPsTF.js';
 import './teleport-7uYNiEAT.js';
 import './transform-jVfAikE9.js';

package/dist/qwik-lib/index.qwik.cjs

@@ -856,16 +856,15 @@ class ScrimController {
     if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(Math.max((progress - s) / range, 0), 1);
-      if (this.isTopSheet() || backdropOpacity === 0) {
-        if (this.backdropOpacitySentinel.shouldWrite(backdropOpacity, OPACITY_WRITE_EPSILON)) {
-          this.backdrop.style.opacity = String(backdropOpacity);
-        }
-        const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
-        if (nextPointer !== this.lastBackdropPointer) {
-          this.backdrop.style.pointerEvents = nextPointer;
-          this.lastBackdropPointer = nextPointer;
-        }
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
+      if (this.backdropOpacitySentinel.shouldWrite(backdropOpacity, OPACITY_WRITE_EPSILON)) {
+        this.backdrop.style.opacity = String(backdropOpacity);
+      }
+      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      if (nextPointer !== this.lastBackdropPointer) {
+        this.backdrop.style.pointerEvents = nextPointer;
+        this.lastBackdropPointer = nextPointer;
       }
     }
     if (this.screenComponent && this.scrimMode !== "off") {
@@ -1410,18 +1409,20 @@ class AnimationRunner {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1432,6 +1433,7 @@ class AnimationRunner {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3422,12 +3424,19 @@ class BottomSheetCore {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));
@@ -4424,6 +4433,12 @@ const BottomSheet = qwik.component$((props) => {
     }
     if (dragFrom !== void 0) engine.setDragFrom(dragFrom);
   });
+  qwik.useTask$(({ track }) => {
+    const nextMode = track(() => props.mode);
+    const engine = engineStore.engine;
+    if (!engine || nextMode === void 0) return;
+    engine.setMode(nextMode);
+  });
   const showBackdrop = props.backdrop !== false;
   const mode = props.mode ?? "bottom";
   const ariaLabel = props.ariaLabel ?? "Bottom sheet";

package/dist/qwik-lib/index.qwik.mjs

@@ -854,16 +854,15 @@ class ScrimController {
     if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(Math.max((progress - s) / range, 0), 1);
-      if (this.isTopSheet() || backdropOpacity === 0) {
-        if (this.backdropOpacitySentinel.shouldWrite(backdropOpacity, OPACITY_WRITE_EPSILON)) {
-          this.backdrop.style.opacity = String(backdropOpacity);
-        }
-        const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
-        if (nextPointer !== this.lastBackdropPointer) {
-          this.backdrop.style.pointerEvents = nextPointer;
-          this.lastBackdropPointer = nextPointer;
-        }
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
+      if (this.backdropOpacitySentinel.shouldWrite(backdropOpacity, OPACITY_WRITE_EPSILON)) {
+        this.backdrop.style.opacity = String(backdropOpacity);
+      }
+      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      if (nextPointer !== this.lastBackdropPointer) {
+        this.backdrop.style.pointerEvents = nextPointer;
+        this.lastBackdropPointer = nextPointer;
       }
     }
     if (this.screenComponent && this.scrimMode !== "off") {
@@ -1408,18 +1407,20 @@ class AnimationRunner {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1430,6 +1431,7 @@ class AnimationRunner {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3420,12 +3422,19 @@ class BottomSheetCore {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));
@@ -4422,6 +4431,12 @@ const BottomSheet = component$((props) => {
     }
     if (dragFrom !== void 0) engine.setDragFrom(dragFrom);
   });
+  useTask$(({ track }) => {
+    const nextMode = track(() => props.mode);
+    const engine = engineStore.engine;
+    if (!engine || nextMode === void 0) return;
+    engine.setMode(nextMode);
+  });
   const showBackdrop = props.backdrop !== false;
   const mode = props.mode ?? "bottom";
   const ariaLabel = props.ariaLabel ?? "Bottom sheet";