@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.js CHANGED
@@ -5732,7 +5732,7 @@ class MockPdsModal {
5732
5732
  'pds-modal__backdrop': true,
5733
5733
  'open': this.open,
5734
5734
  };
5735
- 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" })))));
5735
+ 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" })))));
5736
5736
  }
5737
5737
  get el() { return getElement(this); }
5738
5738
  static get style() { return pdsModalCss$1(); }
@@ -5754,7 +5754,7 @@ class MockPdsModal {
5754
5754
  }; }
5755
5755
  }
5756
5756
 
5757
- /* pds-icons v10.6.0, ES Modules */
5757
+ /* pds-icons v10.7.0, ES Modules */
5758
5758
 
5759
5759
  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>";
5760
5760
  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>";
@@ -5832,8 +5832,16 @@ class PdsAccordion {
5832
5832
 
5833
5833
  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)}`;
5834
5834
 
5835
- 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}`;
5835
+ 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}`;
5836
5836
 
5837
+ // What each variant announces when `severityLabel` isn't set. The `default`
5838
+ // variant has no severity.
5839
+ const SEVERITY_LABELS = {
5840
+ danger: 'Error',
5841
+ info: 'Info',
5842
+ success: 'Success',
5843
+ warning: 'Warning',
5844
+ };
5837
5845
  /**
5838
5846
  * @slot actions - Slot for alert actions.
5839
5847
  * @part dismiss
@@ -5887,7 +5895,12 @@ class PdsAlert {
5887
5895
  }
5888
5896
  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)));
5889
5897
  }
5898
+ severityText() {
5899
+ var _a;
5900
+ return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : SEVERITY_LABELS[this.variant];
5901
+ }
5890
5902
  render() {
5903
+ const severity = this.severityText();
5891
5904
  const iconMap = {
5892
5905
  danger: 'warning-filled',
5893
5906
  default: 'info-circle-filled',
@@ -5897,7 +5910,7 @@ class PdsAlert {
5897
5910
  };
5898
5911
  // Get the icon name based on the current variant
5899
5912
  const iconName = iconMap[this.variant] || iconMap.default;
5900
- 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)" })))))));
5913
+ 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)" })))))));
5901
5914
  }
5902
5915
  get el() { return getElement(this); }
5903
5916
  static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
@@ -5912,6 +5925,7 @@ class PdsAlert {
5912
5925
  "hideIcon": [4, "hide-icon"],
5913
5926
  "variant": [1],
5914
5927
  "dismissLabel": [1, "dismiss-label"],
5928
+ "severityLabel": [1, "severity-label"],
5915
5929
  "hasActionsContent": [32]
5916
5930
  },
5917
5931
  "$listeners$": undefined,
@@ -5963,6 +5977,8 @@ function restoreReflectedDefault(el, attr, value, defaultValue) {
5963
5977
 
5964
5978
  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}`;
5965
5979
 
5980
+ // Used when `badgeLabel` is unset; an empty string hides the badge instead.
5981
+ const DEFAULT_BADGE_LABEL = 'Verified';
5966
5982
  /**
5967
5983
  * @part asset-wrapper
5968
5984
  * @part button
@@ -6042,14 +6058,22 @@ class PdsAvatar {
6042
6058
  :
6043
6059
  this.renderAssetWrapper());
6044
6060
  };
6045
- this.renderBadge = () => (
6046
- // `badge` and `status` share the bottom-end corner; `status` wins so the
6047
- // presence dot is never painted over the badge.
6048
- this.badge && !this.status
6049
- // Percentage is average size of icon in relation to total avatar size
6050
- // of all preset sizes found in Figma.
6051
- // Used to allow icons to scale to container size
6052
- && hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
6061
+ this.renderBadge = () => {
6062
+ var _a;
6063
+ // Inside the dropdown trigger the button's aria-label is the name, so the
6064
+ // badge is decorative there, as the status dot is. An empty label is
6065
+ // decorative too, rather than an image with no name.
6066
+ const badgeLabel = (_a = this.badgeLabel) !== null && _a !== void 0 ? _a : DEFAULT_BADGE_LABEL;
6067
+ const label = this.dropdown || badgeLabel === '' ? undefined : badgeLabel;
6068
+ return (
6069
+ // `badge` and `status` share the bottom-end corner; `status` wins so the
6070
+ // presence dot is never painted over the badge.
6071
+ this.badge && !this.status
6072
+ // Percentage is average size of icon in relation to total avatar size
6073
+ // of all preset sizes found in Figma.
6074
+ // Used to allow icons to scale to container size
6075
+ && 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 }));
6076
+ };
6053
6077
  this.renderStatus = () => {
6054
6078
  var _a;
6055
6079
  if (!this.status)
@@ -6072,7 +6096,7 @@ class PdsAvatar {
6072
6096
  // Percentage is average size of icon in relation to total avatar size
6073
6097
  // of all preset sizes found in Figma.
6074
6098
  // Used to allow icons to scale to container size
6075
- return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%" });
6099
+ return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%", "aria-hidden": "true" });
6076
6100
  };
6077
6101
  this.classNames = () => ({
6078
6102
  'pds-avatar': true,
@@ -6104,7 +6128,7 @@ class PdsAvatar {
6104
6128
  }
6105
6129
  }
6106
6130
  render() {
6107
- return (hAsync(Host, { key: '2cfbbe25504088ba2cbb3dc923680365fa78a170', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
6131
+ return (hAsync(Host, { key: '0942c1fff94d0d8138143cbddf80aea1d09e34a9', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
6108
6132
  }
6109
6133
  get el() { return getElement(this); }
6110
6134
  static get watchers() { return {
@@ -6122,6 +6146,7 @@ class PdsAvatar {
6122
6146
  "$members$": {
6123
6147
  "alt": [1],
6124
6148
  "badge": [4],
6149
+ "badgeLabel": [1, "badge-label"],
6125
6150
  "componentId": [1, "component-id"],
6126
6151
  "dropdown": [4],
6127
6152
  "image": [1],
@@ -6584,7 +6609,7 @@ class PdsBox {
6584
6609
  const normalizedBorder = normalizeColorValue$1(this.borderColor);
6585
6610
  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 }));
6586
6611
  this.hostKeeper.record(boxClasses, boxInlineStyles);
6587
- return (hAsync(Host, { key: '8a1348247b5a4c546759232f0f155721798797e5', class: boxClasses, style: boxInlineStyles }));
6612
+ return (hAsync(Host, { key: 'c791a8d413b47629c619424bebf9d9c4acc4d9f3', class: boxClasses, style: boxInlineStyles }));
6588
6613
  }
6589
6614
  get el() { return getElement(this); }
6590
6615
  static get style() { return pdsBoxCss(); }
@@ -6721,8 +6746,52 @@ class PdsBox {
6721
6746
  }; }
6722
6747
  }
6723
6748
 
6749
+ /**
6750
+ * The ARIA attributes that take ID references, and the element-reflection property each is forwarded
6751
+ * through. An ID on a host can't reach an element inside its shadow root, so a component that
6752
+ * delegates focus forwards the elements the IDs point at instead. A browser without ARIA element
6753
+ * reflection gets none of them.
6754
+ */
6755
+ const ARIA_REFERENCE_PROPERTIES = {
6756
+ 'aria-controls': 'ariaControlsElements',
6757
+ 'aria-describedby': 'ariaDescribedByElements',
6758
+ 'aria-labelledby': 'ariaLabelledByElements',
6759
+ };
6760
+ const ARIA_REFERENCE_ATTRIBUTES = Object.keys(ARIA_REFERENCE_PROPERTIES);
6761
+ /**
6762
+ * Finds an element by ID in the host's tree, then in each shadow root that contains it, so a host
6763
+ * inside another component's shadow root still reaches, say, a popover portal on document.body.
6764
+ * The closest root wins when an ID repeats.
6765
+ */
6766
+ const findInAncestorRoots = (host, id) => {
6767
+ let root = host.getRootNode();
6768
+ while (root instanceof ShadowRoot) {
6769
+ const found = root.getElementById(id);
6770
+ if (found)
6771
+ return found;
6772
+ root = root.host.getRootNode();
6773
+ }
6774
+ return root instanceof Document ? root.getElementById(id) : null;
6775
+ };
6776
+ /**
6777
+ * Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
6778
+ * name, or clears them. Run it again whenever the attributes or the referenced elements may have
6779
+ * changed: element references don't follow an ID to a node added or replaced later.
6780
+ */
6781
+ const forwardAriaReferences = (host, target) => {
6782
+ Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
6783
+ var _a, _b;
6784
+ if (!(property in target))
6785
+ return;
6786
+ const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
6787
+ const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
6788
+ target[property] = referenced.length > 0 ? referenced : null;
6789
+ });
6790
+ };
6791
+
6724
6792
  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)}`;
6725
6793
 
6794
+ const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
6726
6795
  /**
6727
6796
  * @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).
6728
6797
  * @part button-content - Exposes the button content for styling.
@@ -6781,12 +6850,22 @@ class PdsButton {
6781
6850
  this.variant = 'primary';
6782
6851
  this.hasStartContent = false;
6783
6852
  this.hasEndContent = false;
6784
- this.triggerExpanded = null;
6785
- this.triggerHasPopup = null;
6786
- this.syncTriggerAria = () => {
6787
- this.triggerExpanded = this.el.getAttribute('aria-expanded');
6788
- this.triggerHasPopup = this.el.getAttribute('aria-haspopup');
6789
- this.forwardAriaControls();
6853
+ this.forwardedAria = {};
6854
+ // Copied rather than moved: frameworks and DOM morphs put host attributes back on every update,
6855
+ // so taking them off the host would fight each one.
6856
+ this.syncHostAria = () => {
6857
+ const forwarded = {};
6858
+ FORWARDED_ARIA_ATTRIBUTES.forEach((name) => (forwarded[name] = this.el.getAttribute(name)));
6859
+ // A new object always re-renders, and frameworks re-set unchanged attributes on every render of their own.
6860
+ if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
6861
+ this.forwardedAria = forwarded;
6862
+ }
6863
+ this.forwardAriaReferences();
6864
+ };
6865
+ // A hint added after the button, or replaced by a framework or a DOM morph, is picked up by the
6866
+ // time focus reaches the button and it's announced.
6867
+ this.handleFocusIn = () => {
6868
+ this.forwardAriaReferences();
6790
6869
  };
6791
6870
  this.handleStartSlotChange = (event) => {
6792
6871
  this.hasStartContent = event.target.assignedElements({ flatten: true }).length > 0;
@@ -6823,22 +6902,22 @@ class PdsButton {
6823
6902
  };
6824
6903
  }
6825
6904
  connectedCallback() {
6826
- this.syncTriggerAria();
6905
+ this.syncHostAria();
6827
6906
  if (typeof MutationObserver === 'undefined')
6828
6907
  return;
6829
- // Popovers and menus set these on the host after render, but only the inner element is announced.
6830
- this.triggerAriaObserver = new MutationObserver(this.syncTriggerAria);
6831
- this.triggerAriaObserver.observe(this.el, {
6832
- attributeFilter: ['aria-controls', 'aria-expanded', 'aria-haspopup'],
6908
+ // Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
6909
+ this.hostAriaObserver = new MutationObserver(this.syncHostAria);
6910
+ this.hostAriaObserver.observe(this.el, {
6911
+ attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
6833
6912
  });
6834
6913
  }
6835
6914
  disconnectedCallback() {
6836
6915
  var _a;
6837
- (_a = this.triggerAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
6838
- this.triggerAriaObserver = undefined;
6916
+ (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
6917
+ this.hostAriaObserver = undefined;
6839
6918
  }
6840
6919
  componentDidRender() {
6841
- this.forwardAriaControls();
6920
+ this.forwardAriaReferences();
6842
6921
  }
6843
6922
  /**
6844
6923
  * Listen for Enter key presses on form inputs to trigger submit
@@ -6889,25 +6968,9 @@ class PdsButton {
6889
6968
  }
6890
6969
  }
6891
6970
  }
6892
- // ID references can't cross the shadow boundary, so aria-controls is forwarded as element references.
6893
- forwardAriaControls() {
6894
- var _a, _b;
6895
- if (!this.contentEl || !('ariaControlsElements' in this.contentEl))
6896
- return;
6897
- 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 : [];
6898
- const controlled = ids.map((id) => this.findInAncestorRoots(id)).filter((el) => el !== null);
6899
- this.contentEl.ariaControlsElements = controlled.length > 0 ? controlled : null;
6900
- }
6901
- // A trigger inside another component's shadow root still controls a popover portal on document.body.
6902
- findInAncestorRoots(id) {
6903
- let root = this.el.getRootNode();
6904
- while (root instanceof ShadowRoot) {
6905
- const found = root.getElementById(id);
6906
- if (found)
6907
- return found;
6908
- root = root.host.getRootNode();
6909
- }
6910
- return root instanceof Document ? root.getElementById(id) : null;
6971
+ forwardAriaReferences() {
6972
+ if (this.contentEl)
6973
+ forwardAriaReferences(this.el, this.contentEl);
6911
6974
  }
6912
6975
  classNames() {
6913
6976
  const classNames = ['pds-button'];
@@ -6953,16 +7016,13 @@ class PdsButton {
6953
7016
  }
6954
7017
  render() {
6955
7018
  // Common props for both button and anchor elements
6956
- const commonProps = {
6957
- 'aria-expanded': this.triggerExpanded,
6958
- 'aria-haspopup': this.triggerHasPopup,
6959
- class: this.classNames(),
6960
- part: 'button',
6961
- ref: (el) => (this.contentEl = el),
6962
- };
7019
+ const commonProps = Object.assign(Object.assign({}, this.forwardedAria), { class: this.classNames(), part: 'button', ref: (el) => (this.contentEl = el) });
6963
7020
  const attributes = () => {
6964
7021
  if (this.href) {
6965
- return Object.assign(Object.assign({}, commonProps), { download: this.download, href: this.disabled ? null : this.href, target: this.target });
7022
+ return Object.assign(Object.assign({}, commonProps), {
7023
+ // ARIA allows aria-pressed only on buttons, so a link never gets it.
7024
+ 'aria-pressed': null, download: this.download, href: this.disabled ? null : this.href, target: this.target
7025
+ });
6966
7026
  }
6967
7027
  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 });
6968
7028
  };
@@ -6970,7 +7030,7 @@ class PdsButton {
6970
7030
  // Hide text when loading or iconOnly is true
6971
7031
  const hideText = this.loading || this.iconOnly;
6972
7032
  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()));
6973
- 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)));
7033
+ 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)));
6974
7034
  }
6975
7035
  static get delegatesFocus() { return true; }
6976
7036
  get el() { return getElement(this); }
@@ -6995,8 +7055,7 @@ class PdsButton {
6995
7055
  "variant": [1],
6996
7056
  "hasStartContent": [32],
6997
7057
  "hasEndContent": [32],
6998
- "triggerExpanded": [32],
6999
- "triggerHasPopup": [32]
7058
+ "forwardedAria": [32]
7000
7059
  },
7001
7060
  "$listeners$": [[16, "keydown", "handleFormKeyDown"]],
7002
7061
  "$lazyBundleId$": "-",
@@ -7068,7 +7127,7 @@ const isSpecTest = () => {
7068
7127
 
7069
7128
  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)}`;
7070
7129
 
7071
- 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)}`;
7130
+ 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)))}}`;
7072
7131
 
7073
7132
  /**
7074
7133
  * @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
@@ -7086,6 +7145,11 @@ class PdsCheckbox {
7086
7145
  * It determines whether or not the checkbox is checked.
7087
7146
  */
7088
7147
  this.checked = false;
7148
+ /**
7149
+ * 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.
7150
+ * @defaultValue default
7151
+ */
7152
+ this.variant = 'default';
7089
7153
  this.handleCheckboxChange = (e) => {
7090
7154
  if (this.disabled) {
7091
7155
  return;
@@ -7125,6 +7189,9 @@ class PdsCheckbox {
7125
7189
  if (this.hasLabelSlot) {
7126
7190
  classNames.push('has-label-slot');
7127
7191
  }
7192
+ if (this.variant === 'pill') {
7193
+ classNames.push('pds-checkbox--pill');
7194
+ }
7128
7195
  return classNames.join(' ');
7129
7196
  }
7130
7197
  connectedCallback() {
@@ -7187,9 +7254,9 @@ class PdsCheckbox {
7187
7254
  render() {
7188
7255
  const hostClass = this.classNames();
7189
7256
  this.hostKeeper.record(hostClass);
7190
- 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 &&
7191
- hAsync("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
7192
- 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)));
7257
+ 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 &&
7258
+ hAsync("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
7259
+ 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)));
7193
7260
  }
7194
7261
  static get formAssociated() { return true; }
7195
7262
  get el() { return getElement(this); }
@@ -7217,6 +7284,7 @@ class PdsCheckbox {
7217
7284
  "name": [1],
7218
7285
  "required": [4],
7219
7286
  "value": [1],
7287
+ "variant": [1],
7220
7288
  "hasLabelSlot": [32]
7221
7289
  },
7222
7290
  "$listeners$": undefined,
@@ -8988,12 +9056,24 @@ function injectStyles() {
8988
9056
  function isOverflowing(el) {
8989
9057
  return el.scrollWidth > el.clientWidth;
8990
9058
  }
9059
+ /**
9060
+ * Engines without `:focus-visible` throw on the selector, so there every
9061
+ * focus counts as visible rather than none.
9062
+ */
9063
+ function isFocusVisible(el) {
9064
+ try {
9065
+ return el.matches(':focus-visible');
9066
+ }
9067
+ catch (_a) {
9068
+ return true;
9069
+ }
9070
+ }
8991
9071
  /**
8992
9072
  * Sets up automatic tooltip behavior for a truncated element.
8993
9073
  *
8994
- * When the element's text overflows, hovering or focusing the host element
8995
- * will display a tooltip showing the full text content. The tooltip is
8996
- * rendered as a portal on document.body and positioned with Floating UI.
9074
+ * When the element's text overflows, hovering the host element or giving it
9075
+ * keyboard focus will display a tooltip showing the full text content. The
9076
+ * tooltip is rendered as a portal on document.body and positioned with Floating UI.
8997
9077
  *
8998
9078
  * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
8999
9079
  *
@@ -9184,18 +9264,30 @@ function setupTruncationTooltip(options) {
9184
9264
  isHoveringPortal = false;
9185
9265
  scheduleHide();
9186
9266
  }
9187
- function handleFocusIn() {
9267
+ // Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
9268
+ // Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
9269
+ function showForVisibleFocus(event) {
9270
+ if (!isFocusVisible(event.composedPath()[0]))
9271
+ return;
9188
9272
  isFocused = true;
9189
9273
  showTooltip();
9190
9274
  }
9275
+ // A key press after a click makes focus visible in place, with no new focusin. keyup, not
9276
+ // keydown, so Tab's focus move lands first; Escape asks to dismiss, never to reveal.
9277
+ function handleKeyUp(event) {
9278
+ if (isFocused || event.key === 'Escape')
9279
+ return;
9280
+ showForVisibleFocus(event);
9281
+ }
9191
9282
  function handleFocusOut() {
9192
9283
  isFocused = false;
9193
9284
  scheduleHide();
9194
9285
  }
9195
9286
  hostEl.addEventListener('mouseenter', handleMouseEnter);
9196
9287
  hostEl.addEventListener('mouseleave', handleMouseLeave);
9197
- focusEl.addEventListener('focusin', handleFocusIn);
9288
+ focusEl.addEventListener('focusin', showForVisibleFocus);
9198
9289
  focusEl.addEventListener('focusout', handleFocusOut);
9290
+ focusEl.addEventListener('keyup', handleKeyUp);
9199
9291
  // Return cleanup function
9200
9292
  return () => {
9201
9293
  disposed = true;
@@ -9215,8 +9307,9 @@ function setupTruncationTooltip(options) {
9215
9307
  }
9216
9308
  hostEl.removeEventListener('mouseenter', handleMouseEnter);
9217
9309
  hostEl.removeEventListener('mouseleave', handleMouseLeave);
9218
- focusEl.removeEventListener('focusin', handleFocusIn);
9310
+ focusEl.removeEventListener('focusin', showForVisibleFocus);
9219
9311
  focusEl.removeEventListener('focusout', handleFocusOut);
9312
+ focusEl.removeEventListener('keyup', handleKeyUp);
9220
9313
  removePortal();
9221
9314
  };
9222
9315
  }
@@ -9458,13 +9551,13 @@ class PdsChip {
9458
9551
  'aria-label': this.dismissLabel,
9459
9552
  };
9460
9553
  };
9461
- return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
9554
+ return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize, "aria-hidden": "true" })));
9462
9555
  }
9463
9556
  render() {
9464
9557
  const hostClass = this.classNames();
9465
9558
  const hostStyles = this.hostStyles;
9466
9559
  this.hostKeeper.record(hostClass, hostStyles);
9467
- return (hAsync(Host, { key: 'f82d84a7f0a4f1c980d47bf75cd4ffeef042607d', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
9560
+ return (hAsync(Host, { key: '0e67ea3700e8a8e1ad3049b6eafced6934262335', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
9468
9561
  }
9469
9562
  get el() { return getElement(this); }
9470
9563
  static get style() { return pdsChipTokensCss() + pdsChipCss(); }
@@ -11174,7 +11267,7 @@ class FlyoutController {
11174
11267
  }
11175
11268
  }
11176
11269
 
11177
- 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)}`;
11270
+ 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)}`;
11178
11271
 
11179
11272
  /**
11180
11273
  * @slot option - Option elements for the combobox dropdown
@@ -11315,6 +11408,13 @@ class PdsCombobox {
11315
11408
  * @default 'pill'
11316
11409
  */
11317
11410
  this.triggerShape = 'pill';
11411
+ /**
11412
+ * Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
11413
+ * When a label overflows, a `title` showing the full label will appear on hover.
11414
+ * Chip options, custom layouts and group rows aren't affected.
11415
+ * @defaultValue false
11416
+ */
11417
+ this.truncate = false;
11318
11418
  /**
11319
11419
  * The sentiment for the chip trigger. Matches Pine chip sentiments.
11320
11420
  * @default 'neutral'
@@ -11611,10 +11711,15 @@ class PdsCombobox {
11611
11711
  if (this.usesPanelSearch)
11612
11712
  this.restoreFocusToTrigger();
11613
11713
  };
11714
+ this.onButtonTriggerMouseEnter = (event) => {
11715
+ this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
11716
+ };
11614
11717
  // Event handler for mouse enter on option
11615
11718
  this.onOptionMouseEnter = (event) => {
11616
- const idx = Number(event.currentTarget.getAttribute('data-option-index'));
11617
- this.highlightedIndex = idx;
11719
+ const row = event.currentTarget;
11720
+ if (this.truncate)
11721
+ this.syncTitle(row, '.pds-combobox__option-text');
11722
+ this.highlightedIndex = Number(row.getAttribute('data-option-index'));
11618
11723
  this.keyboardNavigating = false;
11619
11724
  };
11620
11725
  this.onGroupRowMouseEnter = (event) => {
@@ -11904,6 +12009,19 @@ class PdsCombobox {
11904
12009
  this.focusPanel(panelFocusEl);
11905
12010
  }
11906
12011
  }
12012
+ // A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
12013
+ // so it isn't read again as their description.
12014
+ syncTitle(el, selector) {
12015
+ const text = el.querySelector(selector);
12016
+ if (!text)
12017
+ return;
12018
+ if (text.scrollWidth > text.clientWidth) {
12019
+ text.title = text.textContent || '';
12020
+ }
12021
+ else {
12022
+ text.removeAttribute('title');
12023
+ }
12024
+ }
11907
12025
  /**
11908
12026
  * Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
11909
12027
  * panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
@@ -13305,6 +13423,7 @@ class PdsCombobox {
13305
13423
  'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
13306
13424
  'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
13307
13425
  'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
13426
+ 'pds-combobox__listbox--truncate': this.truncate,
13308
13427
  }, 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",
13309
13428
  // Focusable but out of the tab order with panel search, so it can take focus when a
13310
13429
  // drilled-in group hides the field. Dropping it while focused would blur the list and close.
@@ -13471,14 +13590,15 @@ class PdsCombobox {
13471
13590
  'pds-combobox__option--layout': isLayout,
13472
13591
  'pds-combobox__option--chip': isChip,
13473
13592
  'pds-combobox__option--disabled': isDisabled,
13474
- }, "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" })));
13593
+ }, "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" })));
13475
13594
  }
13476
13595
  /** An option's text, after its `data-icon` when it has one. */
13477
13596
  renderOptionLabel(option) {
13478
13597
  const icon = optionIconOf(option);
13598
+ const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
13479
13599
  if (icon === null)
13480
- return this.getOptionLabel(option);
13481
- 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)));
13600
+ return label;
13601
+ return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
13482
13602
  }
13483
13603
  /** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
13484
13604
  panelEntries() {
@@ -13566,7 +13686,9 @@ class PdsCombobox {
13566
13686
  'pds-combobox__button-trigger-label--with-icon': icon !== null,
13567
13687
  } }, icon !== null && (
13568
13688
  // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
13569
- hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.selectedLabel || this.placeholder));
13689
+ hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
13690
+ // Keyed so a new label drops a stale `title`.
13691
+ hAsync("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (this.selectedLabel || this.placeholder)));
13570
13692
  }
13571
13693
  /** The selection's icon for the button trigger: the option's own, or else its group's. */
13572
13694
  get selectedIcon() {
@@ -13670,7 +13792,7 @@ class PdsCombobox {
13670
13792
  }
13671
13793
  // Helper method to render chip trigger default content
13672
13794
  renderChipTriggerDefaultContent() {
13673
- 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));
13795
+ 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));
13674
13796
  }
13675
13797
  // Helper method to render option as chip (new automatic approach)
13676
13798
  renderOptionChip(option) {
@@ -13698,16 +13820,17 @@ class PdsCombobox {
13698
13820
  'pds-combobox__button-trigger',
13699
13821
  `pds-combobox__button-trigger--${this.triggerVariant}`,
13700
13822
  this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
13823
+ this.truncate && 'pds-combobox__button-trigger--truncate',
13701
13824
  ]
13702
13825
  .filter(Boolean)
13703
13826
  .join(' ');
13704
- 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 => {
13827
+ 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 => {
13705
13828
  this.inputEl = el;
13706
13829
  this.triggerEl = el;
13707
13830
  }, class: {
13708
13831
  'pds-combobox__input': true,
13709
13832
  'pds-combobox__input--invalid': this.isInvalid(),
13710
- }, 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' && [
13833
+ }, 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' && [
13711
13834
  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 : ''),
13712
13835
  // Its own region: sharing one, revealing a row then opening it would leave the text the
13713
13836
  // same, and opening the group would go unannounced.
@@ -13778,6 +13901,7 @@ class PdsCombobox {
13778
13901
  "triggerWidth": [1, "trigger-width"],
13779
13902
  "triggerVariant": [1, "trigger-variant"],
13780
13903
  "triggerShape": [1, "trigger-shape"],
13904
+ "truncate": [516],
13781
13905
  "chipSentiment": [1, "chip-sentiment"],
13782
13906
  "chipLarge": [4, "chip-large"],
13783
13907
  "chipIcon": [1, "chip-icon"],
@@ -13814,7 +13938,7 @@ class PdsCombobox {
13814
13938
  },
13815
13939
  "$listeners$": undefined,
13816
13940
  "$lazyBundleId$": "-",
13817
- "$attrsToReflect$": [["name", "name"]]
13941
+ "$attrsToReflect$": [["name", "name"], ["truncate", "truncate"]]
13818
13942
  }; }
13819
13943
  }
13820
13944
 
@@ -13847,7 +13971,7 @@ class PdsContainer {
13847
13971
  hostStyle['--pine-container-max-width'] = customSize;
13848
13972
  if (!this.centered)
13849
13973
  hostStyle['margin-inline'] = '0';
13850
- 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' }))));
13974
+ 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' }))));
13851
13975
  }
13852
13976
  static get style() { return pdsContainerCss(); }
13853
13977
  static get cmpMeta() { return {
@@ -13972,7 +14096,7 @@ class PdsCopytext {
13972
14096
  render() {
13973
14097
  const hostClass = this.classNames();
13974
14098
  this.hostKeeper.record(hostClass);
13975
- 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" }))));
14099
+ 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" }))));
13976
14100
  }
13977
14101
  get el() { return getElement(this); }
13978
14102
  static get watchers() { return {
@@ -15974,14 +16098,14 @@ class PdsDatepicker {
15974
16098
  }
15975
16099
  render() {
15976
16100
  const locale = this.resolvedLocale;
15977
- 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", {
16101
+ 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", {
15978
16102
  // Keyed, as is the calendar button: when Clear appears after a pick, the focused
15979
16103
  // calendar button must stay that button rather than be reused as Clear.
15980
16104
  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,
15981
16105
  // Out of the tab order, as a native search field's clear button is: Tab from a field
15982
16106
  // just emptied would land on it as the change removes it, dropping focus to the page.
15983
16107
  tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
15984
- }, 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)));
16108
+ }, 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)));
15985
16109
  }
15986
16110
  static get formAssociated() { return true; }
15987
16111
  get el() { return getElement(this); }
@@ -16123,7 +16247,7 @@ class PdsDivider {
16123
16247
  return classNames.join(' ');
16124
16248
  }
16125
16249
  render() {
16126
- 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() }))));
16250
+ 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() }))));
16127
16251
  }
16128
16252
  static get style() { return pdsDividerCss(); }
16129
16253
  static get cmpMeta() { return {
@@ -16319,11 +16443,11 @@ class PdsDrawer {
16319
16443
  this.open = false;
16320
16444
  }
16321
16445
  render() {
16322
- return (hAsync(Host, { key: '287bf043c991209488eb1b617031acffb59ff9af', class: {
16446
+ return (hAsync(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
16323
16447
  'pds-drawer': true,
16324
16448
  [`pds-drawer--${this.side}`]: true,
16325
16449
  [`pds-drawer--${this.size}`]: true,
16326
- } }, 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' }))));
16450
+ } }, 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' }))));
16327
16451
  }
16328
16452
  get el() { return getElement(this); }
16329
16453
  static get style() { return pdsDrawerCss(); }
@@ -16364,7 +16488,7 @@ class PdsDrawerContent {
16364
16488
  unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
16365
16489
  }
16366
16490
  render() {
16367
- return (hAsync("div", { key: 'f307939ab0a94f6a0d8a3675c658def0ded68b98', class: "pds-drawer-content" }, hAsync("slot", { key: 'dadac08ac15bb8ded98ea982511e2d57bea9bdca' })));
16491
+ return (hAsync("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, hAsync("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
16368
16492
  }
16369
16493
  get el() { return getElement(this); }
16370
16494
  static get style() { return pdsDrawerContentCss(); }
@@ -16392,7 +16516,7 @@ class PdsDrawerFooter {
16392
16516
  unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
16393
16517
  }
16394
16518
  render() {
16395
- return (hAsync("footer", { key: 'b58c68d88b467e8baa3682d16f97076d06ea2414', class: "pds-drawer__footer" }, hAsync("slot", { key: 'ff2306202c14029b397d40b5bb3d672a8aa571c0' })));
16519
+ return (hAsync("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, hAsync("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
16396
16520
  }
16397
16521
  get el() { return getElement(this); }
16398
16522
  static get style() { return pdsDrawerFooterCss(); }
@@ -16420,7 +16544,7 @@ class PdsDrawerHeader {
16420
16544
  unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
16421
16545
  }
16422
16546
  render() {
16423
- return (hAsync("header", { key: '280e6ca734317d5733e4c595431c8070eff13d58', class: "pds-drawer__header" }, hAsync("slot", { key: 'cc6af6084600c4dc60d7bd99e040376abdf5ffe3' })));
16547
+ return (hAsync("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, hAsync("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
16424
16548
  }
16425
16549
  get el() { return getElement(this); }
16426
16550
  static get style() { return pdsDrawerHeaderCss(); }
@@ -16636,11 +16760,11 @@ class PdsDropdownMenu {
16636
16760
  if (tagName === 'pds-dropdown-menu-item') {
16637
16761
  // For pds-dropdown-menu-item, focus the inner element
16638
16762
  const menuItem = item;
16639
- const innerButton = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
16763
+ const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
16640
16764
  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'))
16641
16765
  || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
16642
- if (innerButton) {
16643
- innerButton.focus();
16766
+ if (innerControl) {
16767
+ innerControl.focus();
16644
16768
  }
16645
16769
  else if (innerLink) {
16646
16770
  innerLink.focus();
@@ -16792,7 +16916,7 @@ class PdsDropdownMenu {
16792
16916
  }
16793
16917
  }
16794
16918
  render() {
16795
- 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 })))));
16919
+ 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 })))));
16796
16920
  }
16797
16921
  get host() { return getElement(this); }
16798
16922
  static get style() { return pdsDropdownMenuCss(); }
@@ -16811,10 +16935,10 @@ class PdsDropdownMenu {
16811
16935
  }; }
16812
16936
  }
16813
16937
 
16814
- 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)}`;
16938
+ 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)}`;
16815
16939
 
16816
16940
  /**
16817
- * @part button
16941
+ * @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
16818
16942
  */
16819
16943
  class PdsDropdownMenuItem {
16820
16944
  constructor(hostRef) {
@@ -16830,9 +16954,17 @@ class PdsDropdownMenuItem {
16830
16954
  * @defaultValue false
16831
16955
  */
16832
16956
  this.disabled = false;
16957
+ /**
16958
+ * It determines whether or not the dropdown-item is informational: text that the arrow keys
16959
+ * reach but that can't be activated. Takes precedence over `href` and `destructive`.
16960
+ * Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
16961
+ * @defaultValue false
16962
+ */
16963
+ this.informational = false;
16833
16964
  /**
16834
16965
  * Determines whether the link should open in a new tab and display an external icon.
16835
16966
  * This is a simpler alternative to using `target="_blank"` for the common case.
16967
+ * Ignored when `informational` is set.
16836
16968
  * @defaultValue false
16837
16969
  */
16838
16970
  this.external = false;
@@ -16843,6 +16975,12 @@ class PdsDropdownMenuItem {
16843
16975
  this.handleBlur = () => {
16844
16976
  this.hasFocus = false;
16845
16977
  };
16978
+ // Space would otherwise scroll the page, since nothing in the item takes the key.
16979
+ this.handleInformationalKeyDown = (event) => {
16980
+ if (event.key === ' ') {
16981
+ event.preventDefault();
16982
+ }
16983
+ };
16846
16984
  this.handleKeyDown = (event) => {
16847
16985
  // Handle keyboard events
16848
16986
  if (!this.disabled && (event.key === 'Enter')) {
@@ -16864,6 +17002,8 @@ class PdsDropdownMenuItem {
16864
17002
  ;
16865
17003
  handleClick() {
16866
17004
  var _a;
17005
+ if (this.informational)
17006
+ return;
16867
17007
  // Filter only pds-dropdown-menu-item elements and find the index of the current item
16868
17008
  const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
16869
17009
  const itemIndex = menuItems.indexOf(this.host);
@@ -16876,8 +17016,14 @@ class PdsDropdownMenuItem {
16876
17016
  });
16877
17017
  }
16878
17018
  renderElement() {
17019
+ if (this.informational) {
17020
+ return (hAsync("div", { class: {
17021
+ 'pds-dropdown-menu-item__content': true,
17022
+ 'has-focus': this.hasFocus
17023
+ }, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("slot", null)));
17024
+ }
16879
17025
  if (this.href != null) {
16880
- return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
17026
+ return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
16881
17027
  'pds-dropdown-menu-item__content': true,
16882
17028
  'has-focus': this.hasFocus
16883
17029
  }, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
@@ -16888,7 +17034,14 @@ class PdsDropdownMenuItem {
16888
17034
  }, 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)));
16889
17035
  }
16890
17036
  render() {
16891
- 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()));
17037
+ return (hAsync(Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
17038
+ 'is-disabled': this.disabled,
17039
+ 'is-informational': this.informational,
17040
+ 'destructive': !this.disabled && !this.informational && this.destructive
17041
+ }, onClick: () => !this.disabled && this.handleClick(), role: "none",
17042
+ // ARIA ignores role="none" on focusable elements, so a focusable host would sit between
17043
+ // the menu and the informational menuitem as an unexpected child.
17044
+ tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
16892
17045
  }
16893
17046
  get host() { return getElement(this); }
16894
17047
  static get style() { return pdsDropdownMenuItemCss(); }
@@ -16901,14 +17054,16 @@ class PdsDropdownMenuItem {
16901
17054
  "disabled": [516],
16902
17055
  "download": [1],
16903
17056
  "href": [1],
17057
+ "informational": [516],
16904
17058
  "external": [516],
17059
+ "externalLabel": [1, "external-label"],
16905
17060
  "target": [513],
16906
17061
  "hasFocus": [32],
16907
17062
  "clickItem": [64]
16908
17063
  },
16909
17064
  "$listeners$": undefined,
16910
17065
  "$lazyBundleId$": "-",
16911
- "$attrsToReflect$": [["disabled", "disabled"], ["external", "external"], ["target", "target"]]
17066
+ "$attrsToReflect$": [["disabled", "disabled"], ["informational", "informational"], ["external", "external"], ["target", "target"]]
16912
17067
  }; }
16913
17068
  }
16914
17069
 
@@ -16924,7 +17079,7 @@ class PdsDropdownMenuSeparator {
16924
17079
  this.disabled = false;
16925
17080
  }
16926
17081
  render() {
16927
- return (hAsync(Host, { key: '60407a2edc8b4667d39cbd1ba9a859d09b0b8ff1', id: this.componentId }, hAsync("hr", { key: '8485d1c8508c5fe5e3635505f25e278f45f45b82' })));
17082
+ return (hAsync(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, hAsync("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
16928
17083
  }
16929
17084
  static get style() { return pdsDropdownMenuSeparatorCss(); }
16930
17085
  static get cmpMeta() { return {
@@ -17504,7 +17659,7 @@ class PdsFilter {
17504
17659
  return null;
17505
17660
  }
17506
17661
  render() {
17507
- 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' })))));
17662
+ 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' })))));
17508
17663
  }
17509
17664
  get el() { return getElement(this); }
17510
17665
  static get style() { return pdsFilterCss(); }
@@ -17536,7 +17691,7 @@ class PdsFilters {
17536
17691
  registerInstance(this, hostRef);
17537
17692
  }
17538
17693
  render() {
17539
- return (hAsync(Host, { key: '8688235fe7cdea1b4fc540156ff21bb9711b41b6', id: this.componentId }, hAsync("div", { key: 'e51a37977df8c31f99b28d8c7e4bedb0d63e53c6', class: "pds-filters" }, hAsync("slot", { key: '8ce936da4d3f0213408090bc3eeb011920f9aa6c' }))));
17694
+ return (hAsync(Host, { key: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, hAsync("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, hAsync("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
17540
17695
  }
17541
17696
  static get style() { return pdsFiltersCss(); }
17542
17697
  static get cmpMeta() { return {
@@ -18032,9 +18187,9 @@ class PdsImage {
18032
18187
  this.loading = 'eager';
18033
18188
  }
18034
18189
  render() {
18035
- return (hAsync(Host, { key: '1e8bb3882c2a629004ce1441e85d5c5a75a84e98', class: {
18190
+ return (hAsync(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
18036
18191
  'pds-image': true,
18037
- }, 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 })));
18192
+ }, 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 })));
18038
18193
  }
18039
18194
  static get style() { return pdsImageCss(); }
18040
18195
  static get cmpMeta() { return {
@@ -18354,10 +18509,10 @@ class PdsInput {
18354
18509
  'has-prepend': this.hasPrepend,
18355
18510
  'has-append': this.hasAppend,
18356
18511
  };
18357
- 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: {
18512
+ 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: {
18358
18513
  'pds-input__label-wrapper': true,
18359
18514
  'visually-hidden': this.hideLabel,
18360
- } }, 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)))));
18515
+ } }, 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)))));
18361
18516
  }
18362
18517
  static get formAssociated() { return true; }
18363
18518
  get el() { return getElement(this); }
@@ -18413,6 +18568,8 @@ class PdsInput {
18413
18568
 
18414
18569
  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}`;
18415
18570
 
18571
+ // Used when `externalLabel` is unset; an empty string hides the icon instead.
18572
+ const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
18416
18573
  /**
18417
18574
  * @part link - Link element styles.
18418
18575
  * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
@@ -18466,11 +18623,18 @@ class PdsLink {
18466
18623
  return linkStyles;
18467
18624
  }
18468
18625
  render() {
18626
+ var _a;
18469
18627
  const targetValue = this.target || (this.external ? '_blank' : undefined);
18470
18628
  const showExternalIcon = this.external;
18471
- const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
18472
- 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 &&
18473
- hAsync("pds-icon", { key: '9553a8256b6811296ea4b762e32662c1a2f4aecf', icon: launch, size: this.fontSize })));
18629
+ const opensInNewTab = targetValue === '_blank';
18630
+ const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
18631
+ // A `target` other than _blank overrides `external`, and then the label
18632
+ // would be false, so the icon is decorative there, as it is when the
18633
+ // label is empty.
18634
+ const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
18635
+ const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
18636
+ 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 &&
18637
+ hAsync("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
18474
18638
  }
18475
18639
  static get style() { return pdsLinkCss(); }
18476
18640
  static get cmpMeta() { return {
@@ -18482,6 +18646,7 @@ class PdsLink {
18482
18646
  "download": [1],
18483
18647
  "componentId": [1, "component-id"],
18484
18648
  "external": [4],
18649
+ "externalLabel": [1, "external-label"],
18485
18650
  "target": [1],
18486
18651
  "variant": [1],
18487
18652
  "fontSize": [1, "font-size"],
@@ -18569,7 +18734,7 @@ class PdsLoader {
18569
18734
  'aria-live': 'polite',
18570
18735
  };
18571
18736
  this.hostKeeper.record(hostClass, {}, hostAttributes);
18572
- 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..."))));
18737
+ 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..."))));
18573
18738
  }
18574
18739
  get el() { return getElement(this); }
18575
18740
  static get watchers() { return {
@@ -18593,12 +18758,6 @@ class PdsLoader {
18593
18758
  }; }
18594
18759
  }
18595
18760
 
18596
- 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}`;
18597
-
18598
- const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
18599
- const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
18600
- /\d/.test(value) &&
18601
- (typeof CSS === 'undefined' || CSS.supports('max-width', value));
18602
18761
  const TABBABLE = [
18603
18762
  'a[href]',
18604
18763
  'area[href]',
@@ -18680,6 +18839,13 @@ function tabbableIn(root) {
18680
18839
  });
18681
18840
  return oneRadioPerGroup(visible);
18682
18841
  }
18842
+
18843
+ 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}`;
18844
+
18845
+ const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
18846
+ const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
18847
+ /\d/.test(value) &&
18848
+ (typeof CSS === 'undefined' || CSS.supports('max-width', value));
18683
18849
  /** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
18684
18850
  function containsComposed(ancestor, node) {
18685
18851
  for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
@@ -18695,7 +18861,7 @@ function containsComposed(ancestor, node) {
18695
18861
  */
18696
18862
  const openModals = new Map();
18697
18863
  let openSequence = 0;
18698
- /** Whether an open auto popover's panel sits in `root`, including inside shadow roots under it. */
18864
+ /** Whether the panel of an open popover that takes Escape sits in `root`, including inside shadow roots under it. */
18699
18865
  function hasOpenPopover(root) {
18700
18866
  if (root.querySelector('[data-pds-popover-open]'))
18701
18867
  return true;
@@ -19242,14 +19408,14 @@ class PdsModal {
19242
19408
  }
19243
19409
  render() {
19244
19410
  const [sizeClass = 'md', customSize] = this.resolveSize();
19245
- return (hAsync("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
19411
+ return (hAsync("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
19246
19412
  'pds-modal__backdrop': true,
19247
19413
  'open': this.open
19248
- }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
19414
+ }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
19249
19415
  'pds-modal': true,
19250
19416
  [`pds-modal--${sizeClass}`]: true,
19251
19417
  'pds-modal--scrollable': this.scrollable
19252
- }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
19418
+ }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
19253
19419
  }
19254
19420
  get el() { return getElement(this); }
19255
19421
  static get watchers() { return {
@@ -19300,6 +19466,21 @@ class PdsModalContent {
19300
19466
  * Tracks whether the border prop was explicitly set by the user
19301
19467
  */
19302
19468
  this.userSetBorder = false;
19469
+ this.hasLoaded = false;
19470
+ /**
19471
+ * Handle scroll events
19472
+ */
19473
+ this.handleScroll = () => {
19474
+ this.updateBorders();
19475
+ };
19476
+ /**
19477
+ * Handle resize events
19478
+ */
19479
+ this.handleResize = () => {
19480
+ this.calculateMaxHeight();
19481
+ // Update borders after resize as content scrollability might change
19482
+ setTimeout(() => this.updateBorders(), 50);
19483
+ };
19303
19484
  }
19304
19485
  // Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
19305
19486
  componentDidRender() {
@@ -19313,43 +19494,30 @@ class PdsModalContent {
19313
19494
  this.userSetBorder = hasBorderAttribute || this.border !== 'none';
19314
19495
  }
19315
19496
  componentDidLoad() {
19497
+ this.hasLoaded = true;
19316
19498
  this.calculateMaxHeight();
19317
- // Set up resize listener
19318
- window.addEventListener('resize', this.handleResize.bind(this));
19319
- // Only set up scroll listener for border updates if borders are managed automatically
19320
19499
  if (!this.userSetBorder) {
19321
- setTimeout(() => {
19322
- // The scroll happens on the component element itself (this.el), not the inner div
19323
- this.el.addEventListener('scroll', this.handleScroll.bind(this));
19324
- // Initial border update after everything is set up
19325
- setTimeout(() => this.updateBorders(), 100);
19326
- }, 100);
19500
+ // Initial border update after everything is set up
19501
+ setTimeout(() => this.updateBorders(), 200);
19327
19502
  }
19328
19503
  }
19504
+ // Here rather than in componentDidLoad, which runs once: content taken out of the page and put
19505
+ // back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
19506
+ connectedCallback() {
19507
+ window.addEventListener('resize', this.handleResize);
19508
+ // The scroll happens on the component element itself (this.el), not the inner div
19509
+ this.el.addEventListener('scroll', this.handleScroll);
19510
+ if (this.hasLoaded)
19511
+ this.calculateMaxHeight();
19512
+ }
19329
19513
  disconnectedCallback() {
19330
- window.removeEventListener('resize', this.handleResize.bind(this));
19331
- // Clean up scroll listener only if it was set up
19332
- if (!this.userSetBorder) {
19333
- this.el.removeEventListener('scroll', this.handleScroll.bind(this));
19334
- }
19514
+ window.removeEventListener('resize', this.handleResize);
19515
+ this.el.removeEventListener('scroll', this.handleScroll);
19335
19516
  if (this.mutationObserver) {
19336
19517
  this.mutationObserver.disconnect();
19518
+ this.mutationObserver = undefined;
19337
19519
  }
19338
19520
  }
19339
- /**
19340
- * Handle scroll events
19341
- */
19342
- handleScroll() {
19343
- this.updateBorders();
19344
- }
19345
- /**
19346
- * Handle resize events
19347
- */
19348
- handleResize() {
19349
- this.calculateMaxHeight();
19350
- // Update borders after resize as content scrollability might change
19351
- setTimeout(() => this.updateBorders(), 50);
19352
- }
19353
19521
  /**
19354
19522
  * Updates border visibility based on scroll state (only if not user-defined)
19355
19523
  */
@@ -19466,10 +19634,10 @@ class PdsModalContent {
19466
19634
  render() {
19467
19635
  // Only apply max-height style if it's not 'none'
19468
19636
  const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
19469
- return (hAsync(Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, hAsync("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
19637
+ return (hAsync(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, hAsync("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
19470
19638
  'pds-modal-content': true,
19471
19639
  [`pds-modal-content--border-${this.border}`]: true
19472
- }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
19640
+ }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
19473
19641
  }
19474
19642
  get el() { return getElement(this); }
19475
19643
  static get style() { return pdsModalContentCss(); }
@@ -19500,7 +19668,7 @@ class PdsModalFooter {
19500
19668
  unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
19501
19669
  }
19502
19670
  render() {
19503
- return (hAsync("footer", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__footer" }, hAsync("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
19671
+ return (hAsync("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, hAsync("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
19504
19672
  }
19505
19673
  get el() { return getElement(this); }
19506
19674
  static get style() { return pdsModalFooterCss(); }
@@ -19528,7 +19696,7 @@ class PdsModalHeader {
19528
19696
  unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
19529
19697
  }
19530
19698
  render() {
19531
- return (hAsync("header", { key: 'ee3ac5fb9b00a943aa86c3434ea07291b74d776c', class: "pds-modal__header" }, hAsync("slot", { key: '0b0f7ff257635723099c536648a826be8dcc05e7' })));
19699
+ return (hAsync("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, hAsync("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
19532
19700
  }
19533
19701
  get el() { return getElement(this); }
19534
19702
  static get style() { return pdsModalHeaderCss(); }
@@ -20725,7 +20893,7 @@ class PdsMultiselect {
20725
20893
  'pds-multiselect__option--selected': isSelected,
20726
20894
  'pds-multiselect__option--create': isCreateOption,
20727
20895
  'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
20728
- }, 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)));
20896
+ }, 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)));
20729
20897
  }
20730
20898
  renderOptionAction(option, optionId, isHighlighted) {
20731
20899
  var _a;
@@ -20748,7 +20916,7 @@ class PdsMultiselect {
20748
20916
  const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
20749
20917
  const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
20750
20918
  const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
20751
- 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) => {
20919
+ 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) => {
20752
20920
  if (item.type === 'group') {
20753
20921
  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)))));
20754
20922
  }
@@ -20807,10 +20975,10 @@ class PdsMultiselect {
20807
20975
  }
20808
20976
  render() {
20809
20977
  const hasSelections = this.selectedItems.length > 0;
20810
- 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: {
20978
+ 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: {
20811
20979
  'pds-multiselect__label': true,
20812
20980
  'visually-hidden': this.hideLabel,
20813
- } }, 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: {
20981
+ } }, 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: {
20814
20982
  'pds-multiselect__trigger': true,
20815
20983
  'pds-multiselect__trigger--open': this.isOpen,
20816
20984
  'pds-multiselect__trigger--disabled': this.disabled,
@@ -20826,7 +20994,7 @@ class PdsMultiselect {
20826
20994
  }, 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: {
20827
20995
  'pds-multiselect__trigger-text': true,
20828
20996
  'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
20829
- } }, 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' })))));
20997
+ } }, 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' })))));
20830
20998
  }
20831
20999
  static get formAssociated() { return true; }
20832
21000
  get el() { return getElement(this); }
@@ -20964,10 +21132,32 @@ const cssEscape = (value) => {
20964
21132
  return result;
20965
21133
  };
20966
21134
 
20967
- 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}`;
21135
+ 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}`;
20968
21136
 
20969
- /** Open auto popovers, in the order they opened: Escape goes to the last one it applies to. */
20970
- const openAutoPopovers = [];
21137
+ /** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
21138
+ const popoversTakingEscape = [];
21139
+ /** Hovering the trigger waits this long before opening, so a pointer passing over it doesn't open it. */
21140
+ const HOVER_OPEN_DELAY_MS = 120;
21141
+ /** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
21142
+ const HOVER_CLOSE_DELAY_MS = 200;
21143
+ /**
21144
+ * floating-ui reporting viewport coordinates, as `position: fixed` uses without a containing block. Its own
21145
+ * containing-block check misses a backdrop filter in WebKit, so handlePopoverPositioning corrects for one itself.
21146
+ */
21147
+ const viewportPlatform = Object.assign(Object.assign({}, platform), { getOffsetParent: () => window });
21148
+ /**
21149
+ * Where `top: 0; left: 0` puts a fixed element beside the given one. An empty probe is measured instead of the
21150
+ * element, whose own transforms, such as an entrance animation, would otherwise read as part of the offset.
21151
+ */
21152
+ const containingBlockOrigin = (element) => {
21153
+ var _a;
21154
+ const probe = document.createElement('div');
21155
+ probe.style.cssText = 'all: initial; position: fixed; top: 0; left: 0;';
21156
+ (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(probe, element);
21157
+ const { top, left } = probe.getBoundingClientRect();
21158
+ probe.remove();
21159
+ return { top, left };
21160
+ };
20971
21161
  /** The focused element, followed down through shadow roots to the control that has focus. */
20972
21162
  function deepActiveElement() {
20973
21163
  var _a;
@@ -20976,6 +21166,27 @@ function deepActiveElement() {
20976
21166
  active = active.shadowRoot.activeElement;
20977
21167
  return active;
20978
21168
  }
21169
+ /** `node`, or the shadow host it sits in, lifted until it shares a tree with `other` or reaches the document. */
21170
+ function liftToTreeOf(node, other) {
21171
+ let current = node;
21172
+ while (current.getRootNode() !== other.getRootNode() && current.getRootNode() instanceof ShadowRoot) {
21173
+ current = current.getRootNode().host;
21174
+ }
21175
+ return current;
21176
+ }
21177
+ /**
21178
+ * Where `node` sits relative to `ref`, as `compareDocumentPosition` reports it. Whichever of the two
21179
+ * is inside a shadow root is lifted to its host first, so a control inside a component compares too.
21180
+ */
21181
+ function positionAcrossTrees(ref, node) {
21182
+ const lifted = liftToTreeOf(node, ref);
21183
+ return liftToTreeOf(ref, lifted).compareDocumentPosition(lifted);
21184
+ }
21185
+ const isPosition = (position, flag) => (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & flag) !== 0;
21186
+ /** The popover each panel belongs to, so a popover inside another one's panel can find it. */
21187
+ const panelOwners = new WeakMap();
21188
+ /** Floating layers Pine components put at the end of the page or of a dialog, as a popover does its panel. */
21189
+ const FLOATING_LAYERS = '.pds-popover, .pds-datepicker-calendar-portal, .pds-combobox-dropdown-portal';
20979
21190
  /**
20980
21191
  * @slot trigger - The trigger element for the popover
20981
21192
  * @slot (default) - The content to display inside the popover
@@ -21015,14 +21226,21 @@ class PdsPopover {
21015
21226
  */
21016
21227
  this.portalEl = null;
21017
21228
  /**
21018
- * Guard to prevent repositioning loops
21229
+ * Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
21230
+ */
21231
+ this.stopAutoUpdate = null;
21232
+ /**
21233
+ * Counts positioning runs, so a run that resolves after a newer one started is dropped
21019
21234
  */
21020
- this.isRepositioning = false;
21235
+ this.positioningRun = 0;
21021
21236
  /**
21022
- * Debounce timers for performance optimization
21237
+ * The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
21023
21238
  */
21024
- this.scrollDebounceTimer = null;
21025
- this.resizeDebounceTimer = null;
21239
+ this.positioning = Promise.resolve();
21240
+ /**
21241
+ * Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
21242
+ */
21243
+ this.openEventPending = false;
21026
21244
  /**
21027
21245
  * Track moved nodes and their placeholders for restoration
21028
21246
  */
@@ -21031,11 +21249,41 @@ class PdsPopover {
21031
21249
  * Timestamp when popover was opened (for preventing immediate close)
21032
21250
  */
21033
21251
  this.openTimestamp = 0;
21252
+ /**
21253
+ * Set while hover holds the popover open, until a click pins it or it closes
21254
+ */
21255
+ this.hoverOpened = false;
21256
+ /**
21257
+ * Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
21258
+ */
21259
+ this.closeWhenFocusLeaves = false;
21260
+ /**
21261
+ * How far the pointer was from the panel at its last move after leaving the trigger
21262
+ */
21263
+ this.panelDistance = Infinity;
21264
+ /**
21265
+ * Stands in for the panel in the Tab order, right after the trigger, while the popover is open
21266
+ */
21267
+ this.tabGuardEl = null;
21268
+ /**
21269
+ * Set while focus passes through the guard on its way out of the panel
21270
+ */
21271
+ this.leavingPanel = false;
21272
+ /**
21273
+ * The direction of the Tab key being handled, until its default action has run
21274
+ */
21275
+ this.tabDirection = null;
21034
21276
  /**
21035
21277
  * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
21036
21278
  * @defaultValue "show"
21037
21279
  */
21038
21280
  this.popoverTargetAction = 'show';
21281
+ /**
21282
+ * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
21283
+ * when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
21284
+ * @defaultValue "click"
21285
+ */
21286
+ this.openOn = 'click';
21039
21287
  /**
21040
21288
  * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
21041
21289
  * Manual popovers require the consumer to handle the visibility of the popover.
@@ -21046,6 +21294,11 @@ class PdsPopover {
21046
21294
  * @defaultValue 352
21047
21295
  */
21048
21296
  this.maxWidth = 352;
21297
+ /**
21298
+ * Sets the padding of the popover content
21299
+ * @defaultValue "md"
21300
+ */
21301
+ this.padding = 'md';
21049
21302
  /**
21050
21303
  * Determines the preferred position of the popover
21051
21304
  * @defaultValue "right"
@@ -21060,6 +21313,7 @@ class PdsPopover {
21060
21313
  // Clean up previous trigger's event listener if it exists
21061
21314
  if (this.triggerEl != null) {
21062
21315
  this.triggerEl.removeEventListener('click', this.handleTriggerClick);
21316
+ this.stopListeningForHover(this.triggerEl);
21063
21317
  }
21064
21318
  if (assignedElements.length > 0) {
21065
21319
  // Use the first assigned element as the trigger
@@ -21067,10 +21321,14 @@ class PdsPopover {
21067
21321
  this.linkTriggerToPortal();
21068
21322
  // Attach click listener to handle popover visibility
21069
21323
  this.triggerEl.addEventListener('click', this.handleTriggerClick);
21324
+ this.listenForHover(this.triggerEl);
21070
21325
  }
21071
21326
  else {
21072
21327
  this.triggerEl = null;
21073
21328
  }
21329
+ // autoUpdate watches the trigger it started with, so an open popover starts it again on the new one.
21330
+ if (this.active)
21331
+ this.addScrollAndResizeListeners();
21074
21332
  this.observeTrigger();
21075
21333
  };
21076
21334
  /**
@@ -21093,6 +21351,13 @@ class PdsPopover {
21093
21351
  if (!anchorWithHref) {
21094
21352
  event.preventDefault();
21095
21353
  }
21354
+ if (this.openOn === 'hover' && this.popoverTargetAction !== 'hide') {
21355
+ const heldByHover = this.hoverOpened;
21356
+ this.pin();
21357
+ // Pinning, not toggling: the hover before a click has already opened it.
21358
+ if (heldByHover)
21359
+ return;
21360
+ }
21096
21361
  // Execute the appropriate action based on popoverTargetAction prop
21097
21362
  switch (this.popoverTargetAction) {
21098
21363
  case 'show':
@@ -21107,6 +21372,60 @@ class PdsPopover {
21107
21372
  break;
21108
21373
  }
21109
21374
  };
21375
+ // A tap sends touch pointer events and then a click, so touch takes the click path alone.
21376
+ this.handleHoverEnter = (event) => {
21377
+ if (event.pointerType === 'touch')
21378
+ return;
21379
+ this.clearHoverTimers();
21380
+ if (this.active)
21381
+ return;
21382
+ this.hoverOpenTimer = setTimeout(() => {
21383
+ this.hoverOpenTimer = undefined;
21384
+ if (this.active || this.portalEl == null)
21385
+ return;
21386
+ this.hoverOpened = true;
21387
+ this.show();
21388
+ }, HOVER_OPEN_DELAY_MS);
21389
+ };
21390
+ this.handleHoverLeave = (event) => {
21391
+ if (event.pointerType === 'touch')
21392
+ return;
21393
+ this.clearHoverTimers();
21394
+ if (!this.hoverOpened)
21395
+ return;
21396
+ this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
21397
+ if (event.currentTarget !== this.triggerEl)
21398
+ return;
21399
+ this.panelDistance = this.distanceToPanel(event);
21400
+ document.addEventListener('pointermove', this.handleMoveTowardPanel);
21401
+ };
21402
+ // A slow diagonal from the trigger to a panel shorter than it runs beside the panel for longer
21403
+ // than the close delay, so each move that brings the pointer closer starts the delay again.
21404
+ this.handleMoveTowardPanel = (event) => {
21405
+ const distance = this.distanceToPanel(event);
21406
+ if (distance < this.panelDistance) {
21407
+ clearTimeout(this.hoverCloseTimer);
21408
+ this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
21409
+ }
21410
+ this.panelDistance = distance;
21411
+ };
21412
+ this.handleHoverFocusOut = (event) => {
21413
+ if (!this.closeWhenFocusLeaves || containsComposed$1(this.portalEl, event.relatedTarget))
21414
+ return;
21415
+ this.closeWhenFocusLeaves = false;
21416
+ this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
21417
+ };
21418
+ this.closeFromHover = () => {
21419
+ this.clearHoverTimers();
21420
+ if (!this.hoverOpened)
21421
+ return;
21422
+ // Content shown on hover stays while focus is in it (WCAG 1.4.13).
21423
+ if (containsComposed$1(this.portalEl, deepActiveElement())) {
21424
+ this.closeWhenFocusLeaves = true;
21425
+ return;
21426
+ }
21427
+ this.hide();
21428
+ };
21110
21429
  /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
21111
21430
  this.shadowFocusStyle = null;
21112
21431
  /** The dialog the panel was opened in, closed along with it. */
@@ -21127,6 +21446,85 @@ class PdsPopover {
21127
21446
  event.stopPropagation();
21128
21447
  }
21129
21448
  };
21449
+ // At the end of the body or of a dialog, the panel would come last in the Tab order. The guard
21450
+ // after the trigger takes its place there, while the panel has a control for it to lead to.
21451
+ this.syncTabGuard = (event) => {
21452
+ if (event.key !== 'Tab')
21453
+ return;
21454
+ this.releasePanel();
21455
+ this.tabDirection = event.shiftKey ? 'backward' : 'forward';
21456
+ setTimeout(this.endTabKey);
21457
+ // Read on each Tab, as the panel's content can arrive after it opens.
21458
+ const guarding = this.guardedTabbables().length > 0;
21459
+ if (this.tabGuardEl != null)
21460
+ this.tabGuardEl.tabIndex = guarding ? 0 : -1;
21461
+ // Inert for this key press, the panel is reached only through the guard, either way round. A
21462
+ // control in another floating layer, such as a nested popover's panel, may move focus back into it.
21463
+ const focused = deepActiveElement();
21464
+ if (guarding && !containsComposed$1(this.portalEl, focused) && !closest$1(FLOATING_LAYERS, focused !== null && focused !== void 0 ? focused : document)) {
21465
+ this.portalEl.inert = true;
21466
+ }
21467
+ };
21468
+ this.endTabKey = () => {
21469
+ this.tabDirection = null;
21470
+ this.releasePanel();
21471
+ };
21472
+ this.handleTabGuardFocus = (event) => {
21473
+ if (this.leavingPanel)
21474
+ return;
21475
+ // An inert panel's controls aren't tabbable, so the guard would find none to send focus to.
21476
+ this.releasePanel();
21477
+ const tabbables = this.guardedTabbables();
21478
+ // A Tab press says which end of the panel focus comes in at; without one, where it came from does.
21479
+ const from = event.relatedTarget;
21480
+ const backward = this.tabDirection != null ? this.tabDirection === 'backward' : from != null && this.isAfterPopover(from);
21481
+ const target = backward ? tabbables[tabbables.length - 1] : tabbables[0];
21482
+ // Focus can reach the guard without a Tab keydown here (from a frame, or assistive tech) after
21483
+ // the panel's controls are gone. The trigger is the nearest visible place for it.
21484
+ if (target == null)
21485
+ this.returnFocusToTrigger();
21486
+ else
21487
+ target.focus();
21488
+ };
21489
+ this.handleTabFromPanel = (event) => {
21490
+ if (event.key !== 'Tab' || event.defaultPrevented || this.tabGuardEl == null)
21491
+ return;
21492
+ const tabbables = this.guardedTabbables();
21493
+ const edge = event.shiftKey ? tabbables[0] : tabbables[tabbables.length - 1];
21494
+ if (edge == null || deepActiveElement() !== edge)
21495
+ return;
21496
+ this.leavePanel(edge, event.shiftKey);
21497
+ };
21498
+ this.releasePanel = () => {
21499
+ if (this.portalEl != null)
21500
+ this.portalEl.inert = false;
21501
+ };
21502
+ }
21503
+ openOnChanged() {
21504
+ this.pin();
21505
+ this.stopListeningForHover(this.triggerEl);
21506
+ this.stopListeningForHover(this.portalEl);
21507
+ // Out of the page, connectedCallback binds them when it comes back.
21508
+ if (!this.isComponentMounted)
21509
+ return;
21510
+ this.listenForHover(this.triggerEl);
21511
+ this.listenForHover(this.portalEl);
21512
+ }
21513
+ applyPadding() {
21514
+ if (this.portalEl != null)
21515
+ this.portalEl.style.padding = this.paddingToken();
21516
+ }
21517
+ paddingToken() {
21518
+ switch (this.padding) {
21519
+ case 'none':
21520
+ return 'var(--pine-dimension-none)';
21521
+ case 'xs':
21522
+ return 'var(--pine-dimension-xs)';
21523
+ case 'sm':
21524
+ return 'var(--pine-dimension-sm)';
21525
+ default:
21526
+ return 'var(--pine-dimension-md)';
21527
+ }
21130
21528
  }
21131
21529
  restorePlacementDefault(newValue) {
21132
21530
  this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
@@ -21136,8 +21534,6 @@ class PdsPopover {
21136
21534
  // Bind event handlers for cleanup
21137
21535
  this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
21138
21536
  this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
21139
- this.boundScrollHandler = this.handleScroll.bind(this);
21140
- this.boundResizeHandler = this.handleResize.bind(this);
21141
21537
  // Create portal element
21142
21538
  this.createPortal();
21143
21539
  this.hasLoaded = true;
@@ -21178,6 +21574,48 @@ class PdsPopover {
21178
21574
  // Skips values already in place, so the trigger observer's own callback doesn't loop.
21179
21575
  return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
21180
21576
  }
21577
+ listenForHover(el) {
21578
+ if (this.openOn !== 'hover' || el == null)
21579
+ return;
21580
+ el.addEventListener('pointerenter', this.handleHoverEnter);
21581
+ el.addEventListener('pointerleave', this.handleHoverLeave);
21582
+ el.addEventListener('focusout', this.handleHoverFocusOut);
21583
+ }
21584
+ stopListeningForHover(el) {
21585
+ if (el == null)
21586
+ return;
21587
+ el.removeEventListener('pointerenter', this.handleHoverEnter);
21588
+ el.removeEventListener('pointerleave', this.handleHoverLeave);
21589
+ el.removeEventListener('focusout', this.handleHoverFocusOut);
21590
+ }
21591
+ distanceToPanel({ clientX, clientY }) {
21592
+ const panel = this.portalEl.getBoundingClientRect();
21593
+ return Math.hypot(Math.max(panel.left - clientX, 0, clientX - panel.right), Math.max(panel.top - clientY, 0, clientY - panel.bottom));
21594
+ }
21595
+ /**
21596
+ * Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
21597
+ * manual one gives up Escape again, which it took only while hover held it.
21598
+ */
21599
+ pin() {
21600
+ var _a;
21601
+ this.clearHoverTimers();
21602
+ if (!this.hoverOpened)
21603
+ return;
21604
+ this.hoverOpened = false;
21605
+ if (this.popoverType === 'auto')
21606
+ return;
21607
+ this.forgetOpen();
21608
+ (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-pds-popover-open');
21609
+ document.removeEventListener('keydown', this.boundEscapeKeyHandler);
21610
+ }
21611
+ clearHoverTimers() {
21612
+ clearTimeout(this.hoverOpenTimer);
21613
+ clearTimeout(this.hoverCloseTimer);
21614
+ this.hoverOpenTimer = undefined;
21615
+ this.hoverCloseTimer = undefined;
21616
+ this.closeWhenFocusLeaves = false;
21617
+ document.removeEventListener('pointermove', this.handleMoveTowardPanel);
21618
+ }
21181
21619
  // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
21182
21620
  // disconnectedCallback tore down. Each step is a no-op when nothing was.
21183
21621
  connectedCallback() {
@@ -21187,17 +21625,19 @@ class PdsPopover {
21187
21625
  this.isComponentMounted = true;
21188
21626
  this.createPortal();
21189
21627
  (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
21628
+ this.listenForHover(this.triggerEl);
21190
21629
  this.observeTrigger();
21191
21630
  this.linkTriggerToPortal();
21192
21631
  // Still open after a move: the trigger moved, so the portal follows it, into the dialog it
21193
21632
  // is in now, if any.
21194
21633
  if (this.active) {
21195
21634
  this.placePortal();
21196
- requestAnimationFrame(() => this.handlePopoverPositioning());
21635
+ // autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
21636
+ this.addScrollAndResizeListeners();
21197
21637
  }
21198
21638
  }
21199
21639
  disconnectedCallback() {
21200
- var _a;
21640
+ var _a, _b;
21201
21641
  // Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
21202
21642
  // already back in the page. Its portal is outside the popover, so it stays open, with focus
21203
21643
  // where it was; connectedCallback moves it to follow the popover.
@@ -21212,6 +21652,7 @@ class PdsPopover {
21212
21652
  this.restorePortalContent();
21213
21653
  this.active = false;
21214
21654
  this.linkTriggerToPortal();
21655
+ this.emitOpenEvent();
21215
21656
  this.pdsPopoverClose.emit({
21216
21657
  componentId: this.componentId,
21217
21658
  popoverType: this.popoverType,
@@ -21221,36 +21662,27 @@ class PdsPopover {
21221
21662
  if (this.triggerEl != null) {
21222
21663
  this.triggerEl.removeEventListener('click', this.handleTriggerClick);
21223
21664
  }
21665
+ this.stopListeningForHover(this.triggerEl);
21224
21666
  (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
21225
21667
  this.triggerObserver = null;
21226
21668
  // Clean up all event listeners
21227
21669
  this.removeLightDismissListeners();
21228
21670
  this.removeScrollAndResizeListeners();
21229
21671
  document.removeEventListener('submit', this.handleSubmitFromPanel, true);
21230
- // Clear any pending debounce timers
21231
- this.clearDebounceTimers();
21672
+ document.removeEventListener('keydown', this.syncTabGuard, true);
21673
+ (_b = this.tabGuardEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('tabindex');
21674
+ this.clearHoverTimers();
21675
+ this.hoverOpened = false;
21232
21676
  // Remove portal from DOM
21233
21677
  this.removePortal();
21234
21678
  }
21235
- /**
21236
- * Clears any pending debounce timers
21237
- */
21238
- clearDebounceTimers() {
21239
- if (this.scrollDebounceTimer !== null) {
21240
- clearTimeout(this.scrollDebounceTimer);
21241
- this.scrollDebounceTimer = null;
21242
- }
21243
- if (this.resizeDebounceTimer !== null) {
21244
- clearTimeout(this.resizeDebounceTimer);
21245
- this.resizeDebounceTimer = null;
21246
- }
21247
- }
21248
21679
  createPortal() {
21249
21680
  var _a;
21250
21681
  if (this.portalEl !== null)
21251
21682
  return;
21252
21683
  this.portalEl = document.createElement('div');
21253
21684
  this.portalEl.className = 'pds-popover';
21685
+ panelOwners.set(this.portalEl, this);
21254
21686
  // Apply all styles inline since portal is outside shadow DOM
21255
21687
  this.portalEl.style.position = 'fixed';
21256
21688
  this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
@@ -21262,7 +21694,7 @@ class PdsPopover {
21262
21694
  this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
21263
21695
  this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
21264
21696
  this.portalEl.style.margin = 'var(--pine-dimension-none)';
21265
- this.portalEl.style.padding = 'var(--pine-dimension-md)';
21697
+ this.portalEl.style.padding = this.paddingToken();
21266
21698
  // Generate unique ID
21267
21699
  if (!this.componentId) {
21268
21700
  (_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
@@ -21276,6 +21708,8 @@ class PdsPopover {
21276
21708
  // Add global focus styles to match Pine design system
21277
21709
  // This is done after appending to ensure it's part of the document and can access CSS variables
21278
21710
  this.addPortalFocusStyles();
21711
+ this.listenForHover(this.portalEl);
21712
+ this.portalEl.addEventListener('keydown', this.handleTabFromPanel);
21279
21713
  }
21280
21714
  /**
21281
21715
  * Adds Pine design system focus styles and dark mode border to the portal element
@@ -21403,27 +21837,40 @@ class PdsPopover {
21403
21837
  // Update portal content with latest slot content
21404
21838
  this.updatePortalContent();
21405
21839
  // Show portal. The attribute tells a modal around it that this popover takes Escape first; only
21406
- // an auto popover listens for Escape.
21407
- if (this.popoverType === 'auto')
21840
+ // an auto popover, or one hover opened, listens for Escape.
21841
+ if (this.popoverType === 'auto' || this.hoverOpened)
21408
21842
  this.portalEl.setAttribute('data-pds-popover-open', '');
21409
21843
  this.portalEl.style.display = 'block';
21410
21844
  this.portalEl.style.opacity = '1';
21411
21845
  this.portalEl.style.visibility = 'visible';
21412
- // Position the popover
21413
- requestAnimationFrame(() => {
21414
- if (!this.isComponentMounted)
21415
- return;
21416
- this.handlePopoverPositioning();
21417
- });
21418
- // Add scroll and resize listeners for repositioning (always)
21846
+ // Position the popover now, and again whenever its trigger or the page moves or resizes
21419
21847
  this.addScrollAndResizeListeners();
21420
21848
  document.addEventListener('submit', this.handleSubmitFromPanel, true);
21421
- // Add document listeners for light dismiss and escape key (auto type only)
21849
+ document.addEventListener('keydown', this.syncTabGuard, true);
21850
+ // Add document listeners for light dismiss and escape key (auto type only), or for the escape
21851
+ // key alone while hover holds a manual popover open
21422
21852
  if (this.popoverType === 'auto') {
21423
- openAutoPopovers.push(this);
21853
+ popoversTakingEscape.push(this);
21424
21854
  this.addLightDismissListeners();
21425
21855
  }
21426
- // Emit open event
21856
+ else if (this.hoverOpened) {
21857
+ popoversTakingEscape.push(this);
21858
+ document.addEventListener('keydown', this.boundEscapeKeyHandler);
21859
+ }
21860
+ // Emit open event once the panel is positioned, with the side it took already on it. A reconnect, a
21861
+ // trigger swap or another show() can start a newer run meanwhile, which drops this one, so wait for the latest.
21862
+ this.openEventPending = true;
21863
+ let positioning;
21864
+ do {
21865
+ positioning = this.positioning;
21866
+ await positioning;
21867
+ } while (positioning !== this.positioning);
21868
+ this.emitOpenEvent();
21869
+ }
21870
+ emitOpenEvent() {
21871
+ if (!this.openEventPending)
21872
+ return;
21873
+ this.openEventPending = false;
21427
21874
  this.pdsPopoverOpen.emit({
21428
21875
  componentId: this.componentId,
21429
21876
  popoverType: this.popoverType,
@@ -21433,9 +21880,12 @@ class PdsPopover {
21433
21880
  * Closes the popover programmatically
21434
21881
  */
21435
21882
  async hide() {
21883
+ var _a;
21884
+ this.clearHoverTimers();
21436
21885
  if (!this.active || !this.portalEl)
21437
21886
  return;
21438
21887
  this.active = false;
21888
+ this.hoverOpened = false;
21439
21889
  this.unwatchDialogClose();
21440
21890
  // Restoring the content drops its focus to the body, so check where focus is first. In a
21441
21891
  // shadow root, document.activeElement is only its host.
@@ -21446,6 +21896,7 @@ class PdsPopover {
21446
21896
  // Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
21447
21897
  this.portalEl.style.border = '';
21448
21898
  this.portalEl.removeAttribute('data-pds-popover-open');
21899
+ this.portalEl.removeAttribute('data-pds-popover-placement');
21449
21900
  this.portalEl.style.display = 'none';
21450
21901
  this.portalEl.style.opacity = '0';
21451
21902
  this.portalEl.style.visibility = 'hidden';
@@ -21459,8 +21910,11 @@ class PdsPopover {
21459
21910
  this.removeLightDismissListeners();
21460
21911
  this.removeScrollAndResizeListeners();
21461
21912
  document.removeEventListener('submit', this.handleSubmitFromPanel, true);
21462
- // Clear any pending timers
21463
- this.clearDebounceTimers();
21913
+ document.removeEventListener('keydown', this.syncTabGuard, true);
21914
+ (_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
21915
+ this.releasePanel();
21916
+ // Closed before its first position resolved, it still announces the open before the close.
21917
+ this.emitOpenEvent();
21464
21918
  // Emit close event
21465
21919
  this.pdsPopoverClose.emit({
21466
21920
  componentId: this.componentId,
@@ -21472,10 +21926,10 @@ class PdsPopover {
21472
21926
  */
21473
21927
  async toggle() {
21474
21928
  if (this.active) {
21475
- this.hide();
21929
+ await this.hide();
21476
21930
  }
21477
21931
  else {
21478
- this.show();
21932
+ await this.show();
21479
21933
  }
21480
21934
  }
21481
21935
  /**
@@ -21514,9 +21968,9 @@ class PdsPopover {
21514
21968
  this.portalEl.style.border = root instanceof ShadowRoot && closest$1('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
21515
21969
  }
21516
21970
  forgetOpen() {
21517
- const index = openAutoPopovers.indexOf(this);
21971
+ const index = popoversTakingEscape.indexOf(this);
21518
21972
  if (index >= 0)
21519
- openAutoPopovers.splice(index, 1);
21973
+ popoversTakingEscape.splice(index, 1);
21520
21974
  }
21521
21975
  /**
21522
21976
  * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
@@ -21559,19 +22013,62 @@ class PdsPopover {
21559
22013
  document.removeEventListener('click', this.boundClickOutsideHandler, true);
21560
22014
  document.removeEventListener('keydown', this.boundEscapeKeyHandler);
21561
22015
  }
22016
+ /**
22017
+ * The panel's controls that Tab reaches through the guard. None when the panel sits right after
22018
+ * the popover, in a dialog, where it's already next in the Tab order.
22019
+ */
22020
+ guardedTabbables() {
22021
+ if (this.portalEl == null || this.el.nextElementSibling === this.portalEl)
22022
+ return [];
22023
+ return tabbableIn(this.portalEl);
22024
+ }
22025
+ isAfterPopover(node) {
22026
+ if (containsComposed$1(this.el, node))
22027
+ return false;
22028
+ return isPosition(positionAcrossTrees(this.el, node), Node.DOCUMENT_POSITION_FOLLOWING);
22029
+ }
22030
+ /**
22031
+ * Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
22032
+ * Inert until then, the panel can't be where it lands.
22033
+ */
22034
+ leavePanel(edge, backward) {
22035
+ var _a, _b;
22036
+ this.leavingPanel = true;
22037
+ (_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.focus();
22038
+ this.leavingPanel = false;
22039
+ this.portalEl.inert = true;
22040
+ setTimeout(() => this.finishLeavingPanel(edge));
22041
+ // Last in another popover's panel, the guard hands the Tab on to that popover's own guard.
22042
+ const outer = panelOwners.get(closest$1('.pds-popover', this.el));
22043
+ const outerTabbables = (_b = outer === null || outer === void 0 ? void 0 : outer.guardedTabbables()) !== null && _b !== void 0 ? _b : [];
22044
+ if (!backward && outerTabbables[outerTabbables.length - 1] === this.tabGuardEl)
22045
+ outer.leavePanel(edge, false);
22046
+ }
22047
+ // With nowhere for the browser's Tab to go, focus would stay on the invisible guard.
22048
+ finishLeavingPanel(edge) {
22049
+ var _a;
22050
+ this.releasePanel();
22051
+ if (this.active && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.tabGuardEl)
22052
+ edge.focus();
22053
+ }
21562
22054
  /**
21563
22055
  * Adds scroll and resize listeners for repositioning
21564
22056
  */
21565
22057
  addScrollAndResizeListeners() {
21566
- window.addEventListener('scroll', this.boundScrollHandler, true);
21567
- window.addEventListener('resize', this.boundResizeHandler);
22058
+ this.removeScrollAndResizeListeners();
22059
+ if (this.triggerEl == null || this.portalEl == null)
22060
+ return;
22061
+ this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
22062
+ this.positioning = this.handlePopoverPositioning().catch(error => console.warn('pds-popover: failed to position the panel', error));
22063
+ });
21568
22064
  }
21569
22065
  /**
21570
22066
  * Removes scroll and resize listeners
21571
22067
  */
21572
22068
  removeScrollAndResizeListeners() {
21573
- window.removeEventListener('scroll', this.boundScrollHandler, true);
21574
- window.removeEventListener('resize', this.boundResizeHandler);
22069
+ var _a;
22070
+ (_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
22071
+ this.stopAutoUpdate = null;
21575
22072
  }
21576
22073
  /**
21577
22074
  * Handles clicks outside the popover for light dismiss (auto type only)
@@ -21625,7 +22122,7 @@ class PdsPopover {
21625
22122
  return;
21626
22123
  // Like the native Popover API, Escape closes only the top popover: the last one opened that
21627
22124
  // it applies to. Every open popover hears it, so each checks whether it's that one.
21628
- const top = [...openAutoPopovers].reverse().find(popover => popover.takesEscapeFrom(event));
22125
+ const top = [...popoversTakingEscape].reverse().find(popover => popover.takesEscapeFrom(event));
21629
22126
  if (top !== this)
21630
22127
  return;
21631
22128
  // Take the key, so the dialog or modal around it doesn't close too.
@@ -21635,125 +22132,47 @@ class PdsPopover {
21635
22132
  this.hide();
21636
22133
  }
21637
22134
  /**
21638
- * Handles scroll events to reposition the popover (debounced for performance)
21639
- */
21640
- handleScroll() {
21641
- if (!this.active)
21642
- return;
21643
- if (this.scrollDebounceTimer !== null) {
21644
- clearTimeout(this.scrollDebounceTimer);
21645
- }
21646
- this.scrollDebounceTimer = setTimeout(() => {
21647
- this.handlePopoverPositioning();
21648
- this.scrollDebounceTimer = null;
21649
- }, 10); // 10ms debounce for smooth repositioning
21650
- }
21651
- /**
21652
- * Handles resize events to reposition the popover (debounced for performance)
22135
+ * Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
22136
+ * room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
21653
22137
  */
21654
- handleResize() {
21655
- if (!this.active)
21656
- return;
21657
- if (this.resizeDebounceTimer !== null) {
21658
- clearTimeout(this.resizeDebounceTimer);
21659
- }
21660
- this.resizeDebounceTimer = setTimeout(() => {
21661
- this.handlePopoverPositioning();
21662
- this.resizeDebounceTimer = null;
21663
- }, 100); // 100ms debounce for resize
21664
- }
21665
- /**
21666
- * Positions the popover relative to its trigger element
21667
- */
21668
- handlePopoverPositioning() {
21669
- // Prevent repositioning loops
21670
- if (this.isRepositioning) {
21671
- return;
21672
- }
21673
- this.isRepositioning = true;
21674
- if (this.triggerEl == null || this.portalEl == null) {
21675
- this.isRepositioning = false;
22138
+ async handlePopoverPositioning() {
22139
+ // Counted before the guards, so a run still in flight is dropped even when this one can't position.
22140
+ const run = ++this.positioningRun;
22141
+ if (this.triggerEl == null || this.portalEl == null)
21676
22142
  return;
21677
- }
21678
- const triggerRect = this.triggerEl.getBoundingClientRect();
21679
- const popoverRect = this.portalEl.getBoundingClientRect();
21680
22143
  // Safety check: ensure trigger has valid dimensions (is rendered and visible)
21681
- if (triggerRect.width === 0 || triggerRect.height === 0) {
21682
- this.isRepositioning = false;
22144
+ const triggerRect = this.triggerEl.getBoundingClientRect();
22145
+ if (triggerRect.width === 0 || triggerRect.height === 0)
21683
22146
  return;
21684
- }
21685
- let top = 0;
21686
- let left = 0;
21687
- const offset = 8;
21688
- switch (this.placement) {
21689
- case 'top':
21690
- top = triggerRect.top - popoverRect.height - offset;
21691
- left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
21692
- break;
21693
- case 'top-start':
21694
- top = triggerRect.top - popoverRect.height - offset;
21695
- left = triggerRect.left;
21696
- break;
21697
- case 'top-end':
21698
- top = triggerRect.top - popoverRect.height - offset;
21699
- left = triggerRect.right - popoverRect.width;
21700
- break;
21701
- case 'right':
21702
- top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
21703
- left = triggerRect.right + offset;
21704
- break;
21705
- case 'right-start':
21706
- top = triggerRect.top;
21707
- left = triggerRect.right + offset;
21708
- break;
21709
- case 'right-end':
21710
- top = triggerRect.bottom - popoverRect.height;
21711
- left = triggerRect.right + offset;
21712
- break;
21713
- case 'bottom':
21714
- top = triggerRect.bottom + offset;
21715
- left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
21716
- break;
21717
- case 'bottom-start':
21718
- top = triggerRect.bottom + offset;
21719
- left = triggerRect.left;
21720
- break;
21721
- case 'bottom-end':
21722
- top = triggerRect.bottom + offset;
21723
- left = triggerRect.right - popoverRect.width;
21724
- break;
21725
- case 'left':
21726
- top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
21727
- left = triggerRect.left - popoverRect.width - offset;
21728
- break;
21729
- case 'left-start':
21730
- top = triggerRect.top;
21731
- left = triggerRect.left - popoverRect.width - offset;
21732
- break;
21733
- case 'left-end':
21734
- top = triggerRect.bottom - popoverRect.height;
21735
- left = triggerRect.left - popoverRect.width - offset;
21736
- break;
21737
- }
21738
- this.portalEl.style.top = `${top}px`;
21739
- this.portalEl.style.left = `${left}px`;
22147
+ const portal = this.portalEl;
22148
+ const { x: left, y: top, placement } = await computePosition(this.triggerEl, portal, {
22149
+ placement: this.placement,
22150
+ strategy: 'fixed',
22151
+ // With no room on either side, stay on the preferred side: the side that overflows less can still push
22152
+ // a tall panel's start above the viewport.
22153
+ middleware: [offset(8), flip({ fallbackStrategy: 'initialPlacement' }), shift({ padding: 8 })],
22154
+ platform: viewportPlatform,
22155
+ });
22156
+ if (!this.active || run !== this.positioningRun || portal !== this.portalEl)
22157
+ return;
22158
+ portal.setAttribute('data-pds-popover-placement', placement);
21740
22159
  // `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
21741
- // as a modal dialog does with its backdrop filter. Shift by however far it landed from the spot.
21742
- const placed = this.portalEl.getBoundingClientRect();
21743
- if (Math.abs(placed.top - top) > 0.5 || Math.abs(placed.left - left) > 0.5) {
21744
- this.portalEl.style.top = `${2 * top - placed.top}px`;
21745
- this.portalEl.style.left = `${2 * left - placed.left}px`;
21746
- }
21747
- // Reset the repositioning guard after a short delay
21748
- setTimeout(() => {
21749
- this.isRepositioning = false;
21750
- }, 16); // ~1 frame at 60fps
22160
+ // as a modal dialog does with its backdrop filter. Offset by however far that block's corner is from the viewport's.
22161
+ const origin = containingBlockOrigin(portal);
22162
+ portal.style.top = `${top - origin.top}px`;
22163
+ portal.style.left = `${left - origin.left}px`;
21751
22164
  }
21752
22165
  render() {
21753
- 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 }))));
22166
+ 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 }))));
21754
22167
  }
21755
22168
  get el() { return getElement(this); }
21756
22169
  static get watchers() { return {
22170
+ "openOn": [{
22171
+ "openOnChanged": 0
22172
+ }],
22173
+ "padding": [{
22174
+ "applyPadding": 0
22175
+ }],
21757
22176
  "placement": [{
21758
22177
  "restorePlacementDefault": 0
21759
22178
  }]
@@ -21764,9 +22183,11 @@ class PdsPopover {
21764
22183
  "$tagName$": "pds-popover",
21765
22184
  "$members$": {
21766
22185
  "popoverTargetAction": [1, "popover-target-action"],
22186
+ "openOn": [1, "open-on"],
21767
22187
  "popoverType": [1, "popover-type"],
21768
22188
  "componentId": [1, "component-id"],
21769
22189
  "maxWidth": [2, "max-width"],
22190
+ "padding": [1],
21770
22191
  "placement": [1537],
21771
22192
  "active": [32],
21772
22193
  "show": [64],
@@ -21815,7 +22236,7 @@ class PdsProgress {
21815
22236
  const normalizedFillColor = normalizeColorValue$1(this.fillColor);
21816
22237
  const hostClass = this.animated ? { 'is-animated': this.animated } : '';
21817
22238
  this.hostKeeper.record(hostClass);
21818
- 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, "%")));
22239
+ 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, "%")));
21819
22240
  }
21820
22241
  get el() { return getElement(this); }
21821
22242
  static get style() { return pdsProgressCss(); }
@@ -21850,7 +22271,7 @@ class PdsProperty {
21850
22271
  this.icon = 'star';
21851
22272
  }
21852
22273
  render() {
21853
- 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' }))));
22274
+ 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' }))));
21854
22275
  }
21855
22276
  static get style() { return pdsPropertyCss(); }
21856
22277
  static get cmpMeta() { return {
@@ -21868,10 +22289,10 @@ class PdsProperty {
21868
22289
 
21869
22290
  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)}`;
21870
22291
 
21871
- 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)}`;
22292
+ 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}`;
21872
22293
 
21873
22294
  /**
21874
- * @slot image - Custom image content to display instead of the default radio input
22295
+ * @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
21875
22296
  * @part image-container - The container for the image
21876
22297
  * @lightDom renders-markup
21877
22298
  */
@@ -21893,7 +22314,7 @@ class PdsRadio {
21893
22314
  */
21894
22315
  this.disabled = false;
21895
22316
  /**
21896
- * Adds a border around the radio component for better visual separation.
22317
+ * Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
21897
22318
  * @defaultValue false
21898
22319
  */
21899
22320
  this.hasBorder = false;
@@ -21907,6 +22328,11 @@ class PdsRadio {
21907
22328
  * @defaultValue false
21908
22329
  */
21909
22330
  this.required = false;
22331
+ /**
22332
+ * 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.
22333
+ * @defaultValue default
22334
+ */
22335
+ this.variant = 'default';
21910
22336
  this.handleRadioChange = (e) => {
21911
22337
  if (this.disabled) {
21912
22338
  return;
@@ -21928,6 +22354,9 @@ class PdsRadio {
21928
22354
  hasImage() {
21929
22355
  return this._hasImage;
21930
22356
  }
22357
+ isPill() {
22358
+ return this.variant === 'pill';
22359
+ }
21931
22360
  classNames() {
21932
22361
  const classNames = [];
21933
22362
  if (this.invalid) {
@@ -21936,10 +22365,14 @@ class PdsRadio {
21936
22365
  if (this.disabled) {
21937
22366
  classNames.push('is-disabled');
21938
22367
  }
21939
- if (this.hasBorder) {
22368
+ // A pill is its own bordered shape, so has-border doesn't stack a card around it.
22369
+ if (this.hasBorder && !this.isPill()) {
21940
22370
  classNames.push('has-border');
21941
22371
  }
21942
- if (this.hasImage()) {
22372
+ if (this.isPill()) {
22373
+ classNames.push('pds-radio--pill');
22374
+ }
22375
+ if (this.hasImage() && !this.isPill()) {
21943
22376
  classNames.push('has-image');
21944
22377
  }
21945
22378
  return classNames.join(' ');
@@ -21969,13 +22402,14 @@ class PdsRadio {
21969
22402
  }
21970
22403
  render() {
21971
22404
  const renderLabelAndMessages = () => [
21972
- 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)),
22405
+ 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)),
21973
22406
  this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
21974
- 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))
22407
+ 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))
21975
22408
  ];
21976
22409
  const hostClass = this.classNames();
21977
22410
  this.hostKeeper.record(hostClass);
21978
- 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())));
22411
+ const showImage = this.hasImage() && !this.isPill();
22412
+ 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())));
21979
22413
  }
21980
22414
  get el() { return getElement(this); }
21981
22415
  static get style() { return labelCss$3() + pdsRadioCss(); }
@@ -21995,6 +22429,7 @@ class PdsRadio {
21995
22429
  "name": [1],
21996
22430
  "required": [4],
21997
22431
  "value": [1],
22432
+ "variant": [1],
21998
22433
  "_hasImage": [32]
21999
22434
  },
22000
22435
  "$listeners$": undefined,
@@ -22167,13 +22602,13 @@ class PdsRadioGroup {
22167
22602
  render() {
22168
22603
  const gapValue = this.getGapValue();
22169
22604
  const ariaDescribedBy = this.getAriaDescribedBy();
22170
- return (hAsync(Host, { key: 'bf8063c1a99e272bb3f6bc647998a6ef103f8a71', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
22605
+ return (hAsync(Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
22171
22606
  '--pds-radio-group-gap': gapValue,
22172
- } }, this.groupLabel && (hAsync("div", { key: '8564ed3f8f99cdc1a0e5b189aacc6960923eb5f7', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: '2309c9373790182cde030c1dbda88fa3bdcaaf12', class: {
22607
+ } }, this.groupLabel && (hAsync("div", { key: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', class: {
22173
22608
  'pds-radio-group__radios': true,
22174
22609
  'pds-radio-group__radios--row': this.direction === 'row',
22175
22610
  'pds-radio-group__radios--column': this.direction === 'column',
22176
- } }, 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))));
22611
+ } }, 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))));
22177
22612
  }
22178
22613
  get el() { return getElement(this); }
22179
22614
  static get watchers() { return {
@@ -22282,7 +22717,7 @@ class PdsRow {
22282
22717
  'min-height': this.minHeight,
22283
22718
  }));
22284
22719
  this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
22285
- return hAsync(Host, { key: '452882c1105868f5d392e7cb165311b1abc4a243', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
22720
+ return hAsync(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
22286
22721
  }
22287
22722
  get el() { return getElement(this); }
22288
22723
  static get style() { return pdsRowCss(); }
@@ -22312,6 +22747,25 @@ const labelCss$2 = () => `:host{display:inline-block}:host([aria-disabled=true])
22312
22747
 
22313
22748
  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}`;
22314
22749
 
22750
+ /** The tags of an option list in order, optgroup contents included: equal shapes can be patched in place. */
22751
+ const shapeOf = (items) => items.map((item) => item.tagName + (item.tagName === 'OPTGROUP' ? `(${shapeOf(Array.from(item.children))})` : '')).join();
22752
+ /** Brings an existing option or optgroup up to date with its copy, keeping the element itself. */
22753
+ const patchInPlace = (target, copy) => {
22754
+ Array.from(target.attributes).forEach(({ name }) => {
22755
+ if (!copy.hasAttribute(name))
22756
+ target.removeAttribute(name);
22757
+ });
22758
+ Array.from(copy.attributes).forEach(({ name, value }) => {
22759
+ if (target.getAttribute(name) !== value)
22760
+ target.setAttribute(name, value);
22761
+ });
22762
+ if (copy.tagName === 'OPTGROUP') {
22763
+ Array.from(copy.children).forEach((child, index) => patchInPlace(target.children[index], child));
22764
+ }
22765
+ else if (target.textContent !== copy.textContent) {
22766
+ target.textContent = copy.textContent;
22767
+ }
22768
+ };
22315
22769
  /**
22316
22770
  * @slot action - Content to be displayed in the label area, typically for help icons or links
22317
22771
  */
@@ -22323,6 +22777,9 @@ class PdsSelect {
22323
22777
  this.pdsFocus = createEvent(this, "pdsFocus");
22324
22778
  this.pdsKeyDown = createEvent(this, "pdsKeyDown");
22325
22779
  this._type = 'select-one';
22780
+ this.optionObserver = null;
22781
+ this.optionSyncFrame = null;
22782
+ this.hasHadOptions = false;
22326
22783
  this.hostKeeper = new HostStylingKeeper();
22327
22784
  /**
22328
22785
  * Indicates whether or not the select field is disabled.
@@ -22339,6 +22796,16 @@ class PdsSelect {
22339
22796
  * @defaultValue false
22340
22797
  */
22341
22798
  this.required = false;
22799
+ /**
22800
+ * Whether a mutation is inside an option or optgroup. The host's own attributes and children
22801
+ * (top-level adds and removes reach `slotchange`) and the action slot's content are not.
22802
+ */
22803
+ this.touchesOption = ({ target }) => {
22804
+ // Not just TEXT_NODE: characterData also reports comment nodes, and a Comment has no
22805
+ // .closest() — treating anything non-Element as a Text node crashed on one.
22806
+ const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
22807
+ return target !== this.el && (element === null || element === void 0 ? void 0 : element.closest('option, optgroup')) != null;
22808
+ };
22342
22809
  /**
22343
22810
  * Emits an event on input change.
22344
22811
  */
@@ -22365,25 +22832,47 @@ class PdsSelect {
22365
22832
  this.pdsKeyDown.emit(ev);
22366
22833
  };
22367
22834
  /**
22368
- * Handles the change event for the slot element.
22369
- * This method is triggered when the slot content changes.
22370
- * It updates the inner HTML of the select element by cloning and appending
22371
- * the assigned <option> elements from the slot.
22835
+ * Copies the slotted <option> and <optgroup> elements into the inner select, then
22836
+ * reselects the current value. Runs on `slotchange` and when a slotted option changes
22837
+ * (see startOptionSync).
22838
+ *
22839
+ * Nothing happens when the copies match what the select already holds. When only text or
22840
+ * attributes changed, the select's own options are updated in place rather than replaced,
22841
+ * so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
22842
+ * screen reader keeps its place. Selecting programmatically fires no change event, so a
22843
+ * copy never emits `pdsSelectChange`.
22372
22844
  */
22373
22845
  this.handleSlotChange = () => {
22374
- const slot = this.slotContainer.querySelector('slot');
22375
- this.selectEl.innerHTML = '';
22376
- const assignedElements = slot.assignedElements({ flatten: true });
22377
- assignedElements.forEach((item) => {
22378
- if (['OPTION', 'OPTGROUP'].includes(item.tagName)) {
22379
- const clonedItem = item.cloneNode(true);
22380
- if (clonedItem.tagName === 'OPTION' && clonedItem.value === this.value) {
22381
- clonedItem.selected = true;
22382
- }
22383
- this.selectEl.appendChild(clonedItem);
22384
- }
22385
- });
22846
+ var _a;
22847
+ const slot = (_a = this.slotContainer) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
22848
+ if (slot === null || slot === undefined || this.selectEl === undefined)
22849
+ return;
22850
+ const copies = slot.assignedElements({ flatten: true })
22851
+ .filter((item) => ['OPTION', 'OPTGROUP'].includes(item.tagName))
22852
+ .map((item) => item.cloneNode(true));
22853
+ const current = Array.from(this.selectEl.children);
22854
+ // The very first copy populates an empty select, where falling back to the first option (like
22855
+ // a native select) is correct; the no-match blank state is for options changing under a value
22856
+ // that was already showing selected. Tracked separately from the select's current emptiness:
22857
+ // an async reload that clears options before the next set lands would otherwise look like a
22858
+ // first render again, and the no-match state must still apply once that next set arrives.
22859
+ const hadOptions = this.hasHadOptions;
22860
+ if (copies.length > 0)
22861
+ this.hasHadOptions = true;
22862
+ const markup = (items) => items.map((item) => item.outerHTML).join('');
22863
+ if (markup(copies) === markup(current))
22864
+ return;
22865
+ if (shapeOf(copies) === shapeOf(current)) {
22866
+ copies.forEach((copy, index) => patchInPlace(current[index], copy));
22867
+ }
22868
+ else {
22869
+ this.selectEl.innerHTML = '';
22870
+ copies.forEach((copy) => this.selectEl.appendChild(copy));
22871
+ }
22386
22872
  this.updateSelectedOption();
22873
+ if (hadOptions)
22874
+ this.showNoSelectionWithoutMatch();
22875
+ this.updateFormValue();
22387
22876
  };
22388
22877
  }
22389
22878
  /**
@@ -22412,9 +22901,16 @@ class PdsSelect {
22412
22901
  }
22413
22902
  // Expose type property on the element instance to match native form element behavior
22414
22903
  exposeTypeProperty(this.el, () => this._type);
22904
+ // Reconnected after a move: componentDidLoad won't run again, and options may have changed
22905
+ // while it was out of the document.
22906
+ if (this.selectEl !== undefined) {
22907
+ this.startOptionSync();
22908
+ this.scheduleOptionSync();
22909
+ }
22415
22910
  }
22416
22911
  disconnectedCallback() {
22417
22912
  this.hostKeeper.disconnect();
22913
+ this.stopOptionSync();
22418
22914
  }
22419
22915
  componentWillLoad() {
22420
22916
  // Set initial type based on multiple prop
@@ -22424,6 +22920,43 @@ class PdsSelect {
22424
22920
  componentDidLoad() {
22425
22921
  // Set initial form value
22426
22922
  this.updateFormValue();
22923
+ // Stencil holds componentDidLoad until the shadow root's pds-icon has loaded, so options can
22924
+ // change between the first slotchange copy and here with nothing observing yet — the same gap
22925
+ // the reconnect path closes with a catch-up sync.
22926
+ this.startOptionSync();
22927
+ this.scheduleOptionSync();
22928
+ }
22929
+ /**
22930
+ * Keeps the inner select in step with the slotted options. `slotchange` only fires when
22931
+ * top-level options are added or removed, so an option's text, value or disabled state
22932
+ * changing, or an option added inside an optgroup, would otherwise never reach the select.
22933
+ * Changes are batched into one copy per animation frame.
22934
+ */
22935
+ startOptionSync() {
22936
+ if (this.optionObserver !== null || typeof MutationObserver === 'undefined' || !this.el.isConnected)
22937
+ return;
22938
+ this.optionObserver = new MutationObserver((mutations) => {
22939
+ if (mutations.some(this.touchesOption))
22940
+ this.scheduleOptionSync();
22941
+ });
22942
+ this.optionObserver.observe(this.el, { childList: true, subtree: true, attributes: true, characterData: true });
22943
+ }
22944
+ scheduleOptionSync() {
22945
+ if (this.optionSyncFrame !== null)
22946
+ return;
22947
+ this.optionSyncFrame = requestAnimationFrame(() => {
22948
+ this.optionSyncFrame = null;
22949
+ this.handleSlotChange();
22950
+ });
22951
+ }
22952
+ stopOptionSync() {
22953
+ var _a;
22954
+ (_a = this.optionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
22955
+ this.optionObserver = null;
22956
+ if (this.optionSyncFrame !== null) {
22957
+ cancelAnimationFrame(this.optionSyncFrame);
22958
+ this.optionSyncFrame = null;
22959
+ }
22427
22960
  }
22428
22961
  /**
22429
22962
  * Updates the selected option in the select element based on the current value.
@@ -22449,6 +22982,19 @@ class PdsSelect {
22449
22982
  });
22450
22983
  }
22451
22984
  }
22985
+ /**
22986
+ * After a copy that changes an existing option set, a value whose option was renamed or removed
22987
+ * has nothing to select. Like a native select, show nothing selected rather than the first
22988
+ * option; the value itself is kept, with no change event.
22989
+ */
22990
+ showNoSelectionWithoutMatch() {
22991
+ var _a;
22992
+ const wanted = [].concat((_a = this.value) !== null && _a !== void 0 ? _a : []).filter((value) => value !== '');
22993
+ const options = Array.from(this.selectEl.options);
22994
+ if (wanted.length > 0 && !options.some((option) => wanted.includes(option.value))) {
22995
+ this.selectEl.selectedIndex = -1;
22996
+ }
22997
+ }
22452
22998
  getHelperMessage() {
22453
22999
  return this.helperMessage && (hAsync("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
22454
23000
  }
@@ -22554,7 +23100,7 @@ class PdsSelect {
22554
23100
  'has-action': hasAction && !this.hideLabel ? 'true' : null,
22555
23101
  };
22556
23102
  this.hostKeeper.record(hostClass, {}, hostAttributes);
22557
- 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 }))));
23103
+ 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 }))));
22558
23104
  }
22559
23105
  static get formAssociated() { return true; }
22560
23106
  get el() { return getElement(this); }
@@ -25313,7 +25859,7 @@ class PdsSortable {
25313
25859
  render() {
25314
25860
  const classNames = this.classNames();
25315
25861
  this.hostKeeper.record(classNames);
25316
- return (hAsync(Host, { key: 'a0e532d31561748b4632a6be9163562f990af804', class: classNames, id: this.componentId }, hAsync("slot", { key: 'd1b0defb683f841e6708374fff4bf62eb7fd5080' })));
25862
+ return (hAsync(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, hAsync("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
25317
25863
  }
25318
25864
  get el() { return getElement(this); }
25319
25865
  static get watchers() { return {
@@ -25388,7 +25934,7 @@ class PdsSortableItem {
25388
25934
  }
25389
25935
  render() {
25390
25936
  this.hostKeeper.record('pds-sortable-item');
25391
- 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" })))));
25937
+ 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" })))));
25392
25938
  }
25393
25939
  get el() { return getElement(this); }
25394
25940
  static get style() { return pdsSortableItemCss(); }
@@ -25523,9 +26069,9 @@ class PdsSwitch {
25523
26069
  const hostClass = this.switchClassNames();
25524
26070
  const ariaDisabled = this.disabled ? 'true' : null;
25525
26071
  this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
25526
- 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 &&
25527
- hAsync("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
25528
- 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)));
26072
+ 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 &&
26073
+ hAsync("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
26074
+ 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)));
25529
26075
  }
25530
26076
  static get formAssociated() { return true; }
25531
26077
  get el() { return getElement(this); }
@@ -25949,7 +26495,7 @@ class PdsTableBody {
25949
26495
  registerInstance(this, hostRef);
25950
26496
  }
25951
26497
  render() {
25952
- return (hAsync(Host, { key: '817532e93c8f91ef64cd0f90aa6c4372c3b7d83f', role: "rowgroup", part: "body" }, hAsync("slot", { key: '296ba876c6716e85252a06008bd55d59624223e3' })));
26498
+ return (hAsync(Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
25953
26499
  }
25954
26500
  static get style() { return pdsTableBodyCss(); }
25955
26501
  static get cmpMeta() { return {
@@ -26107,11 +26653,11 @@ class PdsTableCell {
26107
26653
  return classNames.join(' ');
26108
26654
  }
26109
26655
  render() {
26110
- return (hAsync(Host, { key: 'de70a1002cc46e204f87349069b86ca43aa2129a', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
26656
+ return (hAsync(Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
26111
26657
  this.tableRef.fixedColumn &&
26112
26658
  this.tableRef.selectable
26113
26659
  ? { '--fixed-cell-position': '40px' }
26114
- : {} }, hAsync("slot", { key: '5e2b3308291e480323d7a1ac0575035758fb3695' })));
26660
+ : {} }, hAsync("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
26115
26661
  }
26116
26662
  get hostElement() { return getElement(this); }
26117
26663
  static get watchers() { return {
@@ -26180,7 +26726,7 @@ class PdsTableHead {
26180
26726
  }
26181
26727
  }
26182
26728
  render() {
26183
- 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' })));
26729
+ 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' })));
26184
26730
  }
26185
26731
  get hostElement() { return getElement(this); }
26186
26732
  static get style() { return pdsTableHeadCss(); }
@@ -26401,11 +26947,11 @@ class PdsTableHeadCell {
26401
26947
  return classNames.join(' ');
26402
26948
  }
26403
26949
  render() {
26404
- return (hAsync(Host, { key: '13de42d136c5b037cd1545cd5b789b4660e23b87', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
26950
+ return (hAsync(Host, { key: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
26405
26951
  this.tableRef.fixedColumn &&
26406
26952
  this.tableRef.selectable
26407
26953
  ? { '--fixed-cell-position': '40px' }
26408
- : {} }, hAsync("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: 'cba838fa029b280561676c2b57af7f8f00055511', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
26954
+ : {} }, 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" }))));
26409
26955
  }
26410
26956
  get hostElement() { return getElement(this); }
26411
26957
  static get style() { return pdsTableHeadCellCss(); }
@@ -26571,7 +27117,7 @@ class PdsTableRow {
26571
27117
  }
26572
27118
  }
26573
27119
  render() {
26574
- 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' })));
27120
+ 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' })));
26575
27121
  }
26576
27122
  get hostElement() { return getElement(this); }
26577
27123
  static get style() { return pdsTableRowCss(); }
@@ -26625,7 +27171,7 @@ class PdsTabpanel {
26625
27171
  // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
26626
27172
  // that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
26627
27173
  this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
26628
- 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' }))));
27174
+ 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' }))));
26629
27175
  }
26630
27176
  get el() { return getElement(this); }
26631
27177
  static get style() { return pdsTabpanelCss(); }
@@ -26924,7 +27470,7 @@ class PdsTabs {
26924
27470
  // Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
26925
27471
  // it is a prop change, not a strip.
26926
27472
  this.hostKeeper.record(hostClass);
26927
- return (hAsync(Host, { key: '91a9a5cf4348b73ef5ec21430db20468fb67906c', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: 'f0ec002e513f3e91956e905c23e35dae0e6328ad', name: "tabpanels" })));
27473
+ return (hAsync(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
26928
27474
  }
26929
27475
  get el() { return getElement(this); }
26930
27476
  static get style() { return pdsTabsCss(); }
@@ -27058,7 +27604,7 @@ class PdsText {
27058
27604
  ? `pds-text--decoration-${this.decoration}`
27059
27605
  : ''}
27060
27606
  `;
27061
- return (hAsync(Tag, { key: '6460288f1d395080a39aec214e55cab87fdaec9f', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'a8be0d96f72d8ee44288d7c8615155dc68d92663' })));
27607
+ return (hAsync(Tag, { key: 'b79a6e67f11024cb025cb26bbf77231547bd63a4', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'ae1f8ca39899894541eac3c07fb21ead4ab98f40' })));
27062
27608
  }
27063
27609
  get el() { return getElement(this); }
27064
27610
  static get watchers() { return {
@@ -27404,10 +27950,10 @@ class PdsTextarea {
27404
27950
  }
27405
27951
  render() {
27406
27952
  const value = this.getValue();
27407
- 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 &&
27408
- 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 &&
27409
- hAsync("p", { key: 'dcb36f21443d2a782c25b7c29c4ce6215f3b212b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
27410
- 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))));
27953
+ 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 &&
27954
+ 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 &&
27955
+ hAsync("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
27956
+ 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))));
27411
27957
  }
27412
27958
  static get formAssociated() { return true; }
27413
27959
  get el() { return getElement(this); }
@@ -27455,7 +28001,7 @@ class PdsTextarea {
27455
28001
  }; }
27456
28002
  }
27457
28003
 
27458
- 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;}`;
28004
+ 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}`;
27459
28005
 
27460
28006
  /** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
27461
28007
  const TOAST_DISMISS_ANIMATION_MS = 300;
@@ -27577,17 +28123,23 @@ class PdsToast {
27577
28123
  if (this.type === 'loading') {
27578
28124
  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" }))));
27579
28125
  }
27580
- // Return icon if provided, otherwise undefined (which renders as nothing)
27581
- return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
28126
+ // Decorative: inside role="alert" an icon name would be read out with the
28127
+ // message. Severity is announced as text instead (see severityLabel).
28128
+ return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
28129
+ }
28130
+ severityText() {
28131
+ var _a;
28132
+ return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
27582
28133
  }
27583
28134
  render() {
27584
- return (hAsync(Host, { key: '754a4583cefca47a3d3fea7dab036c06ea8aabcd', hidden: !this.isVisible }, hAsync("div", { key: '8ac294344ca459202c0883e724e09a4218342cc4', class: {
28135
+ const severity = this.severityText();
28136
+ return (hAsync(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, hAsync("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', class: {
27585
28137
  'pds-toast': true,
27586
28138
  [`pds-toast--${this.type}`]: this.type !== 'default',
27587
28139
  'pds-toast--animating-out': this.isAnimatingOut
27588
- }, 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: () => {
28140
+ }, 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: () => {
27589
28141
  this.dismiss();
27590
- }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '623a0e4d56e30781fb31bcd085511c17a4777edc', name: "remove" }))))));
28142
+ }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
27591
28143
  }
27592
28144
  get el() { return getElement(this); }
27593
28145
  static get watchers() { return {
@@ -27606,6 +28158,7 @@ class PdsToast {
27606
28158
  "icon": [1],
27607
28159
  "type": [1],
27608
28160
  "dismissLabel": [1, "dismiss-label"],
28161
+ "severityLabel": [1, "severity-label"],
27609
28162
  "isVisible": [32],
27610
28163
  "isAnimatingOut": [32],
27611
28164
  "dismiss": [64]
@@ -27635,7 +28188,9 @@ class PdsTooltip {
27635
28188
  this.resolvedPlacement = 'right';
27636
28189
  this.triggerEl = null;
27637
28190
  this.contentDiv = null;
28191
+ this.lastCopiedHtml = null;
27638
28192
  this.slotMutationObserver = null;
28193
+ this.contentSyncFrame = null;
27639
28194
  this.currentPathname = '';
27640
28195
  this.pathnameCheckInterval = null;
27641
28196
  this.stopAutoUpdate = null;
@@ -27702,6 +28257,25 @@ class PdsTooltip {
27702
28257
  this.handleSpaNavigation();
27703
28258
  }
27704
28259
  };
28260
+ this.scheduleContentSync = () => {
28261
+ if (this.contentSyncFrame !== null)
28262
+ return;
28263
+ this.contentSyncFrame = requestAnimationFrame(() => {
28264
+ this.contentSyncFrame = null;
28265
+ if (this.portalEl === null || this.contentDiv === null)
28266
+ return;
28267
+ const copy = this.copySlottedContent();
28268
+ const strippedCopy = this.strippedHtml(copy);
28269
+ if (strippedCopy === this.lastCopiedHtml)
28270
+ return;
28271
+ this.lastCopiedHtml = strippedCopy;
28272
+ this.contentDiv.textContent = '';
28273
+ this.contentDiv.append(...Array.from(copy.childNodes));
28274
+ this.repositionPortal().catch(error => {
28275
+ console.warn('Failed to reposition tooltip after a content change:', error);
28276
+ });
28277
+ });
28278
+ };
27705
28279
  }
27706
28280
  handleOpenToggle(newValue, oldValue) {
27707
28281
  if (newValue === false && oldValue === true) {
@@ -27716,16 +28290,6 @@ class PdsTooltip {
27716
28290
  window.addEventListener('pageshow', this.handlePageShow);
27717
28291
  this.currentPathname = window.location.pathname;
27718
28292
  this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
27719
- const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
27720
- if (contentSlotWrapper !== null) {
27721
- this.slotMutationObserver = new MutationObserver(() => {
27722
- if (this.opened && this.portalEl !== null) {
27723
- this.removePortal();
27724
- this.createPortal();
27725
- }
27726
- });
27727
- this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
27728
- }
27729
28293
  // no return; Stencil ignores teardown functions here
27730
28294
  }
27731
28295
  connectedCallback() {
@@ -27733,10 +28297,6 @@ class PdsTooltip {
27733
28297
  }
27734
28298
  disconnectedCallback() {
27735
28299
  window.removeEventListener('pageshow', this.handlePageShow);
27736
- if (this.slotMutationObserver !== null) {
27737
- this.slotMutationObserver.disconnect();
27738
- this.slotMutationObserver = null;
27739
- }
27740
28300
  // Ensure global listeners/intervals are removed if still present
27741
28301
  if (this.portalEl !== null) {
27742
28302
  this.removePortal();
@@ -27879,31 +28439,9 @@ class PdsTooltip {
27879
28439
  this.contentDiv.className = 'pds-tooltip__content';
27880
28440
  this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
27881
28441
  this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
27882
- const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
27883
- const slottedContentContainer = contentSlotWrapper === null || contentSlotWrapper === void 0 ? void 0 : contentSlotWrapper.querySelector('[slot="content"]');
27884
- let hasSlottedContent = false;
27885
- if (slottedContentContainer !== null) {
27886
- const childrenToClone = Array.from(slottedContentContainer.childNodes);
27887
- if (childrenToClone.length > 0) {
27888
- const hasMeaningfulNode = childrenToClone.some(node => {
27889
- var _a;
27890
- return node.nodeType === Node.ELEMENT_NODE ||
27891
- (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
27892
- });
27893
- if (hasMeaningfulNode) {
27894
- hasSlottedContent = true;
27895
- childrenToClone.forEach((node /*, index*/) => {
27896
- var _a;
27897
- if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
27898
- this.contentDiv.appendChild(node.cloneNode(true));
27899
- }
27900
- });
27901
- }
27902
- }
27903
- }
27904
- if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {
27905
- this.contentDiv.textContent = this.content;
27906
- }
28442
+ const initialCopy = this.copySlottedContent();
28443
+ this.lastCopiedHtml = this.strippedHtml(initialCopy);
28444
+ this.contentDiv.append(...Array.from(initialCopy.childNodes));
27907
28445
  this.portalEl.appendChild(this.contentDiv);
27908
28446
  document.body.appendChild(this.portalEl);
27909
28447
  this.repositionPortal().catch(error => {
@@ -27926,8 +28464,93 @@ class PdsTooltip {
27926
28464
  if (this.triggerEl !== null && this.portalEl.id !== '') {
27927
28465
  this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
27928
28466
  }
28467
+ this.startContentSync();
28468
+ }
28469
+ /**
28470
+ * The host's own content slot wrapper. Matched among direct children only, so a nested
28471
+ * pds-tooltip inside the trigger slot isn't mistaken for this one's.
28472
+ */
28473
+ get contentSlotWrapper() {
28474
+ return Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
28475
+ }
28476
+ /**
28477
+ * Copies the slotted content (or the `content` prop's text) into a detached container. The
28478
+ * portal holds copies so the framework that owns the slotted nodes keeps them.
28479
+ */
28480
+ copySlottedContent() {
28481
+ var _a, _b;
28482
+ const copy = document.createElement('div');
28483
+ const slottedContentContainer = (_a = this.contentSlotWrapper) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="content"]');
28484
+ const meaningfulNodes = Array.from((_b = slottedContentContainer === null || slottedContentContainer === void 0 ? void 0 : slottedContentContainer.childNodes) !== null && _b !== void 0 ? _b : []).filter(node => {
28485
+ var _a;
28486
+ return node.nodeType === Node.ELEMENT_NODE ||
28487
+ (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
28488
+ });
28489
+ meaningfulNodes.forEach(node => copy.appendChild(node.cloneNode(true)));
28490
+ if (meaningfulNodes.length === 0 && typeof this.content === 'string' && this.content.trim() !== '') {
28491
+ copy.textContent = this.content;
28492
+ }
28493
+ return copy;
28494
+ }
28495
+ /**
28496
+ * While the tooltip is open, keeps the portal's copy in step with the slotted content at any
28497
+ * depth: content that loads or re-renders after opening shows without reopening. Changes are
28498
+ * batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
28499
+ * dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
28500
+ * repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
28501
+ * can't trigger another sync.
28502
+ */
28503
+ startContentSync() {
28504
+ const contentSlotWrapper = this.contentSlotWrapper;
28505
+ if (contentSlotWrapper === undefined || typeof MutationObserver === 'undefined')
28506
+ return;
28507
+ this.slotMutationObserver = new MutationObserver(this.scheduleContentSync);
28508
+ this.slotMutationObserver.observe(contentSlotWrapper, {
28509
+ childList: true,
28510
+ subtree: true,
28511
+ attributes: true,
28512
+ characterData: true,
28513
+ });
28514
+ }
28515
+ /**
28516
+ * A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
28517
+ * `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
28518
+ * inside the portal) isn't mistaken for a real content change. Without this, that class-only
28519
+ * difference fails the equality check above and triggers a recopy that replaces still-loaded
28520
+ * nodes — reloading any iframe or media the slotted content held.
28521
+ */
28522
+ strippedHtml(root) {
28523
+ const clone = root.cloneNode(true);
28524
+ clone.querySelectorAll('*').forEach((el) => {
28525
+ // isStencilClass is host-scoped (its own doc: "another sc- class may be a consumer's"), so it
28526
+ // only applies to pds-* elements — the same check keepPineHydrated makes before using it.
28527
+ if (!el.localName.startsWith('pds-'))
28528
+ return;
28529
+ // Not `el.className`: on an SVG element that's an SVGAnimatedString, not a string,
28530
+ // so classNamesOf would silently drop its classes from the comparison. The `class`
28531
+ // attribute is a plain string on every element, SVG included.
28532
+ const kept = classNamesOf(el.getAttribute('class') || '').filter((name) => !isStencilClass(el, name));
28533
+ if (kept.length === 0) {
28534
+ el.removeAttribute('class');
28535
+ }
28536
+ else {
28537
+ el.setAttribute('class', kept.join(' '));
28538
+ }
28539
+ });
28540
+ return clone.innerHTML;
28541
+ }
28542
+ stopContentSync() {
28543
+ if (this.slotMutationObserver !== null) {
28544
+ this.slotMutationObserver.disconnect();
28545
+ this.slotMutationObserver = null;
28546
+ }
28547
+ if (this.contentSyncFrame !== null) {
28548
+ cancelAnimationFrame(this.contentSyncFrame);
28549
+ this.contentSyncFrame = null;
28550
+ }
27929
28551
  }
27930
28552
  removePortal() {
28553
+ this.stopContentSync();
27931
28554
  // Stop Floating UI's autoUpdate
27932
28555
  if (this.stopAutoUpdate !== null) {
27933
28556
  this.stopAutoUpdate();
@@ -27959,12 +28582,13 @@ class PdsTooltip {
27959
28582
  this.triggerEl.removeAttribute('aria-describedby');
27960
28583
  }
27961
28584
  this.contentDiv = null;
28585
+ this.lastCopiedHtml = null;
27962
28586
  }
27963
28587
  render() {
27964
28588
  const hostId = this.componentId || undefined;
27965
- 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,
28589
+ 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,
27966
28590
  /* focusin/out bubble; ensure keyboard users see tooltips */
27967
- 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" }))));
28591
+ 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" }))));
27968
28592
  }
27969
28593
  get el() { return getElement(this); }
27970
28594
  static get watchers() { return {