@surdeddd/bottom-sheet 0.22.1 → 0.23.0

package/dist/react.cjs

@@ -1497,13 +1497,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      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));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2715,7 +2719,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4247,6 +4255,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4260,6 +4271,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      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) => {
         if (unpaddedMax < 0) {
@@ -4278,7 +4290,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4301,7 +4316,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/react.js

@@ -1495,13 +1495,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      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));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2713,7 +2717,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4245,6 +4253,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4258,6 +4269,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      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) => {
         if (unpaddedMax < 0) {
@@ -4276,7 +4288,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4299,7 +4314,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/solid.cjs

@@ -1490,13 +1490,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      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));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2708,7 +2712,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4240,6 +4248,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4253,6 +4264,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      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) => {
         if (unpaddedMax < 0) {
@@ -4271,7 +4283,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4294,7 +4309,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/solid.js

@@ -1488,13 +1488,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      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));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2706,7 +2710,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4238,6 +4246,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4251,6 +4262,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      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) => {
         if (unpaddedMax < 0) {
@@ -4269,7 +4281,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4292,7 +4307,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/solid.source.jsx

@@ -1491,13 +1491,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      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));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2708,7 +2712,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4240,6 +4248,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4253,6 +4264,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      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) => {
         if (unpaddedMax < 0) {
@@ -4271,7 +4283,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4294,7 +4309,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/styles.css

@@ -298,6 +298,16 @@
   background: var(--bs-surface, var(--bs-surface-d));
 }
 
+.bs-sheet[data-bs-fit-content][data-mode="bottom"]:not([data-bs-webgl="on"]) .bs-footer {
+  transform: translateY(
+    clamp(
+      calc(-1 * var(--bs-footer-lift-max, 0px)),
+      calc(var(--bs-size, 0px) - var(--bs-max-size, 0px)),
+      0px
+    )
+  );
+}
+
 .bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)) {
   padding-bottom: 0;
 }

package/dist/svelte-core.cjs

@@ -1489,13 +1489,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      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));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2707,7 +2711,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4239,6 +4247,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4252,6 +4263,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      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) => {
         if (unpaddedMax < 0) {
@@ -4270,7 +4282,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4293,7 +4308,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/svelte-core.js

@@ -1487,13 +1487,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      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));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2705,7 +2709,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4237,6 +4245,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4250,6 +4261,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      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) => {
         if (unpaddedMax < 0) {
@@ -4268,7 +4280,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4291,7 +4306,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/svelte.cjs

@@ -1511,13 +1511,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      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));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2729,7 +2733,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4261,6 +4269,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4274,6 +4285,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      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) => {
         if (unpaddedMax < 0) {
@@ -4292,7 +4304,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4315,7 +4330,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };