@surdeddd/bottom-sheet 0.4.0 → 0.5.0

package/dist/vue.cjs

@@ -2897,11 +2897,54 @@ var BottomSheetEngine = class {
       this.updateAriaSlider();
     }
   }
+  contentTargets() {
+    const scroller = this.scrollContainer;
+    if (!scroller) return [];
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const out = [];
+    for (const child of Array.from(scroller.children)) {
+      if (hasSlot && child instanceof HTMLSlotElement) {
+        for (const el of child.assignedElements()) out.push(el);
+      } else {
+        out.push(child);
+      }
+    }
+    return out;
+  }
+  measureContentExtent(vertical) {
+    const content = this.scrollContainer;
+    if (!content) return 0;
+    const targets = this.contentTargets();
+    if (targets.length === 0) {
+      return vertical ? content.scrollHeight : content.scrollWidth;
+    }
+    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;
+  }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
     const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
     const content = this.scrollContainer;
-    const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
+    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
     if (typeof window === "undefined") return natural;
     const viewport = vertical ? window.innerHeight : window.innerWidth;
     return viewport > 0 ? Math.min(natural, viewport) : natural;
@@ -2910,22 +2953,62 @@ var BottomSheetEngine = class {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
       return;
-    const targets = [this.handle];
-    if (this.scrollContainer && this.scrollContainer !== this.handle) {
-      targets.push(this.scrollContainer);
-    }
     let raf = 0;
-    const ro = new ResizeObserver(() => {
+    const schedule = () => {
       if (raf) return;
       raf = requestAnimationFrame(() => {
         raf = 0;
         if (this.destroyed || this.gesture?.isDragging) return;
         this.recompute();
       });
-    });
-    for (const t of targets) ro.observe(t);
+    };
+    const ro = new ResizeObserver(schedule);
+    ro.observe(this.handle);
+    const scroller = this.scrollContainer;
+    const observed = /* @__PURE__ */ new Set();
+    const slots = /* @__PURE__ */ new Set();
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const onSlotChange = () => resync();
+    const trackSlots = () => {
+      if (!scroller || !hasSlot) return;
+      for (const child of Array.from(scroller.children)) {
+        if (child instanceof HTMLSlotElement && !slots.has(child)) {
+          child.addEventListener("slotchange", onSlotChange);
+          slots.add(child);
+        }
+      }
+    };
+    const resync = () => {
+      trackSlots();
+      const targets = this.contentTargets();
+      for (const el of observed) {
+        if (!targets.includes(el)) {
+          ro.unobserve(el);
+          observed.delete(el);
+        }
+      }
+      for (const el of targets) {
+        if (!observed.has(el)) {
+          ro.observe(el);
+          observed.add(el);
+        }
+      }
+      schedule();
+    };
+    let mo;
+    if (scroller) {
+      resync();
+      if (typeof MutationObserver !== "undefined") {
+        mo = new MutationObserver(resync);
+        mo.observe(scroller, { childList: true });
+      }
+    }
     this.teardowns.add(() => {
       ro.disconnect();
+      mo?.disconnect();
+      for (const slot of slots) {
+        slot.removeEventListener("slotchange", onSlotChange);
+      }
       if (raf) cancelAnimationFrame(raf);
     });
   }
@@ -3273,6 +3356,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
         this.anchorHost.style.setProperty("--bs-size", `${size}px`);
       }
+      if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+      }
     }
     const progress = this.computeProgress(size);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3284,6 +3370,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost) {
         this.anchorHost.style.setProperty("--bs-progress", String(progress));
       }
+      if (this.rootEl && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-progress", String(progress));
+      }
     }
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3887,38 +3976,34 @@ var _hoisted_3 = [
   "aria-modal",
   "aria-label"
 ];
-var _hoisted_4 = {
-  key: 0,
-  class: "bs-button-slot",
-  "data-side": "left"
-};
-var _hoisted_5 = {
-  key: 1,
-  class: "bs-button-slot",
-  "data-side": "right"
-};
-var _hoisted_6 = [
+var _hoisted_4 = [
   "aria-orientation",
   "aria-valuemax",
   "aria-valuenow",
   "aria-valuetext"
 ];
-var _hoisted_7 = {
+var _hoisted_5 = {
+  key: 0,
+  class: "bs-header"
+};
+var _hoisted_6 = {
   ref: "contentRef",
   class: "bs-content",
   tabindex: "0",
   role: "region",
   "aria-label": "Sheet content"
 };
-var _hoisted_8 = {
-  key: 2,
+var _hoisted_7 = {
+  key: 1,
   class: "bs-footer"
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   class: "bs-sr-only",
   role: "status",
   "aria-live": "polite"
 };
+var _hoisted_9 = ["data-mode"];
+var _hoisted_10 = ["data-mode"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.Teleport, {
     to: $props.teleportTo,
@@ -3953,8 +4038,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-modal": $setup.ariaModal ? "true" : void 0,
       "aria-label": $props.ariaLabel
     }, [
-      _ctx.$slots["button-left"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [vue.renderSlot(_ctx.$slots, "button-left")])) : vue.createCommentVNode("v-if", true),
-      _ctx.$slots["button-right"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "button-right")])) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode("div", {
         ref: "handleRef",
         class: "bs-handle",
@@ -3966,23 +4049,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-valuenow": $setup.activeIdx,
         "aria-valuetext": $setup.state.activeId,
         "aria-label": "Resize sheet"
-      }, [vue.renderSlot(_ctx.$slots, "header", { state: $setup.state })], 8, _hoisted_6),
+      }, null, 8, _hoisted_4),
+      _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "header", { state: $setup.state })])) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode(
         "div",
-        _hoisted_7,
+        _hoisted_6,
         [vue.renderSlot(_ctx.$slots, "default")],
         512
         /* NEED_PATCH */
       ),
-      _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [vue.renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : vue.createCommentVNode("v-if", true),
+      _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [vue.renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode(
         "span",
-        _hoisted_9,
+        _hoisted_8,
         vue.toDisplayString($setup.state.activeId),
         1
         /* TEXT */
       )
-    ], 8, _hoisted_3)
+    ], 8, _hoisted_3),
+    _ctx.$slots["button-left"] ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 1,
+      class: "bs-button-slot",
+      "data-side": "left",
+      "data-mode": $setup.props.mode ?? "bottom"
+    }, [vue.renderSlot(_ctx.$slots, "button-left")], 8, _hoisted_9)) : vue.createCommentVNode("v-if", true),
+    _ctx.$slots["button-right"] ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 2,
+      class: "bs-button-slot",
+      "data-side": "right",
+      "data-mode": $setup.props.mode ?? "bottom"
+    }, [vue.renderSlot(_ctx.$slots, "button-right")], 8, _hoisted_10)) : vue.createCommentVNode("v-if", true)
   ]), (vue.openBlock(true), vue.createElementBlock(
     vue.Fragment,
     null,

package/dist/vue.js

@@ -2895,11 +2895,54 @@ var BottomSheetEngine = class {
       this.updateAriaSlider();
     }
   }
+  contentTargets() {
+    const scroller = this.scrollContainer;
+    if (!scroller) return [];
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const out = [];
+    for (const child of Array.from(scroller.children)) {
+      if (hasSlot && child instanceof HTMLSlotElement) {
+        for (const el of child.assignedElements()) out.push(el);
+      } else {
+        out.push(child);
+      }
+    }
+    return out;
+  }
+  measureContentExtent(vertical) {
+    const content = this.scrollContainer;
+    if (!content) return 0;
+    const targets = this.contentTargets();
+    if (targets.length === 0) {
+      return vertical ? content.scrollHeight : content.scrollWidth;
+    }
+    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;
+  }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
     const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
     const content = this.scrollContainer;
-    const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
+    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
     if (typeof window === "undefined") return natural;
     const viewport = vertical ? window.innerHeight : window.innerWidth;
     return viewport > 0 ? Math.min(natural, viewport) : natural;
@@ -2908,22 +2951,62 @@ var BottomSheetEngine = class {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
       return;
-    const targets = [this.handle];
-    if (this.scrollContainer && this.scrollContainer !== this.handle) {
-      targets.push(this.scrollContainer);
-    }
     let raf = 0;
-    const ro = new ResizeObserver(() => {
+    const schedule = () => {
       if (raf) return;
       raf = requestAnimationFrame(() => {
         raf = 0;
         if (this.destroyed || this.gesture?.isDragging) return;
         this.recompute();
       });
-    });
-    for (const t of targets) ro.observe(t);
+    };
+    const ro = new ResizeObserver(schedule);
+    ro.observe(this.handle);
+    const scroller = this.scrollContainer;
+    const observed = /* @__PURE__ */ new Set();
+    const slots = /* @__PURE__ */ new Set();
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const onSlotChange = () => resync();
+    const trackSlots = () => {
+      if (!scroller || !hasSlot) return;
+      for (const child of Array.from(scroller.children)) {
+        if (child instanceof HTMLSlotElement && !slots.has(child)) {
+          child.addEventListener("slotchange", onSlotChange);
+          slots.add(child);
+        }
+      }
+    };
+    const resync = () => {
+      trackSlots();
+      const targets = this.contentTargets();
+      for (const el of observed) {
+        if (!targets.includes(el)) {
+          ro.unobserve(el);
+          observed.delete(el);
+        }
+      }
+      for (const el of targets) {
+        if (!observed.has(el)) {
+          ro.observe(el);
+          observed.add(el);
+        }
+      }
+      schedule();
+    };
+    let mo;
+    if (scroller) {
+      resync();
+      if (typeof MutationObserver !== "undefined") {
+        mo = new MutationObserver(resync);
+        mo.observe(scroller, { childList: true });
+      }
+    }
     this.teardowns.add(() => {
       ro.disconnect();
+      mo?.disconnect();
+      for (const slot of slots) {
+        slot.removeEventListener("slotchange", onSlotChange);
+      }
       if (raf) cancelAnimationFrame(raf);
     });
   }
@@ -3271,6 +3354,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
         this.anchorHost.style.setProperty("--bs-size", `${size}px`);
       }
+      if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+      }
     }
     const progress = this.computeProgress(size);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3282,6 +3368,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost) {
         this.anchorHost.style.setProperty("--bs-progress", String(progress));
       }
+      if (this.rootEl && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-progress", String(progress));
+      }
     }
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3885,38 +3974,34 @@ var _hoisted_3 = [
   "aria-modal",
   "aria-label"
 ];
-var _hoisted_4 = {
-  key: 0,
-  class: "bs-button-slot",
-  "data-side": "left"
-};
-var _hoisted_5 = {
-  key: 1,
-  class: "bs-button-slot",
-  "data-side": "right"
-};
-var _hoisted_6 = [
+var _hoisted_4 = [
   "aria-orientation",
   "aria-valuemax",
   "aria-valuenow",
   "aria-valuetext"
 ];
-var _hoisted_7 = {
+var _hoisted_5 = {
+  key: 0,
+  class: "bs-header"
+};
+var _hoisted_6 = {
   ref: "contentRef",
   class: "bs-content",
   tabindex: "0",
   role: "region",
   "aria-label": "Sheet content"
 };
-var _hoisted_8 = {
-  key: 2,
+var _hoisted_7 = {
+  key: 1,
   class: "bs-footer"
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   class: "bs-sr-only",
   role: "status",
   "aria-live": "polite"
 };
+var _hoisted_9 = ["data-mode"];
+var _hoisted_10 = ["data-mode"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Teleport, {
     to: $props.teleportTo,
@@ -3951,8 +4036,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-modal": $setup.ariaModal ? "true" : void 0,
       "aria-label": $props.ariaLabel
     }, [
-      _ctx.$slots["button-left"] ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "button-left")])) : createCommentVNode("v-if", true),
-      _ctx.$slots["button-right"] ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "button-right")])) : createCommentVNode("v-if", true),
       createElementVNode("div", {
         ref: "handleRef",
         class: "bs-handle",
@@ -3964,23 +4047,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-valuenow": $setup.activeIdx,
         "aria-valuetext": $setup.state.activeId,
         "aria-label": "Resize sheet"
-      }, [renderSlot(_ctx.$slots, "header", { state: $setup.state })], 8, _hoisted_6),
+      }, null, 8, _hoisted_4),
+      _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "header", { state: $setup.state })])) : createCommentVNode("v-if", true),
       createElementVNode(
         "div",
-        _hoisted_7,
+        _hoisted_6,
         [renderSlot(_ctx.$slots, "default")],
         512
         /* NEED_PATCH */
       ),
-      _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : createCommentVNode("v-if", true),
+      _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_9,
+        _hoisted_8,
         toDisplayString($setup.state.activeId),
         1
         /* TEXT */
       )
-    ], 8, _hoisted_3)
+    ], 8, _hoisted_3),
+    _ctx.$slots["button-left"] ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: "bs-button-slot",
+      "data-side": "left",
+      "data-mode": $setup.props.mode ?? "bottom"
+    }, [renderSlot(_ctx.$slots, "button-left")], 8, _hoisted_9)) : createCommentVNode("v-if", true),
+    _ctx.$slots["button-right"] ? (openBlock(), createElementBlock("div", {
+      key: 2,
+      class: "bs-button-slot",
+      "data-side": "right",
+      "data-mode": $setup.props.mode ?? "bottom"
+    }, [renderSlot(_ctx.$slots, "button-right")], 8, _hoisted_10)) : createCommentVNode("v-if", true)
   ]), (openBlock(true), createElementBlock(
     Fragment,
     null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.4.0",
+  "version": "0.5.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",
@@ -187,7 +187,7 @@
     {
       "name": "vue adapter",
       "path": "dist/vue.js",
-      "limit": "20 KB",
+      "limit": "21 KB",
       "gzip": true
     },
     {
@@ -205,7 +205,7 @@
     {
       "name": "qwik adapter",
       "path": "dist/qwik.js",
-      "limit": "18 KB",
+      "limit": "19 KB",
       "gzip": true
     },
     {