npm - @samline/drawer - Versions diffs - 2.0.2 → 2.0.4 - Mend

@samline/drawer 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/browser/index.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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",