@douxcode/vue-spring-bottom-sheet 2.4.0 → 2.4.1

package/dist/index.mjs

@@ -1,15 +1,15 @@
-import { ref as P, computed as _, defineComponent as Be, watch as q, onMounted as Ie, toRefs as Ee, nextTick as N, onUnmounted as _e, createBlock as te, openBlock as ae, Teleport as De, createElementVNode as ne, createVNode as $, unref as m, withCtx as E, createCommentVNode as ge, normalizeStyle as He, normalizeClass as oe, renderSlot as le } from "vue";
-import { useMotionValue as me, animate as B, AnimatePresence as be, Motion as A } from "motion-v";
-import { useVModel as Ve, useWindowSize as Re, useElementBounding as Q, useScrollLock as ye } from "@vueuse/core";
-import { useFocusTrap as Fe } from "@vueuse/integrations/useFocusTrap";
+import { ref as P, computed as _, defineComponent as Be, watch as q, onMounted as Ie, toRefs as Ee, nextTick as N, onUnmounted as _e, createBlock as te, openBlock as ae, Teleport as De, createElementVNode as ne, createVNode as A, unref as m, withCtx as E, createCommentVNode as ge, normalizeStyle as He, normalizeClass as oe, renderSlot as le } from "vue";
+import { useMotionValue as me, animate as B, AnimatePresence as be, Motion as $ } from "motion-v";
+import { useVModel as Ve, useWindowSize as Fe, useElementBounding as Q, useScrollLock as ye } from "@vueuse/core";
+import { useFocusTrap as Re } from "@vueuse/integrations/useFocusTrap";
 function G(n, a) {
   const o = parseFloat(n);
   return a * o / 100;
 }
-function $e(n, a, o) {
+function Ae(n, a, o) {
   const t = P(0), s = _(() => n.value.map((p) => typeof p == "string" ? G(p, o.value) : p)), y = _(() => Math.min(...s.value)), r = _(() => Math.max(...s.value)), h = _(() => {
     const p = s.value.reduce(
-      (g, x) => Math.abs(x - a.value) < Math.abs(g - a.value) ? x : g
+      (g, M) => Math.abs(M - a.value) < Math.abs(g - a.value) ? M : g
     );
     return s.value.indexOf(p);
   });
@@ -21,36 +21,36 @@ function $e(n, a, o) {
     closestSnapPointIndex: h
   };
 }
-function Ae(n, a, o) {
+function $e(n, a, o) {
   let t = (s) => n(s, ...a);
   return o === void 0 ? t : Object.assign(t, { lazy: o, lazyArgs: a });
 }
 function We(n, a, o) {
   let t = n.length - a.length;
   if (t === 0) return n(...a);
-  if (t === 1) return Ae(n, a, o);
+  if (t === 1) return $e(n, a, o);
   throw new Error("Wrong number of arguments");
 }
-function ze(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = Le }) {
-  let r, h, p, g, x = () => {
+function je(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = ze }) {
+  let r, h, p, g, M = () => {
     let i = p;
     i !== void 0 && (p = void 0, n(i), s !== void 0 && (h = setTimeout(D, s)));
   }, D = () => {
-    clearTimeout(h), h = void 0, r === void 0 && x();
+    clearTimeout(h), h = void 0, r === void 0 && M();
   }, H = () => {
-    clearTimeout(r), r = void 0, g = void 0, h === void 0 && x();
+    clearTimeout(r), r = void 0, g = void 0, h === void 0 && M();
   };
   return { call: (...i) => {
     let c = r === void 0 && h === void 0;
     if ((a !== "start" || c) && (p = y(p, ...i)), !(r === void 0 && !c)) {
       if (o !== void 0 || t !== void 0 || s === void 0) {
         clearTimeout(r);
-        let k = Date.now();
-        g ?? (g = k);
-        let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (k - g));
+        let C = Date.now();
+        g ?? (g = C);
+        let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (C - g));
         r = setTimeout(H, W);
       }
-      a !== "end" && c && x();
+      a !== "end" && c && M();
     }
   }, cancel: () => {
     clearTimeout(r), r = void 0, g = void 0, clearTimeout(h), h = void 0, p = void 0;
@@ -60,11 +60,11 @@ function ze(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs:
     return r === void 0 && h === void 0;
   } };
 }
-var Le = () => "";
+var ze = () => "";
 function b(...n) {
-  return We(je, n);
+  return We(Le, n);
 }
-var je = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
+var Le = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
 function qe(n, a, o) {
   return Math.max(a, Math.min(n, o));
 }
@@ -104,7 +104,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
     }), Ie(() => {
       y.value && X();
     });
-    const r = P(), h = P(null), p = P(null), g = P(null), x = P(null), D = P(null), H = P(null), i = P(t.expandOnContentDrag), { height: c } = Re(), { height: k } = Q(r), { height: W } = Q(h), { height: se } = Q(D), { height: re } = Q(p), K = _({
+    const r = P(), h = P(null), p = P(null), g = P(null), M = P(null), D = P(null), H = P(null), i = P(t.expandOnContentDrag), { height: c } = Fe(), { height: C } = Q(r), { height: W } = Q(h), { height: se } = Q(D), { height: re } = Q(p), K = _({
       get() {
         return b(
           Math.ceil(se.value + W.value + re.value),
@@ -116,15 +116,15 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
       set(e) {
         [W.value, se.value, re.value] = e;
       }
-    }), l = P(0), v = P(0), C = me(0), S = me(0), { snapPoints: Pe } = Ee(t), d = _(() => Pe.value ?? [K.value]), {
+    }), l = P(0), v = P(0), k = me(0), S = me(0), { snapPoints: Pe } = Ee(t), d = _(() => Pe.value ?? [K.value]), {
       flattenedSnapPoints: U,
       currentSnapPointIndex: I,
       closestSnapPointIndex: V,
       minSnapPoint: O,
-      maxSnapPoint: R
-    } = $e(d, l, c);
-    let M;
-    const z = ye(document.body), L = ye(document.documentElement), Y = Fe([r, H], {
+      maxSnapPoint: F
+    } = Ae(d, l, c);
+    let w;
+    const j = ye(document.body), z = ye(document.documentElement), Y = Re([r, H], {
       immediate: !1,
       fallbackFocus: () => r.value || document.body
     });
@@ -135,50 +135,53 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
       i.value && e.preventDefault();
     }
     const de = (e) => {
-      e.key === "Escape" && j();
+      e.key === "Escape" && L();
     }, Ce = () => {
-      t.canBackdropClose && j();
+      t.canBackdropClose && L();
     };
     let J = !1;
     const X = async () => {
       if (J) return;
-      y.value = !0, J = !0, s("opening-started"), t.blocking && (z.value = !0, L.value = !0), await N();
+      y.value = !0, J = !0, s("opening-started"), t.blocking && (j.value = !0, z.value = !0), await N();
       const e = r.value.$el;
-      k.value = e.getBoundingClientRect().height;
-      const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), w = e.querySelector("[data-vsbs-footer]");
+      C.value = e.getBoundingClientRect().height;
+      const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), T = e.querySelector("[data-vsbs-footer]");
       if (K.value = [
         f.getBoundingClientRect().height,
         u.getBoundingClientRect().height,
-        w.getBoundingClientRect().height
+        T.getBoundingClientRect().height
       ], await N(), I.value = U.value.findIndex(
-        (T) => T === O.value
+        (x) => x === O.value
       ), t.initialSnapPoint) {
-        const T = t.initialSnapPoint;
-        if (T < 0 || T >= d.value.length) {
+        const x = t.initialSnapPoint;
+        if (x < 0 || x >= d.value.length) {
           console.warn("Index out of bounds");
           return;
         }
-        let F;
-        typeof d.value[T] == "number" ? F = b(d.value[T], {
+        let R;
+        typeof d.value[x] == "number" ? R = b(d.value[x], {
           max: c.value
-        }) : F = G(d.value[T], c.value), l.value = F;
+        }) : R = G(d.value[x], c.value), l.value = R;
       } else
         l.value = b(O.value, {
           max: c.value
         });
-      v.value = l.value, C.set(l.value), S.set(l.value), M = B(C, l.value, {
-        duration: t.duration / 1e3,
-        ease: "easeInOut"
-      }), M = B(S, 0, {
-        duration: t.duration / 1e3,
-        ease: "easeInOut"
-      }), window.addEventListener("keydown", de), J = !1, t.blocking && setTimeout(() => {
-        C.get() < 1 && (s("opened"), Y.activate());
-      }, t.duration);
+      v.value = l.value, k.jump(l.value), S.jump(l.value), requestAnimationFrame(() => {
+        w = B(k, l.value, {
+          duration: t.duration / 1e3,
+          ease: "easeInOut"
+        }), w = B(S, 0, {
+          duration: t.duration / 1e3,
+          ease: "easeInOut",
+          onComplete: () => {
+            t.blocking && (s("opened"), Y.activate());
+          }
+        });
+      }), window.addEventListener("keydown", de), J = !1;
     };
     let Z = !1;
-    const j = () => {
-      Z || (y.value = !1, Z = !0, s("closing-started"), t.blocking && (z.value = !1, L.value = !1), window.removeEventListener("keydown", de), t.blocking && Y.deactivate(), setTimeout(() => {
+    const L = () => {
+      Z || (y.value = !1, Z = !0, s("closing-started"), t.blocking && (j.value = !1, z.value = !1), window.removeEventListener("keydown", de), t.blocking && Y.deactivate(), setTimeout(() => {
         s("closed"), Z = !1;
       }, t.duration));
     }, ce = (e) => {
@@ -191,7 +194,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
       let u;
       typeof d.value[e] == "number" ? u = b(d.value[e], {
         max: c.value
-      }) : u = G(d.value[e], c.value), l.value = u, M = B(C, l.value, {
+      }) : u = G(d.value[e], c.value), l.value = u, w = B(k, l.value, {
         duration: t.duration / 1e3,
         ease: "easeInOut",
         onComplete: () => s("snapped", d.value.indexOf(d.value[e]))
@@ -201,14 +204,14 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
       e > 0 ? s("dragging-down") : e < 0 && s("dragging-up");
     }
     const pe = () => {
-      l.value = k.value, v.value = S.get(), C.jump(l.value), S.jump(v.value);
+      l.value = C.value, v.value = S.get(), k.jump(l.value), S.jump(v.value);
     }, he = async (e, u) => {
       await N(), r.value && (v.value <= 0 && (l.value -= u.delta.y), l.value <= O.value && (l.value = O.value, v.value += u.delta.y, S.set(
-        t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -k.value, 0, 0.5), {
+        t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -C.value, 0, 0.5), {
           min: 0
         })
-      )), C.set(
-        b(ue(l.value, 0, R.value, 0.25), {
+      )), k.set(
+        b(ue(l.value, 0, F.value, 0.25), {
           min: 0,
           max: c.value
         })
@@ -216,42 +219,42 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
     }, ee = () => {
       v.value = t.canSwipeClose ? [0, l.value].reduce(
         (u, f) => Math.abs(f - v.value) < Math.abs(u - v.value) ? f : u
-      ) : 0, M = B(S, v.value, {
+      ) : 0, w = B(S, v.value, {
         duration: t.duration / 1e3,
         ease: "easeInOut"
-      }), v.value === l.value && (v.value = 0, j()), I.value = V.value;
+      }), v.value === l.value && (v.value = 0, L()), I.value = V.value;
       let e;
       typeof d.value[V.value] == "number" ? e = b(d.value[V.value], {
         max: c.value
       }) : e = G(
         d.value[V.value],
         c.value
-      ), l.value = e, M = B(C, l.value, {
+      ), l.value = e, w = B(k, l.value, {
         duration: t.duration / 1e3,
         ease: "easeInOut",
         onComplete: () => s(
           "snapped",
           d.value.indexOf(d.value[V.value])
         )
-      }), M = B(S, 0, {
+      }), w = B(S, 0, {
         duration: t.duration / 1e3,
         ease: "easeInOut"
       });
     }, ke = (e, u) => {
-      if (l.value = k.value, v.value = S.get(), M.stop(), !g.value) return;
-      const f = g.value.scrollTop === 0, w = u.delta.y > 0, T = U.value.length === 1, F = 0.5 > Math.abs(l.value - R.value);
-      if (T) {
+      if (l.value = C.value, v.value = S.get(), w && w.stop(), !g.value) return;
+      const f = g.value.scrollTop === 0, T = u.delta.y > 0, x = U.value.length === 1, R = 0.5 > Math.abs(l.value - F.value);
+      if (x) {
         if (!t.expandOnContentDrag) {
           i.value = !1;
           return;
         }
-        S.get() === 0 && f && w && (i.value = !0), S.get() === 0 && f && !w && (i.value = !1);
+        S.get() === 0 && f && T && (i.value = !0), S.get() === 0 && f && !T && (i.value = !1);
       } else {
         if (!t.expandOnContentDrag) {
           i.value = !1;
           return;
         }
-        i.value = !0, F && (w && f && (i.value = !0), !w && f && (i.value = !1), f || (i.value = !1));
+        i.value = !0, R && (T && f && (i.value = !0), !T && f && (i.value = !1), f || (i.value = !1));
       }
     }, we = async (e, u) => {
       if (await N(), !t.expandOnContentDrag) {
@@ -260,28 +263,28 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
       }
       if (!r.value) return;
       v.value === 0 && i.value && t.expandOnContentDrag && (l.value -= u.delta.y), l.value <= O.value && (l.value = O.value, i.value && t.expandOnContentDrag && (v.value += u.delta.y), v.value = b(v.value, { min: 0, max: O.value }), S.set(
-        t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -k.value, 0, 0.5), {
+        t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -C.value, 0, 0.5), {
           min: 0
         })
-      )), l.value > R.value && (l.value = R.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === R.value && (i.value = !1), C.set(l.value), fe(u.delta.y);
+      )), l.value > F.value && (l.value = F.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === F.value && (i.value = !1), k.set(l.value), fe(u.delta.y);
     }, Te = () => {
-      t.blocking || (z.value = !0, L.value = !0);
+      t.blocking || (j.value = !0, z.value = !0);
     }, xe = () => {
-      t.blocking || (z.value = !1, L.value = !1);
+      t.blocking || (j.value = !1, z.value = !1);
     }, Me = () => {
       if (!g.value) return;
       const e = g.value.scrollTop === 0;
       i.value = e;
-    }, Oe = ze((e) => ce(e), {
+    }, Oe = je((e) => ce(e), {
       minQuietPeriodMs: t.duration,
       reducer: (e, u) => u
     });
     return q(d, (e, u) => {
       if (y.value === !1 || !e || !u) return;
-      const f = e[I.value], w = u[I.value];
-      typeof f != "string" && typeof w != "string" && (l.value = b(f, {
+      const f = e[I.value], T = u[I.value];
+      typeof f != "string" && typeof T != "string" && (l.value = b(f, {
         max: c.value
-      }), f !== w && (M = B(C, l.value, {
+      }), f !== T && (w = B(k, l.value, {
         duration: t.duration / 1e3,
         ease: "easeInOut"
       })));
@@ -291,14 +294,14 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
       s("instinctHeight", e);
     }), _e(() => {
       Y.deactivate();
-    }), a({ open: X, close: j, snapToPoint: ce }), (e, u) => (ae(), te(De, {
+    }), a({ open: X, close: L, snapToPoint: ce }), (e, u) => (ae(), te(De, {
       to: e.teleportTo,
       defer: e.teleportDefer
     }, [
       ne("div", Qe, [
-        $(m(be), null, {
+        A(m(be), null, {
           default: E(() => [
-            m(y) && e.blocking ? (ae(), te(m(A), {
+            m(y) && e.blocking ? (ae(), te(m($), {
               key: 0,
               ref_key: "backdrop",
               ref: H,
@@ -315,15 +318,15 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
           ]),
           _: 1
         }),
-        $(m(be), null, {
+        A(m(be), null, {
           default: E(() => [
-            m(y) ? (ae(), te(m(A), {
+            m(y) ? (ae(), te(m($), {
               key: 0,
               ref_key: "sheet",
               ref: r,
-              exit: { y: "100%", height: m(k) },
-              initial: { y: "100%" },
-              style: He({ y: m(S), height: m(C) }),
+              exit: { y: "100%", height: m(C) },
+              initial: !1,
+              style: He({ y: m(S), height: m(k) }),
               "data-vsbs-shadow": !e.blocking,
               "data-vsbs-sheet-show": m(y),
               "aria-modal": "true",
@@ -333,7 +336,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
               onTouchend: xe
             }, {
               default: E(() => [
-                $(m(A), {
+                A(m($), {
                   ref_key: "sheetHeader",
                   ref: h,
                   "data-vsbs-header": "",
@@ -354,9 +357,9 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
                   "data-vsbs-scroll": "",
                   onScrollend: Me
                 }, [
-                  $(m(A), {
+                  A(m($), {
                     ref_key: "sheetContentWrapper",
-                    ref: x,
+                    ref: M,
                     "data-vsbs-content-wrapper": "",
                     onPanStart: ke,
                     onPan: we,
@@ -376,7 +379,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
                     _: 3
                   }, 512)
                 ], 544),
-                $(m(A), {
+                A(m($), {
                   ref_key: "sheetFooter",
                   ref: p,
                   "data-vsbs-footer": "",
@@ -405,7 +408,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
   for (const [t, s] of a)
     o[t] = s;
   return o;
-}, Ze = /* @__PURE__ */ Ke(Ge, [["__scopeId", "data-v-ff3b8e9e"]]);
+}, Ze = /* @__PURE__ */ Ke(Ge, [["__scopeId", "data-v-c353e679"]]);
 export {
   Ze as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-container][data-v-ff3b8e9e]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:9999;visibility:visible}[data-vsbs-backdrop][data-v-ff3b8e9e]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));top:0;right:0;bottom:0;left:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;z-index:1}[data-vsbs-shadow=true][data-v-ff3b8e9e]:before{content:"";z-index:-1;position:absolute;top:0;height:100lvh;width:100%;border-radius:var(--vsbs-border-radius, 16px);box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-ff3b8e9e]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-height:inherit;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-ff3b8e9e]{visibility:visible}[data-vsbs-header][data-v-ff3b8e9e]{box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-ff3b8e9e]:before{background-color:var(--vsbs-handle-background, rgba(0, 0, 0, .28));border-radius:2px;content:"";display:block;height:4px;left:50%;position:absolute;top:8px;transform:translate(-50%);width:36px}[data-vsbs-header][data-v-ff3b8e9e]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-ff3b8e9e]{box-shadow:0 -1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-grow:0;flex-shrink:0;padding:16px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-ff3b8e9e]:empty{display:none}[data-vsbs-scroll][data-v-ff3b8e9e]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-ff3b8e9e]{height:100%}[data-vsbs-content][data-v-ff3b8e9e]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
+[data-vsbs-container][data-v-c353e679]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:9999;visibility:visible}[data-vsbs-backdrop][data-v-c353e679]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));top:0;right:0;bottom:0;left:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;z-index:1}[data-vsbs-shadow=true][data-v-c353e679]:before{content:"";z-index:-1;position:absolute;top:0;height:100lvh;width:100%;border-radius:var(--vsbs-border-radius, 16px);box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-c353e679]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-height:inherit;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-c353e679]{visibility:visible}[data-vsbs-header][data-v-c353e679]{box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-c353e679]:before{background-color:var(--vsbs-handle-background, rgba(0, 0, 0, .28));border-radius:2px;content:"";display:block;height:4px;left:50%;position:absolute;top:8px;transform:translate(-50%);width:36px}[data-vsbs-header][data-v-c353e679]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-c353e679]{box-shadow:0 -1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-grow:0;flex-shrink:0;padding:16px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-c353e679]:empty{display:none}[data-vsbs-scroll][data-v-c353e679]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-c353e679]{height:100%}[data-vsbs-content][data-v-c353e679]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "2.4.0",
+  "version": "2.4.1",
   "type": "module",
   "exports": {
     ".": {
@@ -62,7 +62,7 @@
     "@vueuse/core": "^13.2.0",
     "@vueuse/integrations": "^13.2.0",
     "focus-trap": "^7.6.4",
-    "motion-v": "^1.0.2",
+    "motion-v": "^1.5.0",
     "remeda": "^2.21.6",
     "vue": "^3.5.14"
   },