@samline/drawer 2.0.0 → 2.0.2

package/dist/{components-client-BHUFVfXB.js → vue/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/vue/{components-client-rq_o2zwK.mjs → components-client-DZfql3-W.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/vue/index.d.mts

@@ -38,8 +38,13 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
     triggerText: StringConstructor;
     showHandle: BooleanConstructor;
     handleClassName: StringConstructor;
+    ariaLabel: StringConstructor;
+    ariaLabelledBy: StringConstructor;
+    ariaDescribedBy: StringConstructor;
     title: PropType<VanillaRenderable>;
+    titleVisuallyHidden: BooleanConstructor;
     description: PropType<VanillaRenderable>;
+    descriptionVisuallyHidden: BooleanConstructor;
     content: PropType<VanillaRenderable>;
     overlayClassName: StringConstructor;
     contentClassName: StringConstructor;
@@ -79,8 +84,13 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
     triggerText: StringConstructor;
     showHandle: BooleanConstructor;
     handleClassName: StringConstructor;
+    ariaLabel: StringConstructor;
+    ariaLabelledBy: StringConstructor;
+    ariaDescribedBy: StringConstructor;
     title: PropType<VanillaRenderable>;
+    titleVisuallyHidden: BooleanConstructor;
     description: PropType<VanillaRenderable>;
+    descriptionVisuallyHidden: BooleanConstructor;
     content: PropType<VanillaRenderable>;
     overlayClassName: StringConstructor;
     contentClassName: StringConstructor;
@@ -101,6 +111,8 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
     noBodyStyles: boolean;
     autoFocus: boolean;
     showHandle: boolean;
+    titleVisuallyHidden: boolean;
+    descriptionVisuallyHidden: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const DrawerPlugin: Plugin;
 

package/dist/vue/index.d.ts

@@ -38,8 +38,13 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
     triggerText: StringConstructor;
     showHandle: BooleanConstructor;
     handleClassName: StringConstructor;
+    ariaLabel: StringConstructor;
+    ariaLabelledBy: StringConstructor;
+    ariaDescribedBy: StringConstructor;
     title: PropType<VanillaRenderable>;
+    titleVisuallyHidden: BooleanConstructor;
     description: PropType<VanillaRenderable>;
+    descriptionVisuallyHidden: BooleanConstructor;
     content: PropType<VanillaRenderable>;
     overlayClassName: StringConstructor;
     contentClassName: StringConstructor;
@@ -79,8 +84,13 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
     triggerText: StringConstructor;
     showHandle: BooleanConstructor;
     handleClassName: StringConstructor;
+    ariaLabel: StringConstructor;
+    ariaLabelledBy: StringConstructor;
+    ariaDescribedBy: StringConstructor;
     title: PropType<VanillaRenderable>;
+    titleVisuallyHidden: BooleanConstructor;
     description: PropType<VanillaRenderable>;
+    descriptionVisuallyHidden: BooleanConstructor;
     content: PropType<VanillaRenderable>;
     overlayClassName: StringConstructor;
     contentClassName: StringConstructor;
@@ -101,6 +111,8 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
     noBodyStyles: boolean;
     autoFocus: boolean;
     showHandle: boolean;
+    titleVisuallyHidden: boolean;
+    descriptionVisuallyHidden: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const DrawerPlugin: Plugin;
 

package/dist/vue/index.js

@@ -27871,6 +27871,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,
@@ -28051,6 +28076,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;
   }
@@ -28068,22 +28106,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,
@@ -28712,6 +28740,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 = {
@@ -28740,7 +28779,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;
@@ -28763,7 +28802,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,
@@ -28778,8 +28817,13 @@ function VanillaDrawerRenderer({
     triggerText,
     showHandle,
     handleClassName,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     title,
+    titleVisuallyHidden,
     description,
+    descriptionVisuallyHidden,
     content,
     overlayClassName,
     contentClassName,
@@ -28787,7 +28831,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
@@ -29227,8 +29282,13 @@ var drawerProps = {
   triggerText: String,
   showHandle: Boolean,
   handleClassName: String,
+  ariaLabel: String,
+  ariaLabelledBy: String,
+  ariaDescribedBy: String,
   title: [String, Number, Object, Function],
+  titleVisuallyHidden: Boolean,
   description: [String, Number, Object, Function],
+  descriptionVisuallyHidden: Boolean,
   content: [String, Number, Object, Function],
   overlayClassName: String,
   contentClassName: String
@@ -29289,8 +29349,13 @@ var DrawerRoot = (0, import_vue.defineComponent)({
         triggerText: props.triggerText,
         showHandle: props.showHandle,
         handleClassName: props.handleClassName,
+        ariaLabel: props.ariaLabel,
+        ariaLabelledBy: props.ariaLabelledBy,
+        ariaDescribedBy: props.ariaDescribedBy,
         title: props.title,
+        titleVisuallyHidden: props.titleVisuallyHidden,
         description: props.description,
+        descriptionVisuallyHidden: props.descriptionVisuallyHidden,
         content: props.content,
         overlayClassName: props.overlayClassName,
         contentClassName: props.contentClassName

package/dist/vue/index.mjs

@@ -27846,6 +27846,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,
@@ -28026,6 +28051,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;
   }
@@ -28043,22 +28081,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,
@@ -28687,6 +28715,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 = {
@@ -28715,7 +28754,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;
@@ -28738,7 +28777,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,
@@ -28753,8 +28792,13 @@ function VanillaDrawerRenderer({
     triggerText,
     showHandle,
     handleClassName,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     title,
+    titleVisuallyHidden,
     description,
+    descriptionVisuallyHidden,
     content,
     overlayClassName,
     contentClassName,
@@ -28762,7 +28806,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
@@ -29202,8 +29257,13 @@ var drawerProps = {
   triggerText: String,
   showHandle: Boolean,
   handleClassName: String,
+  ariaLabel: String,
+  ariaLabelledBy: String,
+  ariaDescribedBy: String,
   title: [String, Number, Object, Function],
+  titleVisuallyHidden: Boolean,
   description: [String, Number, Object, Function],
+  descriptionVisuallyHidden: Boolean,
   content: [String, Number, Object, Function],
   overlayClassName: String,
   contentClassName: String
@@ -29264,8 +29324,13 @@ var DrawerRoot = defineComponent({
         triggerText: props.triggerText,
         showHandle: props.showHandle,
         handleClassName: props.handleClassName,
+        ariaLabel: props.ariaLabel,
+        ariaLabelledBy: props.ariaLabelledBy,
+        ariaDescribedBy: props.ariaDescribedBy,
         title: props.title,
+        titleVisuallyHidden: props.titleVisuallyHidden,
         description: props.description,
+        descriptionVisuallyHidden: props.descriptionVisuallyHidden,
         content: props.content,
         overlayClassName: props.overlayClassName,
         contentClassName: props.contentClassName

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samline/drawer",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A universal drawer package for React, Vue, Svelte, vanilla JS, and browser usage.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",