@samline/drawer 2.0.6 → 2.0.8

package/dist/{svelte/components-client-CJuQ5vtW.js → components-client-B8ZDZqhE.js}

@@ -1528,6 +1528,27 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     const drawerHeightRef = React__namespace.default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
     const drawerWidthRef = React__namespace.default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
     const initialDrawerHeight = React__namespace.default.useRef(0);
+    const releaseHiddenFocusBeforeOpen = React__namespace.default.useCallback(()=>{
+        var _drawerRef_current;
+        if (!modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return;
+        }
+        const activeElementNode = activeElement;
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
+            return;
+        }
+        if (typeof activeElementNode.blur !== 'function') {
+            return;
+        }
+        activeElementNode.blur();
+    }, [
+        autoFocus,
+        modal
+    ]);
     const onSnapPointChange = React__namespace.default.useCallback((activeSnapPointIndex)=>{
         // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
         if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
@@ -1579,26 +1600,13 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         autoFocus
     });
     useSafeLayoutEffect(()=>{
-        var _drawerRef_current;
-        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+        if (!isOpen) {
             return;
         }
-        const activeElement = document.activeElement;
-        if (!activeElement || activeElement === document.body) {
-            return;
-        }
-        const activeElementNode = activeElement;
-        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
-            return;
-        }
-        if (typeof activeElementNode.blur !== 'function') {
-            return;
-        }
-        activeElementNode.blur();
+        releaseHiddenFocusBeforeOpen();
     }, [
-        autoFocus,
         isOpen,
-        modal
+        releaseHiddenFocusBeforeOpen
     ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
@@ -2007,6 +2015,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         onOpenChange: (open)=>{
             if (!dismissible && !open) return;
             if (open) {
+                releaseHiddenFocusBeforeOpen();
                 setHasBeenOpened(true);
             } else {
                 closeDrawer(true);

package/dist/{browser/components-client-tfLTRxPH.mjs → components-client-LPOAyYIW.mjs}

@@ -1508,6 +1508,27 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     const drawerHeightRef = React__default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
     const drawerWidthRef = React__default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
     const initialDrawerHeight = React__default.useRef(0);
+    const releaseHiddenFocusBeforeOpen = React__default.useCallback(()=>{
+        var _drawerRef_current;
+        if (!modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return;
+        }
+        const activeElementNode = activeElement;
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
+            return;
+        }
+        if (typeof activeElementNode.blur !== 'function') {
+            return;
+        }
+        activeElementNode.blur();
+    }, [
+        autoFocus,
+        modal
+    ]);
     const onSnapPointChange = React__default.useCallback((activeSnapPointIndex)=>{
         // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
         if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
@@ -1559,26 +1580,13 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         autoFocus
     });
     useSafeLayoutEffect(()=>{
-        var _drawerRef_current;
-        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+        if (!isOpen) {
             return;
         }
-        const activeElement = document.activeElement;
-        if (!activeElement || activeElement === document.body) {
-            return;
-        }
-        const activeElementNode = activeElement;
-        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
-            return;
-        }
-        if (typeof activeElementNode.blur !== 'function') {
-            return;
-        }
-        activeElementNode.blur();
+        releaseHiddenFocusBeforeOpen();
     }, [
-        autoFocus,
         isOpen,
-        modal
+        releaseHiddenFocusBeforeOpen
     ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
@@ -1987,6 +1995,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         onOpenChange: (open)=>{
             if (!dismissible && !open) return;
             if (open) {
+                releaseHiddenFocusBeforeOpen();
                 setHasBeenOpened(true);
             } else {
                 closeDrawer(true);

package/dist/index.js

@@ -28074,6 +28074,23 @@ function Root2({
   const drawerHeightRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
   const drawerWidthRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
   const initialDrawerHeight = import_react9.default.useRef(0);
+  const releaseHiddenFocusBeforeOpen2 = import_react9.default.useCallback(() => {
+    if (!modal || autoFocus || typeof document === "undefined") {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (!activeElement || activeElement === document.body) {
+      return;
+    }
+    const activeElementNode = activeElement;
+    if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
+      return;
+    }
+    if (typeof activeElementNode.blur !== "function") {
+      return;
+    }
+    activeElementNode.blur();
+  }, [autoFocus, modal]);
   const onSnapPointChange = import_react9.default.useCallback((activeSnapPointIndex2) => {
     if (snapPoints && activeSnapPointIndex2 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
   }, []);
@@ -28133,22 +28150,11 @@ function Root2({
     autoFocus
   });
   useSafeLayoutEffect(() => {
-    if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
-      return;
-    }
-    const activeElement = document.activeElement;
-    if (!activeElement || activeElement === document.body) {
+    if (!isOpen) {
       return;
     }
-    const activeElementNode = activeElement;
-    if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
-      return;
-    }
-    if (typeof activeElementNode.blur !== "function") {
-      return;
-    }
-    activeElementNode.blur();
-  }, [autoFocus, isOpen, modal]);
+    releaseHiddenFocusBeforeOpen2();
+  }, [isOpen, releaseHiddenFocusBeforeOpen2]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -28532,6 +28538,7 @@ function Root2({
       onOpenChange: (open) => {
         if (!dismissible && !open) return;
         if (open) {
+          releaseHiddenFocusBeforeOpen2();
           setHasBeenOpened(true);
         } else {
           closeDrawer2(true);
@@ -29125,7 +29132,7 @@ function openAncestorChain(parentId) {
     openAncestorChain(nextParentId);
   }
   if (!parentRuntime.controller.getSnapshot().state.isOpen) {
-    releaseHiddenFocusBeforeOpen(parentRuntime.options);
+    releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
     parentRuntime.controller.setOpen(true);
     notifyOpenStateChange(parentRuntime, true);
     renderVanillaDrawer(parentRuntime.id);
@@ -29140,18 +29147,36 @@ function cleanupRuntimeTrigger(runtime) {
 }
 function bindTriggerElement(runtime) {
   cleanupRuntimeTrigger(runtime);
+  const drawerElement = getRuntimeDrawerElement(runtime);
+  const builtInTriggerElement = getRuntimeTriggerElement(runtime);
+  const cleanups = [];
+  if (builtInTriggerElement) {
+    const handleBuiltInTriggerClick = () => {
+      releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
+    };
+    builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
+    cleanups.push(() => {
+      builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
+    });
+  }
   if (!runtime.options.triggerElement) {
+    runtime.cleanupTriggerElement = cleanups.length ? () => {
+      cleanups.forEach((cleanup) => cleanup());
+    } : null;
     return;
   }
   const triggerElement = runtime.options.triggerElement;
   const handleClick = () => {
-    releaseHiddenFocusBeforeOpen(runtime.options);
+    releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
     runtime.controller.setOpen(true);
     renderVanillaDrawer(runtime.id);
   };
   triggerElement.addEventListener("click", handleClick);
-  runtime.cleanupTriggerElement = () => {
+  cleanups.push(() => {
     triggerElement.removeEventListener("click", handleClick);
+  });
+  runtime.cleanupTriggerElement = () => {
+    cleanups.forEach((cleanup) => cleanup());
   };
 }
 function notifyOpenStateChange(runtime, open) {
@@ -29181,15 +29206,32 @@ function notifyOpenStateChange(runtime, open) {
 function canUseDOM3() {
   return typeof window !== "undefined" && typeof document !== "undefined";
 }
-function releaseHiddenFocusBeforeOpen(options) {
+function isElementInsideDrawer(element) {
+  let currentElement = element;
+  while (currentElement) {
+    if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
+      return true;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+function releaseHiddenFocusBeforeOpen(options, drawerElement) {
   if (!canUseDOM3() || options.modal === false || options.autoFocus) {
     return;
   }
   const activeElement = document.activeElement;
-  if (!activeElement || activeElement === document.body || typeof activeElement.blur !== "function") {
+  if (!activeElement || activeElement === document.body) {
     return;
   }
-  activeElement.blur();
+  const activeElementNode = activeElement;
+  if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
+    return;
+  }
+  if (typeof activeElementNode.blur !== "function") {
+    return;
+  }
+  activeElementNode.blur();
 }
 function getRuntimeDrawerElement(runtime) {
   if (!runtime.element) {
@@ -29197,6 +29239,12 @@ function getRuntimeDrawerElement(runtime) {
   }
   return runtime.element.querySelector("[data-drawer]");
 }
+function getRuntimeTriggerElement(runtime) {
+  if (!runtime.element) {
+    return null;
+  }
+  return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
+}
 function getViewportSizeForDirection(direction) {
   if (!canUseDOM3()) {
     return 0;
@@ -29245,7 +29293,7 @@ function renderVanillaDrawer(id) {
     onOpenChange: (open) => {
       const previousOpen = runtime.controller.getSnapshot().state.isOpen;
       if (open) {
-        releaseHiddenFocusBeforeOpen(runtime.options);
+        releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
       }
       runtime.controller.setOpen(open);
       if (previousOpen !== open) {
@@ -29294,7 +29342,7 @@ function buildVanillaController(id) {
         return createDrawer({ id, open }).getSnapshot();
       }
       if (open) {
-        releaseHiddenFocusBeforeOpen(runtime.options);
+        releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
       }
       const previousOpen = runtime.controller.getSnapshot().state.isOpen;
       const snapshot = runtime.controller.setOpen(open);
@@ -29367,7 +29415,7 @@ function createDrawer(options = {}) {
     }
   }
   if (nextOptions.open && !previousOpen) {
-    releaseHiddenFocusBeforeOpen(nextOptions);
+    releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
   }
   renderVanillaDrawer(id);
   if (nextOptions.parentId && nextOptions.open) {

package/dist/index.mjs

@@ -28049,6 +28049,23 @@ function Root2({
   const drawerHeightRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
   const drawerWidthRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
   const initialDrawerHeight = import_react9.default.useRef(0);
+  const releaseHiddenFocusBeforeOpen2 = import_react9.default.useCallback(() => {
+    if (!modal || autoFocus || typeof document === "undefined") {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (!activeElement || activeElement === document.body) {
+      return;
+    }
+    const activeElementNode = activeElement;
+    if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
+      return;
+    }
+    if (typeof activeElementNode.blur !== "function") {
+      return;
+    }
+    activeElementNode.blur();
+  }, [autoFocus, modal]);
   const onSnapPointChange = import_react9.default.useCallback((activeSnapPointIndex2) => {
     if (snapPoints && activeSnapPointIndex2 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
   }, []);
@@ -28108,22 +28125,11 @@ function Root2({
     autoFocus
   });
   useSafeLayoutEffect(() => {
-    if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
-      return;
-    }
-    const activeElement = document.activeElement;
-    if (!activeElement || activeElement === document.body) {
+    if (!isOpen) {
       return;
     }
-    const activeElementNode = activeElement;
-    if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
-      return;
-    }
-    if (typeof activeElementNode.blur !== "function") {
-      return;
-    }
-    activeElementNode.blur();
-  }, [autoFocus, isOpen, modal]);
+    releaseHiddenFocusBeforeOpen2();
+  }, [isOpen, releaseHiddenFocusBeforeOpen2]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -28507,6 +28513,7 @@ function Root2({
       onOpenChange: (open) => {
         if (!dismissible && !open) return;
         if (open) {
+          releaseHiddenFocusBeforeOpen2();
           setHasBeenOpened(true);
         } else {
           closeDrawer2(true);
@@ -29100,7 +29107,7 @@ function openAncestorChain(parentId) {
     openAncestorChain(nextParentId);
   }
   if (!parentRuntime.controller.getSnapshot().state.isOpen) {
-    releaseHiddenFocusBeforeOpen(parentRuntime.options);
+    releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
     parentRuntime.controller.setOpen(true);
     notifyOpenStateChange(parentRuntime, true);
     renderVanillaDrawer(parentRuntime.id);
@@ -29115,18 +29122,36 @@ function cleanupRuntimeTrigger(runtime) {
 }
 function bindTriggerElement(runtime) {
   cleanupRuntimeTrigger(runtime);
+  const drawerElement = getRuntimeDrawerElement(runtime);
+  const builtInTriggerElement = getRuntimeTriggerElement(runtime);
+  const cleanups = [];
+  if (builtInTriggerElement) {
+    const handleBuiltInTriggerClick = () => {
+      releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
+    };
+    builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
+    cleanups.push(() => {
+      builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
+    });
+  }
   if (!runtime.options.triggerElement) {
+    runtime.cleanupTriggerElement = cleanups.length ? () => {
+      cleanups.forEach((cleanup) => cleanup());
+    } : null;
     return;
   }
   const triggerElement = runtime.options.triggerElement;
   const handleClick = () => {
-    releaseHiddenFocusBeforeOpen(runtime.options);
+    releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
     runtime.controller.setOpen(true);
     renderVanillaDrawer(runtime.id);
   };
   triggerElement.addEventListener("click", handleClick);
-  runtime.cleanupTriggerElement = () => {
+  cleanups.push(() => {
     triggerElement.removeEventListener("click", handleClick);
+  });
+  runtime.cleanupTriggerElement = () => {
+    cleanups.forEach((cleanup) => cleanup());
   };
 }
 function notifyOpenStateChange(runtime, open) {
@@ -29156,15 +29181,32 @@ function notifyOpenStateChange(runtime, open) {
 function canUseDOM3() {
   return typeof window !== "undefined" && typeof document !== "undefined";
 }
-function releaseHiddenFocusBeforeOpen(options) {
+function isElementInsideDrawer(element) {
+  let currentElement = element;
+  while (currentElement) {
+    if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
+      return true;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+function releaseHiddenFocusBeforeOpen(options, drawerElement) {
   if (!canUseDOM3() || options.modal === false || options.autoFocus) {
     return;
   }
   const activeElement = document.activeElement;
-  if (!activeElement || activeElement === document.body || typeof activeElement.blur !== "function") {
+  if (!activeElement || activeElement === document.body) {
     return;
   }
-  activeElement.blur();
+  const activeElementNode = activeElement;
+  if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
+    return;
+  }
+  if (typeof activeElementNode.blur !== "function") {
+    return;
+  }
+  activeElementNode.blur();
 }
 function getRuntimeDrawerElement(runtime) {
   if (!runtime.element) {
@@ -29172,6 +29214,12 @@ function getRuntimeDrawerElement(runtime) {
   }
   return runtime.element.querySelector("[data-drawer]");
 }
+function getRuntimeTriggerElement(runtime) {
+  if (!runtime.element) {
+    return null;
+  }
+  return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
+}
 function getViewportSizeForDirection(direction) {
   if (!canUseDOM3()) {
     return 0;
@@ -29220,7 +29268,7 @@ function renderVanillaDrawer(id) {
     onOpenChange: (open) => {
       const previousOpen = runtime.controller.getSnapshot().state.isOpen;
       if (open) {
-        releaseHiddenFocusBeforeOpen(runtime.options);
+        releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
       }
       runtime.controller.setOpen(open);
       if (previousOpen !== open) {
@@ -29269,7 +29317,7 @@ function buildVanillaController(id) {
         return createDrawer({ id, open }).getSnapshot();
       }
       if (open) {
-        releaseHiddenFocusBeforeOpen(runtime.options);
+        releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
       }
       const previousOpen = runtime.controller.getSnapshot().state.isOpen;
       const snapshot = runtime.controller.setOpen(open);
@@ -29342,7 +29390,7 @@ function createDrawer(options = {}) {
     }
   }
   if (nextOptions.open && !previousOpen) {
-    releaseHiddenFocusBeforeOpen(nextOptions);
+    releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
   }
   renderVanillaDrawer(id);
   if (nextOptions.parentId && nextOptions.open) {

package/dist/react/index.js

@@ -1531,6 +1531,27 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     const drawerHeightRef = React__namespace.default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
     const drawerWidthRef = React__namespace.default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
     const initialDrawerHeight = React__namespace.default.useRef(0);
+    const releaseHiddenFocusBeforeOpen = React__namespace.default.useCallback(()=>{
+        var _drawerRef_current;
+        if (!modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return;
+        }
+        const activeElementNode = activeElement;
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
+            return;
+        }
+        if (typeof activeElementNode.blur !== 'function') {
+            return;
+        }
+        activeElementNode.blur();
+    }, [
+        autoFocus,
+        modal
+    ]);
     const onSnapPointChange = React__namespace.default.useCallback((activeSnapPointIndex)=>{
         // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
         if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
@@ -1582,26 +1603,13 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         autoFocus
     });
     useSafeLayoutEffect$1(()=>{
-        var _drawerRef_current;
-        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
-            return;
-        }
-        const activeElement = document.activeElement;
-        if (!activeElement || activeElement === document.body) {
-            return;
-        }
-        const activeElementNode = activeElement;
-        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
+        if (!isOpen) {
             return;
         }
-        if (typeof activeElementNode.blur !== 'function') {
-            return;
-        }
-        activeElementNode.blur();
+        releaseHiddenFocusBeforeOpen();
     }, [
-        autoFocus,
         isOpen,
-        modal
+        releaseHiddenFocusBeforeOpen
     ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
@@ -2010,6 +2018,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         onOpenChange: (open)=>{
             if (!dismissible && !open) return;
             if (open) {
+                releaseHiddenFocusBeforeOpen();
                 setHasBeenOpened(true);
             } else {
                 closeDrawer(true);
@@ -2604,7 +2613,7 @@ function openAncestorChain(parentId) {
         openAncestorChain(nextParentId);
     }
     if (!parentRuntime.controller.getSnapshot().state.isOpen) {
-        releaseHiddenFocusBeforeOpen(parentRuntime.options);
+        releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
         parentRuntime.controller.setOpen(true);
         notifyOpenStateChange(parentRuntime, true);
         renderVanillaDrawer(parentRuntime.id);
@@ -2619,18 +2628,36 @@ function cleanupRuntimeTrigger(runtime) {
 }
 function bindTriggerElement(runtime) {
     cleanupRuntimeTrigger(runtime);
+    const drawerElement = getRuntimeDrawerElement(runtime);
+    const builtInTriggerElement = getRuntimeTriggerElement(runtime);
+    const cleanups = [];
+    if (builtInTriggerElement) {
+        const handleBuiltInTriggerClick = ()=>{
+            releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
+        };
+        builtInTriggerElement.addEventListener('click', handleBuiltInTriggerClick);
+        cleanups.push(()=>{
+            builtInTriggerElement.removeEventListener('click', handleBuiltInTriggerClick);
+        });
+    }
     if (!runtime.options.triggerElement) {
+        runtime.cleanupTriggerElement = cleanups.length ? ()=>{
+            cleanups.forEach((cleanup)=>cleanup());
+        } : null;
         return;
     }
     const triggerElement = runtime.options.triggerElement;
     const handleClick = ()=>{
-        releaseHiddenFocusBeforeOpen(runtime.options);
+        releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
         runtime.controller.setOpen(true);
         renderVanillaDrawer(runtime.id);
     };
     triggerElement.addEventListener('click', handleClick);
-    runtime.cleanupTriggerElement = ()=>{
+    cleanups.push(()=>{
         triggerElement.removeEventListener('click', handleClick);
+    });
+    runtime.cleanupTriggerElement = ()=>{
+        cleanups.forEach((cleanup)=>cleanup());
     };
 }
 function notifyOpenStateChange(runtime, open) {
@@ -2660,15 +2687,32 @@ function notifyOpenStateChange(runtime, open) {
 function canUseDOM() {
     return typeof window !== 'undefined' && typeof document !== 'undefined';
 }
-function releaseHiddenFocusBeforeOpen(options) {
+function isElementInsideDrawer(element) {
+    let currentElement = element;
+    while(currentElement){
+        if (currentElement instanceof HTMLElement && currentElement.hasAttribute('data-drawer')) {
+            return true;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return false;
+}
+function releaseHiddenFocusBeforeOpen(options, drawerElement) {
     if (!canUseDOM() || options.modal === false || options.autoFocus) {
         return;
     }
     const activeElement = document.activeElement;
-    if (!activeElement || activeElement === document.body || typeof activeElement.blur !== 'function') {
+    if (!activeElement || activeElement === document.body) {
+        return;
+    }
+    const activeElementNode = activeElement;
+    if ((drawerElement == null ? void 0 : drawerElement.contains(activeElementNode)) || isElementInsideDrawer(activeElementNode)) {
         return;
     }
-    activeElement.blur();
+    if (typeof activeElementNode.blur !== 'function') {
+        return;
+    }
+    activeElementNode.blur();
 }
 function getRuntimeDrawerElement(runtime) {
     if (!runtime.element) {
@@ -2676,6 +2720,12 @@ function getRuntimeDrawerElement(runtime) {
     }
     return runtime.element.querySelector('[data-drawer]');
 }
+function getRuntimeTriggerElement(runtime) {
+    if (!runtime.element) {
+        return null;
+    }
+    return runtime.element.querySelector('[data-drawer-vanilla-trigger]');
+}
 function getViewportSizeForDirection(direction) {
     if (!canUseDOM()) {
         return 0;
@@ -2721,7 +2771,7 @@ function renderVanillaDrawer(id) {
         onOpenChange: (open)=>{
             const previousOpen = runtime.controller.getSnapshot().state.isOpen;
             if (open) {
-                releaseHiddenFocusBeforeOpen(runtime.options);
+                releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
             }
             runtime.controller.setOpen(open);
             if (previousOpen !== open) {
@@ -2776,7 +2826,7 @@ function buildVanillaController(id) {
                 }).getSnapshot();
             }
             if (open) {
-                releaseHiddenFocusBeforeOpen(runtime.options);
+                releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
             }
             const previousOpen = runtime.controller.getSnapshot().state.isOpen;
             const snapshot = runtime.controller.setOpen(open);
@@ -2872,7 +2922,7 @@ function createDrawer(options = {}) {
         }
     }
     if (nextOptions.open && !previousOpen) {
-        releaseHiddenFocusBeforeOpen(nextOptions);
+        releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
     }
     renderVanillaDrawer(id);
     if (nextOptions.parentId && nextOptions.open) {