@surdeddd/bottom-sheet 0.4.0 → 0.5.0

package/dist/solid.source.jsx

@@ -5,7 +5,8 @@ import {
   createEffect,
   on,
   onCleanup,
-  onMount
+  onMount,
+  Show
 } from "solid-js";
 
 // src/core/lifecycle/sheetStack.ts
@@ -2897,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;
@@ -2910,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);
     });
   }
@@ -3273,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(
@@ -3284,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) {
@@ -3453,9 +3543,10 @@ var BottomSheet = (props) => {
     role="slider"
     tabIndex={0}
     aria-label="Resize sheet"
-  >
-          {props.header}
-        </div>
+  />
+        <Show when={props.header}>
+          <div class="bs-header">{props.header}</div>
+        </Show>
         <div
     class="bs-content"
     ref={(el) => contentEl = el}
@@ -3465,6 +3556,9 @@ var BottomSheet = (props) => {
   >
           {props.children}
         </div>
+        <Show when={props.footer}>
+          <div class="bs-footer">{props.footer}</div>
+        </Show>
         <span class="bs-sr-only" role="status" aria-live="polite">
           {state().activeId}
         </span>

package/dist/styles.css

@@ -244,6 +244,12 @@
   margin-left: calc(-1 * (var(--bs-handle-height) + 6px));
 }
 
+.bs-header {
+  flex: 0 0 auto;
+  padding: 0 16px 8px;
+  background: var(--bs-surface, var(--bs-surface-d));
+}
+
 .bs-content {
   flex: 1;
   min-height: 0;
@@ -261,6 +267,17 @@
   background: var(--bs-surface, var(--bs-surface-d));
 }
 
+.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)) {
+  padding-bottom: 0;
+}
+
+.bs-header:not(:has(*)),
+.bs-footer:not(:has(*)),
+.bs-header[hidden],
+.bs-footer[hidden] {
+  display: none;
+}
+
 .bs-screen {
   position: absolute;
   inset: 0;
@@ -282,21 +299,33 @@
 }
 
 .bs-button-slot {
-  position: absolute;
+  position: fixed;
   z-index: calc(var(--bs-z-sheet) + 1);
   pointer-events: auto;
 }
 .bs-button-slot[data-side="left"] {
   left: 16px;
-  bottom: calc(100% + 12px);
+  bottom: calc(var(--bs-size, 0px) + 12px);
 }
 .bs-button-slot[data-side="right"] {
   right: 16px;
-  bottom: calc(100% + 12px);
+  bottom: calc(var(--bs-size, 0px) + 12px);
+}
+.bs-button-slot[data-mode="top"] {
+  bottom: auto;
+  top: calc(var(--bs-size, 0px) + 12px);
+}
+.bs-button-slot[data-mode="left"] {
+  left: calc(var(--bs-size, 0px) + 12px);
+  right: auto;
+  bottom: auto;
+  top: 16px;
 }
-.bs-sheet[data-mode="top"] .bs-button-slot {
+.bs-button-slot[data-mode="right"] {
+  right: calc(var(--bs-size, 0px) + 12px);
+  left: auto;
   bottom: auto;
-  top: calc(100% + 12px);
+  top: 16px;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/svelte-core.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) {

package/dist/svelte-core.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) {

package/dist/svelte-src/BottomSheet.svelte

@@ -39,6 +39,7 @@
     returnFocusTo?: HTMLElement | string | (() => HTMLElement | null);
     ariaLabel?: string;
     header?: Snippet<[EngineState & { activeId: TId }]>;
+    footer?: Snippet<[EngineState & { activeId: TId }]>;
     leftButton?: Snippet;
     rightButton?: Snippet;
     screen?: Snippet;
@@ -82,6 +83,7 @@
     returnFocusTo,
     ariaLabel = "Bottom sheet",
     header,
+    footer,
     leftButton,
     rightButton,
     screen,
@@ -273,16 +275,6 @@
     aria-modal={focusTrap ? "true" : undefined}
     aria-label={ariaLabel}
   >
-    {#if leftButton}
-      <div class="bs-button-slot" data-side="left">
-        {@render leftButton()}
-      </div>
-    {/if}
-    {#if rightButton}
-      <div class="bs-button-slot" data-side="right">
-        {@render rightButton()}
-      </div>
-    {/if}
     <div
       class="bs-handle"
       bind:this={handleEl}
@@ -294,15 +286,25 @@
       aria-valuemax={Math.max(0, allowedIds.length - 1)}
       aria-valuenow={Math.max(0, activeIdx)}
       aria-valuetext={viewState.activeId}
-    >
-      {#if header}{@render header(viewState)}{/if}
-    </div>
+    ></div>
+    {#if header}<div class="bs-header">{@render header(viewState)}</div>{/if}
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div class="bs-content" bind:this={contentEl} tabindex="0" role="region" aria-label="Sheet content">
       {#if children}{@render children()}{/if}
     </div>
+    {#if footer}<div class="bs-footer">{@render footer(viewState)}</div>{/if}
     <span class="bs-sr-only" role="status" aria-live="polite">
       {viewState.activeId}
     </span>
   </section>
+  {#if leftButton}
+    <div class="bs-button-slot" data-side="left" data-mode={mode}>
+      {@render leftButton()}
+    </div>
+  {/if}
+  {#if rightButton}
+    <div class="bs-button-slot" data-side="right" data-mode={mode}>
+      {@render rightButton()}
+    </div>
+  {/if}
 </div>