@surdeddd/bottom-sheet 0.7.0 → 0.8.0

package/dist/vue.js

@@ -2357,6 +2357,7 @@ var BottomSheetEngine = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
       size: 0
@@ -2909,40 +2910,32 @@ var BottomSheetEngine = class {
     }
     return out;
   }
-  measureContentExtent(vertical) {
+  measureSheetNatural(vertical) {
+    const el = this.element;
     const content = this.scrollContainer;
-    if (!content) return 0;
-    const targets = this.contentTargets();
-    if (targets.length === 0) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
+    if (!content) {
+      return vertical ? el.offsetHeight : el.offsetWidth;
     }
-    let min = Infinity;
-    let max = -Infinity;
-    for (const el of targets) {
-      const r = el.getBoundingClientRect();
-      if (vertical) {
-        if (r.top < min) min = r.top;
-        if (r.bottom > max) max = r.bottom;
-      } else {
-        if (r.left < min) min = r.left;
-        if (r.right > max) max = r.right;
-      }
-    }
-    if (!isFinite(min) || !isFinite(max) || max <= min) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let pad = 0;
-    if (typeof getComputedStyle !== "undefined") {
-      const cs = getComputedStyle(content);
-      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
-    }
-    return max - min + pad;
+    const axis = vertical ? "height" : "width";
+    const sheetStyle = el.style;
+    const cs = content.style;
+    const prevSheet = sheetStyle[axis];
+    const prevFlex = cs.flex;
+    const prevContent = vertical ? cs.height : cs.width;
+    sheetStyle[axis] = "auto";
+    cs.flex = "none";
+    if (vertical) cs.height = "auto";
+    else cs.width = "auto";
+    const natural = vertical ? el.offsetHeight : el.offsetWidth;
+    sheetStyle[axis] = prevSheet;
+    cs.flex = prevFlex;
+    if (vertical) cs.height = prevContent;
+    else cs.width = prevContent;
+    return natural;
   }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
-    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
-    const content = this.scrollContainer;
-    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
+    const natural = this.measureSheetNatural(vertical);
     const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
     if (typeof window === "undefined") return capped;
     const viewport = vertical ? window.innerHeight : window.innerWidth;
@@ -3028,6 +3021,10 @@ var BottomSheetEngine = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
+    if (this.anchorHost) {
+      this.anchorHost.style.removeProperty("--bs-size");
+      this.anchorHost.style.removeProperty("--bs-progress");
+    }
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3039,6 +3036,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3104,6 +3102,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3310,9 +3309,13 @@ var BottomSheetEngine = class {
       this.opening = true;
       sheetStack.promote(this.id);
     }
-    void this.animation.animateTo(target.size, velocity).then(() => {
-      this.opening = false;
+    const settleCap = this.snaps.getMaxAxisSize();
+    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+    this.allowOvershoot = true;
+    void this.animation.animateTo(settleSize, velocity).then(() => {
       if (signal.aborted) return;
+      this.allowOvershoot = false;
+      this.opening = false;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
       this.emit("snap", {
@@ -3344,7 +3347,7 @@ var BottomSheetEngine = class {
   }
   applySize(size) {
     const cap = this.snaps.getMaxAxisSize();
-    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
+    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
     this.size = clamped;
     const offset = cap - clamped;
     const style = this.element.style;
@@ -3937,11 +3940,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const mode = props.mode ?? "bottom";
       return mode === "bottom" || mode === "top";
     });
-    const allowedIds = computed(() => props.allowed ?? props.snapPoints.map((p) => p.id));
-    const activeIdx = computed(() => {
-      const idx = allowedIds.value.indexOf(state.activeId);
-      return idx === -1 ? 0 : idx;
-    });
     const ariaModal = computed(() => props.focusTrap === true);
     __expose({
       snapTo,
@@ -4011,8 +4009,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       anchorsKey,
       applyStages,
       isVerticalAxis,
-      allowedIds,
-      activeIdx,
       ariaModal
     };
     Object.defineProperty(__returned__, "__isScriptSetup", {
@@ -4034,12 +4030,7 @@ var _hoisted_3 = [
   "aria-modal",
   "aria-label"
 ];
-var _hoisted_4 = [
-  "aria-orientation",
-  "aria-valuemax",
-  "aria-valuenow",
-  "aria-valuetext"
-];
+var _hoisted_4 = ["aria-orientation"];
 var _hoisted_5 = {
   key: 0,
   class: "bs-header"
@@ -4102,10 +4093,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         role: "slider",
         tabindex: "0",
         "aria-orientation": $setup.isVerticalAxis ? "vertical" : "horizontal",
-        "aria-valuemin": "0",
-        "aria-valuemax": Math.max(0, $setup.allowedIds.length - 1),
-        "aria-valuenow": $setup.activeIdx,
-        "aria-valuetext": $setup.state.activeId,
         "aria-label": "Resize sheet"
       }, null, 8, _hoisted_4),
       _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "header", { state: $setup.state })])) : createCommentVNode("v-if", true),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",