@surdeddd/bottom-sheet 0.20.1 → 0.21.0

package/dist/qwik.js

@@ -839,13 +839,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    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
-      );
+      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
@@ -1385,18 +1383,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()) {
@@ -1407,6 +1407,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) {
@@ -3399,12 +3400,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));
@@ -4432,6 +4440,12 @@ var 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";

package/dist/react.cjs

@@ -848,13 +848,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    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
-      );
+      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
@@ -1394,18 +1392,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()) {
@@ -1416,6 +1416,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) {
@@ -3408,12 +3409,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));
@@ -4665,6 +4673,11 @@ var BottomSheet = react.forwardRef(
     react.useEffect(() => {
       onChange?.(state);
     }, [state, onChange]);
+    const mode = engineOpts.mode;
+    react.useEffect(() => {
+      if (mode === void 0) return;
+      getEngine()?.setMode(mode);
+    }, [getEngine, mode]);
     const [anchorHosts, setAnchorHosts] = react.useState([]);
     const anchorsKey = anchors ? JSON.stringify(
       anchors.map((a) => [

package/dist/react.d.cts

@@ -1,10 +1,10 @@
-import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-VPJZcKcg.cjs';
-export { d as SnapPoint } from './BottomSheetCore-VPJZcKcg.cjs';
+import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-CK8Rh1He.cjs';
+export { d as SnapPoint } from './BottomSheetCore-CK8Rh1He.cjs';
 import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.cjs';
 export { OverlayEdge } from './overlay.cjs';
 import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
-import { B as BottomSheetEngine } from './BottomSheetEngine-B8C2CwF9.cjs';
+import { B as BottomSheetEngine } from './BottomSheetEngine-hLSAxzla.cjs';
 import { T as TeleportTarget } from './teleport-7uYNiEAT.cjs';
 import './transform-jVfAikE9.cjs';
 

package/dist/react.d.ts

@@ -1,10 +1,10 @@
-import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-Cgn8b_6A.js';
-export { d as SnapPoint } from './BottomSheetCore-Cgn8b_6A.js';
+import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-CIijwtdi.js';
+export { d as SnapPoint } from './BottomSheetCore-CIijwtdi.js';
 import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.js';
 export { OverlayEdge } from './overlay.js';
 import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
-import { B as BottomSheetEngine } from './BottomSheetEngine-DwYR_ygJ.js';
+import { B as BottomSheetEngine } from './BottomSheetEngine-CZglPsTF.js';
 import { T as TeleportTarget } from './teleport-7uYNiEAT.js';
 import './transform-jVfAikE9.js';
 

package/dist/react.js

@@ -846,13 +846,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    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
-      );
+      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
@@ -1392,18 +1390,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()) {
@@ -1414,6 +1414,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) {
@@ -3406,12 +3407,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));
@@ -4663,6 +4671,11 @@ var BottomSheet = forwardRef(
     useEffect(() => {
       onChange?.(state);
     }, [state, onChange]);
+    const mode = engineOpts.mode;
+    useEffect(() => {
+      if (mode === void 0) return;
+      getEngine()?.setMode(mode);
+    }, [getEngine, mode]);
     const [anchorHosts, setAnchorHosts] = useState([]);
     const anchorsKey = anchors ? JSON.stringify(
       anchors.map((a) => [

package/dist/solid.cjs

@@ -841,13 +841,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    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
-      );
+      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
@@ -1387,18 +1385,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()) {
@@ -1409,6 +1409,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) {
@@ -3401,12 +3402,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));
@@ -4415,6 +4423,12 @@ var BottomSheet = (props) => {
   }, {
     defer: true
   }));
+  solidJs.createEffect(solidJs.on(() => props.mode, (value, prev) => {
+    if (!engine || prev === void 0 || value === void 0) return;
+    engine.setMode(value);
+  }, {
+    defer: true
+  }));
   const showBackdrop = solidJs.createMemo(() => props.backdrop !== false);
   const mode = solidJs.createMemo(() => props.mode ?? "bottom");
   const ariaLabel = solidJs.createMemo(() => props.ariaLabel ?? "Bottom sheet");

package/dist/solid.d.cts

@@ -377,6 +377,7 @@ declare class BottomSheetCore {
     private allowedIdsBySize;
     private updateAriaSlider;
     private registerInStack;
+    private repaintScrim;
     private applyStackDepth;
     private buildGestureDeps;
     private isContentDragAllowed;

package/dist/solid.d.ts

@@ -377,6 +377,7 @@ declare class BottomSheetCore {
     private allowedIdsBySize;
     private updateAriaSlider;
     private registerInStack;
+    private repaintScrim;
     private applyStackDepth;
     private buildGestureDeps;
     private isContentDragAllowed;

package/dist/solid.js

@@ -839,13 +839,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    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
-      );
+      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
@@ -1385,18 +1383,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()) {
@@ -1407,6 +1407,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) {
@@ -3399,12 +3400,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));
@@ -4413,6 +4421,12 @@ var BottomSheet = (props) => {
   }, {
     defer: true
   }));
+  createEffect(on(() => props.mode, (value, prev) => {
+    if (!engine || prev === void 0 || value === void 0) return;
+    engine.setMode(value);
+  }, {
+    defer: true
+  }));
   const showBackdrop = createMemo(() => props.backdrop !== false);
   const mode = createMemo(() => props.mode ?? "bottom");
   const ariaLabel = createMemo(() => props.ariaLabel ?? "Bottom sheet");

package/dist/solid.source.jsx

@@ -842,13 +842,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    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
-      );
+      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
@@ -1388,18 +1386,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()) {
@@ -1410,6 +1410,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) {
@@ -3401,12 +3402,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));
@@ -4441,6 +4449,16 @@ var BottomSheet = (props) => {
       { defer: true }
     )
   );
+  createEffect(
+    on(
+      () => props.mode,
+      (value, prev) => {
+        if (!engine || prev === void 0 || value === void 0) return;
+        engine.setMode(value);
+      },
+      { defer: true }
+    )
+  );
   const showBackdrop = createMemo(() => props.backdrop !== false);
   const mode = createMemo(() => props.mode ?? "bottom");
   const ariaLabel = createMemo(() => props.ariaLabel ?? "Bottom sheet");

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/svelte-core.cjs

@@ -840,13 +840,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    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
-      );
+      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
@@ -1386,18 +1384,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 +1408,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 +3401,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));