@pine-ds/core 4.7.2 → 4.9.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 (536) hide show
  1. package/components/attributes.js +1 -1
  2. package/components/floating-ui.dom.js +1 -1
  3. package/components/index.js +1 -1
  4. package/components/index2.js +1 -1
  5. package/components/keep-hydrated.js +1 -0
  6. package/components/mock-pds-modal.js +1 -1
  7. package/components/pds-alert.js +1 -1
  8. package/components/pds-avatar.js +1 -1
  9. package/components/pds-box2.js +1 -1
  10. package/components/pds-button2.js +1 -1
  11. package/components/pds-checkbox2.js +1 -1
  12. package/components/pds-chip2.js +1 -1
  13. package/components/pds-combobox.js +1 -1
  14. package/components/pds-container.js +1 -1
  15. package/components/pds-copytext.js +1 -1
  16. package/components/pds-datepicker.js +1 -1
  17. package/components/pds-divider.js +1 -1
  18. package/components/pds-drawer-content.js +1 -1
  19. package/components/pds-drawer-footer.js +1 -1
  20. package/components/pds-drawer-header.js +1 -1
  21. package/components/pds-drawer.js +1 -1
  22. package/components/pds-dropdown-menu-item.js +1 -1
  23. package/components/pds-dropdown-menu-separator.js +1 -1
  24. package/components/pds-dropdown-menu.js +1 -1
  25. package/components/pds-filter.js +1 -1
  26. package/components/pds-filters.js +1 -1
  27. package/components/pds-image.js +1 -1
  28. package/components/pds-input2.js +1 -1
  29. package/components/pds-link2.js +1 -1
  30. package/components/pds-loader2.js +1 -1
  31. package/components/pds-modal-content.js +1 -1
  32. package/components/pds-modal-footer.js +1 -1
  33. package/components/pds-modal-header.js +1 -1
  34. package/components/pds-modal2.js +1 -1
  35. package/components/pds-multiselect.js +1 -1
  36. package/components/pds-popover.js +1 -1
  37. package/components/pds-progress.js +1 -1
  38. package/components/pds-property.js +1 -1
  39. package/components/pds-radio-group.js +1 -1
  40. package/components/pds-radio.js +1 -1
  41. package/components/pds-row.js +1 -1
  42. package/components/pds-select.js +1 -1
  43. package/components/pds-sortable-item.js +1 -1
  44. package/components/pds-sortable.js +2 -2
  45. package/components/pds-switch.js +1 -1
  46. package/components/pds-table-body.js +1 -1
  47. package/components/pds-table-cell2.js +1 -1
  48. package/components/pds-table-head-cell2.js +1 -1
  49. package/components/pds-table-head.js +1 -1
  50. package/components/pds-table-row.js +1 -1
  51. package/components/pds-tabpanel.js +1 -1
  52. package/components/pds-tabs.js +1 -1
  53. package/components/pds-text2.js +1 -1
  54. package/components/pds-textarea.js +1 -1
  55. package/components/pds-toast.js +1 -1
  56. package/components/pds-tooltip.js +1 -1
  57. package/components/tabbable.js +1 -0
  58. package/components/truncation-tooltip.js +1 -1
  59. package/dist/cjs/{attributes-BJ7KBHql.js → attributes-CW49XqaL.js} +1 -1
  60. package/dist/cjs/{floating-ui.dom-Dc8Anyel.js → floating-ui.dom-Dw41zbyY.js} +1 -0
  61. package/dist/cjs/{index-jl_Q819j.js → index-BsWY_xEJ.js} +1 -1
  62. package/dist/cjs/{index-5Azb8EQG.js → index-Do70atou.js} +1 -1
  63. package/dist/cjs/index.cjs.js +1 -1
  64. package/dist/cjs/{keep-hydrated-CiXgkEYd.js → keep-hydrated-AKoh0DG4.js} +1 -0
  65. package/dist/cjs/loader.cjs.js +3 -3
  66. package/dist/cjs/mock-pds-modal.cjs.entry.js +3 -3
  67. package/dist/cjs/pds-accordion.cjs.entry.js +3 -3
  68. package/dist/cjs/pds-alert.cjs.entry.js +17 -4
  69. package/dist/cjs/pds-avatar.cjs.entry.js +23 -13
  70. package/dist/cjs/pds-box.cjs.entry.js +4 -4
  71. package/dist/cjs/pds-button.cjs.entry.js +80 -45
  72. package/dist/cjs/pds-checkbox.cjs.entry.js +16 -8
  73. package/dist/cjs/pds-chip.cjs.entry.js +8 -8
  74. package/dist/cjs/pds-combobox.cjs.entry.js +43 -13
  75. package/dist/cjs/pds-container.cjs.entry.js +3 -3
  76. package/dist/cjs/pds-copytext.cjs.entry.js +7 -7
  77. package/dist/cjs/pds-datepicker.cjs.entry.js +6 -6
  78. package/dist/cjs/pds-divider.cjs.entry.js +3 -3
  79. package/dist/cjs/pds-drawer-content.cjs.entry.js +3 -3
  80. package/dist/cjs/pds-drawer-footer.cjs.entry.js +3 -3
  81. package/dist/cjs/pds-drawer-header.cjs.entry.js +3 -3
  82. package/dist/cjs/pds-drawer.cjs.entry.js +4 -4
  83. package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +34 -5
  84. package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js +3 -3
  85. package/dist/cjs/pds-dropdown-menu.cjs.entry.js +8 -8
  86. package/dist/cjs/pds-filter.cjs.entry.js +4 -4
  87. package/dist/cjs/pds-filters.cjs.entry.js +3 -3
  88. package/dist/cjs/pds-icon.cjs.entry.js +2 -2
  89. package/dist/cjs/pds-image.cjs.entry.js +4 -4
  90. package/dist/cjs/pds-input.cjs.entry.js +6 -6
  91. package/dist/cjs/pds-link.cjs.entry.js +15 -6
  92. package/dist/cjs/pds-loader.cjs.entry.js +4 -4
  93. package/dist/cjs/pds-modal-content.cjs.entry.js +34 -32
  94. package/dist/cjs/pds-modal-footer.cjs.entry.js +3 -3
  95. package/dist/cjs/pds-modal-header.cjs.entry.js +3 -3
  96. package/dist/cjs/pds-modal.cjs.entry.js +9 -89
  97. package/dist/cjs/pds-multiselect.cjs.entry.js +9 -9
  98. package/dist/cjs/pds-popover.cjs.entry.js +416 -163
  99. package/dist/cjs/pds-progress.cjs.entry.js +4 -4
  100. package/dist/cjs/pds-property.cjs.entry.js +3 -3
  101. package/dist/cjs/pds-radio-group.cjs.entry.js +6 -6
  102. package/dist/cjs/pds-radio.cjs.entry.js +24 -11
  103. package/dist/cjs/pds-row.cjs.entry.js +4 -4
  104. package/dist/cjs/pds-select.cjs.entry.js +132 -21
  105. package/dist/cjs/pds-sortable-item.cjs.entry.js +5 -5
  106. package/dist/cjs/pds-sortable.cjs.entry.js +4 -4
  107. package/dist/cjs/pds-switch.cjs.entry.js +7 -7
  108. package/dist/cjs/pds-tab.cjs.entry.js +3 -3
  109. package/dist/cjs/pds-table-body.cjs.entry.js +3 -3
  110. package/dist/cjs/pds-table-cell.cjs.entry.js +6 -6
  111. package/dist/cjs/pds-table-head-cell.cjs.entry.js +5 -5
  112. package/dist/cjs/pds-table-head.cjs.entry.js +3 -3
  113. package/dist/cjs/pds-table-row.cjs.entry.js +3 -3
  114. package/dist/cjs/pds-table.cjs.entry.js +2 -2
  115. package/dist/cjs/pds-tabpanel.cjs.entry.js +4 -4
  116. package/dist/cjs/pds-tabs.cjs.entry.js +4 -4
  117. package/dist/cjs/pds-text.cjs.entry.js +5 -5
  118. package/dist/cjs/pds-textarea.cjs.entry.js +8 -8
  119. package/dist/cjs/pds-toast.cjs.entry.js +14 -8
  120. package/dist/cjs/pds-tooltip.cjs.entry.js +115 -44
  121. package/dist/cjs/pine-core.cjs.js +3 -3
  122. package/dist/cjs/tabbable-CddSt_Hi.js +85 -0
  123. package/dist/cjs/{truncation-tooltip-DO9xli2e.js → truncation-tooltip-O5nQmXPw.js} +32 -7
  124. package/dist/collection/components/pds-alert/pds-alert.css +13 -0
  125. package/dist/collection/components/pds-alert/pds-alert.js +36 -1
  126. package/dist/collection/components/pds-alert/stories/pds-alert.stories.js +4 -0
  127. package/dist/collection/components/pds-avatar/pds-avatar.js +42 -10
  128. package/dist/collection/components/pds-avatar/stories/pds-avatar.stories.js +2 -0
  129. package/dist/collection/components/pds-box/pds-box.js +1 -1
  130. package/dist/collection/components/pds-button/pds-button.js +36 -44
  131. package/dist/collection/components/pds-button/stories/pds-button.stories.js +3 -3
  132. package/dist/collection/components/pds-checkbox/pds-checkbox.css +79 -0
  133. package/dist/collection/components/pds-checkbox/pds-checkbox.js +36 -5
  134. package/dist/collection/components/pds-checkbox/stories/pds-checkbox.stories.js +38 -0
  135. package/dist/collection/components/pds-chip/pds-chip.js +2 -2
  136. package/dist/collection/components/pds-combobox/pds-combobox.css +33 -0
  137. package/dist/collection/components/pds-combobox/pds-combobox.js +62 -9
  138. package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +44 -0
  139. package/dist/collection/components/pds-container/pds-container.js +1 -1
  140. package/dist/collection/components/pds-copytext/pds-copytext.js +1 -1
  141. package/dist/collection/components/pds-datepicker/pds-datepicker.js +2 -2
  142. package/dist/collection/components/pds-datepicker/stories/pds-datepicker.stories.js +1 -1
  143. package/dist/collection/components/pds-divider/pds-divider.js +1 -1
  144. package/dist/collection/components/pds-drawer/pds-drawer-content/pds-drawer-content.js +1 -1
  145. package/dist/collection/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.js +1 -1
  146. package/dist/collection/components/pds-drawer/pds-drawer-header/pds-drawer-header.js +1 -1
  147. package/dist/collection/components/pds-drawer/pds-drawer.js +2 -2
  148. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.css +8 -0
  149. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +81 -7
  150. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.js +1 -1
  151. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js +4 -4
  152. package/dist/collection/components/pds-dropdown-menu/stories/pds-dropdown-menu.stories.js +39 -0
  153. package/dist/collection/components/pds-filters/pds-filter/pds-filter.js +1 -1
  154. package/dist/collection/components/pds-filters/pds-filters.js +1 -1
  155. package/dist/collection/components/pds-image/pds-image.js +2 -2
  156. package/dist/collection/components/pds-input/pds-input.js +2 -2
  157. package/dist/collection/components/pds-input/stories/pds-input.stories.js +6 -6
  158. package/dist/collection/components/pds-link/pds-link.js +34 -3
  159. package/dist/collection/components/pds-link/stories/pds-link.stories.js +3 -2
  160. package/dist/collection/components/pds-loader/pds-loader.js +1 -1
  161. package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +32 -30
  162. package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js +1 -1
  163. package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js +1 -1
  164. package/dist/collection/components/pds-modal/pds-modal.js +5 -85
  165. package/dist/collection/components/pds-modal/test/mock-pds-modal.js +1 -1
  166. package/dist/collection/components/pds-multiselect/pds-multiselect.js +5 -5
  167. package/dist/collection/components/pds-popover/pds-popover.css +6 -0
  168. package/dist/collection/components/pds-popover/pds-popover.js +465 -159
  169. package/dist/collection/components/pds-popover/stories/pds-popover.stories.js +31 -0
  170. package/dist/collection/components/pds-progress/pds-progress.js +1 -1
  171. package/dist/collection/components/pds-property/pds-property.js +1 -1
  172. package/dist/collection/components/pds-radio/pds-radio.css +57 -0
  173. package/dist/collection/components/pds-radio/pds-radio.js +45 -9
  174. package/dist/collection/components/pds-radio/stories/pds-radio.stories.js +15 -0
  175. package/dist/collection/components/pds-radio-group/pds-radio-group.js +3 -3
  176. package/dist/collection/components/pds-radio-group/stories/pds-radio-group.stories.js +45 -0
  177. package/dist/collection/components/pds-row/pds-row.js +1 -1
  178. package/dist/collection/components/pds-select/pds-select.js +128 -17
  179. package/dist/collection/components/pds-select/stories/pds-select.stories.js +2 -2
  180. package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +1 -1
  181. package/dist/collection/components/pds-sortable/pds-sortable.js +1 -1
  182. package/dist/collection/components/pds-switch/pds-switch.js +3 -3
  183. package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
  184. package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
  185. package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
  186. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +2 -2
  187. package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
  188. package/dist/collection/components/pds-table/stories/pds-table.stories.js +4 -4
  189. package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
  190. package/dist/collection/components/pds-tabs/pds-tabs.js +1 -1
  191. package/dist/collection/components/pds-text/pds-text.js +1 -1
  192. package/dist/collection/components/pds-text/stories/pds-text.stories.js +1 -1
  193. package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
  194. package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js +2 -2
  195. package/dist/collection/components/pds-toast/pds-toast.css +13 -0
  196. package/dist/collection/components/pds-toast/pds-toast.js +33 -5
  197. package/dist/collection/components/pds-toast/stories/pds-toast.stories.js +4 -1
  198. package/dist/collection/components/pds-tooltip/pds-tooltip.js +113 -41
  199. package/dist/collection/utils/aria-references.js +42 -0
  200. package/dist/collection/utils/tabbable.js +81 -0
  201. package/dist/collection/utils/truncation-tooltip.js +31 -6
  202. package/dist/docs.json +367 -13
  203. package/dist/esm/{attributes-WXw_I_uJ.js → attributes-DkeVeN0g.js} +1 -1
  204. package/dist/esm/{floating-ui.dom-BPqJgIq6.js → floating-ui.dom-Cuc0DYlm.js} +1 -1
  205. package/dist/esm/{index-Cw9J31qd.js → index-BFSwd-GQ.js} +1 -1
  206. package/dist/esm/{index-BJXk71tO.js → index-m3pqpeWg.js} +2 -2
  207. package/dist/esm/index.js +1 -1
  208. package/dist/esm/{keep-hydrated-BLG6RDBt.js → keep-hydrated-BgNaWLoS.js} +1 -1
  209. package/dist/esm/loader.js +4 -4
  210. package/dist/esm/mock-pds-modal.entry.js +3 -3
  211. package/dist/esm/pds-accordion.entry.js +3 -3
  212. package/dist/esm/pds-alert.entry.js +17 -4
  213. package/dist/esm/pds-avatar.entry.js +23 -13
  214. package/dist/esm/pds-box.entry.js +4 -4
  215. package/dist/esm/pds-button.entry.js +80 -45
  216. package/dist/esm/pds-checkbox.entry.js +16 -8
  217. package/dist/esm/pds-chip.entry.js +8 -8
  218. package/dist/esm/pds-combobox.entry.js +43 -13
  219. package/dist/esm/pds-container.entry.js +3 -3
  220. package/dist/esm/pds-copytext.entry.js +7 -7
  221. package/dist/esm/pds-datepicker.entry.js +6 -6
  222. package/dist/esm/pds-divider.entry.js +3 -3
  223. package/dist/esm/pds-drawer-content.entry.js +3 -3
  224. package/dist/esm/pds-drawer-footer.entry.js +3 -3
  225. package/dist/esm/pds-drawer-header.entry.js +3 -3
  226. package/dist/esm/pds-drawer.entry.js +4 -4
  227. package/dist/esm/pds-dropdown-menu-item.entry.js +34 -5
  228. package/dist/esm/pds-dropdown-menu-separator.entry.js +3 -3
  229. package/dist/esm/pds-dropdown-menu.entry.js +8 -8
  230. package/dist/esm/pds-filter.entry.js +4 -4
  231. package/dist/esm/pds-filters.entry.js +3 -3
  232. package/dist/esm/pds-icon.entry.js +2 -2
  233. package/dist/esm/pds-image.entry.js +4 -4
  234. package/dist/esm/pds-input.entry.js +6 -6
  235. package/dist/esm/pds-link.entry.js +15 -6
  236. package/dist/esm/pds-loader.entry.js +4 -4
  237. package/dist/esm/pds-modal-content.entry.js +34 -32
  238. package/dist/esm/pds-modal-footer.entry.js +3 -3
  239. package/dist/esm/pds-modal-header.entry.js +3 -3
  240. package/dist/esm/pds-modal.entry.js +7 -87
  241. package/dist/esm/pds-multiselect.entry.js +9 -9
  242. package/dist/esm/pds-popover.entry.js +416 -163
  243. package/dist/esm/pds-progress.entry.js +4 -4
  244. package/dist/esm/pds-property.entry.js +3 -3
  245. package/dist/esm/pds-radio-group.entry.js +6 -6
  246. package/dist/esm/pds-radio.entry.js +24 -11
  247. package/dist/esm/pds-row.entry.js +4 -4
  248. package/dist/esm/pds-select.entry.js +132 -21
  249. package/dist/esm/pds-sortable-item.entry.js +5 -5
  250. package/dist/esm/pds-sortable.entry.js +4 -4
  251. package/dist/esm/pds-switch.entry.js +7 -7
  252. package/dist/esm/pds-tab.entry.js +3 -3
  253. package/dist/esm/pds-table-body.entry.js +3 -3
  254. package/dist/esm/pds-table-cell.entry.js +6 -6
  255. package/dist/esm/pds-table-head-cell.entry.js +5 -5
  256. package/dist/esm/pds-table-head.entry.js +3 -3
  257. package/dist/esm/pds-table-row.entry.js +3 -3
  258. package/dist/esm/pds-table.entry.js +2 -2
  259. package/dist/esm/pds-tabpanel.entry.js +4 -4
  260. package/dist/esm/pds-tabs.entry.js +4 -4
  261. package/dist/esm/pds-text.entry.js +5 -5
  262. package/dist/esm/pds-textarea.entry.js +8 -8
  263. package/dist/esm/pds-toast.entry.js +14 -8
  264. package/dist/esm/pds-tooltip.entry.js +115 -44
  265. package/dist/esm/pine-core.js +4 -4
  266. package/dist/esm/tabbable-DCKBKRUy.js +83 -0
  267. package/dist/esm/{truncation-tooltip-DRXsdKk1.js → truncation-tooltip-D_gvhB9r.js} +32 -7
  268. package/dist/esm-es5/{attributes-WXw_I_uJ.js → attributes-DkeVeN0g.js} +1 -1
  269. package/dist/esm-es5/{floating-ui.dom-BPqJgIq6.js → floating-ui.dom-Cuc0DYlm.js} +1 -1
  270. package/dist/esm-es5/{index-Cw9J31qd.js → index-BFSwd-GQ.js} +2 -2
  271. package/dist/esm-es5/{index-BJXk71tO.js → index-m3pqpeWg.js} +1 -1
  272. package/dist/esm-es5/index.js +1 -1
  273. package/dist/esm-es5/{keep-hydrated-BLG6RDBt.js → keep-hydrated-BgNaWLoS.js} +1 -1
  274. package/dist/esm-es5/loader.js +1 -1
  275. package/dist/esm-es5/mock-pds-modal.entry.js +1 -1
  276. package/dist/esm-es5/pds-accordion.entry.js +1 -1
  277. package/dist/esm-es5/pds-alert.entry.js +1 -1
  278. package/dist/esm-es5/pds-avatar.entry.js +1 -1
  279. package/dist/esm-es5/pds-box.entry.js +1 -1
  280. package/dist/esm-es5/pds-button.entry.js +1 -1
  281. package/dist/esm-es5/pds-checkbox.entry.js +1 -1
  282. package/dist/esm-es5/pds-chip.entry.js +1 -1
  283. package/dist/esm-es5/pds-combobox.entry.js +2 -2
  284. package/dist/esm-es5/pds-container.entry.js +1 -1
  285. package/dist/esm-es5/pds-copytext.entry.js +1 -1
  286. package/dist/esm-es5/pds-datepicker.entry.js +1 -1
  287. package/dist/esm-es5/pds-divider.entry.js +1 -1
  288. package/dist/esm-es5/pds-drawer-content.entry.js +1 -1
  289. package/dist/esm-es5/pds-drawer-footer.entry.js +1 -1
  290. package/dist/esm-es5/pds-drawer-header.entry.js +1 -1
  291. package/dist/esm-es5/pds-drawer.entry.js +1 -1
  292. package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
  293. package/dist/esm-es5/pds-dropdown-menu-separator.entry.js +1 -1
  294. package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
  295. package/dist/esm-es5/pds-filter.entry.js +1 -1
  296. package/dist/esm-es5/pds-filters.entry.js +1 -1
  297. package/dist/esm-es5/pds-icon.entry.js +1 -1
  298. package/dist/esm-es5/pds-image.entry.js +1 -1
  299. package/dist/esm-es5/pds-input.entry.js +1 -1
  300. package/dist/esm-es5/pds-link.entry.js +1 -1
  301. package/dist/esm-es5/pds-loader.entry.js +1 -1
  302. package/dist/esm-es5/pds-modal-content.entry.js +1 -1
  303. package/dist/esm-es5/pds-modal-footer.entry.js +1 -1
  304. package/dist/esm-es5/pds-modal-header.entry.js +1 -1
  305. package/dist/esm-es5/pds-modal.entry.js +1 -1
  306. package/dist/esm-es5/pds-multiselect.entry.js +1 -1
  307. package/dist/esm-es5/pds-popover.entry.js +1 -1
  308. package/dist/esm-es5/pds-progress.entry.js +1 -1
  309. package/dist/esm-es5/pds-property.entry.js +1 -1
  310. package/dist/esm-es5/pds-radio-group.entry.js +1 -1
  311. package/dist/esm-es5/pds-radio.entry.js +1 -1
  312. package/dist/esm-es5/pds-row.entry.js +1 -1
  313. package/dist/esm-es5/pds-select.entry.js +1 -1
  314. package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
  315. package/dist/esm-es5/pds-sortable.entry.js +2 -2
  316. package/dist/esm-es5/pds-switch.entry.js +1 -1
  317. package/dist/esm-es5/pds-tab.entry.js +1 -1
  318. package/dist/esm-es5/pds-table-body.entry.js +1 -1
  319. package/dist/esm-es5/pds-table-cell.entry.js +1 -1
  320. package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
  321. package/dist/esm-es5/pds-table-head.entry.js +1 -1
  322. package/dist/esm-es5/pds-table-row.entry.js +1 -1
  323. package/dist/esm-es5/pds-table.entry.js +1 -1
  324. package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
  325. package/dist/esm-es5/pds-tabs.entry.js +1 -1
  326. package/dist/esm-es5/pds-text.entry.js +1 -1
  327. package/dist/esm-es5/pds-textarea.entry.js +1 -1
  328. package/dist/esm-es5/pds-toast.entry.js +1 -1
  329. package/dist/esm-es5/pds-tooltip.entry.js +1 -1
  330. package/dist/esm-es5/pine-core.js +1 -1
  331. package/dist/esm-es5/tabbable-DCKBKRUy.js +1 -0
  332. package/dist/esm-es5/truncation-tooltip-D_gvhB9r.js +1 -0
  333. package/dist/pine-core/index.esm.js +1 -1
  334. package/dist/pine-core/p-001d4b86.entry.js +1 -0
  335. package/dist/pine-core/p-06279b93.system.entry.js +1 -0
  336. package/dist/pine-core/{p-b75b0d09.system.entry.js → p-0790dd0d.system.entry.js} +1 -1
  337. package/dist/pine-core/p-079c39d1.entry.js +1 -0
  338. package/dist/pine-core/p-07b4524e.entry.js +1 -0
  339. package/dist/pine-core/{p-b60ac7eb.system.entry.js → p-08bbd3e6.system.entry.js} +1 -1
  340. package/dist/pine-core/{p-c5c9ed36.system.entry.js → p-0bd61097.system.entry.js} +1 -1
  341. package/dist/pine-core/p-0c60f577.system.entry.js +1 -0
  342. package/dist/pine-core/{p-6d603d16.system.entry.js → p-110b4051.system.entry.js} +1 -1
  343. package/dist/pine-core/p-11e7d660.entry.js +1 -0
  344. package/dist/pine-core/p-14d872d3.entry.js +1 -0
  345. package/dist/pine-core/p-17fc76e7.system.entry.js +1 -0
  346. package/dist/pine-core/{p-0913f696.system.entry.js → p-1e5648bf.system.entry.js} +1 -1
  347. package/dist/pine-core/{p-e803f629.system.entry.js → p-22ae92f7.system.entry.js} +1 -1
  348. package/dist/pine-core/p-239774c9.entry.js +1 -0
  349. package/dist/pine-core/{p-0b71ecb6.system.entry.js → p-25bf2f26.system.entry.js} +2 -2
  350. package/dist/pine-core/{p-e7a95a49.system.entry.js → p-272b24ad.system.entry.js} +1 -1
  351. package/dist/pine-core/{p-d2c91e7a.entry.js → p-2c0047cd.entry.js} +1 -1
  352. package/dist/pine-core/p-2d5b1deb.entry.js +1 -0
  353. package/dist/pine-core/{p-e8cb76e8.entry.js → p-3556f6ad.entry.js} +1 -1
  354. package/dist/pine-core/{p-BGLP3keB.js → p-35s7h-dk.js} +1 -1
  355. package/dist/pine-core/{p-080cb087.system.entry.js → p-38b87aa2.system.entry.js} +1 -1
  356. package/dist/pine-core/{p-355e4cf9.entry.js → p-3afb1208.entry.js} +1 -1
  357. package/dist/pine-core/p-3b5b8f73.entry.js +1 -0
  358. package/dist/pine-core/{p-8c8cc079.system.entry.js → p-3cc19ea8.system.entry.js} +1 -1
  359. package/dist/pine-core/{p-bd67156b.system.entry.js → p-3ce7e72e.system.entry.js} +1 -1
  360. package/dist/pine-core/p-3f62581a.system.entry.js +1 -0
  361. package/dist/pine-core/p-414faecf.entry.js +1 -0
  362. package/dist/pine-core/p-463a29fa.entry.js +1 -0
  363. package/dist/pine-core/{p-f029b7da.system.entry.js → p-4ee44585.system.entry.js} +1 -1
  364. package/dist/pine-core/p-50af67ea.system.entry.js +1 -0
  365. package/dist/pine-core/p-5133e8be.system.entry.js +1 -0
  366. package/dist/pine-core/p-55fce29e.entry.js +1 -0
  367. package/dist/pine-core/{p-77395d62.system.entry.js → p-568a9a79.system.entry.js} +1 -1
  368. package/dist/pine-core/p-5967d9fa.system.entry.js +1 -0
  369. package/dist/pine-core/{p-5870b092.system.entry.js → p-5c46553f.system.entry.js} +1 -1
  370. package/dist/pine-core/{p-f0d24298.system.entry.js → p-5ce5836e.system.entry.js} +1 -1
  371. package/dist/pine-core/p-5f3242c8.system.entry.js +1 -0
  372. package/dist/pine-core/{p-80e6f3a0.system.entry.js → p-60d27247.system.entry.js} +1 -1
  373. package/dist/pine-core/{p-bd26a5e8.entry.js → p-60e3b1af.entry.js} +1 -1
  374. package/dist/pine-core/{p-ca0a8f5c.entry.js → p-64283f7b.entry.js} +1 -1
  375. package/dist/pine-core/p-6602b4d0.entry.js +1 -0
  376. package/dist/pine-core/p-6845867f.system.entry.js +1 -0
  377. package/dist/pine-core/{p-1ee86d87.system.entry.js → p-68fdfb8f.system.entry.js} +1 -1
  378. package/dist/pine-core/p-6b6ae1be.entry.js +1 -0
  379. package/dist/pine-core/{p-e5420660.entry.js → p-6d64e6c7.entry.js} +1 -1
  380. package/dist/pine-core/{p-3a959459.system.entry.js → p-6dad76cb.system.entry.js} +1 -1
  381. package/dist/pine-core/p-6f34ad9c.entry.js +1 -0
  382. package/dist/pine-core/{p-55224683.entry.js → p-7073146f.entry.js} +1 -1
  383. package/dist/pine-core/{p-f1702281.entry.js → p-735b3631.entry.js} +1 -1
  384. package/dist/pine-core/p-7a14473e.entry.js +1 -0
  385. package/dist/pine-core/{p-9880d251.system.entry.js → p-7a19477e.system.entry.js} +1 -1
  386. package/dist/pine-core/{p-88ff1604.entry.js → p-7d3a20ba.entry.js} +1 -1
  387. package/dist/pine-core/{p-a939b471.entry.js → p-7fcf3d37.entry.js} +1 -1
  388. package/dist/pine-core/{p-26642718.entry.js → p-87642228.entry.js} +1 -1
  389. package/dist/pine-core/p-89fefe36.entry.js +1 -0
  390. package/dist/pine-core/p-8b97dd57.system.entry.js +1 -0
  391. package/dist/pine-core/{p-0092444c.system.entry.js → p-9201b497.system.entry.js} +1 -1
  392. package/dist/pine-core/{p-ebd0bff2.entry.js → p-92a8cf7d.entry.js} +1 -1
  393. package/dist/pine-core/{p-e836a041.entry.js → p-94597b73.entry.js} +1 -1
  394. package/dist/pine-core/p-9713d6a5.system.entry.js +1 -0
  395. package/dist/pine-core/p-97be00f4.system.entry.js +1 -0
  396. package/dist/pine-core/{p-2ac2457b.system.entry.js → p-98843402.system.entry.js} +1 -1
  397. package/dist/pine-core/{p-b914dde8.entry.js → p-98cc327b.entry.js} +2 -2
  398. package/dist/pine-core/p-9a8971e2.system.entry.js +1 -0
  399. package/dist/pine-core/p-9a8d2985.system.entry.js +3 -0
  400. package/dist/pine-core/{p-cfc52b95.system.entry.js → p-9dbc017f.system.entry.js} +1 -1
  401. package/dist/pine-core/p-9fbcba0d.entry.js +1 -0
  402. package/dist/pine-core/p-9fe4a64a.entry.js +1 -0
  403. package/dist/pine-core/{p-COtCa1Md.system.js → p-BNTlHhoO.system.js} +1 -1
  404. package/dist/pine-core/p-BZ1l3LGl.system.js +1 -0
  405. package/dist/pine-core/p-BgNaWLoS.js +1 -0
  406. package/dist/pine-core/{p-CmSJytt1.js → p-BplEmwUQ.js} +2 -2
  407. package/dist/pine-core/{p-Cy8cvR7I.system.js → p-CANeE7Ss.system.js} +1 -1
  408. package/dist/pine-core/{p-XW4H0W6i.system.js → p-CNXspDYs.system.js} +1 -1
  409. package/dist/pine-core/{p-JtdHT_W5.js → p-CirzxZ33.js} +1 -1
  410. package/dist/pine-core/{p-CGRdQc49.system.js → p-CjRCtzPD.system.js} +2 -2
  411. package/dist/pine-core/{p-BPqJgIq6.js → p-Cuc0DYlm.js} +1 -1
  412. package/dist/pine-core/p-D52aRqFx.system.js +1 -0
  413. package/dist/pine-core/p-DCKBKRUy.js +1 -0
  414. package/dist/pine-core/p-DXO1yd32.system.js +1 -0
  415. package/dist/pine-core/{p-n3_ytl_p.system.js → p-DaCT2ssj.system.js} +1 -1
  416. package/dist/pine-core/p-a2078add.entry.js +1 -0
  417. package/dist/pine-core/{p-97d0b89e.system.entry.js → p-a48b025a.system.entry.js} +1 -1
  418. package/dist/pine-core/{p-9713fb36.entry.js → p-a7d25143.entry.js} +1 -1
  419. package/dist/pine-core/{p-9dcd2cdb.entry.js → p-ad3b1ec3.entry.js} +1 -1
  420. package/dist/pine-core/p-b017eb99.system.entry.js +1 -0
  421. package/dist/pine-core/p-b037dcbd.system.entry.js +1 -0
  422. package/dist/pine-core/{p-db17c626.system.entry.js → p-b243767b.system.entry.js} +1 -1
  423. package/dist/pine-core/{p-341c38f1.system.entry.js → p-b33ad96e.system.entry.js} +1 -1
  424. package/dist/pine-core/p-b6edfdfe.entry.js +2 -0
  425. package/dist/pine-core/{p-8191498f.system.entry.js → p-b7cbd913.system.entry.js} +1 -1
  426. package/dist/pine-core/{p-8f531063.entry.js → p-b9d71b76.entry.js} +1 -1
  427. package/dist/pine-core/p-bcf57566.entry.js +1 -0
  428. package/dist/pine-core/{p-4fd454f6.entry.js → p-bda7e3be.entry.js} +1 -1
  429. package/dist/pine-core/p-bdde1e53.entry.js +1 -0
  430. package/dist/pine-core/{p-cb6a3e4c.system.entry.js → p-be3b4f12.system.entry.js} +1 -1
  431. package/dist/pine-core/{p-b1548a20.entry.js → p-bfdfbe9f.entry.js} +1 -1
  432. package/dist/pine-core/p-c02a32ec.entry.js +1 -0
  433. package/dist/pine-core/p-c1da80e5.entry.js +1 -0
  434. package/dist/pine-core/{p-d8570b4b.system.entry.js → p-c233866c.system.entry.js} +1 -1
  435. package/dist/pine-core/{p-fc25b956.system.entry.js → p-cb560aab.system.entry.js} +1 -1
  436. package/dist/pine-core/{p-02088776.entry.js → p-ce554098.entry.js} +1 -1
  437. package/dist/pine-core/p-ced6a814.system.entry.js +1 -0
  438. package/dist/pine-core/{p-0a84d220.entry.js → p-d7930540.entry.js} +1 -1
  439. package/dist/pine-core/{p-11d98408.system.entry.js → p-d7db749a.system.entry.js} +1 -1
  440. package/dist/pine-core/{p-7a5b21d2.system.entry.js → p-d8bedb58.system.entry.js} +1 -1
  441. package/dist/pine-core/{p-1dc5a7e0.system.entry.js → p-d9243653.system.entry.js} +1 -1
  442. package/dist/pine-core/{p-9ab95438.entry.js → p-d94ebe84.entry.js} +1 -1
  443. package/dist/pine-core/{p-9109b90a.entry.js → p-de176bd9.entry.js} +1 -1
  444. package/dist/pine-core/{p-57a2f927.entry.js → p-dea2a254.entry.js} +1 -1
  445. package/dist/pine-core/p-dfadfcd1.entry.js +1 -0
  446. package/dist/pine-core/{p-1437585e.system.entry.js → p-e1fdd53a.system.entry.js} +1 -1
  447. package/dist/pine-core/{p-4435fff6.system.entry.js → p-e70cb112.system.entry.js} +1 -1
  448. package/dist/pine-core/{p-01aa382c.system.entry.js → p-e9a53a88.system.entry.js} +1 -1
  449. package/dist/pine-core/p-eb93cc6e.entry.js +1 -0
  450. package/dist/pine-core/{p-4d03d1e2.system.entry.js → p-ebf0c51b.system.entry.js} +1 -1
  451. package/dist/pine-core/p-ebf74c43.system.entry.js +1 -0
  452. package/dist/pine-core/{p-cde8eb81.entry.js → p-ee449a4b.entry.js} +1 -1
  453. package/dist/pine-core/p-ef4d8fea.entry.js +1 -0
  454. package/dist/pine-core/p-f09f27ab.system.entry.js +1 -0
  455. package/dist/pine-core/{p-ff3de72e.entry.js → p-f2c487e6.entry.js} +1 -1
  456. package/dist/pine-core/p-f549f2bc.entry.js +1 -0
  457. package/dist/pine-core/p-fc743f6e.entry.js +1 -0
  458. package/dist/pine-core/{p-BJXk71tO.js → p-m3pqpeWg.js} +1 -1
  459. package/dist/pine-core/p-wXfuz0Bd.system.js +1 -0
  460. package/dist/pine-core/pine-core.esm.js +1 -1
  461. package/dist/pine-core/pine-core.js +1 -1
  462. package/dist/types/components/pds-alert/pds-alert.d.ts +10 -0
  463. package/dist/types/components/pds-avatar/pds-avatar.d.ts +8 -0
  464. package/dist/types/components/pds-button/pds-button.d.ts +5 -6
  465. package/dist/types/components/pds-checkbox/pds-checkbox.d.ts +7 -1
  466. package/dist/types/components/pds-combobox/pds-combobox.d.ts +9 -0
  467. package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.d.ts +20 -3
  468. package/dist/types/components/pds-link/pds-link.d.ts +8 -0
  469. package/dist/types/components/pds-modal/pds-modal-content/pds-modal-content.d.ts +2 -0
  470. package/dist/types/components/pds-popover/pds-popover.d.ts +87 -21
  471. package/dist/types/components/pds-radio/pds-radio.d.ts +9 -3
  472. package/dist/types/components/pds-select/pds-select.d.ts +32 -4
  473. package/dist/types/components/pds-toast/pds-toast.d.ts +9 -0
  474. package/dist/types/components/pds-tooltip/pds-tooltip.d.ts +31 -0
  475. package/dist/types/components.d.ts +139 -18
  476. package/dist/types/utils/aria-references.d.ts +24 -0
  477. package/dist/types/utils/tabbable.d.ts +2 -0
  478. package/dist/types/utils/truncation-tooltip.d.ts +4 -4
  479. package/dist/types/utils/types.d.ts +1 -0
  480. package/dist/vscode.html-data.json +129 -14
  481. package/hydrate/index.js +1040 -416
  482. package/hydrate/index.mjs +1040 -416
  483. package/package.json +2 -2
  484. package/dist/esm-es5/truncation-tooltip-DRXsdKk1.js +0 -1
  485. package/dist/pine-core/p-049f126a.entry.js +0 -1
  486. package/dist/pine-core/p-153ba77b.entry.js +0 -1
  487. package/dist/pine-core/p-208c7dbf.entry.js +0 -1
  488. package/dist/pine-core/p-258770cf.system.entry.js +0 -1
  489. package/dist/pine-core/p-2cb5483a.system.entry.js +0 -1
  490. package/dist/pine-core/p-432d5ec7.entry.js +0 -1
  491. package/dist/pine-core/p-5442d983.system.entry.js +0 -1
  492. package/dist/pine-core/p-576cf904.system.entry.js +0 -1
  493. package/dist/pine-core/p-5c90091e.system.entry.js +0 -1
  494. package/dist/pine-core/p-602c197f.entry.js +0 -1
  495. package/dist/pine-core/p-645a482b.system.entry.js +0 -1
  496. package/dist/pine-core/p-72865997.entry.js +0 -1
  497. package/dist/pine-core/p-75ee0403.entry.js +0 -1
  498. package/dist/pine-core/p-7a287635.system.entry.js +0 -1
  499. package/dist/pine-core/p-7bf6563a.system.entry.js +0 -1
  500. package/dist/pine-core/p-7fa66cad.entry.js +0 -1
  501. package/dist/pine-core/p-80a698ae.entry.js +0 -1
  502. package/dist/pine-core/p-82cf4ec6.entry.js +0 -1
  503. package/dist/pine-core/p-86040cac.system.entry.js +0 -1
  504. package/dist/pine-core/p-875b0436.system.entry.js +0 -1
  505. package/dist/pine-core/p-8cc302aa.system.entry.js +0 -1
  506. package/dist/pine-core/p-8d292b48.entry.js +0 -1
  507. package/dist/pine-core/p-92ae6082.entry.js +0 -1
  508. package/dist/pine-core/p-94593f20.system.entry.js +0 -1
  509. package/dist/pine-core/p-993d1043.entry.js +0 -1
  510. package/dist/pine-core/p-99459e27.entry.js +0 -1
  511. package/dist/pine-core/p-BLG6RDBt.js +0 -1
  512. package/dist/pine-core/p-BR5nujVX.system.js +0 -1
  513. package/dist/pine-core/p-CuSNnuFu.system.js +0 -1
  514. package/dist/pine-core/p-a0960b3d.system.entry.js +0 -1
  515. package/dist/pine-core/p-a1230a74.system.entry.js +0 -1
  516. package/dist/pine-core/p-a19cd59c.entry.js +0 -1
  517. package/dist/pine-core/p-a787b34a.system.entry.js +0 -1
  518. package/dist/pine-core/p-a826f290.entry.js +0 -1
  519. package/dist/pine-core/p-aa032a5e.system.entry.js +0 -1
  520. package/dist/pine-core/p-acce8eb2.entry.js +0 -1
  521. package/dist/pine-core/p-b69f04b7.entry.js +0 -1
  522. package/dist/pine-core/p-bb68431a.entry.js +0 -1
  523. package/dist/pine-core/p-bb73ad66.entry.js +0 -2
  524. package/dist/pine-core/p-beb23781.entry.js +0 -1
  525. package/dist/pine-core/p-bf30dec0.entry.js +0 -1
  526. package/dist/pine-core/p-c36b490e.entry.js +0 -1
  527. package/dist/pine-core/p-c81d8ac8.entry.js +0 -1
  528. package/dist/pine-core/p-ca0d48e8.entry.js +0 -1
  529. package/dist/pine-core/p-cfd012d4.entry.js +0 -1
  530. package/dist/pine-core/p-e0917a26.entry.js +0 -1
  531. package/dist/pine-core/p-e836f3ec.system.entry.js +0 -3
  532. package/dist/pine-core/p-ea4d4741.system.entry.js +0 -1
  533. package/dist/pine-core/p-f2c253d8.entry.js +0 -1
  534. package/dist/pine-core/p-f474d7de.entry.js +0 -1
  535. package/dist/pine-core/p-f77905aa.system.entry.js +0 -1
  536. package/dist/pine-core/p-qhdoK1Jp.system.js +0 -1
package/hydrate/index.mjs CHANGED
@@ -5730,7 +5730,7 @@ class MockPdsModal {
5730
5730
  'pds-modal__backdrop': true,
5731
5731
  'open': this.open,
5732
5732
  };
5733
- return (hAsync("div", { key: '3a526f6883d7e7df35985a145962f656621535c1', class: backdropClasses }, hAsync("div", { key: '3af0487dc8c8831903cd7c22ffbf3e708b067ad7', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: '94e6205042ee91dac0823901cc97b79e93a515f2', class: "pds-modal__header" }, hAsync("slot", { key: 'ca04b575ccceabd431e3f5c57189f17f9aae6089', name: "header" })), hAsync("div", { key: 'f8327a261e70b622add1dd4ee21b5f8e8d91e603', class: "pds-modal-content" }, hAsync("slot", { key: 'a1a9c30d0f5479b0004ace4544e3d96ae87465be' })), hAsync("div", { key: 'af5fa59922047eeec7cbf0a0e1ee4b472b16079c', class: "pds-modal__footer" }, hAsync("slot", { key: '3c469bf94bb3a26dfd8046a5eda481f9d55edca1', name: "footer" })))));
5733
+ return (hAsync("div", { key: '6e165638f8f4699fa242f3045155c392f9f529b2', class: backdropClasses }, hAsync("div", { key: 'f4b8db3093a6fbe24be8035a826e8289815e4afb', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: 'fa846f66e539ea0d1b73820abb991fdb02902499', class: "pds-modal__header" }, hAsync("slot", { key: '0faaa6858fecd9d0c48c7f183d4f2101c1bed785', name: "header" })), hAsync("div", { key: 'a896fba9494fcdee9dde7e0d9f7baf708095ee6f', class: "pds-modal-content" }, hAsync("slot", { key: '4091e70b2a744c36c8249aa8664937d227145c14' })), hAsync("div", { key: 'cbf4bdd80cc3575d8c7e2e0e2078e28c4f185920', class: "pds-modal__footer" }, hAsync("slot", { key: '56ed3a26c36fd70d7ec9f033951d1b1d9e044957', name: "footer" })))));
5734
5734
  }
5735
5735
  get el() { return getElement(this); }
5736
5736
  static get style() { return pdsModalCss$1(); }
@@ -5752,7 +5752,7 @@ class MockPdsModal {
5752
5752
  }; }
5753
5753
  }
5754
5754
 
5755
- /* pds-icons v10.6.0, ES Modules */
5755
+ /* pds-icons v10.7.0, ES Modules */
5756
5756
 
5757
5757
  const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
5758
5758
  const calendarSimple = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M8 1a1 1 0 0 1 1 1v1h6V2a1 1 0 1 1 2 0v1.002c.476.003.891.013 1.252.042.562.046 1.079.145 1.564.392a4 4 0 0 1 1.748 1.748c.247.485.346 1.002.392 1.564C22 7.29 22 7.954 22 8.758v8.483c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H7.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C2 18.71 2 18.046 2 17.242V8.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392.361-.03.777-.04 1.252-.042V2a1 1 0 0 1 1-1M7 5.002c-.446.003-.795.012-1.089.036-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C4 7.361 4 7.943 4 8.8V9h16v-.2c0-.857 0-1.439-.038-1.889-.035-.438-.1-.663-.18-.819a2 2 0 0 0-.874-.874c-.156-.08-.38-.145-.819-.18A15 15 0 0 0 17 5.002V6a1 1 0 1 1-2 0V5H9v1a1 1 0 1 1-2 0zM20 11H4v6.2c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C6.361 21 6.943 21 7.8 21h8.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889z'/></svg>";
@@ -5830,8 +5830,16 @@ class PdsAccordion {
5830
5830
 
5831
5831
  const pdsAlertTokensCss = () => `:host{--pine-alert-color-background:var(--pine-color-grey-150);--pine-alert-color-border:var(--pine-color-grey-300);--pine-alert-color-dismiss:var(--pine-color-grey-900);--pine-alert-color-dismiss-hover:var(--pine-color-grey-300);--pine-alert-color-icon:var(--pine-color-grey-700);--pine-alert-color-link:var(--pine-color-grey-900);--pine-alert-color-link-hover:var(--pine-color-grey-950);--pine-alert-color-text:var(--pine-color-grey-950);--pine-alert-color-danger-background:var(--pine-color-red-150);--pine-alert-color-danger-border:var(--pine-color-red-300);--pine-alert-color-danger-dismiss:var(--pine-color-red-900);--pine-alert-color-danger-dismiss-hover:var(--pine-color-red-300);--pine-alert-color-danger-icon:var(--pine-color-red-700);--pine-alert-color-danger-link:var(--pine-color-red-900);--pine-alert-color-danger-link-hover:var(--pine-color-red-950);--pine-alert-color-danger-text:var(--pine-color-red-950);--pine-alert-color-info-background:var(--pine-color-blue-150);--pine-alert-color-info-border:var(--pine-color-blue-300);--pine-alert-color-info-dismiss:var(--pine-color-blue-900);--pine-alert-color-info-dismiss-hover:var(--pine-color-blue-300);--pine-alert-color-info-icon:var(--pine-color-blue-700);--pine-alert-color-info-link:var(--pine-color-blue-900);--pine-alert-color-info-link-hover:var(--pine-color-blue-950);--pine-alert-color-info-text:var(--pine-color-blue-950);--pine-alert-color-success-background:var(--pine-color-green-150);--pine-alert-color-success-border:var(--pine-color-green-300);--pine-alert-color-success-dismiss:var(--pine-color-green-900);--pine-alert-color-success-dismiss-hover:var(--pine-color-green-300);--pine-alert-color-success-icon:var(--pine-color-green-700);--pine-alert-color-success-link:var(--pine-color-green-900);--pine-alert-color-success-link-hover:var(--pine-color-green-950);--pine-alert-color-success-text:var(--pine-color-green-950);--pine-alert-color-warning-background:var(--pine-color-yellow-150);--pine-alert-color-warning-border:var(--pine-color-yellow-300);--pine-alert-color-warning-dismiss:var(--pine-color-yellow-900);--pine-alert-color-warning-dismiss-hover:var(--pine-color-yellow-300);--pine-alert-color-warning-icon:var(--pine-color-yellow-700);--pine-alert-color-warning-link:var(--pine-color-yellow-900);--pine-alert-color-warning-link-hover:var(--pine-color-yellow-950);--pine-alert-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-alert-color-background:var(--pine-color-grey-800);--pine-alert-color-border:var(--pine-color-grey-600);--pine-alert-color-dismiss:var(--pine-color-grey-200);--pine-alert-color-dismiss-hover:var(--pine-color-grey-700);--pine-alert-color-icon:var(--pine-color-grey-300);--pine-alert-color-link:var(--pine-color-grey-300);--pine-alert-color-link-hover:var(--pine-color-grey-050);--pine-alert-color-text:var(--pine-color-grey-100);--pine-alert-color-danger-background:var(--pine-color-red-900);--pine-alert-color-danger-border:var(--pine-color-red-800);--pine-alert-color-danger-dismiss:var(--pine-color-red-200);--pine-alert-color-danger-dismiss-hover:var(--pine-color-red-800);--pine-alert-color-danger-icon:var(--pine-color-red-400);--pine-alert-color-danger-link:var(--pine-color-red-300);--pine-alert-color-danger-link-hover:var(--pine-color-red-200);--pine-alert-color-danger-text:var(--pine-color-red-100);--pine-alert-color-info-background:var(--pine-color-blue-900);--pine-alert-color-info-border:var(--pine-color-blue-800);--pine-alert-color-info-dismiss:var(--pine-color-blue-200);--pine-alert-color-info-dismiss-hover:var(--pine-color-blue-800);--pine-alert-color-info-icon:var(--pine-color-blue-400);--pine-alert-color-info-link:var(--pine-color-blue-300);--pine-alert-color-info-link-hover:var(--pine-color-blue-200);--pine-alert-color-info-text:var(--pine-color-blue-100);--pine-alert-color-success-background:var(--pine-color-green-900);--pine-alert-color-success-border:var(--pine-color-green-800);--pine-alert-color-success-dismiss:var(--pine-color-green-200);--pine-alert-color-success-dismiss-hover:var(--pine-color-green-800);--pine-alert-color-success-icon:var(--pine-color-green-400);--pine-alert-color-success-link:var(--pine-color-green-300);--pine-alert-color-success-link-hover:var(--pine-color-green-200);--pine-alert-color-success-text:var(--pine-color-green-100);--pine-alert-color-warning-background:var(--pine-color-yellow-900);--pine-alert-color-warning-border:var(--pine-color-yellow-800);--pine-alert-color-warning-dismiss:var(--pine-color-yellow-200);--pine-alert-color-warning-dismiss-hover:var(--pine-color-yellow-800);--pine-alert-color-warning-icon:var(--pine-color-yellow-400);--pine-alert-color-warning-link:var(--pine-color-yellow-300);--pine-alert-color-warning-link-hover:var(--pine-color-yellow-200);--pine-alert-color-warning-text:var(--pine-color-yellow-100)}`;
5832
5832
 
5833
- const pdsAlertCss = () => `:host{--pds-context-link-color:var(--pine-alert-color-link);--pds-context-link-color-hover:var(--pine-alert-color-link-hover);display:block;line-height:1;width:100%}:host([variant=danger]){--pds-context-link-color:var(--pine-alert-color-danger-link);--pds-context-link-color-hover:var(--pine-alert-color-danger-link-hover)}:host([variant=info]){--pds-context-link-color:var(--pine-alert-color-info-link);--pds-context-link-color-hover:var(--pine-alert-color-info-link-hover)}:host([variant=success]){--pds-context-link-color:var(--pine-alert-color-success-link);--pds-context-link-color-hover:var(--pine-alert-color-success-link-hover)}:host([variant=warning]){--pds-context-link-color:var(--pine-alert-color-warning-link);--pds-context-link-color-hover:var(--pine-alert-color-warning-link-hover)}.pds-alert__container{--pds-alert-icon-size:var(--pine-dimension-sm);--pds-alert-border-dismiss-outline:2px solid var(--pds-alert-color-dismiss);--pds-alert-background:var(--pine-alert-color-background);--pds-alert-border-color:var(--pine-alert-color-border);--pds-alert-color-icon:var(--pine-alert-color-icon);--pds-alert-color-text:var(--pine-alert-color-text);--pds-alert-color-dismiss:var(--pine-alert-color-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-dismiss-hover);padding:var(--pine-dimension-250)}.pds-alert__container--danger{--pds-alert-background:var(--pine-alert-color-danger-background);--pds-alert-border-color:var(--pine-alert-color-danger-border);--pds-alert-color-icon:var(--pine-alert-color-danger-icon);--pds-alert-color-text:var(--pine-alert-color-danger-text);--pds-alert-color-dismiss:var(--pine-alert-color-danger-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-danger-dismiss-hover)}.pds-alert__container--info{--pds-alert-background:var(--pine-alert-color-info-background);--pds-alert-border-color:var(--pine-alert-color-info-border);--pds-alert-color-icon:var(--pine-alert-color-info-icon);--pds-alert-color-text:var(--pine-alert-color-info-text);--pds-alert-color-dismiss:var(--pine-alert-color-info-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-info-dismiss-hover)}.pds-alert__container--success{--pds-alert-background:var(--pine-alert-color-success-background);--pds-alert-border-color:var(--pine-alert-color-success-border);--pds-alert-color-icon:var(--pine-alert-color-success-icon);--pds-alert-color-text:var(--pine-alert-color-success-text);--pds-alert-color-dismiss:var(--pine-alert-color-success-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-success-dismiss-hover)}.pds-alert__container--warning{--pds-alert-background:var(--pine-alert-color-warning-background);--pds-alert-border-color:var(--pine-alert-color-warning-border);--pds-alert-color-icon:var(--pine-alert-color-warning-icon);--pds-alert-color-text:var(--pine-alert-color-warning-text);--pds-alert-color-dismiss:var(--pine-alert-color-warning-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-warning-dismiss-hover)}.pds-alert__icon{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-alert__icon--small{-webkit-margin-before:0;margin-block-start:0}.pds-alert__content-wrapper{-ms-flex:1;flex:1;min-width:0;overflow:hidden;width:100%}.pds-alert__dismiss{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--pine-dimension-250);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs);width:var(--pine-dimension-250)}.pds-alert__dismiss:hover{background:var(--pds-alert-background-dismiss-hover);opacity:0.8}.pds-alert__dismiss:focus-visible{outline:var(--pds-alert-border-dismiss-outline)}.pds-alert__description--small{-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-alert__actions{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-alert__actions--small{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}`;
5833
+ const pdsAlertCss = () => `:host{--pds-context-link-color:var(--pine-alert-color-link);--pds-context-link-color-hover:var(--pine-alert-color-link-hover);display:block;line-height:1;width:100%}:host([variant=danger]){--pds-context-link-color:var(--pine-alert-color-danger-link);--pds-context-link-color-hover:var(--pine-alert-color-danger-link-hover)}:host([variant=info]){--pds-context-link-color:var(--pine-alert-color-info-link);--pds-context-link-color-hover:var(--pine-alert-color-info-link-hover)}:host([variant=success]){--pds-context-link-color:var(--pine-alert-color-success-link);--pds-context-link-color-hover:var(--pine-alert-color-success-link-hover)}:host([variant=warning]){--pds-context-link-color:var(--pine-alert-color-warning-link);--pds-context-link-color-hover:var(--pine-alert-color-warning-link-hover)}.pds-alert__container{--pds-alert-icon-size:var(--pine-dimension-sm);--pds-alert-border-dismiss-outline:2px solid var(--pds-alert-color-dismiss);--pds-alert-background:var(--pine-alert-color-background);--pds-alert-border-color:var(--pine-alert-color-border);--pds-alert-color-icon:var(--pine-alert-color-icon);--pds-alert-color-text:var(--pine-alert-color-text);--pds-alert-color-dismiss:var(--pine-alert-color-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-dismiss-hover);padding:var(--pine-dimension-250)}.pds-alert__container--danger{--pds-alert-background:var(--pine-alert-color-danger-background);--pds-alert-border-color:var(--pine-alert-color-danger-border);--pds-alert-color-icon:var(--pine-alert-color-danger-icon);--pds-alert-color-text:var(--pine-alert-color-danger-text);--pds-alert-color-dismiss:var(--pine-alert-color-danger-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-danger-dismiss-hover)}.pds-alert__container--info{--pds-alert-background:var(--pine-alert-color-info-background);--pds-alert-border-color:var(--pine-alert-color-info-border);--pds-alert-color-icon:var(--pine-alert-color-info-icon);--pds-alert-color-text:var(--pine-alert-color-info-text);--pds-alert-color-dismiss:var(--pine-alert-color-info-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-info-dismiss-hover)}.pds-alert__container--success{--pds-alert-background:var(--pine-alert-color-success-background);--pds-alert-border-color:var(--pine-alert-color-success-border);--pds-alert-color-icon:var(--pine-alert-color-success-icon);--pds-alert-color-text:var(--pine-alert-color-success-text);--pds-alert-color-dismiss:var(--pine-alert-color-success-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-success-dismiss-hover)}.pds-alert__container--warning{--pds-alert-background:var(--pine-alert-color-warning-background);--pds-alert-border-color:var(--pine-alert-color-warning-border);--pds-alert-color-icon:var(--pine-alert-color-warning-icon);--pds-alert-color-text:var(--pine-alert-color-warning-text);--pds-alert-color-dismiss:var(--pine-alert-color-warning-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-warning-dismiss-hover)}.pds-alert__icon{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-alert__icon--small{-webkit-margin-before:0;margin-block-start:0}.pds-alert__content-wrapper{-ms-flex:1;flex:1;min-width:0;overflow:hidden;width:100%}.pds-alert__dismiss{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--pine-dimension-250);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs);width:var(--pine-dimension-250)}.pds-alert__dismiss:hover{background:var(--pds-alert-background-dismiss-hover);opacity:0.8}.pds-alert__dismiss:focus-visible{outline:var(--pds-alert-border-dismiss-outline)}.pds-alert__description--small{-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-alert__actions{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-alert__actions--small{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
5834
5834
 
5835
+ // What each variant announces when `severityLabel` isn't set. The `default`
5836
+ // variant has no severity.
5837
+ const SEVERITY_LABELS = {
5838
+ danger: 'Error',
5839
+ info: 'Info',
5840
+ success: 'Success',
5841
+ warning: 'Warning',
5842
+ };
5835
5843
  /**
5836
5844
  * @slot actions - Slot for alert actions.
5837
5845
  * @part dismiss
@@ -5885,7 +5893,12 @@ class PdsAlert {
5885
5893
  }
5886
5894
  return (hAsync("div", null, hAsync("pds-text", { class: "pds-alert__description", color: "var(--pds-alert-color-text)", tag: "p" }, hAsync("slot", null)), this.hasActionsContent && this.renderActions(false)));
5887
5895
  }
5896
+ severityText() {
5897
+ var _a;
5898
+ return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : SEVERITY_LABELS[this.variant];
5899
+ }
5888
5900
  render() {
5901
+ const severity = this.severityText();
5889
5902
  const iconMap = {
5890
5903
  danger: 'warning-filled',
5891
5904
  default: 'info-circle-filled',
@@ -5895,7 +5908,7 @@ class PdsAlert {
5895
5908
  };
5896
5909
  // Get the icon name based on the current variant
5897
5910
  const iconName = iconMap[this.variant] || iconMap.default;
5898
- return (hAsync(Host, { key: 'b143df0c24c077e412894f5f77f1bd7c0ced1c92', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '928e3852507a1776069ee80906443ef650607ce7', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '778046ab1c651a57e910e45fe00944a74a3c32f7', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, !this.hideIcon && (hAsync("pds-icon", { key: '0199ef3e12a8dc9da20006fc8c4e133f83f4caf4', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" })), hAsync("pds-box", { key: 'b7b973c0c6154d72f90a585a116ea76ac48cc6e4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: 'c969f9a7eabdc31bc2faca247033e89cc15caea0', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: '168c21de5a0112a65b73a854add4393fea9ede6f', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, hAsync("pds-icon", { key: 'f8e9311a4934c1b8458879cd6244a99e3a730be2', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
5911
+ return (hAsync(Host, { key: 'd487419289ef352f63e7861fb21f42aa243ee526', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '0ecd6e25d4163d41055be53e88f6d332e56e1ed8', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '4cca87bd3b9758e9830eddec25c9fd3e8c06a44d', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, severity && hAsync("span", { key: 'b076475ed4a0bc2db09df84d6530db0e4e098daf', class: "visually-hidden" }, severity), !this.hideIcon && (hAsync("pds-icon", { key: 'e8efc683c4f84e22fac8729c0c476c817b33f3e6', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)", "aria-hidden": "true" })), hAsync("pds-box", { key: 'f3ff29ce778f2e8bfb0d0a3e6a732714ce22e8ad', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: 'c00d44fe496e8aae699ac740428e6e523c0c8d0a', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: 'd770590cecc3b27e1dd2750bbdfa07209dbb017d', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, hAsync("pds-icon", { key: '9d79c27c829662dbeecb30dfad806f345eeb6c67', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
5899
5912
  }
5900
5913
  get el() { return getElement(this); }
5901
5914
  static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
@@ -5910,6 +5923,7 @@ class PdsAlert {
5910
5923
  "hideIcon": [4, "hide-icon"],
5911
5924
  "variant": [1],
5912
5925
  "dismissLabel": [1, "dismiss-label"],
5926
+ "severityLabel": [1, "severity-label"],
5913
5927
  "hasActionsContent": [32]
5914
5928
  },
5915
5929
  "$listeners$": undefined,
@@ -5961,6 +5975,8 @@ function restoreReflectedDefault(el, attr, value, defaultValue) {
5961
5975
 
5962
5976
  const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}:host([status=online]){--pds-avatar-status-color:var(--pine-color-green-500)}:host([status=away]){--pds-avatar-status-color:var(--pine-color-yellow-500)}:host([status=offline]){--pds-avatar-status-color:var(--pine-color-background-inset-emphasized)}.pds-avatar__status{background-color:var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));block-size:28%;border-radius:var(--pine-border-radius-full);-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);inline-size:28%;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);min-block-size:var(--pine-dimension-100);min-inline-size:var(--pine-dimension-100);position:absolute}:host(.pds-avatar--status-ring) div{-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized))}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
5963
5977
 
5978
+ // Used when `badgeLabel` is unset; an empty string hides the badge instead.
5979
+ const DEFAULT_BADGE_LABEL = 'Verified';
5964
5980
  /**
5965
5981
  * @part asset-wrapper
5966
5982
  * @part button
@@ -6040,14 +6056,22 @@ class PdsAvatar {
6040
6056
  :
6041
6057
  this.renderAssetWrapper());
6042
6058
  };
6043
- this.renderBadge = () => (
6044
- // `badge` and `status` share the bottom-end corner; `status` wins so the
6045
- // presence dot is never painted over the badge.
6046
- this.badge && !this.status
6047
- // Percentage is average size of icon in relation to total avatar size
6048
- // of all preset sizes found in Figma.
6049
- // Used to allow icons to scale to container size
6050
- && hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
6059
+ this.renderBadge = () => {
6060
+ var _a;
6061
+ // Inside the dropdown trigger the button's aria-label is the name, so the
6062
+ // badge is decorative there, as the status dot is. An empty label is
6063
+ // decorative too, rather than an image with no name.
6064
+ const badgeLabel = (_a = this.badgeLabel) !== null && _a !== void 0 ? _a : DEFAULT_BADGE_LABEL;
6065
+ const label = this.dropdown || badgeLabel === '' ? undefined : badgeLabel;
6066
+ return (
6067
+ // `badge` and `status` share the bottom-end corner; `status` wins so the
6068
+ // presence dot is never painted over the badge.
6069
+ this.badge && !this.status
6070
+ // Percentage is average size of icon in relation to total avatar size
6071
+ // of all preset sizes found in Figma.
6072
+ // Used to allow icons to scale to container size
6073
+ && hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%", "aria-label": label, "aria-hidden": label === undefined ? 'true' : undefined }));
6074
+ };
6051
6075
  this.renderStatus = () => {
6052
6076
  var _a;
6053
6077
  if (!this.status)
@@ -6070,7 +6094,7 @@ class PdsAvatar {
6070
6094
  // Percentage is average size of icon in relation to total avatar size
6071
6095
  // of all preset sizes found in Figma.
6072
6096
  // Used to allow icons to scale to container size
6073
- return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%" });
6097
+ return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%", "aria-hidden": "true" });
6074
6098
  };
6075
6099
  this.classNames = () => ({
6076
6100
  'pds-avatar': true,
@@ -6102,7 +6126,7 @@ class PdsAvatar {
6102
6126
  }
6103
6127
  }
6104
6128
  render() {
6105
- return (hAsync(Host, { key: '2cfbbe25504088ba2cbb3dc923680365fa78a170', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
6129
+ return (hAsync(Host, { key: '0942c1fff94d0d8138143cbddf80aea1d09e34a9', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
6106
6130
  }
6107
6131
  get el() { return getElement(this); }
6108
6132
  static get watchers() { return {
@@ -6120,6 +6144,7 @@ class PdsAvatar {
6120
6144
  "$members$": {
6121
6145
  "alt": [1],
6122
6146
  "badge": [4],
6147
+ "badgeLabel": [1, "badge-label"],
6123
6148
  "componentId": [1, "component-id"],
6124
6149
  "dropdown": [4],
6125
6150
  "image": [1],
@@ -6582,7 +6607,7 @@ class PdsBox {
6582
6607
  const normalizedBorder = normalizeColorValue$1(this.borderColor);
6583
6608
  const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
6584
6609
  this.hostKeeper.record(boxClasses, boxInlineStyles);
6585
- return (hAsync(Host, { key: '8a1348247b5a4c546759232f0f155721798797e5', class: boxClasses, style: boxInlineStyles }));
6610
+ return (hAsync(Host, { key: 'c791a8d413b47629c619424bebf9d9c4acc4d9f3', class: boxClasses, style: boxInlineStyles }));
6586
6611
  }
6587
6612
  get el() { return getElement(this); }
6588
6613
  static get style() { return pdsBoxCss(); }
@@ -6719,8 +6744,52 @@ class PdsBox {
6719
6744
  }; }
6720
6745
  }
6721
6746
 
6747
+ /**
6748
+ * The ARIA attributes that take ID references, and the element-reflection property each is forwarded
6749
+ * through. An ID on a host can't reach an element inside its shadow root, so a component that
6750
+ * delegates focus forwards the elements the IDs point at instead. A browser without ARIA element
6751
+ * reflection gets none of them.
6752
+ */
6753
+ const ARIA_REFERENCE_PROPERTIES = {
6754
+ 'aria-controls': 'ariaControlsElements',
6755
+ 'aria-describedby': 'ariaDescribedByElements',
6756
+ 'aria-labelledby': 'ariaLabelledByElements',
6757
+ };
6758
+ const ARIA_REFERENCE_ATTRIBUTES = Object.keys(ARIA_REFERENCE_PROPERTIES);
6759
+ /**
6760
+ * Finds an element by ID in the host's tree, then in each shadow root that contains it, so a host
6761
+ * inside another component's shadow root still reaches, say, a popover portal on document.body.
6762
+ * The closest root wins when an ID repeats.
6763
+ */
6764
+ const findInAncestorRoots = (host, id) => {
6765
+ let root = host.getRootNode();
6766
+ while (root instanceof ShadowRoot) {
6767
+ const found = root.getElementById(id);
6768
+ if (found)
6769
+ return found;
6770
+ root = root.host.getRootNode();
6771
+ }
6772
+ return root instanceof Document ? root.getElementById(id) : null;
6773
+ };
6774
+ /**
6775
+ * Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
6776
+ * name, or clears them. Run it again whenever the attributes or the referenced elements may have
6777
+ * changed: element references don't follow an ID to a node added or replaced later.
6778
+ */
6779
+ const forwardAriaReferences = (host, target) => {
6780
+ Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
6781
+ var _a, _b;
6782
+ if (!(property in target))
6783
+ return;
6784
+ const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
6785
+ const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
6786
+ target[property] = referenced.length > 0 ? referenced : null;
6787
+ });
6788
+ };
6789
+
6722
6790
  const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
6723
6791
 
6792
+ const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
6724
6793
  /**
6725
6794
  * @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
6726
6795
  * @part button-content - Exposes the button content for styling.
@@ -6779,12 +6848,22 @@ class PdsButton {
6779
6848
  this.variant = 'primary';
6780
6849
  this.hasStartContent = false;
6781
6850
  this.hasEndContent = false;
6782
- this.triggerExpanded = null;
6783
- this.triggerHasPopup = null;
6784
- this.syncTriggerAria = () => {
6785
- this.triggerExpanded = this.el.getAttribute('aria-expanded');
6786
- this.triggerHasPopup = this.el.getAttribute('aria-haspopup');
6787
- this.forwardAriaControls();
6851
+ this.forwardedAria = {};
6852
+ // Copied rather than moved: frameworks and DOM morphs put host attributes back on every update,
6853
+ // so taking them off the host would fight each one.
6854
+ this.syncHostAria = () => {
6855
+ const forwarded = {};
6856
+ FORWARDED_ARIA_ATTRIBUTES.forEach((name) => (forwarded[name] = this.el.getAttribute(name)));
6857
+ // A new object always re-renders, and frameworks re-set unchanged attributes on every render of their own.
6858
+ if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
6859
+ this.forwardedAria = forwarded;
6860
+ }
6861
+ this.forwardAriaReferences();
6862
+ };
6863
+ // A hint added after the button, or replaced by a framework or a DOM morph, is picked up by the
6864
+ // time focus reaches the button and it's announced.
6865
+ this.handleFocusIn = () => {
6866
+ this.forwardAriaReferences();
6788
6867
  };
6789
6868
  this.handleStartSlotChange = (event) => {
6790
6869
  this.hasStartContent = event.target.assignedElements({ flatten: true }).length > 0;
@@ -6821,22 +6900,22 @@ class PdsButton {
6821
6900
  };
6822
6901
  }
6823
6902
  connectedCallback() {
6824
- this.syncTriggerAria();
6903
+ this.syncHostAria();
6825
6904
  if (typeof MutationObserver === 'undefined')
6826
6905
  return;
6827
- // Popovers and menus set these on the host after render, but only the inner element is announced.
6828
- this.triggerAriaObserver = new MutationObserver(this.syncTriggerAria);
6829
- this.triggerAriaObserver.observe(this.el, {
6830
- attributeFilter: ['aria-controls', 'aria-expanded', 'aria-haspopup'],
6906
+ // Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
6907
+ this.hostAriaObserver = new MutationObserver(this.syncHostAria);
6908
+ this.hostAriaObserver.observe(this.el, {
6909
+ attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
6831
6910
  });
6832
6911
  }
6833
6912
  disconnectedCallback() {
6834
6913
  var _a;
6835
- (_a = this.triggerAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
6836
- this.triggerAriaObserver = undefined;
6914
+ (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
6915
+ this.hostAriaObserver = undefined;
6837
6916
  }
6838
6917
  componentDidRender() {
6839
- this.forwardAriaControls();
6918
+ this.forwardAriaReferences();
6840
6919
  }
6841
6920
  /**
6842
6921
  * Listen for Enter key presses on form inputs to trigger submit
@@ -6887,25 +6966,9 @@ class PdsButton {
6887
6966
  }
6888
6967
  }
6889
6968
  }
6890
- // ID references can't cross the shadow boundary, so aria-controls is forwarded as element references.
6891
- forwardAriaControls() {
6892
- var _a, _b;
6893
- if (!this.contentEl || !('ariaControlsElements' in this.contentEl))
6894
- return;
6895
- const ids = (_b = (_a = this.el.getAttribute('aria-controls')) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
6896
- const controlled = ids.map((id) => this.findInAncestorRoots(id)).filter((el) => el !== null);
6897
- this.contentEl.ariaControlsElements = controlled.length > 0 ? controlled : null;
6898
- }
6899
- // A trigger inside another component's shadow root still controls a popover portal on document.body.
6900
- findInAncestorRoots(id) {
6901
- let root = this.el.getRootNode();
6902
- while (root instanceof ShadowRoot) {
6903
- const found = root.getElementById(id);
6904
- if (found)
6905
- return found;
6906
- root = root.host.getRootNode();
6907
- }
6908
- return root instanceof Document ? root.getElementById(id) : null;
6969
+ forwardAriaReferences() {
6970
+ if (this.contentEl)
6971
+ forwardAriaReferences(this.el, this.contentEl);
6909
6972
  }
6910
6973
  classNames() {
6911
6974
  const classNames = ['pds-button'];
@@ -6951,16 +7014,13 @@ class PdsButton {
6951
7014
  }
6952
7015
  render() {
6953
7016
  // Common props for both button and anchor elements
6954
- const commonProps = {
6955
- 'aria-expanded': this.triggerExpanded,
6956
- 'aria-haspopup': this.triggerHasPopup,
6957
- class: this.classNames(),
6958
- part: 'button',
6959
- ref: (el) => (this.contentEl = el),
6960
- };
7017
+ const commonProps = Object.assign(Object.assign({}, this.forwardedAria), { class: this.classNames(), part: 'button', ref: (el) => (this.contentEl = el) });
6961
7018
  const attributes = () => {
6962
7019
  if (this.href) {
6963
- return Object.assign(Object.assign({}, commonProps), { download: this.download, href: this.disabled ? null : this.href, target: this.target });
7020
+ return Object.assign(Object.assign({}, commonProps), {
7021
+ // ARIA allows aria-pressed only on buttons, so a link never gets it.
7022
+ 'aria-pressed': null, download: this.download, href: this.disabled ? null : this.href, target: this.target
7023
+ });
6964
7024
  }
6965
7025
  return Object.assign(Object.assign({}, commonProps), { 'aria-busy': this.loading ? 'true' : null, 'aria-live': this.loading ? 'polite' : null, 'disabled': this.disabled, 'name': this.name, 'type': this.type, 'value': this.value });
6966
7026
  };
@@ -6968,7 +7028,7 @@ class PdsButton {
6968
7028
  // Hide text when loading or iconOnly is true
6969
7029
  const hideText = this.loading || this.iconOnly;
6970
7030
  const content = (hAsync("div", { class: "pds-button__content", part: "button-content" }, this.renderStartContent(), hAsync("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, hAsync("slot", null)), this.loading && (hAsync("span", { class: "pds-button__loader" }, hAsync("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner", exportparts: "loader-svg" }, "Loading..."))), this.renderEndContent()));
6971
- return (hAsync(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, variant: this.variant }), hAsync(ContentElement, Object.assign({}, attributes()), content)));
7031
+ return (hAsync(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, onFocusin: this.handleFocusIn, variant: this.variant }), hAsync(ContentElement, Object.assign({}, attributes()), content)));
6972
7032
  }
6973
7033
  static get delegatesFocus() { return true; }
6974
7034
  get el() { return getElement(this); }
@@ -6993,8 +7053,7 @@ class PdsButton {
6993
7053
  "variant": [1],
6994
7054
  "hasStartContent": [32],
6995
7055
  "hasEndContent": [32],
6996
- "triggerExpanded": [32],
6997
- "triggerHasPopup": [32]
7056
+ "forwardedAria": [32]
6998
7057
  },
6999
7058
  "$listeners$": [[16, "keydown", "handleFormKeyDown"]],
7000
7059
  "$lazyBundleId$": "-",
@@ -7066,7 +7125,7 @@ const isSpecTest = () => {
7066
7125
 
7067
7126
  const labelCss$5 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
7068
7127
 
7069
- const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}`;
7128
+ const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}`;
7070
7129
 
7071
7130
  /**
7072
7131
  * @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
@@ -7084,6 +7143,11 @@ class PdsCheckbox {
7084
7143
  * It determines whether or not the checkbox is checked.
7085
7144
  */
7086
7145
  this.checked = false;
7146
+ /**
7147
+ * Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
7148
+ * @defaultValue default
7149
+ */
7150
+ this.variant = 'default';
7087
7151
  this.handleCheckboxChange = (e) => {
7088
7152
  if (this.disabled) {
7089
7153
  return;
@@ -7123,6 +7187,9 @@ class PdsCheckbox {
7123
7187
  if (this.hasLabelSlot) {
7124
7188
  classNames.push('has-label-slot');
7125
7189
  }
7190
+ if (this.variant === 'pill') {
7191
+ classNames.push('pds-checkbox--pill');
7192
+ }
7126
7193
  return classNames.join(' ');
7127
7194
  }
7128
7195
  connectedCallback() {
@@ -7185,9 +7252,9 @@ class PdsCheckbox {
7185
7252
  render() {
7186
7253
  const hostClass = this.classNames();
7187
7254
  this.hostKeeper.record(hostClass);
7188
- return (hAsync(Host, { key: 'bbe09a5e9eb55f62b2921b09a04ddc9476a871ae', class: hostClass }, hAsync("label", { key: 'fa1856d9306eb8c0c19618ea5e2619ea20c3c51d', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8537d97a8e69a17d0d563306dac179e393885dda', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), hAsync("span", { key: 'e523922889c80a2d18243cb560cd855bab95803d', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: 'b6ff34ecbc346d254a0211bfa610823feedb486b', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
7189
- hAsync("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
7190
- hAsync("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '10f7efe5d4b252d9dea6f398eff973ba32506898', icon: danger, size: "small" }), this.errorMessage)));
7255
+ return (hAsync(Host, { key: '8e9185653796f250ad425350b9adc1f65fd047c1', class: hostClass }, hAsync("label", { key: 'e17bab4b96b4ffc716e311ecea488a3025e1551c', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8af9bbc3dbe18409532e95b4b490eab4aabc8762', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), hAsync("span", { key: '1e4d9a826b6b5ec429ae47096d4aede3af43d110', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, hAsync("slot", { key: '7b10c7d1e018be4afe019cb56e82a5ec7a638de8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
7256
+ hAsync("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
7257
+ hAsync("div", { key: '0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f6eccfaac90505903aee379f2fc28b5735d8c4a9', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
7191
7258
  }
7192
7259
  static get formAssociated() { return true; }
7193
7260
  get el() { return getElement(this); }
@@ -7215,6 +7282,7 @@ class PdsCheckbox {
7215
7282
  "name": [1],
7216
7283
  "required": [4],
7217
7284
  "value": [1],
7285
+ "variant": [1],
7218
7286
  "hasLabelSlot": [32]
7219
7287
  },
7220
7288
  "$listeners$": undefined,
@@ -8986,12 +9054,24 @@ function injectStyles() {
8986
9054
  function isOverflowing(el) {
8987
9055
  return el.scrollWidth > el.clientWidth;
8988
9056
  }
9057
+ /**
9058
+ * Engines without `:focus-visible` throw on the selector, so there every
9059
+ * focus counts as visible rather than none.
9060
+ */
9061
+ function isFocusVisible(el) {
9062
+ try {
9063
+ return el.matches(':focus-visible');
9064
+ }
9065
+ catch (_a) {
9066
+ return true;
9067
+ }
9068
+ }
8989
9069
  /**
8990
9070
  * Sets up automatic tooltip behavior for a truncated element.
8991
9071
  *
8992
- * When the element's text overflows, hovering or focusing the host element
8993
- * will display a tooltip showing the full text content. The tooltip is
8994
- * rendered as a portal on document.body and positioned with Floating UI.
9072
+ * When the element's text overflows, hovering the host element or giving it
9073
+ * keyboard focus will display a tooltip showing the full text content. The
9074
+ * tooltip is rendered as a portal on document.body and positioned with Floating UI.
8995
9075
  *
8996
9076
  * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
8997
9077
  *
@@ -9182,18 +9262,30 @@ function setupTruncationTooltip(options) {
9182
9262
  isHoveringPortal = false;
9183
9263
  scheduleHide();
9184
9264
  }
9185
- function handleFocusIn() {
9265
+ // Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
9266
+ // Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
9267
+ function showForVisibleFocus(event) {
9268
+ if (!isFocusVisible(event.composedPath()[0]))
9269
+ return;
9186
9270
  isFocused = true;
9187
9271
  showTooltip();
9188
9272
  }
9273
+ // A key press after a click makes focus visible in place, with no new focusin. keyup, not
9274
+ // keydown, so Tab's focus move lands first; Escape asks to dismiss, never to reveal.
9275
+ function handleKeyUp(event) {
9276
+ if (isFocused || event.key === 'Escape')
9277
+ return;
9278
+ showForVisibleFocus(event);
9279
+ }
9189
9280
  function handleFocusOut() {
9190
9281
  isFocused = false;
9191
9282
  scheduleHide();
9192
9283
  }
9193
9284
  hostEl.addEventListener('mouseenter', handleMouseEnter);
9194
9285
  hostEl.addEventListener('mouseleave', handleMouseLeave);
9195
- focusEl.addEventListener('focusin', handleFocusIn);
9286
+ focusEl.addEventListener('focusin', showForVisibleFocus);
9196
9287
  focusEl.addEventListener('focusout', handleFocusOut);
9288
+ focusEl.addEventListener('keyup', handleKeyUp);
9197
9289
  // Return cleanup function
9198
9290
  return () => {
9199
9291
  disposed = true;
@@ -9213,8 +9305,9 @@ function setupTruncationTooltip(options) {
9213
9305
  }
9214
9306
  hostEl.removeEventListener('mouseenter', handleMouseEnter);
9215
9307
  hostEl.removeEventListener('mouseleave', handleMouseLeave);
9216
- focusEl.removeEventListener('focusin', handleFocusIn);
9308
+ focusEl.removeEventListener('focusin', showForVisibleFocus);
9217
9309
  focusEl.removeEventListener('focusout', handleFocusOut);
9310
+ focusEl.removeEventListener('keyup', handleKeyUp);
9218
9311
  removePortal();
9219
9312
  };
9220
9313
  }
@@ -9456,13 +9549,13 @@ class PdsChip {
9456
9549
  'aria-label': this.dismissLabel,
9457
9550
  };
9458
9551
  };
9459
- return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
9552
+ return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize, "aria-hidden": "true" })));
9460
9553
  }
9461
9554
  render() {
9462
9555
  const hostClass = this.classNames();
9463
9556
  const hostStyles = this.hostStyles;
9464
9557
  this.hostKeeper.record(hostClass, hostStyles);
9465
- return (hAsync(Host, { key: 'f82d84a7f0a4f1c980d47bf75cd4ffeef042607d', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
9558
+ return (hAsync(Host, { key: '0e67ea3700e8a8e1ad3049b6eafced6934262335', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
9466
9559
  }
9467
9560
  get el() { return getElement(this); }
9468
9561
  static get style() { return pdsChipTokensCss() + pdsChipCss(); }
@@ -11172,7 +11265,7 @@ class FlyoutController {
11172
11265
  }
11173
11266
  }
11174
11267
 
11175
- const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
11268
+ const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
11176
11269
 
11177
11270
  /**
11178
11271
  * @slot option - Option elements for the combobox dropdown
@@ -11313,6 +11406,13 @@ class PdsCombobox {
11313
11406
  * @default 'pill'
11314
11407
  */
11315
11408
  this.triggerShape = 'pill';
11409
+ /**
11410
+ * Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
11411
+ * When a label overflows, a `title` showing the full label will appear on hover.
11412
+ * Chip options, custom layouts and group rows aren't affected.
11413
+ * @defaultValue false
11414
+ */
11415
+ this.truncate = false;
11316
11416
  /**
11317
11417
  * The sentiment for the chip trigger. Matches Pine chip sentiments.
11318
11418
  * @default 'neutral'
@@ -11609,10 +11709,15 @@ class PdsCombobox {
11609
11709
  if (this.usesPanelSearch)
11610
11710
  this.restoreFocusToTrigger();
11611
11711
  };
11712
+ this.onButtonTriggerMouseEnter = (event) => {
11713
+ this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
11714
+ };
11612
11715
  // Event handler for mouse enter on option
11613
11716
  this.onOptionMouseEnter = (event) => {
11614
- const idx = Number(event.currentTarget.getAttribute('data-option-index'));
11615
- this.highlightedIndex = idx;
11717
+ const row = event.currentTarget;
11718
+ if (this.truncate)
11719
+ this.syncTitle(row, '.pds-combobox__option-text');
11720
+ this.highlightedIndex = Number(row.getAttribute('data-option-index'));
11616
11721
  this.keyboardNavigating = false;
11617
11722
  };
11618
11723
  this.onGroupRowMouseEnter = (event) => {
@@ -11902,6 +12007,19 @@ class PdsCombobox {
11902
12007
  this.focusPanel(panelFocusEl);
11903
12008
  }
11904
12009
  }
12010
+ // A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
12011
+ // so it isn't read again as their description.
12012
+ syncTitle(el, selector) {
12013
+ const text = el.querySelector(selector);
12014
+ if (!text)
12015
+ return;
12016
+ if (text.scrollWidth > text.clientWidth) {
12017
+ text.title = text.textContent || '';
12018
+ }
12019
+ else {
12020
+ text.removeAttribute('title');
12021
+ }
12022
+ }
11905
12023
  /**
11906
12024
  * Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
11907
12025
  * panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
@@ -13303,6 +13421,7 @@ class PdsCombobox {
13303
13421
  'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
13304
13422
  'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
13305
13423
  'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
13424
+ 'pds-combobox__listbox--truncate': this.truncate,
13306
13425
  }, onAnimationEnd: this.onDrillAnimationEnd, onPointerMove: this.onPanelPointer, onPointerDown: this.onPanelPointer, role: this.showsGroupedPanel ? 'tree' : 'listbox', id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false",
13307
13426
  // Focusable but out of the tab order with panel search, so it can take focus when a
13308
13427
  // drilled-in group hides the field. Dropping it while focused would blur the list and close.
@@ -13469,14 +13588,15 @@ class PdsCombobox {
13469
13588
  'pds-combobox__option--layout': isLayout,
13470
13589
  'pds-combobox__option--chip': isChip,
13471
13590
  'pds-combobox__option--disabled': isDisabled,
13472
- }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
13591
+ }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
13473
13592
  }
13474
13593
  /** An option's text, after its `data-icon` when it has one. */
13475
13594
  renderOptionLabel(option) {
13476
13595
  const icon = optionIconOf(option);
13596
+ const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
13477
13597
  if (icon === null)
13478
- return this.getOptionLabel(option);
13479
- return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), this.getOptionLabel(option)));
13598
+ return label;
13599
+ return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
13480
13600
  }
13481
13601
  /** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
13482
13602
  panelEntries() {
@@ -13564,7 +13684,9 @@ class PdsCombobox {
13564
13684
  'pds-combobox__button-trigger-label--with-icon': icon !== null,
13565
13685
  } }, icon !== null && (
13566
13686
  // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
13567
- hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.selectedLabel || this.placeholder));
13687
+ hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
13688
+ // Keyed so a new label drops a stale `title`.
13689
+ hAsync("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (this.selectedLabel || this.placeholder)));
13568
13690
  }
13569
13691
  /** The selection's icon for the button trigger: the option's own, or else its group's. */
13570
13692
  get selectedIcon() {
@@ -13668,7 +13790,7 @@ class PdsCombobox {
13668
13790
  }
13669
13791
  // Helper method to render chip trigger default content
13670
13792
  renderChipTriggerDefaultContent() {
13671
- return (hAsync("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && hAsync("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
13793
+ return (hAsync("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && hAsync("pds-icon", { icon: this.selectedChipIcon, "aria-hidden": "true", class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
13672
13794
  }
13673
13795
  // Helper method to render option as chip (new automatic approach)
13674
13796
  renderOptionChip(option) {
@@ -13696,16 +13818,17 @@ class PdsCombobox {
13696
13818
  'pds-combobox__button-trigger',
13697
13819
  `pds-combobox__button-trigger--${this.triggerVariant}`,
13698
13820
  this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
13821
+ this.truncate && 'pds-combobox__button-trigger--truncate',
13699
13822
  ]
13700
13823
  .filter(Boolean)
13701
13824
  .join(' ');
13702
- return (hAsync(Host, { key: 'ead770a3b7ba531a1cfdc6b02aef6d7159481ed0', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '3ca6fd299acd1db8a0e476eee5f7606bc6153625', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '44c72d099c5ccddce18400b9d3c66158f485de05', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
13825
+ return (hAsync(Host, { key: '2786062989bc490e87ea382b5c80f7e2758c1a8a', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'b3b272a99528d725a52d3092a3650efacaf54b34', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '8e2e0021e1f60cddfe41b918406c7d76659fbff1', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
13703
13826
  this.inputEl = el;
13704
13827
  this.triggerEl = el;
13705
13828
  }, class: {
13706
13829
  'pds-combobox__input': true,
13707
13830
  'pds-combobox__input--invalid': this.isInvalid(),
13708
- }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '349af9dc6fdae018d4443b178e21b1627fcc85ca', style: { display: 'none' } }, hAsync("slot", { key: '9af42db6d08f148b7d7b5e4b3199f7c9af7699a4', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
13831
+ }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '2216779564fa3f4efd1b4d0972ac045fa0851078', style: { display: 'none' } }, hAsync("slot", { key: '77b344d7301193f435949cbe2be2b28e1d7f6602', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
13709
13832
  hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
13710
13833
  // Its own region: sharing one, revealing a row then opening it would leave the text the
13711
13834
  // same, and opening the group would go unannounced.
@@ -13776,6 +13899,7 @@ class PdsCombobox {
13776
13899
  "triggerWidth": [1, "trigger-width"],
13777
13900
  "triggerVariant": [1, "trigger-variant"],
13778
13901
  "triggerShape": [1, "trigger-shape"],
13902
+ "truncate": [516],
13779
13903
  "chipSentiment": [1, "chip-sentiment"],
13780
13904
  "chipLarge": [4, "chip-large"],
13781
13905
  "chipIcon": [1, "chip-icon"],
@@ -13812,7 +13936,7 @@ class PdsCombobox {
13812
13936
  },
13813
13937
  "$listeners$": undefined,
13814
13938
  "$lazyBundleId$": "-",
13815
- "$attrsToReflect$": [["name", "name"]]
13939
+ "$attrsToReflect$": [["name", "name"], ["truncate", "truncate"]]
13816
13940
  }; }
13817
13941
  }
13818
13942
 
@@ -13845,7 +13969,7 @@ class PdsContainer {
13845
13969
  hostStyle['--pine-container-max-width'] = customSize;
13846
13970
  if (!this.centered)
13847
13971
  hostStyle['margin-inline'] = '0';
13848
- return (hAsync(Host, { key: '8a9b10b5d0e348b73f8a6bd7933083c596df10d8', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, hAsync(Tag, { key: '55fb22be49377c4cccf08381e7cf954a3f097d08', part: "container" }, hAsync("slot", { key: '4cd9c4fa74a2c6a056e076ab67a0279c395b5c79' }))));
13972
+ return (hAsync(Host, { key: '8a01369c4d1817dd083b1ac714ff7c02920f817e', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, hAsync(Tag, { key: '7428cb0040896dc11004065cf91ae9d3c3a99c49', part: "container" }, hAsync("slot", { key: '5a5b5bbc87c03afc23f1c9a0523fced8c0795efb' }))));
13849
13973
  }
13850
13974
  static get style() { return pdsContainerCss(); }
13851
13975
  static get cmpMeta() { return {
@@ -13970,7 +14094,7 @@ class PdsCopytext {
13970
14094
  render() {
13971
14095
  const hostClass = this.classNames();
13972
14096
  this.hostKeeper.record(hostClass);
13973
- return (hAsync(Host, { key: 'a3517b135fc3e3677e30b6ad5811c1170a819b65', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: '02f56bed02ed3963a3d80a92148d6619a845224a', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '95fd1284e3d227b74dab613eb71f5385c3a0be29', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '21af67a8c9165e56d2d2b0cf19df7c7e3f290c72', "aria-hidden": "true", icon: copy, size: "16px" }))));
14097
+ return (hAsync(Host, { key: '35d74eaecedd432f7852545522f9ce72396f9ab9', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: '9550ce2fb21166e9726b08b5928036244c7b729e', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '47af45448759c911ca4ca03d0158088289b622e0', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '3ddab7c3e7063843cd606ffb19481cae3792db43', "aria-hidden": "true", icon: copy, size: "16px" }))));
13974
14098
  }
13975
14099
  get el() { return getElement(this); }
13976
14100
  static get watchers() { return {
@@ -15972,14 +16096,14 @@ class PdsDatepicker {
15972
16096
  }
15973
16097
  render() {
15974
16098
  const locale = this.resolvedLocale;
15975
- return (hAsync(Host, { key: '82ffd88b7741a90edc28b66a7384178eb2a9a86c', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, hAsync("pds-input", { key: 'f2b9aad64d1fe8d94327cc3d4f87cd6904eb3076', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (hAsync("button", {
16099
+ return (hAsync(Host, { key: 'a761f0ca6eeedcac3e4bd90760aa9781cd37dcdc', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, hAsync("pds-input", { key: '2eb04f9fd4e2f7a2437145d250c629c2cc8a0bf6', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (hAsync("button", {
15976
16100
  // Keyed, as is the calendar button: when Clear appears after a pick, the focused
15977
16101
  // calendar button must stay that button rather than be reused as Clear.
15978
16102
  key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
15979
16103
  // Out of the tab order, as a native search field's clear button is: Tab from a field
15980
16104
  // just emptied would land on it as the change removes it, dropping focus to the page.
15981
16105
  tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
15982
- }, hAsync("pds-icon", { key: 'f2c784e9d6577d4900b7641ee58aa43f5922fc75', icon: remove, "aria-hidden": "true" }))), hAsync("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, hAsync("pds-icon", { key: '98b2e773240c8ea2bbd5a1acfa3c9ba74cb7917b', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
16106
+ }, hAsync("pds-icon", { key: '98c325fbba8ea78b2d409bc77099db3206738508', icon: remove, "aria-hidden": "true" }))), hAsync("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, hAsync("pds-icon", { key: 'cb8483febe1b485058b7bb4271b749981a7747a1', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
15983
16107
  }
15984
16108
  static get formAssociated() { return true; }
15985
16109
  get el() { return getElement(this); }
@@ -16121,7 +16245,7 @@ class PdsDivider {
16121
16245
  return classNames.join(' ');
16122
16246
  }
16123
16247
  render() {
16124
- return (hAsync(Host, { key: 'ef2a5ee85e8f37036be5b8df490683636ffb66f0', id: this.componentId }, this.hasLabel ? (hAsync("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, hAsync("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (hAsync("hr", { class: this.classNames() }))));
16248
+ return (hAsync(Host, { key: '072cc8552bd33c4a00d216f15a5a848cfc97fd92', id: this.componentId }, this.hasLabel ? (hAsync("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, hAsync("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (hAsync("hr", { class: this.classNames() }))));
16125
16249
  }
16126
16250
  static get style() { return pdsDividerCss(); }
16127
16251
  static get cmpMeta() { return {
@@ -16317,11 +16441,11 @@ class PdsDrawer {
16317
16441
  this.open = false;
16318
16442
  }
16319
16443
  render() {
16320
- return (hAsync(Host, { key: '287bf043c991209488eb1b617031acffb59ff9af', class: {
16444
+ return (hAsync(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
16321
16445
  'pds-drawer': true,
16322
16446
  [`pds-drawer--${this.side}`]: true,
16323
16447
  [`pds-drawer--${this.size}`]: true,
16324
- } }, hAsync("pds-modal", { key: 'cd86fb552353f5cc12fb36fc956033432a91847c', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, hAsync("slot", { key: '56bbe9b5c26b10b07c0f503ba147899a57a5de85' }))));
16448
+ } }, hAsync("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, hAsync("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
16325
16449
  }
16326
16450
  get el() { return getElement(this); }
16327
16451
  static get style() { return pdsDrawerCss(); }
@@ -16362,7 +16486,7 @@ class PdsDrawerContent {
16362
16486
  unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
16363
16487
  }
16364
16488
  render() {
16365
- return (hAsync("div", { key: 'f307939ab0a94f6a0d8a3675c658def0ded68b98', class: "pds-drawer-content" }, hAsync("slot", { key: 'dadac08ac15bb8ded98ea982511e2d57bea9bdca' })));
16489
+ return (hAsync("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, hAsync("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
16366
16490
  }
16367
16491
  get el() { return getElement(this); }
16368
16492
  static get style() { return pdsDrawerContentCss(); }
@@ -16390,7 +16514,7 @@ class PdsDrawerFooter {
16390
16514
  unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
16391
16515
  }
16392
16516
  render() {
16393
- return (hAsync("footer", { key: 'b58c68d88b467e8baa3682d16f97076d06ea2414', class: "pds-drawer__footer" }, hAsync("slot", { key: 'ff2306202c14029b397d40b5bb3d672a8aa571c0' })));
16517
+ return (hAsync("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, hAsync("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
16394
16518
  }
16395
16519
  get el() { return getElement(this); }
16396
16520
  static get style() { return pdsDrawerFooterCss(); }
@@ -16418,7 +16542,7 @@ class PdsDrawerHeader {
16418
16542
  unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
16419
16543
  }
16420
16544
  render() {
16421
- return (hAsync("header", { key: '280e6ca734317d5733e4c595431c8070eff13d58', class: "pds-drawer__header" }, hAsync("slot", { key: 'cc6af6084600c4dc60d7bd99e040376abdf5ffe3' })));
16545
+ return (hAsync("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, hAsync("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
16422
16546
  }
16423
16547
  get el() { return getElement(this); }
16424
16548
  static get style() { return pdsDrawerHeaderCss(); }
@@ -16634,11 +16758,11 @@ class PdsDropdownMenu {
16634
16758
  if (tagName === 'pds-dropdown-menu-item') {
16635
16759
  // For pds-dropdown-menu-item, focus the inner element
16636
16760
  const menuItem = item;
16637
- const innerButton = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
16761
+ const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
16638
16762
  const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
16639
16763
  || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
16640
- if (innerButton) {
16641
- innerButton.focus();
16764
+ if (innerControl) {
16765
+ innerControl.focus();
16642
16766
  }
16643
16767
  else if (innerLink) {
16644
16768
  innerLink.focus();
@@ -16790,7 +16914,7 @@ class PdsDropdownMenu {
16790
16914
  }
16791
16915
  }
16792
16916
  render() {
16793
- return (hAsync(Host, { key: '18dac4d59ea236fe171f4c16f6571cb1547059c6', id: this.componentId }, hAsync("slot", { key: '95201a75a33ccb70dbd51a5cf9d78c76ebf26f65', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '7fc588f40f607ad81ad70bf74a525d078d32a80b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: '73d13d94edccb68db7b703f930b50f729334efa8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '7066f3a6f71c8961326f38f0509f1c0cc17098ae', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: '9f07ec488b688c58c6422b575015ccd364075fe8', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: 'd0aad3f9ac3b58779669411523adbb8878dec61c', onSlotchange: this.handleSlotChange })))));
16917
+ return (hAsync(Host, { key: '0ed3d8ee889a5423ca9de66a86791d084f75abf0', id: this.componentId }, hAsync("slot", { key: '6bab71652d6afe094075623d3a48641a4d89b232', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: 'fcef0667f999ae5b8cd03eb94a0db0be7be502cb', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: 'c78d5bd7e48c5483b12171341271f9132f4b2ff9', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '6464994260720d6046da548f4aad0896965cc47c', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: '3e97dfc4e1911f91ce8917faf981d436e71e5c24', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: 'dfd77a8b73df5ce9eef3e661d3f9501cb8bfdba2', onSlotchange: this.handleSlotChange })))));
16794
16918
  }
16795
16919
  get host() { return getElement(this); }
16796
16920
  static get style() { return pdsDropdownMenuCss(); }
@@ -16809,10 +16933,10 @@ class PdsDropdownMenu {
16809
16933
  }; }
16810
16934
  }
16811
16935
 
16812
- const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
16936
+ const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.is-informational){cursor:default}:host(.is-informational) .pds-dropdown-menu-item__content:hover{background-color:transparent;color:var(--pine-color-text)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
16813
16937
 
16814
16938
  /**
16815
- * @part button
16939
+ * @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
16816
16940
  */
16817
16941
  class PdsDropdownMenuItem {
16818
16942
  constructor(hostRef) {
@@ -16828,9 +16952,17 @@ class PdsDropdownMenuItem {
16828
16952
  * @defaultValue false
16829
16953
  */
16830
16954
  this.disabled = false;
16955
+ /**
16956
+ * It determines whether or not the dropdown-item is informational: text that the arrow keys
16957
+ * reach but that can't be activated. Takes precedence over `href` and `destructive`.
16958
+ * Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
16959
+ * @defaultValue false
16960
+ */
16961
+ this.informational = false;
16831
16962
  /**
16832
16963
  * Determines whether the link should open in a new tab and display an external icon.
16833
16964
  * This is a simpler alternative to using `target="_blank"` for the common case.
16965
+ * Ignored when `informational` is set.
16834
16966
  * @defaultValue false
16835
16967
  */
16836
16968
  this.external = false;
@@ -16841,6 +16973,12 @@ class PdsDropdownMenuItem {
16841
16973
  this.handleBlur = () => {
16842
16974
  this.hasFocus = false;
16843
16975
  };
16976
+ // Space would otherwise scroll the page, since nothing in the item takes the key.
16977
+ this.handleInformationalKeyDown = (event) => {
16978
+ if (event.key === ' ') {
16979
+ event.preventDefault();
16980
+ }
16981
+ };
16844
16982
  this.handleKeyDown = (event) => {
16845
16983
  // Handle keyboard events
16846
16984
  if (!this.disabled && (event.key === 'Enter')) {
@@ -16862,6 +17000,8 @@ class PdsDropdownMenuItem {
16862
17000
  ;
16863
17001
  handleClick() {
16864
17002
  var _a;
17003
+ if (this.informational)
17004
+ return;
16865
17005
  // Filter only pds-dropdown-menu-item elements and find the index of the current item
16866
17006
  const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
16867
17007
  const itemIndex = menuItems.indexOf(this.host);
@@ -16874,8 +17014,14 @@ class PdsDropdownMenuItem {
16874
17014
  });
16875
17015
  }
16876
17016
  renderElement() {
17017
+ if (this.informational) {
17018
+ return (hAsync("div", { class: {
17019
+ 'pds-dropdown-menu-item__content': true,
17020
+ 'has-focus': this.hasFocus
17021
+ }, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("slot", null)));
17022
+ }
16877
17023
  if (this.href != null) {
16878
- return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
17024
+ return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
16879
17025
  'pds-dropdown-menu-item__content': true,
16880
17026
  'has-focus': this.hasFocus
16881
17027
  }, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
@@ -16886,7 +17032,14 @@ class PdsDropdownMenuItem {
16886
17032
  }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
16887
17033
  }
16888
17034
  render() {
16889
- return (hAsync(Host, { key: '2d499a06768bdc4b9a34774d16c1f1e10804b3d5', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
17035
+ return (hAsync(Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
17036
+ 'is-disabled': this.disabled,
17037
+ 'is-informational': this.informational,
17038
+ 'destructive': !this.disabled && !this.informational && this.destructive
17039
+ }, onClick: () => !this.disabled && this.handleClick(), role: "none",
17040
+ // ARIA ignores role="none" on focusable elements, so a focusable host would sit between
17041
+ // the menu and the informational menuitem as an unexpected child.
17042
+ tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
16890
17043
  }
16891
17044
  get host() { return getElement(this); }
16892
17045
  static get style() { return pdsDropdownMenuItemCss(); }
@@ -16899,14 +17052,16 @@ class PdsDropdownMenuItem {
16899
17052
  "disabled": [516],
16900
17053
  "download": [1],
16901
17054
  "href": [1],
17055
+ "informational": [516],
16902
17056
  "external": [516],
17057
+ "externalLabel": [1, "external-label"],
16903
17058
  "target": [513],
16904
17059
  "hasFocus": [32],
16905
17060
  "clickItem": [64]
16906
17061
  },
16907
17062
  "$listeners$": undefined,
16908
17063
  "$lazyBundleId$": "-",
16909
- "$attrsToReflect$": [["disabled", "disabled"], ["external", "external"], ["target", "target"]]
17064
+ "$attrsToReflect$": [["disabled", "disabled"], ["informational", "informational"], ["external", "external"], ["target", "target"]]
16910
17065
  }; }
16911
17066
  }
16912
17067
 
@@ -16922,7 +17077,7 @@ class PdsDropdownMenuSeparator {
16922
17077
  this.disabled = false;
16923
17078
  }
16924
17079
  render() {
16925
- return (hAsync(Host, { key: '60407a2edc8b4667d39cbd1ba9a859d09b0b8ff1', id: this.componentId }, hAsync("hr", { key: '8485d1c8508c5fe5e3635505f25e278f45f45b82' })));
17080
+ return (hAsync(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, hAsync("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
16926
17081
  }
16927
17082
  static get style() { return pdsDropdownMenuSeparatorCss(); }
16928
17083
  static get cmpMeta() { return {
@@ -17502,7 +17657,7 @@ class PdsFilter {
17502
17657
  return null;
17503
17658
  }
17504
17659
  render() {
17505
- return (hAsync(Host, { key: '3cae951aee1f9c75f3e207cf6c68633a23f8f6dc', id: this.componentId }, hAsync("button", { key: 'f4c644710dc936248995be9a49cef8ad13031d61', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: '2dd87e53f363118becc762051ea1be664258b8b6', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: '733ceb5e07198e844fbdc1af294d2046c4c571d8', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: 'beb65a21192c6f5c16703aec7ab9a92ea378ef3c', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: '5a481cc6b143b059a5fc33d377abe5ab79aefb4e' })))));
17660
+ return (hAsync(Host, { key: '9b2286e9a0d7f88b7f6bc90f8444185cfec832c8', id: this.componentId }, hAsync("button", { key: '968953600d615f2739757a91422dafdb817c9a6f', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: 'ee479f7e510ffcb54f7857cb7d1345f2a5c1d76a', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: 'e98aa8b915a2460f3c7d49e20ec7d43853ee5f9f', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: '3084babfba2d96880b2829a60d2ef00140a6813b', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: 'e901488be75a18bedc6b2c42be5c398fd2cf2a29' })))));
17506
17661
  }
17507
17662
  get el() { return getElement(this); }
17508
17663
  static get style() { return pdsFilterCss(); }
@@ -17534,7 +17689,7 @@ class PdsFilters {
17534
17689
  registerInstance(this, hostRef);
17535
17690
  }
17536
17691
  render() {
17537
- return (hAsync(Host, { key: '8688235fe7cdea1b4fc540156ff21bb9711b41b6', id: this.componentId }, hAsync("div", { key: 'e51a37977df8c31f99b28d8c7e4bedb0d63e53c6', class: "pds-filters" }, hAsync("slot", { key: '8ce936da4d3f0213408090bc3eeb011920f9aa6c' }))));
17692
+ return (hAsync(Host, { key: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, hAsync("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, hAsync("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
17538
17693
  }
17539
17694
  static get style() { return pdsFiltersCss(); }
17540
17695
  static get cmpMeta() { return {
@@ -18030,9 +18185,9 @@ class PdsImage {
18030
18185
  this.loading = 'eager';
18031
18186
  }
18032
18187
  render() {
18033
- return (hAsync(Host, { key: '1e8bb3882c2a629004ce1441e85d5c5a75a84e98', class: {
18188
+ return (hAsync(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
18034
18189
  'pds-image': true,
18035
- }, id: this.componentId }, hAsync("img", { key: 'b50b19d51431d45027c7a918a4ba4c38493741d5', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
18190
+ }, id: this.componentId }, hAsync("img", { key: '393cc584586e37e8d5b602fbdcda1783bf80cf9b', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
18036
18191
  }
18037
18192
  static get style() { return pdsImageCss(); }
18038
18193
  static get cmpMeta() { return {
@@ -18352,10 +18507,10 @@ class PdsInput {
18352
18507
  'has-prepend': this.hasPrepend,
18353
18508
  'has-append': this.hasAppend,
18354
18509
  };
18355
- return (hAsync(Host, { key: '75eb8bc6cda5e947f8677ebefe7995688f03f947', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: '93d7f90b9a64daccea1533abc08a8cb18825b828', class: "pds-input" }, label && (hAsync("div", { key: '948109b3bfa1a1b8171572da9160425e3e35a7a6', class: {
18510
+ return (hAsync(Host, { key: '1706e29a68d25a8bb83c36d6bddace04a448f6f5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: '1488b6ea995c4ffc4068757f566494c0ac073950', class: "pds-input" }, label && (hAsync("div", { key: 'e2fe4e461e626648ec51882e92e02fea179e3e13', class: {
18356
18511
  'pds-input__label-wrapper': true,
18357
18512
  'visually-hidden': this.hideLabel,
18358
- } }, hAsync("label", { key: 'bb0e6c6febb97ad4aa3942ac5e67ac42dc1bde0a', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: 'c6a122f829aa3b92ccb715c3f3975f6baadb3028' }, label, this.required && hAsync("span", { key: 'dce7d1a9c010a545992734bd238e9f6a4ca7b4ce', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '1b92ab5d649a4a9cf8112ea9b8a8a1095714f6d0', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: 'bc3c4b907312149d375bb78f9912e4501da59348', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: 'f7bcbafc17a20310d602fce14a0adad522acbcb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'bbbd6dc3203b89e5759587147de74d2ce3ce6177', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '68a6a92c82c1756ad99f431e0cb56756e3cdf75c', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
18513
+ } }, hAsync("label", { key: 'c926a6fbb3130afdc6c86d509b92fb6650391c4b', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: 'dbbaf9d0db49f949f69f1faf848e7c6193e32793' }, label, this.required && hAsync("span", { key: '42e6325a0f5ee276ed92cf2eb71942c268c3d1aa', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '4715743733f2d7d3e4edf9ac4ab6d69ffde04d00', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '438ac0fc6d497a8227c83e628d29d4633ffc208a', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: '43b5c3a332072f19a38be316565602932c61504d', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: '54fd4fc2dcbc645377edbe4d04cfd82c7d1591e8', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '2bd509a575ec5c7a548955dd7f706d7c1d42557e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
18359
18514
  }
18360
18515
  static get formAssociated() { return true; }
18361
18516
  get el() { return getElement(this); }
@@ -18411,6 +18566,8 @@ class PdsInput {
18411
18566
 
18412
18567
  const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
18413
18568
 
18569
+ // Used when `externalLabel` is unset; an empty string hides the icon instead.
18570
+ const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
18414
18571
  /**
18415
18572
  * @part link - Link element styles.
18416
18573
  * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
@@ -18464,11 +18621,18 @@ class PdsLink {
18464
18621
  return linkStyles;
18465
18622
  }
18466
18623
  render() {
18624
+ var _a;
18467
18625
  const targetValue = this.target || (this.external ? '_blank' : undefined);
18468
18626
  const showExternalIcon = this.external;
18469
- const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
18470
- return (hAsync("a", { key: '3b6f9d19d7f50d0606cf5f3c3a97b85ee4aa63b0', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: 'a265f1c4c9b6ff089b23906d8f650bfd65b25013' }, this.href), showExternalIcon &&
18471
- hAsync("pds-icon", { key: '9553a8256b6811296ea4b762e32662c1a2f4aecf', icon: launch, size: this.fontSize })));
18627
+ const opensInNewTab = targetValue === '_blank';
18628
+ const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
18629
+ // A `target` other than _blank overrides `external`, and then the label
18630
+ // would be false, so the icon is decorative there, as it is when the
18631
+ // label is empty.
18632
+ const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
18633
+ const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
18634
+ return (hAsync("a", { key: 'ae7928aa6dce42657545a1d17581818d3724746f', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: 'e61374c58fddec869f2f5dda54634a0b1ba9f345' }, this.href), showExternalIcon &&
18635
+ hAsync("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
18472
18636
  }
18473
18637
  static get style() { return pdsLinkCss(); }
18474
18638
  static get cmpMeta() { return {
@@ -18480,6 +18644,7 @@ class PdsLink {
18480
18644
  "download": [1],
18481
18645
  "componentId": [1, "component-id"],
18482
18646
  "external": [4],
18647
+ "externalLabel": [1, "external-label"],
18483
18648
  "target": [1],
18484
18649
  "variant": [1],
18485
18650
  "fontSize": [1, "font-size"],
@@ -18567,7 +18732,7 @@ class PdsLoader {
18567
18732
  'aria-live': 'polite',
18568
18733
  };
18569
18734
  this.hostKeeper.record(hostClass, {}, hostAttributes);
18570
- return (hAsync(Host, Object.assign({ key: 'c42c1aeec5c8db9a1065f35492734a8cb265f3ce', class: hostClass }, hostAttributes), this.variant === 'spinner' && (hAsync("div", { key: 'dc1b7943709d03e02467cca0817fb6a7ad5ed10a', class: "pds-loader--spinner" }, hAsync("svg", { key: 'db38e607541ac1eb91be87b2cd0240341c8fb51d', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: 'd734ef70b0039758a25881c22bb3e6453ac40012' }, hAsync("linearGradient", { key: '697627f516c5f7b4cd5351dd39de231c0cb9e429', id: "spinner-secondHalf" }, hAsync("stop", { key: '03082c0ec354685eebf7d0132202d54b083d26df', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: '181b661b36aeb44943e20dec513f7265a9487004', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '67f6c51aefe99bcbfdb741290337364501fc4fcb', id: "spinner-firstHalf" }, hAsync("stop", { key: 'cb6adf27ecb06b42ba572a702153de960491b0b6', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: 'aeebabfa1ac00391937388feefa120bd0bb4d26c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: 'f06ca75e4df171b6db426fce9bc34076cfee5bca', class: "pds-loader__spinner-path" }, hAsync("path", { key: 'a278b37de8f77a1000efecb62b89e3f751712a98', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: 'a035add4d01b60bcebf7625c8730d6a41ddf40ff', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '1189c8299d33a2a6bb6a8345b60f22bf4ad9beee', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: '39826fae20e8826d9c73cf57ba938583d610e1ea', class: "pds-loader--typing" }, hAsync("span", { key: '8f2b837c79548a1080710a7cc30c3be3a051e1dd' }), hAsync("span", { key: '8efb1193ef51f110950861767eccc3896e90b81e' }), hAsync("span", { key: '366f2d205adbb043691c253cff17d2d29d56a2cc' }))), hAsync("div", { key: 'aeaa4aa12863b34088e84fd2791c2ce32dc05248', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: '7a8ec45aed1cd6f9e60f4db2ec5376439fa41c81', name: "label" }, "Loading..."))));
18735
+ return (hAsync(Host, Object.assign({ key: 'eaf8a64d5c2e37349ed2d2426a6c6bf1df68005f', class: hostClass }, hostAttributes), this.variant === 'spinner' && (hAsync("div", { key: '216143117aabd29ca52c56cd7951a27f9742e466', class: "pds-loader--spinner" }, hAsync("svg", { key: '9c9db37e883fb3a4ba5e0c7c173a5d7a76cdadda', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '8f65f537290ea2dd96b66343324851d243fec3dd' }, hAsync("linearGradient", { key: '8b1a53bcc9401b98dafa805cae8e417af7646bfd', id: "spinner-secondHalf" }, hAsync("stop", { key: 'f06605f7180e9c07d5eb4c9dbadcdb87cee0dd70', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: '0bf492e4d5578bd0d98a2f7570a1dd21ca2ecf3d', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '6c7038c158d786866a408063b07b236bf17cefc1', id: "spinner-firstHalf" }, hAsync("stop", { key: '916502c73bc4b78368bb210aed318537841917b9', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: '2d20708106bb3a685fbaf4bdcf099684a36359c0', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: '93165f80e7d5155b3dc8f2fc62e326bec7604c57', class: "pds-loader__spinner-path" }, hAsync("path", { key: '4b1e39a899aadf9d4b4cbf954c783c1103c43c24', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: '0aa1683dc97e2a01cc076a52a4883388c1d09c6f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '9839fb9e0b473814d3b10eb27f7be87990b6c088', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: 'd83e4625ea2d41a545a98e08edb3033b83e7eb5b', class: "pds-loader--typing" }, hAsync("span", { key: '2e793f3f5b17cb7709c8fc89e2054d7cd77fafd4' }), hAsync("span", { key: 'c266ad3b8edf6c1cc392c544027f7cfd543b711c' }), hAsync("span", { key: '061f9e3030cce603e50e8d86d3aa5036800c1324' }))), hAsync("div", { key: '747c1c6c28136cfb9ba9dac0d4944bc6281af075', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: '5eb5a5710deafa10bd269429edff0ac677546cf5', name: "label" }, "Loading..."))));
18571
18736
  }
18572
18737
  get el() { return getElement(this); }
18573
18738
  static get watchers() { return {
@@ -18591,12 +18756,6 @@ class PdsLoader {
18591
18756
  }; }
18592
18757
  }
18593
18758
 
18594
- const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
18595
-
18596
- const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
18597
- const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
18598
- /\d/.test(value) &&
18599
- (typeof CSS === 'undefined' || CSS.supports('max-width', value));
18600
18759
  const TABBABLE = [
18601
18760
  'a[href]',
18602
18761
  'area[href]',
@@ -18678,6 +18837,13 @@ function tabbableIn(root) {
18678
18837
  });
18679
18838
  return oneRadioPerGroup(visible);
18680
18839
  }
18840
+
18841
+ const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
18842
+
18843
+ const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
18844
+ const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
18845
+ /\d/.test(value) &&
18846
+ (typeof CSS === 'undefined' || CSS.supports('max-width', value));
18681
18847
  /** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
18682
18848
  function containsComposed(ancestor, node) {
18683
18849
  for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
@@ -18693,7 +18859,7 @@ function containsComposed(ancestor, node) {
18693
18859
  */
18694
18860
  const openModals = new Map();
18695
18861
  let openSequence = 0;
18696
- /** Whether an open auto popover's panel sits in `root`, including inside shadow roots under it. */
18862
+ /** Whether the panel of an open popover that takes Escape sits in `root`, including inside shadow roots under it. */
18697
18863
  function hasOpenPopover(root) {
18698
18864
  if (root.querySelector('[data-pds-popover-open]'))
18699
18865
  return true;
@@ -19240,14 +19406,14 @@ class PdsModal {
19240
19406
  }
19241
19407
  render() {
19242
19408
  const [sizeClass = 'md', customSize] = this.resolveSize();
19243
- return (hAsync("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
19409
+ return (hAsync("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
19244
19410
  'pds-modal__backdrop': true,
19245
19411
  'open': this.open
19246
- }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
19412
+ }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
19247
19413
  'pds-modal': true,
19248
19414
  [`pds-modal--${sizeClass}`]: true,
19249
19415
  'pds-modal--scrollable': this.scrollable
19250
- }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
19416
+ }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
19251
19417
  }
19252
19418
  get el() { return getElement(this); }
19253
19419
  static get watchers() { return {
@@ -19298,6 +19464,21 @@ class PdsModalContent {
19298
19464
  * Tracks whether the border prop was explicitly set by the user
19299
19465
  */
19300
19466
  this.userSetBorder = false;
19467
+ this.hasLoaded = false;
19468
+ /**
19469
+ * Handle scroll events
19470
+ */
19471
+ this.handleScroll = () => {
19472
+ this.updateBorders();
19473
+ };
19474
+ /**
19475
+ * Handle resize events
19476
+ */
19477
+ this.handleResize = () => {
19478
+ this.calculateMaxHeight();
19479
+ // Update borders after resize as content scrollability might change
19480
+ setTimeout(() => this.updateBorders(), 50);
19481
+ };
19301
19482
  }
19302
19483
  // Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
19303
19484
  componentDidRender() {
@@ -19311,43 +19492,30 @@ class PdsModalContent {
19311
19492
  this.userSetBorder = hasBorderAttribute || this.border !== 'none';
19312
19493
  }
19313
19494
  componentDidLoad() {
19495
+ this.hasLoaded = true;
19314
19496
  this.calculateMaxHeight();
19315
- // Set up resize listener
19316
- window.addEventListener('resize', this.handleResize.bind(this));
19317
- // Only set up scroll listener for border updates if borders are managed automatically
19318
19497
  if (!this.userSetBorder) {
19319
- setTimeout(() => {
19320
- // The scroll happens on the component element itself (this.el), not the inner div
19321
- this.el.addEventListener('scroll', this.handleScroll.bind(this));
19322
- // Initial border update after everything is set up
19323
- setTimeout(() => this.updateBorders(), 100);
19324
- }, 100);
19498
+ // Initial border update after everything is set up
19499
+ setTimeout(() => this.updateBorders(), 200);
19325
19500
  }
19326
19501
  }
19502
+ // Here rather than in componentDidLoad, which runs once: content taken out of the page and put
19503
+ // back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
19504
+ connectedCallback() {
19505
+ window.addEventListener('resize', this.handleResize);
19506
+ // The scroll happens on the component element itself (this.el), not the inner div
19507
+ this.el.addEventListener('scroll', this.handleScroll);
19508
+ if (this.hasLoaded)
19509
+ this.calculateMaxHeight();
19510
+ }
19327
19511
  disconnectedCallback() {
19328
- window.removeEventListener('resize', this.handleResize.bind(this));
19329
- // Clean up scroll listener only if it was set up
19330
- if (!this.userSetBorder) {
19331
- this.el.removeEventListener('scroll', this.handleScroll.bind(this));
19332
- }
19512
+ window.removeEventListener('resize', this.handleResize);
19513
+ this.el.removeEventListener('scroll', this.handleScroll);
19333
19514
  if (this.mutationObserver) {
19334
19515
  this.mutationObserver.disconnect();
19516
+ this.mutationObserver = undefined;
19335
19517
  }
19336
19518
  }
19337
- /**
19338
- * Handle scroll events
19339
- */
19340
- handleScroll() {
19341
- this.updateBorders();
19342
- }
19343
- /**
19344
- * Handle resize events
19345
- */
19346
- handleResize() {
19347
- this.calculateMaxHeight();
19348
- // Update borders after resize as content scrollability might change
19349
- setTimeout(() => this.updateBorders(), 50);
19350
- }
19351
19519
  /**
19352
19520
  * Updates border visibility based on scroll state (only if not user-defined)
19353
19521
  */
@@ -19464,10 +19632,10 @@ class PdsModalContent {
19464
19632
  render() {
19465
19633
  // Only apply max-height style if it's not 'none'
19466
19634
  const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
19467
- return (hAsync(Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, hAsync("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
19635
+ return (hAsync(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, hAsync("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
19468
19636
  'pds-modal-content': true,
19469
19637
  [`pds-modal-content--border-${this.border}`]: true
19470
- }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
19638
+ }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
19471
19639
  }
19472
19640
  get el() { return getElement(this); }
19473
19641
  static get style() { return pdsModalContentCss(); }
@@ -19498,7 +19666,7 @@ class PdsModalFooter {
19498
19666
  unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
19499
19667
  }
19500
19668
  render() {
19501
- return (hAsync("footer", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__footer" }, hAsync("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
19669
+ return (hAsync("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, hAsync("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
19502
19670
  }
19503
19671
  get el() { return getElement(this); }
19504
19672
  static get style() { return pdsModalFooterCss(); }
@@ -19526,7 +19694,7 @@ class PdsModalHeader {
19526
19694
  unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
19527
19695
  }
19528
19696
  render() {
19529
- return (hAsync("header", { key: 'ee3ac5fb9b00a943aa86c3434ea07291b74d776c', class: "pds-modal__header" }, hAsync("slot", { key: '0b0f7ff257635723099c536648a826be8dcc05e7' })));
19697
+ return (hAsync("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, hAsync("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
19530
19698
  }
19531
19699
  get el() { return getElement(this); }
19532
19700
  static get style() { return pdsModalHeaderCss(); }
@@ -20723,7 +20891,7 @@ class PdsMultiselect {
20723
20891
  'pds-multiselect__option--selected': isSelected,
20724
20892
  'pds-multiselect__option--create': isCreateOption,
20725
20893
  'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
20726
- }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
20894
+ }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small", "aria-hidden": "true" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
20727
20895
  }
20728
20896
  renderOptionAction(option, optionId, isHighlighted) {
20729
20897
  var _a;
@@ -20746,7 +20914,7 @@ class PdsMultiselect {
20746
20914
  const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
20747
20915
  const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
20748
20916
  const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
20749
- return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
20917
+ return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
20750
20918
  if (item.type === 'group') {
20751
20919
  return (hAsync("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, hAsync("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), hAsync("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
20752
20920
  }
@@ -20805,10 +20973,10 @@ class PdsMultiselect {
20805
20973
  }
20806
20974
  render() {
20807
20975
  const hasSelections = this.selectedItems.length > 0;
20808
- return (hAsync(Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
20976
+ return (hAsync(Host, { key: 'a92086af75e20b9b37b147365bfa517d96021700', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'd49e0442e3a348248e5ac3b37afc9f128b34956b', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: '41a081803dfd784e20a7135ecf5f5c4657908dd1', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
20809
20977
  'pds-multiselect__label': true,
20810
20978
  'visually-hidden': this.hideLabel,
20811
- } }, this.label)), hAsync("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
20979
+ } }, this.label)), hAsync("div", { key: '0e3c8a3aaf7c70b4ff71972c29b8d5599f62ec97', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
20812
20980
  'pds-multiselect__trigger': true,
20813
20981
  'pds-multiselect__trigger--open': this.isOpen,
20814
20982
  'pds-multiselect__trigger--disabled': this.disabled,
@@ -20824,7 +20992,7 @@ class PdsMultiselect {
20824
20992
  }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
20825
20993
  'pds-multiselect__trigger-text': true,
20826
20994
  'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
20827
- } }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, hAsync("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
20995
+ } }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: 'd5cddc1d3374d94ecf0cce1bcaf7c7125bf3128d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'e3cb958b6fd2b1e138b769de0f53be1b8564902d', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'f6c2a30cc192391973d9b22fbb6732ce387832ac', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'f437effafaa383b81aec7b5bf635598c8b0075b8', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: 'f1e747137f2dc7cad3d4e1ff8fc293401e3173e1', style: { display: 'none' } }, hAsync("slot", { key: 'f337137b3ca5983dc6641361101f6d19c972778c' })))));
20828
20996
  }
20829
20997
  static get formAssociated() { return true; }
20830
20998
  get el() { return getElement(this); }
@@ -20962,10 +21130,32 @@ const cssEscape = (value) => {
20962
21130
  return result;
20963
21131
  };
20964
21132
 
20965
- const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}`;
21133
+ const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__tab-guard{opacity:0;outline:none;pointer-events:none;position:fixed}:host .pds-popover__content-slot-wrapper{display:none}`;
20966
21134
 
20967
- /** Open auto popovers, in the order they opened: Escape goes to the last one it applies to. */
20968
- const openAutoPopovers = [];
21135
+ /** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
21136
+ const popoversTakingEscape = [];
21137
+ /** Hovering the trigger waits this long before opening, so a pointer passing over it doesn't open it. */
21138
+ const HOVER_OPEN_DELAY_MS = 120;
21139
+ /** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
21140
+ const HOVER_CLOSE_DELAY_MS = 200;
21141
+ /**
21142
+ * floating-ui reporting viewport coordinates, as `position: fixed` uses without a containing block. Its own
21143
+ * containing-block check misses a backdrop filter in WebKit, so handlePopoverPositioning corrects for one itself.
21144
+ */
21145
+ const viewportPlatform = Object.assign(Object.assign({}, platform), { getOffsetParent: () => window });
21146
+ /**
21147
+ * Where `top: 0; left: 0` puts a fixed element beside the given one. An empty probe is measured instead of the
21148
+ * element, whose own transforms, such as an entrance animation, would otherwise read as part of the offset.
21149
+ */
21150
+ const containingBlockOrigin = (element) => {
21151
+ var _a;
21152
+ const probe = document.createElement('div');
21153
+ probe.style.cssText = 'all: initial; position: fixed; top: 0; left: 0;';
21154
+ (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(probe, element);
21155
+ const { top, left } = probe.getBoundingClientRect();
21156
+ probe.remove();
21157
+ return { top, left };
21158
+ };
20969
21159
  /** The focused element, followed down through shadow roots to the control that has focus. */
20970
21160
  function deepActiveElement() {
20971
21161
  var _a;
@@ -20974,6 +21164,27 @@ function deepActiveElement() {
20974
21164
  active = active.shadowRoot.activeElement;
20975
21165
  return active;
20976
21166
  }
21167
+ /** `node`, or the shadow host it sits in, lifted until it shares a tree with `other` or reaches the document. */
21168
+ function liftToTreeOf(node, other) {
21169
+ let current = node;
21170
+ while (current.getRootNode() !== other.getRootNode() && current.getRootNode() instanceof ShadowRoot) {
21171
+ current = current.getRootNode().host;
21172
+ }
21173
+ return current;
21174
+ }
21175
+ /**
21176
+ * Where `node` sits relative to `ref`, as `compareDocumentPosition` reports it. Whichever of the two
21177
+ * is inside a shadow root is lifted to its host first, so a control inside a component compares too.
21178
+ */
21179
+ function positionAcrossTrees(ref, node) {
21180
+ const lifted = liftToTreeOf(node, ref);
21181
+ return liftToTreeOf(ref, lifted).compareDocumentPosition(lifted);
21182
+ }
21183
+ const isPosition = (position, flag) => (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & flag) !== 0;
21184
+ /** The popover each panel belongs to, so a popover inside another one's panel can find it. */
21185
+ const panelOwners = new WeakMap();
21186
+ /** Floating layers Pine components put at the end of the page or of a dialog, as a popover does its panel. */
21187
+ const FLOATING_LAYERS = '.pds-popover, .pds-datepicker-calendar-portal, .pds-combobox-dropdown-portal';
20977
21188
  /**
20978
21189
  * @slot trigger - The trigger element for the popover
20979
21190
  * @slot (default) - The content to display inside the popover
@@ -21013,14 +21224,21 @@ class PdsPopover {
21013
21224
  */
21014
21225
  this.portalEl = null;
21015
21226
  /**
21016
- * Guard to prevent repositioning loops
21227
+ * Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
21228
+ */
21229
+ this.stopAutoUpdate = null;
21230
+ /**
21231
+ * Counts positioning runs, so a run that resolves after a newer one started is dropped
21017
21232
  */
21018
- this.isRepositioning = false;
21233
+ this.positioningRun = 0;
21019
21234
  /**
21020
- * Debounce timers for performance optimization
21235
+ * The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
21021
21236
  */
21022
- this.scrollDebounceTimer = null;
21023
- this.resizeDebounceTimer = null;
21237
+ this.positioning = Promise.resolve();
21238
+ /**
21239
+ * Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
21240
+ */
21241
+ this.openEventPending = false;
21024
21242
  /**
21025
21243
  * Track moved nodes and their placeholders for restoration
21026
21244
  */
@@ -21029,11 +21247,41 @@ class PdsPopover {
21029
21247
  * Timestamp when popover was opened (for preventing immediate close)
21030
21248
  */
21031
21249
  this.openTimestamp = 0;
21250
+ /**
21251
+ * Set while hover holds the popover open, until a click pins it or it closes
21252
+ */
21253
+ this.hoverOpened = false;
21254
+ /**
21255
+ * Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
21256
+ */
21257
+ this.closeWhenFocusLeaves = false;
21258
+ /**
21259
+ * How far the pointer was from the panel at its last move after leaving the trigger
21260
+ */
21261
+ this.panelDistance = Infinity;
21262
+ /**
21263
+ * Stands in for the panel in the Tab order, right after the trigger, while the popover is open
21264
+ */
21265
+ this.tabGuardEl = null;
21266
+ /**
21267
+ * Set while focus passes through the guard on its way out of the panel
21268
+ */
21269
+ this.leavingPanel = false;
21270
+ /**
21271
+ * The direction of the Tab key being handled, until its default action has run
21272
+ */
21273
+ this.tabDirection = null;
21032
21274
  /**
21033
21275
  * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
21034
21276
  * @defaultValue "show"
21035
21277
  */
21036
21278
  this.popoverTargetAction = 'show';
21279
+ /**
21280
+ * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
21281
+ * when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
21282
+ * @defaultValue "click"
21283
+ */
21284
+ this.openOn = 'click';
21037
21285
  /**
21038
21286
  * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
21039
21287
  * Manual popovers require the consumer to handle the visibility of the popover.
@@ -21044,6 +21292,11 @@ class PdsPopover {
21044
21292
  * @defaultValue 352
21045
21293
  */
21046
21294
  this.maxWidth = 352;
21295
+ /**
21296
+ * Sets the padding of the popover content
21297
+ * @defaultValue "md"
21298
+ */
21299
+ this.padding = 'md';
21047
21300
  /**
21048
21301
  * Determines the preferred position of the popover
21049
21302
  * @defaultValue "right"
@@ -21058,6 +21311,7 @@ class PdsPopover {
21058
21311
  // Clean up previous trigger's event listener if it exists
21059
21312
  if (this.triggerEl != null) {
21060
21313
  this.triggerEl.removeEventListener('click', this.handleTriggerClick);
21314
+ this.stopListeningForHover(this.triggerEl);
21061
21315
  }
21062
21316
  if (assignedElements.length > 0) {
21063
21317
  // Use the first assigned element as the trigger
@@ -21065,10 +21319,14 @@ class PdsPopover {
21065
21319
  this.linkTriggerToPortal();
21066
21320
  // Attach click listener to handle popover visibility
21067
21321
  this.triggerEl.addEventListener('click', this.handleTriggerClick);
21322
+ this.listenForHover(this.triggerEl);
21068
21323
  }
21069
21324
  else {
21070
21325
  this.triggerEl = null;
21071
21326
  }
21327
+ // autoUpdate watches the trigger it started with, so an open popover starts it again on the new one.
21328
+ if (this.active)
21329
+ this.addScrollAndResizeListeners();
21072
21330
  this.observeTrigger();
21073
21331
  };
21074
21332
  /**
@@ -21091,6 +21349,13 @@ class PdsPopover {
21091
21349
  if (!anchorWithHref) {
21092
21350
  event.preventDefault();
21093
21351
  }
21352
+ if (this.openOn === 'hover' && this.popoverTargetAction !== 'hide') {
21353
+ const heldByHover = this.hoverOpened;
21354
+ this.pin();
21355
+ // Pinning, not toggling: the hover before a click has already opened it.
21356
+ if (heldByHover)
21357
+ return;
21358
+ }
21094
21359
  // Execute the appropriate action based on popoverTargetAction prop
21095
21360
  switch (this.popoverTargetAction) {
21096
21361
  case 'show':
@@ -21105,6 +21370,60 @@ class PdsPopover {
21105
21370
  break;
21106
21371
  }
21107
21372
  };
21373
+ // A tap sends touch pointer events and then a click, so touch takes the click path alone.
21374
+ this.handleHoverEnter = (event) => {
21375
+ if (event.pointerType === 'touch')
21376
+ return;
21377
+ this.clearHoverTimers();
21378
+ if (this.active)
21379
+ return;
21380
+ this.hoverOpenTimer = setTimeout(() => {
21381
+ this.hoverOpenTimer = undefined;
21382
+ if (this.active || this.portalEl == null)
21383
+ return;
21384
+ this.hoverOpened = true;
21385
+ this.show();
21386
+ }, HOVER_OPEN_DELAY_MS);
21387
+ };
21388
+ this.handleHoverLeave = (event) => {
21389
+ if (event.pointerType === 'touch')
21390
+ return;
21391
+ this.clearHoverTimers();
21392
+ if (!this.hoverOpened)
21393
+ return;
21394
+ this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
21395
+ if (event.currentTarget !== this.triggerEl)
21396
+ return;
21397
+ this.panelDistance = this.distanceToPanel(event);
21398
+ document.addEventListener('pointermove', this.handleMoveTowardPanel);
21399
+ };
21400
+ // A slow diagonal from the trigger to a panel shorter than it runs beside the panel for longer
21401
+ // than the close delay, so each move that brings the pointer closer starts the delay again.
21402
+ this.handleMoveTowardPanel = (event) => {
21403
+ const distance = this.distanceToPanel(event);
21404
+ if (distance < this.panelDistance) {
21405
+ clearTimeout(this.hoverCloseTimer);
21406
+ this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
21407
+ }
21408
+ this.panelDistance = distance;
21409
+ };
21410
+ this.handleHoverFocusOut = (event) => {
21411
+ if (!this.closeWhenFocusLeaves || containsComposed$1(this.portalEl, event.relatedTarget))
21412
+ return;
21413
+ this.closeWhenFocusLeaves = false;
21414
+ this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
21415
+ };
21416
+ this.closeFromHover = () => {
21417
+ this.clearHoverTimers();
21418
+ if (!this.hoverOpened)
21419
+ return;
21420
+ // Content shown on hover stays while focus is in it (WCAG 1.4.13).
21421
+ if (containsComposed$1(this.portalEl, deepActiveElement())) {
21422
+ this.closeWhenFocusLeaves = true;
21423
+ return;
21424
+ }
21425
+ this.hide();
21426
+ };
21108
21427
  /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
21109
21428
  this.shadowFocusStyle = null;
21110
21429
  /** The dialog the panel was opened in, closed along with it. */
@@ -21125,6 +21444,85 @@ class PdsPopover {
21125
21444
  event.stopPropagation();
21126
21445
  }
21127
21446
  };
21447
+ // At the end of the body or of a dialog, the panel would come last in the Tab order. The guard
21448
+ // after the trigger takes its place there, while the panel has a control for it to lead to.
21449
+ this.syncTabGuard = (event) => {
21450
+ if (event.key !== 'Tab')
21451
+ return;
21452
+ this.releasePanel();
21453
+ this.tabDirection = event.shiftKey ? 'backward' : 'forward';
21454
+ setTimeout(this.endTabKey);
21455
+ // Read on each Tab, as the panel's content can arrive after it opens.
21456
+ const guarding = this.guardedTabbables().length > 0;
21457
+ if (this.tabGuardEl != null)
21458
+ this.tabGuardEl.tabIndex = guarding ? 0 : -1;
21459
+ // Inert for this key press, the panel is reached only through the guard, either way round. A
21460
+ // control in another floating layer, such as a nested popover's panel, may move focus back into it.
21461
+ const focused = deepActiveElement();
21462
+ if (guarding && !containsComposed$1(this.portalEl, focused) && !closest$1(FLOATING_LAYERS, focused !== null && focused !== void 0 ? focused : document)) {
21463
+ this.portalEl.inert = true;
21464
+ }
21465
+ };
21466
+ this.endTabKey = () => {
21467
+ this.tabDirection = null;
21468
+ this.releasePanel();
21469
+ };
21470
+ this.handleTabGuardFocus = (event) => {
21471
+ if (this.leavingPanel)
21472
+ return;
21473
+ // An inert panel's controls aren't tabbable, so the guard would find none to send focus to.
21474
+ this.releasePanel();
21475
+ const tabbables = this.guardedTabbables();
21476
+ // A Tab press says which end of the panel focus comes in at; without one, where it came from does.
21477
+ const from = event.relatedTarget;
21478
+ const backward = this.tabDirection != null ? this.tabDirection === 'backward' : from != null && this.isAfterPopover(from);
21479
+ const target = backward ? tabbables[tabbables.length - 1] : tabbables[0];
21480
+ // Focus can reach the guard without a Tab keydown here (from a frame, or assistive tech) after
21481
+ // the panel's controls are gone. The trigger is the nearest visible place for it.
21482
+ if (target == null)
21483
+ this.returnFocusToTrigger();
21484
+ else
21485
+ target.focus();
21486
+ };
21487
+ this.handleTabFromPanel = (event) => {
21488
+ if (event.key !== 'Tab' || event.defaultPrevented || this.tabGuardEl == null)
21489
+ return;
21490
+ const tabbables = this.guardedTabbables();
21491
+ const edge = event.shiftKey ? tabbables[0] : tabbables[tabbables.length - 1];
21492
+ if (edge == null || deepActiveElement() !== edge)
21493
+ return;
21494
+ this.leavePanel(edge, event.shiftKey);
21495
+ };
21496
+ this.releasePanel = () => {
21497
+ if (this.portalEl != null)
21498
+ this.portalEl.inert = false;
21499
+ };
21500
+ }
21501
+ openOnChanged() {
21502
+ this.pin();
21503
+ this.stopListeningForHover(this.triggerEl);
21504
+ this.stopListeningForHover(this.portalEl);
21505
+ // Out of the page, connectedCallback binds them when it comes back.
21506
+ if (!this.isComponentMounted)
21507
+ return;
21508
+ this.listenForHover(this.triggerEl);
21509
+ this.listenForHover(this.portalEl);
21510
+ }
21511
+ applyPadding() {
21512
+ if (this.portalEl != null)
21513
+ this.portalEl.style.padding = this.paddingToken();
21514
+ }
21515
+ paddingToken() {
21516
+ switch (this.padding) {
21517
+ case 'none':
21518
+ return 'var(--pine-dimension-none)';
21519
+ case 'xs':
21520
+ return 'var(--pine-dimension-xs)';
21521
+ case 'sm':
21522
+ return 'var(--pine-dimension-sm)';
21523
+ default:
21524
+ return 'var(--pine-dimension-md)';
21525
+ }
21128
21526
  }
21129
21527
  restorePlacementDefault(newValue) {
21130
21528
  this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
@@ -21134,8 +21532,6 @@ class PdsPopover {
21134
21532
  // Bind event handlers for cleanup
21135
21533
  this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
21136
21534
  this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
21137
- this.boundScrollHandler = this.handleScroll.bind(this);
21138
- this.boundResizeHandler = this.handleResize.bind(this);
21139
21535
  // Create portal element
21140
21536
  this.createPortal();
21141
21537
  this.hasLoaded = true;
@@ -21176,6 +21572,48 @@ class PdsPopover {
21176
21572
  // Skips values already in place, so the trigger observer's own callback doesn't loop.
21177
21573
  return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
21178
21574
  }
21575
+ listenForHover(el) {
21576
+ if (this.openOn !== 'hover' || el == null)
21577
+ return;
21578
+ el.addEventListener('pointerenter', this.handleHoverEnter);
21579
+ el.addEventListener('pointerleave', this.handleHoverLeave);
21580
+ el.addEventListener('focusout', this.handleHoverFocusOut);
21581
+ }
21582
+ stopListeningForHover(el) {
21583
+ if (el == null)
21584
+ return;
21585
+ el.removeEventListener('pointerenter', this.handleHoverEnter);
21586
+ el.removeEventListener('pointerleave', this.handleHoverLeave);
21587
+ el.removeEventListener('focusout', this.handleHoverFocusOut);
21588
+ }
21589
+ distanceToPanel({ clientX, clientY }) {
21590
+ const panel = this.portalEl.getBoundingClientRect();
21591
+ return Math.hypot(Math.max(panel.left - clientX, 0, clientX - panel.right), Math.max(panel.top - clientY, 0, clientY - panel.bottom));
21592
+ }
21593
+ /**
21594
+ * Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
21595
+ * manual one gives up Escape again, which it took only while hover held it.
21596
+ */
21597
+ pin() {
21598
+ var _a;
21599
+ this.clearHoverTimers();
21600
+ if (!this.hoverOpened)
21601
+ return;
21602
+ this.hoverOpened = false;
21603
+ if (this.popoverType === 'auto')
21604
+ return;
21605
+ this.forgetOpen();
21606
+ (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-pds-popover-open');
21607
+ document.removeEventListener('keydown', this.boundEscapeKeyHandler);
21608
+ }
21609
+ clearHoverTimers() {
21610
+ clearTimeout(this.hoverOpenTimer);
21611
+ clearTimeout(this.hoverCloseTimer);
21612
+ this.hoverOpenTimer = undefined;
21613
+ this.hoverCloseTimer = undefined;
21614
+ this.closeWhenFocusLeaves = false;
21615
+ document.removeEventListener('pointermove', this.handleMoveTowardPanel);
21616
+ }
21179
21617
  // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
21180
21618
  // disconnectedCallback tore down. Each step is a no-op when nothing was.
21181
21619
  connectedCallback() {
@@ -21185,17 +21623,19 @@ class PdsPopover {
21185
21623
  this.isComponentMounted = true;
21186
21624
  this.createPortal();
21187
21625
  (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
21626
+ this.listenForHover(this.triggerEl);
21188
21627
  this.observeTrigger();
21189
21628
  this.linkTriggerToPortal();
21190
21629
  // Still open after a move: the trigger moved, so the portal follows it, into the dialog it
21191
21630
  // is in now, if any.
21192
21631
  if (this.active) {
21193
21632
  this.placePortal();
21194
- requestAnimationFrame(() => this.handlePopoverPositioning());
21633
+ // autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
21634
+ this.addScrollAndResizeListeners();
21195
21635
  }
21196
21636
  }
21197
21637
  disconnectedCallback() {
21198
- var _a;
21638
+ var _a, _b;
21199
21639
  // Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
21200
21640
  // already back in the page. Its portal is outside the popover, so it stays open, with focus
21201
21641
  // where it was; connectedCallback moves it to follow the popover.
@@ -21210,6 +21650,7 @@ class PdsPopover {
21210
21650
  this.restorePortalContent();
21211
21651
  this.active = false;
21212
21652
  this.linkTriggerToPortal();
21653
+ this.emitOpenEvent();
21213
21654
  this.pdsPopoverClose.emit({
21214
21655
  componentId: this.componentId,
21215
21656
  popoverType: this.popoverType,
@@ -21219,36 +21660,27 @@ class PdsPopover {
21219
21660
  if (this.triggerEl != null) {
21220
21661
  this.triggerEl.removeEventListener('click', this.handleTriggerClick);
21221
21662
  }
21663
+ this.stopListeningForHover(this.triggerEl);
21222
21664
  (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
21223
21665
  this.triggerObserver = null;
21224
21666
  // Clean up all event listeners
21225
21667
  this.removeLightDismissListeners();
21226
21668
  this.removeScrollAndResizeListeners();
21227
21669
  document.removeEventListener('submit', this.handleSubmitFromPanel, true);
21228
- // Clear any pending debounce timers
21229
- this.clearDebounceTimers();
21670
+ document.removeEventListener('keydown', this.syncTabGuard, true);
21671
+ (_b = this.tabGuardEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('tabindex');
21672
+ this.clearHoverTimers();
21673
+ this.hoverOpened = false;
21230
21674
  // Remove portal from DOM
21231
21675
  this.removePortal();
21232
21676
  }
21233
- /**
21234
- * Clears any pending debounce timers
21235
- */
21236
- clearDebounceTimers() {
21237
- if (this.scrollDebounceTimer !== null) {
21238
- clearTimeout(this.scrollDebounceTimer);
21239
- this.scrollDebounceTimer = null;
21240
- }
21241
- if (this.resizeDebounceTimer !== null) {
21242
- clearTimeout(this.resizeDebounceTimer);
21243
- this.resizeDebounceTimer = null;
21244
- }
21245
- }
21246
21677
  createPortal() {
21247
21678
  var _a;
21248
21679
  if (this.portalEl !== null)
21249
21680
  return;
21250
21681
  this.portalEl = document.createElement('div');
21251
21682
  this.portalEl.className = 'pds-popover';
21683
+ panelOwners.set(this.portalEl, this);
21252
21684
  // Apply all styles inline since portal is outside shadow DOM
21253
21685
  this.portalEl.style.position = 'fixed';
21254
21686
  this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
@@ -21260,7 +21692,7 @@ class PdsPopover {
21260
21692
  this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
21261
21693
  this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
21262
21694
  this.portalEl.style.margin = 'var(--pine-dimension-none)';
21263
- this.portalEl.style.padding = 'var(--pine-dimension-md)';
21695
+ this.portalEl.style.padding = this.paddingToken();
21264
21696
  // Generate unique ID
21265
21697
  if (!this.componentId) {
21266
21698
  (_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
@@ -21274,6 +21706,8 @@ class PdsPopover {
21274
21706
  // Add global focus styles to match Pine design system
21275
21707
  // This is done after appending to ensure it's part of the document and can access CSS variables
21276
21708
  this.addPortalFocusStyles();
21709
+ this.listenForHover(this.portalEl);
21710
+ this.portalEl.addEventListener('keydown', this.handleTabFromPanel);
21277
21711
  }
21278
21712
  /**
21279
21713
  * Adds Pine design system focus styles and dark mode border to the portal element
@@ -21401,27 +21835,40 @@ class PdsPopover {
21401
21835
  // Update portal content with latest slot content
21402
21836
  this.updatePortalContent();
21403
21837
  // Show portal. The attribute tells a modal around it that this popover takes Escape first; only
21404
- // an auto popover listens for Escape.
21405
- if (this.popoverType === 'auto')
21838
+ // an auto popover, or one hover opened, listens for Escape.
21839
+ if (this.popoverType === 'auto' || this.hoverOpened)
21406
21840
  this.portalEl.setAttribute('data-pds-popover-open', '');
21407
21841
  this.portalEl.style.display = 'block';
21408
21842
  this.portalEl.style.opacity = '1';
21409
21843
  this.portalEl.style.visibility = 'visible';
21410
- // Position the popover
21411
- requestAnimationFrame(() => {
21412
- if (!this.isComponentMounted)
21413
- return;
21414
- this.handlePopoverPositioning();
21415
- });
21416
- // Add scroll and resize listeners for repositioning (always)
21844
+ // Position the popover now, and again whenever its trigger or the page moves or resizes
21417
21845
  this.addScrollAndResizeListeners();
21418
21846
  document.addEventListener('submit', this.handleSubmitFromPanel, true);
21419
- // Add document listeners for light dismiss and escape key (auto type only)
21847
+ document.addEventListener('keydown', this.syncTabGuard, true);
21848
+ // Add document listeners for light dismiss and escape key (auto type only), or for the escape
21849
+ // key alone while hover holds a manual popover open
21420
21850
  if (this.popoverType === 'auto') {
21421
- openAutoPopovers.push(this);
21851
+ popoversTakingEscape.push(this);
21422
21852
  this.addLightDismissListeners();
21423
21853
  }
21424
- // Emit open event
21854
+ else if (this.hoverOpened) {
21855
+ popoversTakingEscape.push(this);
21856
+ document.addEventListener('keydown', this.boundEscapeKeyHandler);
21857
+ }
21858
+ // Emit open event once the panel is positioned, with the side it took already on it. A reconnect, a
21859
+ // trigger swap or another show() can start a newer run meanwhile, which drops this one, so wait for the latest.
21860
+ this.openEventPending = true;
21861
+ let positioning;
21862
+ do {
21863
+ positioning = this.positioning;
21864
+ await positioning;
21865
+ } while (positioning !== this.positioning);
21866
+ this.emitOpenEvent();
21867
+ }
21868
+ emitOpenEvent() {
21869
+ if (!this.openEventPending)
21870
+ return;
21871
+ this.openEventPending = false;
21425
21872
  this.pdsPopoverOpen.emit({
21426
21873
  componentId: this.componentId,
21427
21874
  popoverType: this.popoverType,
@@ -21431,9 +21878,12 @@ class PdsPopover {
21431
21878
  * Closes the popover programmatically
21432
21879
  */
21433
21880
  async hide() {
21881
+ var _a;
21882
+ this.clearHoverTimers();
21434
21883
  if (!this.active || !this.portalEl)
21435
21884
  return;
21436
21885
  this.active = false;
21886
+ this.hoverOpened = false;
21437
21887
  this.unwatchDialogClose();
21438
21888
  // Restoring the content drops its focus to the body, so check where focus is first. In a
21439
21889
  // shadow root, document.activeElement is only its host.
@@ -21444,6 +21894,7 @@ class PdsPopover {
21444
21894
  // Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
21445
21895
  this.portalEl.style.border = '';
21446
21896
  this.portalEl.removeAttribute('data-pds-popover-open');
21897
+ this.portalEl.removeAttribute('data-pds-popover-placement');
21447
21898
  this.portalEl.style.display = 'none';
21448
21899
  this.portalEl.style.opacity = '0';
21449
21900
  this.portalEl.style.visibility = 'hidden';
@@ -21457,8 +21908,11 @@ class PdsPopover {
21457
21908
  this.removeLightDismissListeners();
21458
21909
  this.removeScrollAndResizeListeners();
21459
21910
  document.removeEventListener('submit', this.handleSubmitFromPanel, true);
21460
- // Clear any pending timers
21461
- this.clearDebounceTimers();
21911
+ document.removeEventListener('keydown', this.syncTabGuard, true);
21912
+ (_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
21913
+ this.releasePanel();
21914
+ // Closed before its first position resolved, it still announces the open before the close.
21915
+ this.emitOpenEvent();
21462
21916
  // Emit close event
21463
21917
  this.pdsPopoverClose.emit({
21464
21918
  componentId: this.componentId,
@@ -21470,10 +21924,10 @@ class PdsPopover {
21470
21924
  */
21471
21925
  async toggle() {
21472
21926
  if (this.active) {
21473
- this.hide();
21927
+ await this.hide();
21474
21928
  }
21475
21929
  else {
21476
- this.show();
21930
+ await this.show();
21477
21931
  }
21478
21932
  }
21479
21933
  /**
@@ -21512,9 +21966,9 @@ class PdsPopover {
21512
21966
  this.portalEl.style.border = root instanceof ShadowRoot && closest$1('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
21513
21967
  }
21514
21968
  forgetOpen() {
21515
- const index = openAutoPopovers.indexOf(this);
21969
+ const index = popoversTakingEscape.indexOf(this);
21516
21970
  if (index >= 0)
21517
- openAutoPopovers.splice(index, 1);
21971
+ popoversTakingEscape.splice(index, 1);
21518
21972
  }
21519
21973
  /**
21520
21974
  * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
@@ -21557,19 +22011,62 @@ class PdsPopover {
21557
22011
  document.removeEventListener('click', this.boundClickOutsideHandler, true);
21558
22012
  document.removeEventListener('keydown', this.boundEscapeKeyHandler);
21559
22013
  }
22014
+ /**
22015
+ * The panel's controls that Tab reaches through the guard. None when the panel sits right after
22016
+ * the popover, in a dialog, where it's already next in the Tab order.
22017
+ */
22018
+ guardedTabbables() {
22019
+ if (this.portalEl == null || this.el.nextElementSibling === this.portalEl)
22020
+ return [];
22021
+ return tabbableIn(this.portalEl);
22022
+ }
22023
+ isAfterPopover(node) {
22024
+ if (containsComposed$1(this.el, node))
22025
+ return false;
22026
+ return isPosition(positionAcrossTrees(this.el, node), Node.DOCUMENT_POSITION_FOLLOWING);
22027
+ }
22028
+ /**
22029
+ * Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
22030
+ * Inert until then, the panel can't be where it lands.
22031
+ */
22032
+ leavePanel(edge, backward) {
22033
+ var _a, _b;
22034
+ this.leavingPanel = true;
22035
+ (_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.focus();
22036
+ this.leavingPanel = false;
22037
+ this.portalEl.inert = true;
22038
+ setTimeout(() => this.finishLeavingPanel(edge));
22039
+ // Last in another popover's panel, the guard hands the Tab on to that popover's own guard.
22040
+ const outer = panelOwners.get(closest$1('.pds-popover', this.el));
22041
+ const outerTabbables = (_b = outer === null || outer === void 0 ? void 0 : outer.guardedTabbables()) !== null && _b !== void 0 ? _b : [];
22042
+ if (!backward && outerTabbables[outerTabbables.length - 1] === this.tabGuardEl)
22043
+ outer.leavePanel(edge, false);
22044
+ }
22045
+ // With nowhere for the browser's Tab to go, focus would stay on the invisible guard.
22046
+ finishLeavingPanel(edge) {
22047
+ var _a;
22048
+ this.releasePanel();
22049
+ if (this.active && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.tabGuardEl)
22050
+ edge.focus();
22051
+ }
21560
22052
  /**
21561
22053
  * Adds scroll and resize listeners for repositioning
21562
22054
  */
21563
22055
  addScrollAndResizeListeners() {
21564
- window.addEventListener('scroll', this.boundScrollHandler, true);
21565
- window.addEventListener('resize', this.boundResizeHandler);
22056
+ this.removeScrollAndResizeListeners();
22057
+ if (this.triggerEl == null || this.portalEl == null)
22058
+ return;
22059
+ this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
22060
+ this.positioning = this.handlePopoverPositioning().catch(error => console.warn('pds-popover: failed to position the panel', error));
22061
+ });
21566
22062
  }
21567
22063
  /**
21568
22064
  * Removes scroll and resize listeners
21569
22065
  */
21570
22066
  removeScrollAndResizeListeners() {
21571
- window.removeEventListener('scroll', this.boundScrollHandler, true);
21572
- window.removeEventListener('resize', this.boundResizeHandler);
22067
+ var _a;
22068
+ (_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
22069
+ this.stopAutoUpdate = null;
21573
22070
  }
21574
22071
  /**
21575
22072
  * Handles clicks outside the popover for light dismiss (auto type only)
@@ -21623,7 +22120,7 @@ class PdsPopover {
21623
22120
  return;
21624
22121
  // Like the native Popover API, Escape closes only the top popover: the last one opened that
21625
22122
  // it applies to. Every open popover hears it, so each checks whether it's that one.
21626
- const top = [...openAutoPopovers].reverse().find(popover => popover.takesEscapeFrom(event));
22123
+ const top = [...popoversTakingEscape].reverse().find(popover => popover.takesEscapeFrom(event));
21627
22124
  if (top !== this)
21628
22125
  return;
21629
22126
  // Take the key, so the dialog or modal around it doesn't close too.
@@ -21633,125 +22130,47 @@ class PdsPopover {
21633
22130
  this.hide();
21634
22131
  }
21635
22132
  /**
21636
- * Handles scroll events to reposition the popover (debounced for performance)
21637
- */
21638
- handleScroll() {
21639
- if (!this.active)
21640
- return;
21641
- if (this.scrollDebounceTimer !== null) {
21642
- clearTimeout(this.scrollDebounceTimer);
21643
- }
21644
- this.scrollDebounceTimer = setTimeout(() => {
21645
- this.handlePopoverPositioning();
21646
- this.scrollDebounceTimer = null;
21647
- }, 10); // 10ms debounce for smooth repositioning
21648
- }
21649
- /**
21650
- * Handles resize events to reposition the popover (debounced for performance)
22133
+ * Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
22134
+ * room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
21651
22135
  */
21652
- handleResize() {
21653
- if (!this.active)
21654
- return;
21655
- if (this.resizeDebounceTimer !== null) {
21656
- clearTimeout(this.resizeDebounceTimer);
21657
- }
21658
- this.resizeDebounceTimer = setTimeout(() => {
21659
- this.handlePopoverPositioning();
21660
- this.resizeDebounceTimer = null;
21661
- }, 100); // 100ms debounce for resize
21662
- }
21663
- /**
21664
- * Positions the popover relative to its trigger element
21665
- */
21666
- handlePopoverPositioning() {
21667
- // Prevent repositioning loops
21668
- if (this.isRepositioning) {
21669
- return;
21670
- }
21671
- this.isRepositioning = true;
21672
- if (this.triggerEl == null || this.portalEl == null) {
21673
- this.isRepositioning = false;
22136
+ async handlePopoverPositioning() {
22137
+ // Counted before the guards, so a run still in flight is dropped even when this one can't position.
22138
+ const run = ++this.positioningRun;
22139
+ if (this.triggerEl == null || this.portalEl == null)
21674
22140
  return;
21675
- }
21676
- const triggerRect = this.triggerEl.getBoundingClientRect();
21677
- const popoverRect = this.portalEl.getBoundingClientRect();
21678
22141
  // Safety check: ensure trigger has valid dimensions (is rendered and visible)
21679
- if (triggerRect.width === 0 || triggerRect.height === 0) {
21680
- this.isRepositioning = false;
22142
+ const triggerRect = this.triggerEl.getBoundingClientRect();
22143
+ if (triggerRect.width === 0 || triggerRect.height === 0)
21681
22144
  return;
21682
- }
21683
- let top = 0;
21684
- let left = 0;
21685
- const offset = 8;
21686
- switch (this.placement) {
21687
- case 'top':
21688
- top = triggerRect.top - popoverRect.height - offset;
21689
- left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
21690
- break;
21691
- case 'top-start':
21692
- top = triggerRect.top - popoverRect.height - offset;
21693
- left = triggerRect.left;
21694
- break;
21695
- case 'top-end':
21696
- top = triggerRect.top - popoverRect.height - offset;
21697
- left = triggerRect.right - popoverRect.width;
21698
- break;
21699
- case 'right':
21700
- top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
21701
- left = triggerRect.right + offset;
21702
- break;
21703
- case 'right-start':
21704
- top = triggerRect.top;
21705
- left = triggerRect.right + offset;
21706
- break;
21707
- case 'right-end':
21708
- top = triggerRect.bottom - popoverRect.height;
21709
- left = triggerRect.right + offset;
21710
- break;
21711
- case 'bottom':
21712
- top = triggerRect.bottom + offset;
21713
- left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
21714
- break;
21715
- case 'bottom-start':
21716
- top = triggerRect.bottom + offset;
21717
- left = triggerRect.left;
21718
- break;
21719
- case 'bottom-end':
21720
- top = triggerRect.bottom + offset;
21721
- left = triggerRect.right - popoverRect.width;
21722
- break;
21723
- case 'left':
21724
- top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
21725
- left = triggerRect.left - popoverRect.width - offset;
21726
- break;
21727
- case 'left-start':
21728
- top = triggerRect.top;
21729
- left = triggerRect.left - popoverRect.width - offset;
21730
- break;
21731
- case 'left-end':
21732
- top = triggerRect.bottom - popoverRect.height;
21733
- left = triggerRect.left - popoverRect.width - offset;
21734
- break;
21735
- }
21736
- this.portalEl.style.top = `${top}px`;
21737
- this.portalEl.style.left = `${left}px`;
22145
+ const portal = this.portalEl;
22146
+ const { x: left, y: top, placement } = await computePosition(this.triggerEl, portal, {
22147
+ placement: this.placement,
22148
+ strategy: 'fixed',
22149
+ // With no room on either side, stay on the preferred side: the side that overflows less can still push
22150
+ // a tall panel's start above the viewport.
22151
+ middleware: [offset(8), flip({ fallbackStrategy: 'initialPlacement' }), shift({ padding: 8 })],
22152
+ platform: viewportPlatform,
22153
+ });
22154
+ if (!this.active || run !== this.positioningRun || portal !== this.portalEl)
22155
+ return;
22156
+ portal.setAttribute('data-pds-popover-placement', placement);
21738
22157
  // `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
21739
- // as a modal dialog does with its backdrop filter. Shift by however far it landed from the spot.
21740
- const placed = this.portalEl.getBoundingClientRect();
21741
- if (Math.abs(placed.top - top) > 0.5 || Math.abs(placed.left - left) > 0.5) {
21742
- this.portalEl.style.top = `${2 * top - placed.top}px`;
21743
- this.portalEl.style.left = `${2 * left - placed.left}px`;
21744
- }
21745
- // Reset the repositioning guard after a short delay
21746
- setTimeout(() => {
21747
- this.isRepositioning = false;
21748
- }, 16); // ~1 frame at 60fps
22158
+ // as a modal dialog does with its backdrop filter. Offset by however far that block's corner is from the viewport's.
22159
+ const origin = containingBlockOrigin(portal);
22160
+ portal.style.top = `${top - origin.top}px`;
22161
+ portal.style.left = `${left - origin.left}px`;
21749
22162
  }
21750
22163
  render() {
21751
- return (hAsync(Host, { key: 'da8a0c715df1199231b1265085f3f9ae0234032d', id: this.componentId }, hAsync("span", { key: 'f35023492399420829cec2e88556462f5ac1663e', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '38ebe92eebb87665467b3f92ff94dc8095450063', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: '8917930f4520544d14bbd68b4c7936dd60af19e3', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: '28d3f9112256edd95721a79a7072a9e35a3712bf', onSlotchange: this.handleContentSlotChange }))));
22164
+ return (hAsync(Host, { key: '85422eb7544a4795ce78b51684b7224a5d856a4e', id: this.componentId }, hAsync("span", { key: '6fe9c827ed4d46ca723d6013f296faf80ba31366', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '970d1974d2be1451e670a36e7d2ccdc5979595bb', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("span", { key: '0c76f76286a30d8e6e948bd0abab3317b3673aa6', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), hAsync("div", { key: '692c45e93899e74a3d5970f3a3625f6115ab63b0', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: 'f1566e0eb1eb08626f2a8285447702ce96b09f4d', onSlotchange: this.handleContentSlotChange }))));
21752
22165
  }
21753
22166
  get el() { return getElement(this); }
21754
22167
  static get watchers() { return {
22168
+ "openOn": [{
22169
+ "openOnChanged": 0
22170
+ }],
22171
+ "padding": [{
22172
+ "applyPadding": 0
22173
+ }],
21755
22174
  "placement": [{
21756
22175
  "restorePlacementDefault": 0
21757
22176
  }]
@@ -21762,9 +22181,11 @@ class PdsPopover {
21762
22181
  "$tagName$": "pds-popover",
21763
22182
  "$members$": {
21764
22183
  "popoverTargetAction": [1, "popover-target-action"],
22184
+ "openOn": [1, "open-on"],
21765
22185
  "popoverType": [1, "popover-type"],
21766
22186
  "componentId": [1, "component-id"],
21767
22187
  "maxWidth": [2, "max-width"],
22188
+ "padding": [1],
21768
22189
  "placement": [1537],
21769
22190
  "active": [32],
21770
22191
  "show": [64],
@@ -21813,7 +22234,7 @@ class PdsProgress {
21813
22234
  const normalizedFillColor = normalizeColorValue$1(this.fillColor);
21814
22235
  const hostClass = this.animated ? { 'is-animated': this.animated } : '';
21815
22236
  this.hostKeeper.record(hostClass);
21816
- return (hAsync(Host, { key: 'a224e1e9bc50433553ab8bf4b0d772f01148ee76', class: hostClass }, hAsync("div", { key: '261742044f3d68c204cbf640cc4447eb6d74df11', class: "pds-progress" }, hAsync("label", { key: 'd686bdc6ab450bf8c14dd56077525a3139593f46', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'c716e977a952a628aec600fa680aa9c3b8d0e996', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '44176a580b435f69993be4a60ee2e888b87e10fb', class: "pds-progress__percentage" }, this.percent, "%")));
22237
+ return (hAsync(Host, { key: '6d2151cdd1f65b33a7478e5ac12df711d8252d1f', class: hostClass }, hAsync("div", { key: '4a902c6c7d51fe8e8a778e1fa24bdbf95d625b1f', class: "pds-progress" }, hAsync("label", { key: 'c50955234a7eee05cdf47531e25b4413f206e416', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'c54ad90f7b3fcf3368afca4c5618949f1a370114', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '6b3e3f42f04a516ef7992d1f8bc967be432f55bb', class: "pds-progress__percentage" }, this.percent, "%")));
21817
22238
  }
21818
22239
  get el() { return getElement(this); }
21819
22240
  static get style() { return pdsProgressCss(); }
@@ -21848,7 +22269,7 @@ class PdsProperty {
21848
22269
  this.icon = 'star';
21849
22270
  }
21850
22271
  render() {
21851
- return (hAsync(Host, { key: 'd599b62be4bacf1d89afcc26b14fc93bdc9bb3a4', id: this.componentId }, hAsync("pds-box", { key: 'd7f80f6598615c761d672893c8acab09bd9ea33f', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '15a6a6545c2cd2332bd830451106b7b08adc39ff', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '4e5661563b99ec56189447faabcdd1ae631159b2' }))));
22272
+ return (hAsync(Host, { key: '198ffd747b7a84a6f58a1b072890fc8bd3ed93aa', id: this.componentId }, hAsync("pds-box", { key: 'be71f3d96efea0a45f357d888f71dbe5ad8b68d6', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '1a52407e00b158d5e6a515ad4b07ed3407d31f75', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '46ac5019b27bdd079c7853abeef8f7c240d19c2c' }))));
21852
22273
  }
21853
22274
  static get style() { return pdsPropertyCss(); }
21854
22275
  static get cmpMeta() { return {
@@ -21866,10 +22287,10 @@ class PdsProperty {
21866
22287
 
21867
22288
  const labelCss$3 = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
21868
22289
 
21869
- const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
22290
+ const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio span.sc-pds-radio{min-width:0;overflow-wrap:anywhere}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:hover{border-color:var(--pine-color-text)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-label-disabled);cursor:not-allowed}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:var(--pine-color-text-label-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled)}@media (forced-colors: active){.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){border-color:GrayText}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}.pds-radio--pill.sc-pds-radio-h .pds-radio__message.sc-pds-radio{-webkit-margin-start:0;margin-inline-start:0}`;
21870
22291
 
21871
22292
  /**
21872
- * @slot image - Custom image content to display instead of the default radio input
22293
+ * @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
21873
22294
  * @part image-container - The container for the image
21874
22295
  * @lightDom renders-markup
21875
22296
  */
@@ -21891,7 +22312,7 @@ class PdsRadio {
21891
22312
  */
21892
22313
  this.disabled = false;
21893
22314
  /**
21894
- * Adds a border around the radio component for better visual separation.
22315
+ * Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
21895
22316
  * @defaultValue false
21896
22317
  */
21897
22318
  this.hasBorder = false;
@@ -21905,6 +22326,11 @@ class PdsRadio {
21905
22326
  * @defaultValue false
21906
22327
  */
21907
22328
  this.required = false;
22329
+ /**
22330
+ * Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
22331
+ * @defaultValue default
22332
+ */
22333
+ this.variant = 'default';
21908
22334
  this.handleRadioChange = (e) => {
21909
22335
  if (this.disabled) {
21910
22336
  return;
@@ -21926,6 +22352,9 @@ class PdsRadio {
21926
22352
  hasImage() {
21927
22353
  return this._hasImage;
21928
22354
  }
22355
+ isPill() {
22356
+ return this.variant === 'pill';
22357
+ }
21929
22358
  classNames() {
21930
22359
  const classNames = [];
21931
22360
  if (this.invalid) {
@@ -21934,10 +22363,14 @@ class PdsRadio {
21934
22363
  if (this.disabled) {
21935
22364
  classNames.push('is-disabled');
21936
22365
  }
21937
- if (this.hasBorder) {
22366
+ // A pill is its own bordered shape, so has-border doesn't stack a card around it.
22367
+ if (this.hasBorder && !this.isPill()) {
21938
22368
  classNames.push('has-border');
21939
22369
  }
21940
- if (this.hasImage()) {
22370
+ if (this.isPill()) {
22371
+ classNames.push('pds-radio--pill');
22372
+ }
22373
+ if (this.hasImage() && !this.isPill()) {
21941
22374
  classNames.push('has-image');
21942
22375
  }
21943
22376
  return classNames.join(' ');
@@ -21967,13 +22400,14 @@ class PdsRadio {
21967
22400
  }
21968
22401
  render() {
21969
22402
  const renderLabelAndMessages = () => [
21970
- hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'ccd618855831bcee309e815f2cd2712fd4e8fe1f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), hAsync("span", { key: '2e372a880c28f48fb804bac2518208082c141fad', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
22403
+ hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'fdd83248666907fa25c5406cdedcd0e6f8d45f50', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() || this.isPill() ? 'visually-hidden' : '' }), hAsync("span", { key: '73166ffd57cdb1f3b9e2b61fe880216b23a6510b', class: this.hideLabel && !this.isPill() ? 'visually-hidden' : '' }, this.label)),
21971
22404
  this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
21972
- this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '889d502575f6a162f450b6b58d76a6f6f1c74e4b', icon: danger, size: "small" }), this.errorMessage))
22405
+ this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'e5bca81578382181b6fce61fa6830fd60e54234a', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
21973
22406
  ];
21974
22407
  const hostClass = this.classNames();
21975
22408
  this.hostKeeper.record(hostClass);
21976
- return (hAsync(Host, { key: '374003032b28407581a55f1fb0a304c49acf3c16', class: hostClass }, this.hasImage() && (hAsync("div", { key: '7eeb516267de1afcfa85fc7567999db488c2f4f5', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'a312fea06f0c015bffab3bb392ff04d4913fd1c0', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
22409
+ const showImage = this.hasImage() && !this.isPill();
22410
+ return (hAsync(Host, { key: '4cf39a988cc7642234ff62e7fa2f0d08b09e7d25', class: hostClass }, showImage && (hAsync("div", { key: '7a88d32f896ad4696ea46b13f9ef01e7df0a1c3e', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'eb8399263443d36ab91c0875602d0dc31f036058', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), showImage ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
21977
22411
  }
21978
22412
  get el() { return getElement(this); }
21979
22413
  static get style() { return labelCss$3() + pdsRadioCss(); }
@@ -21993,6 +22427,7 @@ class PdsRadio {
21993
22427
  "name": [1],
21994
22428
  "required": [4],
21995
22429
  "value": [1],
22430
+ "variant": [1],
21996
22431
  "_hasImage": [32]
21997
22432
  },
21998
22433
  "$listeners$": undefined,
@@ -22165,13 +22600,13 @@ class PdsRadioGroup {
22165
22600
  render() {
22166
22601
  const gapValue = this.getGapValue();
22167
22602
  const ariaDescribedBy = this.getAriaDescribedBy();
22168
- return (hAsync(Host, { key: 'bf8063c1a99e272bb3f6bc647998a6ef103f8a71', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
22603
+ return (hAsync(Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
22169
22604
  '--pds-radio-group-gap': gapValue,
22170
- } }, this.groupLabel && (hAsync("div", { key: '8564ed3f8f99cdc1a0e5b189aacc6960923eb5f7', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: '2309c9373790182cde030c1dbda88fa3bdcaaf12', class: {
22605
+ } }, this.groupLabel && (hAsync("div", { key: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', class: {
22171
22606
  'pds-radio-group__radios': true,
22172
22607
  'pds-radio-group__radios--row': this.direction === 'row',
22173
22608
  'pds-radio-group__radios--column': this.direction === 'column',
22174
- } }, hAsync("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'd242da328731e55fa52d8e624fdfc750bfa6cce4', icon: danger, size: "small" }), this.errorMessage))));
22609
+ } }, hAsync("slot", { key: '2d841cc69c35a4f9da933bbb33c1384ca343e077', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'a09bb9e739570c06dc1907cb4e2dceecca36f7d3', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'b8fe891cc4b8683d18c19b3b4ddb70212185b954', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '9a15d81d8303eeb5a928b96c760f6b15e536e0dc', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
22175
22610
  }
22176
22611
  get el() { return getElement(this); }
22177
22612
  static get watchers() { return {
@@ -22280,7 +22715,7 @@ class PdsRow {
22280
22715
  'min-height': this.minHeight,
22281
22716
  }));
22282
22717
  this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
22283
- return hAsync(Host, { key: '452882c1105868f5d392e7cb165311b1abc4a243', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
22718
+ return hAsync(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
22284
22719
  }
22285
22720
  get el() { return getElement(this); }
22286
22721
  static get style() { return pdsRowCss(); }
@@ -22310,6 +22745,25 @@ const labelCss$2 = () => `:host{display:inline-block}:host([aria-disabled=true])
22310
22745
 
22311
22746
  const pdsSelectCss = () => `:host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:calc(var(--pine-z-index-raised) - 1)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
22312
22747
 
22748
+ /** The tags of an option list in order, optgroup contents included: equal shapes can be patched in place. */
22749
+ const shapeOf = (items) => items.map((item) => item.tagName + (item.tagName === 'OPTGROUP' ? `(${shapeOf(Array.from(item.children))})` : '')).join();
22750
+ /** Brings an existing option or optgroup up to date with its copy, keeping the element itself. */
22751
+ const patchInPlace = (target, copy) => {
22752
+ Array.from(target.attributes).forEach(({ name }) => {
22753
+ if (!copy.hasAttribute(name))
22754
+ target.removeAttribute(name);
22755
+ });
22756
+ Array.from(copy.attributes).forEach(({ name, value }) => {
22757
+ if (target.getAttribute(name) !== value)
22758
+ target.setAttribute(name, value);
22759
+ });
22760
+ if (copy.tagName === 'OPTGROUP') {
22761
+ Array.from(copy.children).forEach((child, index) => patchInPlace(target.children[index], child));
22762
+ }
22763
+ else if (target.textContent !== copy.textContent) {
22764
+ target.textContent = copy.textContent;
22765
+ }
22766
+ };
22313
22767
  /**
22314
22768
  * @slot action - Content to be displayed in the label area, typically for help icons or links
22315
22769
  */
@@ -22321,6 +22775,9 @@ class PdsSelect {
22321
22775
  this.pdsFocus = createEvent(this, "pdsFocus");
22322
22776
  this.pdsKeyDown = createEvent(this, "pdsKeyDown");
22323
22777
  this._type = 'select-one';
22778
+ this.optionObserver = null;
22779
+ this.optionSyncFrame = null;
22780
+ this.hasHadOptions = false;
22324
22781
  this.hostKeeper = new HostStylingKeeper();
22325
22782
  /**
22326
22783
  * Indicates whether or not the select field is disabled.
@@ -22337,6 +22794,16 @@ class PdsSelect {
22337
22794
  * @defaultValue false
22338
22795
  */
22339
22796
  this.required = false;
22797
+ /**
22798
+ * Whether a mutation is inside an option or optgroup. The host's own attributes and children
22799
+ * (top-level adds and removes reach `slotchange`) and the action slot's content are not.
22800
+ */
22801
+ this.touchesOption = ({ target }) => {
22802
+ // Not just TEXT_NODE: characterData also reports comment nodes, and a Comment has no
22803
+ // .closest() — treating anything non-Element as a Text node crashed on one.
22804
+ const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
22805
+ return target !== this.el && (element === null || element === void 0 ? void 0 : element.closest('option, optgroup')) != null;
22806
+ };
22340
22807
  /**
22341
22808
  * Emits an event on input change.
22342
22809
  */
@@ -22363,25 +22830,47 @@ class PdsSelect {
22363
22830
  this.pdsKeyDown.emit(ev);
22364
22831
  };
22365
22832
  /**
22366
- * Handles the change event for the slot element.
22367
- * This method is triggered when the slot content changes.
22368
- * It updates the inner HTML of the select element by cloning and appending
22369
- * the assigned <option> elements from the slot.
22833
+ * Copies the slotted <option> and <optgroup> elements into the inner select, then
22834
+ * reselects the current value. Runs on `slotchange` and when a slotted option changes
22835
+ * (see startOptionSync).
22836
+ *
22837
+ * Nothing happens when the copies match what the select already holds. When only text or
22838
+ * attributes changed, the select's own options are updated in place rather than replaced,
22839
+ * so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
22840
+ * screen reader keeps its place. Selecting programmatically fires no change event, so a
22841
+ * copy never emits `pdsSelectChange`.
22370
22842
  */
22371
22843
  this.handleSlotChange = () => {
22372
- const slot = this.slotContainer.querySelector('slot');
22373
- this.selectEl.innerHTML = '';
22374
- const assignedElements = slot.assignedElements({ flatten: true });
22375
- assignedElements.forEach((item) => {
22376
- if (['OPTION', 'OPTGROUP'].includes(item.tagName)) {
22377
- const clonedItem = item.cloneNode(true);
22378
- if (clonedItem.tagName === 'OPTION' && clonedItem.value === this.value) {
22379
- clonedItem.selected = true;
22380
- }
22381
- this.selectEl.appendChild(clonedItem);
22382
- }
22383
- });
22844
+ var _a;
22845
+ const slot = (_a = this.slotContainer) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
22846
+ if (slot === null || slot === undefined || this.selectEl === undefined)
22847
+ return;
22848
+ const copies = slot.assignedElements({ flatten: true })
22849
+ .filter((item) => ['OPTION', 'OPTGROUP'].includes(item.tagName))
22850
+ .map((item) => item.cloneNode(true));
22851
+ const current = Array.from(this.selectEl.children);
22852
+ // The very first copy populates an empty select, where falling back to the first option (like
22853
+ // a native select) is correct; the no-match blank state is for options changing under a value
22854
+ // that was already showing selected. Tracked separately from the select's current emptiness:
22855
+ // an async reload that clears options before the next set lands would otherwise look like a
22856
+ // first render again, and the no-match state must still apply once that next set arrives.
22857
+ const hadOptions = this.hasHadOptions;
22858
+ if (copies.length > 0)
22859
+ this.hasHadOptions = true;
22860
+ const markup = (items) => items.map((item) => item.outerHTML).join('');
22861
+ if (markup(copies) === markup(current))
22862
+ return;
22863
+ if (shapeOf(copies) === shapeOf(current)) {
22864
+ copies.forEach((copy, index) => patchInPlace(current[index], copy));
22865
+ }
22866
+ else {
22867
+ this.selectEl.innerHTML = '';
22868
+ copies.forEach((copy) => this.selectEl.appendChild(copy));
22869
+ }
22384
22870
  this.updateSelectedOption();
22871
+ if (hadOptions)
22872
+ this.showNoSelectionWithoutMatch();
22873
+ this.updateFormValue();
22385
22874
  };
22386
22875
  }
22387
22876
  /**
@@ -22410,9 +22899,16 @@ class PdsSelect {
22410
22899
  }
22411
22900
  // Expose type property on the element instance to match native form element behavior
22412
22901
  exposeTypeProperty(this.el, () => this._type);
22902
+ // Reconnected after a move: componentDidLoad won't run again, and options may have changed
22903
+ // while it was out of the document.
22904
+ if (this.selectEl !== undefined) {
22905
+ this.startOptionSync();
22906
+ this.scheduleOptionSync();
22907
+ }
22413
22908
  }
22414
22909
  disconnectedCallback() {
22415
22910
  this.hostKeeper.disconnect();
22911
+ this.stopOptionSync();
22416
22912
  }
22417
22913
  componentWillLoad() {
22418
22914
  // Set initial type based on multiple prop
@@ -22422,6 +22918,43 @@ class PdsSelect {
22422
22918
  componentDidLoad() {
22423
22919
  // Set initial form value
22424
22920
  this.updateFormValue();
22921
+ // Stencil holds componentDidLoad until the shadow root's pds-icon has loaded, so options can
22922
+ // change between the first slotchange copy and here with nothing observing yet — the same gap
22923
+ // the reconnect path closes with a catch-up sync.
22924
+ this.startOptionSync();
22925
+ this.scheduleOptionSync();
22926
+ }
22927
+ /**
22928
+ * Keeps the inner select in step with the slotted options. `slotchange` only fires when
22929
+ * top-level options are added or removed, so an option's text, value or disabled state
22930
+ * changing, or an option added inside an optgroup, would otherwise never reach the select.
22931
+ * Changes are batched into one copy per animation frame.
22932
+ */
22933
+ startOptionSync() {
22934
+ if (this.optionObserver !== null || typeof MutationObserver === 'undefined' || !this.el.isConnected)
22935
+ return;
22936
+ this.optionObserver = new MutationObserver((mutations) => {
22937
+ if (mutations.some(this.touchesOption))
22938
+ this.scheduleOptionSync();
22939
+ });
22940
+ this.optionObserver.observe(this.el, { childList: true, subtree: true, attributes: true, characterData: true });
22941
+ }
22942
+ scheduleOptionSync() {
22943
+ if (this.optionSyncFrame !== null)
22944
+ return;
22945
+ this.optionSyncFrame = requestAnimationFrame(() => {
22946
+ this.optionSyncFrame = null;
22947
+ this.handleSlotChange();
22948
+ });
22949
+ }
22950
+ stopOptionSync() {
22951
+ var _a;
22952
+ (_a = this.optionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
22953
+ this.optionObserver = null;
22954
+ if (this.optionSyncFrame !== null) {
22955
+ cancelAnimationFrame(this.optionSyncFrame);
22956
+ this.optionSyncFrame = null;
22957
+ }
22425
22958
  }
22426
22959
  /**
22427
22960
  * Updates the selected option in the select element based on the current value.
@@ -22447,6 +22980,19 @@ class PdsSelect {
22447
22980
  });
22448
22981
  }
22449
22982
  }
22983
+ /**
22984
+ * After a copy that changes an existing option set, a value whose option was renamed or removed
22985
+ * has nothing to select. Like a native select, show nothing selected rather than the first
22986
+ * option; the value itself is kept, with no change event.
22987
+ */
22988
+ showNoSelectionWithoutMatch() {
22989
+ var _a;
22990
+ const wanted = [].concat((_a = this.value) !== null && _a !== void 0 ? _a : []).filter((value) => value !== '');
22991
+ const options = Array.from(this.selectEl.options);
22992
+ if (wanted.length > 0 && !options.some((option) => wanted.includes(option.value))) {
22993
+ this.selectEl.selectedIndex = -1;
22994
+ }
22995
+ }
22450
22996
  getHelperMessage() {
22451
22997
  return this.helperMessage && (hAsync("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
22452
22998
  }
@@ -22552,7 +23098,7 @@ class PdsSelect {
22552
23098
  'has-action': hasAction && !this.hideLabel ? 'true' : null,
22553
23099
  };
22554
23100
  this.hostKeeper.record(hostClass, {}, hostAttributes);
22555
- return (hAsync(Host, Object.assign({ key: '343ed671e67dd1d6f9eb284b07e06d59877c64e9', class: hostClass }, hostAttributes), hAsync("div", { key: '650aed0869b02f658feb16ee99f17e1cd22e5a8e', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '74739461acbea33c92279ec8ec9042d6af1773c1', class: "pds-select__label-wrapper" }, hAsync("label", { key: '1ad96ffd243000358edfbd79054ee770e1ba97d3', htmlFor: this.componentId }, hAsync("span", { key: 'b832868db4f9cd4fd2f8313054d2e96e106189ab', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'e83c1a1a0a5646fc8abf9e50bc374f52b56be773', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: 'a34880120b88124b5122350856d023368f96abf7', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'df6abaf6a630761a32b263813181ff3453757e0d', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: 'f9197284ef9965d693242a652b583f48bc3d7097', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
23101
+ return (hAsync(Host, Object.assign({ key: '37c2c3b72c13c3c4e3d81da29ddddc86a7300d70', class: hostClass }, hostAttributes), hAsync("div", { key: 'ff1c311dca6fc25813e5473d0e8daff4dc12e807', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '77db17b0beb1fefabb26ffe1df0e5f03a0515996', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'c4dcba3bc148aada4a3afcca0a30c64a630e441f', htmlFor: this.componentId }, hAsync("span", { key: '0fc3424ec1961d3b216c0fabb80cb8acee37f1a2', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'ff343a6653ccd081021cb669a428c780d0162e8b', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: '86fed1916c3b13d079492581a7c6bb621012a4a5', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'abe06eeef5be13b716573c8a806d6b7795edc65f', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '68c958666828f77114f2edeedb667070106046fa', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
22556
23102
  }
22557
23103
  static get formAssociated() { return true; }
22558
23104
  get el() { return getElement(this); }
@@ -25311,7 +25857,7 @@ class PdsSortable {
25311
25857
  render() {
25312
25858
  const classNames = this.classNames();
25313
25859
  this.hostKeeper.record(classNames);
25314
- return (hAsync(Host, { key: 'a0e532d31561748b4632a6be9163562f990af804', class: classNames, id: this.componentId }, hAsync("slot", { key: 'd1b0defb683f841e6708374fff4bf62eb7fd5080' })));
25860
+ return (hAsync(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, hAsync("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
25315
25861
  }
25316
25862
  get el() { return getElement(this); }
25317
25863
  static get watchers() { return {
@@ -25386,7 +25932,7 @@ class PdsSortableItem {
25386
25932
  }
25387
25933
  render() {
25388
25934
  this.hostKeeper.record('pds-sortable-item');
25389
- return (hAsync(Host, { key: '2065ccb474ae4b7032edc3c37aa6855f3048909d', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: '32385cc94837a3d0bc1c496615135c79274afe35', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: 'ea94e28b2867aa20622ca073dc31d3b4a11eebbb', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: 'fb18aa90be0b8fa3832a5dd2b02a7b571205341f' }), this.enableActions && (hAsync("div", { key: '4c6e59d77a7b2183552533a544f4a70ce0cc7011', class: "pds-sortable-item__actions" }, hAsync("slot", { key: '497b1ff88436175d9365a28032e109b6fa118e44', name: "sortable-item-actions" })))));
25935
+ return (hAsync(Host, { key: 'c6b5402a54179d4e7caed3cc81874977d2d6c677', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: 'cd2d85286bcb3e47f76e4571d609d91f932b717b', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '97e2e155283d86921f40198637abf596d6cc86e0', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: '99743c8e5be45ca76f276b47688843a621c8ded5' }), this.enableActions && (hAsync("div", { key: '7cb1a8b99658d72067ccae036b2bc0276b8cf02e', class: "pds-sortable-item__actions" }, hAsync("slot", { key: 'f9b3b7d1cc10ac077f65ec2cafac7a372deae511', name: "sortable-item-actions" })))));
25390
25936
  }
25391
25937
  get el() { return getElement(this); }
25392
25938
  static get style() { return pdsSortableItemCss(); }
@@ -25521,9 +26067,9 @@ class PdsSwitch {
25521
26067
  const hostClass = this.switchClassNames();
25522
26068
  const ariaDisabled = this.disabled ? 'true' : null;
25523
26069
  this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
25524
- return (hAsync(Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
25525
- hAsync("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
25526
- hAsync("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f49caaba976579eb5588e442499595c7dba7ceff', icon: danger, size: "small" }), this.errorMessage)));
26070
+ return (hAsync(Host, { key: '0fa5beb83232b381ea5cdfa82d143afcb69eb4e1', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: 'df5d08344d11cb334ef69a432d1c02557caacc96', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '6908b328f0e2da2085ffbffe0d1e4d09f2c6fd86', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '1108ab3eae63a371f9e9b80f011211cba8287b67', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: '8aac1d9b81deab92e1e27c06debf2b87bc697874', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
26071
+ hAsync("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
26072
+ hAsync("div", { key: '42ad678cc2179b4a26ed09151de41c2293b98011', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '8dc0b29b522247762010edb3b1e8e5fc8c8788fa', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
25527
26073
  }
25528
26074
  static get formAssociated() { return true; }
25529
26075
  get el() { return getElement(this); }
@@ -25947,7 +26493,7 @@ class PdsTableBody {
25947
26493
  registerInstance(this, hostRef);
25948
26494
  }
25949
26495
  render() {
25950
- return (hAsync(Host, { key: '817532e93c8f91ef64cd0f90aa6c4372c3b7d83f', role: "rowgroup", part: "body" }, hAsync("slot", { key: '296ba876c6716e85252a06008bd55d59624223e3' })));
26496
+ return (hAsync(Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
25951
26497
  }
25952
26498
  static get style() { return pdsTableBodyCss(); }
25953
26499
  static get cmpMeta() { return {
@@ -26105,11 +26651,11 @@ class PdsTableCell {
26105
26651
  return classNames.join(' ');
26106
26652
  }
26107
26653
  render() {
26108
- return (hAsync(Host, { key: 'de70a1002cc46e204f87349069b86ca43aa2129a', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
26654
+ return (hAsync(Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
26109
26655
  this.tableRef.fixedColumn &&
26110
26656
  this.tableRef.selectable
26111
26657
  ? { '--fixed-cell-position': '40px' }
26112
- : {} }, hAsync("slot", { key: '5e2b3308291e480323d7a1ac0575035758fb3695' })));
26658
+ : {} }, hAsync("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
26113
26659
  }
26114
26660
  get hostElement() { return getElement(this); }
26115
26661
  static get watchers() { return {
@@ -26178,7 +26724,7 @@ class PdsTableHead {
26178
26724
  }
26179
26725
  }
26180
26726
  render() {
26181
- return (hAsync(Host, { key: 'de3faae735e90f5fde1258b5acb826f5f9dbd170', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: 'e590e57c8b37ec0ad18e96077401c4692bbd45a4', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: '44ca7eda63185672939909e121a86e6502080a7d', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: '0671df85d7989cff7266bfd3d1b4d62b332d2e81' })));
26727
+ return (hAsync(Host, { key: '4fb8d7bf4a9b0bce672208651c0600fbc94214af', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '20b86146540208178bd63bd136e14e5534c7ec76', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: 'fa8054dd7ee36c6401e9eeb9c962a820d3a02558', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: 'a0000270ae6ed1cab1c6e802ccc53ba0de3e54c9' })));
26182
26728
  }
26183
26729
  get hostElement() { return getElement(this); }
26184
26730
  static get style() { return pdsTableHeadCss(); }
@@ -26399,11 +26945,11 @@ class PdsTableHeadCell {
26399
26945
  return classNames.join(' ');
26400
26946
  }
26401
26947
  render() {
26402
- return (hAsync(Host, { key: '13de42d136c5b037cd1545cd5b789b4660e23b87', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
26948
+ return (hAsync(Host, { key: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
26403
26949
  this.tableRef.fixedColumn &&
26404
26950
  this.tableRef.selectable
26405
26951
  ? { '--fixed-cell-position': '40px' }
26406
- : {} }, hAsync("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: 'cba838fa029b280561676c2b57af7f8f00055511', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
26952
+ : {} }, hAsync("slot", { key: '7aff5994fe4c5250ce83516960183dbd9ffa9c69' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '0a7b99ab2c56ea0cfb3aa6f810bf802422a29bef', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
26407
26953
  }
26408
26954
  get hostElement() { return getElement(this); }
26409
26955
  static get style() { return pdsTableHeadCellCss(); }
@@ -26569,7 +27115,7 @@ class PdsTableRow {
26569
27115
  }
26570
27116
  }
26571
27117
  render() {
26572
- return (hAsync(Host, { key: '5323521abc5c2464299cf77520fb38ec81297866', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: 'eb94dd282f885d3466b6177b2454cbcc4f932466', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: '222eaaedd4bebddc18cebf01bf4da81004773a96', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '010f222fa02b1809ff818f7a030c2a12fc3e3abb' })));
27118
+ return (hAsync(Host, { key: 'dc956e7253971bdadc003448822a83953ed4658f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '1f119c5036ab1d27c5138106968a40492222b6f3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: 'f7a3534eceeabe478fb85e6e476f814e03988cfb', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '287c0fe2c39bac5df7a977e31290aeddd0cd46b3' })));
26573
27119
  }
26574
27120
  get hostElement() { return getElement(this); }
26575
27121
  static get style() { return pdsTableRowCss(); }
@@ -26623,7 +27169,7 @@ class PdsTabpanel {
26623
27169
  // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
26624
27170
  // that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
26625
27171
  this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
26626
- return (hAsync(Host, { key: '5d867e31d0f5f14e18f1c81035991c90bb5fe529', slot: "tabpanels", class: hostClass || undefined }, hAsync("div", { key: '255d37a73089904cfb170cd89f7b829756f6295f', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '714d3d0cf0fc6173e243a2b077d9b9918ae4acf9' }))));
27172
+ return (hAsync(Host, { key: 'b649c0f9e0c103a2d7dad43b7db0a092194b4ba0', slot: "tabpanels", class: hostClass || undefined }, hAsync("div", { key: 'a578722d33f7d04726185e393771838870833984', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '2ebe5745c444563333ee175bb3a1f7401ba77ec1' }))));
26627
27173
  }
26628
27174
  get el() { return getElement(this); }
26629
27175
  static get style() { return pdsTabpanelCss(); }
@@ -26922,7 +27468,7 @@ class PdsTabs {
26922
27468
  // Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
26923
27469
  // it is a prop change, not a strip.
26924
27470
  this.hostKeeper.record(hostClass);
26925
- return (hAsync(Host, { key: '91a9a5cf4348b73ef5ec21430db20468fb67906c', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: 'f0ec002e513f3e91956e905c23e35dae0e6328ad', name: "tabpanels" })));
27471
+ return (hAsync(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
26926
27472
  }
26927
27473
  get el() { return getElement(this); }
26928
27474
  static get style() { return pdsTabsCss(); }
@@ -27056,7 +27602,7 @@ class PdsText {
27056
27602
  ? `pds-text--decoration-${this.decoration}`
27057
27603
  : ''}
27058
27604
  `;
27059
- return (hAsync(Tag, { key: '6460288f1d395080a39aec214e55cab87fdaec9f', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'a8be0d96f72d8ee44288d7c8615155dc68d92663' })));
27605
+ return (hAsync(Tag, { key: 'b79a6e67f11024cb025cb26bbf77231547bd63a4', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'ae1f8ca39899894541eac3c07fb21ead4ab98f40' })));
27060
27606
  }
27061
27607
  get el() { return getElement(this); }
27062
27608
  static get watchers() { return {
@@ -27402,10 +27948,10 @@ class PdsTextarea {
27402
27948
  }
27403
27949
  render() {
27404
27950
  const value = this.getValue();
27405
- return (hAsync(Host, { key: '5933dab0c3cd25b1cf2f6851ece8e8064bc7f3b9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '4f1752514d8e5b0f0e3439515cb9e5f043607da1', class: "pds-textarea" }, this.label &&
27406
- hAsync("div", { key: 'd4e6df0b381d781b70eeae72ff2f0e9428c0d901', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '747d82067eb571d02840cfd981865821099f288b', htmlFor: this.componentId }, hAsync("span", { key: 'bfab6e8ede66d0169dd020b7dd97e125aba417b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: 'a18611c03270e7491c1af69f931419c832192c06', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '868382c7b04a4e59c0daa9d98afcdc9048f6224f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
27407
- hAsync("p", { key: 'dcb36f21443d2a782c25b7c29c4ce6215f3b212b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
27408
- hAsync("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'd93dce10d9d9db5815ac5f331848940aed735ba0', icon: danger, size: "small" }), this.errorMessage))));
27951
+ return (hAsync(Host, { key: '76e445d135191df3090620f2c2eaf6ed8d7eb9cb', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '836815333b0ca925bc205a4b8b25086fe82fcedc', class: "pds-textarea" }, this.label &&
27952
+ hAsync("div", { key: 'e8633457c994d3387ec277fd9945afb2c653d27a', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '977bb1c171b68242ab06e01ef94ecc4e4cb26880', htmlFor: this.componentId }, hAsync("span", { key: 'ef87433d6524296b3153e8d04e6406c9287e3f2e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '92952c76f5f4a87da4953f792a9a5589d7765451', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'a61f39d0e299cb6b3e6d1beed37805ad9a71b579', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
27953
+ hAsync("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
27954
+ hAsync("p", { key: 'f95f566b79215a4a128fe92c02be244219f843e5', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '08f649e4b32551d59d60b978262cd7beaa99e08d', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
27409
27955
  }
27410
27956
  static get formAssociated() { return true; }
27411
27957
  get el() { return getElement(this); }
@@ -27453,7 +27999,7 @@ class PdsTextarea {
27453
27999
  }; }
27454
28000
  }
27455
28001
 
27456
- const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}`;
28002
+ const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
27457
28003
 
27458
28004
  /** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
27459
28005
  const TOAST_DISMISS_ANIMATION_MS = 300;
@@ -27575,17 +28121,23 @@ class PdsToast {
27575
28121
  if (this.type === 'loading') {
27576
28122
  return (hAsync("div", { class: "pds-toast__loader" }, hAsync("svg", { class: "pds-toast__loader-spinner", viewBox: "25 25 50 50", "aria-hidden": "true" }, hAsync("circle", { class: "pds-toast__loader-path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }))));
27577
28123
  }
27578
- // Return icon if provided, otherwise undefined (which renders as nothing)
27579
- return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
28124
+ // Decorative: inside role="alert" an icon name would be read out with the
28125
+ // message. Severity is announced as text instead (see severityLabel).
28126
+ return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
28127
+ }
28128
+ severityText() {
28129
+ var _a;
28130
+ return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
27580
28131
  }
27581
28132
  render() {
27582
- return (hAsync(Host, { key: '754a4583cefca47a3d3fea7dab036c06ea8aabcd', hidden: !this.isVisible }, hAsync("div", { key: '8ac294344ca459202c0883e724e09a4218342cc4', class: {
28133
+ const severity = this.severityText();
28134
+ return (hAsync(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, hAsync("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', class: {
27583
28135
  'pds-toast': true,
27584
28136
  [`pds-toast--${this.type}`]: this.type !== 'default',
27585
28137
  'pds-toast--animating-out': this.isAnimatingOut
27586
- }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: 'eaf615d41c138e2c73088d29bac9349f49a63ba7', class: "pds-toast__message" }, hAsync("slot", { key: '33973447154d80b016f5a7954b0473db03228379' })), this.dismissible && (hAsync("button", { key: 'e189834633e1e648282ee43633fd05e53ce38869', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
28138
+ }, role: "alert", "aria-live": "polite" }, this.renderIcon(), severity && hAsync("span", { key: 'f75fb422797082e99acb85432c1b50cf702d7afc', class: "visually-hidden" }, severity), hAsync("span", { key: '3d9f03d96dbda41c72d2c2cc492b1422928d573f', class: "pds-toast__message" }, hAsync("slot", { key: 'affc7e4cb592735ec396fa90a9405f25b389e4bd' })), this.dismissible && (hAsync("button", { key: '0c4ef459dda09b8a196eed7ee28383995d959b11', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
27587
28139
  this.dismiss();
27588
- }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '623a0e4d56e30781fb31bcd085511c17a4777edc', name: "remove" }))))));
28140
+ }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
27589
28141
  }
27590
28142
  get el() { return getElement(this); }
27591
28143
  static get watchers() { return {
@@ -27604,6 +28156,7 @@ class PdsToast {
27604
28156
  "icon": [1],
27605
28157
  "type": [1],
27606
28158
  "dismissLabel": [1, "dismiss-label"],
28159
+ "severityLabel": [1, "severity-label"],
27607
28160
  "isVisible": [32],
27608
28161
  "isAnimatingOut": [32],
27609
28162
  "dismiss": [64]
@@ -27633,7 +28186,9 @@ class PdsTooltip {
27633
28186
  this.resolvedPlacement = 'right';
27634
28187
  this.triggerEl = null;
27635
28188
  this.contentDiv = null;
28189
+ this.lastCopiedHtml = null;
27636
28190
  this.slotMutationObserver = null;
28191
+ this.contentSyncFrame = null;
27637
28192
  this.currentPathname = '';
27638
28193
  this.pathnameCheckInterval = null;
27639
28194
  this.stopAutoUpdate = null;
@@ -27700,6 +28255,25 @@ class PdsTooltip {
27700
28255
  this.handleSpaNavigation();
27701
28256
  }
27702
28257
  };
28258
+ this.scheduleContentSync = () => {
28259
+ if (this.contentSyncFrame !== null)
28260
+ return;
28261
+ this.contentSyncFrame = requestAnimationFrame(() => {
28262
+ this.contentSyncFrame = null;
28263
+ if (this.portalEl === null || this.contentDiv === null)
28264
+ return;
28265
+ const copy = this.copySlottedContent();
28266
+ const strippedCopy = this.strippedHtml(copy);
28267
+ if (strippedCopy === this.lastCopiedHtml)
28268
+ return;
28269
+ this.lastCopiedHtml = strippedCopy;
28270
+ this.contentDiv.textContent = '';
28271
+ this.contentDiv.append(...Array.from(copy.childNodes));
28272
+ this.repositionPortal().catch(error => {
28273
+ console.warn('Failed to reposition tooltip after a content change:', error);
28274
+ });
28275
+ });
28276
+ };
27703
28277
  }
27704
28278
  handleOpenToggle(newValue, oldValue) {
27705
28279
  if (newValue === false && oldValue === true) {
@@ -27714,16 +28288,6 @@ class PdsTooltip {
27714
28288
  window.addEventListener('pageshow', this.handlePageShow);
27715
28289
  this.currentPathname = window.location.pathname;
27716
28290
  this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
27717
- const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
27718
- if (contentSlotWrapper !== null) {
27719
- this.slotMutationObserver = new MutationObserver(() => {
27720
- if (this.opened && this.portalEl !== null) {
27721
- this.removePortal();
27722
- this.createPortal();
27723
- }
27724
- });
27725
- this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
27726
- }
27727
28291
  // no return; Stencil ignores teardown functions here
27728
28292
  }
27729
28293
  connectedCallback() {
@@ -27731,10 +28295,6 @@ class PdsTooltip {
27731
28295
  }
27732
28296
  disconnectedCallback() {
27733
28297
  window.removeEventListener('pageshow', this.handlePageShow);
27734
- if (this.slotMutationObserver !== null) {
27735
- this.slotMutationObserver.disconnect();
27736
- this.slotMutationObserver = null;
27737
- }
27738
28298
  // Ensure global listeners/intervals are removed if still present
27739
28299
  if (this.portalEl !== null) {
27740
28300
  this.removePortal();
@@ -27877,31 +28437,9 @@ class PdsTooltip {
27877
28437
  this.contentDiv.className = 'pds-tooltip__content';
27878
28438
  this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
27879
28439
  this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
27880
- const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
27881
- const slottedContentContainer = contentSlotWrapper === null || contentSlotWrapper === void 0 ? void 0 : contentSlotWrapper.querySelector('[slot="content"]');
27882
- let hasSlottedContent = false;
27883
- if (slottedContentContainer !== null) {
27884
- const childrenToClone = Array.from(slottedContentContainer.childNodes);
27885
- if (childrenToClone.length > 0) {
27886
- const hasMeaningfulNode = childrenToClone.some(node => {
27887
- var _a;
27888
- return node.nodeType === Node.ELEMENT_NODE ||
27889
- (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
27890
- });
27891
- if (hasMeaningfulNode) {
27892
- hasSlottedContent = true;
27893
- childrenToClone.forEach((node /*, index*/) => {
27894
- var _a;
27895
- if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
27896
- this.contentDiv.appendChild(node.cloneNode(true));
27897
- }
27898
- });
27899
- }
27900
- }
27901
- }
27902
- if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {
27903
- this.contentDiv.textContent = this.content;
27904
- }
28440
+ const initialCopy = this.copySlottedContent();
28441
+ this.lastCopiedHtml = this.strippedHtml(initialCopy);
28442
+ this.contentDiv.append(...Array.from(initialCopy.childNodes));
27905
28443
  this.portalEl.appendChild(this.contentDiv);
27906
28444
  document.body.appendChild(this.portalEl);
27907
28445
  this.repositionPortal().catch(error => {
@@ -27924,8 +28462,93 @@ class PdsTooltip {
27924
28462
  if (this.triggerEl !== null && this.portalEl.id !== '') {
27925
28463
  this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
27926
28464
  }
28465
+ this.startContentSync();
28466
+ }
28467
+ /**
28468
+ * The host's own content slot wrapper. Matched among direct children only, so a nested
28469
+ * pds-tooltip inside the trigger slot isn't mistaken for this one's.
28470
+ */
28471
+ get contentSlotWrapper() {
28472
+ return Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
28473
+ }
28474
+ /**
28475
+ * Copies the slotted content (or the `content` prop's text) into a detached container. The
28476
+ * portal holds copies so the framework that owns the slotted nodes keeps them.
28477
+ */
28478
+ copySlottedContent() {
28479
+ var _a, _b;
28480
+ const copy = document.createElement('div');
28481
+ const slottedContentContainer = (_a = this.contentSlotWrapper) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="content"]');
28482
+ const meaningfulNodes = Array.from((_b = slottedContentContainer === null || slottedContentContainer === void 0 ? void 0 : slottedContentContainer.childNodes) !== null && _b !== void 0 ? _b : []).filter(node => {
28483
+ var _a;
28484
+ return node.nodeType === Node.ELEMENT_NODE ||
28485
+ (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
28486
+ });
28487
+ meaningfulNodes.forEach(node => copy.appendChild(node.cloneNode(true)));
28488
+ if (meaningfulNodes.length === 0 && typeof this.content === 'string' && this.content.trim() !== '') {
28489
+ copy.textContent = this.content;
28490
+ }
28491
+ return copy;
28492
+ }
28493
+ /**
28494
+ * While the tooltip is open, keeps the portal's copy in step with the slotted content at any
28495
+ * depth: content that loads or re-renders after opening shows without reopening. Changes are
28496
+ * batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
28497
+ * dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
28498
+ * repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
28499
+ * can't trigger another sync.
28500
+ */
28501
+ startContentSync() {
28502
+ const contentSlotWrapper = this.contentSlotWrapper;
28503
+ if (contentSlotWrapper === undefined || typeof MutationObserver === 'undefined')
28504
+ return;
28505
+ this.slotMutationObserver = new MutationObserver(this.scheduleContentSync);
28506
+ this.slotMutationObserver.observe(contentSlotWrapper, {
28507
+ childList: true,
28508
+ subtree: true,
28509
+ attributes: true,
28510
+ characterData: true,
28511
+ });
28512
+ }
28513
+ /**
28514
+ * A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
28515
+ * `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
28516
+ * inside the portal) isn't mistaken for a real content change. Without this, that class-only
28517
+ * difference fails the equality check above and triggers a recopy that replaces still-loaded
28518
+ * nodes — reloading any iframe or media the slotted content held.
28519
+ */
28520
+ strippedHtml(root) {
28521
+ const clone = root.cloneNode(true);
28522
+ clone.querySelectorAll('*').forEach((el) => {
28523
+ // isStencilClass is host-scoped (its own doc: "another sc- class may be a consumer's"), so it
28524
+ // only applies to pds-* elements — the same check keepPineHydrated makes before using it.
28525
+ if (!el.localName.startsWith('pds-'))
28526
+ return;
28527
+ // Not `el.className`: on an SVG element that's an SVGAnimatedString, not a string,
28528
+ // so classNamesOf would silently drop its classes from the comparison. The `class`
28529
+ // attribute is a plain string on every element, SVG included.
28530
+ const kept = classNamesOf(el.getAttribute('class') || '').filter((name) => !isStencilClass(el, name));
28531
+ if (kept.length === 0) {
28532
+ el.removeAttribute('class');
28533
+ }
28534
+ else {
28535
+ el.setAttribute('class', kept.join(' '));
28536
+ }
28537
+ });
28538
+ return clone.innerHTML;
28539
+ }
28540
+ stopContentSync() {
28541
+ if (this.slotMutationObserver !== null) {
28542
+ this.slotMutationObserver.disconnect();
28543
+ this.slotMutationObserver = null;
28544
+ }
28545
+ if (this.contentSyncFrame !== null) {
28546
+ cancelAnimationFrame(this.contentSyncFrame);
28547
+ this.contentSyncFrame = null;
28548
+ }
27927
28549
  }
27928
28550
  removePortal() {
28551
+ this.stopContentSync();
27929
28552
  // Stop Floating UI's autoUpdate
27930
28553
  if (this.stopAutoUpdate !== null) {
27931
28554
  this.stopAutoUpdate();
@@ -27957,12 +28580,13 @@ class PdsTooltip {
27957
28580
  this.triggerEl.removeAttribute('aria-describedby');
27958
28581
  }
27959
28582
  this.contentDiv = null;
28583
+ this.lastCopiedHtml = null;
27960
28584
  }
27961
28585
  render() {
27962
28586
  const hostId = this.componentId || undefined;
27963
- return (hAsync(Host, { key: '2e28dff93cd22fd3816d71b67e38883061a8b2bc', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '9e7ea50427587f61dcea1ea97e10d71f4d0c9d92', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
28587
+ return (hAsync(Host, { key: '067eda3089732c6a23032bb087182e6dcd0330fa', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '54f6f233c937f048f119df969630af530b10de25', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
27964
28588
  /* focusin/out bubble; ensure keyboard users see tooltips */
27965
- onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '08c1ff63c91b97b4df1362eb9b2e42b6fd556b11' })), hAsync("div", { key: '5cfe25e21d1f096b76335570fbb930a7bc8c95f8', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: 'e7e8728d7c8a0c74933cef070aa38f88a1f53a32', name: "content" }))));
28589
+ onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'f8019985ad9fd27deb388e35c43bf2e227ff9c02' })), hAsync("div", { key: '072c4e578aebb99cd213901369a57d7c74734ad9', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '22bc45dfb56567f53a608ce2033b062363793450', name: "content" }))));
27966
28590
  }
27967
28591
  get el() { return getElement(this); }
27968
28592
  static get watchers() { return {