@samline/drawer 2.0.0 → 2.0.2

package/dist/{svelte/components-client-BC8MrVsa.mjs → components-client-CZSt5H60.mjs}

@@ -1311,6 +1311,30 @@ function getNextHandleState({ isDragging, preventCycle, shouldCancelInteraction,
     };
 }
 
+function isElementLike(target) {
+    const element = target;
+    return Boolean(element && typeof element.getAttribute === 'function' && typeof element.hasAttribute === 'function' && typeof element.closest === 'function');
+}
+function getDragTargetMetadata(target) {
+    var _ref;
+    const targetElement = isElementLike(target) ? target : null;
+    const ancestors = [];
+    let element = targetElement;
+    while(element){
+        ancestors.push({
+            scrollHeight: element.scrollHeight,
+            clientHeight: element.clientHeight,
+            scrollTop: element.scrollTop,
+            role: element.getAttribute('role')
+        });
+        element = element.parentElement;
+    }
+    return {
+        targetTagName: (_ref = targetElement == null ? void 0 : targetElement.tagName) != null ? _ref : '',
+        hasNoDragAttribute: (targetElement == null ? void 0 : targetElement.hasAttribute('data-drawer-no-drag')) || Boolean(targetElement == null ? void 0 : targetElement.closest('[data-drawer-no-drag]')),
+        ancestors
+    };
+}
 function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeSinceOpenMs, swipeAmount, hasHighlightedText, timeSinceLastPreventedMs, scrollLockTimeout, isDraggingInDirection, ancestors }) {
     if (targetTagName === 'SELECT' || hasNoDragAttribute) {
         return {
@@ -1473,6 +1497,24 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         noBodyStyles,
         autoFocus
     });
+    React__default.useEffect(()=>{
+        var _drawerRef_current;
+        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!(activeElement instanceof HTMLElement)) {
+            return;
+        }
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
+            return;
+        }
+        activeElement.blur();
+    }, [
+        autoFocus,
+        isOpen,
+        modal
+    ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
     }
@@ -1496,24 +1538,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     }
     function shouldDrag(el, isDraggingInDirection) {
         var _window_getSelection;
-        let element = el;
         const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
         const date = new Date();
-        const ancestors = [];
-        // Keep climbing up the DOM tree as long as there's a parent
-        while(element){
-            ancestors.push({
-                scrollHeight: element.scrollHeight,
-                clientHeight: element.clientHeight,
-                scrollTop: element.scrollTop,
-                role: element.getAttribute('role')
-            });
-            // Move up to the parent element
-            element = element.parentNode;
-        }
+        const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
         const result = getDragPermission({
-            targetTagName: el.tagName,
-            hasNoDragAttribute: el.hasAttribute('data-drawer-no-drag') || Boolean(el.closest('[data-drawer-no-drag]')),
+            targetTagName,
+            hasNoDragAttribute,
             direction,
             timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
             swipeAmount,

package/dist/{browser/components-client-BHUFVfXB.js → components-client-DXeaMmfk.js}

@@ -1331,6 +1331,30 @@ function getNextHandleState({ isDragging, preventCycle, shouldCancelInteraction,
     };
 }
 
+function isElementLike(target) {
+    const element = target;
+    return Boolean(element && typeof element.getAttribute === 'function' && typeof element.hasAttribute === 'function' && typeof element.closest === 'function');
+}
+function getDragTargetMetadata(target) {
+    var _ref;
+    const targetElement = isElementLike(target) ? target : null;
+    const ancestors = [];
+    let element = targetElement;
+    while(element){
+        ancestors.push({
+            scrollHeight: element.scrollHeight,
+            clientHeight: element.clientHeight,
+            scrollTop: element.scrollTop,
+            role: element.getAttribute('role')
+        });
+        element = element.parentElement;
+    }
+    return {
+        targetTagName: (_ref = targetElement == null ? void 0 : targetElement.tagName) != null ? _ref : '',
+        hasNoDragAttribute: (targetElement == null ? void 0 : targetElement.hasAttribute('data-drawer-no-drag')) || Boolean(targetElement == null ? void 0 : targetElement.closest('[data-drawer-no-drag]')),
+        ancestors
+    };
+}
 function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeSinceOpenMs, swipeAmount, hasHighlightedText, timeSinceLastPreventedMs, scrollLockTimeout, isDraggingInDirection, ancestors }) {
     if (targetTagName === 'SELECT' || hasNoDragAttribute) {
         return {
@@ -1493,6 +1517,24 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         noBodyStyles,
         autoFocus
     });
+    React__namespace.default.useEffect(()=>{
+        var _drawerRef_current;
+        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!(activeElement instanceof HTMLElement)) {
+            return;
+        }
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
+            return;
+        }
+        activeElement.blur();
+    }, [
+        autoFocus,
+        isOpen,
+        modal
+    ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
     }
@@ -1516,24 +1558,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     }
     function shouldDrag(el, isDraggingInDirection) {
         var _window_getSelection;
-        let element = el;
         const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
         const date = new Date();
-        const ancestors = [];
-        // Keep climbing up the DOM tree as long as there's a parent
-        while(element){
-            ancestors.push({
-                scrollHeight: element.scrollHeight,
-                clientHeight: element.clientHeight,
-                scrollTop: element.scrollTop,
-                role: element.getAttribute('role')
-            });
-            // Move up to the parent element
-            element = element.parentNode;
-        }
+        const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
         const result = getDragPermission({
-            targetTagName: el.tagName,
-            hasNoDragAttribute: el.hasAttribute('data-drawer-no-drag') || Boolean(el.closest('[data-drawer-no-drag]')),
+            targetTagName,
+            hasNoDragAttribute,
             direction,
             timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
             swipeAmount,

package/dist/index.d.mts

@@ -8,8 +8,13 @@ interface VanillaDrawerOptions extends CommonDrawerOptions {
     triggerText?: string;
     showHandle?: boolean;
     handleClassName?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
     title?: VanillaRenderable;
+    titleVisuallyHidden?: boolean;
     description?: VanillaRenderable;
+    descriptionVisuallyHidden?: boolean;
     content?: VanillaRenderable;
     overlayClassName?: string;
     contentClassName?: string;

package/dist/index.d.ts

@@ -8,8 +8,13 @@ interface VanillaDrawerOptions extends CommonDrawerOptions {
     triggerText?: string;
     showHandle?: boolean;
     handleClassName?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
     title?: VanillaRenderable;
+    titleVisuallyHidden?: boolean;
     description?: VanillaRenderable;
+    descriptionVisuallyHidden?: boolean;
     content?: VanillaRenderable;
     overlayClassName?: string;
     contentClassName?: string;

package/dist/index.js

@@ -27868,6 +27868,31 @@ function getNextHandleState({
 }
 
 // src/runtime/drag-policy.ts
+function isElementLike(target) {
+  const element = target;
+  return Boolean(
+    element && typeof element.getAttribute === "function" && typeof element.hasAttribute === "function" && typeof element.closest === "function"
+  );
+}
+function getDragTargetMetadata(target) {
+  const targetElement = isElementLike(target) ? target : null;
+  const ancestors = [];
+  let element = targetElement;
+  while (element) {
+    ancestors.push({
+      scrollHeight: element.scrollHeight,
+      clientHeight: element.clientHeight,
+      scrollTop: element.scrollTop,
+      role: element.getAttribute("role")
+    });
+    element = element.parentElement;
+  }
+  return {
+    targetTagName: targetElement?.tagName ?? "",
+    hasNoDragAttribute: targetElement?.hasAttribute("data-drawer-no-drag") || Boolean(targetElement?.closest("[data-drawer-no-drag]")),
+    ancestors
+  };
+}
 function getDragPermission({
   targetTagName,
   hasNoDragAttribute,
@@ -28048,6 +28073,19 @@ function Root2({
     noBodyStyles,
     autoFocus
   });
+  import_react9.default.useEffect(() => {
+    if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (!(activeElement instanceof HTMLElement)) {
+      return;
+    }
+    if (drawerRef.current?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
+      return;
+    }
+    activeElement.blur();
+  }, [autoFocus, isOpen, modal]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -28065,22 +28103,12 @@ function Root2({
     pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
   }
   function shouldDrag(el, isDraggingInDirection) {
-    let element = el;
     const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
     const date = /* @__PURE__ */ new Date();
-    const ancestors = [];
-    while (element) {
-      ancestors.push({
-        scrollHeight: element.scrollHeight,
-        clientHeight: element.clientHeight,
-        scrollTop: element.scrollTop,
-        role: element.getAttribute("role")
-      });
-      element = element.parentNode;
-    }
+    const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
     const result = getDragPermission({
-      targetTagName: el.tagName,
-      hasNoDragAttribute: el.hasAttribute("data-drawer-no-drag") || Boolean(el.closest("[data-drawer-no-drag]")),
+      targetTagName,
+      hasNoDragAttribute,
       direction,
       timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
       swipeAmount,
@@ -28709,6 +28737,17 @@ var Drawer = {
 };
 
 // src/vanilla/render.tsx
+var VISUALLY_HIDDEN_STYLE = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28737,7 +28776,7 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value }) {
+function VanillaNode({ value, dataAttribute }) {
   const ref = import_react10.default.useRef(null);
   import_react10.default.useEffect(() => {
     const element = ref.current;
@@ -28760,7 +28799,7 @@ function VanillaNode({ value }) {
   if (value == null) {
     return null;
   }
-  return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
+  return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
 function VanillaDrawerRenderer({
   options,
@@ -28775,8 +28814,13 @@ function VanillaDrawerRenderer({
     triggerText,
     showHandle,
     handleClassName,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     title,
+    titleVisuallyHidden,
     description,
+    descriptionVisuallyHidden,
     content,
     overlayClassName,
     contentClassName,
@@ -28784,7 +28828,18 @@ function VanillaDrawerRenderer({
   } = options;
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
-  return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
+  const shouldRenderVanillaContent = title != null || description != null || content != null;
+  return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(
+    Drawer.Content,
+    {
+      className: contentClassName,
+      "aria-label": title == null ? ariaLabel : void 0,
+      "aria-labelledby": title == null ? ariaLabelledBy : void 0,
+      "aria-describedby": description == null ? ariaDescribedBy : void 0
+    },
+    shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : void 0 }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : void 0 }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content, dataAttribute: "data-drawer-vanilla-body" })) : null
+  )));
 }
 
 // src/vanilla/host.tsx

package/dist/index.mjs

@@ -27843,6 +27843,31 @@ function getNextHandleState({
 }
 
 // src/runtime/drag-policy.ts
+function isElementLike(target) {
+  const element = target;
+  return Boolean(
+    element && typeof element.getAttribute === "function" && typeof element.hasAttribute === "function" && typeof element.closest === "function"
+  );
+}
+function getDragTargetMetadata(target) {
+  const targetElement = isElementLike(target) ? target : null;
+  const ancestors = [];
+  let element = targetElement;
+  while (element) {
+    ancestors.push({
+      scrollHeight: element.scrollHeight,
+      clientHeight: element.clientHeight,
+      scrollTop: element.scrollTop,
+      role: element.getAttribute("role")
+    });
+    element = element.parentElement;
+  }
+  return {
+    targetTagName: targetElement?.tagName ?? "",
+    hasNoDragAttribute: targetElement?.hasAttribute("data-drawer-no-drag") || Boolean(targetElement?.closest("[data-drawer-no-drag]")),
+    ancestors
+  };
+}
 function getDragPermission({
   targetTagName,
   hasNoDragAttribute,
@@ -28023,6 +28048,19 @@ function Root2({
     noBodyStyles,
     autoFocus
   });
+  import_react9.default.useEffect(() => {
+    if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (!(activeElement instanceof HTMLElement)) {
+      return;
+    }
+    if (drawerRef.current?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
+      return;
+    }
+    activeElement.blur();
+  }, [autoFocus, isOpen, modal]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -28040,22 +28078,12 @@ function Root2({
     pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
   }
   function shouldDrag(el, isDraggingInDirection) {
-    let element = el;
     const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
     const date = /* @__PURE__ */ new Date();
-    const ancestors = [];
-    while (element) {
-      ancestors.push({
-        scrollHeight: element.scrollHeight,
-        clientHeight: element.clientHeight,
-        scrollTop: element.scrollTop,
-        role: element.getAttribute("role")
-      });
-      element = element.parentNode;
-    }
+    const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
     const result = getDragPermission({
-      targetTagName: el.tagName,
-      hasNoDragAttribute: el.hasAttribute("data-drawer-no-drag") || Boolean(el.closest("[data-drawer-no-drag]")),
+      targetTagName,
+      hasNoDragAttribute,
       direction,
       timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
       swipeAmount,
@@ -28684,6 +28712,17 @@ var Drawer = {
 };
 
 // src/vanilla/render.tsx
+var VISUALLY_HIDDEN_STYLE = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28712,7 +28751,7 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value }) {
+function VanillaNode({ value, dataAttribute }) {
   const ref = import_react10.default.useRef(null);
   import_react10.default.useEffect(() => {
     const element = ref.current;
@@ -28735,7 +28774,7 @@ function VanillaNode({ value }) {
   if (value == null) {
     return null;
   }
-  return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
+  return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
 function VanillaDrawerRenderer({
   options,
@@ -28750,8 +28789,13 @@ function VanillaDrawerRenderer({
     triggerText,
     showHandle,
     handleClassName,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     title,
+    titleVisuallyHidden,
     description,
+    descriptionVisuallyHidden,
     content,
     overlayClassName,
     contentClassName,
@@ -28759,7 +28803,18 @@ function VanillaDrawerRenderer({
   } = options;
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
-  return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
+  const shouldRenderVanillaContent = title != null || description != null || content != null;
+  return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(
+    Drawer.Content,
+    {
+      className: contentClassName,
+      "aria-label": title == null ? ariaLabel : void 0,
+      "aria-labelledby": title == null ? ariaLabelledBy : void 0,
+      "aria-describedby": description == null ? ariaDescribedBy : void 0
+    },
+    shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : void 0 }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : void 0 }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content, dataAttribute: "data-drawer-vanilla-body" })) : null
+  )));
 }
 
 // src/vanilla/host.tsx

package/dist/react/index.js

@@ -1334,6 +1334,30 @@ function getNextHandleState({ isDragging, preventCycle, shouldCancelInteraction,
     };
 }
 
+function isElementLike(target) {
+    const element = target;
+    return Boolean(element && typeof element.getAttribute === 'function' && typeof element.hasAttribute === 'function' && typeof element.closest === 'function');
+}
+function getDragTargetMetadata(target) {
+    var _ref;
+    const targetElement = isElementLike(target) ? target : null;
+    const ancestors = [];
+    let element = targetElement;
+    while(element){
+        ancestors.push({
+            scrollHeight: element.scrollHeight,
+            clientHeight: element.clientHeight,
+            scrollTop: element.scrollTop,
+            role: element.getAttribute('role')
+        });
+        element = element.parentElement;
+    }
+    return {
+        targetTagName: (_ref = targetElement == null ? void 0 : targetElement.tagName) != null ? _ref : '',
+        hasNoDragAttribute: (targetElement == null ? void 0 : targetElement.hasAttribute('data-drawer-no-drag')) || Boolean(targetElement == null ? void 0 : targetElement.closest('[data-drawer-no-drag]')),
+        ancestors
+    };
+}
 function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeSinceOpenMs, swipeAmount, hasHighlightedText, timeSinceLastPreventedMs, scrollLockTimeout, isDraggingInDirection, ancestors }) {
     if (targetTagName === 'SELECT' || hasNoDragAttribute) {
         return {
@@ -1496,6 +1520,24 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         noBodyStyles,
         autoFocus
     });
+    React__namespace.default.useEffect(()=>{
+        var _drawerRef_current;
+        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!(activeElement instanceof HTMLElement)) {
+            return;
+        }
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
+            return;
+        }
+        activeElement.blur();
+    }, [
+        autoFocus,
+        isOpen,
+        modal
+    ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
     }
@@ -1519,24 +1561,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     }
     function shouldDrag(el, isDraggingInDirection) {
         var _window_getSelection;
-        let element = el;
         const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
         const date = new Date();
-        const ancestors = [];
-        // Keep climbing up the DOM tree as long as there's a parent
-        while(element){
-            ancestors.push({
-                scrollHeight: element.scrollHeight,
-                clientHeight: element.clientHeight,
-                scrollTop: element.scrollTop,
-                role: element.getAttribute('role')
-            });
-            // Move up to the parent element
-            element = element.parentNode;
-        }
+        const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
         const result = getDragPermission({
-            targetTagName: el.tagName,
-            hasNoDragAttribute: el.hasAttribute('data-drawer-no-drag') || Boolean(el.closest('[data-drawer-no-drag]')),
+            targetTagName,
+            hasNoDragAttribute,
             direction,
             timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
             swipeAmount,
@@ -2179,6 +2209,17 @@ function getParentNestedVisualState({ direction, viewportSize, hasOpenChild, per
     };
 }
 
+const VISUALLY_HIDDEN_STYLE = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    border: 0
+};
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
     const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
     const baseProps = {
@@ -2208,7 +2249,7 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
         fadeFromIndex: undefined
     };
 }
-function VanillaNode({ value }) {
+function VanillaNode({ value, dataAttribute }) {
     const ref = React__namespace.default.useRef(null);
     React__namespace.default.useEffect(()=>{
         const element = ref.current;
@@ -2234,14 +2275,17 @@ function VanillaNode({ value }) {
         return null;
     }
     return /*#__PURE__*/ React__namespace.default.createElement("div", {
-        "data-drawer-vanilla-node": "",
+        ...dataAttribute ? {
+            [dataAttribute]: ''
+        } : {},
         ref: ref
     });
 }
 function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onReleaseChange }) {
-    const { mountElement: _mountElement, triggerElement: _triggerElement, triggerText, showHandle, handleClassName, title, description, content, overlayClassName, contentClassName, ...drawerOptions } = options;
+    const { mountElement: _mountElement, triggerElement: _triggerElement, triggerText, showHandle, handleClassName, ariaLabel, ariaLabelledBy, ariaDescribedBy, title, titleVisuallyHidden, description, descriptionVisuallyHidden, content, overlayClassName, contentClassName, ...drawerOptions } = options;
     const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
     const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
+    const shouldRenderVanillaContent = title != null || description != null || content != null;
     return /*#__PURE__*/ React__namespace.default.createElement(Drawer.Root, rootProps, triggerText ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Trigger, {
         asChild: true
     }, /*#__PURE__*/ React__namespace.default.createElement("button", {
@@ -2250,16 +2294,26 @@ function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onRe
     }, triggerText)) : null, /*#__PURE__*/ React__namespace.default.createElement(Drawer.Portal, null, /*#__PURE__*/ React__namespace.default.createElement(Drawer.Overlay, {
         className: overlayClassName
     }), /*#__PURE__*/ React__namespace.default.createElement(Drawer.Content, {
-        className: contentClassName
+        className: contentClassName,
+        "aria-label": title == null ? ariaLabel : undefined,
+        "aria-labelledby": title == null ? ariaLabelledBy : undefined,
+        "aria-describedby": description == null ? ariaDescribedBy : undefined
     }, shouldRenderHandle ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Handle, {
         className: handleClassName
-    }) : null, title != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, null, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
+    }) : null, shouldRenderVanillaContent ? /*#__PURE__*/ React__namespace.default.createElement("div", {
+        "data-drawer-vanilla-node": ""
+    }, title != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, {
+        style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
+    }, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
         value: title
-    })) : null, description != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Description, null, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
+    })) : null, description != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Description, {
+        style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
+    }, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
         value: description
     })) : null, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
-        value: content
-    }))));
+        value: content,
+        dataAttribute: "data-drawer-vanilla-body"
+    })) : null)));
 }
 
 function canUseDOM$1() {