@samline/drawer 2.0.2 → 2.0.4

package/dist/browser/index.cjs

@@ -28749,6 +28749,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28777,11 +28778,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value, dataAttribute }) {
+function VanillaNode({
+  value,
+  dataAttribute
+}) {
   const ref = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     const element = ref.current;
-    if (!element) return;
+    if (!element) {
+      return;
+    }
     element.innerHTML = "";
     if (value instanceof HTMLElement) {
       element.appendChild(value);
@@ -28802,6 +28808,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+  if (!root || !elementId) {
+    return void 0;
+  }
+  const elements = Array.from(root.querySelectorAll("[id]"));
+  for (const element of elements) {
+    if (element instanceof HTMLElement && element.id === elementId) {
+      const value = element.textContent?.trim();
+      return value ? value : void 0;
+    }
+  }
+  return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+}
 function VanillaDrawerRenderer({
   options,
   open,
@@ -28830,16 +28849,43 @@ function VanillaDrawerRenderer({
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
   const shouldRenderVanillaContent = title != null || description != null || content != null;
+  const resolvedContent = import_react10.default.useMemo(() => {
+    if (content instanceof HTMLElement) {
+      return {
+        value: content,
+        proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+        proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+      };
+    }
+    if (typeof content === "function") {
+      const result = content();
+      return {
+        value: result,
+        proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+        proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+      };
+    }
+    return {
+      value: content,
+      proxyTitle: void 0,
+      proxyDescription: void 0
+    };
+  }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+  const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+  const proxyDescription = resolvedContent.proxyDescription;
+  const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+  const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+  const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
   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
+      "aria-label": contentAriaLabel,
+      "aria-labelledby": contentAriaLabelledBy,
+      "aria-describedby": contentAriaDescribedBy
     },
     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
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
   )));
 }
 

package/dist/browser/index.js

@@ -28749,6 +28749,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     whiteSpace: "nowrap",
     border: 0
   };
+  var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
   function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
     const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
     const baseProps = {
@@ -28777,11 +28778,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       fadeFromIndex: void 0
     };
   }
-  function VanillaNode({ value, dataAttribute }) {
+  function VanillaNode({
+    value,
+    dataAttribute
+  }) {
     const ref = import_react10.default.useRef(null);
-    import_react10.default.useEffect(() => {
+    useSafeLayoutEffect(() => {
       const element = ref.current;
-      if (!element) return;
+      if (!element) {
+        return;
+      }
       element.innerHTML = "";
       if (value instanceof HTMLElement) {
         element.appendChild(value);
@@ -28802,6 +28808,19 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     }
     return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
   }
+  function readAccessibleTextFromRoot(root, elementId) {
+    if (!root || !elementId) {
+      return void 0;
+    }
+    const elements = Array.from(root.querySelectorAll("[id]"));
+    for (const element of elements) {
+      if (element instanceof HTMLElement && element.id === elementId) {
+        const value = element.textContent?.trim();
+        return value ? value : void 0;
+      }
+    }
+    return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+  }
   function VanillaDrawerRenderer({
     options,
     open,
@@ -28830,16 +28849,43 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
     const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
     const shouldRenderVanillaContent = title != null || description != null || content != null;
+    const resolvedContent = import_react10.default.useMemo(() => {
+      if (content instanceof HTMLElement) {
+        return {
+          value: content,
+          proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+          proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+        };
+      }
+      if (typeof content === "function") {
+        const result = content();
+        return {
+          value: result,
+          proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+          proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+        };
+      }
+      return {
+        value: content,
+        proxyTitle: void 0,
+        proxyDescription: void 0
+      };
+    }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+    const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+    const proxyDescription = resolvedContent.proxyDescription;
+    const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+    const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+    const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
     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
+        "aria-label": contentAriaLabel,
+        "aria-labelledby": contentAriaLabelledBy,
+        "aria-describedby": contentAriaDescribedBy
       },
       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
+      shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
     )));
   }
 

package/dist/browser/index.mjs

@@ -28723,6 +28723,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28751,11 +28752,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value, dataAttribute }) {
+function VanillaNode({
+  value,
+  dataAttribute
+}) {
   const ref = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     const element = ref.current;
-    if (!element) return;
+    if (!element) {
+      return;
+    }
     element.innerHTML = "";
     if (value instanceof HTMLElement) {
       element.appendChild(value);
@@ -28776,6 +28782,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+  if (!root || !elementId) {
+    return void 0;
+  }
+  const elements = Array.from(root.querySelectorAll("[id]"));
+  for (const element of elements) {
+    if (element instanceof HTMLElement && element.id === elementId) {
+      const value = element.textContent?.trim();
+      return value ? value : void 0;
+    }
+  }
+  return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+}
 function VanillaDrawerRenderer({
   options,
   open,
@@ -28804,16 +28823,43 @@ function VanillaDrawerRenderer({
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
   const shouldRenderVanillaContent = title != null || description != null || content != null;
+  const resolvedContent = import_react10.default.useMemo(() => {
+    if (content instanceof HTMLElement) {
+      return {
+        value: content,
+        proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+        proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+      };
+    }
+    if (typeof content === "function") {
+      const result = content();
+      return {
+        value: result,
+        proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+        proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+      };
+    }
+    return {
+      value: content,
+      proxyTitle: void 0,
+      proxyDescription: void 0
+    };
+  }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+  const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+  const proxyDescription = resolvedContent.proxyDescription;
+  const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+  const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+  const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
   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
+      "aria-label": contentAriaLabel,
+      "aria-labelledby": contentAriaLabelledBy,
+      "aria-describedby": contentAriaDescribedBy
     },
     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
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
   )));
 }
 

package/dist/index.js

@@ -28748,6 +28748,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28776,11 +28777,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value, dataAttribute }) {
+function VanillaNode({
+  value,
+  dataAttribute
+}) {
   const ref = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     const element = ref.current;
-    if (!element) return;
+    if (!element) {
+      return;
+    }
     element.innerHTML = "";
     if (value instanceof HTMLElement) {
       element.appendChild(value);
@@ -28801,6 +28807,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+  if (!root || !elementId) {
+    return void 0;
+  }
+  const elements = Array.from(root.querySelectorAll("[id]"));
+  for (const element of elements) {
+    if (element instanceof HTMLElement && element.id === elementId) {
+      const value = element.textContent?.trim();
+      return value ? value : void 0;
+    }
+  }
+  return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+}
 function VanillaDrawerRenderer({
   options,
   open,
@@ -28829,16 +28848,43 @@ function VanillaDrawerRenderer({
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
   const shouldRenderVanillaContent = title != null || description != null || content != null;
+  const resolvedContent = import_react10.default.useMemo(() => {
+    if (content instanceof HTMLElement) {
+      return {
+        value: content,
+        proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+        proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+      };
+    }
+    if (typeof content === "function") {
+      const result = content();
+      return {
+        value: result,
+        proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+        proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+      };
+    }
+    return {
+      value: content,
+      proxyTitle: void 0,
+      proxyDescription: void 0
+    };
+  }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+  const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+  const proxyDescription = resolvedContent.proxyDescription;
+  const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+  const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+  const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
   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
+      "aria-label": contentAriaLabel,
+      "aria-labelledby": contentAriaLabelledBy,
+      "aria-describedby": contentAriaDescribedBy
     },
     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
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
   )));
 }
 

package/dist/index.mjs

@@ -28723,6 +28723,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28751,11 +28752,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value, dataAttribute }) {
+function VanillaNode({
+  value,
+  dataAttribute
+}) {
   const ref = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     const element = ref.current;
-    if (!element) return;
+    if (!element) {
+      return;
+    }
     element.innerHTML = "";
     if (value instanceof HTMLElement) {
       element.appendChild(value);
@@ -28776,6 +28782,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+  if (!root || !elementId) {
+    return void 0;
+  }
+  const elements = Array.from(root.querySelectorAll("[id]"));
+  for (const element of elements) {
+    if (element instanceof HTMLElement && element.id === elementId) {
+      const value = element.textContent?.trim();
+      return value ? value : void 0;
+    }
+  }
+  return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+}
 function VanillaDrawerRenderer({
   options,
   open,
@@ -28804,16 +28823,43 @@ function VanillaDrawerRenderer({
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
   const shouldRenderVanillaContent = title != null || description != null || content != null;
+  const resolvedContent = import_react10.default.useMemo(() => {
+    if (content instanceof HTMLElement) {
+      return {
+        value: content,
+        proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+        proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+      };
+    }
+    if (typeof content === "function") {
+      const result = content();
+      return {
+        value: result,
+        proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+        proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+      };
+    }
+    return {
+      value: content,
+      proxyTitle: void 0,
+      proxyDescription: void 0
+    };
+  }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+  const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+  const proxyDescription = resolvedContent.proxyDescription;
+  const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+  const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+  const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
   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
+      "aria-label": contentAriaLabel,
+      "aria-labelledby": contentAriaLabelledBy,
+      "aria-describedby": contentAriaDescribedBy
     },
     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
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
   )));
 }
 

package/dist/react/index.js

@@ -2220,6 +2220,7 @@ const VISUALLY_HIDDEN_STYLE = {
     whiteSpace: 'nowrap',
     border: 0
 };
+const useSafeLayoutEffect = typeof window === 'undefined' ? React__namespace.default.useEffect : React__namespace.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
     const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
     const baseProps = {
@@ -2251,9 +2252,11 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
 }
 function VanillaNode({ value, dataAttribute }) {
     const ref = React__namespace.default.useRef(null);
-    React__namespace.default.useEffect(()=>{
+    useSafeLayoutEffect(()=>{
         const element = ref.current;
-        if (!element) return;
+        if (!element) {
+            return;
+        }
         element.innerHTML = '';
         if (value instanceof HTMLElement) {
             element.appendChild(value);
@@ -2281,11 +2284,60 @@ function VanillaNode({ value, dataAttribute }) {
         ref: ref
     });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+    var _root_textContent;
+    if (!root || !elementId) {
+        return undefined;
+    }
+    const elements = Array.from(root.querySelectorAll('[id]'));
+    for (const element of elements){
+        if (element instanceof HTMLElement && element.id === elementId) {
+            var _element_textContent;
+            const value = (_element_textContent = element.textContent) == null ? void 0 : _element_textContent.trim();
+            return value ? value : undefined;
+        }
+    }
+    return root.id === elementId ? ((_root_textContent = root.textContent) == null ? void 0 : _root_textContent.trim()) || undefined : undefined;
+}
 function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onReleaseChange }) {
+    var _resolvedContent_proxyTitle;
     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;
+    const resolvedContent = React__namespace.default.useMemo(()=>{
+        if (content instanceof HTMLElement) {
+            return {
+                value: content,
+                proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : undefined,
+                proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : undefined
+            };
+        }
+        if (typeof content === 'function') {
+            const result = content();
+            return {
+                value: result,
+                proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : undefined,
+                proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : undefined
+            };
+        }
+        return {
+            value: content,
+            proxyTitle: undefined,
+            proxyDescription: undefined
+        };
+    }, [
+        ariaDescribedBy,
+        ariaLabelledBy,
+        content,
+        description,
+        title
+    ]);
+    const proxyTitle = (_resolvedContent_proxyTitle = resolvedContent.proxyTitle) != null ? _resolvedContent_proxyTitle : title == null ? ariaLabel : undefined;
+    const proxyDescription = resolvedContent.proxyDescription;
+    const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : undefined;
+    const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : undefined;
+    const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : undefined;
     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", {
@@ -2295,25 +2347,30 @@ function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onRe
         className: overlayClassName
     }), /*#__PURE__*/ React__namespace.default.createElement(Drawer.Content, {
         className: contentClassName,
-        "aria-label": title == null ? ariaLabel : undefined,
-        "aria-labelledby": title == null ? ariaLabelledBy : undefined,
-        "aria-describedby": description == null ? ariaDescribedBy : undefined
+        "aria-label": contentAriaLabel,
+        "aria-labelledby": contentAriaLabelledBy,
+        "aria-describedby": contentAriaDescribedBy
     }, shouldRenderHandle ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Handle, {
         className: handleClassName
     }) : null, shouldRenderVanillaContent ? /*#__PURE__*/ React__namespace.default.createElement("div", {
         "data-drawer-vanilla-node": ""
-    }, title != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, {
+    }, proxyTitle ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, {
+        style: VISUALLY_HIDDEN_STYLE
+    }, proxyTitle) : null, 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, proxyDescription ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Description, {
+        style: VISUALLY_HIDDEN_STYLE
+    }, proxyDescription) : 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,
-        dataAttribute: "data-drawer-vanilla-body"
-    })) : null)));
+    })) : null, /*#__PURE__*/ React__namespace.default.createElement("div", {
+        "data-drawer-vanilla-body": ""
+    }, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
+        value: resolvedContent.value
+    }))) : null)));
 }
 
 function canUseDOM$1() {

package/dist/react/index.mjs

@@ -2198,6 +2198,7 @@ const VISUALLY_HIDDEN_STYLE = {
     whiteSpace: 'nowrap',
     border: 0
 };
+const useSafeLayoutEffect = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
     const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
     const baseProps = {
@@ -2229,9 +2230,11 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
 }
 function VanillaNode({ value, dataAttribute }) {
     const ref = React__default.useRef(null);
-    React__default.useEffect(()=>{
+    useSafeLayoutEffect(()=>{
         const element = ref.current;
-        if (!element) return;
+        if (!element) {
+            return;
+        }
         element.innerHTML = '';
         if (value instanceof HTMLElement) {
             element.appendChild(value);
@@ -2259,11 +2262,60 @@ function VanillaNode({ value, dataAttribute }) {
         ref: ref
     });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+    var _root_textContent;
+    if (!root || !elementId) {
+        return undefined;
+    }
+    const elements = Array.from(root.querySelectorAll('[id]'));
+    for (const element of elements){
+        if (element instanceof HTMLElement && element.id === elementId) {
+            var _element_textContent;
+            const value = (_element_textContent = element.textContent) == null ? void 0 : _element_textContent.trim();
+            return value ? value : undefined;
+        }
+    }
+    return root.id === elementId ? ((_root_textContent = root.textContent) == null ? void 0 : _root_textContent.trim()) || undefined : undefined;
+}
 function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onReleaseChange }) {
+    var _resolvedContent_proxyTitle;
     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;
+    const resolvedContent = React__default.useMemo(()=>{
+        if (content instanceof HTMLElement) {
+            return {
+                value: content,
+                proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : undefined,
+                proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : undefined
+            };
+        }
+        if (typeof content === 'function') {
+            const result = content();
+            return {
+                value: result,
+                proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : undefined,
+                proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : undefined
+            };
+        }
+        return {
+            value: content,
+            proxyTitle: undefined,
+            proxyDescription: undefined
+        };
+    }, [
+        ariaDescribedBy,
+        ariaLabelledBy,
+        content,
+        description,
+        title
+    ]);
+    const proxyTitle = (_resolvedContent_proxyTitle = resolvedContent.proxyTitle) != null ? _resolvedContent_proxyTitle : title == null ? ariaLabel : undefined;
+    const proxyDescription = resolvedContent.proxyDescription;
+    const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : undefined;
+    const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : undefined;
+    const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : undefined;
     return /*#__PURE__*/ React__default.createElement(Drawer.Root, rootProps, triggerText ? /*#__PURE__*/ React__default.createElement(Drawer.Trigger, {
         asChild: true
     }, /*#__PURE__*/ React__default.createElement("button", {
@@ -2273,25 +2325,30 @@ function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onRe
         className: overlayClassName
     }), /*#__PURE__*/ React__default.createElement(Drawer.Content, {
         className: contentClassName,
-        "aria-label": title == null ? ariaLabel : undefined,
-        "aria-labelledby": title == null ? ariaLabelledBy : undefined,
-        "aria-describedby": description == null ? ariaDescribedBy : undefined
+        "aria-label": contentAriaLabel,
+        "aria-labelledby": contentAriaLabelledBy,
+        "aria-describedby": contentAriaDescribedBy
     }, shouldRenderHandle ? /*#__PURE__*/ React__default.createElement(Drawer.Handle, {
         className: handleClassName
     }) : null, shouldRenderVanillaContent ? /*#__PURE__*/ React__default.createElement("div", {
         "data-drawer-vanilla-node": ""
-    }, title != null ? /*#__PURE__*/ React__default.createElement(Drawer.Title, {
+    }, proxyTitle ? /*#__PURE__*/ React__default.createElement(Drawer.Title, {
+        style: VISUALLY_HIDDEN_STYLE
+    }, proxyTitle) : null, title != null ? /*#__PURE__*/ React__default.createElement(Drawer.Title, {
         style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
     }, /*#__PURE__*/ React__default.createElement(VanillaNode, {
         value: title
-    })) : null, description != null ? /*#__PURE__*/ React__default.createElement(Drawer.Description, {
+    })) : null, proxyDescription ? /*#__PURE__*/ React__default.createElement(Drawer.Description, {
+        style: VISUALLY_HIDDEN_STYLE
+    }, proxyDescription) : null, description != null ? /*#__PURE__*/ React__default.createElement(Drawer.Description, {
         style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
     }, /*#__PURE__*/ React__default.createElement(VanillaNode, {
         value: description
-    })) : null, /*#__PURE__*/ React__default.createElement(VanillaNode, {
-        value: content,
-        dataAttribute: "data-drawer-vanilla-body"
-    })) : null)));
+    })) : null, /*#__PURE__*/ React__default.createElement("div", {
+        "data-drawer-vanilla-body": ""
+    }, /*#__PURE__*/ React__default.createElement(VanillaNode, {
+        value: resolvedContent.value
+    }))) : null)));
 }
 
 function canUseDOM$1() {

package/dist/svelte/index.js

@@ -28751,6 +28751,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28779,11 +28780,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value, dataAttribute }) {
+function VanillaNode({
+  value,
+  dataAttribute
+}) {
   const ref = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     const element = ref.current;
-    if (!element) return;
+    if (!element) {
+      return;
+    }
     element.innerHTML = "";
     if (value instanceof HTMLElement) {
       element.appendChild(value);
@@ -28804,6 +28810,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+  if (!root || !elementId) {
+    return void 0;
+  }
+  const elements = Array.from(root.querySelectorAll("[id]"));
+  for (const element of elements) {
+    if (element instanceof HTMLElement && element.id === elementId) {
+      const value = element.textContent?.trim();
+      return value ? value : void 0;
+    }
+  }
+  return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+}
 function VanillaDrawerRenderer({
   options,
   open,
@@ -28832,16 +28851,43 @@ function VanillaDrawerRenderer({
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
   const shouldRenderVanillaContent = title != null || description != null || content != null;
+  const resolvedContent = import_react10.default.useMemo(() => {
+    if (content instanceof HTMLElement) {
+      return {
+        value: content,
+        proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+        proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+      };
+    }
+    if (typeof content === "function") {
+      const result = content();
+      return {
+        value: result,
+        proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+        proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+      };
+    }
+    return {
+      value: content,
+      proxyTitle: void 0,
+      proxyDescription: void 0
+    };
+  }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+  const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+  const proxyDescription = resolvedContent.proxyDescription;
+  const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+  const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+  const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
   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
+      "aria-label": contentAriaLabel,
+      "aria-labelledby": contentAriaLabelledBy,
+      "aria-describedby": contentAriaDescribedBy
     },
     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
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
   )));
 }
 

package/dist/svelte/index.mjs

@@ -28723,6 +28723,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28751,11 +28752,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value, dataAttribute }) {
+function VanillaNode({
+  value,
+  dataAttribute
+}) {
   const ref = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     const element = ref.current;
-    if (!element) return;
+    if (!element) {
+      return;
+    }
     element.innerHTML = "";
     if (value instanceof HTMLElement) {
       element.appendChild(value);
@@ -28776,6 +28782,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+  if (!root || !elementId) {
+    return void 0;
+  }
+  const elements = Array.from(root.querySelectorAll("[id]"));
+  for (const element of elements) {
+    if (element instanceof HTMLElement && element.id === elementId) {
+      const value = element.textContent?.trim();
+      return value ? value : void 0;
+    }
+  }
+  return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+}
 function VanillaDrawerRenderer({
   options,
   open,
@@ -28804,16 +28823,43 @@ function VanillaDrawerRenderer({
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
   const shouldRenderVanillaContent = title != null || description != null || content != null;
+  const resolvedContent = import_react10.default.useMemo(() => {
+    if (content instanceof HTMLElement) {
+      return {
+        value: content,
+        proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+        proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+      };
+    }
+    if (typeof content === "function") {
+      const result = content();
+      return {
+        value: result,
+        proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+        proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+      };
+    }
+    return {
+      value: content,
+      proxyTitle: void 0,
+      proxyDescription: void 0
+    };
+  }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+  const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+  const proxyDescription = resolvedContent.proxyDescription;
+  const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+  const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+  const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
   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
+      "aria-label": contentAriaLabel,
+      "aria-labelledby": contentAriaLabelledBy,
+      "aria-describedby": contentAriaDescribedBy
     },
     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
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
   )));
 }
 

package/dist/vue/index.js

@@ -28751,6 +28751,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28779,11 +28780,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value, dataAttribute }) {
+function VanillaNode({
+  value,
+  dataAttribute
+}) {
   const ref = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     const element = ref.current;
-    if (!element) return;
+    if (!element) {
+      return;
+    }
     element.innerHTML = "";
     if (value instanceof HTMLElement) {
       element.appendChild(value);
@@ -28804,6 +28810,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+  if (!root || !elementId) {
+    return void 0;
+  }
+  const elements = Array.from(root.querySelectorAll("[id]"));
+  for (const element of elements) {
+    if (element instanceof HTMLElement && element.id === elementId) {
+      const value = element.textContent?.trim();
+      return value ? value : void 0;
+    }
+  }
+  return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+}
 function VanillaDrawerRenderer({
   options,
   open,
@@ -28832,16 +28851,43 @@ function VanillaDrawerRenderer({
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
   const shouldRenderVanillaContent = title != null || description != null || content != null;
+  const resolvedContent = import_react10.default.useMemo(() => {
+    if (content instanceof HTMLElement) {
+      return {
+        value: content,
+        proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+        proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+      };
+    }
+    if (typeof content === "function") {
+      const result = content();
+      return {
+        value: result,
+        proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+        proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+      };
+    }
+    return {
+      value: content,
+      proxyTitle: void 0,
+      proxyDescription: void 0
+    };
+  }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+  const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+  const proxyDescription = resolvedContent.proxyDescription;
+  const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+  const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+  const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
   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
+      "aria-label": contentAriaLabel,
+      "aria-labelledby": contentAriaLabelledBy,
+      "aria-describedby": contentAriaDescribedBy
     },
     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
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
   )));
 }
 

package/dist/vue/index.mjs

@@ -28726,6 +28726,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28754,11 +28755,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     fadeFromIndex: void 0
   };
 }
-function VanillaNode({ value, dataAttribute }) {
+function VanillaNode({
+  value,
+  dataAttribute
+}) {
   const ref = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     const element = ref.current;
-    if (!element) return;
+    if (!element) {
+      return;
+    }
     element.innerHTML = "";
     if (value instanceof HTMLElement) {
       element.appendChild(value);
@@ -28779,6 +28785,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+  if (!root || !elementId) {
+    return void 0;
+  }
+  const elements = Array.from(root.querySelectorAll("[id]"));
+  for (const element of elements) {
+    if (element instanceof HTMLElement && element.id === elementId) {
+      const value = element.textContent?.trim();
+      return value ? value : void 0;
+    }
+  }
+  return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+}
 function VanillaDrawerRenderer({
   options,
   open,
@@ -28807,16 +28826,43 @@ function VanillaDrawerRenderer({
   const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
   const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
   const shouldRenderVanillaContent = title != null || description != null || content != null;
+  const resolvedContent = import_react10.default.useMemo(() => {
+    if (content instanceof HTMLElement) {
+      return {
+        value: content,
+        proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+        proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+      };
+    }
+    if (typeof content === "function") {
+      const result = content();
+      return {
+        value: result,
+        proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+        proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+      };
+    }
+    return {
+      value: content,
+      proxyTitle: void 0,
+      proxyDescription: void 0
+    };
+  }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+  const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+  const proxyDescription = resolvedContent.proxyDescription;
+  const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+  const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+  const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
   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
+      "aria-label": contentAriaLabel,
+      "aria-labelledby": contentAriaLabelledBy,
+      "aria-describedby": contentAriaDescribedBy
     },
     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
+    shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, 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, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : 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("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
   )));
 }
 

package/package.json

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