@surdeddd/bottom-sheet 0.23.0 → 0.23.2

package/dist/react.js

@@ -4269,6 +4269,7 @@ 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) => {
@@ -4285,32 +4286,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/solid.cjs

@@ -4264,6 +4264,7 @@ 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) => {
@@ -4280,32 +4281,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/solid.js

@@ -4262,6 +4262,7 @@ 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) => {
@@ -4278,32 +4279,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/solid.source.jsx

@@ -4264,6 +4264,7 @@ 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) => {
@@ -4280,32 +4281,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/styles.css

@@ -280,17 +280,22 @@
   padding: var(--bs-content-padding, 0 16px 16px);
 }
 
-.bs-sheet[data-bs-fit-content] .bs-content {
+.bs-sheet[data-bs-fit-content="moving"] .bs-content {
   scroll-padding-bottom: var(--bs-content-inset, 0px);
 }
 
-.bs-sheet[data-bs-fit-content] .bs-content::after {
+.bs-sheet[data-bs-fit-content="moving"] .bs-content::after {
   content: "";
   display: block;
   flex: none;
   height: var(--bs-content-inset, 0px);
 }
 
+.bs-sheet[data-bs-fit-content="rest"][data-mode="bottom"]::after {
+  content: "";
+  flex: 0 1 max(0px, var(--bs-max-size, 0px) - var(--bs-size, 0px));
+}
+
 .bs-footer {
   flex: 0 0 auto;
   padding: var(--bs-footer-padding, 12px 16px calc(12px + env(safe-area-inset-bottom)));
@@ -298,7 +303,7 @@
   background: var(--bs-surface, var(--bs-surface-d));
 }
 
-.bs-sheet[data-bs-fit-content][data-mode="bottom"]:not([data-bs-webgl="on"]) .bs-footer {
+.bs-sheet[data-bs-fit-content="moving"][data-mode="bottom"] .bs-footer {
   transform: translateY(
     clamp(
       calc(-1 * var(--bs-footer-lift-max, 0px)),
@@ -308,6 +313,10 @@
   );
 }
 
+.bs-sheet[data-bs-fit-content="moving"][data-mode="bottom"][data-bs-webgl="on"] .bs-footer {
+  background: var(--bs-surface, var(--bs-surface-d));
+}
+
 .bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)) {
   padding-bottom: 0;
 }

package/dist/svelte-core.cjs

@@ -4263,6 +4263,7 @@ 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) => {
@@ -4279,32 +4280,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/svelte-core.js

@@ -4261,6 +4261,7 @@ 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) => {
@@ -4277,32 +4278,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/svelte.cjs

@@ -4285,6 +4285,7 @@ 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) => {
@@ -4301,32 +4302,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/svelte.js

@@ -4263,6 +4263,7 @@ 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) => {
@@ -4279,32 +4280,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/vue.cjs

@@ -4263,6 +4263,7 @@ 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) => {
@@ -4279,32 +4280,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/vue.js

@@ -4261,6 +4261,7 @@ 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) => {
@@ -4277,32 +4278,46 @@ 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);
-        put(LIFT_VAR, scroller.offsetHeight);
         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 offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
         offProgress();
         offSnap();
+        offDragStart();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);