@douxcode/vue-spring-bottom-sheet 3.0.0-next.3 → 3.0.0-next.4

package/dist/BottomSheet.d.ts

@@ -44,11 +44,11 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     onInstinctHeight?: ((instinctHeight: number) => any) | undefined;
     "onUpdate:modelValue"?: (() => any) | undefined;
 }>, {
-    duration: number;
-    blocking: boolean;
     canSwipeClose: boolean;
-    canBackdropClose: boolean;
     expandOnContentDrag: boolean;
+    blocking: boolean;
+    duration: number;
+    canBackdropClose: boolean;
     teleportTo: string | import('vue').RendererElement;
     teleportDefer: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/composables/useDragGestures.d.ts

@@ -0,0 +1,47 @@
+import { Ref, ComputedRef, ShallowRef } from 'vue';
+export interface UseDragGesturesOptions {
+    sheetRef: ShallowRef<HTMLElement | null>;
+    sheetScrollRef: ShallowRef<HTMLElement | null>;
+    height: Ref<number>;
+    translateY: Ref<number>;
+    sheetHeight: Ref<number>;
+    windowHeight: Ref<number>;
+    snapPointsRef: ComputedRef<Array<number | `${number}%`>>;
+    flattenedSnapPoints: ComputedRef<number[]>;
+    currentSnapPointIndex: Ref<number>;
+    closestSnapPointIndex: ComputedRef<number>;
+    minSnapPoint: ComputedRef<number>;
+    maxSnapPoint: ComputedRef<number>;
+    canSwipeClose: Ref<boolean>;
+    swipeCloseThreshold: Ref<string | number | undefined>;
+    expandOnContentDrag: Ref<boolean>;
+    onClose: () => void;
+    onSnapped: (index: number) => void;
+    onDraggingUp: () => void;
+    onDraggingDown: () => void;
+}
+/**
+ * Composable that handles all drag/pan gesture logic for the bottom sheet.
+ * Manages header/footer dragging, content area dragging, and snap point navigation.
+ */
+export declare function useDragGestures(options: UseDragGesturesOptions): {
+    isDragging: Ref<boolean, boolean>;
+    preventContentScroll: Ref<boolean, boolean>;
+    headerFooterHandlers: ComputedRef<{
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+        onPointerup: (event: PointerEvent) => void;
+        onPointercancel: (event: PointerEvent) => void;
+        onContextmenu: (event: MouseEvent) => void;
+        onTouchmove: (event: TouchEvent) => void;
+    }>;
+    contentWrapperHandlers: ComputedRef<{
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+        onPointerup: (event: PointerEvent) => void;
+        onPointercancel: (event: PointerEvent) => void;
+        onContextmenu: (event: MouseEvent) => void;
+        onTouchmove: (event: TouchEvent) => void;
+    }>;
+    scrollEnd: () => void;
+};

package/dist/composables/useFocusManagement.d.ts

@@ -0,0 +1,17 @@
+import { Ref, ShallowRef } from 'vue';
+export interface UseFocusManagementOptions {
+    sheetRef: ShallowRef<HTMLElement | null>;
+    backdropRef: ShallowRef<HTMLElement | null>;
+    blocking: Ref<boolean>;
+    onEscape: () => void;
+}
+/**
+ * Manage focus trap and aria-expanded observer for accessibility.
+ * Handles keyboard escape, focus trapping, and pausing trap when
+ * nested aria-expanded elements (like dropdowns) are open.
+ */
+export declare function useFocusManagement(options: UseFocusManagementOptions): {
+    activate: () => void;
+    deactivate: () => void;
+    cleanup: () => void;
+};

package/dist/composables/useSheetScrollLock.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+export interface UseSheetScrollLockOptions {
+    blocking: Ref<boolean>;
+}
+/**
+ * Manage scroll locking for the sheet.
+ * When blocking mode is enabled, locks body scroll when sheet is open.
+ * When non-blocking, temporarily locks during touch interactions.
+ */
+export declare function useSheetScrollLock(options: UseSheetScrollLockOptions): {
+    lock: () => void;
+    unlock: () => void;
+    lockIfBlocking: () => void;
+    unlockIfBlocking: () => void;
+    touchStartHandler: () => void;
+    touchEndHandler: () => void;
+};

package/dist/index.mjs

@@ -1,114 +1,372 @@
-import { ref as m, computed as $, defineComponent as qe, useCssVars as ze, watch as ee, onMounted as We, toRefs as Qe, nextTick as Se, onUnmounted as je, createElementBlock as ue, openBlock as Q, Fragment as Ge, createBlock as Ce, Teleport as xe, createVNode as ye, Transition as Pe, withCtx as Te, createCommentVNode as ke, unref as se, normalizeStyle as Ke, createElementVNode as j, normalizeClass as re, renderSlot as ie } from "vue";
-import { useVModel as Ue, useWindowSize as Je, useElementBounding as te, useScrollLock as Ye } from "@vueuse/core";
-import { useFocusTrap as Xe } from "@vueuse/integrations/useFocusTrap";
-function G(a, o) {
-  const s = parseFloat(a);
-  return o * s / 100;
+import { ref as P, computed as D, defineComponent as ye, useCssVars as Ee, watch as te, onMounted as De, shallowRef as q, toRefs as He, nextTick as fe, onUnmounted as Be, createElementBlock as ie, openBlock as X, Fragment as Ie, createBlock as pe, Teleport as he, createVNode as ge, Transition as me, withCtx as Se, createCommentVNode as be, unref as E, normalizeStyle as Ye, createElementVNode as j, mergeProps as ce, renderSlot as ve, normalizeClass as Me } from "vue";
+import { useScrollLock as Pe, useVModel as Re, useWindowSize as Oe, useElementBounding as ne } from "@vueuse/core";
+import { useFocusTrap as Ae } from "@vueuse/integrations/useFocusTrap";
+function Te(t, a) {
+  const u = parseFloat(t);
+  return a * u / 100;
 }
-function Ze(a, o, s) {
-  const t = m(0), v = $(() => a.value.map((C) => typeof C == "string" ? G(C, s.value) : C)), S = $(() => Math.min(...v.value)), i = $(() => Math.max(...v.value)), x = $(() => {
-    const C = v.value.reduce(
-      (y, h) => Math.abs(h - o.value) < Math.abs(y - o.value) ? h : y
+function Le(t, a, u) {
+  const e = P(0), n = D(() => t.value.map((f) => typeof f == "string" ? Te(f, u.value) : f)), i = D(() => Math.min(...n.value)), r = D(() => Math.max(...n.value)), p = D(() => {
+    const f = n.value.reduce(
+      (b, v) => Math.abs(v - a.value) < Math.abs(b - a.value) ? v : b
     );
-    return v.value.indexOf(C);
+    return n.value.indexOf(f);
   });
   return {
-    currentSnapPointIndex: t,
-    flattenedSnapPoints: v,
-    minSnapPoint: S,
-    maxSnapPoint: i,
-    closestSnapPointIndex: x
+    currentSnapPointIndex: e,
+    flattenedSnapPoints: n,
+    minSnapPoint: i,
+    maxSnapPoint: r,
+    closestSnapPointIndex: p
   };
 }
-function _e(a = {}) {
-  const { velocityThreshold: o = 0.5 } = a, s = m(0), t = m(0), v = m(0), S = m(0), i = m([]);
+function Fe(t, a, u) {
+  let e = (n) => t(n, ...a);
+  return u === void 0 ? e : Object.assign(e, { lazy: u, lazyArgs: a });
+}
+function $e(t, a, u) {
+  let e = t.length - a.length;
+  if (e === 0) return t(...a);
+  if (e === 1) return Fe(t, a, u);
+  throw Error("Wrong number of arguments");
+}
+function I(...t) {
+  return $e(Ne, t);
+}
+const Ne = (t, { min: a, max: u }) => a !== void 0 && t < a ? a : u !== void 0 && t > u ? u : t, ke = /* @__PURE__ */ Symbol("funnel/voidReducer"), Ve = () => ke;
+function Ue(t, { triggerAt: a = "end", minQuietPeriodMs: u, maxBurstDurationMs: e, minGapMs: n, reducer: i = Ve }) {
+  let r, p, f, b, v = () => {
+    let g = f;
+    g !== void 0 && (f = void 0, g === ke ? t() : t(g), n !== void 0 && (p = setTimeout(d, n)));
+  }, d = () => {
+    clearTimeout(p), p = void 0, r === void 0 && v();
+  }, h = () => {
+    clearTimeout(r), r = void 0, b = void 0, p === void 0 && v();
+  };
+  return { call: (...g) => {
+    let w = r === void 0 && p === void 0;
+    if ((a !== "start" || w) && (f = i(f, ...g)), !(r === void 0 && !w)) {
+      if (u !== void 0 || e !== void 0 || n === void 0) {
+        clearTimeout(r);
+        let C = Date.now();
+        b ??= C;
+        let x = e === void 0 ? u ?? 0 : Math.min(u ?? e, e - (C - b));
+        r = setTimeout(h, x);
+      }
+      a !== "end" && w && v();
+    }
+  }, cancel: () => {
+    clearTimeout(r), r = void 0, b = void 0, clearTimeout(p), p = void 0, f = void 0;
+  }, flush: () => {
+    h(), d();
+  }, get isIdle() {
+    return r === void 0 && p === void 0;
+  } };
+}
+function We(t = {}) {
+  const { velocityThreshold: a = 0.5 } = t, u = P(0), e = P(0), n = P(0), i = P(0), r = P([]);
   return {
-    start: (h) => {
-      const w = performance.now();
-      s.value = h, t.value = w, v.value = h, S.value = w, i.value = [{ y: h, time: w }];
+    start: (v) => {
+      const d = performance.now();
+      u.value = v, e.value = d, n.value = v, i.value = d, r.value = [{ y: v, time: d }];
     },
-    update: (h) => {
-      const w = performance.now();
-      v.value = h, S.value = w, i.value.push({ y: h, time: w });
-      const f = w - 100;
-      i.value = i.value.filter((d) => d.time > f).slice(-5);
+    update: (v) => {
+      const d = performance.now();
+      n.value = v, i.value = d, r.value.push({ y: v, time: d });
+      const h = d - 100;
+      r.value = r.value.filter((g) => g.time > h).slice(-5);
     },
     end: () => {
-      const h = i.value;
-      let w = 0;
-      if (h.length >= 2) {
-        const M = h[0], O = h[h.length - 1];
-        if (M && O) {
-          const F = O.y - M.y, L = O.time - M.time;
-          L > 0 && (w = F / L);
+      const v = r.value;
+      let d = 0;
+      if (v.length >= 2) {
+        const w = v[0], C = v[v.length - 1];
+        if (w && C) {
+          const x = C.y - w.y, R = C.time - w.time;
+          R > 0 && (d = x / R);
         }
       }
-      const f = Math.abs(w) >= o;
-      let d = "none";
-      return f && (d = w < 0 ? "up" : "down"), i.value = [], {
-        direction: d,
-        velocity: Math.abs(w),
-        isSwipe: f
+      const h = Math.abs(d) >= a;
+      let g = "none";
+      return h && (g = d < 0 ? "up" : "down"), r.value = [], {
+        direction: g,
+        velocity: Math.abs(d),
+        isSwipe: h
       };
     }
   };
 }
-function et(a, o, s) {
-  let t = (v) => a(v, ...o);
-  return s === void 0 ? t : Object.assign(t, { lazy: s, lazyArgs: o });
+function qe(t, a, u) {
+  return Math.max(a, Math.min(t, u));
 }
-function tt(a, o, s) {
-  let t = a.length - o.length;
-  if (t === 0) return a(...o);
-  if (t === 1) return et(a, o, s);
-  throw Error("Wrong number of arguments");
+function ze(t, a) {
+  return Math.pow(t, a * 5);
 }
-function P(...a) {
-  return tt(nt, a);
+function we(t, a, u) {
+  return a === 0 || Math.abs(a) === 1 / 0 ? ze(t, u) : t * a * u / (a + u * t);
 }
-const nt = (a, { min: o, max: s }) => o !== void 0 && a < o ? o : s !== void 0 && a > s ? s : a, Ee = /* @__PURE__ */ Symbol("funnel/voidReducer"), at = () => Ee;
-function lt(a, { triggerAt: o = "end", minQuietPeriodMs: s, maxBurstDurationMs: t, minGapMs: v, reducer: S = at }) {
-  let i, x, C, y, h = () => {
-    let d = C;
-    d !== void 0 && (C = void 0, d === Ee ? a() : a(d), v !== void 0 && (x = setTimeout(w, v)));
-  }, w = () => {
-    clearTimeout(x), x = void 0, i === void 0 && h();
-  }, f = () => {
-    clearTimeout(i), i = void 0, y = void 0, x === void 0 && h();
-  };
-  return { call: (...d) => {
-    let M = i === void 0 && x === void 0;
-    if ((o !== "start" || M) && (C = S(C, ...d)), !(i === void 0 && !M)) {
-      if (s !== void 0 || t !== void 0 || v === void 0) {
-        clearTimeout(i);
-        let O = Date.now();
-        y ??= O;
-        let F = t === void 0 ? s ?? 0 : Math.min(s ?? t, t - (O - y));
-        i = setTimeout(f, F);
-      }
-      o !== "end" && M && h();
-    }
-  }, cancel: () => {
-    clearTimeout(i), i = void 0, y = void 0, clearTimeout(x), x = void 0, C = void 0;
-  }, flush: () => {
-    f(), w();
-  }, get isIdle() {
-    return i === void 0 && x === void 0;
-  } };
+function de(t, a, u, e = 0.15) {
+  return e === 0 ? qe(t, a, u) : t < a ? -we(a - t, u - a, e) + a : t > u ? +we(t - u, u - a, e) + u : t;
 }
-function ot(a, o, s) {
-  return Math.max(o, Math.min(a, s));
+function ae(t, a) {
+  return typeof t == "number" ? I(t, { max: a }) : Te(t, a);
 }
-function ut(a, o) {
-  return Math.pow(a, o * 5);
+function Ce(t, a) {
+  if (t === void 0)
+    return a / 2;
+  if (typeof t == "number")
+    return t;
+  if (typeof t == "string" && t.includes("%")) {
+    const u = Number(t.replace("%", ""));
+    return a * (u / 100);
+  }
+  return a / 2;
 }
-function Me(a, o, s) {
-  return o === 0 || Math.abs(o) === 1 / 0 ? ut(a, s) : a * o * s / (o + s * a);
+const Ge = 10, Qe = 3, Xe = 0.25, xe = 0.5, je = 0.5;
+function Ke(t) {
+  const {
+    sheetRef: a,
+    sheetScrollRef: u,
+    height: e,
+    translateY: n,
+    sheetHeight: i,
+    windowHeight: r,
+    snapPointsRef: p,
+    flattenedSnapPoints: f,
+    currentSnapPointIndex: b,
+    closestSnapPointIndex: v,
+    minSnapPoint: d,
+    maxSnapPoint: h,
+    canSwipeClose: g,
+    swipeCloseThreshold: w,
+    expandOnContentDrag: C,
+    onClose: x,
+    onSnapped: R,
+    onDraggingUp: oe,
+    onDraggingDown: H
+  } = t, T = P(!1), F = P(0), N = P(0), k = P(0), Y = P(0), B = P(!0), S = P(!0), O = We({ velocityThreshold: je }), K = (o) => {
+    o > 0 ? H() : o < 0 && oe();
+  }, z = () => {
+    if (!a.value) return;
+    const o = window.getComputedStyle(a.value), c = parseFloat(o.height);
+    let l = 0;
+    o.transform && o.transform !== "none" && (l = new DOMMatrix(o.transform).m42), e.value = c, n.value = l;
+  }, le = () => {
+    const o = v.value;
+    b.value = o;
+    const c = p.value[o];
+    if (!c) return;
+    const l = ae(c, r.value);
+    e.value = l, n.value = 0, R(p.value.indexOf(c));
+  }, _ = (o = !0) => {
+    const c = O.end();
+    if (o && c.isSwipe && c.direction === "down" && g.value && e.value <= d.value + Ge)
+      return n.value = e.value, x(), !0;
+    let l;
+    if (o && c.isSwipe && f.value.length > 1) {
+      const M = [...f.value].sort((y, L) => y - L);
+      if (c.direction === "up") {
+        const y = M.find((L) => L > e.value + 1);
+        l = y !== void 0 ? f.value.indexOf(y) : v.value;
+      } else {
+        const y = [...M].reverse().find((L) => L < e.value - 1);
+        l = y !== void 0 ? f.value.indexOf(y) : v.value;
+      }
+    } else
+      l = v.value;
+    b.value = l;
+    const s = p.value[l];
+    if (!s)
+      return x(), !0;
+    const m = ae(s, r.value);
+    return m === 0 ? (x(), !0) : (e.value = m, n.value = 0, R(p.value.indexOf(s)), !1);
+  }, ue = (o) => {
+    a.value && o.button === 0 && (z(), T.value = !0, F.value = o.clientY, N.value = e.value, k.value = n.value, Y.value = o.clientY, O.start(o.clientY), o.target.setPointerCapture(o.pointerId));
+  }, A = (o) => {
+    if (!T.value) return;
+    if (o.buttons !== 1) {
+      $(o);
+      return;
+    }
+    const c = o.clientY - F.value, l = o.clientY;
+    n.value <= 0 && (e.value = N.value - c), e.value <= d.value && (e.value = d.value, n.value = k.value + c, g.value ? n.value = I(n.value, { min: 0 }) : n.value = I(
+      de(
+        n.value,
+        -i.value,
+        0,
+        xe
+      ),
+      { min: 0 }
+    )), e.value = I(
+      de(e.value, 0, h.value, Xe),
+      {
+        min: 0,
+        max: r.value
+      }
+    ), K(o.clientY - Y.value), O.update(o.clientY), Y.value = l;
+  }, $ = (o) => {
+    if (T.value = !1, o.target.releasePointerCapture(o.pointerId), g.value) {
+      const c = Ce(w.value, e.value);
+      if (n.value > c) {
+        n.value = e.value, x();
+        return;
+      }
+    } else
+      n.value = 0;
+    if (n.value === e.value) {
+      n.value = 0, x();
+      return;
+    }
+    _();
+  }, re = (o) => {
+    if (!u.value) return;
+    const c = u.value.scrollTop === 0, l = o > 0, s = f.value.length === 1, m = 0.5 > Math.abs(e.value - h.value);
+    if (s) {
+      if (!C.value) {
+        S.value = !1;
+        return;
+      }
+      n.value === 0 && c && l && (S.value = !0), n.value === 0 && c && !l && (S.value = !1);
+    } else {
+      if (!C.value) {
+        S.value = !1;
+        return;
+      }
+      S.value = !0, m && (l && c && (S.value = !0), !l && c && (S.value = !1), c || (S.value = !1));
+    }
+  }, J = (o) => {
+    a.value && o.button === 0 && (z(), T.value = !0, F.value = o.clientY, N.value = e.value, k.value = n.value, Y.value = o.clientY, B.value = !0, O.start(o.clientY), o.target.setPointerCapture(o.pointerId));
+  }, se = (o) => {
+    if (!T.value) return;
+    if (o.buttons !== 1) {
+      V(o);
+      return;
+    }
+    if (!C.value) {
+      S.value = !1;
+      return;
+    }
+    const c = o.clientY - F.value, l = o.clientY, s = o.clientY - Y.value;
+    if (B.value) {
+      const M = o.clientY - F.value;
+      if (Math.abs(M) > Qe)
+        B.value = !1, re(M);
+      else {
+        Y.value = l;
+        return;
+      }
+    }
+    n.value === 0 && S.value && C.value && (e.value = N.value - c), e.value <= d.value && (e.value = d.value, S.value && C.value && (n.value = k.value + c), n.value = I(n.value, { min: 0, max: d.value }), g.value ? n.value = I(n.value, { min: 0 }) : n.value = I(
+      de(
+        n.value,
+        -i.value,
+        0,
+        xe
+      ),
+      { min: 0 }
+    )), e.value > h.value && (e.value = h.value), e.value = I(e.value, { max: r.value }), f.value.length === 1 || e.value === h.value && (S.value = !1), K(s), O.update(o.clientY), Y.value = l;
+  }, V = (o) => {
+    if (T.value = !1, B.value = !0, o.target.releasePointerCapture(o.pointerId), g.value) {
+      const l = Ce(w.value, e.value);
+      if (n.value > l) {
+        n.value = e.value, x();
+        return;
+      }
+    } else
+      n.value = 0;
+    if (n.value === e.value) {
+      n.value = 0, x();
+      return;
+    }
+    const c = S.value;
+    _(c);
+  }, U = (o) => {
+    T.value && (o.preventDefault(), T.value = !1, B.value = !0, le());
+  }, G = (o) => {
+    S.value = !0, Z(o);
+  }, Z = (o) => {
+    S.value && o.preventDefault();
+  }, Q = () => {
+    if (!u.value) return;
+    const o = u.value.scrollTop === 0;
+    S.value = o;
+  }, W = D(() => ({
+    onPointerdown: ue,
+    onPointermove: A,
+    onPointerup: $,
+    onPointercancel: $,
+    onContextmenu: U,
+    onTouchmove: G
+  })), ee = D(() => ({
+    onPointerdown: J,
+    onPointermove: se,
+    onPointerup: V,
+    onPointercancel: V,
+    onContextmenu: U,
+    onTouchmove: Z
+  }));
+  return {
+    isDragging: T,
+    preventContentScroll: S,
+    headerFooterHandlers: W,
+    contentWrapperHandlers: ee,
+    scrollEnd: Q
+  };
 }
-function ve(a, o, s, t = 0.15) {
-  return t === 0 ? ot(a, o, s) : a < o ? -Me(o - a, s - o, t) + o : a > s ? +Me(a - s, s - o, t) + s : a;
+function _e(t) {
+  const { blocking: a } = t, u = Pe(document.body), e = Pe(document.documentElement), n = () => {
+    u.value = !0, e.value = !0;
+  }, i = () => {
+    u.value = !1, e.value = !1;
+  };
+  return {
+    lock: n,
+    unlock: i,
+    lockIfBlocking: () => {
+      a.value && n();
+    },
+    unlockIfBlocking: () => {
+      a.value && i();
+    },
+    touchStartHandler: () => {
+      a.value || n();
+    },
+    touchEndHandler: () => {
+      a.value || i();
+    }
+  };
 }
-const st = ["data-vsbs-shadow", "data-vsbs-sheet-show"], rt = /* @__PURE__ */ qe({
+function Je(t) {
+  const { sheetRef: a, backdropRef: u, blocking: e, onEscape: n } = t, i = P(null), r = Ae([a, u], {
+    immediate: !1,
+    fallbackFocus: () => a.value || document.body
+  }), p = (g) => {
+    g.key === "Escape" && n();
+  }, f = () => {
+    a.value && (i.value = new MutationObserver((g) => {
+      for (const w of g)
+        w.type === "attributes" && w.attributeName === "aria-expanded" && (w.target.getAttribute("aria-expanded") === "true" ? r.pause() : a.value?.querySelector('[aria-expanded="true"]') || r.unpause());
+    }), i.value.observe(a.value, {
+      attributes: !0,
+      attributeFilter: ["aria-expanded"],
+      subtree: !0
+    }));
+  }, b = () => {
+    i.value && (i.value.disconnect(), i.value = null);
+  };
+  return {
+    activate: () => {
+      e.value && (r.activate(), f()), window.addEventListener("keydown", p);
+    },
+    deactivate: () => {
+      window.removeEventListener("keydown", p), b(), e.value && r.deactivate();
+    },
+    cleanup: () => {
+      b(), r.deactivate();
+    }
+  };
+}
+const Ze = ["data-vsbs-shadow", "data-vsbs-sheet-show"], et = /* @__PURE__ */ ye({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
@@ -127,404 +385,213 @@ const st = ["data-vsbs-shadow", "data-vsbs-sheet-show"], rt = /* @__PURE__ */ qe
     footerClass: {}
   },
   emits: ["opened", "opening-started", "closed", "closing-started", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
-  setup(a, { expose: o, emit: s }) {
-    ze((e) => ({
-      v6f938e48: Oe.value
+  setup(t, { expose: a, emit: u }) {
+    Ee((l) => ({
+      v531b2f52: F.value
     }));
-    const t = a, v = s, S = Ue(t, "modelValue", v, {
+    const e = t, n = u, i = Re(e, "modelValue", n, {
       passive: !0
     });
-    ee(S, (e) => {
-      e && le();
-    }), We(() => {
-      S.value && le();
+    te(i, (l) => {
+      l && Q();
+    }), De(() => {
+      i.value && Q();
     });
-    const i = m(null), x = m(null), C = m(null), y = m(null), h = m(null), w = m(null), f = m(t.expandOnContentDrag), { height: d } = Je(), { height: M } = te(i), { height: O } = te(x), { height: F } = te(h), { height: L } = te(C), ne = $({
-      get() {
-        return P(
-          Math.ceil(F.value + O.value + L.value),
-          {
-            max: d.value
-          }
-        );
-      },
-      set(e) {
-        O.value = e[0], F.value = e[1], L.value = e[2];
-      }
-    }), l = m(0), u = m(0), Oe = $(() => t.duration + "ms"), { snapPoints: De } = Qe(t), Y = $(() => De.value ?? [ne.value]), {
-      flattenedSnapPoints: E,
+    const r = q(null), p = q(null), f = q(null), b = q(null), v = q(null), d = q(null), { height: h } = Oe(), { height: g } = ne(r), { height: w } = ne(p), { height: C } = ne(v), { height: x } = ne(f), R = D(() => I(
+      Math.ceil(C.value + w.value + x.value),
+      { max: h.value }
+    )), oe = (l, s, m) => {
+      w.value = l, C.value = s, x.value = m;
+    }, H = P(0), T = P(0), F = D(() => e.duration + "ms"), { snapPoints: N } = He(e), k = D(() => N.value ?? [R.value]), {
+      flattenedSnapPoints: Y,
       currentSnapPointIndex: B,
-      closestSnapPointIndex: A,
-      minSnapPoint: D,
-      maxSnapPoint: V
-    } = Ze(Y, l, d), K = Ye(document.body), U = Ye(document.documentElement), H = m(!1), N = m(0), J = m(0), X = m(0), I = m(0), Z = m(!0), R = _e({ velocityThreshold: 0.5 }), q = Xe([i, w], {
-      immediate: !1,
-      fallbackFocus: () => i.value || document.body
-    });
-    let z = null;
-    const Be = () => {
-      i.value && (z = new MutationObserver((e) => {
-        for (const n of e)
-          n.type === "attributes" && n.attributeName === "aria-expanded" && (n.target.getAttribute("aria-expanded") === "true" ? q.pause() : i.value?.querySelector('[aria-expanded="true"]') || q.unpause());
-      }), z.observe(i.value, {
-        attributes: !0,
-        attributeFilter: ["aria-expanded"],
-        subtree: !0
-      }));
-    }, ce = () => {
-      z && (z.disconnect(), z = null);
-    };
-    function de(e) {
-      f.value = !0, fe(e);
-    }
-    function fe(e) {
-      f.value && e.preventDefault();
-    }
-    const pe = (e) => {
-      e.key === "Escape" && T();
-    }, He = () => {
-      t.canBackdropClose && T();
-    };
-    let ae = !1;
-    const le = async () => {
-      if (ae) return;
-      S.value = !0, ae = !0, v("opening-started"), t.blocking && (K.value = !0, U.value = !0), await Se();
-      const e = i.value;
-      M.value = e.getBoundingClientRect().height;
-      const n = e.querySelector("[data-vsbs-content]"), r = e.querySelector("[data-vsbs-header]"), c = e.querySelector("[data-vsbs-footer]");
-      if (ne.value = [
-        r.getBoundingClientRect().height,
-        n.getBoundingClientRect().height,
-        c.getBoundingClientRect().height
-      ], await Se(), B.value = E.value.findIndex(
-        (p) => p === D.value
-      ), t.initialSnapPoint) {
-        const p = t.initialSnapPoint;
-        if (p < 0 || p >= Y.value.length) {
+      closestSnapPointIndex: S,
+      minSnapPoint: O,
+      maxSnapPoint: K
+    } = Le(k, H, h), z = D(() => e.blocking), le = D(() => e.canSwipeClose), _ = D(() => e.swipeCloseThreshold), ue = D(() => e.expandOnContentDrag), A = _e({ blocking: z }), $ = Je({
+      sheetRef: r,
+      backdropRef: d,
+      blocking: z,
+      onEscape: () => W()
+    }), { isDragging: re, headerFooterHandlers: J, contentWrapperHandlers: se, scrollEnd: V } = Ke({
+      sheetRef: r,
+      sheetScrollRef: b,
+      height: H,
+      translateY: T,
+      sheetHeight: g,
+      windowHeight: h,
+      snapPointsRef: k,
+      flattenedSnapPoints: Y,
+      currentSnapPointIndex: B,
+      closestSnapPointIndex: S,
+      minSnapPoint: O,
+      maxSnapPoint: K,
+      canSwipeClose: le,
+      swipeCloseThreshold: _,
+      expandOnContentDrag: ue,
+      onClose: () => W(),
+      onSnapped: (l) => n("snapped", l),
+      onDraggingUp: () => n("dragging-up"),
+      onDraggingDown: () => n("dragging-down")
+    }), U = P(!1), G = P(!1), Z = () => {
+      e.canBackdropClose && W();
+    }, Q = async () => {
+      if (U.value) return;
+      i.value = !0, U.value = !0, n("opening-started"), A.lockIfBlocking(), await fe();
+      const l = r.value;
+      g.value = l.getBoundingClientRect().height;
+      const s = l.querySelector("[data-vsbs-content]"), m = l.querySelector("[data-vsbs-header]"), M = l.querySelector("[data-vsbs-footer]");
+      if (oe(
+        m.getBoundingClientRect().height,
+        s.getBoundingClientRect().height,
+        M.getBoundingClientRect().height
+      ), await fe(), B.value = Y.value.findIndex(
+        (y) => y === O.value
+      ), e.initialSnapPoint !== void 0) {
+        const y = e.initialSnapPoint;
+        if (y < 0 || y >= k.value.length) {
           console.warn("Index out of bounds");
           return;
         }
-        const g = Y.value[p];
-        if (!g) return;
-        let b;
-        typeof g == "number" ? b = P(g, {
-          max: d.value
-        }) : b = G(g, d.value), l.value = b;
+        const L = k.value[y];
+        if (!L) return;
+        H.value = ae(L, h.value);
       } else
-        l.value = P(D.value, {
-          max: d.value
-        });
-      u.value = l.value, requestAnimationFrame(() => {
-        u.value = 0, t.blocking && setTimeout(() => {
-          S.value && (v("opened"), q.activate(), Be());
-        }, t.duration);
-      }), window.addEventListener("keydown", pe), ae = !1;
-    };
-    let oe = !1;
-    const T = () => {
-      oe || (S.value = !1, oe = !0, v("closing-started"), t.blocking && (K.value = !1, U.value = !1), window.removeEventListener("keydown", pe), ce(), t.blocking && q.deactivate(), u.value = l.value, setTimeout(() => {
-        v("closed"), oe = !1;
-      }, t.duration));
-    }, he = (e) => {
-      if (!Y.value) return;
-      if (e < 0 || e >= Y.value.length) {
+        H.value = I(O.value, { max: h.value });
+      T.value = H.value, requestAnimationFrame(() => {
+        T.value = 0, e.blocking && setTimeout(() => {
+          i.value && (n("opened"), $.activate());
+        }, e.duration);
+      }), U.value = !1;
+    }, W = () => {
+      G.value || (i.value = !1, G.value = !0, n("closing-started"), A.unlockIfBlocking(), $.deactivate(), T.value = H.value, setTimeout(() => {
+        n("closed"), G.value = !1;
+      }, e.duration));
+    }, ee = (l) => {
+      if (!k.value) return;
+      if (l < 0 || l >= k.value.length) {
         console.warn("Index out of bounds");
         return;
       }
-      B.value = e;
-      const n = Y.value[e];
-      if (!n) return;
-      let r;
-      typeof n == "number" ? r = P(n, {
-        max: d.value
-      }) : r = G(n, d.value), l.value = r, v("snapped", Y.value.indexOf(n));
-    };
-    function me(e) {
-      e > 0 ? v("dragging-down") : e < 0 && v("dragging-up");
-    }
-    const ge = (e) => {
-      if (!i.value) return;
-      const n = window.getComputedStyle(i.value), r = parseFloat(n.height);
-      let c = 0;
-      n.transform && n.transform !== "none" && (c = new DOMMatrix(n.transform).m42), l.value = r, u.value = c, H.value = !0, N.value = e.clientY, J.value = l.value, X.value = u.value, I.value = e.clientY, R.start(e.clientY), e.target.setPointerCapture(e.pointerId);
-    }, we = (e) => {
-      if (!H.value) return;
-      const n = e.clientY - N.value, r = e.clientY;
-      u.value <= 0 && (l.value = J.value - n), l.value <= D.value && (l.value = D.value, u.value = X.value + n, t.canSwipeClose ? u.value = P(u.value, { min: 0 }) : u.value = P(
-        ve(u.value, -M.value, 0, 0.5),
-        { min: 0 }
-      )), l.value = P(ve(l.value, 0, V.value, 0.25), {
-        min: 0,
-        max: d.value
-      }), me(e.clientY - I.value), R.update(e.clientY), I.value = r;
-    }, _ = (e) => {
-      if (H.value = !1, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
-        let g = l.value / 2;
-        if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (g = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (g = l.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > g) {
-          u.value = l.value, T();
-          return;
-        }
-      } else
-        u.value = 0;
-      if (u.value === l.value) {
-        u.value = 0, T();
-        return;
-      }
-      const n = R.end();
-      if (n.isSwipe && n.direction === "down" && t.canSwipeClose && l.value <= D.value + 10) {
-        u.value = l.value, T();
-        return;
-      }
-      let r;
-      if (n.isSwipe && E.value.length > 1) {
-        const g = [...E.value].sort((b, k) => b - k);
-        if (n.direction === "up") {
-          const b = g.find((k) => k > l.value + 1);
-          r = b !== void 0 ? E.value.indexOf(b) : A.value;
-        } else {
-          const b = [...g].reverse().find((k) => k < l.value - 1);
-          r = b !== void 0 ? E.value.indexOf(b) : A.value;
-        }
-      } else
-        r = A.value;
-      B.value = r;
-      const c = Y.value[r];
-      if (!c) {
-        T();
-        return;
-      }
-      let p;
-      if (typeof c == "number" ? p = P(c, {
-        max: d.value
-      }) : p = G(c, d.value), p === 0) {
-        T();
-        return;
-      }
-      l.value = p, u.value = 0, v("snapped", Y.value.indexOf(c));
-    }, Ie = (e) => {
-      if (!y.value) return;
-      const n = y.value.scrollTop === 0, r = e > 0, c = E.value.length === 1, p = 0.5 > Math.abs(l.value - V.value);
-      if (c) {
-        if (!t.expandOnContentDrag) {
-          f.value = !1;
-          return;
-        }
-        u.value === 0 && n && r && (f.value = !0), u.value === 0 && n && !r && (f.value = !1);
-      } else {
-        if (!t.expandOnContentDrag) {
-          f.value = !1;
-          return;
-        }
-        f.value = !0, p && (r && n && (f.value = !0), !r && n && (f.value = !1), n || (f.value = !1));
-      }
-    }, $e = (e) => {
-      if (!i.value) return;
-      const n = window.getComputedStyle(i.value), r = parseFloat(n.height);
-      let c = 0;
-      n.transform && n.transform !== "none" && (c = new DOMMatrix(n.transform).m42), l.value = r, u.value = c, H.value = !0, N.value = e.clientY, J.value = l.value, X.value = u.value, I.value = e.clientY, Z.value = !0, R.start(e.clientY), e.target.setPointerCapture(e.pointerId);
-    }, Fe = (e) => {
-      if (!H.value) return;
-      if (!t.expandOnContentDrag) {
-        f.value = !1;
-        return;
-      }
-      const n = e.clientY - N.value, r = e.clientY, c = e.clientY - I.value;
-      if (Z.value) {
-        const g = e.clientY - N.value;
-        if (Math.abs(g) > 3)
-          Z.value = !1, Ie(g);
-        else {
-          I.value = r;
-          return;
-        }
-      }
-      u.value === 0 && f.value && t.expandOnContentDrag && (l.value = J.value - n), l.value <= D.value && (l.value = D.value, f.value && t.expandOnContentDrag && (u.value = X.value + n), u.value = P(u.value, { min: 0, max: D.value }), t.canSwipeClose ? u.value = P(u.value, { min: 0 }) : u.value = P(
-        ve(u.value, -M.value, 0, 0.5),
-        { min: 0 }
-      )), l.value > V.value && (l.value = V.value), l.value = P(l.value, { max: d.value }), E.value.length === 1 || l.value === V.value && (f.value = !1), me(c), R.update(e.clientY), I.value = r;
-    }, be = (e) => {
-      if (H.value = !1, Z.value = !0, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
-        let b = l.value / 2;
-        if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (b = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (b = l.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > b) {
-          u.value = l.value, T();
-          return;
-        }
-      } else
-        u.value = 0;
-      if (u.value === l.value) {
-        u.value = 0, T();
-        return;
-      }
-      const n = R.end(), r = f.value;
-      if (r && n.isSwipe && n.direction === "down" && t.canSwipeClose && l.value <= D.value + 10) {
-        u.value = l.value, T();
-        return;
-      }
-      let c;
-      if (r && n.isSwipe && E.value.length > 1) {
-        const b = [...E.value].sort((k, W) => k - W);
-        if (n.direction === "up") {
-          const k = b.find((W) => W > l.value + 1);
-          c = k !== void 0 ? E.value.indexOf(k) : A.value;
-        } else {
-          const k = [...b].reverse().find((W) => W < l.value - 1);
-          c = k !== void 0 ? E.value.indexOf(k) : A.value;
-        }
-      } else
-        c = A.value;
-      B.value = c;
-      const p = Y.value[c];
-      if (!p) {
-        T();
-        return;
-      }
-      let g;
-      if (typeof p == "number" ? g = P(p, {
-        max: d.value
-      }) : g = G(p, d.value), g === 0) {
-        T();
-        return;
-      }
-      l.value = g, u.value = 0, v("snapped", Y.value.indexOf(p));
-    }, Ae = () => {
-      t.blocking || (K.value = !0, U.value = !0);
-    }, Re = () => {
-      t.blocking || (K.value = !1, U.value = !1);
-    }, Le = () => {
-      if (!y.value) return;
-      const e = y.value.scrollTop === 0;
-      f.value = e;
-    }, Ve = lt((e) => he(e), {
-      minQuietPeriodMs: t.duration,
-      reducer: (e, n) => n
+      B.value = l;
+      const s = k.value[l];
+      s && (H.value = ae(s, h.value), n("snapped", k.value.indexOf(s)));
+    }, o = Ue((l) => ee(l), {
+      minQuietPeriodMs: e.duration,
+      reducer: (l, s) => s
     });
-    ee(Y, (e, n) => {
-      if (S.value === !1 || !e || !n) return;
-      const r = e[B.value], c = n[B.value];
-      !r || typeof r == "string" || !c || typeof c == "string" || (l.value = P(r, {
-        max: d.value
-      }));
-    }), ee(d, () => {
-      Ve.call(B.value);
-    }), ee(ne, (e) => {
-      v("instinctHeight", e);
-    }), je(() => {
-      ce(), q.deactivate();
+    te(k, (l, s) => {
+      if (i.value === !1 || !l || !s) return;
+      const m = l[B.value], M = s[B.value];
+      !m || typeof m == "string" || !M || typeof M == "string" || (H.value = I(m, { max: h.value }));
+    }), te(h, () => {
+      o.call(B.value);
+    }), te(R, (l) => {
+      n("instinctHeight", l);
+    }), Be(() => {
+      $.cleanup();
     });
-    const Ne = (e) => {
-      const n = e;
-      n.style.transition = `transform ${t.duration}ms ease, height ${t.duration}ms ease`, n.style.transform = `translateY(${l.value}px)`;
+    const c = (l) => {
+      const s = l;
+      s.style.transition = `transform ${e.duration}ms ease, height ${e.duration}ms ease`, s.style.transform = `translateY(${H.value}px)`;
     };
-    return o({ open: le, close: T, snapToPoint: he }), (e, n) => (Q(), ue(Ge, null, [
-      (Q(), Ce(xe, {
-        to: a.teleportTo,
-        defer: a.teleportDefer
+    return a({ open: Q, close: W, snapToPoint: ee }), (l, s) => (X(), ie(Ie, null, [
+      (X(), pe(he, {
+        to: t.teleportTo,
+        defer: t.teleportDefer
       }, [
-        ye(Pe, { name: "vsbs-backdrop" }, {
-          default: Te(() => [
-            se(S) && a.blocking ? (Q(), ue("div", {
+        ge(me, { name: "vsbs-backdrop" }, {
+          default: Se(() => [
+            E(i) && t.blocking ? (X(), ie("div", {
               key: 0,
               ref_key: "backdrop",
-              ref: w,
+              ref: d,
               "data-vsbs-backdrop": "",
-              onClick: n[0] || (n[0] = (r) => He())
-            }, null, 512)) : ke("", !0)
+              onClick: s[0] || (s[0] = (m) => Z())
+            }, null, 512)) : be("", !0)
           ]),
           _: 1
         })
       ], 8, ["to", "defer"])),
-      (Q(), Ce(xe, {
-        to: a.teleportTo,
-        defer: a.teleportDefer
+      (X(), pe(he, {
+        to: t.teleportTo,
+        defer: t.teleportDefer
       }, [
-        ye(Pe, {
+        ge(me, {
           name: "vsbs-sheet",
-          onLeave: Ne
+          onLeave: c
         }, {
-          default: Te(() => [
-            se(S) ? (Q(), ue("div", {
+          default: Se(() => [
+            E(i) ? (X(), ie("div", {
               key: 0,
               ref_key: "sheet",
-              ref: i,
-              style: Ke({
-                transform: `translateY(${u.value}px)`,
-                height: `${l.value}px`,
-                transition: H.value ? "none" : `transform ${a.duration}ms ease, height ${a.duration}ms ease`
+              ref: r,
+              style: Ye({
+                transform: `translateY(${T.value}px)`,
+                height: `${H.value}px`,
+                transition: E(re) ? "none" : `transform ${t.duration}ms ease, height ${t.duration}ms ease`
               }),
-              "data-vsbs-shadow": !a.blocking,
-              "data-vsbs-sheet-show": se(S),
+              "data-vsbs-shadow": !t.blocking,
+              "data-vsbs-sheet-show": E(i),
               "aria-modal": "true",
               "data-vsbs-sheet": "",
               tabindex: "-1",
-              onTouchstart: Ae,
-              onTouchend: Re
+              onTouchstart: s[2] || (s[2] = //@ts-ignore
+              (...m) => E(A).touchStartHandler && E(A).touchStartHandler(...m)),
+              onTouchend: s[3] || (s[3] = //@ts-ignore
+              (...m) => E(A).touchEndHandler && E(A).touchEndHandler(...m))
             }, [
-              j("div", {
+              j("div", ce({
                 ref_key: "sheetHeader",
-                ref: x,
-                "data-vsbs-header": "",
-                onPointerdown: ge,
-                onPointermove: we,
-                onPointerup: _,
-                onPointercancel: _,
-                onTouchmove: de,
-                class: re(a.headerClass),
+                ref: p,
+                "data-vsbs-header": ""
+              }, E(J), {
+                class: t.headerClass,
                 style: { "touch-action": "none" }
-              }, [
-                ie(e.$slots, "header", {}, void 0, !0)
-              ], 34),
+              }), [
+                ve(l.$slots, "header", {}, void 0, !0)
+              ], 16),
               j("div", {
                 ref_key: "sheetScroll",
-                ref: y,
+                ref: b,
                 "data-vsbs-scroll": "",
-                onScrollend: Le
+                onScrollend: s[1] || (s[1] = //@ts-ignore
+                (...m) => E(V) && E(V)(...m))
               }, [
-                j("div", {
-                  "data-vsbs-content-wrapper": "",
-                  onPointerdown: $e,
-                  onPointermove: Fe,
-                  onPointerup: be,
-                  onPointercancel: be,
-                  onTouchmove: fe,
-                  style: { touchAction: "pan-y" }
-                }, [
+                j("div", ce({ "data-vsbs-content-wrapper": "" }, E(se), { style: { touchAction: "pan-y" } }), [
                   j("div", {
                     ref_key: "sheetContent",
-                    ref: h,
+                    ref: v,
                     "data-vsbs-content": "",
-                    class: re(a.contentClass)
+                    class: Me(t.contentClass)
                   }, [
-                    ie(e.$slots, "default", {}, void 0, !0)
+                    ve(l.$slots, "default", {}, void 0, !0)
                   ], 2)
-                ], 32)
+                ], 16)
               ], 544),
-              j("div", {
+              j("div", ce({
                 ref_key: "sheetFooter",
-                ref: C,
-                "data-vsbs-footer": "",
-                onPointerdown: ge,
-                onPointermove: we,
-                onPointerup: _,
-                onPointercancel: _,
-                onTouchmove: de,
-                class: re(a.footerClass),
+                ref: f,
+                "data-vsbs-footer": ""
+              }, E(J), {
+                class: t.footerClass,
                 style: { "touch-action": "none" }
-              }, [
-                ie(e.$slots, "footer", {}, void 0, !0)
-              ], 34)
-            ], 44, st)) : ke("", !0)
+              }), [
+                ve(l.$slots, "footer", {}, void 0, !0)
+              ], 16)
+            ], 44, Ze)) : be("", !0)
           ]),
           _: 3
         })
       ], 8, ["to", "defer"]))
     ], 64));
   }
-}), it = (a, o) => {
-  const s = a.__vccOpts || a;
-  for (const [t, v] of o)
-    s[t] = v;
-  return s;
-}, ft = /* @__PURE__ */ it(rt, [["__scopeId", "data-v-1827f711"]]);
+}), tt = (t, a) => {
+  const u = t.__vccOpts || t;
+  for (const [e, n] of a)
+    u[e] = n;
+  return u;
+}, lt = /* @__PURE__ */ tt(et, [["__scopeId", "data-v-9e937e3a"]]);
 export {
-  ft as default
+  lt as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-backdrop][data-v-1827f711]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));inset:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;--vsbs-duration: var(--v6f938e48)}[data-vsbs-shadow=true][data-v-1827f711]: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-1827f711]{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-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-1827f711]{visibility:visible}[data-vsbs-header][data-v-1827f711]{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-1827f711]: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-1827f711]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-1827f711]{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-1827f711]:empty{display:none}[data-vsbs-scroll][data-v-1827f711]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-1827f711]{height:100%}[data-vsbs-content][data-v-1827f711]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-1827f711],.vsbs-backdrop-leave-active[data-v-1827f711]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-1827f711],.vsbs-backdrop-leave-to[data-v-1827f711]{opacity:0}
+[data-vsbs-backdrop][data-v-9e937e3a]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));inset:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;--vsbs-duration: var(--v531b2f52)}[data-vsbs-shadow=true][data-v-9e937e3a]: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-9e937e3a]{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-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-9e937e3a]{visibility:visible}[data-vsbs-header][data-v-9e937e3a]{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-9e937e3a]: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-9e937e3a]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-9e937e3a]{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-9e937e3a]:empty{display:none}[data-vsbs-scroll][data-v-9e937e3a]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-9e937e3a]{height:100%}[data-vsbs-content][data-v-9e937e3a]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-9e937e3a],.vsbs-backdrop-leave-active[data-v-9e937e3a]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-9e937e3a],.vsbs-backdrop-leave-to[data-v-9e937e3a]{opacity:0}

package/dist/utils/calculateSwipeThreshold.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Calculate the swipe close threshold based on prop value and current height.
+ * Supports absolute pixel values, percentage strings, or defaults to half height.
+ */
+export declare function calculateSwipeThreshold(threshold: string | number | undefined, height: number): number;

package/dist/utils/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const SNAP_POINT_TOLERANCE_PX = 10;
+export declare const MOVEMENT_THRESHOLD_PX = 3;
+export declare const RUBBERBAND_ELASTICITY = 0.25;
+export declare const RUBBERBAND_ELASTICITY_STRONG = 0.5;
+export declare const DEFAULT_VELOCITY_THRESHOLD = 0.5;

package/dist/utils/resolveSnapPoint.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Resolve a snap point value (number or percentage string) to pixels
+ */
+export declare function resolveSnapPoint(snapValue: number | `${number}%`, windowHeight: number): number;

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.4",
   "type": "module",
   "exports": {
     ".": {