@surdeddd/bottom-sheet 0.4.0 → 0.5.0

package/dist/svelte.cjs

@@ -2919,11 +2919,54 @@ var BottomSheetEngine = class {
       this.updateAriaSlider();
     }
   }
+  contentTargets() {
+    const scroller = this.scrollContainer;
+    if (!scroller) return [];
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const out = [];
+    for (const child2 of Array.from(scroller.children)) {
+      if (hasSlot && child2 instanceof HTMLSlotElement) {
+        for (const el of child2.assignedElements()) out.push(el);
+      } else {
+        out.push(child2);
+      }
+    }
+    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;
@@ -2932,22 +2975,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 child2 of Array.from(scroller.children)) {
+        if (child2 instanceof HTMLSlotElement && !slots.has(child2)) {
+          child2.addEventListener("slotchange", onSlotChange);
+          slots.add(child2);
+        }
+      }
+    };
+    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);
     });
   }
@@ -3295,6 +3378,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(
@@ -3306,6 +3392,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) {
@@ -3432,9 +3521,11 @@ function createBottomSheet(opts) {
   };
 }
 var root_1 = $2__namespace.from_html(`<div class="bs-backdrop" aria-hidden="true"></div>`);
-var root_3 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
-var root_4 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
-var root = $2__namespace.from_html(`<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"> </span></section></div>`);
+var root_3 = $2__namespace.from_html(`<div class="bs-header"><!></div>`);
+var root_5 = $2__namespace.from_html(`<div class="bs-footer"><!></div>`);
+var root_6 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
+var root_7 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
+var root = $2__namespace.from_html(`<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"> </span></section> <!> <!></div>`);
 function BottomSheet($$anchor, $$props) {
   $2__namespace.push($$props, true);
   let mode = $2__namespace.prop($$props, "mode", 3, "bottom"), animation = $2__namespace.prop($$props, "animation", 3, "spring"), focusTrap = $2__namespace.prop($$props, "focusTrap", 3, false), closeOnEscape = $2__namespace.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2__namespace.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2__namespace.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2__namespace.prop($$props, "rubberBand", 3, true), backdrop = $2__namespace.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2__namespace.prop($$props, "closeOnBackdrop", 3, true), persistent = $2__namespace.prop($$props, "persistent", 3, false), disableClose = $2__namespace.prop($$props, "disableClose", 3, false), disableDrag = $2__namespace.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2__namespace.prop($$props, "closeOnRouteChange", 3, false), openProp = $2__namespace.prop($$props, "open", 15), snap = $2__namespace.prop($$props, "snap", 15), ariaLabel = $2__namespace.prop($$props, "ariaLabel", 3, "Bottom sheet");
@@ -3613,68 +3704,83 @@ function BottomSheet($$anchor, $$props) {
   $2__namespace.reset(div_2);
   $2__namespace.bind_this(div_2, ($$value) => $2__namespace.set(screenEl, $$value), () => $2__namespace.get(screenEl));
   var section = $2__namespace.sibling(div_2, 2);
-  var node_3 = $2__namespace.child(section);
+  var div_3 = $2__namespace.child(section);
+  $2__namespace.set_attribute(div_3, "aria-valuemin", 0);
+  $2__namespace.bind_this(div_3, ($$value) => $2__namespace.set(handleEl, $$value), () => $2__namespace.get(handleEl));
+  var node_3 = $2__namespace.sibling(div_3, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_3 = root_3();
-      var node_4 = $2__namespace.child(div_3);
-      $2__namespace.snippet(node_4, () => $$props.leftButton);
-      $2__namespace.reset(div_3);
-      $2__namespace.append($$anchor2, div_3);
+      var div_4 = root_3();
+      var node_4 = $2__namespace.child(div_4);
+      $2__namespace.snippet(node_4, () => $$props.header, () => $2__namespace.get(viewState));
+      $2__namespace.reset(div_4);
+      $2__namespace.append($$anchor2, div_4);
     };
     $2__namespace.if(node_3, ($$render) => {
-      if ($$props.leftButton) $$render(consequent_2);
+      if ($$props.header) $$render(consequent_2);
     });
   }
-  var node_5 = $2__namespace.sibling(node_3, 2);
+  var div_5 = $2__namespace.sibling(node_3, 2);
+  var node_5 = $2__namespace.child(div_5);
   {
     var consequent_3 = ($$anchor2) => {
-      var div_4 = root_4();
-      var node_6 = $2__namespace.child(div_4);
-      $2__namespace.snippet(node_6, () => $$props.rightButton);
-      $2__namespace.reset(div_4);
-      $2__namespace.append($$anchor2, div_4);
+      var fragment_1 = $2__namespace.comment();
+      var node_6 = $2__namespace.first_child(fragment_1);
+      $2__namespace.snippet(node_6, () => $$props.children);
+      $2__namespace.append($$anchor2, fragment_1);
     };
     $2__namespace.if(node_5, ($$render) => {
-      if ($$props.rightButton) $$render(consequent_3);
+      if ($$props.children) $$render(consequent_3);
     });
   }
-  var div_5 = $2__namespace.sibling(node_5, 2);
-  $2__namespace.set_attribute(div_5, "aria-valuemin", 0);
-  var node_7 = $2__namespace.child(div_5);
+  $2__namespace.reset(div_5);
+  $2__namespace.bind_this(div_5, ($$value) => $2__namespace.set(contentEl, $$value), () => $2__namespace.get(contentEl));
+  var node_7 = $2__namespace.sibling(div_5, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var fragment_1 = $2__namespace.comment();
-      var node_8 = $2__namespace.first_child(fragment_1);
-      $2__namespace.snippet(node_8, () => $$props.header, () => $2__namespace.get(viewState));
-      $2__namespace.append($$anchor2, fragment_1);
+      var div_6 = root_5();
+      var node_8 = $2__namespace.child(div_6);
+      $2__namespace.snippet(node_8, () => $$props.footer, () => $2__namespace.get(viewState));
+      $2__namespace.reset(div_6);
+      $2__namespace.append($$anchor2, div_6);
     };
     $2__namespace.if(node_7, ($$render) => {
-      if ($$props.header) $$render(consequent_4);
+      if ($$props.footer) $$render(consequent_4);
     });
   }
-  $2__namespace.reset(div_5);
-  $2__namespace.bind_this(div_5, ($$value) => $2__namespace.set(handleEl, $$value), () => $2__namespace.get(handleEl));
-  var div_6 = $2__namespace.sibling(div_5, 2);
-  var node_9 = $2__namespace.child(div_6);
+  var span = $2__namespace.sibling(node_7, 2);
+  var text = $2__namespace.child(span, true);
+  $2__namespace.reset(span);
+  $2__namespace.reset(section);
+  $2__namespace.bind_this(section, ($$value) => $2__namespace.set(sheetEl, $$value), () => $2__namespace.get(sheetEl));
+  var node_9 = $2__namespace.sibling(section, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var fragment_2 = $2__namespace.comment();
-      var node_10 = $2__namespace.first_child(fragment_2);
-      $2__namespace.snippet(node_10, () => $$props.children);
-      $2__namespace.append($$anchor2, fragment_2);
+      var div_7 = root_6();
+      var node_10 = $2__namespace.child(div_7);
+      $2__namespace.snippet(node_10, () => $$props.leftButton);
+      $2__namespace.reset(div_7);
+      $2__namespace.template_effect(() => $2__namespace.set_attribute(div_7, "data-mode", mode()));
+      $2__namespace.append($$anchor2, div_7);
     };
     $2__namespace.if(node_9, ($$render) => {
-      if ($$props.children) $$render(consequent_5);
+      if ($$props.leftButton) $$render(consequent_5);
+    });
+  }
+  var node_11 = $2__namespace.sibling(node_9, 2);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var div_8 = root_7();
+      var node_12 = $2__namespace.child(div_8);
+      $2__namespace.snippet(node_12, () => $$props.rightButton);
+      $2__namespace.reset(div_8);
+      $2__namespace.template_effect(() => $2__namespace.set_attribute(div_8, "data-mode", mode()));
+      $2__namespace.append($$anchor2, div_8);
+    };
+    $2__namespace.if(node_11, ($$render) => {
+      if ($$props.rightButton) $$render(consequent_6);
     });
   }
-  $2__namespace.reset(div_6);
-  $2__namespace.bind_this(div_6, ($$value) => $2__namespace.set(contentEl, $$value), () => $2__namespace.get(contentEl));
-  var span = $2__namespace.sibling(div_6, 2);
-  var text = $2__namespace.child(span, true);
-  $2__namespace.reset(span);
-  $2__namespace.reset(section);
-  $2__namespace.bind_this(section, ($$value) => $2__namespace.set(sheetEl, $$value), () => $2__namespace.get(sheetEl));
   $2__namespace.reset(div);
   $2__namespace.template_effect(
     ($0, $1) => {
@@ -3682,10 +3788,10 @@ function BottomSheet($$anchor, $$props) {
       $2__namespace.set_attribute(section, "data-active", $2__namespace.get(viewState).activeId);
       $2__namespace.set_attribute(section, "aria-modal", focusTrap() ? "true" : void 0);
       $2__namespace.set_attribute(section, "aria-label", ariaLabel());
-      $2__namespace.set_attribute(div_5, "aria-orientation", $2__namespace.get(isVerticalAxis) ? "vertical" : "horizontal");
-      $2__namespace.set_attribute(div_5, "aria-valuemax", $0);
-      $2__namespace.set_attribute(div_5, "aria-valuenow", $1);
-      $2__namespace.set_attribute(div_5, "aria-valuetext", $2__namespace.get(viewState).activeId);
+      $2__namespace.set_attribute(div_3, "aria-orientation", $2__namespace.get(isVerticalAxis) ? "vertical" : "horizontal");
+      $2__namespace.set_attribute(div_3, "aria-valuemax", $0);
+      $2__namespace.set_attribute(div_3, "aria-valuenow", $1);
+      $2__namespace.set_attribute(div_3, "aria-valuetext", $2__namespace.get(viewState).activeId);
       $2__namespace.set_text(text, $2__namespace.get(viewState).activeId);
     },
     [

package/dist/svelte.d.cts

@@ -95,6 +95,7 @@ export type BottomSheetProps<TId extends string = string> = {
   returnFocusTo?: HTMLElement | string | (() => HTMLElement | null);
   ariaLabel?: string;
   header?: Snippet<[EngineState & { activeId: TId }]>;
+  footer?: Snippet<[EngineState & { activeId: TId }]>;
   leftButton?: Snippet;
   rightButton?: Snippet;
   screen?: Snippet;

package/dist/svelte.d.ts

@@ -95,6 +95,7 @@ export type BottomSheetProps<TId extends string = string> = {
   returnFocusTo?: HTMLElement | string | (() => HTMLElement | null);
   ariaLabel?: string;
   header?: Snippet<[EngineState & { activeId: TId }]>;
+  footer?: Snippet<[EngineState & { activeId: TId }]>;
   leftButton?: Snippet;
   rightButton?: Snippet;
   screen?: Snippet;

package/dist/svelte.js

@@ -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 child2 of Array.from(scroller.children)) {
+      if (hasSlot && child2 instanceof HTMLSlotElement) {
+        for (const el of child2.assignedElements()) out.push(el);
+      } else {
+        out.push(child2);
+      }
+    }
+    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 child2 of Array.from(scroller.children)) {
+        if (child2 instanceof HTMLSlotElement && !slots.has(child2)) {
+          child2.addEventListener("slotchange", onSlotChange);
+          slots.add(child2);
+        }
+      }
+    };
+    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) {
@@ -3410,9 +3499,11 @@ function createBottomSheet(opts) {
   };
 }
 var root_1 = $2.from_html(`<div class="bs-backdrop" aria-hidden="true"></div>`);
-var root_3 = $2.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
-var root_4 = $2.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
-var root = $2.from_html(`<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"> </span></section></div>`);
+var root_3 = $2.from_html(`<div class="bs-header"><!></div>`);
+var root_5 = $2.from_html(`<div class="bs-footer"><!></div>`);
+var root_6 = $2.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
+var root_7 = $2.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
+var root = $2.from_html(`<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"> </span></section> <!> <!></div>`);
 function BottomSheet($$anchor, $$props) {
   $2.push($$props, true);
   let mode = $2.prop($$props, "mode", 3, "bottom"), animation = $2.prop($$props, "animation", 3, "spring"), focusTrap = $2.prop($$props, "focusTrap", 3, false), closeOnEscape = $2.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2.prop($$props, "rubberBand", 3, true), backdrop = $2.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2.prop($$props, "closeOnBackdrop", 3, true), persistent = $2.prop($$props, "persistent", 3, false), disableClose = $2.prop($$props, "disableClose", 3, false), disableDrag = $2.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2.prop($$props, "closeOnRouteChange", 3, false), openProp = $2.prop($$props, "open", 15), snap = $2.prop($$props, "snap", 15), ariaLabel = $2.prop($$props, "ariaLabel", 3, "Bottom sheet");
@@ -3591,68 +3682,83 @@ function BottomSheet($$anchor, $$props) {
   $2.reset(div_2);
   $2.bind_this(div_2, ($$value) => $2.set(screenEl, $$value), () => $2.get(screenEl));
   var section = $2.sibling(div_2, 2);
-  var node_3 = $2.child(section);
+  var div_3 = $2.child(section);
+  $2.set_attribute(div_3, "aria-valuemin", 0);
+  $2.bind_this(div_3, ($$value) => $2.set(handleEl, $$value), () => $2.get(handleEl));
+  var node_3 = $2.sibling(div_3, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_3 = root_3();
-      var node_4 = $2.child(div_3);
-      $2.snippet(node_4, () => $$props.leftButton);
-      $2.reset(div_3);
-      $2.append($$anchor2, div_3);
+      var div_4 = root_3();
+      var node_4 = $2.child(div_4);
+      $2.snippet(node_4, () => $$props.header, () => $2.get(viewState));
+      $2.reset(div_4);
+      $2.append($$anchor2, div_4);
     };
     $2.if(node_3, ($$render) => {
-      if ($$props.leftButton) $$render(consequent_2);
+      if ($$props.header) $$render(consequent_2);
     });
   }
-  var node_5 = $2.sibling(node_3, 2);
+  var div_5 = $2.sibling(node_3, 2);
+  var node_5 = $2.child(div_5);
   {
     var consequent_3 = ($$anchor2) => {
-      var div_4 = root_4();
-      var node_6 = $2.child(div_4);
-      $2.snippet(node_6, () => $$props.rightButton);
-      $2.reset(div_4);
-      $2.append($$anchor2, div_4);
+      var fragment_1 = $2.comment();
+      var node_6 = $2.first_child(fragment_1);
+      $2.snippet(node_6, () => $$props.children);
+      $2.append($$anchor2, fragment_1);
     };
     $2.if(node_5, ($$render) => {
-      if ($$props.rightButton) $$render(consequent_3);
+      if ($$props.children) $$render(consequent_3);
     });
   }
-  var div_5 = $2.sibling(node_5, 2);
-  $2.set_attribute(div_5, "aria-valuemin", 0);
-  var node_7 = $2.child(div_5);
+  $2.reset(div_5);
+  $2.bind_this(div_5, ($$value) => $2.set(contentEl, $$value), () => $2.get(contentEl));
+  var node_7 = $2.sibling(div_5, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var fragment_1 = $2.comment();
-      var node_8 = $2.first_child(fragment_1);
-      $2.snippet(node_8, () => $$props.header, () => $2.get(viewState));
-      $2.append($$anchor2, fragment_1);
+      var div_6 = root_5();
+      var node_8 = $2.child(div_6);
+      $2.snippet(node_8, () => $$props.footer, () => $2.get(viewState));
+      $2.reset(div_6);
+      $2.append($$anchor2, div_6);
     };
     $2.if(node_7, ($$render) => {
-      if ($$props.header) $$render(consequent_4);
+      if ($$props.footer) $$render(consequent_4);
     });
   }
-  $2.reset(div_5);
-  $2.bind_this(div_5, ($$value) => $2.set(handleEl, $$value), () => $2.get(handleEl));
-  var div_6 = $2.sibling(div_5, 2);
-  var node_9 = $2.child(div_6);
+  var span = $2.sibling(node_7, 2);
+  var text = $2.child(span, true);
+  $2.reset(span);
+  $2.reset(section);
+  $2.bind_this(section, ($$value) => $2.set(sheetEl, $$value), () => $2.get(sheetEl));
+  var node_9 = $2.sibling(section, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var fragment_2 = $2.comment();
-      var node_10 = $2.first_child(fragment_2);
-      $2.snippet(node_10, () => $$props.children);
-      $2.append($$anchor2, fragment_2);
+      var div_7 = root_6();
+      var node_10 = $2.child(div_7);
+      $2.snippet(node_10, () => $$props.leftButton);
+      $2.reset(div_7);
+      $2.template_effect(() => $2.set_attribute(div_7, "data-mode", mode()));
+      $2.append($$anchor2, div_7);
     };
     $2.if(node_9, ($$render) => {
-      if ($$props.children) $$render(consequent_5);
+      if ($$props.leftButton) $$render(consequent_5);
+    });
+  }
+  var node_11 = $2.sibling(node_9, 2);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var div_8 = root_7();
+      var node_12 = $2.child(div_8);
+      $2.snippet(node_12, () => $$props.rightButton);
+      $2.reset(div_8);
+      $2.template_effect(() => $2.set_attribute(div_8, "data-mode", mode()));
+      $2.append($$anchor2, div_8);
+    };
+    $2.if(node_11, ($$render) => {
+      if ($$props.rightButton) $$render(consequent_6);
     });
   }
-  $2.reset(div_6);
-  $2.bind_this(div_6, ($$value) => $2.set(contentEl, $$value), () => $2.get(contentEl));
-  var span = $2.sibling(div_6, 2);
-  var text = $2.child(span, true);
-  $2.reset(span);
-  $2.reset(section);
-  $2.bind_this(section, ($$value) => $2.set(sheetEl, $$value), () => $2.get(sheetEl));
   $2.reset(div);
   $2.template_effect(
     ($0, $1) => {
@@ -3660,10 +3766,10 @@ function BottomSheet($$anchor, $$props) {
       $2.set_attribute(section, "data-active", $2.get(viewState).activeId);
       $2.set_attribute(section, "aria-modal", focusTrap() ? "true" : void 0);
       $2.set_attribute(section, "aria-label", ariaLabel());
-      $2.set_attribute(div_5, "aria-orientation", $2.get(isVerticalAxis) ? "vertical" : "horizontal");
-      $2.set_attribute(div_5, "aria-valuemax", $0);
-      $2.set_attribute(div_5, "aria-valuenow", $1);
-      $2.set_attribute(div_5, "aria-valuetext", $2.get(viewState).activeId);
+      $2.set_attribute(div_3, "aria-orientation", $2.get(isVerticalAxis) ? "vertical" : "horizontal");
+      $2.set_attribute(div_3, "aria-valuemax", $0);
+      $2.set_attribute(div_3, "aria-valuenow", $1);
+      $2.set_attribute(div_3, "aria-valuetext", $2.get(viewState).activeId);
       $2.set_text(text, $2.get(viewState).activeId);
     },
     [