@surdeddd/bottom-sheet 0.22.1 → 0.23.1

package/dist/vue.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,8 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      let resting = false;
+      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) {
@@ -4267,21 +4280,36 @@ function contentFitFeature() {
       const settle = () => {
         if (ctx.isDestroyed()) return;
         const size = ctx.getSize();
-        unpaddedMax = -1;
-        follow(size);
+        if (!resting) {
+          unpaddedMax = -1;
+          follow(size);
+        }
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
+        if (!resting) {
+          resting = true;
+          sheet.setAttribute(FIT_ATTR, "rest");
+        }
         unpaddedMax = -1;
       };
+      const move = (size) => {
+        if (resting) {
+          resting = false;
+          sheet.setAttribute(FIT_ATTR, "moving");
+          put(LIFT_VAR, scroller.offsetHeight);
+        }
+        follow(size);
+      };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
       const whenIdle = () => {
         if (!moving()) settle();
       };
-      sheet.setAttribute(FIT_ATTR, "");
       settle();
       const offProgress = ctx.on(
         "progress",
-        (p) => moving() ? follow(p.size) : settle()
+        (p) => moving() ? move(p.size) : settle()
       );
       const offSnap = ctx.on("snap", settle);
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
@@ -4293,7 +4321,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/vue.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,8 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      let resting = false;
+      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) {
@@ -4265,21 +4278,36 @@ function contentFitFeature() {
       const settle = () => {
         if (ctx.isDestroyed()) return;
         const size = ctx.getSize();
-        unpaddedMax = -1;
-        follow(size);
+        if (!resting) {
+          unpaddedMax = -1;
+          follow(size);
+        }
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
+        if (!resting) {
+          resting = true;
+          sheet.setAttribute(FIT_ATTR, "rest");
+        }
         unpaddedMax = -1;
       };
+      const move = (size) => {
+        if (resting) {
+          resting = false;
+          sheet.setAttribute(FIT_ATTR, "moving");
+          put(LIFT_VAR, scroller.offsetHeight);
+        }
+        follow(size);
+      };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
       const whenIdle = () => {
         if (!moving()) settle();
       };
-      sheet.setAttribute(FIT_ATTR, "");
       settle();
       const offProgress = ctx.on(
         "progress",
-        (p) => moving() ? follow(p.size) : settle()
+        (p) => moving() ? move(p.size) : settle()
       );
       const offSnap = ctx.on("snap", settle);
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
@@ -4291,7 +4319,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",
@@ -240,37 +240,37 @@
     {
       "name": "core (engine + types)",
       "path": "dist/index.js",
-      "limit": "22.1 KB",
+      "limit": "22.22 KB",
       "gzip": true
     },
     {
       "name": "react adapter",
       "path": "dist/react.js",
-      "limit": "29.57 KB",
+      "limit": "29.71 KB",
       "gzip": true
     },
     {
       "name": "vue adapter",
       "path": "dist/vue.js",
-      "limit": "25.32 KB",
+      "limit": "25.43 KB",
       "gzip": true
     },
     {
       "name": "svelte adapter",
       "path": "dist/svelte.js",
-      "limit": "24.96 KB",
+      "limit": "25.11 KB",
       "gzip": true
     },
     {
       "name": "solid adapter",
       "path": "dist/solid.js",
-      "limit": "23.61 KB",
+      "limit": "23.74 KB",
       "gzip": true
     },
     {
       "name": "qwik adapter",
       "path": "dist/qwik.js",
-      "limit": "23.66 KB",
+      "limit": "23.78 KB",
       "gzip": true
     },
     {
@@ -285,13 +285,13 @@
     {
       "name": "web component (self-contained)",
       "path": "dist/element.js",
-      "limit": "28.8 KB",
+      "limit": "29 KB",
       "gzip": true
     },
     {
       "name": "web component (IIFE / CDN)",
       "path": "dist/element.iife.global.js",
-      "limit": "28.38 KB",
+      "limit": "28.57 KB",
       "gzip": true
     },
     {
@@ -309,13 +309,13 @@
     {
       "name": "slim core (subpath, no optional features)",
       "path": "dist/core.js",
-      "limit": "19.85 KB",
+      "limit": "19.89 KB",
       "gzip": true
     },
     {
       "name": "features (subpath)",
       "path": "dist/features.js",
-      "limit": "2.6 KB",
+      "limit": "2.72 KB",
       "gzip": true
     },
     {