@surdeddd/bottom-sheet 0.21.0 → 0.21.1

package/README.md

@@ -499,6 +499,15 @@ element — drive any CSS animation from drag without touching JS:
 > `z-index` on bs-managed elements. See
 > [Architecture → z-index & the sheet stack](docs/ARCHITECTURE.md).
 
+**Every sheet owns its backdrop.** Open a list, then a detail sheet over it,
+and both backdrops stay live: the dimming deepens with each level, and the
+sheet underneath stays masked for the whole time the one above it closes, so
+taps never reach the page mid-animation. Each backdrop follows its own sheet's
+progress, so a buried sheet that closes clears its own scrim. The stack keeps
+the order sheets started opening in — a sheet opened while another is still
+animating stays on top. If you want a single dim level, pass `backdrop={false}`
+(`:backdrop="false"` in Vue) to the sheets you open on top.
+
 ### Scrim, blur & high contrast
 
 | Token                    | Default     | Region                                               |

package/dist/{BottomSheetCore-CK8Rh1He.d.cts → BottomSheetCore-BHv6LPmS.d.cts}

@@ -305,6 +305,7 @@ declare class BottomSheetCore {
     private progressWriteSentinel;
     private isTopSheet;
     private opening;
+    private promotedForOpen;
     private allowOvershoot;
     private progressPayload;
     private dragContextBuf;
@@ -397,7 +398,6 @@ declare class BottomSheetCore {
     private allowedIdsBySize;
     private updateAriaSlider;
     private registerInStack;
-    private repaintScrim;
     private applyStackDepth;
     private buildGestureDeps;
     private isContentDragAllowed;

package/dist/{BottomSheetCore-CIijwtdi.d.ts → BottomSheetCore-CK_mq14p.d.ts}

@@ -305,6 +305,7 @@ declare class BottomSheetCore {
     private progressWriteSentinel;
     private isTopSheet;
     private opening;
+    private promotedForOpen;
     private allowOvershoot;
     private progressPayload;
     private dragContextBuf;
@@ -397,7 +398,6 @@ declare class BottomSheetCore {
     private allowedIdsBySize;
     private updateAriaSlider;
     private registerInStack;
-    private repaintScrim;
     private applyStackDepth;
     private buildGestureDeps;
     private isContentDragAllowed;

package/dist/{BottomSheetEngine-hLSAxzla.d.cts → BottomSheetEngine-mmFzIK1Z.d.cts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, c as EngineOptions } from './BottomSheetCore-CK8Rh1He.cjs';
+import { B as BottomSheetCore, c as EngineOptions } from './BottomSheetCore-BHv6LPmS.cjs';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);

package/dist/{BottomSheetEngine-CZglPsTF.d.ts → BottomSheetEngine-wLn6Q2kA.d.ts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, c as EngineOptions } from './BottomSheetCore-CIijwtdi.js';
+import { B as BottomSheetCore, c as EngineOptions } from './BottomSheetCore-CK_mq14p.js';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);

package/dist/core.cjs

@@ -774,7 +774,6 @@ var ScrimController = class {
     __publicField(this, "backdrop");
     __publicField(this, "mode");
     __publicField(this, "isDestroyed");
-    __publicField(this, "isTopSheet");
     __publicField(this, "getAllowedIds");
     __publicField(this, "getResolvedSnaps");
     __publicField(this, "snapToFn");
@@ -796,7 +795,6 @@ var ScrimController = class {
     this.backdrop = deps.backdrop;
     this.mode = deps.mode;
     this.isDestroyed = deps.isDestroyed;
-    this.isTopSheet = deps.isTopSheet;
     this.getAllowedIds = deps.getAllowedIds;
     this.getResolvedSnaps = deps.getResolvedSnaps;
     this.snapToFn = deps.snapTo;
@@ -841,8 +839,10 @@ var ScrimController = class {
     if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
-      const backdropOpacity = this.isTopSheet() ? ramp : 0;
+      const backdropOpacity = Math.min(
+        Math.max((progress - s) / range, 0),
+        1
+      );
       if (this.backdropOpacitySentinel.shouldWrite(
         backdropOpacity,
         OPACITY_WRITE_EPSILON
@@ -2617,6 +2617,7 @@ var BottomSheetCore = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "promotedForOpen", false);
     __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
@@ -2673,7 +2674,6 @@ var BottomSheetCore = class {
         screenComponent: this.screenComponent,
         backdrop: this.backdrop,
         isDestroyed: () => this.destroyed,
-        isTopSheet: () => this.isTopSheet,
         getAllowedIds: () => this.snaps.getAllowedIds().slice(),
         getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
         snapTo: (id) => {
@@ -2943,13 +2943,14 @@ var BottomSheetCore = class {
     if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
       return;
     }
+    const resumingOpen = this.opening;
     const signal = this.newCycle();
     const onExternalAbort = () => {
       this.animation.cancel();
       this.newCycle();
     };
     externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const wasClosed = this.size === 0;
+    const wasClosed = this.size === 0 || resumingOpen;
     const previousId = this.activeId;
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
@@ -2958,7 +2959,10 @@ var BottomSheetCore = class {
     const opensToRest = id === "closed" || rawTargetSize === 0;
     if (wasClosed && !opensToRest) {
       this.opening = true;
-      sheetStack.promote(this.id);
+      if (!resumingOpen) {
+        this.promotedForOpen = true;
+        sheetStack.promote(this.id);
+      }
     }
     if (this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
@@ -3399,19 +3403,12 @@ 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));
@@ -3656,6 +3653,7 @@ var BottomSheetCore = class {
     this.activeId = target.id;
     if (previousSnapSize === 0 && target.size > 0) {
       this.opening = true;
+      this.promotedForOpen = true;
       sheetStack.promote(this.id);
     }
     const settleCap = this.snaps.getMaxAxisSize();
@@ -3737,7 +3735,8 @@ var BottomSheetCore = class {
     return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
   handleOpen() {
-    sheetStack.promote(this.id);
+    if (this.promotedForOpen) this.promotedForOpen = false;
+    else sheetStack.promote(this.id);
     try {
       this.lifecycle.install();
     } catch (err) {
@@ -3769,6 +3768,7 @@ var BottomSheetCore = class {
   }
   handleClose() {
     this.opening = false;
+    this.promotedForOpen = false;
     this.lifecycle.release();
     sheetStack.update();
   }

package/dist/core.d.cts

@@ -1,3 +1,3 @@
-export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, c as EngineOptions, E as EngineState, S as SheetEventMap, b as SheetMode, w as SnapId, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-CK8Rh1He.cjs';
-export { R as ResolvedSnap } from './index-BEX-NHRJ.cjs';
+export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, c as EngineOptions, E as EngineState, S as SheetEventMap, b as SheetMode, w as SnapId, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-BHv6LPmS.cjs';
+export { R as ResolvedSnap } from './index-juAyT76E.cjs';
 import './transform-jVfAikE9.cjs';

package/dist/core.d.ts

@@ -1,3 +1,3 @@
-export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, c as EngineOptions, E as EngineState, S as SheetEventMap, b as SheetMode, w as SnapId, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-CIijwtdi.js';
-export { R as ResolvedSnap } from './index-BqLHKOeM.js';
+export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, c as EngineOptions, E as EngineState, S as SheetEventMap, b as SheetMode, w as SnapId, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-CK_mq14p.js';
+export { R as ResolvedSnap } from './index-CWKv1Xy4.js';
 import './transform-jVfAikE9.js';

package/dist/core.js

@@ -772,7 +772,6 @@ var ScrimController = class {
     __publicField(this, "backdrop");
     __publicField(this, "mode");
     __publicField(this, "isDestroyed");
-    __publicField(this, "isTopSheet");
     __publicField(this, "getAllowedIds");
     __publicField(this, "getResolvedSnaps");
     __publicField(this, "snapToFn");
@@ -794,7 +793,6 @@ var ScrimController = class {
     this.backdrop = deps.backdrop;
     this.mode = deps.mode;
     this.isDestroyed = deps.isDestroyed;
-    this.isTopSheet = deps.isTopSheet;
     this.getAllowedIds = deps.getAllowedIds;
     this.getResolvedSnaps = deps.getResolvedSnaps;
     this.snapToFn = deps.snapTo;
@@ -839,8 +837,10 @@ var ScrimController = class {
     if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
-      const backdropOpacity = this.isTopSheet() ? ramp : 0;
+      const backdropOpacity = Math.min(
+        Math.max((progress - s) / range, 0),
+        1
+      );
       if (this.backdropOpacitySentinel.shouldWrite(
         backdropOpacity,
         OPACITY_WRITE_EPSILON
@@ -2615,6 +2615,7 @@ var BottomSheetCore = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "promotedForOpen", false);
     __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
@@ -2671,7 +2672,6 @@ var BottomSheetCore = class {
         screenComponent: this.screenComponent,
         backdrop: this.backdrop,
         isDestroyed: () => this.destroyed,
-        isTopSheet: () => this.isTopSheet,
         getAllowedIds: () => this.snaps.getAllowedIds().slice(),
         getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
         snapTo: (id) => {
@@ -2941,13 +2941,14 @@ var BottomSheetCore = class {
     if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
       return;
     }
+    const resumingOpen = this.opening;
     const signal = this.newCycle();
     const onExternalAbort = () => {
       this.animation.cancel();
       this.newCycle();
     };
     externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const wasClosed = this.size === 0;
+    const wasClosed = this.size === 0 || resumingOpen;
     const previousId = this.activeId;
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
@@ -2956,7 +2957,10 @@ var BottomSheetCore = class {
     const opensToRest = id === "closed" || rawTargetSize === 0;
     if (wasClosed && !opensToRest) {
       this.opening = true;
-      sheetStack.promote(this.id);
+      if (!resumingOpen) {
+        this.promotedForOpen = true;
+        sheetStack.promote(this.id);
+      }
     }
     if (this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
@@ -3397,19 +3401,12 @@ 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));
@@ -3654,6 +3651,7 @@ var BottomSheetCore = class {
     this.activeId = target.id;
     if (previousSnapSize === 0 && target.size > 0) {
       this.opening = true;
+      this.promotedForOpen = true;
       sheetStack.promote(this.id);
     }
     const settleCap = this.snaps.getMaxAxisSize();
@@ -3735,7 +3733,8 @@ var BottomSheetCore = class {
     return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
   handleOpen() {
-    sheetStack.promote(this.id);
+    if (this.promotedForOpen) this.promotedForOpen = false;
+    else sheetStack.promote(this.id);
     try {
       this.lifecycle.install();
     } catch (err) {
@@ -3767,6 +3766,7 @@ var BottomSheetCore = class {
   }
   handleClose() {
     this.opening = false;
+    this.promotedForOpen = false;
     this.lifecycle.release();
     sheetStack.update();
   }

package/dist/debug.d.cts

@@ -1,4 +1,4 @@
-import { E as EngineState, S as SheetEventMap } from './BottomSheetCore-CK8Rh1He.cjs';
+import { E as EngineState, S as SheetEventMap } from './BottomSheetCore-BHv6LPmS.cjs';
 import './transform-jVfAikE9.cjs';
 
 type DebugOverlayPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/dist/debug.d.ts

@@ -1,4 +1,4 @@
-import { E as EngineState, S as SheetEventMap } from './BottomSheetCore-CIijwtdi.js';
+import { E as EngineState, S as SheetEventMap } from './BottomSheetCore-CK_mq14p.js';
 import './transform-jVfAikE9.js';
 
 type DebugOverlayPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/dist/element.cjs

@@ -885,7 +885,6 @@ var init_scrim_controller = __esm({
         __publicField(this, "backdrop");
         __publicField(this, "mode");
         __publicField(this, "isDestroyed");
-        __publicField(this, "isTopSheet");
         __publicField(this, "getAllowedIds");
         __publicField(this, "getResolvedSnaps");
         __publicField(this, "snapToFn");
@@ -907,7 +906,6 @@ var init_scrim_controller = __esm({
         this.backdrop = deps.backdrop;
         this.mode = deps.mode;
         this.isDestroyed = deps.isDestroyed;
-        this.isTopSheet = deps.isTopSheet;
         this.getAllowedIds = deps.getAllowedIds;
         this.getResolvedSnaps = deps.getResolvedSnaps;
         this.snapToFn = deps.snapTo;
@@ -952,8 +950,10 @@ var init_scrim_controller = __esm({
         if (this.backdrop) {
           const [s, e] = this.backdropRange;
           const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-          const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
-          const backdropOpacity = this.isTopSheet() ? ramp : 0;
+          const backdropOpacity = Math.min(
+            Math.max((progress - s) / range, 0),
+            1
+          );
           if (this.backdropOpacitySentinel.shouldWrite(
             backdropOpacity,
             OPACITY_WRITE_EPSILON
@@ -2895,6 +2895,7 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "progressWriteSentinel", new WriteSentinel());
         __publicField(this, "isTopSheet", true);
         __publicField(this, "opening", false);
+        __publicField(this, "promotedForOpen", false);
         __publicField(this, "allowOvershoot", false);
         __publicField(this, "progressPayload", {
           value: 0,
@@ -2951,7 +2952,6 @@ var init_BottomSheetCore = __esm({
             screenComponent: this.screenComponent,
             backdrop: this.backdrop,
             isDestroyed: () => this.destroyed,
-            isTopSheet: () => this.isTopSheet,
             getAllowedIds: () => this.snaps.getAllowedIds().slice(),
             getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
             snapTo: (id) => {
@@ -3221,13 +3221,14 @@ var init_BottomSheetCore = __esm({
         if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
           return;
         }
+        const resumingOpen = this.opening;
         const signal = this.newCycle();
         const onExternalAbort = () => {
           this.animation.cancel();
           this.newCycle();
         };
         externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-        const wasClosed = this.size === 0;
+        const wasClosed = this.size === 0 || resumingOpen;
         const previousId = this.activeId;
         const previousSize = this.size;
         this.scrollCache.cache(previousId, previousSize, target.size);
@@ -3236,7 +3237,10 @@ var init_BottomSheetCore = __esm({
         const opensToRest = id === "closed" || rawTargetSize === 0;
         if (wasClosed && !opensToRest) {
           this.opening = true;
-          sheetStack.promote(this.id);
+          if (!resumingOpen) {
+            this.promotedForOpen = true;
+            sheetStack.promote(this.id);
+          }
         }
         if (this.animation.viewTransitionsAvailable) {
           this.currentViewTransition?.skipTransition?.();
@@ -3677,19 +3681,12 @@ 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));
@@ -3934,6 +3931,7 @@ var init_BottomSheetCore = __esm({
         this.activeId = target.id;
         if (previousSnapSize === 0 && target.size > 0) {
           this.opening = true;
+          this.promotedForOpen = true;
           sheetStack.promote(this.id);
         }
         const settleCap = this.snaps.getMaxAxisSize();
@@ -4015,7 +4013,8 @@ var init_BottomSheetCore = __esm({
         return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
       }
       handleOpen() {
-        sheetStack.promote(this.id);
+        if (this.promotedForOpen) this.promotedForOpen = false;
+        else sheetStack.promote(this.id);
         try {
           this.lifecycle.install();
         } catch (err) {
@@ -4047,6 +4046,7 @@ var init_BottomSheetCore = __esm({
       }
       handleClose() {
         this.opening = false;
+        this.promotedForOpen = false;
         this.lifecycle.release();
         sheetStack.update();
       }

package/dist/element.d.cts

@@ -1,5 +1,5 @@
-import { B as BottomSheetEngine } from './BottomSheetEngine-hLSAxzla.cjs';
-import { C as CloseReason, A as AnchorOptions, e as ScrimStagesOptions, E as EngineState } from './BottomSheetCore-CK8Rh1He.cjs';
+import { B as BottomSheetEngine } from './BottomSheetEngine-mmFzIK1Z.cjs';
+import { C as CloseReason, A as AnchorOptions, e as ScrimStagesOptions, E as EngineState } from './BottomSheetCore-BHv6LPmS.cjs';
 import './transform-jVfAikE9.cjs';
 
 declare const BaseHTMLElement: typeof HTMLElement;

package/dist/element.d.ts

@@ -1,5 +1,5 @@
-import { B as BottomSheetEngine } from './BottomSheetEngine-CZglPsTF.js';
-import { C as CloseReason, A as AnchorOptions, e as ScrimStagesOptions, E as EngineState } from './BottomSheetCore-CIijwtdi.js';
+import { B as BottomSheetEngine } from './BottomSheetEngine-wLn6Q2kA.js';
+import { C as CloseReason, A as AnchorOptions, e as ScrimStagesOptions, E as EngineState } from './BottomSheetCore-CK_mq14p.js';
 import './transform-jVfAikE9.js';
 
 declare const BaseHTMLElement: typeof HTMLElement;