@surdeddd/bottom-sheet 0.13.0 → 0.14.0

package/dist/solid.source.jsx

@@ -9,7 +9,7 @@ import {
   Show
 } from "solid-js";
 
-// src/core/lifecycle/sheetStack.ts
+// src/core/lifecycle/sheet-stack.ts
 var BASE_Z = 100;
 var STEP = 10;
 var SheetStack = class {
@@ -132,7 +132,7 @@ function createEventBus() {
   };
 }
 
-// src/core/primitives/cssLength.ts
+// src/core/primitives/css-length.ts
 var probe = null;
 var PROBE_ATTR = "data-bs-probe";
 var ensureProbe = (axis) => {
@@ -186,7 +186,7 @@ var resolveSnap = (point, mode, measureFit) => {
   return Math.max(0, el.getBoundingClientRect().width);
 };
 
-// src/core/primitives/devWarn.ts
+// src/core/primitives/dev-warn.ts
 function devWarn(...args) {
   if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
     console.warn(...args);
@@ -1520,7 +1520,7 @@ var AnimationRunner = class {
   }
 };
 
-// src/core/lifecycle/focusTrap.ts
+// src/core/lifecycle/focus-trap.ts
 var FOCUSABLE = [
   "a[href]",
   "area[href]",
@@ -1638,7 +1638,7 @@ var installFocusTrap = (container, options = {}) => {
   };
 };
 
-// src/core/lifecycle/scrollLock.ts
+// src/core/lifecycle/scroll-lock.ts
 var lockCount = 0;
 var savedStyles = null;
 var lockBodyScroll = () => {
@@ -1820,30 +1820,44 @@ var SampleRing = class {
     this.size = 0;
   }
 };
-var installGestures = (handle, mode, callbacks) => {
+var installGestures = (handle, mode, callbacks, options = {}) => {
   let activePointerId = null;
   let activePointerType = "touch";
   let startCoord = 0;
   let lastCoord = 0;
+  let pendingStart = false;
   const VELOCITY_WINDOW_MS = (kind) => kind === "mouse" ? 160 : 120;
   const MAX_SAMPLES = 32;
   const samples = new SampleRing(MAX_SAMPLES);
   const axis = isAxisVertical(mode) ? "Y" : "X";
   const sign = mode === "bottom" || mode === "right" ? -1 : 1;
   const coordOf = (e) => axis === "Y" ? e.clientY : e.clientX;
+  const capture = (pointerId) => {
+    try {
+      handle.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const releaseTracking = () => {
+    activePointerId = null;
+    pendingStart = false;
+    samples.reset();
+  };
   const onPointerDown = (e) => {
     if (activePointerId !== null) return;
     if (e.button !== void 0 && e.button !== 0) return;
+    if (options.shouldStart && !options.shouldStart(e)) return;
     activePointerId = e.pointerId;
     activePointerType = e.pointerType || "touch";
     startCoord = coordOf(e);
     lastCoord = startCoord;
     samples.reset();
     samples.push(e.timeStamp, startCoord);
-    try {
-      handle.setPointerCapture(e.pointerId);
-    } catch {
+    if (options.deferStart) {
+      pendingStart = true;
+      return;
     }
+    capture(e.pointerId);
     callbacks.onStart(startCoord, activePointerType);
   };
   const onPointerMove = (e) => {
@@ -1851,6 +1865,22 @@ var installGestures = (handle, mode, callbacks) => {
     const coord = coordOf(e);
     const rawDelta = coord - startCoord;
     const delta = rawDelta * sign;
+    if (pendingStart) {
+      const verdict = options.deferStart(e, delta);
+      if (verdict === false) {
+        releaseTracking();
+        return;
+      }
+      if (verdict !== true) return;
+      pendingStart = false;
+      startCoord = coord;
+      lastCoord = coord;
+      samples.reset();
+      samples.push(e.timeStamp, coord);
+      capture(e.pointerId);
+      callbacks.onStart(startCoord, activePointerType);
+      return;
+    }
     lastCoord = coord;
     samples.push(e.timeStamp, coord);
     const cutoff = e.timeStamp - VELOCITY_WINDOW_MS(activePointerType);
@@ -1859,6 +1889,10 @@ var installGestures = (handle, mode, callbacks) => {
   };
   const finishGesture = (e) => {
     if (e.pointerId !== activePointerId) return;
+    if (pendingStart) {
+      releaseTracking();
+      return;
+    }
     const rawDelta = lastCoord - startCoord;
     const delta = rawDelta * sign;
     let velocity = 0;
@@ -1881,22 +1915,26 @@ var installGestures = (handle, mode, callbacks) => {
   };
   const onPointerCancel = (e) => {
     if (e.pointerId !== activePointerId) return;
-    activePointerId = null;
-    samples.reset();
+    const wasPending = pendingStart;
+    releaseTracking();
+    if (wasPending) return;
     callbacks.onCancel?.();
   };
   handle.addEventListener("pointerdown", onPointerDown);
   handle.addEventListener("pointermove", onPointerMove);
   handle.addEventListener("pointerup", finishGesture);
   handle.addEventListener("pointercancel", onPointerCancel);
+  const managesTouchAction = options.manageTouchAction !== false;
   const prevTouchAction = handle.style.touchAction;
-  handle.style.touchAction = isAxisVertical(mode) ? "pan-x" : "pan-y";
+  if (managesTouchAction) {
+    handle.style.touchAction = isAxisVertical(mode) ? "pan-x" : "pan-y";
+  }
   return () => {
     handle.removeEventListener("pointerdown", onPointerDown);
     handle.removeEventListener("pointermove", onPointerMove);
     handle.removeEventListener("pointerup", finishGesture);
     handle.removeEventListener("pointercancel", onPointerCancel);
-    handle.style.touchAction = prevTouchAction;
+    if (managesTouchAction) handle.style.touchAction = prevTouchAction;
     if (activePointerId !== null && handle.hasPointerCapture(activePointerId)) {
       handle.releasePointerCapture(activePointerId);
     }
@@ -2015,7 +2053,7 @@ var GestureController = class {
         const restoreTo = this.dragStartSize;
         void this.deps.animateTo(restoreTo, 0);
       }
-    });
+    }, this.deps.gestureOptions);
     return this.detach;
   }
   forceClearDragState() {
@@ -2027,6 +2065,41 @@ var GestureController = class {
   }
 };
 
+// src/core/primitives/drag-zones.ts
+var DRAG_ZONE_SELECTOR = "[data-bs-drag]";
+var NO_DRAG_SELECTOR = "[data-bs-no-drag]";
+var asElement = (target) => {
+  const candidate = target;
+  return candidate && typeof candidate.closest === "function" ? candidate : null;
+};
+function isDragAllowedFrom(target, mode) {
+  const el = asElement(target);
+  if (!el) return mode !== "zones";
+  if (el.closest(NO_DRAG_SELECTOR)) return false;
+  if (mode === "zones") return el.closest(DRAG_ZONE_SELECTOR) !== null;
+  return true;
+}
+
+// src/core/primitives/content-gesture.ts
+var CONTENT_DRAG_SLOP = 6;
+function decideContentGesture(input) {
+  const slop = input.slop ?? CONTENT_DRAG_SLOP;
+  if (Math.abs(input.delta) < slop) return "pending";
+  if (input.scrollTop > 0) return "scroll";
+  if (input.delta > 0 && input.atMaxSnap) return "scroll";
+  return "drag";
+}
+
+// src/core/primitives/touch-scroll-guard.ts
+function installTouchScrollGuard(surface, isDragging) {
+  const onTouchMove = (e) => {
+    if (!isDragging()) return;
+    if (e.cancelable) e.preventDefault();
+  };
+  surface.addEventListener("touchmove", onTouchMove, { passive: false });
+  return () => surface.removeEventListener("touchmove", onTouchMove);
+}
+
 // src/core/primitives/aria-slider-writer.ts
 var AriaSliderWriter = class {
   constructor(handle, mode) {
@@ -2383,6 +2456,8 @@ function resolveEngineOptions(opts, extras) {
     mode: opts.mode ?? "bottom",
     flickVelocity: opts.flickVelocity ?? DEFAULT_FLICK_VELOCITY,
     dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
+    dragFrom: opts.dragFrom ?? (opts.handle ? "handle" : "sheet"),
+    dragFromContent: opts.dragFromContent ?? true,
     rubberBandEnabled: opts.rubberBand ?? true,
     closeOnBack: opts.closeOnBack ?? false,
     persistent: opts.persistent ?? false,
@@ -2465,6 +2540,8 @@ var BottomSheetCore = class {
   mode;
   flickVelocity;
   dragThreshold;
+  dragFromMode;
+  dragFromContentDefault;
   rubberBandEnabled;
   scrim;
   aria;
@@ -2482,8 +2559,11 @@ var BottomSheetCore = class {
   activeId;
   size = 0;
   gesture;
+  contentGesture;
+  detachSheetGesture = null;
   rootEl = null;
   destroyed = false;
+  restClosed = false;
   currentViewTransition = null;
   currentAbort = new AbortController();
   sizeWriteSentinel = new WriteSentinel();
@@ -2537,6 +2617,8 @@ var BottomSheetCore = class {
     this.aria = new AriaSliderWriter(this.handle, this.mode);
     this.flickVelocity = resolved.flickVelocity;
     this.dragThreshold = resolved.dragThreshold;
+    this.dragFromMode = resolved.dragFrom;
+    this.dragFromContentDefault = resolved.dragFromContent;
     this.rubberBandEnabled = resolved.rubberBandEnabled;
     this.scrim = new ScrimController(
       {
@@ -2563,7 +2645,7 @@ var BottomSheetCore = class {
         getRootEl: () => this.rootEl,
         applySize: (size) => this.applySize(size),
         getSize: () => this.size,
-        isDragging: () => this.gesture?.isDragging ?? false,
+        isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
         getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
       },
@@ -2624,6 +2706,7 @@ var BottomSheetCore = class {
     const initial = this.snaps.findById(this.activeId);
     if (initial) this.size = initial.size;
     this.applySize(this.size);
+    this.setRestClosed(this.size === 0);
     this.updateAriaSlider();
     this.scrollCache = createScrollCache({
       scrollContainer: this.scrollContainer,
@@ -2654,7 +2737,7 @@ var BottomSheetCore = class {
           (p) => p.size === "fit" || p.size === "content"
         ),
         isDestroyed: () => this.destroyed,
-        isDragging: () => this.gesture?.isDragging ?? false,
+        isDragging: () => this.isDraggingAny(),
         recompute: () => this.recompute()
       })
     );
@@ -2680,7 +2763,7 @@ var BottomSheetCore = class {
         autoCollapseAfter
       },
       isDestroyed: () => this.destroyed,
-      isDragging: () => this.gesture?.isDragging ?? false,
+      isDragging: () => this.isDraggingAny(),
       isAnimating: () => this.animation.isAnimating,
       isTopSheet: () => this.isTopSheet,
       isVerticalAxis: () => this.mode === "bottom" || this.mode === "top",
@@ -2710,6 +2793,7 @@ var BottomSheetCore = class {
         void this.snapTo(id);
       },
       close: (reason) => this.close(reason),
+      attachDragSurface: (surface, kind) => this.attachDragSurface(surface, kind),
       on: (event, fn) => this.on(event, fn),
       addTeardown: (fn) => this.teardowns.add(fn)
     };
@@ -2738,7 +2822,7 @@ var BottomSheetCore = class {
     return {
       size: this.size,
       activeId: this.activeId,
-      isDragging: this.gesture?.isDragging ?? false,
+      isDragging: this.isDraggingAny(),
       isAnimating: this.animation.isAnimating,
       progress: this.computeProgress(this.size)
     };
@@ -2858,9 +2942,16 @@ var BottomSheetCore = class {
       progress: this.computeProgress(this.size)
     });
     if (withHaptic) this.haptic();
+    this.setRestClosed(targetSize === 0);
     if (wasClosed && targetSize > 0) this.emitOpenSequence(id);
     if (targetSize === 0) this.emitCloseSequence();
   }
+  setRestClosed(closed) {
+    if (closed === this.restClosed) return;
+    this.restClosed = closed;
+    if (closed) this.element.setAttribute("data-bs-rest", "closed");
+    else this.element.removeAttribute("data-bs-rest");
+  }
   emitOpenSequence(id) {
     this.emit("open", { id });
     this.handleOpen();
@@ -2916,6 +3007,20 @@ var BottomSheetCore = class {
     if (this.destroyed) return;
     this.disableDragFlag = value;
   }
+  setDragFromContent(value) {
+    if (this.destroyed) return;
+    this.dragFromContentDefault = value;
+  }
+  setDragFrom(mode) {
+    if (this.destroyed || mode === this.dragFromMode) return;
+    this.gesture?.forceClearDragState();
+    this.detachSheetGesture?.();
+    this.dragFromMode = mode;
+    this.mountSheetGesture();
+  }
+  getDragFrom() {
+    return this.dragFromMode;
+  }
   isTop() {
     return this.isTopSheet;
   }
@@ -3070,12 +3175,24 @@ var BottomSheetCore = class {
     auditVhUsage(points);
     this.auditDuplicateSnapIds(points);
     this.snaps.setRaw(points);
-    if (allowed) this.snaps.setAllowedIds(allowed);
+    if (allowed) {
+      this.snaps.setAllowedIds(allowed);
+    } else {
+      const present = this.snaps.getResolvedSnaps().map((s) => s.id);
+      const kept = this.snaps.getAllowedIds().filter((id) => present.includes(id));
+      this.snaps.setAllowedIds(kept.length ? kept : present);
+    }
     this.scrollCache.clear();
     this.scrim.invalidateOpacityCache();
     const current = this.snaps.findById(this.activeId);
     if (current) {
       this.applySize(current.size);
+    } else {
+      const fallback = this.snaps.getResolvedSnaps().find((s) => this.snaps.getAllowedIds().includes(s.id)) ?? this.snaps.getResolvedSnaps()[0];
+      if (fallback) {
+        this.activeId = fallback.id;
+        this.applySize(fallback.size);
+      }
     }
     this.updateAriaSlider();
   }
@@ -3085,7 +3202,7 @@ var BottomSheetCore = class {
     this.snaps.recompute();
     this.maxHeight.clampTo();
     this.scrim.invalidateOpacityCache();
-    if (this.gesture?.isDragging) return;
+    if (this.isDraggingAny()) return;
     this.healActiveSnap();
   }
   healActiveSnap() {
@@ -3107,6 +3224,8 @@ var BottomSheetCore = class {
     this.bus.clear();
     this.animation.cancel();
     this.gesture?.forceClearDragState();
+    this.contentGesture?.forceClearDragState();
+    this.setRestClosed(false);
     this.teardowns.drain();
     this.scrim.destroy();
     this.animation.destroy();
@@ -3219,11 +3338,12 @@ var BottomSheetCore = class {
     const scale = Math.max(1 - depth * 0.04, 0.86);
     this.element.style.scale = scale === 1 ? "" : String(scale);
   }
-  attach() {
-    this.gesture = new GestureController({
-      handle: this.handle,
+  buildGestureDeps(surface, gestureOptions) {
+    return {
+      handle: surface,
       element: this.element,
       mode: this.mode,
+      gestureOptions,
       getRoot: () => this.rootEl,
       getDragContext: () => {
         const buf = this.dragContextBuf;
@@ -3242,8 +3362,88 @@ var BottomSheetCore = class {
       settleAfterDrag: (delta, velocity, kind) => this.settleAfterDrag(delta, velocity, kind),
       emit: (event, payload) => this.emit(event, payload),
       listenerCount: (event) => this.bus.listenerCount(event)
+    };
+  }
+  isContentDragAllowed() {
+    if (this.disableDragFlag) return false;
+    const point = this.snapPointsRaw.find((p) => p.id === this.activeId);
+    return point?.dragFromContent ?? this.dragFromContentDefault;
+  }
+  decideContentDrag(surface, e, delta) {
+    if (this.destroyed) return false;
+    if (e.pointerType === "mouse") return false;
+    if (this.gesture?.isDragging) return false;
+    if (!this.isContentDragAllowed()) return false;
+    if (!isDragAllowedFrom(e.target, "sheet")) return false;
+    const decision = decideContentGesture({
+      delta,
+      scrollTop: surface.scrollTop,
+      atMaxSnap: this.size >= this.getAllowedRange().max - 0.5
+    });
+    if (decision === "pending") return null;
+    return decision === "drag";
+  }
+  attachDragSurface(surface, kind) {
+    if (this.destroyed || kind !== "content") return;
+    if (this.contentGesture) return;
+    const controller = new GestureController(
+      this.buildGestureDeps(surface, {
+        manageTouchAction: false,
+        deferStart: (e, delta) => this.decideContentDrag(surface, e, delta)
+      })
+    );
+    this.contentGesture = controller;
+    const detachGestures = controller.install();
+    const detachGuard = installTouchScrollGuard(
+      surface,
+      () => controller.isDragging
+    );
+    return () => {
+      detachGuard();
+      detachGestures();
+      if (this.contentGesture === controller) this.contentGesture = void 0;
+    };
+  }
+  sheetDragSurface() {
+    return this.dragFromMode === "handle" ? this.handle : this.element;
+  }
+  canStartSheetDrag(e) {
+    if (this.contentGesture?.isDragging) return false;
+    const target = e.target;
+    const scoped = typeof target?.closest === "function";
+    if (scoped && target.closest(NO_DRAG_SELECTOR)) return false;
+    if (this.handle !== this.element && scoped && this.handle.contains(target)) {
+      return true;
+    }
+    if (!isDragAllowedFrom(e.target, this.dragFromMode)) return false;
+    if (this.dragFromMode === "handle") return true;
+    if (this.scrollContainer && scoped && this.scrollContainer.contains(target) && !target.closest(DRAG_ZONE_SELECTOR)) {
+      return false;
+    }
+    return true;
+  }
+  mountSheetGesture() {
+    const surface = this.sheetDragSurface();
+    const controller = new GestureController(
+      this.buildGestureDeps(surface, {
+        shouldStart: (e) => this.canStartSheetDrag(e),
+        manageTouchAction: this.dragFromMode === "handle"
+      })
+    );
+    this.gesture = controller;
+    const detachGestures = controller.install();
+    const detachGuard = this.dragFromMode === "handle" ? null : installTouchScrollGuard(surface, () => controller.isDragging);
+    this.detachSheetGesture = () => {
+      detachGuard?.();
+      detachGestures();
+    };
+  }
+  attach() {
+    this.mountSheetGesture();
+    this.teardowns.add(() => {
+      this.detachSheetGesture?.();
+      this.detachSheetGesture = null;
     });
-    this.teardowns.add(this.gesture.install());
     try {
       this.attachFeatures();
     } catch (err) {
@@ -3280,7 +3480,7 @@ var BottomSheetCore = class {
         element: this.element,
         getMode: () => this.mode,
         isDestroyed: () => this.destroyed,
-        isDragging: () => this.gesture?.isDragging ?? false,
+        isDragging: () => this.isDraggingAny(),
         resolveActiveSnap: () => this.snaps.findById(this.activeId),
         getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
         getSize: () => this.size,
@@ -3378,8 +3578,11 @@ var BottomSheetCore = class {
       );
     });
   }
+  isDraggingAny() {
+    return (this.gesture?.isDragging ?? false) || (this.contentGesture?.isDragging ?? false);
+  }
   clearWillChangeIfIdle() {
-    if (this.animation.isAnimating || this.gesture?.isDragging) return;
+    if (this.animation.isAnimating || this.isDraggingAny()) return;
     this.element.style.willChange = "";
   }
   haptic() {
@@ -3392,8 +3595,9 @@ var BottomSheetCore = class {
   }
   applySize(size, skipTransform = false) {
     const cap = this.snaps.getMaxAxisSize();
-    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
+    const clamped = cap > 0 && size > cap && !this.isDraggingAny() && !this.allowOvershoot ? cap : size;
     this.size = clamped;
+    if (clamped > 0) this.setRestClosed(false);
     const offset = cap - clamped;
     const style = this.element.style;
     if (!skipTransform) style.transform = this.transformTemplate(offset);
@@ -3773,50 +3977,10 @@ function installAutoCollapse(deps) {
   };
 }
 
-// src/core/features/content-swipe.ts
-var CONTENT_PULL_THRESHOLD = 60;
-function installContentSwipe(deps) {
-  const { container } = deps;
-  let startY = 0;
-  let startScrollTop = 0;
-  let moved = false;
-  const onTouchStart = (e) => {
-    const t = e.touches[0];
-    if (!t) return;
-    startY = t.clientY;
-    startScrollTop = container.scrollTop;
-    moved = false;
-  };
-  const onTouchMove = (e) => {
-    const t = e.touches[0];
-    if (!t) return;
-    if (Math.abs(t.clientY - startY) > CONTENT_PULL_THRESHOLD) moved = true;
-  };
-  const onTouchEnd = (e) => {
-    if (!moved) return;
-    if (deps.isDragging() || deps.isAnimating()) return;
-    if (container.scrollTop !== startScrollTop) return;
-    const t = e.changedTouches[0];
-    if (!t) return;
-    const deltaY = t.clientY - startY;
-    const atTop = container.scrollTop <= 0;
-    const allowed = deps.getAllowedIds();
-    const idx = allowed.indexOf(deps.getActiveId());
-    if (idx === -1) return;
-    if (atTop && deltaY > CONTENT_PULL_THRESHOLD && idx > 0) {
-      deps.snapTo(allowed[idx - 1]);
-    } else if (deltaY < -CONTENT_PULL_THRESHOLD && idx < allowed.length - 1) {
-      deps.snapTo(allowed[idx + 1]);
-    }
-  };
-  container.addEventListener("touchstart", onTouchStart, { passive: true });
-  container.addEventListener("touchmove", onTouchMove, { passive: true });
-  container.addEventListener("touchend", onTouchEnd, { passive: true });
-  return () => {
-    container.removeEventListener("touchstart", onTouchStart);
-    container.removeEventListener("touchmove", onTouchMove);
-    container.removeEventListener("touchend", onTouchEnd);
-  };
+// src/core/features/content-drag.ts
+function installContentDrag(deps) {
+  const detach = deps.attachDragSurface(deps.container, "content");
+  return () => detach?.();
 }
 
 // src/core/features/visual-viewport.ts
@@ -3924,13 +4088,9 @@ function contentSwipeFeature() {
     stage: "attach",
     install: (ctx) => {
       if (!ctx.scrollContainer) return;
-      return installContentSwipe({
+      return installContentDrag({
         container: ctx.scrollContainer,
-        isDragging: ctx.isDragging,
-        isAnimating: ctx.isAnimating,
-        getAllowedIds: ctx.allowedIdsBySize,
-        getActiveId: ctx.getActiveId,
-        snapTo: ctx.snapTo
+        attachDragSurface: ctx.attachDragSurface
       });
     }
   };
@@ -4056,6 +4216,8 @@ var BottomSheet = (props) => {
       persistent: props.persistent,
       disableClose: props.disableClose,
       disableDrag: props.disableDrag,
+      dragFrom: props.dragFrom,
+      dragFromContent: props.dragFromContent,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo
@@ -4168,6 +4330,26 @@ var BottomSheet = (props) => {
       { defer: true }
     )
   );
+  createEffect(
+    on(
+      () => props.dragFromContent,
+      (value, prev) => {
+        if (!engine || prev === void 0 || value === void 0) return;
+        engine.setDragFromContent(value);
+      },
+      { defer: true }
+    )
+  );
+  createEffect(
+    on(
+      () => props.dragFrom,
+      (value, prev) => {
+        if (!engine || prev === void 0 || value === void 0) return;
+        engine.setDragFrom(value);
+      },
+      { defer: true }
+    )
+  );
   const showBackdrop = createMemo(() => props.backdrop !== false);
   const mode = createMemo(() => props.mode ?? "bottom");
   const ariaLabel = createMemo(() => props.ariaLabel ?? "Bottom sheet");

package/dist/styles.css

@@ -41,6 +41,8 @@
   position: fixed;
   background: var(--bs-surface, var(--bs-surface-d));
   box-shadow: var(--bs-shadow, var(--bs-shadow-auto, none));
+
+  --bs-shadow-fade: clamp(0, calc(var(--bs-progress, 0) * 8), 1);
   z-index: var(--bs-z-sheet);
   pointer-events: auto;
   overflow: hidden;
@@ -67,7 +69,12 @@
   --bs-shadow-auto: 0
     calc(var(--bs-progress, 0) * -2px - 3px)
     calc(var(--bs-progress, 0) * 18px + 12px)
-    rgba(0, 0, 0, calc(var(--bs-progress, 0) * 0.15 + 0.12));
+    rgba(
+      0,
+      0,
+      0,
+      calc(var(--bs-shadow-fade) * (var(--bs-progress, 0) * 0.15 + 0.12))
+    );
 }
 .bs-sheet[data-mode="top"] {
   left: 0;
@@ -78,7 +85,7 @@
   border-bottom-right-radius: var(--bs-radius, var(--bs-radius-d));
   border-bottom: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
   flex-direction: column-reverse;
-  --bs-shadow-auto: 0 3px 12px rgba(0, 0, 0, 0.12);
+  --bs-shadow-auto: 0 3px 12px rgba(0, 0, 0, calc(var(--bs-shadow-fade) * 0.12));
   padding-top: env(safe-area-inset-top);
 }
 .bs-sheet[data-mode="left"] {
@@ -90,7 +97,7 @@
   border-bottom-right-radius: var(--bs-radius, var(--bs-radius-d));
   border-right: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
 
-  --bs-shadow-auto: 3px 0 12px rgba(0, 0, 0, 0.12);
+  --bs-shadow-auto: 3px 0 12px rgba(0, 0, 0, calc(var(--bs-shadow-fade) * 0.12));
 }
 .bs-sheet[data-mode="right"] {
   top: 0;
@@ -100,7 +107,20 @@
   border-top-left-radius: var(--bs-radius, var(--bs-radius-d));
   border-bottom-left-radius: var(--bs-radius, var(--bs-radius-d));
   border-left: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
-  --bs-shadow-auto: -3px 0 12px rgba(0, 0, 0, 0.12);
+  --bs-shadow-auto: -3px 0 12px rgba(0, 0, 0, calc(var(--bs-shadow-fade) * 0.12));
+}
+
+.bs-sheet[data-bs-rest="closed"] {
+  box-shadow: none;
+  visibility: hidden;
+}
+
+.bs-sheet[data-bs-webgl="on"],
+.bs-sheet[data-bs-webgl="on"] .bs-handle,
+.bs-sheet[data-bs-webgl="on"] .bs-header,
+.bs-sheet[data-bs-webgl="on"] .bs-footer {
+  background: transparent;
+  box-shadow: none;
 }
 
 .bs-sheet[data-mode="left"] .bs-content {