@wordpress/ui 0.12.1-next.v.202604201441.0 → 0.13.0

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 (857) hide show
  1. package/CHANGELOG.md +59 -2
  2. package/CONTRIBUTING.md +34 -0
  3. package/build/alert-dialog/index.cjs +3 -0
  4. package/build/alert-dialog/index.cjs.map +2 -2
  5. package/build/alert-dialog/popup.cjs +194 -59
  6. package/build/alert-dialog/popup.cjs.map +3 -3
  7. package/build/alert-dialog/portal.cjs +38 -0
  8. package/build/alert-dialog/portal.cjs.map +7 -0
  9. package/build/alert-dialog/types.cjs.map +1 -1
  10. package/build/badge/badge.cjs +84 -5
  11. package/build/badge/badge.cjs.map +3 -3
  12. package/build/button/button.cjs +90 -20
  13. package/build/button/button.cjs.map +3 -3
  14. package/build/button/icon.cjs.map +2 -2
  15. package/build/button/index.cjs +1 -0
  16. package/build/button/index.cjs.map +3 -3
  17. package/build/button/types.cjs.map +1 -1
  18. package/build/card/content.cjs +84 -5
  19. package/build/card/content.cjs.map +3 -3
  20. package/build/card/full-bleed.cjs +84 -5
  21. package/build/card/full-bleed.cjs.map +3 -3
  22. package/build/card/header.cjs +84 -5
  23. package/build/card/header.cjs.map +3 -3
  24. package/build/card/root.cjs +86 -10
  25. package/build/card/root.cjs.map +3 -3
  26. package/build/collapsible-card/content.cjs +90 -7
  27. package/build/collapsible-card/content.cjs.map +3 -3
  28. package/build/collapsible-card/header.cjs +131 -52
  29. package/build/collapsible-card/header.cjs.map +3 -3
  30. package/build/dialog/content.cjs +161 -0
  31. package/build/dialog/content.cjs.map +7 -0
  32. package/build/dialog/context.cjs +12 -56
  33. package/build/dialog/context.cjs.map +2 -2
  34. package/build/dialog/description.cjs +138 -0
  35. package/build/dialog/description.cjs.map +7 -0
  36. package/build/dialog/footer.cjs +86 -6
  37. package/build/dialog/footer.cjs.map +3 -3
  38. package/build/dialog/header.cjs +86 -6
  39. package/build/dialog/header.cjs.map +3 -3
  40. package/build/dialog/index.cjs +9 -0
  41. package/build/dialog/index.cjs.map +2 -2
  42. package/build/dialog/popup.cjs +102 -11
  43. package/build/dialog/popup.cjs.map +3 -3
  44. package/build/dialog/portal.cjs +38 -0
  45. package/build/dialog/portal.cjs.map +7 -0
  46. package/build/dialog/root.cjs +3 -2
  47. package/build/dialog/root.cjs.map +2 -2
  48. package/build/dialog/title.cjs +85 -6
  49. package/build/dialog/title.cjs.map +3 -3
  50. package/build/dialog/types.cjs.map +1 -1
  51. package/build/drawer/action.cjs +48 -0
  52. package/build/drawer/action.cjs.map +7 -0
  53. package/build/drawer/close-icon.cjs +58 -0
  54. package/build/drawer/close-icon.cjs.map +7 -0
  55. package/build/drawer/content.cjs +170 -0
  56. package/build/drawer/content.cjs.map +7 -0
  57. package/build/drawer/context.cjs +44 -0
  58. package/build/drawer/context.cjs.map +7 -0
  59. package/build/drawer/description.cjs +47 -0
  60. package/build/drawer/description.cjs.map +7 -0
  61. package/build/drawer/footer.cjs +144 -0
  62. package/build/drawer/footer.cjs.map +7 -0
  63. package/build/drawer/header.cjs +144 -0
  64. package/build/drawer/header.cjs.map +7 -0
  65. package/build/drawer/index.cjs +61 -0
  66. package/build/drawer/index.cjs.map +7 -0
  67. package/build/drawer/popup.cjs +182 -0
  68. package/build/drawer/popup.cjs.map +7 -0
  69. package/build/drawer/portal.cjs +38 -0
  70. package/build/drawer/portal.cjs.map +7 -0
  71. package/build/drawer/root.cjs +49 -0
  72. package/build/drawer/root.cjs.map +7 -0
  73. package/build/drawer/title.cjs +149 -0
  74. package/build/drawer/title.cjs.map +7 -0
  75. package/build/drawer/trigger.cjs +38 -0
  76. package/build/drawer/trigger.cjs.map +7 -0
  77. package/build/drawer/types.cjs +19 -0
  78. package/build/drawer/types.cjs.map +7 -0
  79. package/build/empty-state/actions.cjs +84 -5
  80. package/build/empty-state/actions.cjs.map +3 -3
  81. package/build/empty-state/description.cjs +84 -5
  82. package/build/empty-state/description.cjs.map +3 -3
  83. package/build/empty-state/icon.cjs +84 -5
  84. package/build/empty-state/icon.cjs.map +3 -3
  85. package/build/empty-state/root.cjs +84 -5
  86. package/build/empty-state/root.cjs.map +3 -3
  87. package/build/empty-state/title.cjs +84 -5
  88. package/build/empty-state/title.cjs.map +3 -3
  89. package/build/empty-state/visual.cjs +84 -5
  90. package/build/empty-state/visual.cjs.map +3 -3
  91. package/build/form/index.cjs +3 -1
  92. package/build/form/index.cjs.map +2 -2
  93. package/build/form/primitives/autocomplete/clear.cjs +62 -0
  94. package/build/form/primitives/autocomplete/clear.cjs.map +7 -0
  95. package/build/form/primitives/autocomplete/collection.cjs +38 -0
  96. package/build/form/primitives/autocomplete/collection.cjs.map +7 -0
  97. package/build/form/primitives/autocomplete/empty.cjs +146 -0
  98. package/build/form/primitives/autocomplete/empty.cjs.map +7 -0
  99. package/build/form/primitives/autocomplete/index.cjs +64 -0
  100. package/build/form/primitives/autocomplete/index.cjs.map +7 -0
  101. package/build/form/primitives/autocomplete/input-group.cjs +36 -0
  102. package/build/form/primitives/autocomplete/input-group.cjs.map +7 -0
  103. package/build/form/primitives/autocomplete/input.cjs +47 -0
  104. package/build/form/primitives/autocomplete/input.cjs.map +7 -0
  105. package/build/form/primitives/autocomplete/item.cjs +157 -0
  106. package/build/form/primitives/autocomplete/item.cjs.map +7 -0
  107. package/build/form/primitives/autocomplete/list-body.cjs +136 -0
  108. package/build/form/primitives/autocomplete/list-body.cjs.map +7 -0
  109. package/build/form/primitives/autocomplete/list.cjs +146 -0
  110. package/build/form/primitives/autocomplete/list.cjs.map +7 -0
  111. package/build/form/primitives/autocomplete/popup.cjs +175 -0
  112. package/build/form/primitives/autocomplete/popup.cjs.map +7 -0
  113. package/build/form/primitives/autocomplete/portal.cjs +38 -0
  114. package/build/form/primitives/autocomplete/portal.cjs.map +7 -0
  115. package/build/form/primitives/autocomplete/root.cjs +35 -0
  116. package/build/form/primitives/autocomplete/root.cjs.map +7 -0
  117. package/build/form/primitives/autocomplete/types.cjs +19 -0
  118. package/build/form/primitives/autocomplete/types.cjs.map +7 -0
  119. package/build/form/primitives/autocomplete/value.cjs +35 -0
  120. package/build/form/primitives/autocomplete/value.cjs.map +7 -0
  121. package/build/form/primitives/field/description.cjs +86 -10
  122. package/build/form/primitives/field/description.cjs.map +3 -3
  123. package/build/form/primitives/field/details.cjs +84 -5
  124. package/build/form/primitives/field/details.cjs.map +3 -3
  125. package/build/form/primitives/field/label.cjs +84 -5
  126. package/build/form/primitives/field/label.cjs.map +3 -3
  127. package/build/form/primitives/field/root.cjs +84 -5
  128. package/build/form/primitives/field/root.cjs.map +3 -3
  129. package/build/form/primitives/fieldset/description.cjs +86 -10
  130. package/build/form/primitives/fieldset/description.cjs.map +3 -3
  131. package/build/form/primitives/fieldset/details.cjs +84 -5
  132. package/build/form/primitives/fieldset/details.cjs.map +3 -3
  133. package/build/form/primitives/fieldset/legend.cjs +84 -5
  134. package/build/form/primitives/fieldset/legend.cjs.map +3 -3
  135. package/build/form/primitives/fieldset/root.cjs +84 -5
  136. package/build/form/primitives/fieldset/root.cjs.map +3 -3
  137. package/build/form/primitives/index.cjs +3 -0
  138. package/build/form/primitives/index.cjs.map +2 -2
  139. package/build/form/primitives/input/input.cjs +88 -15
  140. package/build/form/primitives/input/input.cjs.map +3 -3
  141. package/build/form/primitives/input-layout/input-layout.cjs +88 -15
  142. package/build/form/primitives/input-layout/input-layout.cjs.map +3 -3
  143. package/build/form/primitives/input-layout/slot.cjs +84 -5
  144. package/build/form/primitives/input-layout/slot.cjs.map +3 -3
  145. package/build/form/primitives/select/index.cjs +3 -0
  146. package/build/form/primitives/select/index.cjs.map +2 -2
  147. package/build/form/primitives/select/item.cjs +88 -13
  148. package/build/form/primitives/select/item.cjs.map +3 -3
  149. package/build/form/primitives/select/popup.cjs +97 -23
  150. package/build/form/primitives/select/popup.cjs.map +3 -3
  151. package/build/form/primitives/select/portal.cjs +38 -0
  152. package/build/form/primitives/select/portal.cjs.map +7 -0
  153. package/build/form/primitives/select/root.cjs.map +2 -2
  154. package/build/form/primitives/select/trigger.cjs +98 -16
  155. package/build/form/primitives/select/trigger.cjs.map +3 -3
  156. package/build/form/primitives/select/types.cjs.map +1 -1
  157. package/build/form/primitives/textarea/textarea.cjs +86 -10
  158. package/build/form/primitives/textarea/textarea.cjs.map +3 -3
  159. package/build/form/select-control/context.cjs +37 -0
  160. package/build/form/select-control/context.cjs.map +7 -0
  161. package/build/form/select-control/index.cjs +39 -0
  162. package/build/form/select-control/index.cjs.map +7 -0
  163. package/build/form/select-control/item.cjs +41 -0
  164. package/build/form/select-control/item.cjs.map +7 -0
  165. package/build/form/select-control/select-control.cjs +75 -0
  166. package/build/form/select-control/select-control.cjs.map +7 -0
  167. package/build/form/select-control/types.cjs +19 -0
  168. package/build/form/select-control/types.cjs.map +7 -0
  169. package/build/form/types.cjs.map +1 -1
  170. package/build/icon-button/icon-button.cjs +86 -6
  171. package/build/icon-button/icon-button.cjs.map +3 -3
  172. package/build/icon-button/types.cjs.map +1 -1
  173. package/build/index.cjs +3 -0
  174. package/build/index.cjs.map +2 -2
  175. package/build/link/link.cjs +90 -20
  176. package/build/link/link.cjs.map +3 -3
  177. package/build/notice/action-button.cjs +84 -5
  178. package/build/notice/action-button.cjs.map +3 -3
  179. package/build/notice/action-link.cjs +84 -5
  180. package/build/notice/action-link.cjs.map +3 -3
  181. package/build/notice/actions.cjs +84 -5
  182. package/build/notice/actions.cjs.map +3 -3
  183. package/build/notice/close-icon.cjs +84 -5
  184. package/build/notice/close-icon.cjs.map +3 -3
  185. package/build/notice/description.cjs +84 -5
  186. package/build/notice/description.cjs.map +3 -3
  187. package/build/notice/root.cjs +86 -10
  188. package/build/notice/root.cjs.map +3 -3
  189. package/build/notice/title.cjs +84 -5
  190. package/build/notice/title.cjs.map +3 -3
  191. package/build/popover/arrow.cjs +85 -6
  192. package/build/popover/arrow.cjs.map +3 -3
  193. package/build/popover/context.cjs +4 -56
  194. package/build/popover/context.cjs.map +2 -2
  195. package/build/popover/description.cjs +1 -24
  196. package/build/popover/description.cjs.map +4 -4
  197. package/build/popover/index.cjs +3 -0
  198. package/build/popover/index.cjs.map +2 -2
  199. package/build/popover/popup.cjs +96 -23
  200. package/build/popover/popup.cjs.map +3 -3
  201. package/build/popover/portal.cjs +38 -0
  202. package/build/popover/portal.cjs.map +7 -0
  203. package/build/popover/root.cjs.map +1 -1
  204. package/build/popover/title.cjs +92 -2
  205. package/build/popover/title.cjs.map +3 -3
  206. package/build/popover/types.cjs.map +1 -1
  207. package/build/stack/stack.cjs +84 -5
  208. package/build/stack/stack.cjs.map +3 -3
  209. package/build/tabs/list.cjs +84 -5
  210. package/build/tabs/list.cjs.map +3 -3
  211. package/build/tabs/panel.cjs +86 -10
  212. package/build/tabs/panel.cjs.map +3 -3
  213. package/build/tabs/tab.cjs +84 -5
  214. package/build/tabs/tab.cjs.map +3 -3
  215. package/build/text/text.cjs +88 -12
  216. package/build/text/text.cjs.map +3 -3
  217. package/build/tooltip/index.cjs +6 -0
  218. package/build/tooltip/index.cjs.map +2 -2
  219. package/build/tooltip/popup.cjs +114 -46
  220. package/build/tooltip/popup.cjs.map +4 -4
  221. package/build/tooltip/portal.cjs +38 -0
  222. package/build/tooltip/portal.cjs.map +7 -0
  223. package/build/tooltip/positioner.cjs +159 -0
  224. package/build/tooltip/positioner.cjs.map +7 -0
  225. package/build/tooltip/provider.cjs +2 -2
  226. package/build/tooltip/provider.cjs.map +3 -3
  227. package/build/tooltip/root.cjs.map +3 -3
  228. package/build/tooltip/trigger.cjs +2 -2
  229. package/build/tooltip/trigger.cjs.map +3 -3
  230. package/build/tooltip/types.cjs.map +1 -1
  231. package/build/utils/create-overlay-modal-context.cjs +48 -0
  232. package/build/utils/create-overlay-modal-context.cjs.map +7 -0
  233. package/build/utils/create-overlay-title-validation.cjs +93 -0
  234. package/build/utils/create-overlay-title-validation.cjs.map +7 -0
  235. package/build/utils/render-slot-with-children.cjs +34 -0
  236. package/build/utils/render-slot-with-children.cjs.map +7 -0
  237. package/build/utils/use-deprioritized-initial-focus.cjs +8 -8
  238. package/build/utils/use-deprioritized-initial-focus.cjs.map +2 -2
  239. package/build/utils/use-overlay-scroll-state-attributes.cjs +140 -0
  240. package/build/utils/use-overlay-scroll-state-attributes.cjs.map +7 -0
  241. package/build/visually-hidden/visually-hidden.cjs +89 -6
  242. package/build/visually-hidden/visually-hidden.cjs.map +3 -3
  243. package/build-module/alert-dialog/index.mjs +2 -0
  244. package/build-module/alert-dialog/index.mjs.map +2 -2
  245. package/build-module/alert-dialog/popup.mjs +198 -60
  246. package/build-module/alert-dialog/popup.mjs.map +3 -3
  247. package/build-module/alert-dialog/portal.mjs +13 -0
  248. package/build-module/alert-dialog/portal.mjs.map +7 -0
  249. package/build-module/badge/badge.mjs +84 -5
  250. package/build-module/badge/badge.mjs.map +3 -3
  251. package/build-module/button/button.mjs +90 -20
  252. package/build-module/button/button.mjs.map +3 -3
  253. package/build-module/button/icon.mjs.map +2 -2
  254. package/build-module/button/index.mjs +3 -2
  255. package/build-module/button/index.mjs.map +2 -2
  256. package/build-module/card/content.mjs +84 -5
  257. package/build-module/card/content.mjs.map +3 -3
  258. package/build-module/card/full-bleed.mjs +84 -5
  259. package/build-module/card/full-bleed.mjs.map +3 -3
  260. package/build-module/card/header.mjs +84 -5
  261. package/build-module/card/header.mjs.map +3 -3
  262. package/build-module/card/root.mjs +86 -10
  263. package/build-module/card/root.mjs.map +3 -3
  264. package/build-module/collapsible-card/content.mjs +90 -7
  265. package/build-module/collapsible-card/content.mjs.map +3 -3
  266. package/build-module/collapsible-card/header.mjs +131 -52
  267. package/build-module/collapsible-card/header.mjs.map +3 -3
  268. package/build-module/dialog/content.mjs +126 -0
  269. package/build-module/dialog/content.mjs.map +7 -0
  270. package/build-module/dialog/context.mjs +10 -63
  271. package/build-module/dialog/context.mjs.map +2 -2
  272. package/build-module/dialog/description.mjs +113 -0
  273. package/build-module/dialog/description.mjs.map +7 -0
  274. package/build-module/dialog/footer.mjs +86 -6
  275. package/build-module/dialog/footer.mjs.map +3 -3
  276. package/build-module/dialog/header.mjs +86 -6
  277. package/build-module/dialog/header.mjs.map +3 -3
  278. package/build-module/dialog/index.mjs +6 -0
  279. package/build-module/dialog/index.mjs.map +2 -2
  280. package/build-module/dialog/popup.mjs +104 -13
  281. package/build-module/dialog/popup.mjs.map +3 -3
  282. package/build-module/dialog/portal.mjs +13 -0
  283. package/build-module/dialog/portal.mjs.map +7 -0
  284. package/build-module/dialog/root.mjs +3 -2
  285. package/build-module/dialog/root.mjs.map +2 -2
  286. package/build-module/dialog/title.mjs +85 -6
  287. package/build-module/dialog/title.mjs.map +3 -3
  288. package/build-module/drawer/action.mjs +23 -0
  289. package/build-module/drawer/action.mjs.map +7 -0
  290. package/build-module/drawer/close-icon.mjs +33 -0
  291. package/build-module/drawer/close-icon.mjs.map +7 -0
  292. package/build-module/drawer/content.mjs +135 -0
  293. package/build-module/drawer/content.mjs.map +7 -0
  294. package/build-module/drawer/context.mjs +16 -0
  295. package/build-module/drawer/context.mjs.map +7 -0
  296. package/build-module/drawer/description.mjs +22 -0
  297. package/build-module/drawer/description.mjs.map +7 -0
  298. package/build-module/drawer/footer.mjs +109 -0
  299. package/build-module/drawer/footer.mjs.map +7 -0
  300. package/build-module/drawer/header.mjs +109 -0
  301. package/build-module/drawer/header.mjs.map +7 -0
  302. package/build-module/drawer/index.mjs +26 -0
  303. package/build-module/drawer/index.mjs.map +7 -0
  304. package/build-module/drawer/popup.mjs +149 -0
  305. package/build-module/drawer/popup.mjs.map +7 -0
  306. package/build-module/drawer/portal.mjs +13 -0
  307. package/build-module/drawer/portal.mjs.map +7 -0
  308. package/build-module/drawer/root.mjs +24 -0
  309. package/build-module/drawer/root.mjs.map +7 -0
  310. package/build-module/drawer/title.mjs +124 -0
  311. package/build-module/drawer/title.mjs.map +7 -0
  312. package/build-module/drawer/trigger.mjs +13 -0
  313. package/build-module/drawer/trigger.mjs.map +7 -0
  314. package/build-module/drawer/types.mjs +1 -0
  315. package/build-module/drawer/types.mjs.map +7 -0
  316. package/build-module/empty-state/actions.mjs +84 -5
  317. package/build-module/empty-state/actions.mjs.map +3 -3
  318. package/build-module/empty-state/description.mjs +84 -5
  319. package/build-module/empty-state/description.mjs.map +3 -3
  320. package/build-module/empty-state/icon.mjs +84 -5
  321. package/build-module/empty-state/icon.mjs.map +3 -3
  322. package/build-module/empty-state/root.mjs +84 -5
  323. package/build-module/empty-state/root.mjs.map +3 -3
  324. package/build-module/empty-state/title.mjs +84 -5
  325. package/build-module/empty-state/title.mjs.map +3 -3
  326. package/build-module/empty-state/visual.mjs +84 -5
  327. package/build-module/empty-state/visual.mjs.map +3 -3
  328. package/build-module/form/index.mjs +1 -0
  329. package/build-module/form/index.mjs.map +2 -2
  330. package/build-module/form/primitives/autocomplete/clear.mjs +37 -0
  331. package/build-module/form/primitives/autocomplete/clear.mjs.map +7 -0
  332. package/build-module/form/primitives/autocomplete/collection.mjs +13 -0
  333. package/build-module/form/primitives/autocomplete/collection.mjs.map +7 -0
  334. package/build-module/form/primitives/autocomplete/empty.mjs +111 -0
  335. package/build-module/form/primitives/autocomplete/empty.mjs.map +7 -0
  336. package/build-module/form/primitives/autocomplete/index.mjs +28 -0
  337. package/build-module/form/primitives/autocomplete/index.mjs.map +7 -0
  338. package/build-module/form/primitives/autocomplete/input-group.mjs +11 -0
  339. package/build-module/form/primitives/autocomplete/input-group.mjs.map +7 -0
  340. package/build-module/form/primitives/autocomplete/input.mjs +22 -0
  341. package/build-module/form/primitives/autocomplete/input.mjs.map +7 -0
  342. package/build-module/form/primitives/autocomplete/item.mjs +122 -0
  343. package/build-module/form/primitives/autocomplete/item.mjs.map +7 -0
  344. package/build-module/form/primitives/autocomplete/list-body.mjs +111 -0
  345. package/build-module/form/primitives/autocomplete/list-body.mjs.map +7 -0
  346. package/build-module/form/primitives/autocomplete/list.mjs +111 -0
  347. package/build-module/form/primitives/autocomplete/list.mjs.map +7 -0
  348. package/build-module/form/primitives/autocomplete/popup.mjs +142 -0
  349. package/build-module/form/primitives/autocomplete/popup.mjs.map +7 -0
  350. package/build-module/form/primitives/autocomplete/portal.mjs +13 -0
  351. package/build-module/form/primitives/autocomplete/portal.mjs.map +7 -0
  352. package/build-module/form/primitives/autocomplete/root.mjs +10 -0
  353. package/build-module/form/primitives/autocomplete/root.mjs.map +7 -0
  354. package/build-module/form/primitives/autocomplete/types.mjs +1 -0
  355. package/build-module/form/primitives/autocomplete/types.mjs.map +7 -0
  356. package/build-module/form/primitives/autocomplete/value.mjs +10 -0
  357. package/build-module/form/primitives/autocomplete/value.mjs.map +7 -0
  358. package/build-module/form/primitives/field/description.mjs +86 -10
  359. package/build-module/form/primitives/field/description.mjs.map +3 -3
  360. package/build-module/form/primitives/field/details.mjs +84 -5
  361. package/build-module/form/primitives/field/details.mjs.map +3 -3
  362. package/build-module/form/primitives/field/label.mjs +84 -5
  363. package/build-module/form/primitives/field/label.mjs.map +3 -3
  364. package/build-module/form/primitives/field/root.mjs +84 -5
  365. package/build-module/form/primitives/field/root.mjs.map +3 -3
  366. package/build-module/form/primitives/fieldset/description.mjs +86 -10
  367. package/build-module/form/primitives/fieldset/description.mjs.map +3 -3
  368. package/build-module/form/primitives/fieldset/details.mjs +84 -5
  369. package/build-module/form/primitives/fieldset/details.mjs.map +3 -3
  370. package/build-module/form/primitives/fieldset/legend.mjs +84 -5
  371. package/build-module/form/primitives/fieldset/legend.mjs.map +3 -3
  372. package/build-module/form/primitives/fieldset/root.mjs +84 -5
  373. package/build-module/form/primitives/fieldset/root.mjs.map +3 -3
  374. package/build-module/form/primitives/index.mjs +2 -0
  375. package/build-module/form/primitives/index.mjs.map +2 -2
  376. package/build-module/form/primitives/input/input.mjs +88 -15
  377. package/build-module/form/primitives/input/input.mjs.map +3 -3
  378. package/build-module/form/primitives/input-layout/input-layout.mjs +88 -15
  379. package/build-module/form/primitives/input-layout/input-layout.mjs.map +3 -3
  380. package/build-module/form/primitives/input-layout/slot.mjs +84 -5
  381. package/build-module/form/primitives/input-layout/slot.mjs.map +3 -3
  382. package/build-module/form/primitives/select/index.mjs +2 -0
  383. package/build-module/form/primitives/select/index.mjs.map +2 -2
  384. package/build-module/form/primitives/select/item.mjs +88 -13
  385. package/build-module/form/primitives/select/item.mjs.map +3 -3
  386. package/build-module/form/primitives/select/popup.mjs +97 -23
  387. package/build-module/form/primitives/select/popup.mjs.map +3 -3
  388. package/build-module/form/primitives/select/portal.mjs +13 -0
  389. package/build-module/form/primitives/select/portal.mjs.map +7 -0
  390. package/build-module/form/primitives/select/root.mjs.map +2 -2
  391. package/build-module/form/primitives/select/trigger.mjs +98 -16
  392. package/build-module/form/primitives/select/trigger.mjs.map +3 -3
  393. package/build-module/form/primitives/textarea/textarea.mjs +86 -10
  394. package/build-module/form/primitives/textarea/textarea.mjs.map +3 -3
  395. package/build-module/form/select-control/context.mjs +11 -0
  396. package/build-module/form/select-control/context.mjs.map +7 -0
  397. package/build-module/form/select-control/index.mjs +14 -0
  398. package/build-module/form/select-control/index.mjs.map +7 -0
  399. package/build-module/form/select-control/item.mjs +16 -0
  400. package/build-module/form/select-control/item.mjs.map +7 -0
  401. package/build-module/form/select-control/select-control.mjs +50 -0
  402. package/build-module/form/select-control/select-control.mjs.map +7 -0
  403. package/build-module/form/select-control/types.mjs +1 -0
  404. package/build-module/form/select-control/types.mjs.map +7 -0
  405. package/build-module/icon-button/icon-button.mjs +86 -6
  406. package/build-module/icon-button/icon-button.mjs.map +3 -3
  407. package/build-module/index.mjs +2 -0
  408. package/build-module/index.mjs.map +2 -2
  409. package/build-module/link/link.mjs +90 -20
  410. package/build-module/link/link.mjs.map +3 -3
  411. package/build-module/notice/action-button.mjs +84 -5
  412. package/build-module/notice/action-button.mjs.map +3 -3
  413. package/build-module/notice/action-link.mjs +84 -5
  414. package/build-module/notice/action-link.mjs.map +3 -3
  415. package/build-module/notice/actions.mjs +84 -5
  416. package/build-module/notice/actions.mjs.map +3 -3
  417. package/build-module/notice/close-icon.mjs +84 -5
  418. package/build-module/notice/close-icon.mjs.map +3 -3
  419. package/build-module/notice/description.mjs +84 -5
  420. package/build-module/notice/description.mjs.map +3 -3
  421. package/build-module/notice/root.mjs +86 -10
  422. package/build-module/notice/root.mjs.map +3 -3
  423. package/build-module/notice/title.mjs +84 -5
  424. package/build-module/notice/title.mjs.map +3 -3
  425. package/build-module/popover/arrow.mjs +85 -6
  426. package/build-module/popover/arrow.mjs.map +3 -3
  427. package/build-module/popover/context.mjs +4 -63
  428. package/build-module/popover/context.mjs.map +2 -2
  429. package/build-module/popover/description.mjs +1 -14
  430. package/build-module/popover/description.mjs.map +3 -3
  431. package/build-module/popover/index.mjs +2 -0
  432. package/build-module/popover/index.mjs.map +2 -2
  433. package/build-module/popover/popup.mjs +97 -24
  434. package/build-module/popover/popup.mjs.map +3 -3
  435. package/build-module/popover/portal.mjs +13 -0
  436. package/build-module/popover/portal.mjs.map +7 -0
  437. package/build-module/popover/root.mjs.map +1 -1
  438. package/build-module/popover/title.mjs +92 -2
  439. package/build-module/popover/title.mjs.map +3 -3
  440. package/build-module/stack/stack.mjs +84 -5
  441. package/build-module/stack/stack.mjs.map +3 -3
  442. package/build-module/tabs/list.mjs +84 -5
  443. package/build-module/tabs/list.mjs.map +3 -3
  444. package/build-module/tabs/panel.mjs +86 -10
  445. package/build-module/tabs/panel.mjs.map +3 -3
  446. package/build-module/tabs/tab.mjs +84 -5
  447. package/build-module/tabs/tab.mjs.map +3 -3
  448. package/build-module/text/text.mjs +88 -12
  449. package/build-module/text/text.mjs.map +3 -3
  450. package/build-module/tooltip/index.mjs +4 -0
  451. package/build-module/tooltip/index.mjs.map +2 -2
  452. package/build-module/tooltip/popup.mjs +115 -47
  453. package/build-module/tooltip/popup.mjs.map +3 -3
  454. package/build-module/tooltip/portal.mjs +13 -0
  455. package/build-module/tooltip/portal.mjs.map +7 -0
  456. package/build-module/tooltip/positioner.mjs +124 -0
  457. package/build-module/tooltip/positioner.mjs.map +7 -0
  458. package/build-module/tooltip/provider.mjs +3 -3
  459. package/build-module/tooltip/provider.mjs.map +2 -2
  460. package/build-module/tooltip/root.mjs +2 -2
  461. package/build-module/tooltip/root.mjs.map +2 -2
  462. package/build-module/tooltip/trigger.mjs +3 -3
  463. package/build-module/tooltip/trigger.mjs.map +2 -2
  464. package/build-module/utils/create-overlay-modal-context.mjs +23 -0
  465. package/build-module/utils/create-overlay-modal-context.mjs.map +7 -0
  466. package/build-module/utils/create-overlay-title-validation.mjs +75 -0
  467. package/build-module/utils/create-overlay-title-validation.mjs.map +7 -0
  468. package/build-module/utils/render-slot-with-children.mjs +9 -0
  469. package/build-module/utils/render-slot-with-children.mjs.map +7 -0
  470. package/build-module/utils/use-deprioritized-initial-focus.mjs +9 -9
  471. package/build-module/utils/use-deprioritized-initial-focus.mjs.map +2 -2
  472. package/build-module/utils/use-overlay-scroll-state-attributes.mjs +114 -0
  473. package/build-module/utils/use-overlay-scroll-state-attributes.mjs.map +7 -0
  474. package/build-module/visually-hidden/visually-hidden.mjs +89 -6
  475. package/build-module/visually-hidden/visually-hidden.mjs.map +3 -3
  476. package/build-types/alert-dialog/index.d.ts +1 -0
  477. package/build-types/alert-dialog/index.d.ts.map +1 -1
  478. package/build-types/alert-dialog/popup.d.ts.map +1 -1
  479. package/build-types/alert-dialog/portal.d.ts +9 -0
  480. package/build-types/alert-dialog/portal.d.ts.map +1 -0
  481. package/build-types/alert-dialog/root.d.ts +1 -1
  482. package/build-types/alert-dialog/root.d.ts.map +1 -1
  483. package/build-types/alert-dialog/stories/index.story.d.ts +28 -0
  484. package/build-types/alert-dialog/stories/index.story.d.ts.map +1 -1
  485. package/build-types/alert-dialog/types.d.ts +25 -3
  486. package/build-types/alert-dialog/types.d.ts.map +1 -1
  487. package/build-types/badge/stories/choosing-intent.story.d.ts.map +1 -1
  488. package/build-types/badge/stories/index.story.d.ts.map +1 -1
  489. package/build-types/button/button.d.ts +3 -0
  490. package/build-types/button/button.d.ts.map +1 -1
  491. package/build-types/button/icon.d.ts +1 -8
  492. package/build-types/button/icon.d.ts.map +1 -1
  493. package/build-types/button/index.d.ts +6 -5
  494. package/build-types/button/index.d.ts.map +1 -1
  495. package/build-types/button/stories/index.story.d.ts.map +1 -1
  496. package/build-types/button/types.d.ts +7 -0
  497. package/build-types/button/types.d.ts.map +1 -1
  498. package/build-types/card/stories/index.story.d.ts.map +1 -1
  499. package/build-types/collapsible/panel.d.ts +1 -1
  500. package/build-types/collapsible/root.d.ts +1 -1
  501. package/build-types/collapsible/stories/index.story.d.ts.map +1 -1
  502. package/build-types/collapsible/trigger.d.ts +1 -1
  503. package/build-types/collapsible-card/content.d.ts.map +1 -1
  504. package/build-types/collapsible-card/header.d.ts +6 -0
  505. package/build-types/collapsible-card/header.d.ts.map +1 -1
  506. package/build-types/collapsible-card/stories/index.story.d.ts +8 -0
  507. package/build-types/collapsible-card/stories/index.story.d.ts.map +1 -1
  508. package/build-types/dialog/content.d.ts +17 -0
  509. package/build-types/dialog/content.d.ts.map +1 -0
  510. package/build-types/dialog/context.d.ts +11 -16
  511. package/build-types/dialog/context.d.ts.map +1 -1
  512. package/build-types/dialog/description.d.ts +9 -0
  513. package/build-types/dialog/description.d.ts.map +1 -0
  514. package/build-types/dialog/footer.d.ts +8 -1
  515. package/build-types/dialog/footer.d.ts.map +1 -1
  516. package/build-types/dialog/header.d.ts +8 -1
  517. package/build-types/dialog/header.d.ts.map +1 -1
  518. package/build-types/dialog/index.d.ts +4 -1
  519. package/build-types/dialog/index.d.ts.map +1 -1
  520. package/build-types/dialog/popup.d.ts +2 -0
  521. package/build-types/dialog/popup.d.ts.map +1 -1
  522. package/build-types/dialog/portal.d.ts +10 -0
  523. package/build-types/dialog/portal.d.ts.map +1 -0
  524. package/build-types/dialog/root.d.ts +14 -4
  525. package/build-types/dialog/root.d.ts.map +1 -1
  526. package/build-types/dialog/stories/index.story.d.ts +29 -6
  527. package/build-types/dialog/stories/index.story.d.ts.map +1 -1
  528. package/build-types/dialog/types.d.ts +60 -7
  529. package/build-types/dialog/types.d.ts.map +1 -1
  530. package/build-types/drawer/action.d.ts +8 -0
  531. package/build-types/drawer/action.d.ts.map +1 -0
  532. package/build-types/drawer/close-icon.d.ts +8 -0
  533. package/build-types/drawer/close-icon.d.ts.map +1 -0
  534. package/build-types/drawer/content.d.ts +24 -0
  535. package/build-types/drawer/content.d.ts.map +1 -0
  536. package/build-types/drawer/context.d.ts +20 -0
  537. package/build-types/drawer/context.d.ts.map +1 -0
  538. package/build-types/drawer/description.d.ts +9 -0
  539. package/build-types/drawer/description.d.ts.map +1 -0
  540. package/build-types/drawer/footer.d.ts +15 -0
  541. package/build-types/drawer/footer.d.ts.map +1 -0
  542. package/build-types/drawer/header.d.ts +15 -0
  543. package/build-types/drawer/header.d.ts.map +1 -0
  544. package/build-types/drawer/index.d.ts +13 -0
  545. package/build-types/drawer/index.d.ts.map +1 -0
  546. package/build-types/drawer/popup.d.ts +15 -0
  547. package/build-types/drawer/popup.d.ts.map +1 -0
  548. package/build-types/drawer/portal.d.ts +10 -0
  549. package/build-types/drawer/portal.d.ts.map +1 -0
  550. package/build-types/drawer/root.d.ts +21 -0
  551. package/build-types/drawer/root.d.ts.map +1 -0
  552. package/build-types/drawer/stories/index.story.d.ts +63 -0
  553. package/build-types/drawer/stories/index.story.d.ts.map +1 -0
  554. package/build-types/drawer/test/index.test.d.ts +2 -0
  555. package/build-types/drawer/test/index.test.d.ts.map +1 -0
  556. package/build-types/drawer/title.d.ts +22 -0
  557. package/build-types/drawer/title.d.ts.map +1 -0
  558. package/build-types/drawer/trigger.d.ts +7 -0
  559. package/build-types/drawer/trigger.d.ts.map +1 -0
  560. package/build-types/drawer/types.d.ts +146 -0
  561. package/build-types/drawer/types.d.ts.map +1 -0
  562. package/build-types/empty-state/stories/index.story.d.ts.map +1 -1
  563. package/build-types/form/index.d.ts +1 -0
  564. package/build-types/form/index.d.ts.map +1 -1
  565. package/build-types/form/input-control/stories/index.story.d.ts.map +1 -1
  566. package/build-types/form/primitives/autocomplete/clear.d.ts +13 -0
  567. package/build-types/form/primitives/autocomplete/clear.d.ts.map +1 -0
  568. package/build-types/form/primitives/autocomplete/collection.d.ts +3 -0
  569. package/build-types/form/primitives/autocomplete/collection.d.ts.map +1 -0
  570. package/build-types/form/primitives/autocomplete/empty.d.ts +10 -0
  571. package/build-types/form/primitives/autocomplete/empty.d.ts.map +1 -0
  572. package/build-types/form/primitives/autocomplete/index.d.ts +13 -0
  573. package/build-types/form/primitives/autocomplete/index.d.ts.map +1 -0
  574. package/build-types/form/primitives/autocomplete/input-group.d.ts +16 -0
  575. package/build-types/form/primitives/autocomplete/input-group.d.ts.map +1 -0
  576. package/build-types/form/primitives/autocomplete/input.d.ts +3 -0
  577. package/build-types/form/primitives/autocomplete/input.d.ts.map +1 -0
  578. package/build-types/form/primitives/autocomplete/item.d.ts +10 -0
  579. package/build-types/form/primitives/autocomplete/item.d.ts.map +1 -0
  580. package/build-types/form/primitives/autocomplete/list-body.d.ts +13 -0
  581. package/build-types/form/primitives/autocomplete/list-body.d.ts.map +1 -0
  582. package/build-types/form/primitives/autocomplete/list.d.ts +11 -0
  583. package/build-types/form/primitives/autocomplete/list.d.ts.map +1 -0
  584. package/build-types/form/primitives/autocomplete/popup.d.ts +11 -0
  585. package/build-types/form/primitives/autocomplete/popup.d.ts.map +1 -0
  586. package/build-types/form/primitives/autocomplete/portal.d.ts +8 -0
  587. package/build-types/form/primitives/autocomplete/portal.d.ts.map +1 -0
  588. package/build-types/form/primitives/autocomplete/root.d.ts +8 -0
  589. package/build-types/form/primitives/autocomplete/root.d.ts.map +1 -0
  590. package/build-types/form/primitives/autocomplete/stories/fixtures.d.ts +8 -0
  591. package/build-types/form/primitives/autocomplete/stories/fixtures.d.ts.map +1 -0
  592. package/build-types/form/primitives/autocomplete/stories/index.story.d.ts +41 -0
  593. package/build-types/form/primitives/autocomplete/stories/index.story.d.ts.map +1 -0
  594. package/build-types/form/primitives/autocomplete/test/index.test.d.ts +2 -0
  595. package/build-types/form/primitives/autocomplete/test/index.test.d.ts.map +1 -0
  596. package/build-types/form/primitives/autocomplete/types.d.ts +44 -0
  597. package/build-types/form/primitives/autocomplete/types.d.ts.map +1 -0
  598. package/build-types/form/primitives/autocomplete/value.d.ts +3 -0
  599. package/build-types/form/primitives/autocomplete/value.d.ts.map +1 -0
  600. package/build-types/form/primitives/field/control.d.ts +2 -2
  601. package/build-types/form/primitives/field/description.d.ts +1 -1
  602. package/build-types/form/primitives/field/details.d.ts +1 -1
  603. package/build-types/form/primitives/field/label.d.ts +3 -3
  604. package/build-types/form/primitives/field/root.d.ts +3 -3
  605. package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
  606. package/build-types/form/primitives/fieldset/description.d.ts +1 -1
  607. package/build-types/form/primitives/fieldset/details.d.ts +1 -1
  608. package/build-types/form/primitives/fieldset/legend.d.ts +1 -1
  609. package/build-types/form/primitives/fieldset/root.d.ts +1 -1
  610. package/build-types/form/primitives/fieldset/stories/index.story.d.ts.map +1 -1
  611. package/build-types/form/primitives/index.d.ts +1 -0
  612. package/build-types/form/primitives/index.d.ts.map +1 -1
  613. package/build-types/form/primitives/input/input.d.ts +5 -5
  614. package/build-types/form/primitives/input/stories/index.story.d.ts.map +1 -1
  615. package/build-types/form/primitives/input-layout/stories/index.story.d.ts.map +1 -1
  616. package/build-types/form/primitives/select/index.d.ts +1 -0
  617. package/build-types/form/primitives/select/index.d.ts.map +1 -1
  618. package/build-types/form/primitives/select/item.d.ts +3 -3
  619. package/build-types/form/primitives/select/item.d.ts.map +1 -1
  620. package/build-types/form/primitives/select/popup.d.ts +2 -3
  621. package/build-types/form/primitives/select/popup.d.ts.map +1 -1
  622. package/build-types/form/primitives/select/portal.d.ts +8 -0
  623. package/build-types/form/primitives/select/portal.d.ts.map +1 -0
  624. package/build-types/form/primitives/select/root.d.ts +12 -1
  625. package/build-types/form/primitives/select/root.d.ts.map +1 -1
  626. package/build-types/form/primitives/select/stories/index.story.d.ts +22 -11
  627. package/build-types/form/primitives/select/stories/index.story.d.ts.map +1 -1
  628. package/build-types/form/primitives/select/trigger.d.ts +5 -4
  629. package/build-types/form/primitives/select/trigger.d.ts.map +1 -1
  630. package/build-types/form/primitives/select/types.d.ts +19 -6
  631. package/build-types/form/primitives/select/types.d.ts.map +1 -1
  632. package/build-types/form/primitives/textarea/stories/index.story.d.ts.map +1 -1
  633. package/build-types/form/primitives/textarea/textarea.d.ts +2 -2
  634. package/build-types/form/select-control/context.d.ts +3 -0
  635. package/build-types/form/select-control/context.d.ts.map +1 -0
  636. package/build-types/form/select-control/index.d.ts +20 -0
  637. package/build-types/form/select-control/index.d.ts.map +1 -0
  638. package/build-types/form/select-control/item.d.ts +6 -0
  639. package/build-types/form/select-control/item.d.ts.map +1 -0
  640. package/build-types/form/select-control/select-control.d.ts +11 -0
  641. package/build-types/form/select-control/select-control.d.ts.map +1 -0
  642. package/build-types/form/select-control/stories/index.story.d.ts +40 -0
  643. package/build-types/form/select-control/stories/index.story.d.ts.map +1 -0
  644. package/build-types/form/select-control/test/index.test.d.ts +2 -0
  645. package/build-types/form/select-control/test/index.test.d.ts.map +1 -0
  646. package/build-types/form/select-control/types.d.ts +40 -0
  647. package/build-types/form/select-control/types.d.ts.map +1 -0
  648. package/build-types/form/types.d.ts +1 -1
  649. package/build-types/form/types.d.ts.map +1 -1
  650. package/build-types/icon/stories/index.story.d.ts.map +1 -1
  651. package/build-types/icon-button/icon-button.d.ts +2 -1
  652. package/build-types/icon-button/icon-button.d.ts.map +1 -1
  653. package/build-types/icon-button/stories/index.story.d.ts +5 -0
  654. package/build-types/icon-button/stories/index.story.d.ts.map +1 -1
  655. package/build-types/icon-button/types.d.ts +8 -0
  656. package/build-types/icon-button/types.d.ts.map +1 -1
  657. package/build-types/index.d.ts +1 -0
  658. package/build-types/index.d.ts.map +1 -1
  659. package/build-types/link/stories/index.story.d.ts +2 -3
  660. package/build-types/link/stories/index.story.d.ts.map +1 -1
  661. package/build-types/notice/stories/index.story.d.ts.map +1 -1
  662. package/build-types/popover/context.d.ts +6 -13
  663. package/build-types/popover/context.d.ts.map +1 -1
  664. package/build-types/popover/description.d.ts +0 -1
  665. package/build-types/popover/description.d.ts.map +1 -1
  666. package/build-types/popover/index.d.ts +2 -1
  667. package/build-types/popover/index.d.ts.map +1 -1
  668. package/build-types/popover/popup.d.ts +3 -2
  669. package/build-types/popover/popup.d.ts.map +1 -1
  670. package/build-types/popover/portal.d.ts +9 -0
  671. package/build-types/popover/portal.d.ts.map +1 -0
  672. package/build-types/popover/root.d.ts +2 -2
  673. package/build-types/popover/stories/index.story.d.ts +22 -14
  674. package/build-types/popover/stories/index.story.d.ts.map +1 -1
  675. package/build-types/popover/title.d.ts.map +1 -1
  676. package/build-types/popover/types.d.ts +8 -15
  677. package/build-types/popover/types.d.ts.map +1 -1
  678. package/build-types/stack/stories/index.story.d.ts.map +1 -1
  679. package/build-types/tabs/context.d.ts +1 -1
  680. package/build-types/tabs/context.d.ts.map +1 -1
  681. package/build-types/tabs/list.d.ts +2 -2
  682. package/build-types/tabs/panel.d.ts +1 -1
  683. package/build-types/tabs/root.d.ts +1 -1
  684. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  685. package/build-types/tabs/tab.d.ts +1 -1
  686. package/build-types/text/stories/index.story.d.ts.map +1 -1
  687. package/build-types/tooltip/index.d.ts +3 -1
  688. package/build-types/tooltip/index.d.ts.map +1 -1
  689. package/build-types/tooltip/popup.d.ts.map +1 -1
  690. package/build-types/tooltip/portal.d.ts +8 -0
  691. package/build-types/tooltip/portal.d.ts.map +1 -0
  692. package/build-types/tooltip/positioner.d.ts +9 -0
  693. package/build-types/tooltip/positioner.d.ts.map +1 -0
  694. package/build-types/tooltip/provider.d.ts +1 -1
  695. package/build-types/tooltip/provider.d.ts.map +1 -1
  696. package/build-types/tooltip/stories/index.story.d.ts +28 -2
  697. package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
  698. package/build-types/tooltip/stories/usage-guidelines.story.d.ts.map +1 -1
  699. package/build-types/tooltip/trigger.d.ts.map +1 -1
  700. package/build-types/tooltip/types.d.ts +20 -7
  701. package/build-types/tooltip/types.d.ts.map +1 -1
  702. package/build-types/utils/create-overlay-modal-context.d.ts +14 -0
  703. package/build-types/utils/create-overlay-modal-context.d.ts.map +1 -0
  704. package/build-types/utils/create-overlay-title-validation.d.ts +15 -0
  705. package/build-types/utils/create-overlay-title-validation.d.ts.map +1 -0
  706. package/build-types/utils/render-slot-with-children.d.ts +24 -0
  707. package/build-types/utils/render-slot-with-children.d.ts.map +1 -0
  708. package/build-types/utils/use-deprioritized-initial-focus.d.ts +9 -8
  709. package/build-types/utils/use-deprioritized-initial-focus.d.ts.map +1 -1
  710. package/build-types/utils/use-overlay-scroll-state-attributes.d.ts +85 -0
  711. package/build-types/utils/use-overlay-scroll-state-attributes.d.ts.map +1 -0
  712. package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -1
  713. package/build-types/visually-hidden/visually-hidden.d.ts +4 -20
  714. package/build-types/visually-hidden/visually-hidden.d.ts.map +1 -1
  715. package/package.json +14 -13
  716. package/src/alert-dialog/index.ts +1 -0
  717. package/src/alert-dialog/popup.tsx +114 -45
  718. package/src/alert-dialog/portal.tsx +17 -0
  719. package/src/alert-dialog/stories/index.story.tsx +129 -1
  720. package/src/alert-dialog/style.module.css +13 -4
  721. package/src/alert-dialog/test/index.test.tsx +329 -3
  722. package/src/alert-dialog/types.ts +30 -3
  723. package/src/badge/stories/index.story.tsx +6 -0
  724. package/src/button/button.tsx +3 -0
  725. package/src/button/icon.tsx +1 -8
  726. package/src/button/index.ts +5 -6
  727. package/src/button/stories/index.story.tsx +10 -0
  728. package/src/button/types.ts +8 -0
  729. package/src/card/stories/index.story.tsx +7 -0
  730. package/src/collapsible/stories/index.story.tsx +7 -0
  731. package/src/collapsible-card/content.tsx +12 -1
  732. package/src/collapsible-card/header.tsx +55 -42
  733. package/src/collapsible-card/stories/index.story.tsx +62 -0
  734. package/src/collapsible-card/style.module.css +36 -4
  735. package/src/collapsible-card/test/index.test.tsx +60 -1
  736. package/src/dialog/content.tsx +47 -0
  737. package/src/dialog/context.tsx +14 -111
  738. package/src/dialog/description.tsx +27 -0
  739. package/src/dialog/footer.tsx +10 -2
  740. package/src/dialog/header.tsx +10 -2
  741. package/src/dialog/index.ts +16 -1
  742. package/src/dialog/popup.tsx +27 -8
  743. package/src/dialog/portal.tsx +18 -0
  744. package/src/dialog/root.tsx +22 -5
  745. package/src/dialog/stories/index.story.tsx +200 -48
  746. package/src/dialog/style.module.css +76 -44
  747. package/src/dialog/test/index.test.tsx +632 -12
  748. package/src/dialog/types.ts +64 -6
  749. package/src/drawer/action.tsx +28 -0
  750. package/src/drawer/close-icon.tsx +33 -0
  751. package/src/drawer/content.tsx +65 -0
  752. package/src/drawer/context.tsx +29 -0
  753. package/src/drawer/description.tsx +25 -0
  754. package/src/drawer/footer.tsx +34 -0
  755. package/src/drawer/header.tsx +34 -0
  756. package/src/drawer/index.ts +25 -0
  757. package/src/drawer/popup.tsx +99 -0
  758. package/src/drawer/portal.tsx +18 -0
  759. package/src/drawer/root.tsx +41 -0
  760. package/src/drawer/stories/index.story.tsx +550 -0
  761. package/src/drawer/style.module.css +356 -0
  762. package/src/drawer/test/index.test.tsx +1153 -0
  763. package/src/drawer/title.tsx +53 -0
  764. package/src/drawer/trigger.tsx +14 -0
  765. package/src/drawer/types.ts +174 -0
  766. package/src/empty-state/stories/index.story.tsx +7 -0
  767. package/src/form/index.ts +1 -0
  768. package/src/form/input-control/stories/index.story.tsx +7 -0
  769. package/src/form/primitives/autocomplete/clear.tsx +35 -0
  770. package/src/form/primitives/autocomplete/collection.tsx +13 -0
  771. package/src/form/primitives/autocomplete/empty.tsx +17 -0
  772. package/src/form/primitives/autocomplete/index.ts +12 -0
  773. package/src/form/primitives/autocomplete/input-group.tsx +16 -0
  774. package/src/form/primitives/autocomplete/input.tsx +20 -0
  775. package/src/form/primitives/autocomplete/item.tsx +24 -0
  776. package/src/form/primitives/autocomplete/list-body.tsx +23 -0
  777. package/src/form/primitives/autocomplete/list.tsx +17 -0
  778. package/src/form/primitives/autocomplete/popup.tsx +42 -0
  779. package/src/form/primitives/autocomplete/portal.tsx +16 -0
  780. package/src/form/primitives/autocomplete/root.tsx +11 -0
  781. package/src/form/primitives/autocomplete/stories/fixtures.ts +35 -0
  782. package/src/form/primitives/autocomplete/stories/index.story.tsx +445 -0
  783. package/src/form/primitives/autocomplete/style.module.css +7 -0
  784. package/src/form/primitives/autocomplete/test/index.test.tsx +162 -0
  785. package/src/form/primitives/autocomplete/types.ts +74 -0
  786. package/src/form/primitives/autocomplete/value.tsx +6 -0
  787. package/src/form/primitives/field/stories/index.story.tsx +12 -5
  788. package/src/form/primitives/fieldset/stories/index.story.tsx +10 -3
  789. package/src/form/primitives/index.ts +1 -0
  790. package/src/form/primitives/input/stories/index.story.tsx +7 -0
  791. package/src/form/primitives/input-layout/stories/index.story.tsx +8 -1
  792. package/src/form/primitives/select/index.ts +1 -0
  793. package/src/form/primitives/select/item.tsx +1 -2
  794. package/src/form/primitives/select/popup.tsx +34 -37
  795. package/src/form/primitives/select/portal.tsx +16 -0
  796. package/src/form/primitives/select/root.tsx +13 -2
  797. package/src/form/primitives/select/stories/index.story.tsx +152 -67
  798. package/src/form/primitives/select/test/index.test.tsx +130 -8
  799. package/src/form/primitives/select/trigger.tsx +11 -8
  800. package/src/form/primitives/select/types.ts +22 -7
  801. package/src/form/primitives/textarea/stories/index.story.tsx +7 -0
  802. package/src/form/select-control/context.tsx +9 -0
  803. package/src/form/select-control/index.ts +14 -0
  804. package/src/form/select-control/item.tsx +13 -0
  805. package/src/form/select-control/select-control.tsx +65 -0
  806. package/src/form/select-control/stories/index.story.tsx +220 -0
  807. package/src/form/select-control/test/index.test.tsx +196 -0
  808. package/src/form/select-control/types.ts +50 -0
  809. package/src/form/types.ts +1 -1
  810. package/src/icon/stories/index.story.tsx +7 -0
  811. package/src/icon-button/icon-button.tsx +2 -1
  812. package/src/icon-button/stories/index.story.tsx +20 -0
  813. package/src/icon-button/types.ts +9 -0
  814. package/src/index.ts +1 -0
  815. package/src/link/stories/index.story.tsx +12 -11
  816. package/src/link/style.module.css +2 -1
  817. package/src/notice/stories/index.story.tsx +7 -0
  818. package/src/popover/context.tsx +6 -105
  819. package/src/popover/description.tsx +1 -5
  820. package/src/popover/index.ts +2 -1
  821. package/src/popover/popup.tsx +15 -16
  822. package/src/popover/portal.tsx +17 -0
  823. package/src/popover/root.tsx +2 -2
  824. package/src/popover/stories/index.story.tsx +61 -24
  825. package/src/popover/style.module.css +34 -27
  826. package/src/popover/test/index.test.tsx +46 -7
  827. package/src/popover/title.tsx +3 -2
  828. package/src/popover/types.ts +10 -15
  829. package/src/stack/stories/index.story.tsx +6 -0
  830. package/src/tabs/stories/index.story.tsx +15 -1
  831. package/src/text/stories/index.story.tsx +6 -0
  832. package/src/text/style.module.css +25 -0
  833. package/src/text/text.tsx +2 -2
  834. package/src/tooltip/index.ts +3 -1
  835. package/src/tooltip/popup.tsx +32 -44
  836. package/src/tooltip/portal.tsx +16 -0
  837. package/src/tooltip/positioner.tsx +36 -0
  838. package/src/tooltip/provider.tsx +3 -3
  839. package/src/tooltip/root.tsx +2 -2
  840. package/src/tooltip/stories/index.story.tsx +97 -9
  841. package/src/tooltip/stories/usage-guidelines.story.tsx +5 -0
  842. package/src/tooltip/style.module.css +12 -12
  843. package/src/tooltip/test/index.test.tsx +9 -3
  844. package/src/tooltip/trigger.tsx +3 -7
  845. package/src/tooltip/types.ts +26 -9
  846. package/src/utils/create-overlay-modal-context.tsx +34 -0
  847. package/src/utils/create-overlay-title-validation.tsx +116 -0
  848. package/src/utils/css/dropdown-motion.module.css +3 -3
  849. package/src/utils/css/item-popup.module.css +14 -24
  850. package/src/utils/css/overlay-chrome.module.css +239 -0
  851. package/src/utils/css/select-trigger.module.css +5 -2
  852. package/src/utils/render-slot-with-children.ts +31 -0
  853. package/src/utils/test/use-deprioritized-initial-focus.test.tsx +3 -3
  854. package/src/utils/use-deprioritized-initial-focus.ts +23 -17
  855. package/src/utils/use-overlay-scroll-state-attributes.ts +272 -0
  856. package/src/visually-hidden/stories/index.story.tsx +7 -0
  857. package/src/visually-hidden/visually-hidden.tsx +9 -21
package/src/dialog/types.ts CHANGED
@@ -1,14 +1,18 @@
1
1
  import type { Dialog as _Dialog } from '@base-ui/react/dialog';
2
- import type { ReactNode } from 'react';
2
+ import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
3
+
3
4
  import type { Button } from '../button';
4
5
  import type { IconButton } from '../icon-button';
5
6
  import type { ComponentProps } from '../utils/types';
6
7
 
8
+ export type PortalProps = ComponentPropsWithoutRef< typeof _Dialog.Portal >;
9
+
7
10
  export interface RootProps
8
11
  extends Pick<
9
12
  _Dialog.Root.Props,
10
13
  | 'open'
11
14
  | 'onOpenChange'
15
+ | 'onOpenChangeComplete'
12
16
  | 'defaultOpen'
13
17
  | 'modal'
14
18
  | 'disablePointerDismissal'
@@ -35,18 +39,29 @@ export interface PopupProps
35
39
  children?: ReactNode;
36
40
 
37
41
  /**
38
- * A parent element to render the portal into.
42
+ * Optional portal element, typically `<Dialog.Portal />` with custom
43
+ * `container`, `className`, or `style`. The popup and backdrop are
44
+ * rendered as this portal's children (do not pass `children` on the portal
45
+ * element; they would be ignored).
46
+ *
47
+ * When omitted, `Dialog.Popup` uses `Dialog.Portal` with default props,
48
+ * rendering the portal in the current document's `<body>`.
39
49
  */
40
- container?: _Dialog.Portal.Props[ 'container' ];
50
+ portal?: ReactElement< Omit< PortalProps, 'children' > >;
41
51
 
42
52
  /**
43
53
  * Renders the dialog at a preset width (excluding additional padding from
44
54
  * the viewport edges).
45
55
  *
56
+ * Height is not directly controlled by `size`: for every value except
57
+ * `'full'`, the dialog fits its content up to the viewport height
58
+ * (minus the viewport inset) and scrolls internally when it overflows.
59
+ * `'full'` stretches the dialog to the available viewport height.
60
+ *
46
61
  * - `'small'` — narrow max-width.
47
62
  * - `'medium'` — moderate max-width.
48
63
  * - `'large'` — wide max-width.
49
- * - `'stretch'` — no max-width, stretches to fill available space.
64
+ * - `'stretch'` — no max-width, stretches to fill available width.
50
65
  * - `'full'` — stretches to fill available width and height.
51
66
  *
52
67
  * @default 'medium'
@@ -61,20 +76,56 @@ export interface ActionProps extends ComponentProps< typeof Button > {
61
76
  children?: ReactNode;
62
77
  }
63
78
 
64
- export interface FooterProps extends ComponentProps< 'div' > {
79
+ export interface FooterProps extends ComponentProps< 'footer' > {
65
80
  /**
66
81
  * The content to be rendered inside the component.
67
82
  */
68
83
  children?: ReactNode;
69
84
  }
70
85
 
71
- export interface HeaderProps extends ComponentProps< 'div' > {
86
+ export interface HeaderProps extends ComponentProps< 'header' > {
72
87
  /**
73
88
  * The content to be rendered inside the component.
74
89
  */
75
90
  children?: ReactNode;
76
91
  }
77
92
 
93
+ export interface ContentProps extends ComponentProps< 'div' > {
94
+ /**
95
+ * The body content to be rendered inside the scroll container.
96
+ */
97
+ children?: ReactNode;
98
+ /**
99
+ * The scroll region automatically becomes a keyboard-reachable tab
100
+ * stop (`tabindex="0"`) whenever the body overflows, so keyboard
101
+ * users can arrow-scroll the region (WCAG 2.1.1). It becomes
102
+ * non-tabbable again as soon as the content no longer overflows.
103
+ *
104
+ * If you supply `tabIndex` explicitly, your value wins and is never
105
+ * overwritten — including `tabIndex={ -1 }` to opt out of the
106
+ * automatic tab stop entirely, and including overrides applied
107
+ * after the component had already managed the value.
108
+ *
109
+ * Two narrow edge cases:
110
+ * - If you later *remove* an explicit `tabIndex` at runtime, the
111
+ * component will resume managing it on the next overflow tick; it
112
+ * can't distinguish a previous explicit opt-out from an
113
+ * unconfigured state.
114
+ * - Passing `tabIndex={ 0 }` while the body overflows produces a
115
+ * value identical to the auto-managed one, so the component can
116
+ * no longer tell the two apart and may strip it on the next
117
+ * non-overflow tick. Pick a different value (or rely on the
118
+ * default behavior, which is already `0` while overflowing).
119
+ *
120
+ * Note: the scroll region is intentionally rendered without
121
+ * `role` / `aria-label`, so screen readers don't announce a
122
+ * generic "scrollable" landmark on top of the dialog's existing
123
+ * heading + body; the surrounding `Dialog.Title` and body content
124
+ * provide the context.
125
+ */
126
+ tabIndex?: number;
127
+ }
128
+
78
129
  export interface TitleProps extends ComponentProps< 'h2' > {
79
130
  /**
80
131
  * The title content to be rendered. This serves as both the visible
@@ -86,6 +137,13 @@ export interface TitleProps extends ComponentProps< 'h2' > {
86
137
  children?: ReactNode;
87
138
  }
88
139
 
140
+ export interface DescriptionProps extends ComponentProps< 'p' > {
141
+ /**
142
+ * The description content to be rendered inside the component.
143
+ */
144
+ children?: ReactNode;
145
+ }
146
+
89
147
  export interface CloseIconProps
90
148
  extends Omit<
91
149
  ComponentProps< typeof IconButton >,
package/src/drawer/action.tsx ADDED
@@ -0,0 +1,28 @@
1
+ import { Drawer as _Drawer } from '@base-ui/react/drawer';
2
+ import { forwardRef } from '@wordpress/element';
3
+ import { Button } from '../button';
4
+ import type { ActionProps } from './types';
5
+
6
+ /**
7
+ * Renders a button that closes the drawer when clicked.
8
+ * Accepts all Button component props for styling.
9
+ */
10
+ const Action = forwardRef< HTMLButtonElement, ActionProps >(
11
+ function DrawerAction( { render, disabled, loading, ...props }, ref ) {
12
+ // Resolve `disabled` the same way Button does so that
13
+ // _Drawer.Close's internal useButton (which controls
14
+ // aria-disabled) stays in sync with the rendered Button.
15
+ const resolvedDisabled = disabled ?? loading;
16
+
17
+ return (
18
+ <_Drawer.Close
19
+ ref={ ref }
20
+ render={ <Button render={ render } loading={ loading } /> }
21
+ disabled={ resolvedDisabled }
22
+ { ...props }
23
+ />
24
+ );
25
+ }
26
+ );
27
+
28
+ export { Action };
package/src/drawer/close-icon.tsx ADDED
@@ -0,0 +1,33 @@
1
+ import { Drawer as _Drawer } from '@base-ui/react/drawer';
2
+ import { forwardRef } from '@wordpress/element';
3
+ import { __ } from '@wordpress/i18n';
4
+ import { close } from '@wordpress/icons';
5
+ import { IconButton } from '../icon-button';
6
+ import type { CloseIconProps } from './types';
7
+
8
+ /**
9
+ * Renders an icon button that closes the drawer when clicked.
10
+ * Provides a default close icon and accessible label.
11
+ */
12
+ const CloseIcon = forwardRef< HTMLButtonElement, CloseIconProps >(
13
+ function DrawerCloseIcon( { icon, label, ...props }, ref ) {
14
+ return (
15
+ <_Drawer.Close
16
+ ref={ ref }
17
+ render={
18
+ <IconButton
19
+ variant="minimal"
20
+ size="compact"
21
+ tone="neutral"
22
+ { ...props }
23
+ icon={ icon ?? close }
24
+ label={ label ?? __( 'Close' ) }
25
+ data-wp-ui-drawer-close-icon=""
26
+ />
27
+ }
28
+ />
29
+ );
30
+ }
31
+ );
32
+
33
+ export { CloseIcon };
package/src/drawer/content.tsx ADDED
@@ -0,0 +1,65 @@
1
+ import { mergeProps, useRender } from '@base-ui/react';
2
+ import { Drawer as _Drawer } from '@base-ui/react/drawer';
3
+ import clsx from 'clsx';
4
+ import { forwardRef } from '@wordpress/element';
5
+ import { useMergeRefs } from '@wordpress/compose';
6
+ import { useOverlayScrollStateAttributes } from '../utils/use-overlay-scroll-state-attributes';
7
+ import focusStyles from '../utils/css/focus.module.css';
8
+ import styles from './style.module.css';
9
+ import type { ContentProps } from './types';
10
+
11
+ /**
12
+ * Renders the scrollable body of the drawer, sitting between `Drawer.Header`
13
+ * and `Drawer.Footer` as a flex sibling.
14
+ *
15
+ * **Required for scrolling** — `Drawer.Content` is the element that owns
16
+ * the popup's overflow. Without it, body content that exceeds the popup's
17
+ * available space clips instead of scrolling, and swipe-to-dismiss on
18
+ * scrollable vertical drawers won't gate correctly at the scroll edge.
19
+ * Render it once per popup and wrap any freeform body content in it.
20
+ *
21
+ * Placing `Drawer.Header` or `Drawer.Footer` *inside* `Drawer.Content`
22
+ * makes them scroll with the body (the "non-sticky" opt-out) rather than
23
+ * staying pinned to the popup's edges.
24
+ *
25
+ * Mouse-drag swipe-to-dismiss is preserved in the popup-edge padding
26
+ * gutter and on the chrome regions; mouse drag over the body itself
27
+ * does not dismiss the drawer, so text selection inside the body keeps
28
+ * working normally. Touch swipe-to-dismiss engages from anywhere in
29
+ * the popup (gated by the scroll edge on vertical drawers).
30
+ */
31
+ const Content = forwardRef< HTMLDivElement, ContentProps >(
32
+ function DrawerContent(
33
+ { className, render, children, onScroll, ...props },
34
+ ref
35
+ ) {
36
+ const { ref: scrollStateRef, onScroll: scrollStateOnScroll } =
37
+ useOverlayScrollStateAttributes< HTMLDivElement >( onScroll );
38
+ const mergedRef = useMergeRefs( [ ref, scrollStateRef ] );
39
+
40
+ const element = useRender( {
41
+ defaultTagName: 'div',
42
+ render,
43
+ ref: mergedRef,
44
+ props: mergeProps< 'div' >( props, {
45
+ className: clsx(
46
+ styles.content,
47
+ focusStyles[ 'outset-ring--focus-visible' ],
48
+ className
49
+ ),
50
+ onScroll: scrollStateOnScroll,
51
+ // `_Drawer.Content` carries the `[data-drawer-content]`
52
+ // marker that Base UI's swipe-dismiss logic uses to skip
53
+ // mouse-drag swipes started inside the body, preserving
54
+ // text selection. It must sit *inside* the scroll
55
+ // container so the popup's edge padding gutter falls
56
+ // outside the marker and stays mouse-draggable.
57
+ children: <_Drawer.Content>{ children }</_Drawer.Content>,
58
+ } ),
59
+ } );
60
+
61
+ return element;
62
+ }
63
+ );
64
+
65
+ export { Content };
package/src/drawer/context.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import type { Drawer as _Drawer } from '@base-ui/react/drawer';
2
+ import { createOverlayModalContext } from '../utils/create-overlay-modal-context';
3
+ import { createOverlayTitleValidation } from '../utils/create-overlay-title-validation';
4
+
5
+ // -- Modal context ----------------------------------------------------------
6
+
7
+ const drawerModal =
8
+ createOverlayModalContext< _Drawer.Root.Props[ 'modal' ] >( true );
9
+
10
+ export const DrawerModalProvider = drawerModal.Provider;
11
+ export const useDrawerModal = drawerModal.useModal;
12
+
13
+ // -- Validation context (dev-only) ------------------------------------------
14
+
15
+ const drawerTitleValidation = createOverlayTitleValidation( 'Drawer' );
16
+
17
+ /**
18
+ * Hook to access the drawer validation context.
19
+ * Returns null in production or if not within a Drawer.Popup.
20
+ */
21
+ export const useDrawerValidationContext =
22
+ drawerTitleValidation.useValidationContext;
23
+
24
+ /**
25
+ * Provider component that validates Drawer.Title presence in development mode.
26
+ * In production, this component is a no-op and just renders children.
27
+ */
28
+ export const DrawerValidationProvider =
29
+ drawerTitleValidation.ValidationProvider;
package/src/drawer/description.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { Drawer as _Drawer } from '@base-ui/react/drawer';
2
+ import { forwardRef } from '@wordpress/element';
3
+ import { Text } from '../text';
4
+ import type { DescriptionProps } from './types';
5
+
6
+ /**
7
+ * Renders an optional paragraph that describes the drawer content.
8
+ *
9
+ * The rendered element is linked to the popup via `aria-describedby`.
10
+ */
11
+ const Description = forwardRef< HTMLParagraphElement, DescriptionProps >(
12
+ function DrawerDescription( { children, ...props }, ref ) {
13
+ return (
14
+ <Text
15
+ ref={ ref }
16
+ variant="body-md"
17
+ render={ <_Drawer.Description { ...props } /> }
18
+ >
19
+ { children }
20
+ </Text>
21
+ );
22
+ }
23
+ );
24
+
25
+ export { Description };
package/src/drawer/footer.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import { mergeProps, useRender } from '@base-ui/react';
2
+ import clsx from 'clsx';
3
+ import { forwardRef } from '@wordpress/element';
4
+ import styles from './style.module.css';
5
+ import type { FooterProps } from './types';
6
+
7
+ /**
8
+ * Renders the footer section of the drawer, typically containing
9
+ * action buttons.
10
+ *
11
+ * Defaults to a native `<footer>` element for richer semantics (contentinfo
12
+ * landmark navigation where screen readers expose landmarks nested in
13
+ * dialogs). Pass `render` to opt out of the default tag.
14
+ *
15
+ * The footer is pinned to the bottom of the popup by default. To let it
16
+ * scroll with the body instead, render it *inside* `Drawer.Content`.
17
+ */
18
+ const Footer = forwardRef< HTMLElement, FooterProps >( function DrawerFooter(
19
+ { className, render, ...props },
20
+ ref
21
+ ) {
22
+ const element = useRender( {
23
+ defaultTagName: 'footer',
24
+ render,
25
+ ref,
26
+ props: mergeProps< 'footer' >( props, {
27
+ className: clsx( styles.footer, className ),
28
+ } ),
29
+ } );
30
+
31
+ return element;
32
+ } );
33
+
34
+ export { Footer };
package/src/drawer/header.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import { mergeProps, useRender } from '@base-ui/react';
2
+ import clsx from 'clsx';
3
+ import { forwardRef } from '@wordpress/element';
4
+ import styles from './style.module.css';
5
+ import type { HeaderProps } from './types';
6
+
7
+ /**
8
+ * Renders the header section of the drawer, typically containing
9
+ * the heading and close button.
10
+ *
11
+ * Defaults to a native `<header>` element for richer semantics (heading-level
12
+ * scanning, and banner landmark navigation where screen readers expose
13
+ * landmarks nested in dialogs). Pass `render` to opt out of the default tag.
14
+ *
15
+ * The header is pinned to the top of the popup by default. To let it scroll
16
+ * with the body instead, render it *inside* `Drawer.Content`.
17
+ */
18
+ const Header = forwardRef< HTMLElement, HeaderProps >( function DrawerHeader(
19
+ { className, render, ...props },
20
+ ref
21
+ ) {
22
+ const element = useRender( {
23
+ defaultTagName: 'header',
24
+ render,
25
+ ref,
26
+ props: mergeProps< 'header' >( props, {
27
+ className: clsx( styles.header, className ),
28
+ } ),
29
+ } );
30
+
31
+ return element;
32
+ } );
33
+
34
+ export { Header };
package/src/drawer/index.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { Action } from './action';
2
+ import { CloseIcon } from './close-icon';
3
+ import { Content } from './content';
4
+ import { Description } from './description';
5
+ import { Footer } from './footer';
6
+ import { Header } from './header';
7
+ import { Popup } from './popup';
8
+ import { Portal } from './portal';
9
+ import { Root } from './root';
10
+ import { Title } from './title';
11
+ import { Trigger } from './trigger';
12
+
13
+ export {
14
+ Action,
15
+ CloseIcon,
16
+ Content,
17
+ Description,
18
+ Footer,
19
+ Header,
20
+ Popup,
21
+ Portal,
22
+ Root,
23
+ Title,
24
+ Trigger,
25
+ };
package/src/drawer/popup.tsx ADDED
@@ -0,0 +1,99 @@
1
+ import { Drawer as _Drawer } from '@base-ui/react/drawer';
2
+ import clsx from 'clsx';
3
+ import { forwardRef } from '@wordpress/element';
4
+ import { useMergeRefs } from '@wordpress/compose';
5
+ import {
6
+ type ThemeProvider as ThemeProviderType,
7
+ privateApis as themePrivateApis,
8
+ } from '@wordpress/theme';
9
+ import { unlock } from '../lock-unlock';
10
+ import { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';
11
+ import { SCROLL_CONTAINER_ATTR } from '../utils/use-overlay-scroll-state-attributes';
12
+ import { renderSlotWithChildren } from '../utils/render-slot-with-children';
13
+ import { DrawerValidationProvider, useDrawerModal } from './context';
14
+ import { Portal } from './portal';
15
+ import styles from './style.module.css';
16
+ import type { PopupProps } from './types';
17
+
18
+ const ThemeProvider: typeof ThemeProviderType =
19
+ unlock( themePrivateApis ).ThemeProvider;
20
+
21
+ const CLOSE_ICON_ATTR = 'data-wp-ui-drawer-close-icon';
22
+
23
+ /**
24
+ * Renders the drawer popup element that contains the drawer content.
25
+ * Uses a portal to render outside the DOM hierarchy.
26
+ *
27
+ * When `portal` is omitted, defaults to `Drawer.Portal`.
28
+ *
29
+ * The popup is a flex column; scroll ownership lives on `Drawer.Content`,
30
+ * which children are expected to render. Without it, long body content will
31
+ * clip instead of scrolling and Base UI's swipe-dismiss-on-scroll-edge
32
+ * logic on up/down drawers cannot engage.
33
+ */
34
+ const Popup = forwardRef< HTMLDivElement, PopupProps >( function DrawerPopup(
35
+ { className, portal, children, size, initialFocus, finalFocus, ...props },
36
+ ref
37
+ ) {
38
+ const { resolvedInitialFocus, popupRef } = useDeprioritizedInitialFocus( {
39
+ initialFocus,
40
+ deprioritizedAttributes: [ CLOSE_ICON_ATTR, SCROLL_CONTAINER_ATTR ],
41
+ } );
42
+ const mergedRef = useMergeRefs( [ ref, popupRef ] );
43
+ const modal = useDrawerModal();
44
+
45
+ const portalChildren = (
46
+ <>
47
+ { /*
48
+ * Only render a backdrop for fully modal drawers. Non-modal drawers
49
+ * should not dim the page, and `trap-focus` keeps outside pointer
50
+ * interactions enabled, so a backdrop would misrepresent that mode.
51
+ */ }
52
+ { modal === true && (
53
+ <_Drawer.Backdrop
54
+ className={ styles.backdrop }
55
+ data-testid="drawer-backdrop"
56
+ />
57
+ ) }
58
+ <_Drawer.Viewport className={ styles.viewport }>
59
+ { /*
60
+ * ThemeProvider wraps _Drawer.Popup directly (matching Dialog
61
+ * and Popover) so the `display: contents` focus-trap workaround
62
+ * selector in the CSS module actually targets this subtree.
63
+ */ }
64
+ <ThemeProvider>
65
+ <_Drawer.Popup
66
+ ref={ mergedRef }
67
+ className={ ( state ) => {
68
+ const isVertical =
69
+ state.swipeDirection === 'up' ||
70
+ state.swipeDirection === 'down';
71
+ const resolvedSize =
72
+ size ?? ( isVertical ? 'auto' : 'medium' );
73
+
74
+ return clsx(
75
+ styles.popup,
76
+ className,
77
+ styles[ `is-${ resolvedSize }` ]
78
+ );
79
+ } }
80
+ initialFocus={ resolvedInitialFocus }
81
+ finalFocus={ finalFocus }
82
+ { ...props }
83
+ data-wp-ui-overlay-modal={
84
+ modal === true ? '' : undefined
85
+ }
86
+ >
87
+ <DrawerValidationProvider>
88
+ { children }
89
+ </DrawerValidationProvider>
90
+ </_Drawer.Popup>
91
+ </ThemeProvider>
92
+ </_Drawer.Viewport>
93
+ </>
94
+ );
95
+
96
+ return renderSlotWithChildren( portal, <Portal />, portalChildren );
97
+ } );
98
+
99
+ export { Popup };
package/src/drawer/portal.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import { Drawer as _Drawer } from '@base-ui/react/drawer';
2
+ import { forwardRef } from '@wordpress/element';
3
+ import type { PortalProps } from './types';
4
+
5
+ /**
6
+ * Root element that portals `Drawer` overlay content (`Backdrop`, `Viewport`
7
+ * with the inner `Popup`, etc.) outside the DOM hierarchy. Pass to
8
+ * `Drawer.Popup`'s `portal` prop to customize `container`, `className`,
9
+ * `style`, and other Base UI portal options. When `portal` is omitted,
10
+ * `Drawer.Popup` uses this component with default props.
11
+ */
12
+ const Portal = forwardRef< HTMLDivElement, PortalProps >(
13
+ function DrawerPortal( props, ref ) {
14
+ return <_Drawer.Portal ref={ ref } { ...props } />;
15
+ }
16
+ );
17
+
18
+ export { Portal };
package/src/drawer/root.tsx ADDED
@@ -0,0 +1,41 @@
1
+ import { Drawer as _Drawer } from '@base-ui/react/drawer';
2
+ import { DrawerModalProvider } from './context';
3
+ import type { RootProps } from './types';
4
+
5
+ /**
6
+ * An ARIA-compliant drawer that slides in from a viewport edge, with
7
+ * swipe-to-dismiss gestures.
8
+ *
9
+ * Every drawer must include a `Drawer.Title` component for accessibility — it
10
+ * serves as both the visible heading and the accessible label for the drawer.
11
+ *
12
+ * Always include a visible close affordance, either `Drawer.CloseIcon` or a
13
+ * clear dismissing action button. If your drawer has a "Cancel" button in the
14
+ * footer, the close icon may be redundant and create confusion about what
15
+ * clicking "X" means.
16
+ *
17
+ * Use `Drawer.CloseIcon` for informational drawers where dismissing is safe
18
+ * and expected. For drawers requiring explicit user choice (especially
19
+ * destructive actions), omit the close icon and rely on footer action buttons
20
+ * like "Cancel" and "Confirm" instead.
21
+ */
22
+ function Root( {
23
+ modal = true,
24
+ swipeDirection = 'left',
25
+ children,
26
+ ...props
27
+ }: RootProps ) {
28
+ return (
29
+ <_Drawer.Root
30
+ modal={ modal }
31
+ swipeDirection={ swipeDirection }
32
+ { ...props }
33
+ >
34
+ <DrawerModalProvider modal={ modal }>
35
+ { children }
36
+ </DrawerModalProvider>
37
+ </_Drawer.Root>
38
+ );
39
+ }
40
+
41
+ export { Root };