@samline/drawer 2.0.0 → 2.0.2

package/README.md

@@ -24,8 +24,7 @@ const drawer = createDrawer({
   dismissible: true,
   triggerText: 'Open drawer',
   showHandle: true,
-  title: 'Drawer title',
-  description: 'Drawer description',
+  ariaLabel: 'Filters drawer',
   content: 'Drawer content'
 })
 

package/dist/browser/{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/{svelte/components-client-BHUFVfXB.js → browser/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/browser/index.cjs

@@ -27869,6 +27869,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,
@@ -28049,6 +28074,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;
   }
@@ -28066,22 +28104,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,
@@ -28710,6 +28738,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 = {
@@ -28738,7 +28777,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;
@@ -28761,7 +28800,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,
@@ -28776,8 +28815,13 @@ function VanillaDrawerRenderer({
     triggerText,
     showHandle,
     handleClassName,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     title,
+    titleVisuallyHidden,
     description,
+    descriptionVisuallyHidden,
     content,
     overlayClassName,
     contentClassName,
@@ -28785,7 +28829,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/browser/index.js

@@ -27869,6 +27869,31 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   }
 
   // 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,
@@ -28049,6 +28074,19 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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;
     }
@@ -28066,22 +28104,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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,
@@ -28710,6 +28738,17 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   };
 
   // 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 = {
@@ -28738,7 +28777,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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;
@@ -28761,7 +28800,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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,
@@ -28776,8 +28815,13 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       triggerText,
       showHandle,
       handleClassName,
+      ariaLabel,
+      ariaLabelledBy,
+      ariaDescribedBy,
       title,
+      titleVisuallyHidden,
       description,
+      descriptionVisuallyHidden,
       content,
       overlayClassName,
       contentClassName,
@@ -28785,7 +28829,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     } = 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/browser/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