@surdeddd/bottom-sheet 0.4.1 → 0.5.0

package/dist/qwik.cjs

@@ -2898,11 +2898,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;
@@ -2911,22 +2954,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);
     });
   }
@@ -3454,11 +3537,12 @@ var BottomSheet = qwik.component$((props) => {
               ref: handleRef,
               role: "slider",
               tabIndex: 0,
-              "aria-label": "Resize sheet",
-              children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "header" })
+              "aria-label": "Resize sheet"
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-header", children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "header" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-content", ref: contentRef, children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-footer", children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "footer" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bs-sr-only", role: "status", "aria-live": "polite", children: state.activeId })
         ]
       }

package/dist/qwik.d.cts

@@ -1,7 +1,7 @@
 import * as _builder_io_qwik from '@builder.io/qwik';
 import { QRL } from '@builder.io/qwik';
-import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-BJrH7qY3.cjs';
-export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-BJrH7qY3.cjs';
+import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-CqiCz64W.cjs';
+export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-CqiCz64W.cjs';
 import './transform-jVfAikE9.cjs';
 
 type BottomSheetProps<TId extends string = string> = {

package/dist/qwik.d.ts

@@ -1,7 +1,7 @@
 import * as _builder_io_qwik from '@builder.io/qwik';
 import { QRL } from '@builder.io/qwik';
-import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-L05jGZvU.js';
-export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-L05jGZvU.js';
+import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-BHjKFtnM.js';
+export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-BHjKFtnM.js';
 import './transform-jVfAikE9.js';
 
 type BottomSheetProps<TId extends string = string> = {

package/dist/qwik.js

@@ -2896,11 +2896,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;
@@ -2909,22 +2952,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);
     });
   }
@@ -3452,11 +3535,12 @@ var BottomSheet = component$((props) => {
               ref: handleRef,
               role: "slider",
               tabIndex: 0,
-              "aria-label": "Resize sheet",
-              children: /* @__PURE__ */ jsx(Slot, { name: "header" })
+              "aria-label": "Resize sheet"
             }
           ),
+          /* @__PURE__ */ jsx("div", { class: "bs-header", children: /* @__PURE__ */ jsx(Slot, { name: "header" }) }),
           /* @__PURE__ */ jsx("div", { class: "bs-content", ref: contentRef, children: /* @__PURE__ */ jsx(Slot, {}) }),
+          /* @__PURE__ */ jsx("div", { class: "bs-footer", children: /* @__PURE__ */ jsx(Slot, { name: "footer" }) }),
           /* @__PURE__ */ jsx("span", { class: "bs-sr-only", role: "status", "aria-live": "polite", children: state.activeId })
         ]
       }

package/dist/react.cjs

@@ -2905,11 +2905,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;
@@ -2918,22 +2961,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);
     });
   }
@@ -3532,6 +3615,7 @@ var BottomSheet = react.forwardRef(
       className = "",
       style,
       header,
+      footer,
       children,
       leftButton,
       rightButton,
@@ -3719,10 +3803,10 @@ var BottomSheet = react.forwardRef(
                 className: "bs-handle",
                 role: "slider",
                 tabIndex: 0,
-                "aria-label": "Resize sheet",
-                children: typeof header === "function" ? header(state) : header
+                "aria-label": "Resize sheet"
               }
             ),
+            header != null && header !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bs-header", children: typeof header === "function" ? header(state) : header }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -3734,6 +3818,7 @@ var BottomSheet = react.forwardRef(
                 children
               }
             ),
+            footer != null && footer !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bs-footer", children: typeof footer === "function" ? footer(state) : footer }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bs-sr-only", role: "status", "aria-live": "polite", children: announce })
           ]
         }

package/dist/react.d.cts

@@ -1,5 +1,5 @@
-import { c as EngineOptions, E as EngineState, A as AnchorOptions, S as ScrimStagesOptions, p as ScrimStageDef, e as SheetEventMap, C as CloseReason, q as ScrimUpdate, m as ScrimOverlayOptions, B as BottomSheetEngine, a as SnapPointDef, b as SheetMode } from './BottomSheetEngine-BJrH7qY3.cjs';
-export { d as SnapPoint } from './BottomSheetEngine-BJrH7qY3.cjs';
+import { c as EngineOptions, E as EngineState, A as AnchorOptions, S as ScrimStagesOptions, p as ScrimStageDef, e as SheetEventMap, C as CloseReason, q as ScrimUpdate, m as ScrimOverlayOptions, B as BottomSheetEngine, a as SnapPointDef, b as SheetMode } from './BottomSheetEngine-CqiCz64W.cjs';
+export { d as SnapPoint } from './BottomSheetEngine-CqiCz64W.cjs';
 import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.cjs';
 export { OverlayEdge } from './overlay.cjs';
 import * as react from 'react';
@@ -23,6 +23,7 @@ type BottomSheetProps = EngineOptionsForProps & {
     className?: string;
     style?: CSSProperties;
     header?: HeaderProp;
+    footer?: HeaderProp;
     children?: ReactNode;
     leftButton?: ReactNode;
     rightButton?: ReactNode;
@@ -65,6 +66,7 @@ declare const BottomSheet: react.ForwardRefExoticComponent<EngineOptionsForProps
     className?: string;
     style?: CSSProperties;
     header?: HeaderProp;
+    footer?: HeaderProp;
     children?: ReactNode;
     leftButton?: ReactNode;
     rightButton?: ReactNode;

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { c as EngineOptions, E as EngineState, A as AnchorOptions, S as ScrimStagesOptions, p as ScrimStageDef, e as SheetEventMap, C as CloseReason, q as ScrimUpdate, m as ScrimOverlayOptions, B as BottomSheetEngine, a as SnapPointDef, b as SheetMode } from './BottomSheetEngine-L05jGZvU.js';
-export { d as SnapPoint } from './BottomSheetEngine-L05jGZvU.js';
+import { c as EngineOptions, E as EngineState, A as AnchorOptions, S as ScrimStagesOptions, p as ScrimStageDef, e as SheetEventMap, C as CloseReason, q as ScrimUpdate, m as ScrimOverlayOptions, B as BottomSheetEngine, a as SnapPointDef, b as SheetMode } from './BottomSheetEngine-BHjKFtnM.js';
+export { d as SnapPoint } from './BottomSheetEngine-BHjKFtnM.js';
 import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.js';
 export { OverlayEdge } from './overlay.js';
 import * as react from 'react';
@@ -23,6 +23,7 @@ type BottomSheetProps = EngineOptionsForProps & {
     className?: string;
     style?: CSSProperties;
     header?: HeaderProp;
+    footer?: HeaderProp;
     children?: ReactNode;
     leftButton?: ReactNode;
     rightButton?: ReactNode;
@@ -65,6 +66,7 @@ declare const BottomSheet: react.ForwardRefExoticComponent<EngineOptionsForProps
     className?: string;
     style?: CSSProperties;
     header?: HeaderProp;
+    footer?: HeaderProp;
     children?: ReactNode;
     leftButton?: ReactNode;
     rightButton?: ReactNode;

package/dist/react.js

@@ -2903,11 +2903,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;
@@ -2916,22 +2959,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);
     });
   }
@@ -3530,6 +3613,7 @@ var BottomSheet = forwardRef(
       className = "",
       style,
       header,
+      footer,
       children,
       leftButton,
       rightButton,
@@ -3717,10 +3801,10 @@ var BottomSheet = forwardRef(
                 className: "bs-handle",
                 role: "slider",
                 tabIndex: 0,
-                "aria-label": "Resize sheet",
-                children: typeof header === "function" ? header(state) : header
+                "aria-label": "Resize sheet"
               }
             ),
+            header != null && header !== false && /* @__PURE__ */ jsx("div", { className: "bs-header", children: typeof header === "function" ? header(state) : header }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -3732,6 +3816,7 @@ var BottomSheet = forwardRef(
                 children
               }
             ),
+            footer != null && footer !== false && /* @__PURE__ */ jsx("div", { className: "bs-footer", children: typeof footer === "function" ? footer(state) : footer }),
             /* @__PURE__ */ jsx("span", { className: "bs-sr-only", role: "status", "aria-live": "polite", children: announce })
           ]
         }