@wordpress/ui 0.11.1-next.v.202604091042.0 → 0.12.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 (827) hide show
  1. package/CHANGELOG.md +58 -1
  2. package/CONTRIBUTING.md +124 -0
  3. package/README.md +17 -9
  4. package/build/alert-dialog/index.cjs +3 -0
  5. package/build/alert-dialog/index.cjs.map +2 -2
  6. package/build/alert-dialog/popup.cjs +120 -55
  7. package/build/alert-dialog/popup.cjs.map +3 -3
  8. package/build/alert-dialog/portal.cjs +38 -0
  9. package/build/alert-dialog/portal.cjs.map +7 -0
  10. package/build/alert-dialog/types.cjs.map +1 -1
  11. package/build/badge/badge.cjs +14 -14
  12. package/build/badge/badge.cjs.map +2 -2
  13. package/build/button/button.cjs +6 -6
  14. package/build/button/button.cjs.map +2 -2
  15. package/build/card/content.cjs +4 -4
  16. package/build/card/content.cjs.map +2 -2
  17. package/build/card/full-bleed.cjs +4 -4
  18. package/build/card/full-bleed.cjs.map +2 -2
  19. package/build/card/header.cjs +4 -4
  20. package/build/card/header.cjs.map +2 -2
  21. package/build/card/root.cjs +4 -4
  22. package/build/card/root.cjs.map +2 -2
  23. package/build/card/title.cjs +5 -25
  24. package/build/card/title.cjs.map +4 -4
  25. package/build/collapsible-card/content.cjs +9 -5
  26. package/build/collapsible-card/content.cjs.map +2 -2
  27. package/build/collapsible-card/header.cjs +14 -4
  28. package/build/collapsible-card/header.cjs.map +3 -3
  29. package/build/dialog/content.cjs +85 -0
  30. package/build/dialog/content.cjs.map +7 -0
  31. package/build/dialog/context.cjs +12 -44
  32. package/build/dialog/context.cjs.map +2 -2
  33. package/build/dialog/description.cjs +59 -0
  34. package/build/dialog/description.cjs.map +7 -0
  35. package/build/dialog/footer.cjs +5 -4
  36. package/build/dialog/footer.cjs.map +2 -2
  37. package/build/dialog/header.cjs +5 -4
  38. package/build/dialog/header.cjs.map +2 -2
  39. package/build/dialog/index.cjs +9 -0
  40. package/build/dialog/index.cjs.map +2 -2
  41. package/build/dialog/popup.cjs +21 -8
  42. package/build/dialog/popup.cjs.map +2 -2
  43. package/build/dialog/portal.cjs +38 -0
  44. package/build/dialog/portal.cjs.map +7 -0
  45. package/build/dialog/root.cjs +3 -2
  46. package/build/dialog/root.cjs.map +2 -2
  47. package/build/dialog/title.cjs +16 -22
  48. package/build/dialog/title.cjs.map +3 -3
  49. package/build/dialog/types.cjs.map +1 -1
  50. package/build/drawer/action.cjs +48 -0
  51. package/build/drawer/action.cjs.map +7 -0
  52. package/build/drawer/close-icon.cjs +58 -0
  53. package/build/drawer/close-icon.cjs.map +7 -0
  54. package/build/drawer/content.cjs +86 -0
  55. package/build/drawer/content.cjs.map +7 -0
  56. package/build/drawer/context.cjs +44 -0
  57. package/build/drawer/context.cjs.map +7 -0
  58. package/build/drawer/description.cjs +47 -0
  59. package/build/drawer/description.cjs.map +7 -0
  60. package/build/drawer/footer.cjs +65 -0
  61. package/build/drawer/footer.cjs.map +7 -0
  62. package/build/drawer/header.cjs +65 -0
  63. package/build/drawer/header.cjs.map +7 -0
  64. package/build/drawer/index.cjs +61 -0
  65. package/build/drawer/index.cjs.map +7 -0
  66. package/build/drawer/popup.cjs +103 -0
  67. package/build/drawer/popup.cjs.map +7 -0
  68. package/build/drawer/portal.cjs +38 -0
  69. package/build/drawer/portal.cjs.map +7 -0
  70. package/build/drawer/root.cjs +49 -0
  71. package/build/drawer/root.cjs.map +7 -0
  72. package/build/drawer/title.cjs +70 -0
  73. package/build/drawer/title.cjs.map +7 -0
  74. package/build/drawer/trigger.cjs +38 -0
  75. package/build/drawer/trigger.cjs.map +7 -0
  76. package/build/drawer/types.cjs +19 -0
  77. package/build/drawer/types.cjs.map +7 -0
  78. package/build/empty-state/actions.cjs +3 -3
  79. package/build/empty-state/actions.cjs.map +2 -2
  80. package/build/empty-state/description.cjs +8 -5
  81. package/build/empty-state/description.cjs.map +2 -2
  82. package/build/empty-state/icon.cjs +3 -3
  83. package/build/empty-state/icon.cjs.map +2 -2
  84. package/build/empty-state/root.cjs +3 -3
  85. package/build/empty-state/root.cjs.map +2 -2
  86. package/build/empty-state/title.cjs +8 -5
  87. package/build/empty-state/title.cjs.map +2 -2
  88. package/build/empty-state/visual.cjs +3 -3
  89. package/build/empty-state/visual.cjs.map +2 -2
  90. package/build/form/primitives/autocomplete/clear.cjs +62 -0
  91. package/build/form/primitives/autocomplete/clear.cjs.map +7 -0
  92. package/build/form/primitives/autocomplete/collection.cjs +38 -0
  93. package/build/form/primitives/autocomplete/collection.cjs.map +7 -0
  94. package/build/form/primitives/autocomplete/empty.cjs +67 -0
  95. package/build/form/primitives/autocomplete/empty.cjs.map +7 -0
  96. package/build/form/primitives/autocomplete/index.cjs +64 -0
  97. package/build/form/primitives/autocomplete/index.cjs.map +7 -0
  98. package/build/form/primitives/autocomplete/input-group.cjs +36 -0
  99. package/build/form/primitives/autocomplete/input-group.cjs.map +7 -0
  100. package/build/form/primitives/autocomplete/input.cjs +47 -0
  101. package/build/form/primitives/autocomplete/input.cjs.map +7 -0
  102. package/build/form/primitives/autocomplete/item.cjs +81 -0
  103. package/build/form/primitives/autocomplete/item.cjs.map +7 -0
  104. package/build/form/primitives/autocomplete/list-body.cjs +57 -0
  105. package/build/form/primitives/autocomplete/list-body.cjs.map +7 -0
  106. package/build/form/primitives/autocomplete/list.cjs +67 -0
  107. package/build/form/primitives/autocomplete/list.cjs.map +7 -0
  108. package/build/form/primitives/autocomplete/popup.cjs +102 -0
  109. package/build/form/primitives/autocomplete/popup.cjs.map +7 -0
  110. package/build/form/primitives/autocomplete/portal.cjs +38 -0
  111. package/build/form/primitives/autocomplete/portal.cjs.map +7 -0
  112. package/build/form/primitives/autocomplete/root.cjs +35 -0
  113. package/build/form/primitives/autocomplete/root.cjs.map +7 -0
  114. package/build/form/primitives/autocomplete/types.cjs +19 -0
  115. package/build/form/primitives/autocomplete/types.cjs.map +7 -0
  116. package/build/form/primitives/autocomplete/value.cjs +35 -0
  117. package/build/form/primitives/autocomplete/value.cjs.map +7 -0
  118. package/build/form/primitives/field/description.cjs +6 -6
  119. package/build/form/primitives/field/description.cjs.map +2 -2
  120. package/build/form/primitives/field/details.cjs +4 -4
  121. package/build/form/primitives/field/details.cjs.map +2 -2
  122. package/build/form/primitives/field/label.cjs +8 -8
  123. package/build/form/primitives/field/label.cjs.map +2 -2
  124. package/build/form/primitives/field/root.cjs +2 -2
  125. package/build/form/primitives/field/root.cjs.map +2 -2
  126. package/build/form/primitives/fieldset/description.cjs +6 -6
  127. package/build/form/primitives/fieldset/description.cjs.map +2 -2
  128. package/build/form/primitives/fieldset/details.cjs +3 -3
  129. package/build/form/primitives/fieldset/details.cjs.map +2 -2
  130. package/build/form/primitives/fieldset/legend.cjs +8 -7
  131. package/build/form/primitives/fieldset/legend.cjs.map +2 -2
  132. package/build/form/primitives/index.cjs +3 -0
  133. package/build/form/primitives/index.cjs.map +2 -2
  134. package/build/form/primitives/input/input.cjs +6 -6
  135. package/build/form/primitives/input/input.cjs.map +2 -2
  136. package/build/form/primitives/input-layout/input-layout.cjs +6 -6
  137. package/build/form/primitives/input-layout/input-layout.cjs.map +2 -2
  138. package/build/form/primitives/input-layout/slot.cjs +3 -3
  139. package/build/form/primitives/input-layout/slot.cjs.map +2 -2
  140. package/build/form/primitives/select/index.cjs +3 -0
  141. package/build/form/primitives/select/index.cjs.map +2 -2
  142. package/build/form/primitives/select/item.cjs +4 -5
  143. package/build/form/primitives/select/item.cjs.map +2 -2
  144. package/build/form/primitives/select/popup.cjs +12 -11
  145. package/build/form/primitives/select/popup.cjs.map +2 -2
  146. package/build/form/primitives/select/portal.cjs +38 -0
  147. package/build/form/primitives/select/portal.cjs.map +7 -0
  148. package/build/form/primitives/select/trigger.cjs +3 -3
  149. package/build/form/primitives/select/trigger.cjs.map +1 -1
  150. package/build/form/primitives/select/types.cjs.map +1 -1
  151. package/build/form/primitives/textarea/textarea.cjs +3 -3
  152. package/build/form/primitives/textarea/textarea.cjs.map +2 -2
  153. package/build/index.cjs +3 -0
  154. package/build/index.cjs.map +2 -2
  155. package/build/link/link.cjs +11 -21
  156. package/build/link/link.cjs.map +2 -2
  157. package/build/link/types.cjs.map +1 -1
  158. package/build/notice/action-button.cjs +3 -3
  159. package/build/notice/action-button.cjs.map +2 -2
  160. package/build/notice/action-link.cjs +8 -7
  161. package/build/notice/action-link.cjs.map +2 -2
  162. package/build/notice/actions.cjs +3 -3
  163. package/build/notice/actions.cjs.map +2 -2
  164. package/build/notice/close-icon.cjs +3 -3
  165. package/build/notice/close-icon.cjs.map +2 -2
  166. package/build/notice/description.cjs +3 -3
  167. package/build/notice/description.cjs.map +2 -2
  168. package/build/notice/root.cjs +3 -3
  169. package/build/notice/root.cjs.map +2 -2
  170. package/build/notice/title.cjs +3 -3
  171. package/build/notice/title.cjs.map +2 -2
  172. package/build/popover/arrow.cjs +4 -4
  173. package/build/popover/arrow.cjs.map +2 -2
  174. package/build/popover/context.cjs +4 -44
  175. package/build/popover/context.cjs.map +2 -2
  176. package/build/popover/description.cjs +2 -25
  177. package/build/popover/description.cjs.map +4 -4
  178. package/build/popover/index.cjs +3 -0
  179. package/build/popover/index.cjs.map +2 -2
  180. package/build/popover/popup.cjs +15 -15
  181. package/build/popover/popup.cjs.map +2 -2
  182. package/build/popover/portal.cjs +38 -0
  183. package/build/popover/portal.cjs.map +7 -0
  184. package/build/popover/root.cjs.map +1 -1
  185. package/build/popover/title.cjs +19 -5
  186. package/build/popover/title.cjs.map +3 -3
  187. package/build/popover/types.cjs.map +1 -1
  188. package/build/tabs/context.cjs +9 -22
  189. package/build/tabs/context.cjs.map +2 -2
  190. package/build/tabs/list.cjs +4 -5
  191. package/build/tabs/list.cjs.map +2 -2
  192. package/build/tabs/panel.cjs +19 -6
  193. package/build/tabs/panel.cjs.map +3 -3
  194. package/build/tabs/tab.cjs +4 -4
  195. package/build/tabs/tab.cjs.map +2 -2
  196. package/build/text/text.cjs +8 -8
  197. package/build/text/text.cjs.map +2 -2
  198. package/build/tooltip/index.cjs +3 -0
  199. package/build/tooltip/index.cjs.map +2 -2
  200. package/build/tooltip/popup.cjs +11 -13
  201. package/build/tooltip/popup.cjs.map +3 -3
  202. package/build/tooltip/portal.cjs +38 -0
  203. package/build/tooltip/portal.cjs.map +7 -0
  204. package/build/tooltip/provider.cjs +2 -2
  205. package/build/tooltip/provider.cjs.map +3 -3
  206. package/build/tooltip/root.cjs.map +3 -3
  207. package/build/tooltip/trigger.cjs +2 -2
  208. package/build/tooltip/trigger.cjs.map +3 -3
  209. package/build/tooltip/types.cjs.map +1 -1
  210. package/build/utils/create-overlay-modal-context.cjs +48 -0
  211. package/build/utils/create-overlay-modal-context.cjs.map +7 -0
  212. package/build/utils/create-overlay-title-validation.cjs +93 -0
  213. package/build/utils/create-overlay-title-validation.cjs.map +7 -0
  214. package/build/utils/render-portal-with-children.cjs +37 -0
  215. package/build/utils/render-portal-with-children.cjs.map +7 -0
  216. package/build/utils/types.cjs.map +1 -1
  217. package/build/utils/use-deprioritized-initial-focus.cjs +8 -8
  218. package/build/utils/use-deprioritized-initial-focus.cjs.map +2 -2
  219. package/build/utils/use-overlay-scroll-state-attributes.cjs +140 -0
  220. package/build/utils/use-overlay-scroll-state-attributes.cjs.map +7 -0
  221. package/build/utils/use-schedule-validation.cjs +59 -0
  222. package/build/utils/use-schedule-validation.cjs.map +7 -0
  223. package/build/visually-hidden/visually-hidden.cjs +5 -1
  224. package/build/visually-hidden/visually-hidden.cjs.map +2 -2
  225. package/build-module/alert-dialog/index.mjs +2 -0
  226. package/build-module/alert-dialog/index.mjs.map +2 -2
  227. package/build-module/alert-dialog/popup.mjs +124 -56
  228. package/build-module/alert-dialog/popup.mjs.map +3 -3
  229. package/build-module/alert-dialog/portal.mjs +13 -0
  230. package/build-module/alert-dialog/portal.mjs.map +7 -0
  231. package/build-module/badge/badge.mjs +14 -14
  232. package/build-module/badge/badge.mjs.map +2 -2
  233. package/build-module/button/button.mjs +6 -6
  234. package/build-module/button/button.mjs.map +2 -2
  235. package/build-module/card/content.mjs +4 -4
  236. package/build-module/card/content.mjs.map +2 -2
  237. package/build-module/card/full-bleed.mjs +4 -4
  238. package/build-module/card/full-bleed.mjs.map +2 -2
  239. package/build-module/card/header.mjs +4 -4
  240. package/build-module/card/header.mjs.map +2 -2
  241. package/build-module/card/root.mjs +4 -4
  242. package/build-module/card/root.mjs.map +2 -2
  243. package/build-module/card/title.mjs +5 -15
  244. package/build-module/card/title.mjs.map +3 -3
  245. package/build-module/collapsible-card/content.mjs +9 -5
  246. package/build-module/collapsible-card/content.mjs.map +2 -2
  247. package/build-module/collapsible-card/header.mjs +14 -4
  248. package/build-module/collapsible-card/header.mjs.map +3 -3
  249. package/build-module/dialog/content.mjs +50 -0
  250. package/build-module/dialog/content.mjs.map +7 -0
  251. package/build-module/dialog/context.mjs +10 -51
  252. package/build-module/dialog/context.mjs.map +2 -2
  253. package/build-module/dialog/description.mjs +34 -0
  254. package/build-module/dialog/description.mjs.map +7 -0
  255. package/build-module/dialog/footer.mjs +5 -4
  256. package/build-module/dialog/footer.mjs.map +2 -2
  257. package/build-module/dialog/header.mjs +5 -4
  258. package/build-module/dialog/header.mjs.map +2 -2
  259. package/build-module/dialog/index.mjs +6 -0
  260. package/build-module/dialog/index.mjs.map +2 -2
  261. package/build-module/dialog/popup.mjs +23 -10
  262. package/build-module/dialog/popup.mjs.map +2 -2
  263. package/build-module/dialog/portal.mjs +13 -0
  264. package/build-module/dialog/portal.mjs.map +7 -0
  265. package/build-module/dialog/root.mjs +3 -2
  266. package/build-module/dialog/root.mjs.map +2 -2
  267. package/build-module/dialog/title.mjs +17 -13
  268. package/build-module/dialog/title.mjs.map +2 -2
  269. package/build-module/drawer/action.mjs +23 -0
  270. package/build-module/drawer/action.mjs.map +7 -0
  271. package/build-module/drawer/close-icon.mjs +33 -0
  272. package/build-module/drawer/close-icon.mjs.map +7 -0
  273. package/build-module/drawer/content.mjs +51 -0
  274. package/build-module/drawer/content.mjs.map +7 -0
  275. package/build-module/drawer/context.mjs +16 -0
  276. package/build-module/drawer/context.mjs.map +7 -0
  277. package/build-module/drawer/description.mjs +22 -0
  278. package/build-module/drawer/description.mjs.map +7 -0
  279. package/build-module/drawer/footer.mjs +30 -0
  280. package/build-module/drawer/footer.mjs.map +7 -0
  281. package/build-module/drawer/header.mjs +30 -0
  282. package/build-module/drawer/header.mjs.map +7 -0
  283. package/build-module/drawer/index.mjs +26 -0
  284. package/build-module/drawer/index.mjs.map +7 -0
  285. package/build-module/drawer/popup.mjs +70 -0
  286. package/build-module/drawer/popup.mjs.map +7 -0
  287. package/build-module/drawer/portal.mjs +13 -0
  288. package/build-module/drawer/portal.mjs.map +7 -0
  289. package/build-module/drawer/root.mjs +24 -0
  290. package/build-module/drawer/root.mjs.map +7 -0
  291. package/build-module/drawer/title.mjs +45 -0
  292. package/build-module/drawer/title.mjs.map +7 -0
  293. package/build-module/drawer/trigger.mjs +13 -0
  294. package/build-module/drawer/trigger.mjs.map +7 -0
  295. package/build-module/drawer/types.mjs +1 -0
  296. package/build-module/empty-state/actions.mjs +3 -3
  297. package/build-module/empty-state/actions.mjs.map +2 -2
  298. package/build-module/empty-state/description.mjs +8 -5
  299. package/build-module/empty-state/description.mjs.map +2 -2
  300. package/build-module/empty-state/icon.mjs +3 -3
  301. package/build-module/empty-state/icon.mjs.map +2 -2
  302. package/build-module/empty-state/root.mjs +3 -3
  303. package/build-module/empty-state/root.mjs.map +2 -2
  304. package/build-module/empty-state/title.mjs +8 -5
  305. package/build-module/empty-state/title.mjs.map +2 -2
  306. package/build-module/empty-state/visual.mjs +3 -3
  307. package/build-module/empty-state/visual.mjs.map +2 -2
  308. package/build-module/form/primitives/autocomplete/clear.mjs +37 -0
  309. package/build-module/form/primitives/autocomplete/clear.mjs.map +7 -0
  310. package/build-module/form/primitives/autocomplete/collection.mjs +13 -0
  311. package/build-module/form/primitives/autocomplete/collection.mjs.map +7 -0
  312. package/build-module/form/primitives/autocomplete/empty.mjs +32 -0
  313. package/build-module/form/primitives/autocomplete/empty.mjs.map +7 -0
  314. package/build-module/form/primitives/autocomplete/index.mjs +28 -0
  315. package/build-module/form/primitives/autocomplete/index.mjs.map +7 -0
  316. package/build-module/form/primitives/autocomplete/input-group.mjs +11 -0
  317. package/build-module/form/primitives/autocomplete/input-group.mjs.map +7 -0
  318. package/build-module/form/primitives/autocomplete/input.mjs +22 -0
  319. package/build-module/form/primitives/autocomplete/input.mjs.map +7 -0
  320. package/build-module/form/primitives/autocomplete/item.mjs +46 -0
  321. package/build-module/form/primitives/autocomplete/item.mjs.map +7 -0
  322. package/build-module/form/primitives/autocomplete/list-body.mjs +32 -0
  323. package/build-module/form/primitives/autocomplete/list-body.mjs.map +7 -0
  324. package/build-module/form/primitives/autocomplete/list.mjs +32 -0
  325. package/build-module/form/primitives/autocomplete/list.mjs.map +7 -0
  326. package/build-module/form/primitives/autocomplete/popup.mjs +69 -0
  327. package/build-module/form/primitives/autocomplete/popup.mjs.map +7 -0
  328. package/build-module/form/primitives/autocomplete/portal.mjs +13 -0
  329. package/build-module/form/primitives/autocomplete/portal.mjs.map +7 -0
  330. package/build-module/form/primitives/autocomplete/root.mjs +10 -0
  331. package/build-module/form/primitives/autocomplete/root.mjs.map +7 -0
  332. package/build-module/form/primitives/autocomplete/types.mjs +1 -0
  333. package/build-module/form/primitives/autocomplete/value.mjs +10 -0
  334. package/build-module/form/primitives/autocomplete/value.mjs.map +7 -0
  335. package/build-module/form/primitives/field/description.mjs +6 -6
  336. package/build-module/form/primitives/field/description.mjs.map +2 -2
  337. package/build-module/form/primitives/field/details.mjs +4 -4
  338. package/build-module/form/primitives/field/details.mjs.map +2 -2
  339. package/build-module/form/primitives/field/label.mjs +8 -8
  340. package/build-module/form/primitives/field/label.mjs.map +2 -2
  341. package/build-module/form/primitives/field/root.mjs +2 -2
  342. package/build-module/form/primitives/field/root.mjs.map +2 -2
  343. package/build-module/form/primitives/fieldset/description.mjs +6 -6
  344. package/build-module/form/primitives/fieldset/description.mjs.map +2 -2
  345. package/build-module/form/primitives/fieldset/details.mjs +3 -3
  346. package/build-module/form/primitives/fieldset/details.mjs.map +2 -2
  347. package/build-module/form/primitives/fieldset/legend.mjs +8 -7
  348. package/build-module/form/primitives/fieldset/legend.mjs.map +2 -2
  349. package/build-module/form/primitives/index.mjs +2 -0
  350. package/build-module/form/primitives/index.mjs.map +2 -2
  351. package/build-module/form/primitives/input/input.mjs +6 -6
  352. package/build-module/form/primitives/input/input.mjs.map +2 -2
  353. package/build-module/form/primitives/input-layout/input-layout.mjs +6 -6
  354. package/build-module/form/primitives/input-layout/input-layout.mjs.map +2 -2
  355. package/build-module/form/primitives/input-layout/slot.mjs +3 -3
  356. package/build-module/form/primitives/input-layout/slot.mjs.map +2 -2
  357. package/build-module/form/primitives/select/index.mjs +2 -0
  358. package/build-module/form/primitives/select/index.mjs.map +2 -2
  359. package/build-module/form/primitives/select/item.mjs +4 -5
  360. package/build-module/form/primitives/select/item.mjs.map +2 -2
  361. package/build-module/form/primitives/select/popup.mjs +12 -11
  362. package/build-module/form/primitives/select/popup.mjs.map +2 -2
  363. package/build-module/form/primitives/select/portal.mjs +13 -0
  364. package/build-module/form/primitives/select/portal.mjs.map +7 -0
  365. package/build-module/form/primitives/select/trigger.mjs +3 -3
  366. package/build-module/form/primitives/select/trigger.mjs.map +1 -1
  367. package/build-module/form/primitives/textarea/textarea.mjs +3 -3
  368. package/build-module/form/primitives/textarea/textarea.mjs.map +2 -2
  369. package/build-module/index.mjs +2 -0
  370. package/build-module/index.mjs.map +2 -2
  371. package/build-module/link/link.mjs +11 -21
  372. package/build-module/link/link.mjs.map +2 -2
  373. package/build-module/notice/action-button.mjs +3 -3
  374. package/build-module/notice/action-button.mjs.map +2 -2
  375. package/build-module/notice/action-link.mjs +8 -7
  376. package/build-module/notice/action-link.mjs.map +2 -2
  377. package/build-module/notice/actions.mjs +3 -3
  378. package/build-module/notice/actions.mjs.map +2 -2
  379. package/build-module/notice/close-icon.mjs +3 -3
  380. package/build-module/notice/close-icon.mjs.map +2 -2
  381. package/build-module/notice/description.mjs +3 -3
  382. package/build-module/notice/description.mjs.map +2 -2
  383. package/build-module/notice/root.mjs +3 -3
  384. package/build-module/notice/root.mjs.map +2 -2
  385. package/build-module/notice/title.mjs +3 -3
  386. package/build-module/notice/title.mjs.map +2 -2
  387. package/build-module/popover/arrow.mjs +4 -4
  388. package/build-module/popover/arrow.mjs.map +2 -2
  389. package/build-module/popover/context.mjs +4 -51
  390. package/build-module/popover/context.mjs.map +2 -2
  391. package/build-module/popover/description.mjs +2 -15
  392. package/build-module/popover/description.mjs.map +3 -3
  393. package/build-module/popover/index.mjs +2 -0
  394. package/build-module/popover/index.mjs.map +2 -2
  395. package/build-module/popover/popup.mjs +16 -16
  396. package/build-module/popover/popup.mjs.map +2 -2
  397. package/build-module/popover/portal.mjs +13 -0
  398. package/build-module/popover/portal.mjs.map +7 -0
  399. package/build-module/popover/root.mjs.map +1 -1
  400. package/build-module/popover/title.mjs +20 -6
  401. package/build-module/popover/title.mjs.map +3 -3
  402. package/build-module/tabs/context.mjs +11 -24
  403. package/build-module/tabs/context.mjs.map +2 -2
  404. package/build-module/tabs/list.mjs +4 -5
  405. package/build-module/tabs/list.mjs.map +2 -2
  406. package/build-module/tabs/panel.mjs +19 -6
  407. package/build-module/tabs/panel.mjs.map +3 -3
  408. package/build-module/tabs/tab.mjs +4 -4
  409. package/build-module/tabs/tab.mjs.map +2 -2
  410. package/build-module/text/text.mjs +8 -8
  411. package/build-module/text/text.mjs.map +2 -2
  412. package/build-module/tooltip/index.mjs +2 -0
  413. package/build-module/tooltip/index.mjs.map +2 -2
  414. package/build-module/tooltip/popup.mjs +14 -16
  415. package/build-module/tooltip/popup.mjs.map +2 -2
  416. package/build-module/tooltip/portal.mjs +13 -0
  417. package/build-module/tooltip/portal.mjs.map +7 -0
  418. package/build-module/tooltip/provider.mjs +3 -3
  419. package/build-module/tooltip/provider.mjs.map +2 -2
  420. package/build-module/tooltip/root.mjs +2 -2
  421. package/build-module/tooltip/root.mjs.map +2 -2
  422. package/build-module/tooltip/trigger.mjs +3 -3
  423. package/build-module/tooltip/trigger.mjs.map +2 -2
  424. package/build-module/utils/create-overlay-modal-context.mjs +23 -0
  425. package/build-module/utils/create-overlay-modal-context.mjs.map +7 -0
  426. package/build-module/utils/create-overlay-title-validation.mjs +75 -0
  427. package/build-module/utils/create-overlay-title-validation.mjs.map +7 -0
  428. package/build-module/utils/render-portal-with-children.mjs +12 -0
  429. package/build-module/utils/render-portal-with-children.mjs.map +7 -0
  430. package/build-module/utils/use-deprioritized-initial-focus.mjs +9 -9
  431. package/build-module/utils/use-deprioritized-initial-focus.mjs.map +2 -2
  432. package/build-module/utils/use-overlay-scroll-state-attributes.mjs +114 -0
  433. package/build-module/utils/use-overlay-scroll-state-attributes.mjs.map +7 -0
  434. package/build-module/utils/use-schedule-validation.mjs +34 -0
  435. package/build-module/utils/use-schedule-validation.mjs.map +7 -0
  436. package/build-module/visually-hidden/visually-hidden.mjs +5 -1
  437. package/build-module/visually-hidden/visually-hidden.mjs.map +2 -2
  438. package/build-types/alert-dialog/index.d.ts +1 -0
  439. package/build-types/alert-dialog/index.d.ts.map +1 -1
  440. package/build-types/alert-dialog/popup.d.ts.map +1 -1
  441. package/build-types/alert-dialog/portal.d.ts +9 -0
  442. package/build-types/alert-dialog/portal.d.ts.map +1 -0
  443. package/build-types/alert-dialog/stories/index.story.d.ts +29 -1
  444. package/build-types/alert-dialog/stories/index.story.d.ts.map +1 -1
  445. package/build-types/alert-dialog/types.d.ts +27 -1
  446. package/build-types/alert-dialog/types.d.ts.map +1 -1
  447. package/build-types/badge/badge.d.ts.map +1 -1
  448. package/build-types/badge/stories/index.story.d.ts.map +1 -1
  449. package/build-types/card/stories/index.story.d.ts.map +1 -1
  450. package/build-types/card/title.d.ts.map +1 -1
  451. package/build-types/collapsible/panel.d.ts +2 -1
  452. package/build-types/collapsible/panel.d.ts.map +1 -1
  453. package/build-types/collapsible/root.d.ts +2 -1
  454. package/build-types/collapsible/root.d.ts.map +1 -1
  455. package/build-types/collapsible/stories/index.story.d.ts.map +1 -1
  456. package/build-types/collapsible/trigger.d.ts +2 -1
  457. package/build-types/collapsible/trigger.d.ts.map +1 -1
  458. package/build-types/collapsible-card/content.d.ts.map +1 -1
  459. package/build-types/collapsible-card/header.d.ts.map +1 -1
  460. package/build-types/collapsible-card/stories/index.story.d.ts.map +1 -1
  461. package/build-types/dialog/content.d.ts +17 -0
  462. package/build-types/dialog/content.d.ts.map +1 -0
  463. package/build-types/dialog/context.d.ts +11 -16
  464. package/build-types/dialog/context.d.ts.map +1 -1
  465. package/build-types/dialog/description.d.ts +9 -0
  466. package/build-types/dialog/description.d.ts.map +1 -0
  467. package/build-types/dialog/footer.d.ts +8 -1
  468. package/build-types/dialog/footer.d.ts.map +1 -1
  469. package/build-types/dialog/header.d.ts +8 -1
  470. package/build-types/dialog/header.d.ts.map +1 -1
  471. package/build-types/dialog/index.d.ts +4 -1
  472. package/build-types/dialog/index.d.ts.map +1 -1
  473. package/build-types/dialog/popup.d.ts +3 -0
  474. package/build-types/dialog/popup.d.ts.map +1 -1
  475. package/build-types/dialog/portal.d.ts +10 -0
  476. package/build-types/dialog/portal.d.ts.map +1 -0
  477. package/build-types/dialog/root.d.ts +14 -4
  478. package/build-types/dialog/root.d.ts.map +1 -1
  479. package/build-types/dialog/stories/index.story.d.ts +37 -6
  480. package/build-types/dialog/stories/index.story.d.ts.map +1 -1
  481. package/build-types/dialog/title.d.ts +12 -2
  482. package/build-types/dialog/title.d.ts.map +1 -1
  483. package/build-types/dialog/types.d.ts +66 -6
  484. package/build-types/dialog/types.d.ts.map +1 -1
  485. package/build-types/drawer/action.d.ts +8 -0
  486. package/build-types/drawer/action.d.ts.map +1 -0
  487. package/build-types/drawer/close-icon.d.ts +8 -0
  488. package/build-types/drawer/close-icon.d.ts.map +1 -0
  489. package/build-types/drawer/content.d.ts +21 -0
  490. package/build-types/drawer/content.d.ts.map +1 -0
  491. package/build-types/drawer/context.d.ts +20 -0
  492. package/build-types/drawer/context.d.ts.map +1 -0
  493. package/build-types/drawer/description.d.ts +9 -0
  494. package/build-types/drawer/description.d.ts.map +1 -0
  495. package/build-types/drawer/footer.d.ts +15 -0
  496. package/build-types/drawer/footer.d.ts.map +1 -0
  497. package/build-types/drawer/header.d.ts +15 -0
  498. package/build-types/drawer/header.d.ts.map +1 -0
  499. package/build-types/drawer/index.d.ts +13 -0
  500. package/build-types/drawer/index.d.ts.map +1 -0
  501. package/build-types/drawer/popup.d.ts +16 -0
  502. package/build-types/drawer/popup.d.ts.map +1 -0
  503. package/build-types/drawer/portal.d.ts +10 -0
  504. package/build-types/drawer/portal.d.ts.map +1 -0
  505. package/build-types/drawer/root.d.ts +21 -0
  506. package/build-types/drawer/root.d.ts.map +1 -0
  507. package/build-types/drawer/stories/index.story.d.ts +63 -0
  508. package/build-types/drawer/stories/index.story.d.ts.map +1 -0
  509. package/build-types/drawer/test/index.test.d.ts +2 -0
  510. package/build-types/drawer/test/index.test.d.ts.map +1 -0
  511. package/build-types/drawer/title.d.ts +22 -0
  512. package/build-types/drawer/title.d.ts.map +1 -0
  513. package/build-types/drawer/trigger.d.ts +7 -0
  514. package/build-types/drawer/trigger.d.ts.map +1 -0
  515. package/build-types/drawer/types.d.ts +146 -0
  516. package/build-types/drawer/types.d.ts.map +1 -0
  517. package/build-types/empty-state/description.d.ts.map +1 -1
  518. package/build-types/empty-state/stories/index.story.d.ts +1 -1
  519. package/build-types/empty-state/stories/index.story.d.ts.map +1 -1
  520. package/build-types/empty-state/title.d.ts.map +1 -1
  521. package/build-types/form/input-control/stories/index.story.d.ts +1 -1
  522. package/build-types/form/input-control/stories/index.story.d.ts.map +1 -1
  523. package/build-types/form/primitives/autocomplete/clear.d.ts +13 -0
  524. package/build-types/form/primitives/autocomplete/clear.d.ts.map +1 -0
  525. package/build-types/form/primitives/autocomplete/collection.d.ts +3 -0
  526. package/build-types/form/primitives/autocomplete/collection.d.ts.map +1 -0
  527. package/build-types/form/primitives/autocomplete/empty.d.ts +10 -0
  528. package/build-types/form/primitives/autocomplete/empty.d.ts.map +1 -0
  529. package/build-types/form/primitives/autocomplete/index.d.ts +13 -0
  530. package/build-types/form/primitives/autocomplete/index.d.ts.map +1 -0
  531. package/build-types/form/primitives/autocomplete/input-group.d.ts +16 -0
  532. package/build-types/form/primitives/autocomplete/input-group.d.ts.map +1 -0
  533. package/build-types/form/primitives/autocomplete/input.d.ts +3 -0
  534. package/build-types/form/primitives/autocomplete/input.d.ts.map +1 -0
  535. package/build-types/form/primitives/autocomplete/item.d.ts +10 -0
  536. package/build-types/form/primitives/autocomplete/item.d.ts.map +1 -0
  537. package/build-types/form/primitives/autocomplete/list-body.d.ts +13 -0
  538. package/build-types/form/primitives/autocomplete/list-body.d.ts.map +1 -0
  539. package/build-types/form/primitives/autocomplete/list.d.ts +11 -0
  540. package/build-types/form/primitives/autocomplete/list.d.ts.map +1 -0
  541. package/build-types/form/primitives/autocomplete/popup.d.ts +11 -0
  542. package/build-types/form/primitives/autocomplete/popup.d.ts.map +1 -0
  543. package/build-types/form/primitives/autocomplete/portal.d.ts +8 -0
  544. package/build-types/form/primitives/autocomplete/portal.d.ts.map +1 -0
  545. package/build-types/form/primitives/autocomplete/root.d.ts +8 -0
  546. package/build-types/form/primitives/autocomplete/root.d.ts.map +1 -0
  547. package/build-types/form/primitives/autocomplete/stories/fixtures.d.ts +8 -0
  548. package/build-types/form/primitives/autocomplete/stories/fixtures.d.ts.map +1 -0
  549. package/build-types/form/primitives/autocomplete/stories/index.story.d.ts +41 -0
  550. package/build-types/form/primitives/autocomplete/stories/index.story.d.ts.map +1 -0
  551. package/build-types/form/primitives/autocomplete/test/index.test.d.ts +2 -0
  552. package/build-types/form/primitives/autocomplete/test/index.test.d.ts.map +1 -0
  553. package/build-types/form/primitives/autocomplete/types.d.ts +44 -0
  554. package/build-types/form/primitives/autocomplete/types.d.ts.map +1 -0
  555. package/build-types/form/primitives/autocomplete/value.d.ts +3 -0
  556. package/build-types/form/primitives/autocomplete/value.d.ts.map +1 -0
  557. package/build-types/form/primitives/field/description.d.ts +2 -1
  558. package/build-types/form/primitives/field/description.d.ts.map +1 -1
  559. package/build-types/form/primitives/field/details.d.ts +2 -1
  560. package/build-types/form/primitives/field/details.d.ts.map +1 -1
  561. package/build-types/form/primitives/field/label.d.ts +2 -1
  562. package/build-types/form/primitives/field/label.d.ts.map +1 -1
  563. package/build-types/form/primitives/field/stories/index.story.d.ts +1 -1
  564. package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
  565. package/build-types/form/primitives/fieldset/description.d.ts +2 -1
  566. package/build-types/form/primitives/fieldset/description.d.ts.map +1 -1
  567. package/build-types/form/primitives/fieldset/details.d.ts +2 -1
  568. package/build-types/form/primitives/fieldset/details.d.ts.map +1 -1
  569. package/build-types/form/primitives/fieldset/legend.d.ts +2 -1
  570. package/build-types/form/primitives/fieldset/legend.d.ts.map +1 -1
  571. package/build-types/form/primitives/fieldset/root.d.ts +2 -1
  572. package/build-types/form/primitives/fieldset/root.d.ts.map +1 -1
  573. package/build-types/form/primitives/fieldset/stories/index.story.d.ts +1 -1
  574. package/build-types/form/primitives/fieldset/stories/index.story.d.ts.map +1 -1
  575. package/build-types/form/primitives/index.d.ts +1 -0
  576. package/build-types/form/primitives/index.d.ts.map +1 -1
  577. package/build-types/form/primitives/input/stories/index.story.d.ts +1 -1
  578. package/build-types/form/primitives/input/stories/index.story.d.ts.map +1 -1
  579. package/build-types/form/primitives/input-layout/stories/index.story.d.ts +1 -1
  580. package/build-types/form/primitives/input-layout/stories/index.story.d.ts.map +1 -1
  581. package/build-types/form/primitives/select/index.d.ts +1 -0
  582. package/build-types/form/primitives/select/index.d.ts.map +1 -1
  583. package/build-types/form/primitives/select/item.d.ts +6 -2
  584. package/build-types/form/primitives/select/item.d.ts.map +1 -1
  585. package/build-types/form/primitives/select/popup.d.ts +10 -1
  586. package/build-types/form/primitives/select/popup.d.ts.map +1 -1
  587. package/build-types/form/primitives/select/portal.d.ts +8 -0
  588. package/build-types/form/primitives/select/portal.d.ts.map +1 -0
  589. package/build-types/form/primitives/select/stories/index.story.d.ts +14 -6
  590. package/build-types/form/primitives/select/stories/index.story.d.ts.map +1 -1
  591. package/build-types/form/primitives/select/trigger.d.ts +12 -2
  592. package/build-types/form/primitives/select/trigger.d.ts.map +1 -1
  593. package/build-types/form/primitives/select/types.d.ts +18 -3
  594. package/build-types/form/primitives/select/types.d.ts.map +1 -1
  595. package/build-types/index.d.ts +1 -0
  596. package/build-types/index.d.ts.map +1 -1
  597. package/build-types/link/link.d.ts.map +1 -1
  598. package/build-types/link/stories/index.story.d.ts +2 -3
  599. package/build-types/link/stories/index.story.d.ts.map +1 -1
  600. package/build-types/link/types.d.ts +1 -2
  601. package/build-types/link/types.d.ts.map +1 -1
  602. package/build-types/notice/action-link.d.ts.map +1 -1
  603. package/build-types/popover/context.d.ts +6 -13
  604. package/build-types/popover/context.d.ts.map +1 -1
  605. package/build-types/popover/description.d.ts +0 -1
  606. package/build-types/popover/description.d.ts.map +1 -1
  607. package/build-types/popover/index.d.ts +2 -1
  608. package/build-types/popover/index.d.ts.map +1 -1
  609. package/build-types/popover/popup.d.ts +3 -2
  610. package/build-types/popover/popup.d.ts.map +1 -1
  611. package/build-types/popover/portal.d.ts +9 -0
  612. package/build-types/popover/portal.d.ts.map +1 -0
  613. package/build-types/popover/root.d.ts +2 -2
  614. package/build-types/popover/stories/index.story.d.ts +24 -16
  615. package/build-types/popover/stories/index.story.d.ts.map +1 -1
  616. package/build-types/popover/title.d.ts.map +1 -1
  617. package/build-types/popover/types.d.ts +8 -15
  618. package/build-types/popover/types.d.ts.map +1 -1
  619. package/build-types/stack/stories/index.story.d.ts.map +1 -1
  620. package/build-types/tabs/context.d.ts.map +1 -1
  621. package/build-types/tabs/list.d.ts +2 -1
  622. package/build-types/tabs/list.d.ts.map +1 -1
  623. package/build-types/tabs/panel.d.ts +2 -1
  624. package/build-types/tabs/panel.d.ts.map +1 -1
  625. package/build-types/tabs/root.d.ts +2 -1
  626. package/build-types/tabs/root.d.ts.map +1 -1
  627. package/build-types/tabs/stories/index.story.d.ts +1 -1
  628. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  629. package/build-types/tabs/tab.d.ts +2 -1
  630. package/build-types/tabs/tab.d.ts.map +1 -1
  631. package/build-types/text/stories/index.story.d.ts.map +1 -1
  632. package/build-types/tooltip/index.d.ts +2 -1
  633. package/build-types/tooltip/index.d.ts.map +1 -1
  634. package/build-types/tooltip/popup.d.ts.map +1 -1
  635. package/build-types/tooltip/portal.d.ts +8 -0
  636. package/build-types/tooltip/portal.d.ts.map +1 -0
  637. package/build-types/tooltip/provider.d.ts +1 -1
  638. package/build-types/tooltip/provider.d.ts.map +1 -1
  639. package/build-types/tooltip/root.d.ts +9 -8
  640. package/build-types/tooltip/root.d.ts.map +1 -1
  641. package/build-types/tooltip/stories/index.story.d.ts +18 -1
  642. package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
  643. package/build-types/tooltip/stories/usage-guidelines.story.d.ts +21 -0
  644. package/build-types/tooltip/stories/usage-guidelines.story.d.ts.map +1 -0
  645. package/build-types/tooltip/trigger.d.ts.map +1 -1
  646. package/build-types/tooltip/types.d.ts +13 -5
  647. package/build-types/tooltip/types.d.ts.map +1 -1
  648. package/build-types/utils/create-overlay-modal-context.d.ts +14 -0
  649. package/build-types/utils/create-overlay-modal-context.d.ts.map +1 -0
  650. package/build-types/utils/create-overlay-title-validation.d.ts +15 -0
  651. package/build-types/utils/create-overlay-title-validation.d.ts.map +1 -0
  652. package/build-types/utils/render-portal-with-children.d.ts +16 -0
  653. package/build-types/utils/render-portal-with-children.d.ts.map +1 -0
  654. package/build-types/utils/types.d.ts +6 -2
  655. package/build-types/utils/types.d.ts.map +1 -1
  656. package/build-types/utils/use-deprioritized-initial-focus.d.ts +9 -8
  657. package/build-types/utils/use-deprioritized-initial-focus.d.ts.map +1 -1
  658. package/build-types/utils/use-overlay-scroll-state-attributes.d.ts +85 -0
  659. package/build-types/utils/use-overlay-scroll-state-attributes.d.ts.map +1 -0
  660. package/build-types/utils/use-schedule-validation.d.ts +13 -0
  661. package/build-types/utils/use-schedule-validation.d.ts.map +1 -0
  662. package/build-types/visually-hidden/stories/index.story.d.ts +7 -0
  663. package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -1
  664. package/build-types/visually-hidden/visually-hidden.d.ts +18 -0
  665. package/build-types/visually-hidden/visually-hidden.d.ts.map +1 -1
  666. package/package.json +12 -12
  667. package/src/alert-dialog/index.ts +1 -0
  668. package/src/alert-dialog/popup.tsx +114 -45
  669. package/src/alert-dialog/portal.tsx +17 -0
  670. package/src/alert-dialog/stories/index.story.tsx +123 -3
  671. package/src/alert-dialog/style.module.css +13 -4
  672. package/src/alert-dialog/test/index.test.tsx +380 -0
  673. package/src/alert-dialog/types.ts +33 -1
  674. package/src/badge/badge.tsx +11 -14
  675. package/src/badge/stories/choosing-intent.story.tsx +1 -1
  676. package/src/badge/stories/index.story.tsx +1 -0
  677. package/src/badge/style.module.css +0 -4
  678. package/src/button/style.module.css +4 -4
  679. package/src/card/stories/index.story.tsx +5 -4
  680. package/src/card/style.module.css +0 -4
  681. package/src/card/test/index.test.tsx +17 -0
  682. package/src/card/title.tsx +6 -5
  683. package/src/collapsible/stories/index.story.tsx +1 -0
  684. package/src/collapsible-card/content.tsx +12 -1
  685. package/src/collapsible-card/header.tsx +2 -0
  686. package/src/collapsible-card/stories/index.story.tsx +6 -5
  687. package/src/collapsible-card/style.module.css +16 -4
  688. package/src/dialog/content.tsx +47 -0
  689. package/src/dialog/context.tsx +14 -98
  690. package/src/dialog/description.tsx +27 -0
  691. package/src/dialog/footer.tsx +10 -2
  692. package/src/dialog/header.tsx +10 -2
  693. package/src/dialog/index.ts +16 -1
  694. package/src/dialog/popup.tsx +28 -7
  695. package/src/dialog/portal.tsx +18 -0
  696. package/src/dialog/root.tsx +22 -5
  697. package/src/dialog/stories/index.story.tsx +224 -47
  698. package/src/dialog/style.module.css +78 -24
  699. package/src/dialog/test/index.test.tsx +907 -148
  700. package/src/dialog/title.tsx +27 -13
  701. package/src/dialog/types.ts +71 -5
  702. package/src/drawer/action.tsx +28 -0
  703. package/src/drawer/close-icon.tsx +33 -0
  704. package/src/drawer/content.tsx +50 -0
  705. package/src/drawer/context.tsx +29 -0
  706. package/src/drawer/description.tsx +25 -0
  707. package/src/drawer/footer.tsx +34 -0
  708. package/src/drawer/header.tsx +34 -0
  709. package/src/drawer/index.ts +25 -0
  710. package/src/drawer/popup.tsx +100 -0
  711. package/src/drawer/portal.tsx +18 -0
  712. package/src/drawer/root.tsx +41 -0
  713. package/src/drawer/stories/index.story.tsx +543 -0
  714. package/src/drawer/style.module.css +324 -0
  715. package/src/drawer/test/index.test.tsx +1097 -0
  716. package/src/drawer/title.tsx +53 -0
  717. package/src/drawer/trigger.tsx +14 -0
  718. package/src/drawer/types.ts +174 -0
  719. package/src/empty-state/description.tsx +6 -2
  720. package/src/empty-state/stories/index.story.tsx +2 -1
  721. package/src/empty-state/style.module.css +1 -1
  722. package/src/empty-state/test/description.test.tsx +13 -0
  723. package/src/empty-state/test/title.test.tsx +13 -0
  724. package/src/empty-state/title.tsx +9 -2
  725. package/src/form/input-control/stories/index.story.tsx +4 -1
  726. package/src/form/primitives/autocomplete/clear.tsx +35 -0
  727. package/src/form/primitives/autocomplete/collection.tsx +13 -0
  728. package/src/form/primitives/autocomplete/empty.tsx +17 -0
  729. package/src/form/primitives/autocomplete/index.ts +12 -0
  730. package/src/form/primitives/autocomplete/input-group.tsx +16 -0
  731. package/src/form/primitives/autocomplete/input.tsx +20 -0
  732. package/src/form/primitives/autocomplete/item.tsx +24 -0
  733. package/src/form/primitives/autocomplete/list-body.tsx +23 -0
  734. package/src/form/primitives/autocomplete/list.tsx +17 -0
  735. package/src/form/primitives/autocomplete/popup.tsx +42 -0
  736. package/src/form/primitives/autocomplete/portal.tsx +16 -0
  737. package/src/form/primitives/autocomplete/root.tsx +11 -0
  738. package/src/form/primitives/autocomplete/stories/fixtures.ts +35 -0
  739. package/src/form/primitives/autocomplete/stories/index.story.tsx +437 -0
  740. package/src/form/primitives/autocomplete/style.module.css +7 -0
  741. package/src/form/primitives/autocomplete/test/index.test.tsx +162 -0
  742. package/src/form/primitives/autocomplete/types.ts +74 -0
  743. package/src/form/primitives/autocomplete/value.tsx +6 -0
  744. package/src/form/primitives/field/details.tsx +4 -2
  745. package/src/form/primitives/field/label.tsx +9 -5
  746. package/src/form/primitives/field/root.tsx +2 -2
  747. package/src/form/primitives/field/stories/index.story.tsx +1 -1
  748. package/src/form/primitives/field/test/index.test.tsx +11 -0
  749. package/src/form/primitives/fieldset/legend.tsx +9 -4
  750. package/src/form/primitives/fieldset/stories/index.story.tsx +1 -1
  751. package/src/form/primitives/fieldset/test/index.test.tsx +22 -0
  752. package/src/form/primitives/index.ts +1 -0
  753. package/src/form/primitives/input/stories/index.story.tsx +2 -1
  754. package/src/form/primitives/input-layout/stories/index.story.tsx +2 -1
  755. package/src/form/primitives/input-layout/style.module.css +3 -3
  756. package/src/form/primitives/select/index.ts +1 -0
  757. package/src/form/primitives/select/item.tsx +0 -1
  758. package/src/form/primitives/select/popup.tsx +34 -34
  759. package/src/form/primitives/select/portal.tsx +16 -0
  760. package/src/form/primitives/select/stories/index.story.tsx +21 -7
  761. package/src/form/primitives/select/test/index.test.tsx +64 -1
  762. package/src/form/primitives/select/types.ts +21 -4
  763. package/src/index.ts +1 -0
  764. package/src/link/link.tsx +12 -26
  765. package/src/link/stories/index.story.tsx +6 -11
  766. package/src/link/style.module.css +6 -18
  767. package/src/link/test/index.test.tsx +31 -27
  768. package/src/link/types.ts +1 -2
  769. package/src/notice/action-link.tsx +7 -4
  770. package/src/notice/style.module.css +6 -6
  771. package/src/popover/context.tsx +6 -89
  772. package/src/popover/description.tsx +2 -11
  773. package/src/popover/index.ts +2 -1
  774. package/src/popover/popup.tsx +17 -15
  775. package/src/popover/portal.tsx +17 -0
  776. package/src/popover/root.tsx +2 -2
  777. package/src/popover/stories/index.story.tsx +57 -26
  778. package/src/popover/style.module.css +36 -7
  779. package/src/popover/test/index.test.tsx +189 -74
  780. package/src/popover/title.tsx +10 -9
  781. package/src/popover/types.ts +10 -15
  782. package/src/stack/stories/index.story.tsx +1 -0
  783. package/src/tabs/context.tsx +14 -34
  784. package/src/tabs/list.tsx +0 -1
  785. package/src/tabs/panel.tsx +7 -2
  786. package/src/tabs/stories/index.story.tsx +2 -1
  787. package/src/tabs/style.module.css +2 -19
  788. package/src/tabs/test/index.test.tsx +7 -3
  789. package/src/text/stories/index.story.tsx +1 -0
  790. package/src/text/style.module.css +49 -49
  791. package/src/text/text.tsx +2 -2
  792. package/src/tooltip/index.ts +2 -1
  793. package/src/tooltip/popup.tsx +24 -27
  794. package/src/tooltip/portal.tsx +16 -0
  795. package/src/tooltip/provider.tsx +3 -3
  796. package/src/tooltip/root.tsx +11 -10
  797. package/src/tooltip/stories/index.story.tsx +39 -1
  798. package/src/tooltip/stories/usage-guidelines.mdx +91 -0
  799. package/src/tooltip/stories/usage-guidelines.story.tsx +123 -0
  800. package/src/tooltip/style.module.css +14 -2
  801. package/src/tooltip/test/index.test.tsx +67 -0
  802. package/src/tooltip/trigger.tsx +3 -7
  803. package/src/tooltip/types.ts +16 -5
  804. package/src/utils/create-overlay-modal-context.tsx +34 -0
  805. package/src/utils/create-overlay-title-validation.tsx +116 -0
  806. package/src/utils/css/field.module.css +10 -10
  807. package/src/utils/css/global-css-defense.module.css +1 -1
  808. package/src/utils/css/item-popup.module.css +11 -13
  809. package/src/utils/css/overlay-chrome.module.css +222 -0
  810. package/src/utils/render-portal-with-children.ts +27 -0
  811. package/src/utils/test/use-deprioritized-initial-focus.test.tsx +3 -3
  812. package/src/utils/types.ts +7 -2
  813. package/src/utils/use-deprioritized-initial-focus.ts +23 -17
  814. package/src/utils/use-overlay-scroll-state-attributes.ts +272 -0
  815. package/src/utils/use-schedule-validation.ts +45 -0
  816. package/src/visually-hidden/stories/index.story.tsx +26 -0
  817. package/src/visually-hidden/visually-hidden.tsx +23 -1
  818. package/build/types/css-modules.d.cjs +0 -2
  819. package/build/types/react.d.cjs +0 -5
  820. package/build/types/react.d.cjs.map +0 -7
  821. package/build-module/types/css-modules.d.mjs +0 -1
  822. package/build-module/types/react.d.mjs +0 -3
  823. package/build-module/types/react.d.mjs.map +0 -7
  824. package/src/types/css-modules.d.ts +0 -4
  825. package/src/types/react.d.ts +0 -7
  826. /package/build-module/{types/css-modules.d.mjs.map → drawer/types.mjs.map} +0 -0
  827. /package/{build/types/css-modules.d.cjs.map → build-module/form/primitives/autocomplete/types.mjs.map} +0 -0
package/src/dialog/title.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Dialog as _Dialog } from '@base-ui/react/dialog';
2
- import clsx from 'clsx';
3
2
  import { useMergeRefs } from '@wordpress/compose';
4
- import { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';
3
+ import { forwardRef, useEffect, useRef } from '@wordpress/element';
4
+ import { Text } from '../text';
5
5
  import { useDialogValidationContext } from './context';
6
6
  import styles from './style.module.css';
7
7
  import type { TitleProps } from './types';
@@ -11,27 +11,41 @@ import type { TitleProps } from './types';
11
11
  * and serves as both the visible heading and the accessible label for
12
12
  * the dialog.
13
13
  *
14
- * Base UI's Dialog.Title renders an `<h2>` by default. Use the `render` prop
15
- * to customize the element if needed.
14
+ * **Required** — every dialog must include a `Dialog.Title`, even if
15
+ * visually hidden. The rendered element is linked to the popup via
16
+ * `aria-labelledby`. Renders an `<h2>` by default.
17
+ *
18
+ * To visually hide the title while keeping it accessible, wrap it with
19
+ * `VisuallyHidden` using the `render` prop:
20
+ *
21
+ * ```jsx
22
+ * <VisuallyHidden render={ <Dialog.Title /> }>
23
+ * Accessible title text
24
+ * </VisuallyHidden>
25
+ * ```
16
26
  */
17
27
  const Title = forwardRef< HTMLHeadingElement, TitleProps >(
18
- function DialogTitle( { className, render, ...props }, forwardedRef ) {
28
+ function DialogTitle( { children, ...props }, forwardedRef ) {
19
29
  const validationContext = useDialogValidationContext();
20
30
  const internalRef = useRef< HTMLHeadingElement >( null );
21
31
  const mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );
22
32
 
23
- // Register this title with the parent Popup for validation (dev only)
24
- useLayoutEffect( () => {
25
- validationContext?.registerTitle( internalRef.current );
33
+ useEffect( () => {
34
+ if ( validationContext ) {
35
+ return validationContext.registerTitle( internalRef.current );
36
+ }
37
+ return undefined;
26
38
  }, [ validationContext ] );
27
39
 
28
40
  return (
29
- <_Dialog.Title
41
+ <Text
30
42
  ref={ mergedRef }
31
- className={ clsx( styles.title, className ) }
32
- render={ render }
33
- { ...props }
34
- />
43
+ variant="heading-xl"
44
+ render={ <_Dialog.Title { ...props } /> }
45
+ className={ styles.title }
46
+ >
47
+ { children }
48
+ </Text>
35
49
  );
36
50
  }
37
51
  );
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'
@@ -34,14 +38,30 @@ export interface PopupProps
34
38
  */
35
39
  children?: ReactNode;
36
40
 
41
+ /**
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>`.
49
+ */
50
+ portal?: ReactElement< Omit< PortalProps, 'children' > >;
51
+
37
52
  /**
38
53
  * Renders the dialog at a preset width (excluding additional padding from
39
54
  * the viewport edges).
40
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
+ *
41
61
  * - `'small'` — narrow max-width.
42
62
  * - `'medium'` — moderate max-width.
43
63
  * - `'large'` — wide max-width.
44
- * - `'stretch'` — no max-width, stretches to fill available space.
64
+ * - `'stretch'` — no max-width, stretches to fill available width.
45
65
  * - `'full'` — stretches to fill available width and height.
46
66
  *
47
67
  * @default 'medium'
@@ -56,26 +76,72 @@ export interface ActionProps extends ComponentProps< typeof Button > {
56
76
  children?: ReactNode;
57
77
  }
58
78
 
59
- export interface FooterProps extends ComponentProps< 'div' > {
79
+ export interface FooterProps extends ComponentProps< 'footer' > {
60
80
  /**
61
81
  * The content to be rendered inside the component.
62
82
  */
63
83
  children?: ReactNode;
64
84
  }
65
85
 
66
- export interface HeaderProps extends ComponentProps< 'div' > {
86
+ export interface HeaderProps extends ComponentProps< 'header' > {
67
87
  /**
68
88
  * The content to be rendered inside the component.
69
89
  */
70
90
  children?: ReactNode;
71
91
  }
72
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
+
73
129
  export interface TitleProps extends ComponentProps< 'h2' > {
74
130
  /**
75
131
  * The title content to be rendered. This serves as both the visible
76
132
  * heading and the accessible label for the dialog.
133
+ *
134
+ * When `Dialog.Title` is passed as a render element (e.g. to
135
+ * `VisuallyHidden`), children can be provided by the wrapper instead.
77
136
  */
78
- children: ReactNode;
137
+ children?: ReactNode;
138
+ }
139
+
140
+ export interface DescriptionProps extends ComponentProps< 'p' > {
141
+ /**
142
+ * The description content to be rendered inside the component.
143
+ */
144
+ children?: ReactNode;
79
145
  }
80
146
 
81
147
  export interface CloseIconProps
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,50 @@
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 { useOverlayScrollStateAttributes } from '../utils/use-overlay-scroll-state-attributes';
6
+ import focusStyles from '../utils/css/focus.module.css';
7
+ import styles from './style.module.css';
8
+ import type { ContentProps } from './types';
9
+
10
+ /**
11
+ * Renders the scrollable body of the drawer, sitting between `Drawer.Header`
12
+ * and `Drawer.Footer` as a flex sibling.
13
+ *
14
+ * **Required for scrolling** — `Drawer.Content` is the element that owns
15
+ * the popup's overflow. Without it, body content that exceeds the popup's
16
+ * available space clips instead of scrolling, and Base UI's
17
+ * swipe-dismiss-on-scroll-edge logic will not engage on up/down drawers.
18
+ * Render it once per popup and wrap any freeform body content in it.
19
+ *
20
+ * Placing `Drawer.Header` or `Drawer.Footer` *inside* `Drawer.Content`
21
+ * makes them scroll with the body (the "non-sticky" opt-out) rather than
22
+ * staying pinned to the popup's edges.
23
+ *
24
+ * Renders Base UI's `_Drawer.Content` so swipe-dismiss wiring remains
25
+ * wired automatically.
26
+ */
27
+ const Content = forwardRef< HTMLDivElement, ContentProps >(
28
+ function DrawerContent( { className, children, onScroll, ...props }, ref ) {
29
+ const { ref: scrollStateRef, onScroll: scrollStateOnScroll } =
30
+ useOverlayScrollStateAttributes< HTMLDivElement >( onScroll );
31
+ const mergedRef = useMergeRefs( [ ref, scrollStateRef ] );
32
+
33
+ return (
34
+ <_Drawer.Content
35
+ ref={ mergedRef }
36
+ className={ clsx(
37
+ styles.content,
38
+ focusStyles[ 'outset-ring--focus-visible' ],
39
+ className
40
+ ) }
41
+ onScroll={ scrollStateOnScroll }
42
+ { ...props }
43
+ >
44
+ { children }
45
+ </_Drawer.Content>
46
+ );
47
+ }
48
+ );
49
+
50
+ 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,100 @@
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 { renderPortalWithChildren } from '../utils/render-portal-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`. Portal merging is
28
+ * handled by `renderPortalWithChildren` (shared with other overlay `Popup`s).
29
+ *
30
+ * The popup is a flex column; scroll ownership lives on `Drawer.Content`,
31
+ * which children are expected to render. Without it, long body content will
32
+ * clip instead of scrolling and Base UI's swipe-dismiss-on-scroll-edge
33
+ * logic on up/down drawers cannot engage.
34
+ */
35
+ const Popup = forwardRef< HTMLDivElement, PopupProps >( function DrawerPopup(
36
+ { className, portal, children, size, initialFocus, finalFocus, ...props },
37
+ ref
38
+ ) {
39
+ const { resolvedInitialFocus, popupRef } = useDeprioritizedInitialFocus( {
40
+ initialFocus,
41
+ deprioritizedAttributes: [ CLOSE_ICON_ATTR, SCROLL_CONTAINER_ATTR ],
42
+ } );
43
+ const mergedRef = useMergeRefs( [ ref, popupRef ] );
44
+ const modal = useDrawerModal();
45
+
46
+ const portalChildren = (
47
+ <>
48
+ { /*
49
+ * Only render a backdrop for fully modal drawers. Non-modal drawers
50
+ * should not dim the page, and `trap-focus` keeps outside pointer
51
+ * interactions enabled, so a backdrop would misrepresent that mode.
52
+ */ }
53
+ { modal === true && (
54
+ <_Drawer.Backdrop
55
+ className={ styles.backdrop }
56
+ data-testid="drawer-backdrop"
57
+ />
58
+ ) }
59
+ <_Drawer.Viewport className={ styles.viewport }>
60
+ { /*
61
+ * ThemeProvider wraps _Drawer.Popup directly (matching Dialog
62
+ * and Popover) so the `display: contents` focus-trap workaround
63
+ * selector in the CSS module actually targets this subtree.
64
+ */ }
65
+ <ThemeProvider>
66
+ <_Drawer.Popup
67
+ ref={ mergedRef }
68
+ className={ ( state ) => {
69
+ const isVertical =
70
+ state.swipeDirection === 'up' ||
71
+ state.swipeDirection === 'down';
72
+ const resolvedSize =
73
+ size ?? ( isVertical ? 'auto' : 'medium' );
74
+
75
+ return clsx(
76
+ styles.popup,
77
+ className,
78
+ styles[ `is-${ resolvedSize }` ]
79
+ );
80
+ } }
81
+ initialFocus={ resolvedInitialFocus }
82
+ finalFocus={ finalFocus }
83
+ { ...props }
84
+ data-wp-ui-overlay-modal={
85
+ modal === true ? '' : undefined
86
+ }
87
+ >
88
+ <DrawerValidationProvider>
89
+ { children }
90
+ </DrawerValidationProvider>
91
+ </_Drawer.Popup>
92
+ </ThemeProvider>
93
+ </_Drawer.Viewport>
94
+ </>
95
+ );
96
+
97
+ return renderPortalWithChildren( portal, <Portal />, portalChildren );
98
+ } );
99
+
100
+ 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 };