@surdeddd/bottom-sheet 0.23.2 → 0.23.3

package/dist/{BottomSheetCore-9i-Uh6T3.d.ts → BottomSheetCore-COvILxmR.d.ts}

@@ -152,6 +152,7 @@ type EngineFeatureOptions = {
     persistKey?: string;
     autoCollapseAfter?: number;
     fitContentToSnap: boolean;
+    settleAnimation?: "waapi";
 };
 type EngineFeatureContext = {
     element: HTMLElement;
@@ -285,6 +286,7 @@ declare class BottomSheetCore {
     private closeOnBack;
     private routedTo;
     private fitContentToSnap;
+    private settleAnimation;
     private persistent;
     private disableCloseFlag;
     private disableDragFlag;

package/dist/{BottomSheetCore-CQStdVy2.d.cts → BottomSheetCore-CaJwHnxY.d.cts}

@@ -152,6 +152,7 @@ type EngineFeatureOptions = {
     persistKey?: string;
     autoCollapseAfter?: number;
     fitContentToSnap: boolean;
+    settleAnimation?: "waapi";
 };
 type EngineFeatureContext = {
     element: HTMLElement;
@@ -285,6 +286,7 @@ declare class BottomSheetCore {
     private closeOnBack;
     private routedTo;
     private fitContentToSnap;
+    private settleAnimation;
     private persistent;
     private disableCloseFlag;
     private disableDragFlag;

package/dist/{BottomSheetEngine-CsQWHLNb.d.cts → BottomSheetEngine-C_1aPJsU.d.cts}

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

package/dist/{BottomSheetEngine-Dn6h-7gF.d.ts → BottomSheetEngine-CsgCcCSO.d.ts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, g as EngineOptions } from './BottomSheetCore-9i-Uh6T3.js';
+import { B as BottomSheetCore, g as EngineOptions } from './BottomSheetCore-COvILxmR.js';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);

package/dist/core.cjs

@@ -86,6 +86,7 @@ function buildTransformTemplate(axis) {
       return (offset) => `translate3d(${offset}px, 0, 0)`;
   }
 }
+var offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
 var layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
 
 // src/core/primitives/instance-id.ts
@@ -1171,7 +1172,7 @@ var tween = ({
     }
     const step = (now) => {
       if (cancelled) return;
-      const elapsed = now - start;
+      const elapsed = Math.max(0, now - start);
       const t = Math.min(elapsed / duration, 1);
       const value = from + (to - from) * easing(t);
       onUpdate(value);
@@ -1224,8 +1225,8 @@ var runSpring = ({
     resolveFn = resolve;
     const step = (now) => {
       if (cancelled) return;
-      const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
-      lastTime = now;
+      const dt = Math.min(Math.max(0, now - lastTime) / 1e3, MAX_DT);
+      lastTime = Math.max(lastTime, now);
       const steps = Math.max(1, Math.ceil(dt * 240));
       const subDt = dt / steps;
       let stepsLeft = steps;
@@ -1289,6 +1290,7 @@ function resolveAnimationPreset(animation) {
 }
 
 // src/core/animation/waapi-settle.ts
+var SETTLE_ANIMATION_ID = "bs-settle";
 var SIM_HZ = 240;
 var SAMPLE_STRIDE = 4;
 var MAX_SIM_MS = 3e3;
@@ -1346,6 +1348,7 @@ var AnimationRunner = class {
     __publicField(this, "isDragging");
     __publicField(this, "applyAux");
     __publicField(this, "getTransformFor");
+    __publicField(this, "readShownSize");
     __publicField(this, "settleWaapi");
     __publicField(this, "currentWaapi", null);
     __publicField(this, "animationKind");
@@ -1365,6 +1368,7 @@ var AnimationRunner = class {
     this.isDragging = deps.isDragging;
     this.applyAux = deps.applyAux;
     this.getTransformFor = deps.getTransformFor;
+    this.readShownSize = deps.readShownSize;
     this.settleWaapi = opts.settleAnimation === "waapi";
     const preset = resolveAnimationPreset(opts.animation);
     this.animationKind = preset.kind;
@@ -1397,10 +1401,12 @@ var AnimationRunner = class {
     const entry = this.currentWaapi;
     this.currentWaapi = null;
     entry.stop();
+    const size = this.readShownSize?.() ?? entry.sizeNow();
     try {
       entry.anim.cancel();
     } catch {
     }
+    this.applySizeFn(size);
   }
   cancel() {
     this.currentTween?.cancel();
@@ -1410,6 +1416,7 @@ var AnimationRunner = class {
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
       if (!this.isAnimating && !this.isDragging()) {
+        this.applySizeFn(target);
         this.element.style.willChange = "";
       }
       return;
@@ -1446,6 +1453,7 @@ var AnimationRunner = class {
         return;
       }
     }
+    let current = false;
     if (this.animationKind === "spring") {
       const spring = runSpring({
         from: this.getSize(),
@@ -1456,7 +1464,8 @@ var AnimationRunner = class {
       });
       this.currentSpring = spring;
       await spring.promise;
-      if (this.currentSpring === spring) this.currentSpring = null;
+      current = this.currentSpring === spring;
+      if (current) this.currentSpring = null;
     } else {
       const tw = tween({
         from: this.getSize(),
@@ -1467,11 +1476,15 @@ var AnimationRunner = class {
       });
       this.currentTween = tw;
       await tw.promise;
-      if (this.currentTween === tw) this.currentTween = null;
+      current = this.currentTween === tw;
+      if (current) this.currentTween = null;
     }
     if (!this.isAnimating) {
       this.getRootEl()?.removeAttribute("data-animating");
-      if (!this.isDragging()) this.element.style.willChange = "";
+      if (!this.isDragging()) {
+        if (current) this.applySizeFn(this.getSize());
+        this.element.style.willChange = "";
+      }
     }
   }
   async runWaapiSettle(samples, target) {
@@ -1485,11 +1498,11 @@ var AnimationRunner = class {
       easing: "linear",
       fill: "forwards"
     });
+    anim.id = SETTLE_ANIMATION_ID;
     let stopped = false;
     let auxRaf = 0;
     const lastIdx = samples.values.length - 1;
-    const auxTick = () => {
-      if (stopped) return;
+    const sizeNow = () => {
       const at = Math.min(
         (Number(anim.currentTime) || 0) / samples.stepMs,
         lastIdx
@@ -1497,7 +1510,11 @@ var AnimationRunner = class {
       const idx = Math.floor(at);
       const from = samples.values[idx];
       const to = samples.values[Math.min(idx + 1, lastIdx)];
-      applyAux(from + (to - from) * (at - idx));
+      return from + (to - from) * (at - idx);
+    };
+    const auxTick = () => {
+      if (stopped) return;
+      applyAux(sizeNow());
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -1506,7 +1523,8 @@ var AnimationRunner = class {
       stop: () => {
         stopped = true;
         cancelAnimationFrame(auxRaf);
-      }
+      },
+      sizeNow
     };
     this.currentWaapi = entry;
     try {
@@ -2609,6 +2627,7 @@ var BottomSheetCore = class {
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
     __publicField(this, "fitContentToSnap");
+    __publicField(this, "settleAnimation");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2713,6 +2732,11 @@ var BottomSheetCore = class {
           const cap = this.snaps.getMaxAxisSize();
           const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
           return this.transformTemplate(cap - shown);
+        },
+        readShownSize: () => {
+          const shown = getComputedStyle(this.element).transform;
+          if (!shown || shown === "none") return void 0;
+          return this.snaps.getMaxAxisSize() - offsetFromMatrix(this.mode, new DOMMatrix(shown));
         }
       },
       resolved.animation
@@ -2727,6 +2751,7 @@ var BottomSheetCore = class {
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
     this.fitContentToSnap = opts.fitContentToSnap === true;
+    this.settleAnimation = opts.settleAnimation;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2829,7 +2854,8 @@ var BottomSheetCore = class {
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
         autoCollapseAfter,
-        fitContentToSnap: this.fitContentToSnap
+        fitContentToSnap: this.fitContentToSnap,
+        settleAnimation: this.settleAnimation
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -3721,7 +3747,11 @@ var BottomSheetCore = class {
     const offset = cap - clamped;
     const style = this.element.style;
     if (!skipTransform) style.transform = this.transformTemplate(offset);
-    if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+    const sizeChanged = this.sizeWriteSentinel.shouldWrite(
+      clamped,
+      this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0
+    );
+    if (sizeChanged) {
       style.setProperty("--bs-size", `${clamped}px`);
       if (this.scrimParent) {
         this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
@@ -3748,7 +3778,7 @@ var BottomSheetCore = class {
       }
     }
     this.scrim.applyOpacity(progress, progressChanged);
-    if (progressChanged && this.bus.listenerCount("progress") > 0) {
+    if ((progressChanged || sizeChanged) && this.bus.listenerCount("progress") > 0) {
       this.progressPayload.value = progress;
       this.progressPayload.size = clamped;
       this.emit("progress", this.progressPayload);

package/dist/core.d.cts

@@ -1,3 +1,3 @@
-export { B as BottomSheetCore, C as CloseReason, E as EngineFeature, a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage, g as EngineOptions, d as EngineState, S as SheetEventMap, f as SheetMode, w as SnapId, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-CQStdVy2.cjs';
-export { R as ResolvedSnap } from './index-CVGC5B5D.cjs';
+export { B as BottomSheetCore, C as CloseReason, E as EngineFeature, a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage, g as EngineOptions, d as EngineState, S as SheetEventMap, f as SheetMode, w as SnapId, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-CaJwHnxY.cjs';
+export { R as ResolvedSnap } from './index-BBrJJjy5.cjs';
 import './transform-jVfAikE9.cjs';

package/dist/core.d.ts

@@ -1,3 +1,3 @@
-export { B as BottomSheetCore, C as CloseReason, E as EngineFeature, a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage, g as EngineOptions, d as EngineState, S as SheetEventMap, f as SheetMode, w as SnapId, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-9i-Uh6T3.js';
-export { R as ResolvedSnap } from './index-CnsJQZp2.js';
+export { B as BottomSheetCore, C as CloseReason, E as EngineFeature, a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage, g as EngineOptions, d as EngineState, S as SheetEventMap, f as SheetMode, w as SnapId, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-COvILxmR.js';
+export { R as ResolvedSnap } from './index-CXN7t3rr.js';
 import './transform-jVfAikE9.js';

package/dist/core.js

@@ -84,6 +84,7 @@ function buildTransformTemplate(axis) {
       return (offset) => `translate3d(${offset}px, 0, 0)`;
   }
 }
+var offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
 var layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
 
 // src/core/primitives/instance-id.ts
@@ -1169,7 +1170,7 @@ var tween = ({
     }
     const step = (now) => {
       if (cancelled) return;
-      const elapsed = now - start;
+      const elapsed = Math.max(0, now - start);
       const t = Math.min(elapsed / duration, 1);
       const value = from + (to - from) * easing(t);
       onUpdate(value);
@@ -1222,8 +1223,8 @@ var runSpring = ({
     resolveFn = resolve;
     const step = (now) => {
       if (cancelled) return;
-      const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
-      lastTime = now;
+      const dt = Math.min(Math.max(0, now - lastTime) / 1e3, MAX_DT);
+      lastTime = Math.max(lastTime, now);
       const steps = Math.max(1, Math.ceil(dt * 240));
       const subDt = dt / steps;
       let stepsLeft = steps;
@@ -1287,6 +1288,7 @@ function resolveAnimationPreset(animation) {
 }
 
 // src/core/animation/waapi-settle.ts
+var SETTLE_ANIMATION_ID = "bs-settle";
 var SIM_HZ = 240;
 var SAMPLE_STRIDE = 4;
 var MAX_SIM_MS = 3e3;
@@ -1344,6 +1346,7 @@ var AnimationRunner = class {
     __publicField(this, "isDragging");
     __publicField(this, "applyAux");
     __publicField(this, "getTransformFor");
+    __publicField(this, "readShownSize");
     __publicField(this, "settleWaapi");
     __publicField(this, "currentWaapi", null);
     __publicField(this, "animationKind");
@@ -1363,6 +1366,7 @@ var AnimationRunner = class {
     this.isDragging = deps.isDragging;
     this.applyAux = deps.applyAux;
     this.getTransformFor = deps.getTransformFor;
+    this.readShownSize = deps.readShownSize;
     this.settleWaapi = opts.settleAnimation === "waapi";
     const preset = resolveAnimationPreset(opts.animation);
     this.animationKind = preset.kind;
@@ -1395,10 +1399,12 @@ var AnimationRunner = class {
     const entry = this.currentWaapi;
     this.currentWaapi = null;
     entry.stop();
+    const size = this.readShownSize?.() ?? entry.sizeNow();
     try {
       entry.anim.cancel();
     } catch {
     }
+    this.applySizeFn(size);
   }
   cancel() {
     this.currentTween?.cancel();
@@ -1408,6 +1414,7 @@ var AnimationRunner = class {
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
       if (!this.isAnimating && !this.isDragging()) {
+        this.applySizeFn(target);
         this.element.style.willChange = "";
       }
       return;
@@ -1444,6 +1451,7 @@ var AnimationRunner = class {
         return;
       }
     }
+    let current = false;
     if (this.animationKind === "spring") {
       const spring = runSpring({
         from: this.getSize(),
@@ -1454,7 +1462,8 @@ var AnimationRunner = class {
       });
       this.currentSpring = spring;
       await spring.promise;
-      if (this.currentSpring === spring) this.currentSpring = null;
+      current = this.currentSpring === spring;
+      if (current) this.currentSpring = null;
     } else {
       const tw = tween({
         from: this.getSize(),
@@ -1465,11 +1474,15 @@ var AnimationRunner = class {
       });
       this.currentTween = tw;
       await tw.promise;
-      if (this.currentTween === tw) this.currentTween = null;
+      current = this.currentTween === tw;
+      if (current) this.currentTween = null;
     }
     if (!this.isAnimating) {
       this.getRootEl()?.removeAttribute("data-animating");
-      if (!this.isDragging()) this.element.style.willChange = "";
+      if (!this.isDragging()) {
+        if (current) this.applySizeFn(this.getSize());
+        this.element.style.willChange = "";
+      }
     }
   }
   async runWaapiSettle(samples, target) {
@@ -1483,11 +1496,11 @@ var AnimationRunner = class {
       easing: "linear",
       fill: "forwards"
     });
+    anim.id = SETTLE_ANIMATION_ID;
     let stopped = false;
     let auxRaf = 0;
     const lastIdx = samples.values.length - 1;
-    const auxTick = () => {
-      if (stopped) return;
+    const sizeNow = () => {
       const at = Math.min(
         (Number(anim.currentTime) || 0) / samples.stepMs,
         lastIdx
@@ -1495,7 +1508,11 @@ var AnimationRunner = class {
       const idx = Math.floor(at);
       const from = samples.values[idx];
       const to = samples.values[Math.min(idx + 1, lastIdx)];
-      applyAux(from + (to - from) * (at - idx));
+      return from + (to - from) * (at - idx);
+    };
+    const auxTick = () => {
+      if (stopped) return;
+      applyAux(sizeNow());
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -1504,7 +1521,8 @@ var AnimationRunner = class {
       stop: () => {
         stopped = true;
         cancelAnimationFrame(auxRaf);
-      }
+      },
+      sizeNow
     };
     this.currentWaapi = entry;
     try {
@@ -2607,6 +2625,7 @@ var BottomSheetCore = class {
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
     __publicField(this, "fitContentToSnap");
+    __publicField(this, "settleAnimation");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2711,6 +2730,11 @@ var BottomSheetCore = class {
           const cap = this.snaps.getMaxAxisSize();
           const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
           return this.transformTemplate(cap - shown);
+        },
+        readShownSize: () => {
+          const shown = getComputedStyle(this.element).transform;
+          if (!shown || shown === "none") return void 0;
+          return this.snaps.getMaxAxisSize() - offsetFromMatrix(this.mode, new DOMMatrix(shown));
         }
       },
       resolved.animation
@@ -2725,6 +2749,7 @@ var BottomSheetCore = class {
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
     this.fitContentToSnap = opts.fitContentToSnap === true;
+    this.settleAnimation = opts.settleAnimation;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2827,7 +2852,8 @@ var BottomSheetCore = class {
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
         autoCollapseAfter,
-        fitContentToSnap: this.fitContentToSnap
+        fitContentToSnap: this.fitContentToSnap,
+        settleAnimation: this.settleAnimation
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -3719,7 +3745,11 @@ var BottomSheetCore = class {
     const offset = cap - clamped;
     const style = this.element.style;
     if (!skipTransform) style.transform = this.transformTemplate(offset);
-    if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+    const sizeChanged = this.sizeWriteSentinel.shouldWrite(
+      clamped,
+      this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0
+    );
+    if (sizeChanged) {
       style.setProperty("--bs-size", `${clamped}px`);
       if (this.scrimParent) {
         this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
@@ -3746,7 +3776,7 @@ var BottomSheetCore = class {
       }
     }
     this.scrim.applyOpacity(progress, progressChanged);
-    if (progressChanged && this.bus.listenerCount("progress") > 0) {
+    if ((progressChanged || sizeChanged) && this.bus.listenerCount("progress") > 0) {
       this.progressPayload.value = progress;
       this.progressPayload.size = clamped;
       this.emit("progress", this.progressPayload);

package/dist/debug.d.cts

@@ -1,4 +1,4 @@
-import { d as EngineState, S as SheetEventMap } from './BottomSheetCore-CQStdVy2.cjs';
+import { d as EngineState, S as SheetEventMap } from './BottomSheetCore-CaJwHnxY.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 { d as EngineState, S as SheetEventMap } from './BottomSheetCore-9i-Uh6T3.js';
+import { d as EngineState, S as SheetEventMap } from './BottomSheetCore-COvILxmR.js';
 import './transform-jVfAikE9.js';
 
 type DebugOverlayPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/dist/{default-features-C3cilcW9.d.ts → default-features-BJx7J0NH.d.ts}

@@ -1,4 +1,4 @@
-import { E as EngineFeature } from './BottomSheetCore-9i-Uh6T3.js';
+import { E as EngineFeature } from './BottomSheetCore-COvILxmR.js';
 
 declare function routeFeature(): EngineFeature;
 declare function persistFeature(): EngineFeature;

package/dist/{default-features-DkG9aho0.d.cts → default-features-CTJb8Wdk.d.cts}

@@ -1,4 +1,4 @@
-import { E as EngineFeature } from './BottomSheetCore-CQStdVy2.cjs';
+import { E as EngineFeature } from './BottomSheetCore-CaJwHnxY.cjs';
 
 declare function routeFeature(): EngineFeature;
 declare function persistFeature(): EngineFeature;