@surdeddd/bottom-sheet 0.4.0 → 0.5.0

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);
     });
   }
@@ -3279,6 +3362,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(
@@ -3290,6 +3376,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) {
@@ -3524,6 +3613,7 @@ var BottomSheet = forwardRef(
       className = "",
       style,
       header,
+      footer,
       children,
       leftButton,
       rightButton,
@@ -3704,8 +3794,6 @@ var BottomSheet = forwardRef(
           "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
           "aria-labelledby": ariaLabelledBy,
           children: [
-            leftButton && /* @__PURE__ */ jsx("div", { className: "bs-button-slot", "data-side": "left", children: leftButton }),
-            rightButton && /* @__PURE__ */ jsx("div", { className: "bs-button-slot", "data-side": "right", children: rightButton }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -3713,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",
               {
@@ -3728,10 +3816,29 @@ 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 })
           ]
         }
       ),
+      leftButton && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bs-button-slot",
+          "data-side": "left",
+          "data-mode": engineOpts.mode ?? "bottom",
+          children: leftButton
+        }
+      ),
+      rightButton && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bs-button-slot",
+          "data-side": "right",
+          "data-mode": engineOpts.mode ?? "bottom",
+          children: rightButton
+        }
+      ),
       anchorHosts.map(
         (host, i) => anchors?.[i] ? createPortal(anchors[i].node, host) : null
       ),

package/dist/solid.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);
     });
   }
@@ -3274,6 +3357,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(
@@ -3285,6 +3371,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) {
@@ -3342,8 +3431,10 @@ var BottomSheetEngine = class {
 };
 
 // src/solid/index.tsx
-var _tmpl$ = /* @__PURE__ */ web.template(`<div class=bs-root><div class=bs-screen></div><section class=bs-sheet role=dialog><div class=bs-handle role=slider tabindex=0 aria-label="Resize sheet"></div><div class=bs-content tabindex=0 role=region aria-label="Sheet content"></div><span class=bs-sr-only role=status aria-live=polite>`);
-var _tmpl$2 = /* @__PURE__ */ web.template(`<div class=bs-backdrop>`);
+var _tmpl$ = /* @__PURE__ */ web.template(`<div class=bs-header>`);
+var _tmpl$2 = /* @__PURE__ */ web.template(`<div class=bs-footer>`);
+var _tmpl$3 = /* @__PURE__ */ web.template(`<div class=bs-root><div class=bs-screen></div><section class=bs-sheet role=dialog><div class=bs-handle role=slider tabindex=0 aria-label="Resize sheet"></div><div class=bs-content tabindex=0 role=region aria-label="Sheet content"></div><span class=bs-sr-only role=status aria-live=polite>`);
+var _tmpl$4 = /* @__PURE__ */ web.template(`<div class=bs-backdrop>`);
 var BottomSheet = (props) => {
   let sheetEl;
   let handleEl;
@@ -3428,23 +3519,42 @@ var BottomSheet = (props) => {
   const mode = solidJs.createMemo(() => props.mode ?? "bottom");
   const ariaLabel = solidJs.createMemo(() => props.ariaLabel ?? "Bottom sheet");
   return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling, _el$8 = _el$6.nextSibling;
     web.insert(_el$, (() => {
       var _c$ = web.memo(() => !!showBackdrop());
       return () => _c$() ? (() => {
-        var _el$7 = _tmpl$2();
-        web.use((el) => backdropEl = el, _el$7);
-        return _el$7;
+        var _el$9 = _tmpl$4();
+        web.use((el) => backdropEl = el, _el$9);
+        return _el$9;
       })() : null;
     })(), _el$2);
     web.use((el) => scrimEl = el, _el$2);
     web.insert(_el$2, () => props.screen);
     web.use((el) => sheetEl = el, _el$3);
     web.use((el) => handleEl = el, _el$4);
-    web.insert(_el$4, () => props.header);
-    web.use((el) => contentEl = el, _el$5);
-    web.insert(_el$5, () => props.children);
-    web.insert(_el$6, () => state().activeId);
+    web.insert(_el$3, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.header;
+      },
+      get children() {
+        var _el$5 = _tmpl$();
+        web.insert(_el$5, () => props.header);
+        return _el$5;
+      }
+    }), _el$6);
+    web.use((el) => contentEl = el, _el$6);
+    web.insert(_el$6, () => props.children);
+    web.insert(_el$3, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.footer;
+      },
+      get children() {
+        var _el$7 = _tmpl$2();
+        web.insert(_el$7, () => props.footer);
+        return _el$7;
+      }
+    }), _el$8);
+    web.insert(_el$8, () => state().activeId);
     web.effect((_p$) => {
       var _v$ = mode(), _v$2 = state().activeId, _v$3 = props.focusTrap ? "true" : void 0, _v$4 = ariaLabel();
       _v$ !== _p$.e && web.setAttribute(_el$3, "data-mode", _p$.e = _v$);

package/dist/solid.d.cts

@@ -273,6 +273,8 @@ declare class BottomSheetEngine {
     };
     setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
     recompute(): void;
+    private contentTargets;
+    private measureContentExtent;
     private measureFitSize;
     private installFitObserver;
     destroy(): void;
@@ -326,6 +328,7 @@ type BottomSheetProps<TId extends string = string> = {
     }) => void;
     engineRef?: (engine: BottomSheetEngine | null) => void;
     header?: JSX.Element;
+    footer?: JSX.Element;
     screen?: JSX.Element;
     children?: JSX.Element;
 };

package/dist/solid.d.ts

@@ -273,6 +273,8 @@ declare class BottomSheetEngine {
     };
     setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
     recompute(): void;
+    private contentTargets;
+    private measureContentExtent;
     private measureFitSize;
     private installFitObserver;
     destroy(): void;
@@ -326,6 +328,7 @@ type BottomSheetProps<TId extends string = string> = {
     }) => void;
     engineRef?: (engine: BottomSheetEngine | null) => void;
     header?: JSX.Element;
+    footer?: JSX.Element;
     screen?: JSX.Element;
     children?: JSX.Element;
 };

package/dist/solid.js

@@ -1,5 +1,5 @@
-import { insert, memo, use, effect, setAttribute, template } from 'solid-js/web';
-import { createSignal, onMount, onCleanup, createEffect, on, createMemo } from 'solid-js';
+import { insert, memo, use, createComponent, effect, setAttribute, template } from 'solid-js/web';
+import { createSignal, onMount, onCleanup, createEffect, on, createMemo, Show } from 'solid-js';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -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);
     });
   }
@@ -3272,6 +3355,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(
@@ -3283,6 +3369,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) {
@@ -3340,8 +3429,10 @@ var BottomSheetEngine = class {
 };
 
 // src/solid/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div class=bs-root><div class=bs-screen></div><section class=bs-sheet role=dialog><div class=bs-handle role=slider tabindex=0 aria-label="Resize sheet"></div><div class=bs-content tabindex=0 role=region aria-label="Sheet content"></div><span class=bs-sr-only role=status aria-live=polite>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div class=bs-backdrop>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div class=bs-header>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div class=bs-footer>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div class=bs-root><div class=bs-screen></div><section class=bs-sheet role=dialog><div class=bs-handle role=slider tabindex=0 aria-label="Resize sheet"></div><div class=bs-content tabindex=0 role=region aria-label="Sheet content"></div><span class=bs-sr-only role=status aria-live=polite>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div class=bs-backdrop>`);
 var BottomSheet = (props) => {
   let sheetEl;
   let handleEl;
@@ -3426,23 +3517,42 @@ var BottomSheet = (props) => {
   const mode = createMemo(() => props.mode ?? "bottom");
   const ariaLabel = createMemo(() => props.ariaLabel ?? "Bottom sheet");
   return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$6 = _el$4.nextSibling, _el$8 = _el$6.nextSibling;
     insert(_el$, (() => {
       var _c$ = memo(() => !!showBackdrop());
       return () => _c$() ? (() => {
-        var _el$7 = _tmpl$2();
-        use((el) => backdropEl = el, _el$7);
-        return _el$7;
+        var _el$9 = _tmpl$4();
+        use((el) => backdropEl = el, _el$9);
+        return _el$9;
       })() : null;
     })(), _el$2);
     use((el) => scrimEl = el, _el$2);
     insert(_el$2, () => props.screen);
     use((el) => sheetEl = el, _el$3);
     use((el) => handleEl = el, _el$4);
-    insert(_el$4, () => props.header);
-    use((el) => contentEl = el, _el$5);
-    insert(_el$5, () => props.children);
-    insert(_el$6, () => state().activeId);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return props.header;
+      },
+      get children() {
+        var _el$5 = _tmpl$();
+        insert(_el$5, () => props.header);
+        return _el$5;
+      }
+    }), _el$6);
+    use((el) => contentEl = el, _el$6);
+    insert(_el$6, () => props.children);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return props.footer;
+      },
+      get children() {
+        var _el$7 = _tmpl$2();
+        insert(_el$7, () => props.footer);
+        return _el$7;
+      }
+    }), _el$8);
+    insert(_el$8, () => state().activeId);
     effect((_p$) => {
       var _v$ = mode(), _v$2 = state().activeId, _v$3 = props.focusTrap ? "true" : void 0, _v$4 = ariaLabel();
       _v$ !== _p$.e && setAttribute(_el$3, "data-mode", _p$.e = _v$);