@surdeddd/bottom-sheet 0.23.2 → 0.23.3

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 { d as EngineState, f as SheetMode, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-CQStdVy2.cjs';
+export { d as EngineState, f as SheetMode, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-CaJwHnxY.cjs';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.cjs';
 import 'react';
-import './BottomSheetEngine-CsQWHLNb.cjs';
+import './BottomSheetEngine-C_1aPJsU.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 { d as EngineState, f as SheetMode, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-9i-Uh6T3.js';
+export { d as EngineState, f as SheetMode, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-COvILxmR.js';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.js';
 import 'react';
-import './BottomSheetEngine-Dn6h-7gF.js';
+import './BottomSheetEngine-CsgCcCSO.js';
 import './teleport-7uYNiEAT.js';
 import './transform-jVfAikE9.js';

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

@@ -84,6 +84,7 @@ function buildTransformTemplate(axis) {
       return (offset) => `translate3d(${offset}px, 0, 0)`;
   }
 }
+const offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
 const layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
 const counters = {};
 function nextInstanceId(prefix) {
@@ -1181,7 +1182,7 @@ const tween = ({ from, to, duration, easing = easeOutCubic, onUpdate }) => {
     }
     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);
@@ -1229,8 +1230,8 @@ const runSpring = ({ from, to, velocity = 0, config, onUpdate }) => {
     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;
@@ -1310,6 +1311,7 @@ function resolveAnimationPreset(animation) {
       };
   }
 }
+const SETTLE_ANIMATION_ID = "bs-settle";
 const SIM_HZ = 240;
 const SAMPLE_STRIDE = 4;
 const MAX_SIM_MS = 3e3;
@@ -1370,6 +1372,7 @@ class AnimationRunner {
     __publicField(this, "isDragging");
     __publicField(this, "applyAux");
     __publicField(this, "getTransformFor");
+    __publicField(this, "readShownSize");
     __publicField(this, "settleWaapi");
     __publicField(this, "currentWaapi", null);
     __publicField(this, "animationKind");
@@ -1389,6 +1392,7 @@ class AnimationRunner {
     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;
@@ -1424,10 +1428,12 @@ class AnimationRunner {
     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();
@@ -1437,6 +1443,7 @@ class AnimationRunner {
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
       if (!this.isAnimating && !this.isDragging()) {
+        this.applySizeFn(target);
         this.element.style.willChange = "";
       }
       return;
@@ -1463,6 +1470,7 @@ class AnimationRunner {
         return;
       }
     }
+    let current = false;
     if (this.animationKind === "spring") {
       const spring = runSpring({
         from: this.getSize(),
@@ -1473,7 +1481,8 @@ class AnimationRunner {
       });
       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(),
@@ -1484,11 +1493,15 @@ class AnimationRunner {
       });
       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) {
@@ -1502,16 +1515,20 @@ class AnimationRunner {
       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);
       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);
@@ -1520,7 +1537,8 @@ class AnimationRunner {
       stop: () => {
         stopped = true;
         cancelAnimationFrame(auxRaf);
-      }
+      },
+      sizeNow
     };
     this.currentWaapi = entry;
     try {
@@ -2653,6 +2671,7 @@ class BottomSheetCore {
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
     __publicField(this, "fitContentToSnap");
+    __publicField(this, "settleAnimation");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2754,6 +2773,11 @@ class BottomSheetCore {
         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);
     this.lifecycle = new LifecycleController({
@@ -2763,6 +2787,7 @@ class BottomSheetCore {
     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;
@@ -2855,7 +2880,8 @@ class BottomSheetCore {
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
         autoCollapseAfter,
-        fitContentToSnap: this.fitContentToSnap
+        fitContentToSnap: this.fitContentToSnap,
+        settleAnimation: this.settleAnimation
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -3726,7 +3752,8 @@ class BottomSheetCore {
     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`);
@@ -3750,7 +3777,7 @@ class BottomSheetCore {
       }
     }
     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);
@@ -4233,7 +4260,6 @@ function visualViewportFeature() {
   };
 }
 const INSET_VAR = "--bs-content-inset";
-const SIZE_VAR = "--bs-size";
 const CAP_VAR = "--bs-max-size";
 const LIFT_VAR = "--bs-footer-lift-max";
 const FIT_ATTR = "data-bs-fit-content";
@@ -4246,10 +4272,14 @@ function contentFitFeature() {
         return;
       }
       const sheet = ctx.element;
+      const waapi = ctx.options.settleAnimation === "waapi";
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
       let resting = false;
+      let liftMax = 0;
+      let followed = null;
+      let follower = null;
       const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
@@ -4263,8 +4293,39 @@ function contentFitFeature() {
           top = limit;
         }
       };
+      const unfollow = () => {
+        follower?.cancel();
+        follower = null;
+        followed = null;
+      };
+      const followSettle = () => {
+        if (followed?.playState === "running") return;
+        const settleAnim = sheet.getAnimations?.().find((a) => a.id === SETTLE_ANIMATION_ID);
+        const footer = sheet.querySelector(".bs-footer");
+        if (!settleAnim || !footer) return;
+        const effect = settleAnim.effect;
+        unfollow();
+        const own = footer.animate(effect.getKeyframes().map((k) => ({
+          offset: k.computedOffset,
+          transform: `translateY(${-Math.min(Math.max(0, parseFloat(String(k.transform).split(",")[1]) || 0), liftMax)}px)`
+        })), {
+          duration: effect.getTiming().duration,
+          easing: "linear",
+          fill: "forwards"
+        });
+        follower = own;
+        followed = settleAnim;
+        const done = () => {
+          if (followed === settleAnim) unfollow();
+        };
+        settleAnim.ready.then(() => {
+          if (follower === own) own.startTime = settleAnim.startTime;
+        }, done);
+        settleAnim.finished.then(done, done);
+      };
       const settle = () => {
         if (ctx.isDestroyed()) return;
+        unfollow();
         const size = ctx.getSize();
         if (!resting) {
           unpaddedMax = -1;
@@ -4272,7 +4333,6 @@ function contentFitFeature() {
         }
         inset = hiddenAt(size);
         put(INSET_VAR, inset);
-        put(SIZE_VAR, size);
         put(CAP_VAR, ctx.getMaxAxisSize());
         if (!resting) {
           resting = true;
@@ -4284,9 +4344,13 @@ function contentFitFeature() {
         if (resting) {
           resting = false;
           sheet.setAttribute(FIT_ATTR, "moving");
-          put(LIFT_VAR, scroller.offsetHeight);
+          liftMax = scroller.offsetHeight;
+          put(LIFT_VAR, liftMax);
         }
         follow(size);
+        if (waapi && ctx.isAnimating() && sheet.dataset.mode === "bottom") {
+          followSettle();
+        }
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
       const whenIdle = () => {
@@ -4296,13 +4360,20 @@ function contentFitFeature() {
       const offProgress = ctx.on("progress", (p) => moving() ? move(p.size) : settle());
       const offSnap = ctx.on("snap", settle);
       const offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
+      const offBeforeSnap = ctx.on("before-snap", () => {
+        queueMicrotask(() => {
+          if (!ctx.isDestroyed() && ctx.isAnimating()) move(ctx.getSize());
+        });
+      });
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
+        unfollow();
         offProgress();
         offSnap();
         offDragStart();
+        offBeforeSnap();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

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

@@ -82,6 +82,7 @@ function buildTransformTemplate(axis) {
       return (offset) => `translate3d(${offset}px, 0, 0)`;
   }
 }
+const offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
 const layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
 const counters = {};
 function nextInstanceId(prefix) {
@@ -1179,7 +1180,7 @@ const tween = ({ from, to, duration, easing = easeOutCubic, onUpdate }) => {
     }
     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);
@@ -1227,8 +1228,8 @@ const runSpring = ({ from, to, velocity = 0, config, onUpdate }) => {
     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;
@@ -1308,6 +1309,7 @@ function resolveAnimationPreset(animation) {
       };
   }
 }
+const SETTLE_ANIMATION_ID = "bs-settle";
 const SIM_HZ = 240;
 const SAMPLE_STRIDE = 4;
 const MAX_SIM_MS = 3e3;
@@ -1368,6 +1370,7 @@ class AnimationRunner {
     __publicField(this, "isDragging");
     __publicField(this, "applyAux");
     __publicField(this, "getTransformFor");
+    __publicField(this, "readShownSize");
     __publicField(this, "settleWaapi");
     __publicField(this, "currentWaapi", null);
     __publicField(this, "animationKind");
@@ -1387,6 +1390,7 @@ class AnimationRunner {
     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;
@@ -1422,10 +1426,12 @@ class AnimationRunner {
     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();
@@ -1435,6 +1441,7 @@ class AnimationRunner {
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
       if (!this.isAnimating && !this.isDragging()) {
+        this.applySizeFn(target);
         this.element.style.willChange = "";
       }
       return;
@@ -1461,6 +1468,7 @@ class AnimationRunner {
         return;
       }
     }
+    let current = false;
     if (this.animationKind === "spring") {
       const spring = runSpring({
         from: this.getSize(),
@@ -1471,7 +1479,8 @@ class AnimationRunner {
       });
       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(),
@@ -1482,11 +1491,15 @@ class AnimationRunner {
       });
       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) {
@@ -1500,16 +1513,20 @@ class AnimationRunner {
       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);
       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);
@@ -1518,7 +1535,8 @@ class AnimationRunner {
       stop: () => {
         stopped = true;
         cancelAnimationFrame(auxRaf);
-      }
+      },
+      sizeNow
     };
     this.currentWaapi = entry;
     try {
@@ -2651,6 +2669,7 @@ class BottomSheetCore {
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
     __publicField(this, "fitContentToSnap");
+    __publicField(this, "settleAnimation");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2752,6 +2771,11 @@ class BottomSheetCore {
         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);
     this.lifecycle = new LifecycleController({
@@ -2761,6 +2785,7 @@ class BottomSheetCore {
     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;
@@ -2853,7 +2878,8 @@ class BottomSheetCore {
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
         autoCollapseAfter,
-        fitContentToSnap: this.fitContentToSnap
+        fitContentToSnap: this.fitContentToSnap,
+        settleAnimation: this.settleAnimation
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -3724,7 +3750,8 @@ class BottomSheetCore {
     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 +3775,7 @@ class BottomSheetCore {
       }
     }
     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);
@@ -4231,7 +4258,6 @@ function visualViewportFeature() {
   };
 }
 const INSET_VAR = "--bs-content-inset";
-const SIZE_VAR = "--bs-size";
 const CAP_VAR = "--bs-max-size";
 const LIFT_VAR = "--bs-footer-lift-max";
 const FIT_ATTR = "data-bs-fit-content";
@@ -4244,10 +4270,14 @@ function contentFitFeature() {
         return;
       }
       const sheet = ctx.element;
+      const waapi = ctx.options.settleAnimation === "waapi";
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
       let resting = false;
+      let liftMax = 0;
+      let followed = null;
+      let follower = null;
       const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
@@ -4261,8 +4291,39 @@ function contentFitFeature() {
           top = limit;
         }
       };
+      const unfollow = () => {
+        follower?.cancel();
+        follower = null;
+        followed = null;
+      };
+      const followSettle = () => {
+        if (followed?.playState === "running") return;
+        const settleAnim = sheet.getAnimations?.().find((a) => a.id === SETTLE_ANIMATION_ID);
+        const footer = sheet.querySelector(".bs-footer");
+        if (!settleAnim || !footer) return;
+        const effect = settleAnim.effect;
+        unfollow();
+        const own = footer.animate(effect.getKeyframes().map((k) => ({
+          offset: k.computedOffset,
+          transform: `translateY(${-Math.min(Math.max(0, parseFloat(String(k.transform).split(",")[1]) || 0), liftMax)}px)`
+        })), {
+          duration: effect.getTiming().duration,
+          easing: "linear",
+          fill: "forwards"
+        });
+        follower = own;
+        followed = settleAnim;
+        const done = () => {
+          if (followed === settleAnim) unfollow();
+        };
+        settleAnim.ready.then(() => {
+          if (follower === own) own.startTime = settleAnim.startTime;
+        }, done);
+        settleAnim.finished.then(done, done);
+      };
       const settle = () => {
         if (ctx.isDestroyed()) return;
+        unfollow();
         const size = ctx.getSize();
         if (!resting) {
           unpaddedMax = -1;
@@ -4270,7 +4331,6 @@ function contentFitFeature() {
         }
         inset = hiddenAt(size);
         put(INSET_VAR, inset);
-        put(SIZE_VAR, size);
         put(CAP_VAR, ctx.getMaxAxisSize());
         if (!resting) {
           resting = true;
@@ -4282,9 +4342,13 @@ function contentFitFeature() {
         if (resting) {
           resting = false;
           sheet.setAttribute(FIT_ATTR, "moving");
-          put(LIFT_VAR, scroller.offsetHeight);
+          liftMax = scroller.offsetHeight;
+          put(LIFT_VAR, liftMax);
         }
         follow(size);
+        if (waapi && ctx.isAnimating() && sheet.dataset.mode === "bottom") {
+          followSettle();
+        }
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
       const whenIdle = () => {
@@ -4294,13 +4358,20 @@ function contentFitFeature() {
       const offProgress = ctx.on("progress", (p) => moving() ? move(p.size) : settle());
       const offSnap = ctx.on("snap", settle);
       const offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
+      const offBeforeSnap = ctx.on("before-snap", () => {
+        queueMicrotask(() => {
+          if (!ctx.isDestroyed() && ctx.isAnimating()) move(ctx.getSize());
+        });
+      });
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
+        unfollow();
         offProgress();
         offSnap();
         offDragStart();
+        offBeforeSnap();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);