@surdeddd/bottom-sheet 0.5.0 → 0.6.0

package/dist/react.cjs

@@ -3437,6 +3437,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/react/useBottomSheet.ts
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 var SSR_STATE = Object.freeze({
@@ -3470,6 +3502,17 @@ function useBottomSheet(opts) {
       scrim: screenRef.current ?? void 0
     });
     engineRef.current = engine;
+    const target = resolveTeleportTarget(optsRef.current.teleportTo);
+    const restoreTeleport = target ? teleportElements(
+      [backdropRef.current, screenRef.current, sheetRef.current],
+      target
+    ) : null;
+    if (optsRef.current.backdropColor !== void 0) {
+      engine.setScrimColor(optsRef.current.backdropColor);
+    }
+    if (optsRef.current.backdropOpacity !== void 0) {
+      engine.setBackdropRange([0, optsRef.current.backdropOpacity]);
+    }
     cachedSnapshotRef.current = { ...engine.state };
     setMounted((n) => n + 1);
     const refresh = () => {
@@ -3501,6 +3544,7 @@ function useBottomSheet(opts) {
     ];
     return () => {
       offs.forEach((off) => off());
+      restoreTeleport?.();
       engine.destroy();
       engineRef.current = null;
       cachedSnapshotRef.current = SSR_STATE;
@@ -3516,6 +3560,18 @@ function useBottomSheet(opts) {
     const ids = opts.allowed ? Array.from(opts.allowed) : opts.snapPoints.map((p) => p.id);
     engineRef.current.setAllowed(ids);
   }, [allowedKey, snapKey]);
+  react.useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.backdropColor !== void 0) {
+      engineRef.current.setScrimColor(opts.backdropColor);
+    }
+  }, [opts.backdropColor]);
+  react.useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.backdropOpacity !== void 0) {
+      engineRef.current.setBackdropRange([0, opts.backdropOpacity]);
+    }
+  }, [opts.backdropOpacity]);
   const subscribe = react.useCallback((fn) => {
     subscribersRef.current.add(fn);
     return () => subscribersRef.current.delete(fn);

package/dist/react.d.cts

@@ -84,6 +84,8 @@ declare const BottomSheet: react.ForwardRefExoticComponent<EngineOptionsForProps
     noSSR?: boolean;
 } & react.RefAttributes<BottomSheetHandle<string>>>;
 
+type TeleportTarget = HTMLElement | string | null | undefined;
+
 type UseBottomSheetRefs = {
     sheetRef: React.RefObject<HTMLElement | null>;
     handleRef: React.RefObject<HTMLElement | null>;
@@ -113,6 +115,9 @@ type HookOpts<TId extends string> = Omit<EngineOptions, "element" | "handle" | "
     snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
     allowed?: TId[] | ReadonlyArray<TId>;
     initial?: TId;
+    teleportTo?: TeleportTarget;
+    backdropColor?: string;
+    backdropOpacity?: number;
     onSnap?: (id: TId) => void;
     onBeforeClose?: (payload: SheetEventMap["before-close"]) => void;
     onOpened?: (id: TId) => void;

package/dist/react.d.ts

@@ -84,6 +84,8 @@ declare const BottomSheet: react.ForwardRefExoticComponent<EngineOptionsForProps
     noSSR?: boolean;
 } & react.RefAttributes<BottomSheetHandle<string>>>;
 
+type TeleportTarget = HTMLElement | string | null | undefined;
+
 type UseBottomSheetRefs = {
     sheetRef: React.RefObject<HTMLElement | null>;
     handleRef: React.RefObject<HTMLElement | null>;
@@ -113,6 +115,9 @@ type HookOpts<TId extends string> = Omit<EngineOptions, "element" | "handle" | "
     snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
     allowed?: TId[] | ReadonlyArray<TId>;
     initial?: TId;
+    teleportTo?: TeleportTarget;
+    backdropColor?: string;
+    backdropOpacity?: number;
     onSnap?: (id: TId) => void;
     onBeforeClose?: (payload: SheetEventMap["before-close"]) => void;
     onOpened?: (id: TId) => void;

package/dist/react.js

@@ -3435,6 +3435,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/react/useBottomSheet.ts
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var SSR_STATE = Object.freeze({
@@ -3468,6 +3500,17 @@ function useBottomSheet(opts) {
       scrim: screenRef.current ?? void 0
     });
     engineRef.current = engine;
+    const target = resolveTeleportTarget(optsRef.current.teleportTo);
+    const restoreTeleport = target ? teleportElements(
+      [backdropRef.current, screenRef.current, sheetRef.current],
+      target
+    ) : null;
+    if (optsRef.current.backdropColor !== void 0) {
+      engine.setScrimColor(optsRef.current.backdropColor);
+    }
+    if (optsRef.current.backdropOpacity !== void 0) {
+      engine.setBackdropRange([0, optsRef.current.backdropOpacity]);
+    }
     cachedSnapshotRef.current = { ...engine.state };
     setMounted((n) => n + 1);
     const refresh = () => {
@@ -3499,6 +3542,7 @@ function useBottomSheet(opts) {
     ];
     return () => {
       offs.forEach((off) => off());
+      restoreTeleport?.();
       engine.destroy();
       engineRef.current = null;
       cachedSnapshotRef.current = SSR_STATE;
@@ -3514,6 +3558,18 @@ function useBottomSheet(opts) {
     const ids = opts.allowed ? Array.from(opts.allowed) : opts.snapPoints.map((p) => p.id);
     engineRef.current.setAllowed(ids);
   }, [allowedKey, snapKey]);
+  useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.backdropColor !== void 0) {
+      engineRef.current.setScrimColor(opts.backdropColor);
+    }
+  }, [opts.backdropColor]);
+  useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.backdropOpacity !== void 0) {
+      engineRef.current.setBackdropRange([0, opts.backdropOpacity]);
+    }
+  }, [opts.backdropOpacity]);
   const subscribe = useCallback((fn) => {
     subscribersRef.current.add(fn);
     return () => subscribersRef.current.delete(fn);

package/dist/svelte-core.cjs

@@ -3429,6 +3429,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/svelte/useBottomSheet.svelte.ts
 var SSR_STATE = Object.freeze({
   size: 0,
@@ -3442,9 +3474,21 @@ function createBottomSheet(opts) {
   const pending = [];
   const attach = (refs) => {
     if (engine) engine.destroy();
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     const created = new BottomSheetEngine({ ...engineOpts, ...refs });
     engine = created;
+    const target = resolveTeleportTarget(teleportTo);
+    const restoreTeleport = target ? teleportElements([refs.backdrop, refs.scrim, refs.element], target) : null;
+    if (backdropColor !== void 0) created.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      created.setBackdropRange([0, backdropOpacity]);
+    }
     if (onSnap) {
       created.on("snap", (payload) => onSnap(payload.id));
     }
@@ -3453,6 +3497,7 @@ function createBottomSheet(opts) {
     }
     pending.length = 0;
     return () => {
+      restoreTeleport?.();
       created.destroy();
       if (engine === created) engine = null;
     };

package/dist/svelte-core.js

@@ -3427,6 +3427,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/svelte/useBottomSheet.svelte.ts
 var SSR_STATE = Object.freeze({
   size: 0,
@@ -3440,9 +3472,21 @@ function createBottomSheet(opts) {
   const pending = [];
   const attach = (refs) => {
     if (engine) engine.destroy();
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     const created = new BottomSheetEngine({ ...engineOpts, ...refs });
     engine = created;
+    const target = resolveTeleportTarget(teleportTo);
+    const restoreTeleport = target ? teleportElements([refs.backdrop, refs.scrim, refs.element], target) : null;
+    if (backdropColor !== void 0) created.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      created.setBackdropRange([0, backdropOpacity]);
+    }
     if (onSnap) {
       created.on("snap", (payload) => onSnap(payload.id));
     }
@@ -3451,6 +3495,7 @@ function createBottomSheet(opts) {
     }
     pending.length = 0;
     return () => {
+      restoreTeleport?.();
       created.destroy();
       if (engine === created) engine = null;
     };

package/dist/svelte.cjs

@@ -3451,6 +3451,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/svelte/useBottomSheet.svelte.ts
 var SSR_STATE = Object.freeze({
   size: 0,
@@ -3464,9 +3496,21 @@ function createBottomSheet(opts) {
   const pending = [];
   const attach = (refs) => {
     if (engine) engine.destroy();
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     const created = new BottomSheetEngine({ ...engineOpts, ...refs });
     engine = created;
+    const target = resolveTeleportTarget(teleportTo);
+    const restoreTeleport = target ? teleportElements([refs.backdrop, refs.scrim, refs.element], target) : null;
+    if (backdropColor !== void 0) created.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      created.setBackdropRange([0, backdropOpacity]);
+    }
     if (onSnap) {
       created.on("snap", (payload) => onSnap(payload.id));
     }
@@ -3475,6 +3519,7 @@ function createBottomSheet(opts) {
     }
     pending.length = 0;
     return () => {
+      restoreTeleport?.();
       created.destroy();
       if (engine === created) engine = null;
     };

package/dist/svelte.js

@@ -3429,6 +3429,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/svelte/useBottomSheet.svelte.ts
 var SSR_STATE = Object.freeze({
   size: 0,
@@ -3442,9 +3474,21 @@ function createBottomSheet(opts) {
   const pending = [];
   const attach = (refs) => {
     if (engine) engine.destroy();
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     const created = new BottomSheetEngine({ ...engineOpts, ...refs });
     engine = created;
+    const target = resolveTeleportTarget(teleportTo);
+    const restoreTeleport = target ? teleportElements([refs.backdrop, refs.scrim, refs.element], target) : null;
+    if (backdropColor !== void 0) created.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      created.setBackdropRange([0, backdropOpacity]);
+    }
     if (onSnap) {
       created.on("snap", (payload) => onSnap(payload.id));
     }
@@ -3453,6 +3497,7 @@ function createBottomSheet(opts) {
     }
     pending.length = 0;
     return () => {
+      restoreTeleport?.();
       created.destroy();
       if (engine === created) engine = null;
     };

package/dist/vue.cjs

@@ -3429,6 +3429,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/vue/useBottomSheet.ts
 function useBottomSheet(opts) {
   const sheetRef = vue.ref(null);
@@ -3445,13 +3477,20 @@ function useBottomSheet(opts) {
     isAnimating: false,
     progress: 0
   });
+  let restoreTeleport = null;
   const sync = () => {
     if (!engine) return;
     Object.assign(state, engine.state);
   };
   vue.onMounted(() => {
     if (!sheetRef.value) return;
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     engine = new BottomSheetEngine({
       ...engineOpts,
       element: sheetRef.value,
@@ -3461,6 +3500,17 @@ function useBottomSheet(opts) {
       scrim: screenRef.value ?? void 0
     });
     sync();
+    const target = resolveTeleportTarget(teleportTo);
+    if (target) {
+      restoreTeleport = teleportElements(
+        [backdropRef.value, screenRef.value, sheetRef.value],
+        target
+      );
+    }
+    if (backdropColor !== void 0) engine.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      engine.setBackdropRange([0, backdropOpacity]);
+    }
     engine.on("snap", (payload) => {
       sync();
       onSnap?.(payload.id);
@@ -3476,6 +3526,8 @@ function useBottomSheet(opts) {
     pending.length = 0;
   });
   vue.onBeforeUnmount(() => {
+    restoreTeleport?.();
+    restoreTeleport = null;
     engine?.destroy();
     engine = null;
   });
@@ -3704,6 +3756,23 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: null,
       required: false
     },
+    teleportTo: {
+      type: [
+        String,
+        null,
+        Object
+      ],
+      required: false,
+      default: "body"
+    },
+    backdropColor: {
+      type: String,
+      required: false
+    },
+    backdropOpacity: {
+      type: Number,
+      required: false
+    },
     onSnap: {
       type: Function,
       required: false
@@ -3736,11 +3805,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       required: false,
       default: true
     },
-    teleportTo: {
-      type: null,
-      required: false,
-      default: "body"
-    },
     anchors: {
       type: Array,
       required: false
@@ -3748,14 +3812,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     scrimStages: {
       type: [Object, null],
       required: false
-    },
-    backdropColor: {
-      type: String,
-      required: false
-    },
-    backdropOpacity: {
-      type: Number,
-      required: false
     }
   },
   emits: [

package/dist/vue.js

@@ -3427,6 +3427,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/vue/useBottomSheet.ts
 function useBottomSheet(opts) {
   const sheetRef = ref(null);
@@ -3443,13 +3475,20 @@ function useBottomSheet(opts) {
     isAnimating: false,
     progress: 0
   });
+  let restoreTeleport = null;
   const sync = () => {
     if (!engine) return;
     Object.assign(state, engine.state);
   };
   onMounted(() => {
     if (!sheetRef.value) return;
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     engine = new BottomSheetEngine({
       ...engineOpts,
       element: sheetRef.value,
@@ -3459,6 +3498,17 @@ function useBottomSheet(opts) {
       scrim: screenRef.value ?? void 0
     });
     sync();
+    const target = resolveTeleportTarget(teleportTo);
+    if (target) {
+      restoreTeleport = teleportElements(
+        [backdropRef.value, screenRef.value, sheetRef.value],
+        target
+      );
+    }
+    if (backdropColor !== void 0) engine.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      engine.setBackdropRange([0, backdropOpacity]);
+    }
     engine.on("snap", (payload) => {
       sync();
       onSnap?.(payload.id);
@@ -3474,6 +3524,8 @@ function useBottomSheet(opts) {
     pending.length = 0;
   });
   onBeforeUnmount(() => {
+    restoreTeleport?.();
+    restoreTeleport = null;
     engine?.destroy();
     engine = null;
   });
@@ -3702,6 +3754,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       type: null,
       required: false
     },
+    teleportTo: {
+      type: [
+        String,
+        null,
+        Object
+      ],
+      required: false,
+      default: "body"
+    },
+    backdropColor: {
+      type: String,
+      required: false
+    },
+    backdropOpacity: {
+      type: Number,
+      required: false
+    },
     onSnap: {
       type: Function,
       required: false
@@ -3734,11 +3803,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       required: false,
       default: true
     },
-    teleportTo: {
-      type: null,
-      required: false,
-      default: "body"
-    },
     anchors: {
       type: Array,
       required: false
@@ -3746,14 +3810,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     scrimStages: {
       type: [Object, null],
       required: false
-    },
-    backdropColor: {
-      type: String,
-      required: false
-    },
-    backdropOpacity: {
-      type: Number,
-      required: false
     }
   },
   emits: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.5.0",
+  "version": "0.6.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",