@samline/drawer 2.0.1 → 2.0.3

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 (17) hide show
  1. package/README.md +1 -2
  2. package/dist/browser/index.cjs +32 -4
  3. package/dist/browser/index.js +32 -4
  4. package/dist/browser/index.mjs +32 -4
  5. package/dist/index.d.mts +5 -0
  6. package/dist/index.d.ts +5 -0
  7. package/dist/index.js +32 -4
  8. package/dist/index.mjs +32 -4
  9. package/dist/react/index.js +34 -9
  10. package/dist/react/index.mjs +34 -9
  11. package/dist/svelte/index.js +32 -4
  12. package/dist/svelte/index.mjs +32 -4
  13. package/dist/vue/index.d.mts +12 -0
  14. package/dist/vue/index.d.ts +12 -0
  15. package/dist/vue/index.js +42 -4
  16. package/dist/vue/index.mjs +42 -4
  17. package/package.json +1 -1
package/README.md CHANGED
@@ -24,8 +24,7 @@ const drawer = createDrawer({
24
24
  dismissible: true,
25
25
  triggerText: 'Open drawer',
26
26
  showHandle: true,
27
- title: 'Drawer title',
28
- description: 'Drawer description',
27
+ ariaLabel: 'Filters drawer',
29
28
  content: 'Drawer content'
30
29
  })
31
30
 
package/dist/browser/index.cjs CHANGED
@@ -28738,6 +28738,18 @@ var Drawer = {
28738
28738
  };
28739
28739
 
28740
28740
  // src/vanilla/render.tsx
28741
+ var VISUALLY_HIDDEN_STYLE = {
28742
+ position: "absolute",
28743
+ width: "1px",
28744
+ height: "1px",
28745
+ padding: 0,
28746
+ margin: "-1px",
28747
+ overflow: "hidden",
28748
+ clip: "rect(0, 0, 0, 0)",
28749
+ whiteSpace: "nowrap",
28750
+ border: 0
28751
+ };
28752
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28741
28753
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28742
28754
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28743
28755
  const baseProps = {
@@ -28766,9 +28778,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
28766
28778
  fadeFromIndex: void 0
28767
28779
  };
28768
28780
  }
28769
- function VanillaNode({ value }) {
28781
+ function VanillaNode({ value, dataAttribute }) {
28770
28782
  const ref = import_react10.default.useRef(null);
28771
- import_react10.default.useEffect(() => {
28783
+ useSafeLayoutEffect(() => {
28772
28784
  const element = ref.current;
28773
28785
  if (!element) return;
28774
28786
  element.innerHTML = "";
@@ -28789,7 +28801,7 @@ function VanillaNode({ value }) {
28789
28801
  if (value == null) {
28790
28802
  return null;
28791
28803
  }
28792
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28804
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28793
28805
  }
28794
28806
  function VanillaDrawerRenderer({
28795
28807
  options,
@@ -28804,8 +28816,13 @@ function VanillaDrawerRenderer({
28804
28816
  triggerText,
28805
28817
  showHandle,
28806
28818
  handleClassName,
28819
+ ariaLabel,
28820
+ ariaLabelledBy,
28821
+ ariaDescribedBy,
28807
28822
  title,
28823
+ titleVisuallyHidden,
28808
28824
  description,
28825
+ descriptionVisuallyHidden,
28809
28826
  content,
28810
28827
  overlayClassName,
28811
28828
  contentClassName,
@@ -28813,7 +28830,18 @@ function VanillaDrawerRenderer({
28813
28830
  } = options;
28814
28831
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28815
28832
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28816
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28833
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28834
+ 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(
28835
+ Drawer.Content,
28836
+ {
28837
+ className: contentClassName,
28838
+ "aria-label": title == null ? ariaLabel : void 0,
28839
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28840
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28841
+ },
28842
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28843
+ 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
28844
+ )));
28817
28845
  }
28818
28846
 
28819
28847
  // src/vanilla/host.tsx
package/dist/browser/index.js CHANGED
@@ -28738,6 +28738,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
28738
28738
  };
28739
28739
 
28740
28740
  // src/vanilla/render.tsx
28741
+ var VISUALLY_HIDDEN_STYLE = {
28742
+ position: "absolute",
28743
+ width: "1px",
28744
+ height: "1px",
28745
+ padding: 0,
28746
+ margin: "-1px",
28747
+ overflow: "hidden",
28748
+ clip: "rect(0, 0, 0, 0)",
28749
+ whiteSpace: "nowrap",
28750
+ border: 0
28751
+ };
28752
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28741
28753
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28742
28754
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28743
28755
  const baseProps = {
@@ -28766,9 +28778,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
28766
28778
  fadeFromIndex: void 0
28767
28779
  };
28768
28780
  }
28769
- function VanillaNode({ value }) {
28781
+ function VanillaNode({ value, dataAttribute }) {
28770
28782
  const ref = import_react10.default.useRef(null);
28771
- import_react10.default.useEffect(() => {
28783
+ useSafeLayoutEffect(() => {
28772
28784
  const element = ref.current;
28773
28785
  if (!element) return;
28774
28786
  element.innerHTML = "";
@@ -28789,7 +28801,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
28789
28801
  if (value == null) {
28790
28802
  return null;
28791
28803
  }
28792
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28804
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28793
28805
  }
28794
28806
  function VanillaDrawerRenderer({
28795
28807
  options,
@@ -28804,8 +28816,13 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
28804
28816
  triggerText,
28805
28817
  showHandle,
28806
28818
  handleClassName,
28819
+ ariaLabel,
28820
+ ariaLabelledBy,
28821
+ ariaDescribedBy,
28807
28822
  title,
28823
+ titleVisuallyHidden,
28808
28824
  description,
28825
+ descriptionVisuallyHidden,
28809
28826
  content,
28810
28827
  overlayClassName,
28811
28828
  contentClassName,
@@ -28813,7 +28830,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
28813
28830
  } = options;
28814
28831
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28815
28832
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28816
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28833
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28834
+ 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(
28835
+ Drawer.Content,
28836
+ {
28837
+ className: contentClassName,
28838
+ "aria-label": title == null ? ariaLabel : void 0,
28839
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28840
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28841
+ },
28842
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28843
+ 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
28844
+ )));
28817
28845
  }
28818
28846
 
28819
28847
  // src/vanilla/host.tsx
package/dist/browser/index.mjs CHANGED
@@ -28712,6 +28712,18 @@ var Drawer = {
28712
28712
  };
28713
28713
 
28714
28714
  // src/vanilla/render.tsx
28715
+ var VISUALLY_HIDDEN_STYLE = {
28716
+ position: "absolute",
28717
+ width: "1px",
28718
+ height: "1px",
28719
+ padding: 0,
28720
+ margin: "-1px",
28721
+ overflow: "hidden",
28722
+ clip: "rect(0, 0, 0, 0)",
28723
+ whiteSpace: "nowrap",
28724
+ border: 0
28725
+ };
28726
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28715
28727
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28716
28728
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28717
28729
  const baseProps = {
@@ -28740,9 +28752,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
28740
28752
  fadeFromIndex: void 0
28741
28753
  };
28742
28754
  }
28743
- function VanillaNode({ value }) {
28755
+ function VanillaNode({ value, dataAttribute }) {
28744
28756
  const ref = import_react10.default.useRef(null);
28745
- import_react10.default.useEffect(() => {
28757
+ useSafeLayoutEffect(() => {
28746
28758
  const element = ref.current;
28747
28759
  if (!element) return;
28748
28760
  element.innerHTML = "";
@@ -28763,7 +28775,7 @@ function VanillaNode({ value }) {
28763
28775
  if (value == null) {
28764
28776
  return null;
28765
28777
  }
28766
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28778
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28767
28779
  }
28768
28780
  function VanillaDrawerRenderer({
28769
28781
  options,
@@ -28778,8 +28790,13 @@ function VanillaDrawerRenderer({
28778
28790
  triggerText,
28779
28791
  showHandle,
28780
28792
  handleClassName,
28793
+ ariaLabel,
28794
+ ariaLabelledBy,
28795
+ ariaDescribedBy,
28781
28796
  title,
28797
+ titleVisuallyHidden,
28782
28798
  description,
28799
+ descriptionVisuallyHidden,
28783
28800
  content,
28784
28801
  overlayClassName,
28785
28802
  contentClassName,
@@ -28787,7 +28804,18 @@ function VanillaDrawerRenderer({
28787
28804
  } = options;
28788
28805
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28789
28806
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28790
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28807
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28808
+ 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(
28809
+ Drawer.Content,
28810
+ {
28811
+ className: contentClassName,
28812
+ "aria-label": title == null ? ariaLabel : void 0,
28813
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28814
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28815
+ },
28816
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28817
+ 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
28818
+ )));
28791
28819
  }
28792
28820
 
28793
28821
  // src/vanilla/host.tsx
package/dist/index.d.mts CHANGED
@@ -8,8 +8,13 @@ interface VanillaDrawerOptions extends CommonDrawerOptions {
8
8
  triggerText?: string;
9
9
  showHandle?: boolean;
10
10
  handleClassName?: string;
11
+ ariaLabel?: string;
12
+ ariaLabelledBy?: string;
13
+ ariaDescribedBy?: string;
11
14
  title?: VanillaRenderable;
15
+ titleVisuallyHidden?: boolean;
12
16
  description?: VanillaRenderable;
17
+ descriptionVisuallyHidden?: boolean;
13
18
  content?: VanillaRenderable;
14
19
  overlayClassName?: string;
15
20
  contentClassName?: string;
package/dist/index.d.ts CHANGED
@@ -8,8 +8,13 @@ interface VanillaDrawerOptions extends CommonDrawerOptions {
8
8
  triggerText?: string;
9
9
  showHandle?: boolean;
10
10
  handleClassName?: string;
11
+ ariaLabel?: string;
12
+ ariaLabelledBy?: string;
13
+ ariaDescribedBy?: string;
11
14
  title?: VanillaRenderable;
15
+ titleVisuallyHidden?: boolean;
12
16
  description?: VanillaRenderable;
17
+ descriptionVisuallyHidden?: boolean;
13
18
  content?: VanillaRenderable;
14
19
  overlayClassName?: string;
15
20
  contentClassName?: string;
package/dist/index.js CHANGED
@@ -28737,6 +28737,18 @@ var Drawer = {
28737
28737
  };
28738
28738
 
28739
28739
  // src/vanilla/render.tsx
28740
+ var VISUALLY_HIDDEN_STYLE = {
28741
+ position: "absolute",
28742
+ width: "1px",
28743
+ height: "1px",
28744
+ padding: 0,
28745
+ margin: "-1px",
28746
+ overflow: "hidden",
28747
+ clip: "rect(0, 0, 0, 0)",
28748
+ whiteSpace: "nowrap",
28749
+ border: 0
28750
+ };
28751
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28740
28752
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28741
28753
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28742
28754
  const baseProps = {
@@ -28765,9 +28777,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
28765
28777
  fadeFromIndex: void 0
28766
28778
  };
28767
28779
  }
28768
- function VanillaNode({ value }) {
28780
+ function VanillaNode({ value, dataAttribute }) {
28769
28781
  const ref = import_react10.default.useRef(null);
28770
- import_react10.default.useEffect(() => {
28782
+ useSafeLayoutEffect(() => {
28771
28783
  const element = ref.current;
28772
28784
  if (!element) return;
28773
28785
  element.innerHTML = "";
@@ -28788,7 +28800,7 @@ function VanillaNode({ value }) {
28788
28800
  if (value == null) {
28789
28801
  return null;
28790
28802
  }
28791
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28803
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28792
28804
  }
28793
28805
  function VanillaDrawerRenderer({
28794
28806
  options,
@@ -28803,8 +28815,13 @@ function VanillaDrawerRenderer({
28803
28815
  triggerText,
28804
28816
  showHandle,
28805
28817
  handleClassName,
28818
+ ariaLabel,
28819
+ ariaLabelledBy,
28820
+ ariaDescribedBy,
28806
28821
  title,
28822
+ titleVisuallyHidden,
28807
28823
  description,
28824
+ descriptionVisuallyHidden,
28808
28825
  content,
28809
28826
  overlayClassName,
28810
28827
  contentClassName,
@@ -28812,7 +28829,18 @@ function VanillaDrawerRenderer({
28812
28829
  } = options;
28813
28830
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28814
28831
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28815
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28832
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28833
+ 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(
28834
+ Drawer.Content,
28835
+ {
28836
+ className: contentClassName,
28837
+ "aria-label": title == null ? ariaLabel : void 0,
28838
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28839
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28840
+ },
28841
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28842
+ 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
28843
+ )));
28816
28844
  }
28817
28845
 
28818
28846
  // src/vanilla/host.tsx
package/dist/index.mjs CHANGED
@@ -28712,6 +28712,18 @@ var Drawer = {
28712
28712
  };
28713
28713
 
28714
28714
  // src/vanilla/render.tsx
28715
+ var VISUALLY_HIDDEN_STYLE = {
28716
+ position: "absolute",
28717
+ width: "1px",
28718
+ height: "1px",
28719
+ padding: 0,
28720
+ margin: "-1px",
28721
+ overflow: "hidden",
28722
+ clip: "rect(0, 0, 0, 0)",
28723
+ whiteSpace: "nowrap",
28724
+ border: 0
28725
+ };
28726
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28715
28727
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28716
28728
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28717
28729
  const baseProps = {
@@ -28740,9 +28752,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
28740
28752
  fadeFromIndex: void 0
28741
28753
  };
28742
28754
  }
28743
- function VanillaNode({ value }) {
28755
+ function VanillaNode({ value, dataAttribute }) {
28744
28756
  const ref = import_react10.default.useRef(null);
28745
- import_react10.default.useEffect(() => {
28757
+ useSafeLayoutEffect(() => {
28746
28758
  const element = ref.current;
28747
28759
  if (!element) return;
28748
28760
  element.innerHTML = "";
@@ -28763,7 +28775,7 @@ function VanillaNode({ value }) {
28763
28775
  if (value == null) {
28764
28776
  return null;
28765
28777
  }
28766
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28778
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28767
28779
  }
28768
28780
  function VanillaDrawerRenderer({
28769
28781
  options,
@@ -28778,8 +28790,13 @@ function VanillaDrawerRenderer({
28778
28790
  triggerText,
28779
28791
  showHandle,
28780
28792
  handleClassName,
28793
+ ariaLabel,
28794
+ ariaLabelledBy,
28795
+ ariaDescribedBy,
28781
28796
  title,
28797
+ titleVisuallyHidden,
28782
28798
  description,
28799
+ descriptionVisuallyHidden,
28783
28800
  content,
28784
28801
  overlayClassName,
28785
28802
  contentClassName,
@@ -28787,7 +28804,18 @@ function VanillaDrawerRenderer({
28787
28804
  } = options;
28788
28805
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28789
28806
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28790
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28807
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28808
+ 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(
28809
+ Drawer.Content,
28810
+ {
28811
+ className: contentClassName,
28812
+ "aria-label": title == null ? ariaLabel : void 0,
28813
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28814
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28815
+ },
28816
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28817
+ 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
28818
+ )));
28791
28819
  }
28792
28820
 
28793
28821
  // src/vanilla/host.tsx
package/dist/react/index.js CHANGED
@@ -2209,6 +2209,18 @@ function getParentNestedVisualState({ direction, viewportSize, hasOpenChild, per
2209
2209
  };
2210
2210
  }
2211
2211
 
2212
+ const VISUALLY_HIDDEN_STYLE = {
2213
+ position: 'absolute',
2214
+ width: '1px',
2215
+ height: '1px',
2216
+ padding: 0,
2217
+ margin: '-1px',
2218
+ overflow: 'hidden',
2219
+ clip: 'rect(0, 0, 0, 0)',
2220
+ whiteSpace: 'nowrap',
2221
+ border: 0
2222
+ };
2223
+ const useSafeLayoutEffect = typeof window === 'undefined' ? React__namespace.default.useEffect : React__namespace.default.useLayoutEffect;
2212
2224
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
2213
2225
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
2214
2226
  const baseProps = {
@@ -2238,9 +2250,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
2238
2250
  fadeFromIndex: undefined
2239
2251
  };
2240
2252
  }
2241
- function VanillaNode({ value }) {
2253
+ function VanillaNode({ value, dataAttribute }) {
2242
2254
  const ref = React__namespace.default.useRef(null);
2243
- React__namespace.default.useEffect(()=>{
2255
+ useSafeLayoutEffect(()=>{
2244
2256
  const element = ref.current;
2245
2257
  if (!element) return;
2246
2258
  element.innerHTML = '';
@@ -2264,14 +2276,17 @@ function VanillaNode({ value }) {
2264
2276
  return null;
2265
2277
  }
2266
2278
  return /*#__PURE__*/ React__namespace.default.createElement("div", {
2267
- "data-drawer-vanilla-node": "",
2279
+ ...dataAttribute ? {
2280
+ [dataAttribute]: ''
2281
+ } : {},
2268
2282
  ref: ref
2269
2283
  });
2270
2284
  }
2271
2285
  function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onReleaseChange }) {
2272
- const { mountElement: _mountElement, triggerElement: _triggerElement, triggerText, showHandle, handleClassName, title, description, content, overlayClassName, contentClassName, ...drawerOptions } = options;
2286
+ const { mountElement: _mountElement, triggerElement: _triggerElement, triggerText, showHandle, handleClassName, ariaLabel, ariaLabelledBy, ariaDescribedBy, title, titleVisuallyHidden, description, descriptionVisuallyHidden, content, overlayClassName, contentClassName, ...drawerOptions } = options;
2273
2287
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
2274
2288
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
2289
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
2275
2290
  return /*#__PURE__*/ React__namespace.default.createElement(Drawer.Root, rootProps, triggerText ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Trigger, {
2276
2291
  asChild: true
2277
2292
  }, /*#__PURE__*/ React__namespace.default.createElement("button", {
@@ -2280,16 +2295,26 @@ function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onRe
2280
2295
  }, triggerText)) : null, /*#__PURE__*/ React__namespace.default.createElement(Drawer.Portal, null, /*#__PURE__*/ React__namespace.default.createElement(Drawer.Overlay, {
2281
2296
  className: overlayClassName
2282
2297
  }), /*#__PURE__*/ React__namespace.default.createElement(Drawer.Content, {
2283
- className: contentClassName
2298
+ className: contentClassName,
2299
+ "aria-label": title == null ? ariaLabel : undefined,
2300
+ "aria-labelledby": title == null ? ariaLabelledBy : undefined,
2301
+ "aria-describedby": description == null ? ariaDescribedBy : undefined
2284
2302
  }, shouldRenderHandle ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Handle, {
2285
2303
  className: handleClassName
2286
- }) : null, title != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, null, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
2304
+ }) : null, shouldRenderVanillaContent ? /*#__PURE__*/ React__namespace.default.createElement("div", {
2305
+ "data-drawer-vanilla-node": ""
2306
+ }, title != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, {
2307
+ style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
2308
+ }, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
2287
2309
  value: title
2288
- })) : null, description != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Description, null, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
2310
+ })) : null, description != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Description, {
2311
+ style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
2312
+ }, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
2289
2313
  value: description
2290
2314
  })) : null, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
2291
- value: content
2292
- }))));
2315
+ value: content,
2316
+ dataAttribute: "data-drawer-vanilla-body"
2317
+ })) : null)));
2293
2318
  }
2294
2319
 
2295
2320
  function canUseDOM$1() {
package/dist/react/index.mjs CHANGED
@@ -2187,6 +2187,18 @@ function getParentNestedVisualState({ direction, viewportSize, hasOpenChild, per
2187
2187
  };
2188
2188
  }
2189
2189
 
2190
+ const VISUALLY_HIDDEN_STYLE = {
2191
+ position: 'absolute',
2192
+ width: '1px',
2193
+ height: '1px',
2194
+ padding: 0,
2195
+ margin: '-1px',
2196
+ overflow: 'hidden',
2197
+ clip: 'rect(0, 0, 0, 0)',
2198
+ whiteSpace: 'nowrap',
2199
+ border: 0
2200
+ };
2201
+ const useSafeLayoutEffect = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
2190
2202
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
2191
2203
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
2192
2204
  const baseProps = {
@@ -2216,9 +2228,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
2216
2228
  fadeFromIndex: undefined
2217
2229
  };
2218
2230
  }
2219
- function VanillaNode({ value }) {
2231
+ function VanillaNode({ value, dataAttribute }) {
2220
2232
  const ref = React__default.useRef(null);
2221
- React__default.useEffect(()=>{
2233
+ useSafeLayoutEffect(()=>{
2222
2234
  const element = ref.current;
2223
2235
  if (!element) return;
2224
2236
  element.innerHTML = '';
@@ -2242,14 +2254,17 @@ function VanillaNode({ value }) {
2242
2254
  return null;
2243
2255
  }
2244
2256
  return /*#__PURE__*/ React__default.createElement("div", {
2245
- "data-drawer-vanilla-node": "",
2257
+ ...dataAttribute ? {
2258
+ [dataAttribute]: ''
2259
+ } : {},
2246
2260
  ref: ref
2247
2261
  });
2248
2262
  }
2249
2263
  function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onReleaseChange }) {
2250
- const { mountElement: _mountElement, triggerElement: _triggerElement, triggerText, showHandle, handleClassName, title, description, content, overlayClassName, contentClassName, ...drawerOptions } = options;
2264
+ const { mountElement: _mountElement, triggerElement: _triggerElement, triggerText, showHandle, handleClassName, ariaLabel, ariaLabelledBy, ariaDescribedBy, title, titleVisuallyHidden, description, descriptionVisuallyHidden, content, overlayClassName, contentClassName, ...drawerOptions } = options;
2251
2265
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
2252
2266
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
2267
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
2253
2268
  return /*#__PURE__*/ React__default.createElement(Drawer.Root, rootProps, triggerText ? /*#__PURE__*/ React__default.createElement(Drawer.Trigger, {
2254
2269
  asChild: true
2255
2270
  }, /*#__PURE__*/ React__default.createElement("button", {
@@ -2258,16 +2273,26 @@ function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onRe
2258
2273
  }, triggerText)) : null, /*#__PURE__*/ React__default.createElement(Drawer.Portal, null, /*#__PURE__*/ React__default.createElement(Drawer.Overlay, {
2259
2274
  className: overlayClassName
2260
2275
  }), /*#__PURE__*/ React__default.createElement(Drawer.Content, {
2261
- className: contentClassName
2276
+ className: contentClassName,
2277
+ "aria-label": title == null ? ariaLabel : undefined,
2278
+ "aria-labelledby": title == null ? ariaLabelledBy : undefined,
2279
+ "aria-describedby": description == null ? ariaDescribedBy : undefined
2262
2280
  }, shouldRenderHandle ? /*#__PURE__*/ React__default.createElement(Drawer.Handle, {
2263
2281
  className: handleClassName
2264
- }) : null, title != null ? /*#__PURE__*/ React__default.createElement(Drawer.Title, null, /*#__PURE__*/ React__default.createElement(VanillaNode, {
2282
+ }) : null, shouldRenderVanillaContent ? /*#__PURE__*/ React__default.createElement("div", {
2283
+ "data-drawer-vanilla-node": ""
2284
+ }, title != null ? /*#__PURE__*/ React__default.createElement(Drawer.Title, {
2285
+ style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
2286
+ }, /*#__PURE__*/ React__default.createElement(VanillaNode, {
2265
2287
  value: title
2266
- })) : null, description != null ? /*#__PURE__*/ React__default.createElement(Drawer.Description, null, /*#__PURE__*/ React__default.createElement(VanillaNode, {
2288
+ })) : null, description != null ? /*#__PURE__*/ React__default.createElement(Drawer.Description, {
2289
+ style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
2290
+ }, /*#__PURE__*/ React__default.createElement(VanillaNode, {
2267
2291
  value: description
2268
2292
  })) : null, /*#__PURE__*/ React__default.createElement(VanillaNode, {
2269
- value: content
2270
- }))));
2293
+ value: content,
2294
+ dataAttribute: "data-drawer-vanilla-body"
2295
+ })) : null)));
2271
2296
  }
2272
2297
 
2273
2298
  function canUseDOM$1() {
package/dist/svelte/index.js CHANGED
@@ -28740,6 +28740,18 @@ var Drawer = {
28740
28740
  };
28741
28741
 
28742
28742
  // src/vanilla/render.tsx
28743
+ var VISUALLY_HIDDEN_STYLE = {
28744
+ position: "absolute",
28745
+ width: "1px",
28746
+ height: "1px",
28747
+ padding: 0,
28748
+ margin: "-1px",
28749
+ overflow: "hidden",
28750
+ clip: "rect(0, 0, 0, 0)",
28751
+ whiteSpace: "nowrap",
28752
+ border: 0
28753
+ };
28754
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28743
28755
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28744
28756
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28745
28757
  const baseProps = {
@@ -28768,9 +28780,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
28768
28780
  fadeFromIndex: void 0
28769
28781
  };
28770
28782
  }
28771
- function VanillaNode({ value }) {
28783
+ function VanillaNode({ value, dataAttribute }) {
28772
28784
  const ref = import_react10.default.useRef(null);
28773
- import_react10.default.useEffect(() => {
28785
+ useSafeLayoutEffect(() => {
28774
28786
  const element = ref.current;
28775
28787
  if (!element) return;
28776
28788
  element.innerHTML = "";
@@ -28791,7 +28803,7 @@ function VanillaNode({ value }) {
28791
28803
  if (value == null) {
28792
28804
  return null;
28793
28805
  }
28794
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28806
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28795
28807
  }
28796
28808
  function VanillaDrawerRenderer({
28797
28809
  options,
@@ -28806,8 +28818,13 @@ function VanillaDrawerRenderer({
28806
28818
  triggerText,
28807
28819
  showHandle,
28808
28820
  handleClassName,
28821
+ ariaLabel,
28822
+ ariaLabelledBy,
28823
+ ariaDescribedBy,
28809
28824
  title,
28825
+ titleVisuallyHidden,
28810
28826
  description,
28827
+ descriptionVisuallyHidden,
28811
28828
  content,
28812
28829
  overlayClassName,
28813
28830
  contentClassName,
@@ -28815,7 +28832,18 @@ function VanillaDrawerRenderer({
28815
28832
  } = options;
28816
28833
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28817
28834
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28818
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28835
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28836
+ 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(
28837
+ Drawer.Content,
28838
+ {
28839
+ className: contentClassName,
28840
+ "aria-label": title == null ? ariaLabel : void 0,
28841
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28842
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28843
+ },
28844
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28845
+ 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
28846
+ )));
28819
28847
  }
28820
28848
 
28821
28849
  // src/vanilla/host.tsx
package/dist/svelte/index.mjs CHANGED
@@ -28712,6 +28712,18 @@ var Drawer = {
28712
28712
  };
28713
28713
 
28714
28714
  // src/vanilla/render.tsx
28715
+ var VISUALLY_HIDDEN_STYLE = {
28716
+ position: "absolute",
28717
+ width: "1px",
28718
+ height: "1px",
28719
+ padding: 0,
28720
+ margin: "-1px",
28721
+ overflow: "hidden",
28722
+ clip: "rect(0, 0, 0, 0)",
28723
+ whiteSpace: "nowrap",
28724
+ border: 0
28725
+ };
28726
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28715
28727
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28716
28728
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28717
28729
  const baseProps = {
@@ -28740,9 +28752,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
28740
28752
  fadeFromIndex: void 0
28741
28753
  };
28742
28754
  }
28743
- function VanillaNode({ value }) {
28755
+ function VanillaNode({ value, dataAttribute }) {
28744
28756
  const ref = import_react10.default.useRef(null);
28745
- import_react10.default.useEffect(() => {
28757
+ useSafeLayoutEffect(() => {
28746
28758
  const element = ref.current;
28747
28759
  if (!element) return;
28748
28760
  element.innerHTML = "";
@@ -28763,7 +28775,7 @@ function VanillaNode({ value }) {
28763
28775
  if (value == null) {
28764
28776
  return null;
28765
28777
  }
28766
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28778
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28767
28779
  }
28768
28780
  function VanillaDrawerRenderer({
28769
28781
  options,
@@ -28778,8 +28790,13 @@ function VanillaDrawerRenderer({
28778
28790
  triggerText,
28779
28791
  showHandle,
28780
28792
  handleClassName,
28793
+ ariaLabel,
28794
+ ariaLabelledBy,
28795
+ ariaDescribedBy,
28781
28796
  title,
28797
+ titleVisuallyHidden,
28782
28798
  description,
28799
+ descriptionVisuallyHidden,
28783
28800
  content,
28784
28801
  overlayClassName,
28785
28802
  contentClassName,
@@ -28787,7 +28804,18 @@ function VanillaDrawerRenderer({
28787
28804
  } = options;
28788
28805
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28789
28806
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28790
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28807
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28808
+ 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(
28809
+ Drawer.Content,
28810
+ {
28811
+ className: contentClassName,
28812
+ "aria-label": title == null ? ariaLabel : void 0,
28813
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28814
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28815
+ },
28816
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28817
+ 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
28818
+ )));
28791
28819
  }
28792
28820
 
28793
28821
  // src/vanilla/host.tsx
package/dist/vue/index.d.mts CHANGED
@@ -38,8 +38,13 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
38
38
  triggerText: StringConstructor;
39
39
  showHandle: BooleanConstructor;
40
40
  handleClassName: StringConstructor;
41
+ ariaLabel: StringConstructor;
42
+ ariaLabelledBy: StringConstructor;
43
+ ariaDescribedBy: StringConstructor;
41
44
  title: PropType<VanillaRenderable>;
45
+ titleVisuallyHidden: BooleanConstructor;
42
46
  description: PropType<VanillaRenderable>;
47
+ descriptionVisuallyHidden: BooleanConstructor;
43
48
  content: PropType<VanillaRenderable>;
44
49
  overlayClassName: StringConstructor;
45
50
  contentClassName: StringConstructor;
@@ -79,8 +84,13 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
79
84
  triggerText: StringConstructor;
80
85
  showHandle: BooleanConstructor;
81
86
  handleClassName: StringConstructor;
87
+ ariaLabel: StringConstructor;
88
+ ariaLabelledBy: StringConstructor;
89
+ ariaDescribedBy: StringConstructor;
82
90
  title: PropType<VanillaRenderable>;
91
+ titleVisuallyHidden: BooleanConstructor;
83
92
  description: PropType<VanillaRenderable>;
93
+ descriptionVisuallyHidden: BooleanConstructor;
84
94
  content: PropType<VanillaRenderable>;
85
95
  overlayClassName: StringConstructor;
86
96
  contentClassName: StringConstructor;
@@ -101,6 +111,8 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
101
111
  noBodyStyles: boolean;
102
112
  autoFocus: boolean;
103
113
  showHandle: boolean;
114
+ titleVisuallyHidden: boolean;
115
+ descriptionVisuallyHidden: boolean;
104
116
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
105
117
  declare const DrawerPlugin: Plugin;
106
118
 
package/dist/vue/index.d.ts CHANGED
@@ -38,8 +38,13 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
38
38
  triggerText: StringConstructor;
39
39
  showHandle: BooleanConstructor;
40
40
  handleClassName: StringConstructor;
41
+ ariaLabel: StringConstructor;
42
+ ariaLabelledBy: StringConstructor;
43
+ ariaDescribedBy: StringConstructor;
41
44
  title: PropType<VanillaRenderable>;
45
+ titleVisuallyHidden: BooleanConstructor;
42
46
  description: PropType<VanillaRenderable>;
47
+ descriptionVisuallyHidden: BooleanConstructor;
43
48
  content: PropType<VanillaRenderable>;
44
49
  overlayClassName: StringConstructor;
45
50
  contentClassName: StringConstructor;
@@ -79,8 +84,13 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
79
84
  triggerText: StringConstructor;
80
85
  showHandle: BooleanConstructor;
81
86
  handleClassName: StringConstructor;
87
+ ariaLabel: StringConstructor;
88
+ ariaLabelledBy: StringConstructor;
89
+ ariaDescribedBy: StringConstructor;
82
90
  title: PropType<VanillaRenderable>;
91
+ titleVisuallyHidden: BooleanConstructor;
83
92
  description: PropType<VanillaRenderable>;
93
+ descriptionVisuallyHidden: BooleanConstructor;
84
94
  content: PropType<VanillaRenderable>;
85
95
  overlayClassName: StringConstructor;
86
96
  contentClassName: StringConstructor;
@@ -101,6 +111,8 @@ declare const DrawerRoot: vue.DefineComponent<vue.ExtractPropTypes<{
101
111
  noBodyStyles: boolean;
102
112
  autoFocus: boolean;
103
113
  showHandle: boolean;
114
+ titleVisuallyHidden: boolean;
115
+ descriptionVisuallyHidden: boolean;
104
116
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
105
117
  declare const DrawerPlugin: Plugin;
106
118
 
package/dist/vue/index.js CHANGED
@@ -28740,6 +28740,18 @@ var Drawer = {
28740
28740
  };
28741
28741
 
28742
28742
  // src/vanilla/render.tsx
28743
+ var VISUALLY_HIDDEN_STYLE = {
28744
+ position: "absolute",
28745
+ width: "1px",
28746
+ height: "1px",
28747
+ padding: 0,
28748
+ margin: "-1px",
28749
+ overflow: "hidden",
28750
+ clip: "rect(0, 0, 0, 0)",
28751
+ whiteSpace: "nowrap",
28752
+ border: 0
28753
+ };
28754
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28743
28755
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28744
28756
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28745
28757
  const baseProps = {
@@ -28768,9 +28780,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
28768
28780
  fadeFromIndex: void 0
28769
28781
  };
28770
28782
  }
28771
- function VanillaNode({ value }) {
28783
+ function VanillaNode({ value, dataAttribute }) {
28772
28784
  const ref = import_react10.default.useRef(null);
28773
- import_react10.default.useEffect(() => {
28785
+ useSafeLayoutEffect(() => {
28774
28786
  const element = ref.current;
28775
28787
  if (!element) return;
28776
28788
  element.innerHTML = "";
@@ -28791,7 +28803,7 @@ function VanillaNode({ value }) {
28791
28803
  if (value == null) {
28792
28804
  return null;
28793
28805
  }
28794
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28806
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28795
28807
  }
28796
28808
  function VanillaDrawerRenderer({
28797
28809
  options,
@@ -28806,8 +28818,13 @@ function VanillaDrawerRenderer({
28806
28818
  triggerText,
28807
28819
  showHandle,
28808
28820
  handleClassName,
28821
+ ariaLabel,
28822
+ ariaLabelledBy,
28823
+ ariaDescribedBy,
28809
28824
  title,
28825
+ titleVisuallyHidden,
28810
28826
  description,
28827
+ descriptionVisuallyHidden,
28811
28828
  content,
28812
28829
  overlayClassName,
28813
28830
  contentClassName,
@@ -28815,7 +28832,18 @@ function VanillaDrawerRenderer({
28815
28832
  } = options;
28816
28833
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28817
28834
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28818
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28835
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28836
+ 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(
28837
+ Drawer.Content,
28838
+ {
28839
+ className: contentClassName,
28840
+ "aria-label": title == null ? ariaLabel : void 0,
28841
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28842
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28843
+ },
28844
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28845
+ 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
28846
+ )));
28819
28847
  }
28820
28848
 
28821
28849
  // src/vanilla/host.tsx
@@ -29255,8 +29283,13 @@ var drawerProps = {
29255
29283
  triggerText: String,
29256
29284
  showHandle: Boolean,
29257
29285
  handleClassName: String,
29286
+ ariaLabel: String,
29287
+ ariaLabelledBy: String,
29288
+ ariaDescribedBy: String,
29258
29289
  title: [String, Number, Object, Function],
29290
+ titleVisuallyHidden: Boolean,
29259
29291
  description: [String, Number, Object, Function],
29292
+ descriptionVisuallyHidden: Boolean,
29260
29293
  content: [String, Number, Object, Function],
29261
29294
  overlayClassName: String,
29262
29295
  contentClassName: String
@@ -29317,8 +29350,13 @@ var DrawerRoot = (0, import_vue.defineComponent)({
29317
29350
  triggerText: props.triggerText,
29318
29351
  showHandle: props.showHandle,
29319
29352
  handleClassName: props.handleClassName,
29353
+ ariaLabel: props.ariaLabel,
29354
+ ariaLabelledBy: props.ariaLabelledBy,
29355
+ ariaDescribedBy: props.ariaDescribedBy,
29320
29356
  title: props.title,
29357
+ titleVisuallyHidden: props.titleVisuallyHidden,
29321
29358
  description: props.description,
29359
+ descriptionVisuallyHidden: props.descriptionVisuallyHidden,
29322
29360
  content: props.content,
29323
29361
  overlayClassName: props.overlayClassName,
29324
29362
  contentClassName: props.contentClassName
package/dist/vue/index.mjs CHANGED
@@ -28715,6 +28715,18 @@ var Drawer = {
28715
28715
  };
28716
28716
 
28717
28717
  // src/vanilla/render.tsx
28718
+ var VISUALLY_HIDDEN_STYLE = {
28719
+ position: "absolute",
28720
+ width: "1px",
28721
+ height: "1px",
28722
+ padding: 0,
28723
+ margin: "-1px",
28724
+ overflow: "hidden",
28725
+ clip: "rect(0, 0, 0, 0)",
28726
+ whiteSpace: "nowrap",
28727
+ border: 0
28728
+ };
28729
+ var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
28718
28730
  function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
28719
28731
  const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
28720
28732
  const baseProps = {
@@ -28743,9 +28755,9 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
28743
28755
  fadeFromIndex: void 0
28744
28756
  };
28745
28757
  }
28746
- function VanillaNode({ value }) {
28758
+ function VanillaNode({ value, dataAttribute }) {
28747
28759
  const ref = import_react10.default.useRef(null);
28748
- import_react10.default.useEffect(() => {
28760
+ useSafeLayoutEffect(() => {
28749
28761
  const element = ref.current;
28750
28762
  if (!element) return;
28751
28763
  element.innerHTML = "";
@@ -28766,7 +28778,7 @@ function VanillaNode({ value }) {
28766
28778
  if (value == null) {
28767
28779
  return null;
28768
28780
  }
28769
- return /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "", ref });
28781
+ return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
28770
28782
  }
28771
28783
  function VanillaDrawerRenderer({
28772
28784
  options,
@@ -28781,8 +28793,13 @@ function VanillaDrawerRenderer({
28781
28793
  triggerText,
28782
28794
  showHandle,
28783
28795
  handleClassName,
28796
+ ariaLabel,
28797
+ ariaLabelledBy,
28798
+ ariaDescribedBy,
28784
28799
  title,
28800
+ titleVisuallyHidden,
28785
28801
  description,
28802
+ descriptionVisuallyHidden,
28786
28803
  content,
28787
28804
  overlayClassName,
28788
28805
  contentClassName,
@@ -28790,7 +28807,18 @@ function VanillaDrawerRenderer({
28790
28807
  } = options;
28791
28808
  const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
28792
28809
  const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
28793
- return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(Drawer.Content, { className: contentClassName }, shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content }))));
28810
+ const shouldRenderVanillaContent = title != null || description != null || content != null;
28811
+ 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(
28812
+ Drawer.Content,
28813
+ {
28814
+ className: contentClassName,
28815
+ "aria-label": title == null ? ariaLabel : void 0,
28816
+ "aria-labelledby": title == null ? ariaLabelledBy : void 0,
28817
+ "aria-describedby": description == null ? ariaDescribedBy : void 0
28818
+ },
28819
+ shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
28820
+ 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
28821
+ )));
28794
28822
  }
28795
28823
 
28796
28824
  // src/vanilla/host.tsx
@@ -29230,8 +29258,13 @@ var drawerProps = {
29230
29258
  triggerText: String,
29231
29259
  showHandle: Boolean,
29232
29260
  handleClassName: String,
29261
+ ariaLabel: String,
29262
+ ariaLabelledBy: String,
29263
+ ariaDescribedBy: String,
29233
29264
  title: [String, Number, Object, Function],
29265
+ titleVisuallyHidden: Boolean,
29234
29266
  description: [String, Number, Object, Function],
29267
+ descriptionVisuallyHidden: Boolean,
29235
29268
  content: [String, Number, Object, Function],
29236
29269
  overlayClassName: String,
29237
29270
  contentClassName: String
@@ -29292,8 +29325,13 @@ var DrawerRoot = defineComponent({
29292
29325
  triggerText: props.triggerText,
29293
29326
  showHandle: props.showHandle,
29294
29327
  handleClassName: props.handleClassName,
29328
+ ariaLabel: props.ariaLabel,
29329
+ ariaLabelledBy: props.ariaLabelledBy,
29330
+ ariaDescribedBy: props.ariaDescribedBy,
29295
29331
  title: props.title,
29332
+ titleVisuallyHidden: props.titleVisuallyHidden,
29296
29333
  description: props.description,
29334
+ descriptionVisuallyHidden: props.descriptionVisuallyHidden,
29297
29335
  content: props.content,
29298
29336
  overlayClassName: props.overlayClassName,
29299
29337
  contentClassName: props.contentClassName
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@samline/drawer",
3
- "version": "2.0.1",
3
+ "version": "2.0.3",
4
4
  "description": "A universal drawer package for React, Vue, Svelte, vanilla JS, and browser usage.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",