@surdeddd/bottom-sheet 0.20.1 → 0.21.0

package/dist/svelte-core.js

@@ -838,13 +838,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
       if (this.backdropOpacitySentinel.shouldWrite(
         backdropOpacity,
         OPACITY_WRITE_EPSILON
@@ -1384,18 +1382,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1406,6 +1406,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3398,12 +3399,19 @@ var BottomSheetCore = class {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));

package/dist/svelte-src/BottomSheet.svelte

@@ -286,6 +286,9 @@
   $effect(() => {
     if (dragFrom !== undefined) engine?.setDragFrom(dragFrom);
   });
+  $effect(() => {
+    if (mode !== undefined) engine?.setMode(mode);
+  });
   $effect(() => {
     if (radius !== undefined) engine?.setRadius(radius);
   });

package/dist/svelte.cjs

@@ -862,13 +862,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
       if (this.backdropOpacitySentinel.shouldWrite(
         backdropOpacity,
         OPACITY_WRITE_EPSILON
@@ -1408,18 +1406,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1430,6 +1430,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3422,12 +3423,19 @@ var BottomSheetCore = class {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));
@@ -4520,6 +4528,9 @@ function BottomSheet($$anchor, $$props) {
   $2__namespace.user_effect(() => {
     if ($$props.dragFrom !== void 0) engine?.setDragFrom($$props.dragFrom);
   });
+  $2__namespace.user_effect(() => {
+    if (mode() !== void 0) engine?.setMode(mode());
+  });
   $2__namespace.user_effect(() => {
     if ($$props.radius !== void 0) engine?.setRadius($$props.radius);
   });

package/dist/svelte.js

@@ -840,13 +840,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
       if (this.backdropOpacitySentinel.shouldWrite(
         backdropOpacity,
         OPACITY_WRITE_EPSILON
@@ -1386,18 +1384,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1408,6 +1408,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3400,12 +3401,19 @@ var BottomSheetCore = class {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));
@@ -4498,6 +4506,9 @@ function BottomSheet($$anchor, $$props) {
   $2.user_effect(() => {
     if ($$props.dragFrom !== void 0) engine?.setDragFrom($$props.dragFrom);
   });
+  $2.user_effect(() => {
+    if (mode() !== void 0) engine?.setMode(mode());
+  });
   $2.user_effect(() => {
     if ($$props.radius !== void 0) engine?.setRadius($$props.radius);
   });

package/dist/themes/ios.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/themes/material.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/themes/vercel.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vue.cjs

@@ -840,13 +840,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
       if (this.backdropOpacitySentinel.shouldWrite(
         backdropOpacity,
         OPACITY_WRITE_EPSILON
@@ -1386,18 +1384,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1408,6 +1408,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3400,12 +3401,19 @@ var BottomSheetCore = class {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));
@@ -4738,6 +4746,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (next === void 0) return;
       getEngine()?.setDragFrom(next);
     });
+    vue.watch(() => props.mode, (next) => {
+      if (next === void 0) return;
+      getEngine()?.setMode(next);
+    });
     const mounted = vue.ref(false);
     const anchorHosts = vue.shallowRef({});
     const anchorDetachers = vue.ref([]);
@@ -4996,7 +5008,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* KEYED_FRAGMENT */
   ))], 8, ["to", "disabled"]);
 }
-var BottomSheet_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/Users/maksimkravcov/Projects/Personal/BottomSheet/src/vue/BottomSheet.vue"]]);
+var BottomSheet_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/BottomSheet/BottomSheet/src/vue/BottomSheet.vue"]]);
 
 exports.BottomSheet = BottomSheet_default;
 exports.useBottomSheet = useBottomSheet;

package/dist/vue.d.cts

@@ -74,6 +74,11 @@ export function useBottomSheet<TId extends string = string>(
   opts: UseBottomSheetVueOptions<TId>,
 ): UseBottomSheetVueReturn<TId>;
 
+export type BottomSheetInstance<TId extends string = string> = Omit<
+  UseBottomSheetVueReturn<TId>,
+  "sheetRef" | "handleRef" | "contentRef" | "backdropRef" | "screenRef"
+>;
+
 export type VueAnchor<TId extends string = string> = Omit<
   AnchorOptions,
   "element"
@@ -96,7 +101,7 @@ export type BottomSheetProps<TId extends string = string> =
 
 export const BottomSheet: DefineComponent<
   BottomSheetProps,
-  Record<string, never>,
+  BottomSheetInstance,
   Record<string, never>,
   Record<string, never>,
   Record<string, never>,

package/dist/vue.d.ts

@@ -74,6 +74,11 @@ export function useBottomSheet<TId extends string = string>(
   opts: UseBottomSheetVueOptions<TId>,
 ): UseBottomSheetVueReturn<TId>;
 
+export type BottomSheetInstance<TId extends string = string> = Omit<
+  UseBottomSheetVueReturn<TId>,
+  "sheetRef" | "handleRef" | "contentRef" | "backdropRef" | "screenRef"
+>;
+
 export type VueAnchor<TId extends string = string> = Omit<
   AnchorOptions,
   "element"
@@ -96,7 +101,7 @@ export type BottomSheetProps<TId extends string = string> =
 
 export const BottomSheet: DefineComponent<
   BottomSheetProps,
-  Record<string, never>,
+  BottomSheetInstance,
   Record<string, never>,
   Record<string, never>,
   Record<string, never>,

package/dist/vue.js

@@ -838,13 +838,11 @@ var ScrimController = class {
     if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
-    if (this.backdrop && this.isTopSheet()) {
+    if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
+      const ramp = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = this.isTopSheet() ? ramp : 0;
       if (this.backdropOpacitySentinel.shouldWrite(
         backdropOpacity,
         OPACITY_WRITE_EPSILON
@@ -1384,18 +1382,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1406,6 +1406,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -3398,12 +3399,19 @@ var BottomSheetCore = class {
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (this.isTopSheet === isTop) return;
         this.isTopSheet = isTop;
+        this.repaintScrim();
       },
       isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  repaintScrim() {
+    if (this.destroyed) return;
+    this.scrim.invalidateOpacityCache();
+    this.scrim.applyOpacity(this.computeProgress(this.size), true);
+  }
   applyStackDepth(depth) {
     if (!this.stackEffectEnabled) return;
     this.element.setAttribute("data-stack-depth", String(depth));
@@ -4736,6 +4744,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (next === void 0) return;
       getEngine()?.setDragFrom(next);
     });
+    watch(() => props.mode, (next) => {
+      if (next === void 0) return;
+      getEngine()?.setMode(next);
+    });
     const mounted = ref(false);
     const anchorHosts = shallowRef({});
     const anchorDetachers = ref([]);
@@ -4994,7 +5006,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* KEYED_FRAGMENT */
   ))], 8, ["to", "disabled"]);
 }
-var BottomSheet_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/Users/maksimkravcov/Projects/Personal/BottomSheet/src/vue/BottomSheet.vue"]]);
+var BottomSheet_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/BottomSheet/BottomSheet/src/vue/BottomSheet.vue"]]);
 
 export { BottomSheet_default as BottomSheet, useBottomSheet };
 //# sourceMappingURL=vue.js.map

package/dist/webgl.d.cts

@@ -1,4 +1,4 @@
-import { f as EngineFeature } from './BottomSheetCore-VPJZcKcg.cjs';
+import { f as EngineFeature } from './BottomSheetCore-CK8Rh1He.cjs';
 import './transform-jVfAikE9.cjs';
 
 type WebGLRendererOptions = {

package/dist/webgl.d.ts

@@ -1,4 +1,4 @@
-import { f as EngineFeature } from './BottomSheetCore-Cgn8b_6A.js';
+import { f as EngineFeature } from './BottomSheetCore-CIijwtdi.js';
 import './transform-jVfAikE9.js';
 
 type WebGLRendererOptions = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",
@@ -200,14 +200,38 @@
       }
     },
     "./package.json": "./package.json",
-    "./styles": "./dist/styles.css",
-    "./styles.css": "./dist/styles.css",
-    "./themes/ios": "./dist/themes/ios.css",
-    "./themes/ios.css": "./dist/themes/ios.css",
-    "./themes/material": "./dist/themes/material.css",
-    "./themes/material.css": "./dist/themes/material.css",
-    "./themes/vercel": "./dist/themes/vercel.css",
-    "./themes/vercel.css": "./dist/themes/vercel.css"
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/styles.css"
+    },
+    "./styles.css": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/styles.css"
+    },
+    "./themes/ios": {
+      "types": "./dist/themes/ios.d.ts",
+      "default": "./dist/themes/ios.css"
+    },
+    "./themes/ios.css": {
+      "types": "./dist/themes/ios.d.ts",
+      "default": "./dist/themes/ios.css"
+    },
+    "./themes/material": {
+      "types": "./dist/themes/material.d.ts",
+      "default": "./dist/themes/material.css"
+    },
+    "./themes/material.css": {
+      "types": "./dist/themes/material.d.ts",
+      "default": "./dist/themes/material.css"
+    },
+    "./themes/vercel": {
+      "types": "./dist/themes/vercel.d.ts",
+      "default": "./dist/themes/vercel.css"
+    },
+    "./themes/vercel.css": {
+      "types": "./dist/themes/vercel.d.ts",
+      "default": "./dist/themes/vercel.css"
+    }
   },
   "workspaces": [
     "examples/*"
@@ -385,7 +409,7 @@
     "@builder.io/qwik": "^1.20.0",
     "@lhci/cli": "^0.15.1",
     "@playwright/test": "^1.62.1",
-    "@size-limit/preset-small-lib": "^12.1.0",
+    "@size-limit/preset-small-lib": "^13.0.3",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/node": "^20.19.43",
     "@types/react": "^18.3.31",
@@ -400,13 +424,13 @@
     "happy-dom": "^20.11.1",
     "husky": "^9.1.7",
     "lit": "^3.3.3",
-    "motion": "^12.43.0",
+    "motion": "^13.1.0",
     "patch-package": "^8.0.1",
     "publint": "^0.3.22",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rolldown": "^1.2.1",
-    "size-limit": "^12.1.0",
+    "size-limit": "^13.0.3",
     "solid-js": "^1.9.14",
     "svelte": "^5.56.8",
     "three": "^0.185.1",