@pine-ds/core 3.13.0 → 3.14.1

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 (592) hide show
  1. package/components/floating-ui.dom.js +161 -40
  2. package/components/floating-ui.dom.js.map +1 -1
  3. package/components/index.d.ts +2 -0
  4. package/components/index.js +1 -0
  5. package/components/index.js.map +1 -1
  6. package/components/index2.js +1 -1
  7. package/components/index2.js.map +1 -1
  8. package/components/mock-pds-modal.js.map +1 -1
  9. package/components/pds-avatar.js +18 -5
  10. package/components/pds-avatar.js.map +1 -1
  11. package/components/pds-button2.js.map +1 -1
  12. package/components/pds-checkbox2.js.map +1 -1
  13. package/components/pds-chip2.js.map +1 -1
  14. package/components/pds-combobox.js +66 -26
  15. package/components/pds-combobox.js.map +1 -1
  16. package/components/pds-dropdown-menu-item.js +1 -1
  17. package/components/pds-dropdown-menu-item.js.map +1 -1
  18. package/components/pds-dropdown-menu.js +3 -2
  19. package/components/pds-dropdown-menu.js.map +1 -1
  20. package/components/pds-filter.js +1 -1
  21. package/components/pds-filter.js.map +1 -1
  22. package/components/pds-input.js +6 -2
  23. package/components/pds-input.js.map +1 -1
  24. package/components/pds-modal.js.map +1 -1
  25. package/components/pds-multiselect.d.ts +11 -0
  26. package/components/pds-multiselect.js +666 -0
  27. package/components/pds-multiselect.js.map +1 -0
  28. package/components/pds-popover.js +1 -1
  29. package/components/pds-progress.js +1 -1
  30. package/components/pds-property.js +1 -1
  31. package/components/pds-radio-group.js +3 -3
  32. package/components/pds-radio.js +3 -3
  33. package/components/pds-radio.js.map +1 -1
  34. package/components/pds-row.js +1 -1
  35. package/components/pds-select.js +14 -2
  36. package/components/pds-select.js.map +1 -1
  37. package/components/pds-sortable-item.js +1 -1
  38. package/components/pds-sortable.js +1 -1
  39. package/components/pds-switch.js +3 -3
  40. package/components/pds-tab.js +4 -4
  41. package/components/pds-tab.js.map +1 -1
  42. package/components/pds-table-body.js +1 -1
  43. package/components/pds-table-cell2.js +2 -2
  44. package/components/pds-table-cell2.js.map +1 -1
  45. package/components/pds-table-head-cell2.js +47 -6
  46. package/components/pds-table-head-cell2.js.map +1 -1
  47. package/components/pds-table-head.js +1 -1
  48. package/components/pds-table-row.js +1 -1
  49. package/components/pds-table.js +44 -3
  50. package/components/pds-table.js.map +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 +8 -4
  55. package/components/pds-textarea.js.map +1 -1
  56. package/components/pds-toast.js +3 -3
  57. package/components/pds-tooltip.js +2 -2
  58. package/dist/cjs/{floating-ui.dom-DTAy35nv.js → floating-ui.dom-Ca6tS7ef.js} +163 -41
  59. package/dist/cjs/floating-ui.dom-Ca6tS7ef.js.map +1 -0
  60. package/dist/cjs/{index-CMeuo765.js → index-BA--jsiy.js} +3 -3
  61. package/dist/cjs/index-BA--jsiy.js.map +1 -0
  62. package/dist/cjs/loader.cjs.js +1 -1
  63. package/dist/cjs/mock-pds-modal.entry.cjs.js.map +1 -1
  64. package/dist/cjs/pds-accordion.cjs.entry.js +1 -1
  65. package/dist/cjs/pds-avatar.cjs.entry.js +18 -6
  66. package/dist/cjs/pds-avatar.entry.cjs.js.map +1 -1
  67. package/dist/cjs/pds-button.cjs.entry.js +1 -1
  68. package/dist/cjs/pds-button.entry.cjs.js.map +1 -1
  69. package/dist/cjs/pds-checkbox.cjs.entry.js +1 -1
  70. package/dist/cjs/pds-checkbox.entry.cjs.js.map +1 -1
  71. package/dist/cjs/pds-chip.cjs.entry.js +1 -1
  72. package/dist/cjs/pds-chip.entry.cjs.js.map +1 -1
  73. package/dist/cjs/pds-combobox.cjs.entry.js +67 -27
  74. package/dist/cjs/pds-combobox.entry.cjs.js.map +1 -1
  75. package/dist/cjs/pds-copytext.cjs.entry.js +1 -1
  76. package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +1 -1
  77. package/dist/cjs/pds-dropdown-menu-item.entry.cjs.js.map +1 -1
  78. package/dist/cjs/pds-dropdown-menu.cjs.entry.js +4 -3
  79. package/dist/cjs/pds-dropdown-menu.entry.cjs.js.map +1 -1
  80. package/dist/cjs/pds-filter.cjs.entry.js +2 -2
  81. package/dist/cjs/pds-filter.entry.cjs.js.map +1 -1
  82. package/dist/cjs/pds-input.cjs.entry.js +7 -3
  83. package/dist/cjs/pds-input.entry.cjs.js.map +1 -1
  84. package/dist/cjs/pds-link.cjs.entry.js +1 -1
  85. package/dist/cjs/pds-modal.entry.cjs.js.map +1 -1
  86. package/dist/cjs/pds-multiselect.cjs.entry.js +592 -0
  87. package/dist/cjs/pds-multiselect.entry.cjs.js.map +1 -0
  88. package/dist/cjs/pds-popover.cjs.entry.js +1 -1
  89. package/dist/cjs/pds-progress.cjs.entry.js +1 -1
  90. package/dist/cjs/pds-property.cjs.entry.js +1 -1
  91. package/dist/cjs/pds-radio-group.cjs.entry.js +4 -4
  92. package/dist/cjs/pds-radio.cjs.entry.js +4 -4
  93. package/dist/cjs/pds-radio.entry.cjs.js.map +1 -1
  94. package/dist/cjs/pds-row.cjs.entry.js +1 -1
  95. package/dist/cjs/pds-select.cjs.entry.js +15 -3
  96. package/dist/cjs/pds-select.entry.cjs.js.map +1 -1
  97. package/dist/cjs/pds-sortable-item.cjs.entry.js +2 -2
  98. package/dist/cjs/pds-sortable.cjs.entry.js +1 -1
  99. package/dist/cjs/pds-switch.cjs.entry.js +4 -4
  100. package/dist/cjs/pds-tab.cjs.entry.js +4 -4
  101. package/dist/cjs/pds-tab.entry.cjs.js.map +1 -1
  102. package/dist/cjs/pds-table-body.cjs.entry.js +1 -1
  103. package/dist/cjs/pds-table-cell.cjs.entry.js +2 -2
  104. package/dist/cjs/pds-table-cell.entry.cjs.js.map +1 -1
  105. package/dist/cjs/pds-table-head-cell.cjs.entry.js +44 -6
  106. package/dist/cjs/pds-table-head-cell.entry.cjs.js.map +1 -1
  107. package/dist/cjs/pds-table-head.cjs.entry.js +1 -1
  108. package/dist/cjs/pds-table-row.cjs.entry.js +1 -1
  109. package/dist/cjs/pds-table.cjs.entry.js +42 -3
  110. package/dist/cjs/pds-table.entry.cjs.js.map +1 -1
  111. package/dist/cjs/pds-tabpanel.cjs.entry.js +1 -1
  112. package/dist/cjs/pds-tabs.cjs.entry.js +1 -1
  113. package/dist/cjs/pds-text.cjs.entry.js +1 -1
  114. package/dist/cjs/pds-textarea.cjs.entry.js +9 -5
  115. package/dist/cjs/pds-textarea.entry.cjs.js.map +1 -1
  116. package/dist/cjs/pds-toast.cjs.entry.js +3 -3
  117. package/dist/cjs/pds-tooltip.cjs.entry.js +3 -3
  118. package/dist/cjs/pine-core.cjs.js +1 -1
  119. package/dist/collection/collection-manifest.json +1 -0
  120. package/dist/collection/components/pds-avatar/pds-avatar.css +14 -1
  121. package/dist/collection/components/pds-avatar/pds-avatar.js +39 -4
  122. package/dist/collection/components/pds-avatar/pds-avatar.js.map +1 -1
  123. package/dist/collection/components/pds-avatar/stories/pds-avatar.stories.js +15 -0
  124. package/dist/collection/components/pds-box/pds-box.css +0 -191
  125. package/dist/collection/components/pds-button/pds-button.css +3 -0
  126. package/dist/collection/components/pds-checkbox/pds-checkbox.css +2 -0
  127. package/dist/collection/components/pds-chip/pds-chip.css +7 -0
  128. package/dist/collection/components/pds-combobox/pds-combobox.css +6 -1
  129. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.css +7 -4
  130. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.css +1 -1
  131. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js +2 -1
  132. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js.map +1 -1
  133. package/dist/collection/components/pds-filters/pds-filter/pds-filter.css +7 -3
  134. package/dist/collection/components/pds-input/pds-input.css +2 -2
  135. package/dist/collection/components/pds-input/pds-input.js +24 -1
  136. package/dist/collection/components/pds-input/pds-input.js.map +1 -1
  137. package/dist/collection/components/pds-modal/pds-modal.css +1 -0
  138. package/dist/collection/components/pds-multiselect/multiselect-interface.js +2 -0
  139. package/dist/collection/components/pds-multiselect/multiselect-interface.js.map +1 -0
  140. package/dist/collection/components/pds-multiselect/pds-multiselect.css +232 -0
  141. package/dist/collection/components/pds-multiselect/pds-multiselect.js +1152 -0
  142. package/dist/collection/components/pds-multiselect/pds-multiselect.js.map +1 -0
  143. package/dist/collection/components/pds-multiselect/stories/pds-multiselect.stories.js +371 -0
  144. package/dist/collection/components/pds-popover/pds-popover.js +1 -1
  145. package/dist/collection/components/pds-progress/pds-progress.js +1 -1
  146. package/dist/collection/components/pds-property/pds-property.js +1 -1
  147. package/dist/collection/components/pds-radio/pds-radio.css +1 -0
  148. package/dist/collection/components/pds-radio/pds-radio.js +3 -3
  149. package/dist/collection/components/pds-radio-group/pds-radio-group.js +3 -3
  150. package/dist/collection/components/pds-row/pds-row.js +1 -1
  151. package/dist/collection/components/pds-select/pds-select.css +2 -2
  152. package/dist/collection/components/pds-select/pds-select.js +71 -2
  153. package/dist/collection/components/pds-select/pds-select.js.map +1 -1
  154. package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +1 -1
  155. package/dist/collection/components/pds-sortable/pds-sortable.js +1 -1
  156. package/dist/collection/components/pds-switch/pds-switch.js +3 -3
  157. package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
  158. package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css +1 -0
  159. package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
  160. package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
  161. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css +1 -0
  162. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +90 -6
  163. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js.map +1 -1
  164. package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
  165. package/dist/collection/components/pds-table/pds-table.css +2 -0
  166. package/dist/collection/components/pds-table/pds-table.js +84 -3
  167. package/dist/collection/components/pds-table/pds-table.js.map +1 -1
  168. package/dist/collection/components/pds-table/stories/pds-table.stories.js +109 -4
  169. package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +6 -2
  170. package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +3 -3
  171. package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
  172. package/dist/collection/components/pds-tabs/pds-tabs.js +1 -1
  173. package/dist/collection/components/pds-text/pds-text.js +1 -1
  174. package/dist/collection/components/pds-textarea/pds-textarea.js +27 -4
  175. package/dist/collection/components/pds-textarea/pds-textarea.js.map +1 -1
  176. package/dist/collection/components/pds-toast/pds-toast.js +3 -3
  177. package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
  178. package/dist/docs.json +1130 -123
  179. package/dist/esm/{floating-ui.dom-DbQzNDdQ.js → floating-ui.dom-BO6p966C.js} +163 -42
  180. package/dist/esm/floating-ui.dom-BO6p966C.js.map +1 -0
  181. package/dist/esm/{index-xbb79yLt.js → index-DY8eSueV.js} +3 -3
  182. package/dist/esm/index-DY8eSueV.js.map +1 -0
  183. package/dist/esm/loader.js +1 -1
  184. package/dist/esm/mock-pds-modal.entry.js.map +1 -1
  185. package/dist/esm/pds-accordion.entry.js +1 -1
  186. package/dist/esm/pds-avatar.entry.js +18 -6
  187. package/dist/esm/pds-avatar.entry.js.map +1 -1
  188. package/dist/esm/pds-button.entry.js +1 -1
  189. package/dist/esm/pds-button.entry.js.map +1 -1
  190. package/dist/esm/pds-checkbox.entry.js +1 -1
  191. package/dist/esm/pds-checkbox.entry.js.map +1 -1
  192. package/dist/esm/pds-chip.entry.js +1 -1
  193. package/dist/esm/pds-chip.entry.js.map +1 -1
  194. package/dist/esm/pds-combobox.entry.js +67 -27
  195. package/dist/esm/pds-combobox.entry.js.map +1 -1
  196. package/dist/esm/pds-copytext.entry.js +1 -1
  197. package/dist/esm/pds-dropdown-menu-item.entry.js +1 -1
  198. package/dist/esm/pds-dropdown-menu-item.entry.js.map +1 -1
  199. package/dist/esm/pds-dropdown-menu.entry.js +4 -3
  200. package/dist/esm/pds-dropdown-menu.entry.js.map +1 -1
  201. package/dist/esm/pds-filter.entry.js +2 -2
  202. package/dist/esm/pds-filter.entry.js.map +1 -1
  203. package/dist/esm/pds-input.entry.js +7 -3
  204. package/dist/esm/pds-input.entry.js.map +1 -1
  205. package/dist/esm/pds-link.entry.js +1 -1
  206. package/dist/esm/pds-modal.entry.js.map +1 -1
  207. package/dist/esm/pds-multiselect.entry.js +590 -0
  208. package/dist/esm/pds-multiselect.entry.js.map +1 -0
  209. package/dist/esm/pds-popover.entry.js +1 -1
  210. package/dist/esm/pds-progress.entry.js +1 -1
  211. package/dist/esm/pds-property.entry.js +1 -1
  212. package/dist/esm/pds-radio-group.entry.js +4 -4
  213. package/dist/esm/pds-radio.entry.js +4 -4
  214. package/dist/esm/pds-radio.entry.js.map +1 -1
  215. package/dist/esm/pds-row.entry.js +1 -1
  216. package/dist/esm/pds-select.entry.js +15 -3
  217. package/dist/esm/pds-select.entry.js.map +1 -1
  218. package/dist/esm/pds-sortable-item.entry.js +2 -2
  219. package/dist/esm/pds-sortable.entry.js +1 -1
  220. package/dist/esm/pds-switch.entry.js +4 -4
  221. package/dist/esm/pds-tab.entry.js +4 -4
  222. package/dist/esm/pds-tab.entry.js.map +1 -1
  223. package/dist/esm/pds-table-body.entry.js +1 -1
  224. package/dist/esm/pds-table-cell.entry.js +2 -2
  225. package/dist/esm/pds-table-cell.entry.js.map +1 -1
  226. package/dist/esm/pds-table-head-cell.entry.js +44 -6
  227. package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
  228. package/dist/esm/pds-table-head.entry.js +1 -1
  229. package/dist/esm/pds-table-row.entry.js +1 -1
  230. package/dist/esm/pds-table.entry.js +42 -3
  231. package/dist/esm/pds-table.entry.js.map +1 -1
  232. package/dist/esm/pds-tabpanel.entry.js +1 -1
  233. package/dist/esm/pds-tabs.entry.js +1 -1
  234. package/dist/esm/pds-text.entry.js +1 -1
  235. package/dist/esm/pds-textarea.entry.js +9 -5
  236. package/dist/esm/pds-textarea.entry.js.map +1 -1
  237. package/dist/esm/pds-toast.entry.js +3 -3
  238. package/dist/esm/pds-tooltip.entry.js +3 -3
  239. package/dist/esm/pine-core.js +1 -1
  240. package/dist/esm-es5/floating-ui.dom-BO6p966C.js +2 -0
  241. package/dist/esm-es5/floating-ui.dom-BO6p966C.js.map +1 -0
  242. package/dist/esm-es5/{index-xbb79yLt.js → index-DY8eSueV.js} +1 -1
  243. package/dist/esm-es5/index-DY8eSueV.js.map +1 -0
  244. package/dist/esm-es5/loader.js +1 -1
  245. package/dist/esm-es5/mock-pds-modal.entry.js.map +1 -1
  246. package/dist/esm-es5/pds-accordion.entry.js +1 -1
  247. package/dist/esm-es5/pds-avatar.entry.js +1 -1
  248. package/dist/esm-es5/pds-avatar.entry.js.map +1 -1
  249. package/dist/esm-es5/pds-button.entry.js +1 -1
  250. package/dist/esm-es5/pds-button.entry.js.map +1 -1
  251. package/dist/esm-es5/pds-checkbox.entry.js +1 -1
  252. package/dist/esm-es5/pds-checkbox.entry.js.map +1 -1
  253. package/dist/esm-es5/pds-chip.entry.js +1 -1
  254. package/dist/esm-es5/pds-chip.entry.js.map +1 -1
  255. package/dist/esm-es5/pds-combobox.entry.js +2 -2
  256. package/dist/esm-es5/pds-combobox.entry.js.map +1 -1
  257. package/dist/esm-es5/pds-copytext.entry.js +1 -1
  258. package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
  259. package/dist/esm-es5/pds-dropdown-menu-item.entry.js.map +1 -1
  260. package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
  261. package/dist/esm-es5/pds-dropdown-menu.entry.js.map +1 -1
  262. package/dist/esm-es5/pds-filter.entry.js +1 -1
  263. package/dist/esm-es5/pds-filter.entry.js.map +1 -1
  264. package/dist/esm-es5/pds-input.entry.js +1 -1
  265. package/dist/esm-es5/pds-input.entry.js.map +1 -1
  266. package/dist/esm-es5/pds-link.entry.js +1 -1
  267. package/dist/esm-es5/pds-modal.entry.js.map +1 -1
  268. package/dist/esm-es5/pds-multiselect.entry.js +2 -0
  269. package/dist/esm-es5/pds-multiselect.entry.js.map +1 -0
  270. package/dist/esm-es5/pds-popover.entry.js +1 -1
  271. package/dist/esm-es5/pds-progress.entry.js +1 -1
  272. package/dist/esm-es5/pds-property.entry.js +1 -1
  273. package/dist/esm-es5/pds-radio-group.entry.js +1 -1
  274. package/dist/esm-es5/pds-radio.entry.js +1 -1
  275. package/dist/esm-es5/pds-radio.entry.js.map +1 -1
  276. package/dist/esm-es5/pds-row.entry.js +1 -1
  277. package/dist/esm-es5/pds-select.entry.js +1 -1
  278. package/dist/esm-es5/pds-select.entry.js.map +1 -1
  279. package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
  280. package/dist/esm-es5/pds-sortable.entry.js +1 -1
  281. package/dist/esm-es5/pds-switch.entry.js +1 -1
  282. package/dist/esm-es5/pds-tab.entry.js +1 -1
  283. package/dist/esm-es5/pds-tab.entry.js.map +1 -1
  284. package/dist/esm-es5/pds-table-body.entry.js +1 -1
  285. package/dist/esm-es5/pds-table-cell.entry.js +1 -1
  286. package/dist/esm-es5/pds-table-cell.entry.js.map +1 -1
  287. package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
  288. package/dist/esm-es5/pds-table-head-cell.entry.js.map +1 -1
  289. package/dist/esm-es5/pds-table-head.entry.js +1 -1
  290. package/dist/esm-es5/pds-table-row.entry.js +1 -1
  291. package/dist/esm-es5/pds-table.entry.js +1 -1
  292. package/dist/esm-es5/pds-table.entry.js.map +1 -1
  293. package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
  294. package/dist/esm-es5/pds-tabs.entry.js +1 -1
  295. package/dist/esm-es5/pds-text.entry.js +1 -1
  296. package/dist/esm-es5/pds-textarea.entry.js +1 -1
  297. package/dist/esm-es5/pds-textarea.entry.js.map +1 -1
  298. package/dist/esm-es5/pds-toast.entry.js +1 -1
  299. package/dist/esm-es5/pds-tooltip.entry.js +1 -1
  300. package/dist/esm-es5/pine-core.js +1 -1
  301. package/dist/pine-core/mock-pds-modal.entry.esm.js.map +1 -1
  302. package/dist/pine-core/p-02f48157.system.entry.js +2 -0
  303. package/dist/pine-core/{p-b30424e3.system.entry.js → p-063afa19.system.entry.js} +2 -2
  304. package/dist/pine-core/p-0sPVsRFU.system.js.map +1 -0
  305. package/dist/pine-core/{p-15202869.entry.js → p-10dbe3e2.entry.js} +2 -2
  306. package/dist/pine-core/{p-5b7ab891.entry.js → p-12360e47.entry.js} +2 -2
  307. package/dist/pine-core/{p-ac14c8e3.system.entry.js → p-137b3289.system.entry.js} +2 -2
  308. package/dist/pine-core/{p-a737df90.entry.js → p-154a32f4.entry.js} +2 -2
  309. package/dist/pine-core/p-1ca116fa.entry.js +3 -0
  310. package/dist/pine-core/p-1ca116fa.entry.js.map +1 -0
  311. package/dist/pine-core/p-2537aacb.entry.js +2 -0
  312. package/dist/pine-core/p-2537aacb.entry.js.map +1 -0
  313. package/dist/pine-core/p-2cd0d520.entry.js +2 -0
  314. package/dist/pine-core/p-2cd0d520.entry.js.map +1 -0
  315. package/dist/pine-core/{p-cd335ec2.system.entry.js → p-2fe330d0.system.entry.js} +2 -2
  316. package/dist/pine-core/p-30ea3668.system.entry.js +2 -0
  317. package/dist/pine-core/{p-1daf66d1.entry.js → p-31168da5.entry.js} +2 -2
  318. package/dist/pine-core/{p-732e2564.system.entry.js → p-325b3b0d.system.entry.js} +2 -2
  319. package/dist/pine-core/p-32c13896.system.entry.js +2 -0
  320. package/dist/pine-core/p-32c13896.system.entry.js.map +1 -0
  321. package/dist/pine-core/{p-95f2782c.entry.js → p-3f97a965.entry.js} +2 -2
  322. package/dist/pine-core/{p-ff182316.system.entry.js → p-40988b4d.system.entry.js} +2 -2
  323. package/dist/pine-core/{p-b02936d2.entry.js → p-415ba884.entry.js} +2 -2
  324. package/dist/pine-core/p-475bb340.entry.js +2 -0
  325. package/dist/pine-core/p-475bb340.entry.js.map +1 -0
  326. package/dist/pine-core/{p-CGo2P4Fr.system.js.map → p-4EbKXnVN.system.js.map} +1 -1
  327. package/dist/pine-core/p-4alPHnzl.system.js.map +1 -0
  328. package/dist/pine-core/{p-9bfaed7e.system.entry.js → p-4c23c75b.system.entry.js} +2 -2
  329. package/dist/pine-core/{p-bdf8bff3.system.entry.js → p-4d85945b.system.entry.js} +2 -2
  330. package/dist/pine-core/{p-3f8b0885.system.entry.js → p-4d9eee67.system.entry.js} +2 -2
  331. package/dist/pine-core/{p-4fD2iHS9.system.js.map → p-4f1cRPxE.system.js.map} +1 -1
  332. package/dist/pine-core/{p-e2104c31.entry.js → p-5040a872.entry.js} +2 -2
  333. package/dist/pine-core/p-51114c2b.system.entry.js +2 -0
  334. package/dist/pine-core/p-51114c2b.system.entry.js.map +1 -0
  335. package/dist/pine-core/{p-bbc349b3.system.entry.js → p-5b3ac18e.system.entry.js} +2 -2
  336. package/dist/pine-core/{p-bbc349b3.system.entry.js.map → p-5b3ac18e.system.entry.js.map} +1 -1
  337. package/dist/pine-core/{p-a08b60ae.entry.js → p-5b9110fe.entry.js} +2 -2
  338. package/dist/pine-core/p-5c982339.system.entry.js +2 -0
  339. package/dist/pine-core/p-5c982339.system.entry.js.map +1 -0
  340. package/dist/pine-core/{p-94b1997d.system.entry.js → p-5e92aa34.system.entry.js} +2 -2
  341. package/dist/pine-core/{p-41d89f20.entry.js → p-5f2865df.entry.js} +2 -2
  342. package/dist/pine-core/{p-41d89f20.entry.js.map → p-5f2865df.entry.js.map} +1 -1
  343. package/dist/pine-core/p-6321b70b.entry.js +2 -0
  344. package/dist/pine-core/p-6321b70b.entry.js.map +1 -0
  345. package/dist/pine-core/p-63269b89.entry.js +2 -0
  346. package/dist/pine-core/p-6e862168.system.entry.js +2 -0
  347. package/dist/pine-core/{p-b8047816.system.entry.js.map → p-6e862168.system.entry.js.map} +1 -1
  348. package/dist/pine-core/{p-cf2e1c07.system.entry.js → p-70aa35fc.system.entry.js} +2 -2
  349. package/dist/pine-core/{p-fc0ee6da.entry.js → p-757c7b80.entry.js} +2 -2
  350. package/dist/pine-core/{p-1df25b57.system.entry.js → p-78ee2e08.system.entry.js} +2 -2
  351. package/dist/pine-core/{p-2319298c.system.entry.js → p-7b5c8248.system.entry.js} +2 -2
  352. package/dist/pine-core/{p-dad604e4.system.entry.js → p-84c7f663.system.entry.js} +2 -2
  353. package/dist/pine-core/{p-f9ef2f74.system.entry.js → p-87eb8d4b.system.entry.js} +2 -2
  354. package/dist/pine-core/p-8b201c9a.system.entry.js +2 -0
  355. package/dist/pine-core/p-8b201c9a.system.entry.js.map +1 -0
  356. package/dist/pine-core/p-8eb1c168.entry.js +2 -0
  357. package/dist/pine-core/{p-e5bc22b6.system.entry.js → p-8fdb10c4.system.entry.js} +2 -2
  358. package/dist/pine-core/{p-232e4282.system.entry.js → p-90615423.system.entry.js} +2 -2
  359. package/dist/pine-core/{p-f79f6f08.system.entry.js → p-932283cf.system.entry.js} +2 -2
  360. package/dist/pine-core/{p-0b05708b.entry.js → p-9ada659b.entry.js} +2 -2
  361. package/dist/pine-core/{p-4778ae70.entry.js → p-9bb6cc3d.entry.js} +2 -2
  362. package/dist/pine-core/p-9c0ec80a.entry.js +2 -0
  363. package/dist/pine-core/p-9c0ec80a.entry.js.map +1 -0
  364. package/dist/pine-core/{p-3f6b9520.entry.js → p-9c928c44.entry.js} +2 -2
  365. package/dist/pine-core/p-9e4fc025.entry.js +2 -0
  366. package/dist/pine-core/p-9e4fc025.entry.js.map +1 -0
  367. package/dist/pine-core/{p-e8aad8dc.entry.js → p-9eccf7b9.entry.js} +2 -2
  368. package/dist/pine-core/p-B0Otb6kF.system.js.map +1 -0
  369. package/dist/pine-core/{p-CUmDvil2.system.js.map → p-BA95hFrH.system.js.map} +1 -1
  370. package/dist/pine-core/p-BCKPcTKX.system.js.map +1 -1
  371. package/dist/pine-core/p-BHjZufAO.system.js.map +1 -0
  372. package/dist/pine-core/{p-DC2NZwtk.system.js.map → p-BJE1EIse.system.js.map} +1 -1
  373. package/dist/pine-core/{p-IH8oGXiE.system.js.map → p-BJtTt670.system.js.map} +1 -1
  374. package/dist/pine-core/p-BO6p966C.js +2 -0
  375. package/dist/pine-core/p-BO6p966C.js.map +1 -0
  376. package/dist/pine-core/{p-jBhqNO5u.system.js.map → p-BSRmAvMC.system.js.map} +1 -1
  377. package/dist/pine-core/{p-DyrNlfLT.system.js.map → p-BTe59phF.system.js.map} +1 -1
  378. package/dist/pine-core/p-BmKJgY0X.system.js.map +1 -0
  379. package/dist/pine-core/{p-B0Y1Zs9b.system.js.map → p-Bn36FPag.system.js.map} +1 -1
  380. package/dist/pine-core/p-C48G0LPH.system.js.map +1 -1
  381. package/dist/pine-core/p-CBCT89qf.system.js.map +1 -0
  382. package/dist/pine-core/p-CCgKUhC7.system.js.map +1 -0
  383. package/dist/pine-core/p-CG5jdxoZ.system.js.map +1 -0
  384. package/dist/pine-core/{p-CKzDRRgx.system.js → p-CP48ADFM.system.js} +1 -1
  385. package/dist/pine-core/p-CP48ADFM.system.js.map +1 -0
  386. package/dist/pine-core/p-CR01VmO6.system.js.map +1 -0
  387. package/dist/pine-core/{p-CAnnMfDw.system.js.map → p-CSLo9qKS.system.js.map} +1 -1
  388. package/dist/pine-core/{p-DmVKABQy.system.js.map → p-CboCokff.system.js.map} +1 -1
  389. package/dist/pine-core/p-CfZCQYfD.system.js.map +1 -0
  390. package/dist/pine-core/{p-r_cS5LMw.system.js.map → p-Civ2VHC7.system.js.map} +1 -1
  391. package/dist/pine-core/{p-ChiYqN-p.system.js.map → p-CmquVvkz.system.js.map} +1 -1
  392. package/dist/pine-core/{p-tHMXRB8d.system.js.map → p-CpyTw2IQ.system.js.map} +1 -1
  393. package/dist/pine-core/{p-Brpt0zl5.system.js.map → p-Ct9csNdF.system.js.map} +1 -1
  394. package/dist/pine-core/{p-B_Co5NfG.system.js.map → p-Cun139qe.system.js.map} +1 -1
  395. package/dist/pine-core/p-D2eS6fhD.system.js +2 -0
  396. package/dist/pine-core/p-D2eS6fhD.system.js.map +1 -0
  397. package/dist/pine-core/p-DFXWnbHE.system.js.map +1 -0
  398. package/dist/pine-core/{p-xbb79yLt.js → p-DY8eSueV.js} +1 -1
  399. package/dist/pine-core/p-DY8eSueV.js.map +1 -0
  400. package/dist/pine-core/p-DaXZLSA0.system.js.map +1 -0
  401. package/dist/pine-core/{p-DB45WSlG.system.js.map → p-DwQewDCV.system.js.map} +1 -1
  402. package/dist/pine-core/p-JAVnELnm.system.js +1 -1
  403. package/dist/pine-core/{p-DAvCgWA9.system.js.map → p-Lk6DnEPT.system.js.map} +1 -1
  404. package/dist/pine-core/p-YqHO7iPZ.system.js.map +1 -0
  405. package/dist/pine-core/{p-00568c20.system.entry.js → p-a07b8e45.system.entry.js} +2 -2
  406. package/dist/pine-core/p-a3bCMZF8.system.js.map +1 -0
  407. package/dist/pine-core/{p-c5013d20.entry.js → p-a3cdff85.entry.js} +2 -2
  408. package/dist/pine-core/{p-a4b16b32.system.entry.js → p-a5b24b1d.system.entry.js} +2 -2
  409. package/dist/pine-core/{p-596acf65.entry.js → p-a99e8caf.entry.js} +2 -2
  410. package/dist/pine-core/p-ac240034.system.entry.js +2 -0
  411. package/dist/pine-core/p-ac240034.system.entry.js.map +1 -0
  412. package/dist/pine-core/p-b9650ed9.system.entry.js +2 -0
  413. package/dist/pine-core/p-b9650ed9.system.entry.js.map +1 -0
  414. package/dist/pine-core/{p-f8fba315.entry.js → p-bc85016b.entry.js} +2 -2
  415. package/dist/pine-core/{p-61588eac.entry.js → p-bddc9c5a.entry.js} +2 -2
  416. package/dist/pine-core/p-bs74TBAh.system.js.map +1 -0
  417. package/dist/pine-core/{p-7de73ac5.entry.js → p-c24d11c7.entry.js} +2 -2
  418. package/dist/pine-core/p-c292e5da.system.entry.js +2 -0
  419. package/dist/pine-core/{p-c03e2c5d.system.entry.js.map → p-c292e5da.system.entry.js.map} +1 -1
  420. package/dist/pine-core/p-c68bceb1.entry.js +2 -0
  421. package/dist/pine-core/{p-41cc9270.entry.js.map → p-c68bceb1.entry.js.map} +1 -1
  422. package/dist/pine-core/{p-0ace9c16.entry.js → p-c7c00a27.entry.js} +2 -2
  423. package/dist/pine-core/{p-cb6c279a.system.entry.js → p-cac3128b.system.entry.js} +2 -2
  424. package/dist/pine-core/p-ccab748a.entry.js +2 -0
  425. package/dist/pine-core/p-ccab748a.entry.js.map +1 -0
  426. package/dist/pine-core/{p-131a8cff.system.entry.js → p-cfb24f97.system.entry.js} +2 -2
  427. package/dist/pine-core/p-cfb24f97.system.entry.js.map +1 -0
  428. package/dist/pine-core/p-d41112ad.entry.js +2 -0
  429. package/dist/pine-core/{p-4c0797f2.entry.js.map → p-d41112ad.entry.js.map} +1 -1
  430. package/dist/pine-core/{p-6cba6806.entry.js → p-d6302edd.entry.js} +2 -2
  431. package/dist/pine-core/p-d98310b9.system.entry.js +2 -0
  432. package/dist/pine-core/p-d98310b9.system.entry.js.map +1 -0
  433. package/dist/pine-core/{p-04294b28.system.entry.js → p-daa36570.system.entry.js} +2 -2
  434. package/dist/pine-core/p-db06ad25.system.entry.js +4 -0
  435. package/dist/pine-core/p-db06ad25.system.entry.js.map +1 -0
  436. package/dist/pine-core/{p-15650db8.entry.js → p-e6dc2297.entry.js} +2 -2
  437. package/dist/pine-core/{p-9f53eb94.system.entry.js → p-e8cf15d7.system.entry.js} +2 -2
  438. package/dist/pine-core/p-eb026745.entry.js +2 -0
  439. package/dist/pine-core/p-fa05ea14.entry.js +2 -0
  440. package/dist/pine-core/p-fa05ea14.entry.js.map +1 -0
  441. package/dist/pine-core/{p-D8Jc24Qq.system.js.map → p-htODgUCV.system.js.map} +1 -1
  442. package/dist/pine-core/{p-DYq1Mef8.system.js.map → p-j0609tLE.system.js.map} +1 -1
  443. package/dist/pine-core/{p-DoP8Sl1O.system.js.map → p-rcUX-rt5.system.js.map} +1 -1
  444. package/dist/pine-core/p-uyztncxJ.system.js.map +1 -0
  445. package/dist/pine-core/pds-avatar.entry.esm.js.map +1 -1
  446. package/dist/pine-core/pds-button.entry.esm.js.map +1 -1
  447. package/dist/pine-core/pds-checkbox.entry.esm.js.map +1 -1
  448. package/dist/pine-core/pds-chip.entry.esm.js.map +1 -1
  449. package/dist/pine-core/pds-combobox.entry.esm.js.map +1 -1
  450. package/dist/pine-core/pds-dropdown-menu-item.entry.esm.js.map +1 -1
  451. package/dist/pine-core/pds-dropdown-menu.entry.esm.js.map +1 -1
  452. package/dist/pine-core/pds-filter.entry.esm.js.map +1 -1
  453. package/dist/pine-core/pds-input.entry.esm.js.map +1 -1
  454. package/dist/pine-core/pds-modal.entry.esm.js.map +1 -1
  455. package/dist/pine-core/pds-multiselect.entry.esm.js.map +1 -0
  456. package/dist/pine-core/pds-radio.entry.esm.js.map +1 -1
  457. package/dist/pine-core/pds-select.entry.esm.js.map +1 -1
  458. package/dist/pine-core/pds-tab.entry.esm.js.map +1 -1
  459. package/dist/pine-core/pds-table-cell.entry.esm.js.map +1 -1
  460. package/dist/pine-core/pds-table-head-cell.entry.esm.js.map +1 -1
  461. package/dist/pine-core/pds-table.entry.esm.js.map +1 -1
  462. package/dist/pine-core/pds-textarea.entry.esm.js.map +1 -1
  463. package/dist/pine-core/pine-core.esm.js +1 -1
  464. package/dist/types/components/pds-avatar/pds-avatar.d.ts +5 -0
  465. package/dist/types/components/pds-input/pds-input.d.ts +5 -0
  466. package/dist/types/components/pds-multiselect/multiselect-interface.d.ts +24 -0
  467. package/dist/types/components/pds-multiselect/pds-multiselect.d.ts +175 -0
  468. package/dist/types/components/pds-select/pds-select.d.ts +16 -1
  469. package/dist/types/components/pds-table/pds-table-head-cell/pds-table-head-cell.d.ts +16 -0
  470. package/dist/types/components/pds-table/pds-table.d.ts +17 -1
  471. package/dist/types/components/pds-textarea/pds-textarea.d.ts +5 -0
  472. package/dist/types/components.d.ts +309 -1
  473. package/dist/vscode.html-data.json +190 -5
  474. package/hydrate/index.js +1016 -112
  475. package/hydrate/index.mjs +1016 -112
  476. package/package.json +5 -5
  477. package/dist/cjs/floating-ui.dom-DTAy35nv.js.map +0 -1
  478. package/dist/cjs/index-CMeuo765.js.map +0 -1
  479. package/dist/esm/floating-ui.dom-DbQzNDdQ.js.map +0 -1
  480. package/dist/esm/index-xbb79yLt.js.map +0 -1
  481. package/dist/esm-es5/floating-ui.dom-DbQzNDdQ.js +0 -2
  482. package/dist/esm-es5/floating-ui.dom-DbQzNDdQ.js.map +0 -1
  483. package/dist/esm-es5/index-xbb79yLt.js.map +0 -1
  484. package/dist/pine-core/p--gPqixhD.system.js.map +0 -1
  485. package/dist/pine-core/p-0c84a3f4.entry.js +0 -2
  486. package/dist/pine-core/p-0c84a3f4.entry.js.map +0 -1
  487. package/dist/pine-core/p-0fdffed5.entry.js +0 -2
  488. package/dist/pine-core/p-0fdffed5.entry.js.map +0 -1
  489. package/dist/pine-core/p-1282026f.entry.js +0 -2
  490. package/dist/pine-core/p-1282026f.entry.js.map +0 -1
  491. package/dist/pine-core/p-131a8cff.system.entry.js.map +0 -1
  492. package/dist/pine-core/p-198abda7.system.entry.js +0 -2
  493. package/dist/pine-core/p-198abda7.system.entry.js.map +0 -1
  494. package/dist/pine-core/p-20f255e6.entry.js +0 -2
  495. package/dist/pine-core/p-20f255e6.entry.js.map +0 -1
  496. package/dist/pine-core/p-41cc9270.entry.js +0 -2
  497. package/dist/pine-core/p-43990889.entry.js +0 -2
  498. package/dist/pine-core/p-49c1eab0.entry.js +0 -2
  499. package/dist/pine-core/p-49c1eab0.entry.js.map +0 -1
  500. package/dist/pine-core/p-4c0797f2.entry.js +0 -2
  501. package/dist/pine-core/p-54a02bb5.system.entry.js +0 -2
  502. package/dist/pine-core/p-54a02bb5.system.entry.js.map +0 -1
  503. package/dist/pine-core/p-553e4543.entry.js +0 -2
  504. package/dist/pine-core/p-553e4543.entry.js.map +0 -1
  505. package/dist/pine-core/p-5f6cd30d.system.entry.js +0 -2
  506. package/dist/pine-core/p-5f6cd30d.system.entry.js.map +0 -1
  507. package/dist/pine-core/p-66160018.entry.js +0 -3
  508. package/dist/pine-core/p-66160018.entry.js.map +0 -1
  509. package/dist/pine-core/p-98824683.entry.js +0 -2
  510. package/dist/pine-core/p-98824683.entry.js.map +0 -1
  511. package/dist/pine-core/p-BOmQOnQe.system.js +0 -2
  512. package/dist/pine-core/p-BOmQOnQe.system.js.map +0 -1
  513. package/dist/pine-core/p-BOn7G6db.system.js.map +0 -1
  514. package/dist/pine-core/p-CKzDRRgx.system.js.map +0 -1
  515. package/dist/pine-core/p-CTfQ_9yC.system.js.map +0 -1
  516. package/dist/pine-core/p-CTjTtD1R.system.js.map +0 -1
  517. package/dist/pine-core/p-CXGuX44q.system.js.map +0 -1
  518. package/dist/pine-core/p-Ch7MRoFE.system.js.map +0 -1
  519. package/dist/pine-core/p-DQawTYre.system.js.map +0 -1
  520. package/dist/pine-core/p-DQs506y8.system.js.map +0 -1
  521. package/dist/pine-core/p-DbQzNDdQ.js +0 -2
  522. package/dist/pine-core/p-DbQzNDdQ.js.map +0 -1
  523. package/dist/pine-core/p-DpeOrUYB.system.js.map +0 -1
  524. package/dist/pine-core/p-RO-Y2DRT.system.js.map +0 -1
  525. package/dist/pine-core/p-WhfStK1C.system.js.map +0 -1
  526. package/dist/pine-core/p-X0_TH-op.system.js.map +0 -1
  527. package/dist/pine-core/p-b59a0c6b.system.entry.js +0 -2
  528. package/dist/pine-core/p-b8047816.system.entry.js +0 -2
  529. package/dist/pine-core/p-bee8d4b8.system.entry.js +0 -4
  530. package/dist/pine-core/p-bee8d4b8.system.entry.js.map +0 -1
  531. package/dist/pine-core/p-c03e2c5d.system.entry.js +0 -2
  532. package/dist/pine-core/p-c2d17093.system.entry.js +0 -2
  533. package/dist/pine-core/p-c2d17093.system.entry.js.map +0 -1
  534. package/dist/pine-core/p-d0e336b7.system.entry.js +0 -2
  535. package/dist/pine-core/p-e3d81bee.system.entry.js +0 -2
  536. package/dist/pine-core/p-e3d81bee.system.entry.js.map +0 -1
  537. package/dist/pine-core/p-e7e25d42.entry.js +0 -2
  538. package/dist/pine-core/p-e846b67f.system.entry.js +0 -2
  539. package/dist/pine-core/p-e846b67f.system.entry.js.map +0 -1
  540. package/dist/pine-core/p-f92055f3.entry.js +0 -2
  541. package/dist/pine-core/p-pw5cGGlu.system.js.map +0 -1
  542. package/dist/pine-core/p-qkIMFuAW.system.js.map +0 -1
  543. package/dist/pine-core/p-uv97KtT8.system.js.map +0 -1
  544. package/dist/pine-core/p-xbb79yLt.js.map +0 -1
  545. /package/dist/pine-core/{p-b59a0c6b.system.entry.js.map → p-02f48157.system.entry.js.map} +0 -0
  546. /package/dist/pine-core/{p-b30424e3.system.entry.js.map → p-063afa19.system.entry.js.map} +0 -0
  547. /package/dist/pine-core/{p-15202869.entry.js.map → p-10dbe3e2.entry.js.map} +0 -0
  548. /package/dist/pine-core/{p-5b7ab891.entry.js.map → p-12360e47.entry.js.map} +0 -0
  549. /package/dist/pine-core/{p-ac14c8e3.system.entry.js.map → p-137b3289.system.entry.js.map} +0 -0
  550. /package/dist/pine-core/{p-a737df90.entry.js.map → p-154a32f4.entry.js.map} +0 -0
  551. /package/dist/pine-core/{p-cd335ec2.system.entry.js.map → p-2fe330d0.system.entry.js.map} +0 -0
  552. /package/dist/pine-core/{p-d0e336b7.system.entry.js.map → p-30ea3668.system.entry.js.map} +0 -0
  553. /package/dist/pine-core/{p-1daf66d1.entry.js.map → p-31168da5.entry.js.map} +0 -0
  554. /package/dist/pine-core/{p-732e2564.system.entry.js.map → p-325b3b0d.system.entry.js.map} +0 -0
  555. /package/dist/pine-core/{p-95f2782c.entry.js.map → p-3f97a965.entry.js.map} +0 -0
  556. /package/dist/pine-core/{p-ff182316.system.entry.js.map → p-40988b4d.system.entry.js.map} +0 -0
  557. /package/dist/pine-core/{p-b02936d2.entry.js.map → p-415ba884.entry.js.map} +0 -0
  558. /package/dist/pine-core/{p-9bfaed7e.system.entry.js.map → p-4c23c75b.system.entry.js.map} +0 -0
  559. /package/dist/pine-core/{p-bdf8bff3.system.entry.js.map → p-4d85945b.system.entry.js.map} +0 -0
  560. /package/dist/pine-core/{p-3f8b0885.system.entry.js.map → p-4d9eee67.system.entry.js.map} +0 -0
  561. /package/dist/pine-core/{p-e2104c31.entry.js.map → p-5040a872.entry.js.map} +0 -0
  562. /package/dist/pine-core/{p-a08b60ae.entry.js.map → p-5b9110fe.entry.js.map} +0 -0
  563. /package/dist/pine-core/{p-94b1997d.system.entry.js.map → p-5e92aa34.system.entry.js.map} +0 -0
  564. /package/dist/pine-core/{p-43990889.entry.js.map → p-63269b89.entry.js.map} +0 -0
  565. /package/dist/pine-core/{p-cf2e1c07.system.entry.js.map → p-70aa35fc.system.entry.js.map} +0 -0
  566. /package/dist/pine-core/{p-fc0ee6da.entry.js.map → p-757c7b80.entry.js.map} +0 -0
  567. /package/dist/pine-core/{p-1df25b57.system.entry.js.map → p-78ee2e08.system.entry.js.map} +0 -0
  568. /package/dist/pine-core/{p-2319298c.system.entry.js.map → p-7b5c8248.system.entry.js.map} +0 -0
  569. /package/dist/pine-core/{p-dad604e4.system.entry.js.map → p-84c7f663.system.entry.js.map} +0 -0
  570. /package/dist/pine-core/{p-f9ef2f74.system.entry.js.map → p-87eb8d4b.system.entry.js.map} +0 -0
  571. /package/dist/pine-core/{p-e7e25d42.entry.js.map → p-8eb1c168.entry.js.map} +0 -0
  572. /package/dist/pine-core/{p-e5bc22b6.system.entry.js.map → p-8fdb10c4.system.entry.js.map} +0 -0
  573. /package/dist/pine-core/{p-232e4282.system.entry.js.map → p-90615423.system.entry.js.map} +0 -0
  574. /package/dist/pine-core/{p-f79f6f08.system.entry.js.map → p-932283cf.system.entry.js.map} +0 -0
  575. /package/dist/pine-core/{p-0b05708b.entry.js.map → p-9ada659b.entry.js.map} +0 -0
  576. /package/dist/pine-core/{p-4778ae70.entry.js.map → p-9bb6cc3d.entry.js.map} +0 -0
  577. /package/dist/pine-core/{p-3f6b9520.entry.js.map → p-9c928c44.entry.js.map} +0 -0
  578. /package/dist/pine-core/{p-e8aad8dc.entry.js.map → p-9eccf7b9.entry.js.map} +0 -0
  579. /package/dist/pine-core/{p-00568c20.system.entry.js.map → p-a07b8e45.system.entry.js.map} +0 -0
  580. /package/dist/pine-core/{p-c5013d20.entry.js.map → p-a3cdff85.entry.js.map} +0 -0
  581. /package/dist/pine-core/{p-a4b16b32.system.entry.js.map → p-a5b24b1d.system.entry.js.map} +0 -0
  582. /package/dist/pine-core/{p-596acf65.entry.js.map → p-a99e8caf.entry.js.map} +0 -0
  583. /package/dist/pine-core/{p-f8fba315.entry.js.map → p-bc85016b.entry.js.map} +0 -0
  584. /package/dist/pine-core/{p-61588eac.entry.js.map → p-bddc9c5a.entry.js.map} +0 -0
  585. /package/dist/pine-core/{p-7de73ac5.entry.js.map → p-c24d11c7.entry.js.map} +0 -0
  586. /package/dist/pine-core/{p-0ace9c16.entry.js.map → p-c7c00a27.entry.js.map} +0 -0
  587. /package/dist/pine-core/{p-cb6c279a.system.entry.js.map → p-cac3128b.system.entry.js.map} +0 -0
  588. /package/dist/pine-core/{p-6cba6806.entry.js.map → p-d6302edd.entry.js.map} +0 -0
  589. /package/dist/pine-core/{p-04294b28.system.entry.js.map → p-daa36570.system.entry.js.map} +0 -0
  590. /package/dist/pine-core/{p-15650db8.entry.js.map → p-e6dc2297.entry.js.map} +0 -0
  591. /package/dist/pine-core/{p-9f53eb94.system.entry.js.map → p-e8cf15d7.system.entry.js.map} +0 -0
  592. /package/dist/pine-core/{p-f92055f3.entry.js.map → p-eb026745.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"p-D8Jc24Qq.system.js","sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n /**\n * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n */\n --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n /**\n * @prop --tabs-dimension-panel-padding: Optional padding for panels\n */\n --tabs-dimension-panel-padding: 0;\n\n display: block;\n}\n\n.pds-tabs__tablist {\n display: flex;\n flex-wrap: wrap;\n gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n background-color: var(--pine-color-background-app);\n border: var(--pine-border-width-thin) solid var(--pine-color-border-subtle);\n border-radius: var(--pine-dimension-100);\n display: inline-flex;\n display: flex;\n gap: 0;\n height: var(--pine-dimension-450);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n * @part tab-list - Exposes the container element that holds all the tab buttons for styling.\n */\n@Component({\n tag: 'pds-tabs',\n styleUrls: ['pds-tabs.scss'],\n shadow: true,\n})\nexport class PdsTabs {\n private tabs;\n private tabPanels;\n\n @Element() el: HTMLPdsTabsElement;\n\n /**\n * Sets the aria-label attached to the tablist element\n */\n @Prop() tablistLabel!: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets tabs variant styles as outlined in Figma documentation\n */\n @Prop() variant!: 'primary' | 'availability' | 'filter' | 'pill';\n\n /**\n * Sets the starting active tab name and maintains the name as the component re-renders\n */\n @Prop({mutable: true}) activeTabName!: string;\n\n /**\n * Sets the starting active tab index number and maintains the index number as the component re-renders\n */\n /** @internal */\n @Prop({mutable: true}) activeTabIndex: number;\n\n @Listen('pdsTabClick', {\n target: 'body',\n })\n tabClickHandler(event: CustomEvent<any>) {\n if (this.componentId === event.detail[1]) {\n this.activeTabIndex = event.detail[0];\n this.activeTabName = this.tabs[this.activeTabIndex].name;\n }\n }\n\n @Listen('keydown', {})\n handleKeyDown(ev: KeyboardEvent) {\n const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n // Only handle keyboard navigation if the event originated from a tab button\n // that belongs to THIS tabs component\n const target = ev.target as HTMLElement;\n const targetTab = target.closest('pds-tab');\n\n // Check if the tab belongs to this tabs instance (not a nested one)\n const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;\n\n if (keySet.includes(ev.key) && isOwnTab) {\n ev.preventDefault();\n this.moveActiveTab(ev.key);\n }\n }\n\n private moveActiveTab(key: string) {\n const firstTabNumber = 0;\n const lastTabNumber = this.tabs.length - 1;\n\n let moveFocusTo = null;\n\n switch (key) {\n case 'ArrowLeft':\n moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n break;\n case 'ArrowRight':\n moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n break;\n case 'Home':\n moveFocusTo = firstTabNumber;\n break;\n case 'End':\n moveFocusTo = lastTabNumber;\n break;\n }\n\n // Move focus to the button element within `pds-tab`\n this.tabs[moveFocusTo].children[0].focus();\n this.activeTabName = this.tabs[moveFocusTo].name;\n this.activeTabIndex = moveFocusTo;\n }\n\n private findAllChildren() {\n // Only select direct children tabs/tabpanels, not nested ones\n const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));\n const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));\n\n // Filter to only include tabs that belong to this tabs component (not nested)\n this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);\n this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);\n }\n\n private propGeneration(child, index = 0) {\n child.parentComponentId = this.componentId.toString();\n child.variant = this.variant.toString();\n child.selected = (this.activeTabName === child.name) ? true : false;\n child['index'] = index;\n }\n\n private passPropsToChildren() {\n this.tabs.forEach((child, index) => {\n if (this.activeTabName === child.name) this.activeTabIndex = index;\n this.propGeneration(child, index);\n });\n\n this.tabPanels.forEach((child) => {\n this.propGeneration(child);\n });\n }\n\n private classNames() {\n let className = `pds-tabs`;\n if (this.variant && this.variant != 'primary') {\n const variantClassName = `pds-tabs--${this.variant}`;\n className += ' ' + variantClassName;\n }\n\n return className;\n };\n\n componentWillLoad() {\n this.findAllChildren();\n }\n\n componentWillRender() {\n this.passPropsToChildren();\n }\n\n render() {\n return (\n <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel} part=\"tab-list\">\n <slot name=\"tabs\" />\n </div>\n <slot name=\"tabpanels\" />\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"p-htODgUCV.system.js","sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n /**\n * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n */\n --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n /**\n * @prop --tabs-dimension-panel-padding: Optional padding for panels\n */\n --tabs-dimension-panel-padding: 0;\n\n display: block;\n}\n\n.pds-tabs__tablist {\n display: flex;\n flex-wrap: wrap;\n gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n background-color: var(--pine-color-background-app);\n border: var(--pine-border-width-thin) solid var(--pine-color-border-subtle);\n border-radius: var(--pine-dimension-100);\n display: inline-flex;\n display: flex;\n gap: 0;\n height: var(--pine-dimension-450);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n * @part tab-list - Exposes the container element that holds all the tab buttons for styling.\n */\n@Component({\n tag: 'pds-tabs',\n styleUrls: ['pds-tabs.scss'],\n shadow: true,\n})\nexport class PdsTabs {\n private tabs;\n private tabPanels;\n\n @Element() el: HTMLPdsTabsElement;\n\n /**\n * Sets the aria-label attached to the tablist element\n */\n @Prop() tablistLabel!: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets tabs variant styles as outlined in Figma documentation\n */\n @Prop() variant!: 'primary' | 'availability' | 'filter' | 'pill';\n\n /**\n * Sets the starting active tab name and maintains the name as the component re-renders\n */\n @Prop({mutable: true}) activeTabName!: string;\n\n /**\n * Sets the starting active tab index number and maintains the index number as the component re-renders\n */\n /** @internal */\n @Prop({mutable: true}) activeTabIndex: number;\n\n @Listen('pdsTabClick', {\n target: 'body',\n })\n tabClickHandler(event: CustomEvent<any>) {\n if (this.componentId === event.detail[1]) {\n this.activeTabIndex = event.detail[0];\n this.activeTabName = this.tabs[this.activeTabIndex].name;\n }\n }\n\n @Listen('keydown', {})\n handleKeyDown(ev: KeyboardEvent) {\n const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n // Only handle keyboard navigation if the event originated from a tab button\n // that belongs to THIS tabs component\n const target = ev.target as HTMLElement;\n const targetTab = target.closest('pds-tab');\n\n // Check if the tab belongs to this tabs instance (not a nested one)\n const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;\n\n if (keySet.includes(ev.key) && isOwnTab) {\n ev.preventDefault();\n this.moveActiveTab(ev.key);\n }\n }\n\n private moveActiveTab(key: string) {\n const firstTabNumber = 0;\n const lastTabNumber = this.tabs.length - 1;\n\n let moveFocusTo = null;\n\n switch (key) {\n case 'ArrowLeft':\n moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n break;\n case 'ArrowRight':\n moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n break;\n case 'Home':\n moveFocusTo = firstTabNumber;\n break;\n case 'End':\n moveFocusTo = lastTabNumber;\n break;\n }\n\n // Move focus to the button element within `pds-tab`\n this.tabs[moveFocusTo].children[0].focus();\n this.activeTabName = this.tabs[moveFocusTo].name;\n this.activeTabIndex = moveFocusTo;\n }\n\n private findAllChildren() {\n // Only select direct children tabs/tabpanels, not nested ones\n const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));\n const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));\n\n // Filter to only include tabs that belong to this tabs component (not nested)\n this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);\n this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);\n }\n\n private propGeneration(child, index = 0) {\n child.parentComponentId = this.componentId.toString();\n child.variant = this.variant.toString();\n child.selected = (this.activeTabName === child.name) ? true : false;\n child['index'] = index;\n }\n\n private passPropsToChildren() {\n this.tabs.forEach((child, index) => {\n if (this.activeTabName === child.name) this.activeTabIndex = index;\n this.propGeneration(child, index);\n });\n\n this.tabPanels.forEach((child) => {\n this.propGeneration(child);\n });\n }\n\n private classNames() {\n let className = `pds-tabs`;\n if (this.variant && this.variant != 'primary') {\n const variantClassName = `pds-tabs--${this.variant}`;\n className += ' ' + variantClassName;\n }\n\n return className;\n };\n\n componentWillLoad() {\n this.findAllChildren();\n }\n\n componentWillRender() {\n this.passPropsToChildren();\n }\n\n render() {\n return (\n <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel} part=\"tab-list\">\n <slot name=\"tabs\" />\n </div>\n <slot name=\"tabpanels\" />\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"p-DYq1Mef8.system.js","sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n --sizing-max-width-default: 352px;\n\n display: inline-block;\n\n // Trigger wrapper for slotted content\n .pds-popover__trigger-wrapper {\n display: inline-block;\n }\n\n // Content slot wrapper is hidden (content is rendered in portal)\n .pds-popover__content-slot-wrapper {\n display: none;\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\nimport { PdsPopoverEventDetail } from './popover-interface';\n\n/**\n * @slot trigger - The trigger element for the popover\n * @slot (default) - The content to display inside the popover\n */\n@Component({\n tag: 'pds-popover',\n styleUrl: 'pds-popover.scss',\n shadow: true,\n})\nexport class PdsPopover {\n /**\n * Reference to the Host element\n */\n @Element() el: HTMLPdsPopoverElement;\n\n /**\n * Determines when the popover is active\n * @defaultValue false\n */\n @State() active = false;\n\n /**\n * Tracks if the component is still mounted to prevent memory leaks\n */\n private isComponentMounted = true;\n\n /**\n * Reference to the trigger element\n */\n private triggerEl: HTMLElement | null = null;\n\n /**\n * Portal element rendered in document.body\n */\n private portalEl: HTMLElement | null = null;\n\n /**\n * Guard to prevent repositioning loops\n */\n private isRepositioning = false;\n\n /**\n * Debounce timers for performance optimization\n */\n private scrollDebounceTimer: ReturnType<typeof setTimeout> | null = null;\n private resizeDebounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n /**\n * Track moved nodes and their placeholders for restoration\n */\n private movedNodes: Array<{ node: Node; placeholder: Comment }> = [];\n\n /**\n * Timestamp when popover was opened (for preventing immediate close)\n */\n private openTimestamp = 0;\n\n /**\n * Instance counter for unique IDs\n */\n private static instanceCounter = 0;\n\n /**\n * Bound handlers for cleanup\n */\n private boundClickOutsideHandler: (event: MouseEvent) => void;\n private boundEscapeKeyHandler: (event: KeyboardEvent) => void;\n private boundScrollHandler: () => void;\n private boundResizeHandler: () => void;\n\n /**\n * Emitted when the popover is opened\n */\n @Event() pdsPopoverOpen: EventEmitter<PdsPopoverEventDetail>;\n\n /**\n * Emitted when the popover is closed\n */\n @Event() pdsPopoverClose: EventEmitter<PdsPopoverEventDetail>;\n\n /**\n * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n * @defaultValue \"show\"\n */\n @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n /**\n * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n * Manual popovers require the consumer to handle the visibility of the popover.\n */\n @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Sets the maximum width of the popover content\n * @defaultValue 352\n */\n @Prop() maxWidth?: number = 352;\n\n /**\n * Determines the preferred position of the popover\n * @defaultValue \"right\"\n */\n @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n componentDidLoad() {\n // Bind event handlers for cleanup\n this.boundClickOutsideHandler = this.handleClickOutside.bind(this);\n this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);\n this.boundScrollHandler = this.handleScroll.bind(this);\n this.boundResizeHandler = this.handleResize.bind(this);\n\n // Create portal element\n this.createPortal();\n\n // Initialize trigger element by calling slot change handler\n // This is a fallback for environments where slot change might not fire reliably\n const triggerSlot = this.el.shadowRoot?.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n if (triggerSlot && this.triggerEl == null) {\n const CustomEvent = (typeof window !== 'undefined' ? window.Event : global.Event) as any;\n const slotChangeEvent = new CustomEvent('slotchange');\n Object.defineProperty(slotChangeEvent, 'target', { value: triggerSlot, enumerable: true });\n this.handleTriggerSlotChange(slotChangeEvent);\n }\n }\n\n /**\n * Handles changes to the trigger slot\n */\n private handleTriggerSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n const assignedElements = slot.assignedElements();\n\n // Clean up previous trigger's event listener if it exists\n if (this.triggerEl != null) {\n this.triggerEl.removeEventListener('click', this.handleTriggerClick);\n }\n\n if (assignedElements.length > 0) {\n // Use the first assigned element as the trigger\n this.triggerEl = assignedElements[0] as HTMLElement;\n\n // Set ARIA attributes to establish relationship between trigger and popover\n // This mirrors the native Popover API's accessibility behavior\n if (this.portalEl) {\n this.triggerEl.setAttribute('aria-expanded', String(this.active));\n this.triggerEl.setAttribute('aria-controls', this.portalEl.id);\n }\n\n // Attach click listener to handle popover visibility\n this.triggerEl.addEventListener('click', this.handleTriggerClick);\n } else {\n this.triggerEl = null;\n }\n };\n\n /**\n * Handles changes to the default slot (popover content)\n * When the popover is active, re-sync content with portal to handle dynamic updates\n */\n private handleContentSlotChange = () => {\n if (!this.active) return;\n this.updatePortalContent();\n };\n\n /**\n * Handles clicks on the trigger element\n */\n private handleTriggerClick = (event: Event) => {\n // Only prevent default if the trigger is not an anchor with href\n // This allows link navigation while still controlling popover visibility\n const composedPath = event.composedPath();\n const anchorWithHref = composedPath.find(\n (el) => el instanceof HTMLAnchorElement && (el as HTMLAnchorElement).href\n );\n\n if (!anchorWithHref) {\n event.preventDefault();\n }\n\n // Execute the appropriate action based on popoverTargetAction prop\n switch (this.popoverTargetAction) {\n case 'show':\n this.show();\n break;\n case 'hide':\n this.hide();\n break;\n case 'toggle':\n default:\n this.toggle();\n break;\n }\n };\n\n disconnectedCallback() {\n this.isComponentMounted = false;\n\n // Clean up trigger click event listener\n if (this.triggerEl != null) {\n this.triggerEl.removeEventListener('click', this.handleTriggerClick);\n }\n\n // Clean up all event listeners\n this.removeLightDismissListeners();\n this.removeScrollAndResizeListeners();\n\n // Clear any pending debounce timers\n this.clearDebounceTimers();\n\n // Remove portal from DOM\n this.removePortal();\n }\n\n /**\n * Clears any pending debounce timers\n */\n private clearDebounceTimers() {\n if (this.scrollDebounceTimer !== null) {\n clearTimeout(this.scrollDebounceTimer);\n this.scrollDebounceTimer = null;\n }\n if (this.resizeDebounceTimer !== null) {\n clearTimeout(this.resizeDebounceTimer);\n this.resizeDebounceTimer = null;\n }\n }\n\n private createPortal() {\n if (this.portalEl !== null) return;\n\n this.portalEl = document.createElement('div');\n this.portalEl.className = 'pds-popover';\n\n // Apply all styles inline since portal is outside shadow DOM\n this.portalEl.style.position = 'fixed';\n this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';\n this.portalEl.style.maxWidth = `${this.maxWidth}px`;\n this.portalEl.style.display = 'none';\n this.portalEl.style.opacity = '0';\n this.portalEl.style.visibility = 'hidden';\n this.portalEl.style.backgroundColor = 'var(--pine-color-background-container)';\n this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';\n this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';\n this.portalEl.style.margin = 'var(--pine-dimension-none)';\n this.portalEl.style.padding = 'var(--pine-dimension-md)';\n\n // Generate unique ID\n if (!this.componentId) {\n const suffix = PdsPopover.instanceCounter++;\n this.portalEl.id = `pds-popover-portal-${suffix}`;\n } else {\n this.portalEl.id = `${this.componentId}-portal`;\n }\n\n // Add accessibility attributes for screen readers\n // Note: Native Popover API doesn't add a specific role, keeping semantic HTML\n this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page\n\n // Append to body\n document.body.appendChild(this.portalEl);\n\n // Add global focus styles to match Pine design system\n // This is done after appending to ensure it's part of the document and can access CSS variables\n this.addPortalFocusStyles();\n }\n\n /**\n * Adds Pine design system focus styles and dark mode border to the portal element\n * Uses CSS variables from Pine's design tokens\n */\n private addPortalFocusStyles() {\n if (!this.portalEl) return;\n\n const portalId = this.portalEl.id;\n\n // Check if style element already exists\n const existingStyle = document.querySelector(`style[data-pds-popover-focus=\"${portalId}\"]`);\n if (existingStyle) return;\n\n // Create style element with Pine's focus ring styles and dark mode border\n const styleEl = document.createElement('style');\n styleEl.setAttribute('data-pds-popover-focus', portalId);\n styleEl.textContent = `\n #${portalId}:focus {\n outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;\n outline-offset: var(--pine-border-width, 1px);\n }\n #${portalId}:focus:not(:focus-visible) {\n outline: none;\n }\n [data-theme=\"dark\"] #${portalId} {\n border: var(--pine-border);\n }\n `;\n\n document.head.appendChild(styleEl);\n }\n\n /**\n * Moves slot content into portal (preserves event handlers and component instances)\n */\n private updatePortalContent() {\n if (!this.portalEl) return;\n\n const contentSlotWrapper = this.el.shadowRoot?.querySelector('.pds-popover__content-slot-wrapper');\n const defaultSlot = contentSlotWrapper?.querySelector('slot');\n\n if (defaultSlot) {\n const assignedNodes = defaultSlot.assignedNodes();\n\n // Move each node into portal and track with placeholder for restoration\n assignedNodes.forEach(node => {\n // Skip if node is already in the portal or already tracked\n const isAlreadyInPortal = node.parentNode === this.portalEl;\n const isAlreadyTracked = this.movedNodes.some(moved => moved.node === node);\n\n if (isAlreadyInPortal || isAlreadyTracked) {\n return;\n }\n\n // Create a placeholder comment to mark original position\n const placeholder = document.createComment('pds-popover-placeholder');\n\n // Insert placeholder before moving the node\n node.parentNode?.insertBefore(placeholder, node);\n\n // Move the actual node to portal (preserves all handlers and state)\n this.portalEl!.appendChild(node);\n\n // Track for restoration\n this.movedNodes.push({ node, placeholder });\n });\n }\n }\n\n /**\n * Restores moved nodes back to their original positions\n */\n private restorePortalContent() {\n // Restore each moved node to its original position\n this.movedNodes.forEach(({ node, placeholder }) => {\n if (placeholder.parentNode) {\n placeholder.parentNode.insertBefore(node, placeholder);\n placeholder.parentNode.removeChild(placeholder);\n }\n });\n\n // Clear tracking array\n this.movedNodes = [];\n }\n\n private removePortal() {\n if (this.portalEl) {\n // Remove the portal element from DOM\n if (this.portalEl.parentNode) {\n this.portalEl.parentNode.removeChild(this.portalEl);\n }\n\n // Remove the associated focus style element\n const portalId = this.portalEl.id;\n const styleEl = document.querySelector(`style[data-pds-popover-focus=\"${portalId}\"]`);\n if (styleEl && styleEl.parentNode) {\n styleEl.parentNode.removeChild(styleEl);\n }\n }\n this.portalEl = null;\n }\n\n /**\n * Opens the popover programmatically\n */\n @Method()\n async show() {\n if (this.active || !this.portalEl) return;\n\n this.active = true;\n\n // Record open timestamp to prevent immediate close from opening click\n this.openTimestamp = Date.now();\n\n // Update ARIA expanded state on trigger\n if (this.triggerEl) {\n this.triggerEl.setAttribute('aria-expanded', 'true');\n }\n\n // Update portal content with latest slot content\n this.updatePortalContent();\n\n // Show portal\n this.portalEl.style.display = 'block';\n this.portalEl.style.opacity = '1';\n this.portalEl.style.visibility = 'visible';\n\n // Position the popover\n requestAnimationFrame(() => {\n if (!this.isComponentMounted) return;\n this.handlePopoverPositioning();\n });\n\n // Add scroll and resize listeners for repositioning (always)\n this.addScrollAndResizeListeners();\n\n // Add document listeners for light dismiss and escape key (auto type only)\n if (this.popoverType === 'auto') {\n this.addLightDismissListeners();\n }\n\n // Emit open event\n this.pdsPopoverOpen.emit({\n componentId: this.componentId,\n popoverType: this.popoverType,\n });\n }\n\n /**\n * Closes the popover programmatically\n */\n @Method()\n async hide() {\n if (!this.active || !this.portalEl) return;\n\n this.active = false;\n\n // Update ARIA expanded state on trigger\n if (this.triggerEl) {\n this.triggerEl.setAttribute('aria-expanded', 'false');\n }\n\n // Restore content back to original slot positions\n this.restorePortalContent();\n\n // Hide portal\n this.portalEl.style.display = 'none';\n this.portalEl.style.opacity = '0';\n this.portalEl.style.visibility = 'hidden';\n\n // Return focus to trigger for keyboard accessibility\n // This mirrors native Popover API behavior on close\n this.returnFocusToTrigger();\n\n // Remove all listeners\n this.removeLightDismissListeners();\n this.removeScrollAndResizeListeners();\n\n // Clear any pending timers\n this.clearDebounceTimers();\n\n // Emit close event\n this.pdsPopoverClose.emit({\n componentId: this.componentId,\n popoverType: this.popoverType,\n });\n }\n\n /**\n * Toggles the popover open/closed state programmatically\n */\n @Method()\n async toggle() {\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n /**\n * Adds light dismiss listeners (click outside and escape key)\n */\n private addLightDismissListeners() {\n // Add listeners immediately - handleClickOutside will check timestamp\n document.addEventListener('click', this.boundClickOutsideHandler, true);\n document.addEventListener('keydown', this.boundEscapeKeyHandler);\n }\n\n /**\n * Removes light dismiss listeners\n */\n private removeLightDismissListeners() {\n document.removeEventListener('click', this.boundClickOutsideHandler, true);\n document.removeEventListener('keydown', this.boundEscapeKeyHandler);\n }\n\n /**\n * Adds scroll and resize listeners for repositioning\n */\n private addScrollAndResizeListeners() {\n window.addEventListener('scroll', this.boundScrollHandler, true);\n window.addEventListener('resize', this.boundResizeHandler);\n }\n\n /**\n * Removes scroll and resize listeners\n */\n private removeScrollAndResizeListeners() {\n window.removeEventListener('scroll', this.boundScrollHandler, true);\n window.removeEventListener('resize', this.boundResizeHandler);\n }\n\n /**\n * Handles clicks outside the popover for light dismiss (auto type only)\n */\n private handleClickOutside(event: MouseEvent) {\n // Ignore events that occurred at or before the popover opened\n // This prevents the opening click from immediately closing the popover\n // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time\n // by calculating: currentEpochTime - (currentPerfTime - eventPerfTime)\n const eventTime = event.timeStamp\n ? Date.now() - (performance.now() - event.timeStamp)\n : Date.now();\n\n if (eventTime <= this.openTimestamp) {\n return;\n }\n\n const target = event.target as Node;\n\n // Check if click is outside both the popover portal and the trigger\n const clickedInsidePopover = this.portalEl?.contains(target);\n const clickedInsideTrigger = this.triggerEl?.contains(target);\n\n if (!clickedInsidePopover && !clickedInsideTrigger) {\n this.hide();\n }\n }\n\n /**\n * Returns focus to the trigger element with visible focus indicator\n * This ensures focus rings/outlines are shown as they would be with keyboard navigation\n */\n private returnFocusToTrigger() {\n if (!this.triggerEl) return;\n\n // Focus immediately while still in keyboard event context\n // This ensures the browser treats it as keyboard-initiated and shows focus ring\n this.triggerEl.focus({ preventScroll: true });\n }\n\n /**\n * Handles escape key press to close the popover\n * Mirrors native Popover API: Escape closes and returns focus to trigger\n */\n private handleEscapeKey(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n // Prevent default Escape behavior and stop propagation\n // This mirrors native Popover API which handles Escape exclusively\n event.preventDefault();\n event.stopPropagation();\n\n // Close popover and return focus to trigger\n this.hide();\n }\n }\n\n /**\n * Handles scroll events to reposition the popover (debounced for performance)\n */\n private handleScroll() {\n if (!this.active) return;\n\n if (this.scrollDebounceTimer !== null) {\n clearTimeout(this.scrollDebounceTimer);\n }\n\n this.scrollDebounceTimer = setTimeout(() => {\n this.handlePopoverPositioning();\n this.scrollDebounceTimer = null;\n }, 10); // 10ms debounce for smooth repositioning\n }\n\n /**\n * Handles resize events to reposition the popover (debounced for performance)\n */\n private handleResize() {\n if (!this.active) return;\n\n if (this.resizeDebounceTimer !== null) {\n clearTimeout(this.resizeDebounceTimer);\n }\n\n this.resizeDebounceTimer = setTimeout(() => {\n this.handlePopoverPositioning();\n this.resizeDebounceTimer = null;\n }, 100); // 100ms debounce for resize\n }\n\n /**\n * Positions the popover relative to its trigger element\n */\n private handlePopoverPositioning() {\n // Prevent repositioning loops\n if (this.isRepositioning) {\n return;\n }\n\n this.isRepositioning = true;\n\n if (this.triggerEl == null || this.portalEl == null) {\n this.isRepositioning = false;\n return;\n }\n\n const triggerRect = this.triggerEl.getBoundingClientRect();\n const popoverRect = this.portalEl.getBoundingClientRect();\n\n // Safety check: ensure trigger has valid dimensions (is rendered and visible)\n if (triggerRect.width === 0 || triggerRect.height === 0) {\n this.isRepositioning = false;\n return;\n }\n\n let top = 0;\n let left = 0;\n const offset = 8;\n\n switch (this.placement) {\n case 'top':\n top = triggerRect.top - popoverRect.height - offset;\n left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n break;\n case 'top-start':\n top = triggerRect.top - popoverRect.height - offset;\n left = triggerRect.left;\n break;\n case 'top-end':\n top = triggerRect.top - popoverRect.height - offset;\n left = triggerRect.right - popoverRect.width;\n break;\n case 'right':\n top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n left = triggerRect.right + offset;\n break;\n case 'right-start':\n top = triggerRect.top;\n left = triggerRect.right + offset;\n break;\n case 'right-end':\n top = triggerRect.bottom - popoverRect.height;\n left = triggerRect.right + offset;\n break;\n case 'bottom':\n top = triggerRect.bottom + offset;\n left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n break;\n case 'bottom-start':\n top = triggerRect.bottom + offset;\n left = triggerRect.left;\n break;\n case 'bottom-end':\n top = triggerRect.bottom + offset;\n left = triggerRect.right - popoverRect.width;\n break;\n case 'left':\n top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n left = triggerRect.left - popoverRect.width - offset;\n break;\n case 'left-start':\n top = triggerRect.top;\n left = triggerRect.left - popoverRect.width - offset;\n break;\n case 'left-end':\n top = triggerRect.bottom - popoverRect.height;\n left = triggerRect.left - popoverRect.width - offset;\n break;\n }\n\n this.portalEl.style.top = `${top}px`;\n this.portalEl.style.left = `${left}px`;\n\n // Reset the repositioning guard after a short delay\n setTimeout(() => {\n this.isRepositioning = false;\n }, 16); // ~1 frame at 60fps\n }\n\n render() {\n return (\n <Host id={this.componentId}>\n <span class=\"pds-popover__trigger-wrapper\">\n <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange}></slot>\n </span>\n\n <div class=\"pds-popover__content-slot-wrapper\">\n <slot onSlotchange={this.handleContentSlotChange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"p-j0609tLE.system.js","sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n --sizing-max-width-default: 352px;\n\n display: inline-block;\n\n // Trigger wrapper for slotted content\n .pds-popover__trigger-wrapper {\n display: inline-block;\n }\n\n // Content slot wrapper is hidden (content is rendered in portal)\n .pds-popover__content-slot-wrapper {\n display: none;\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\nimport { PdsPopoverEventDetail } from './popover-interface';\n\n/**\n * @slot trigger - The trigger element for the popover\n * @slot (default) - The content to display inside the popover\n */\n@Component({\n tag: 'pds-popover',\n styleUrl: 'pds-popover.scss',\n shadow: true,\n})\nexport class PdsPopover {\n /**\n * Reference to the Host element\n */\n @Element() el: HTMLPdsPopoverElement;\n\n /**\n * Determines when the popover is active\n * @defaultValue false\n */\n @State() active = false;\n\n /**\n * Tracks if the component is still mounted to prevent memory leaks\n */\n private isComponentMounted = true;\n\n /**\n * Reference to the trigger element\n */\n private triggerEl: HTMLElement | null = null;\n\n /**\n * Portal element rendered in document.body\n */\n private portalEl: HTMLElement | null = null;\n\n /**\n * Guard to prevent repositioning loops\n */\n private isRepositioning = false;\n\n /**\n * Debounce timers for performance optimization\n */\n private scrollDebounceTimer: ReturnType<typeof setTimeout> | null = null;\n private resizeDebounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n /**\n * Track moved nodes and their placeholders for restoration\n */\n private movedNodes: Array<{ node: Node; placeholder: Comment }> = [];\n\n /**\n * Timestamp when popover was opened (for preventing immediate close)\n */\n private openTimestamp = 0;\n\n /**\n * Instance counter for unique IDs\n */\n private static instanceCounter = 0;\n\n /**\n * Bound handlers for cleanup\n */\n private boundClickOutsideHandler: (event: MouseEvent) => void;\n private boundEscapeKeyHandler: (event: KeyboardEvent) => void;\n private boundScrollHandler: () => void;\n private boundResizeHandler: () => void;\n\n /**\n * Emitted when the popover is opened\n */\n @Event() pdsPopoverOpen: EventEmitter<PdsPopoverEventDetail>;\n\n /**\n * Emitted when the popover is closed\n */\n @Event() pdsPopoverClose: EventEmitter<PdsPopoverEventDetail>;\n\n /**\n * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n * @defaultValue \"show\"\n */\n @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n /**\n * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n * Manual popovers require the consumer to handle the visibility of the popover.\n */\n @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Sets the maximum width of the popover content\n * @defaultValue 352\n */\n @Prop() maxWidth?: number = 352;\n\n /**\n * Determines the preferred position of the popover\n * @defaultValue \"right\"\n */\n @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n componentDidLoad() {\n // Bind event handlers for cleanup\n this.boundClickOutsideHandler = this.handleClickOutside.bind(this);\n this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);\n this.boundScrollHandler = this.handleScroll.bind(this);\n this.boundResizeHandler = this.handleResize.bind(this);\n\n // Create portal element\n this.createPortal();\n\n // Initialize trigger element by calling slot change handler\n // This is a fallback for environments where slot change might not fire reliably\n const triggerSlot = this.el.shadowRoot?.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n if (triggerSlot && this.triggerEl == null) {\n const CustomEvent = (typeof window !== 'undefined' ? window.Event : global.Event) as any;\n const slotChangeEvent = new CustomEvent('slotchange');\n Object.defineProperty(slotChangeEvent, 'target', { value: triggerSlot, enumerable: true });\n this.handleTriggerSlotChange(slotChangeEvent);\n }\n }\n\n /**\n * Handles changes to the trigger slot\n */\n private handleTriggerSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n const assignedElements = slot.assignedElements();\n\n // Clean up previous trigger's event listener if it exists\n if (this.triggerEl != null) {\n this.triggerEl.removeEventListener('click', this.handleTriggerClick);\n }\n\n if (assignedElements.length > 0) {\n // Use the first assigned element as the trigger\n this.triggerEl = assignedElements[0] as HTMLElement;\n\n // Set ARIA attributes to establish relationship between trigger and popover\n // This mirrors the native Popover API's accessibility behavior\n if (this.portalEl) {\n this.triggerEl.setAttribute('aria-expanded', String(this.active));\n this.triggerEl.setAttribute('aria-controls', this.portalEl.id);\n }\n\n // Attach click listener to handle popover visibility\n this.triggerEl.addEventListener('click', this.handleTriggerClick);\n } else {\n this.triggerEl = null;\n }\n };\n\n /**\n * Handles changes to the default slot (popover content)\n * When the popover is active, re-sync content with portal to handle dynamic updates\n */\n private handleContentSlotChange = () => {\n if (!this.active) return;\n this.updatePortalContent();\n };\n\n /**\n * Handles clicks on the trigger element\n */\n private handleTriggerClick = (event: Event) => {\n // Only prevent default if the trigger is not an anchor with href\n // This allows link navigation while still controlling popover visibility\n const composedPath = event.composedPath();\n const anchorWithHref = composedPath.find(\n (el) => el instanceof HTMLAnchorElement && (el as HTMLAnchorElement).href\n );\n\n if (!anchorWithHref) {\n event.preventDefault();\n }\n\n // Execute the appropriate action based on popoverTargetAction prop\n switch (this.popoverTargetAction) {\n case 'show':\n this.show();\n break;\n case 'hide':\n this.hide();\n break;\n case 'toggle':\n default:\n this.toggle();\n break;\n }\n };\n\n disconnectedCallback() {\n this.isComponentMounted = false;\n\n // Clean up trigger click event listener\n if (this.triggerEl != null) {\n this.triggerEl.removeEventListener('click', this.handleTriggerClick);\n }\n\n // Clean up all event listeners\n this.removeLightDismissListeners();\n this.removeScrollAndResizeListeners();\n\n // Clear any pending debounce timers\n this.clearDebounceTimers();\n\n // Remove portal from DOM\n this.removePortal();\n }\n\n /**\n * Clears any pending debounce timers\n */\n private clearDebounceTimers() {\n if (this.scrollDebounceTimer !== null) {\n clearTimeout(this.scrollDebounceTimer);\n this.scrollDebounceTimer = null;\n }\n if (this.resizeDebounceTimer !== null) {\n clearTimeout(this.resizeDebounceTimer);\n this.resizeDebounceTimer = null;\n }\n }\n\n private createPortal() {\n if (this.portalEl !== null) return;\n\n this.portalEl = document.createElement('div');\n this.portalEl.className = 'pds-popover';\n\n // Apply all styles inline since portal is outside shadow DOM\n this.portalEl.style.position = 'fixed';\n this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';\n this.portalEl.style.maxWidth = `${this.maxWidth}px`;\n this.portalEl.style.display = 'none';\n this.portalEl.style.opacity = '0';\n this.portalEl.style.visibility = 'hidden';\n this.portalEl.style.backgroundColor = 'var(--pine-color-background-container)';\n this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';\n this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';\n this.portalEl.style.margin = 'var(--pine-dimension-none)';\n this.portalEl.style.padding = 'var(--pine-dimension-md)';\n\n // Generate unique ID\n if (!this.componentId) {\n const suffix = PdsPopover.instanceCounter++;\n this.portalEl.id = `pds-popover-portal-${suffix}`;\n } else {\n this.portalEl.id = `${this.componentId}-portal`;\n }\n\n // Add accessibility attributes for screen readers\n // Note: Native Popover API doesn't add a specific role, keeping semantic HTML\n this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page\n\n // Append to body\n document.body.appendChild(this.portalEl);\n\n // Add global focus styles to match Pine design system\n // This is done after appending to ensure it's part of the document and can access CSS variables\n this.addPortalFocusStyles();\n }\n\n /**\n * Adds Pine design system focus styles and dark mode border to the portal element\n * Uses CSS variables from Pine's design tokens\n */\n private addPortalFocusStyles() {\n if (!this.portalEl) return;\n\n const portalId = this.portalEl.id;\n\n // Check if style element already exists\n const existingStyle = document.querySelector(`style[data-pds-popover-focus=\"${portalId}\"]`);\n if (existingStyle) return;\n\n // Create style element with Pine's focus ring styles and dark mode border\n const styleEl = document.createElement('style');\n styleEl.setAttribute('data-pds-popover-focus', portalId);\n styleEl.textContent = `\n #${portalId}:focus {\n outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;\n outline-offset: var(--pine-border-width, 1px);\n }\n #${portalId}:focus:not(:focus-visible) {\n outline: none;\n }\n [data-theme=\"dark\"] #${portalId} {\n border: var(--pine-border);\n }\n `;\n\n document.head.appendChild(styleEl);\n }\n\n /**\n * Moves slot content into portal (preserves event handlers and component instances)\n */\n private updatePortalContent() {\n if (!this.portalEl) return;\n\n const contentSlotWrapper = this.el.shadowRoot?.querySelector('.pds-popover__content-slot-wrapper');\n const defaultSlot = contentSlotWrapper?.querySelector('slot');\n\n if (defaultSlot) {\n const assignedNodes = defaultSlot.assignedNodes();\n\n // Move each node into portal and track with placeholder for restoration\n assignedNodes.forEach(node => {\n // Skip if node is already in the portal or already tracked\n const isAlreadyInPortal = node.parentNode === this.portalEl;\n const isAlreadyTracked = this.movedNodes.some(moved => moved.node === node);\n\n if (isAlreadyInPortal || isAlreadyTracked) {\n return;\n }\n\n // Create a placeholder comment to mark original position\n const placeholder = document.createComment('pds-popover-placeholder');\n\n // Insert placeholder before moving the node\n node.parentNode?.insertBefore(placeholder, node);\n\n // Move the actual node to portal (preserves all handlers and state)\n this.portalEl!.appendChild(node);\n\n // Track for restoration\n this.movedNodes.push({ node, placeholder });\n });\n }\n }\n\n /**\n * Restores moved nodes back to their original positions\n */\n private restorePortalContent() {\n // Restore each moved node to its original position\n this.movedNodes.forEach(({ node, placeholder }) => {\n if (placeholder.parentNode) {\n placeholder.parentNode.insertBefore(node, placeholder);\n placeholder.parentNode.removeChild(placeholder);\n }\n });\n\n // Clear tracking array\n this.movedNodes = [];\n }\n\n private removePortal() {\n if (this.portalEl) {\n // Remove the portal element from DOM\n if (this.portalEl.parentNode) {\n this.portalEl.parentNode.removeChild(this.portalEl);\n }\n\n // Remove the associated focus style element\n const portalId = this.portalEl.id;\n const styleEl = document.querySelector(`style[data-pds-popover-focus=\"${portalId}\"]`);\n if (styleEl && styleEl.parentNode) {\n styleEl.parentNode.removeChild(styleEl);\n }\n }\n this.portalEl = null;\n }\n\n /**\n * Opens the popover programmatically\n */\n @Method()\n async show() {\n if (this.active || !this.portalEl) return;\n\n this.active = true;\n\n // Record open timestamp to prevent immediate close from opening click\n this.openTimestamp = Date.now();\n\n // Update ARIA expanded state on trigger\n if (this.triggerEl) {\n this.triggerEl.setAttribute('aria-expanded', 'true');\n }\n\n // Update portal content with latest slot content\n this.updatePortalContent();\n\n // Show portal\n this.portalEl.style.display = 'block';\n this.portalEl.style.opacity = '1';\n this.portalEl.style.visibility = 'visible';\n\n // Position the popover\n requestAnimationFrame(() => {\n if (!this.isComponentMounted) return;\n this.handlePopoverPositioning();\n });\n\n // Add scroll and resize listeners for repositioning (always)\n this.addScrollAndResizeListeners();\n\n // Add document listeners for light dismiss and escape key (auto type only)\n if (this.popoverType === 'auto') {\n this.addLightDismissListeners();\n }\n\n // Emit open event\n this.pdsPopoverOpen.emit({\n componentId: this.componentId,\n popoverType: this.popoverType,\n });\n }\n\n /**\n * Closes the popover programmatically\n */\n @Method()\n async hide() {\n if (!this.active || !this.portalEl) return;\n\n this.active = false;\n\n // Update ARIA expanded state on trigger\n if (this.triggerEl) {\n this.triggerEl.setAttribute('aria-expanded', 'false');\n }\n\n // Restore content back to original slot positions\n this.restorePortalContent();\n\n // Hide portal\n this.portalEl.style.display = 'none';\n this.portalEl.style.opacity = '0';\n this.portalEl.style.visibility = 'hidden';\n\n // Return focus to trigger for keyboard accessibility\n // This mirrors native Popover API behavior on close\n this.returnFocusToTrigger();\n\n // Remove all listeners\n this.removeLightDismissListeners();\n this.removeScrollAndResizeListeners();\n\n // Clear any pending timers\n this.clearDebounceTimers();\n\n // Emit close event\n this.pdsPopoverClose.emit({\n componentId: this.componentId,\n popoverType: this.popoverType,\n });\n }\n\n /**\n * Toggles the popover open/closed state programmatically\n */\n @Method()\n async toggle() {\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n /**\n * Adds light dismiss listeners (click outside and escape key)\n */\n private addLightDismissListeners() {\n // Add listeners immediately - handleClickOutside will check timestamp\n document.addEventListener('click', this.boundClickOutsideHandler, true);\n document.addEventListener('keydown', this.boundEscapeKeyHandler);\n }\n\n /**\n * Removes light dismiss listeners\n */\n private removeLightDismissListeners() {\n document.removeEventListener('click', this.boundClickOutsideHandler, true);\n document.removeEventListener('keydown', this.boundEscapeKeyHandler);\n }\n\n /**\n * Adds scroll and resize listeners for repositioning\n */\n private addScrollAndResizeListeners() {\n window.addEventListener('scroll', this.boundScrollHandler, true);\n window.addEventListener('resize', this.boundResizeHandler);\n }\n\n /**\n * Removes scroll and resize listeners\n */\n private removeScrollAndResizeListeners() {\n window.removeEventListener('scroll', this.boundScrollHandler, true);\n window.removeEventListener('resize', this.boundResizeHandler);\n }\n\n /**\n * Handles clicks outside the popover for light dismiss (auto type only)\n */\n private handleClickOutside(event: MouseEvent) {\n // Ignore events that occurred at or before the popover opened\n // This prevents the opening click from immediately closing the popover\n // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time\n // by calculating: currentEpochTime - (currentPerfTime - eventPerfTime)\n const eventTime = event.timeStamp\n ? Date.now() - (performance.now() - event.timeStamp)\n : Date.now();\n\n if (eventTime <= this.openTimestamp) {\n return;\n }\n\n const target = event.target as Node;\n\n // Check if click is outside both the popover portal and the trigger\n const clickedInsidePopover = this.portalEl?.contains(target);\n const clickedInsideTrigger = this.triggerEl?.contains(target);\n\n if (!clickedInsidePopover && !clickedInsideTrigger) {\n this.hide();\n }\n }\n\n /**\n * Returns focus to the trigger element with visible focus indicator\n * This ensures focus rings/outlines are shown as they would be with keyboard navigation\n */\n private returnFocusToTrigger() {\n if (!this.triggerEl) return;\n\n // Focus immediately while still in keyboard event context\n // This ensures the browser treats it as keyboard-initiated and shows focus ring\n this.triggerEl.focus({ preventScroll: true });\n }\n\n /**\n * Handles escape key press to close the popover\n * Mirrors native Popover API: Escape closes and returns focus to trigger\n */\n private handleEscapeKey(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n // Prevent default Escape behavior and stop propagation\n // This mirrors native Popover API which handles Escape exclusively\n event.preventDefault();\n event.stopPropagation();\n\n // Close popover and return focus to trigger\n this.hide();\n }\n }\n\n /**\n * Handles scroll events to reposition the popover (debounced for performance)\n */\n private handleScroll() {\n if (!this.active) return;\n\n if (this.scrollDebounceTimer !== null) {\n clearTimeout(this.scrollDebounceTimer);\n }\n\n this.scrollDebounceTimer = setTimeout(() => {\n this.handlePopoverPositioning();\n this.scrollDebounceTimer = null;\n }, 10); // 10ms debounce for smooth repositioning\n }\n\n /**\n * Handles resize events to reposition the popover (debounced for performance)\n */\n private handleResize() {\n if (!this.active) return;\n\n if (this.resizeDebounceTimer !== null) {\n clearTimeout(this.resizeDebounceTimer);\n }\n\n this.resizeDebounceTimer = setTimeout(() => {\n this.handlePopoverPositioning();\n this.resizeDebounceTimer = null;\n }, 100); // 100ms debounce for resize\n }\n\n /**\n * Positions the popover relative to its trigger element\n */\n private handlePopoverPositioning() {\n // Prevent repositioning loops\n if (this.isRepositioning) {\n return;\n }\n\n this.isRepositioning = true;\n\n if (this.triggerEl == null || this.portalEl == null) {\n this.isRepositioning = false;\n return;\n }\n\n const triggerRect = this.triggerEl.getBoundingClientRect();\n const popoverRect = this.portalEl.getBoundingClientRect();\n\n // Safety check: ensure trigger has valid dimensions (is rendered and visible)\n if (triggerRect.width === 0 || triggerRect.height === 0) {\n this.isRepositioning = false;\n return;\n }\n\n let top = 0;\n let left = 0;\n const offset = 8;\n\n switch (this.placement) {\n case 'top':\n top = triggerRect.top - popoverRect.height - offset;\n left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n break;\n case 'top-start':\n top = triggerRect.top - popoverRect.height - offset;\n left = triggerRect.left;\n break;\n case 'top-end':\n top = triggerRect.top - popoverRect.height - offset;\n left = triggerRect.right - popoverRect.width;\n break;\n case 'right':\n top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n left = triggerRect.right + offset;\n break;\n case 'right-start':\n top = triggerRect.top;\n left = triggerRect.right + offset;\n break;\n case 'right-end':\n top = triggerRect.bottom - popoverRect.height;\n left = triggerRect.right + offset;\n break;\n case 'bottom':\n top = triggerRect.bottom + offset;\n left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n break;\n case 'bottom-start':\n top = triggerRect.bottom + offset;\n left = triggerRect.left;\n break;\n case 'bottom-end':\n top = triggerRect.bottom + offset;\n left = triggerRect.right - popoverRect.width;\n break;\n case 'left':\n top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n left = triggerRect.left - popoverRect.width - offset;\n break;\n case 'left-start':\n top = triggerRect.top;\n left = triggerRect.left - popoverRect.width - offset;\n break;\n case 'left-end':\n top = triggerRect.bottom - popoverRect.height;\n left = triggerRect.left - popoverRect.width - offset;\n break;\n }\n\n this.portalEl.style.top = `${top}px`;\n this.portalEl.style.left = `${left}px`;\n\n // Reset the repositioning guard after a short delay\n setTimeout(() => {\n this.isRepositioning = false;\n }, 16); // ~1 frame at 60fps\n }\n\n render() {\n return (\n <Host id={this.componentId}>\n <span class=\"pds-popover__trigger-wrapper\">\n <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange}></slot>\n </span>\n\n <div class=\"pds-popover__content-slot-wrapper\">\n <slot onSlotchange={this.handleContentSlotChange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"p-DoP8Sl1O.system.js","sources":["src/components/pds-property/pds-property.scss?tag=pds-property&encapsulation=shadow","src/components/pds-property/pds-property.tsx"],"sourcesContent":[":host {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-medium);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot (default) - The property text content.\n */\n\n@Component({\n tag: 'pds-property',\n styleUrls: ['pds-property.scss'],\n shadow: true,\n})\nexport class PdsProperty {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * The name of the icon to display before the property text.\n */\n @Prop() icon: string = 'star';\n\n render() {\n return (\n <Host id={this.componentId}>\n <pds-box align-items=\"center\" gap=\"xs\">\n <pds-icon icon={this.icon} size=\"var(--pine-dimension-sm)\" aria-hidden=\"true\"></pds-icon>\n <slot />\n </pds-box>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,cAAc,GAAG,qFAAqF;;YCW/F,WAAW,2BAAA,MAAA;MALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;MAWE;;MAEG;MACK,QAAA,IAAI,CAAA,IAAA,GAAW,MAAM;MAY9B;UAVC,MAAM,GAAA;MACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAqB,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA,EACpC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,0BAA0B,EAAa,aAAA,EAAA,MAAM,EAAY,CAAA,EACzF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACA,CACL;;;;;;;;;;;"}
1
+ {"version":3,"file":"p-rcUX-rt5.system.js","sources":["src/components/pds-property/pds-property.scss?tag=pds-property&encapsulation=shadow","src/components/pds-property/pds-property.tsx"],"sourcesContent":[":host {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-medium);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot (default) - The property text content.\n */\n\n@Component({\n tag: 'pds-property',\n styleUrls: ['pds-property.scss'],\n shadow: true,\n})\nexport class PdsProperty {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * The name of the icon to display before the property text.\n */\n @Prop() icon: string = 'star';\n\n render() {\n return (\n <Host id={this.componentId}>\n <pds-box align-items=\"center\" gap=\"xs\">\n <pds-icon icon={this.icon} size=\"var(--pine-dimension-sm)\" aria-hidden=\"true\"></pds-icon>\n <slot />\n </pds-box>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,cAAc,GAAG,qFAAqF;;YCW/F,WAAW,2BAAA,MAAA;MALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;MAWE;;MAEG;MACK,QAAA,IAAI,CAAA,IAAA,GAAW,MAAM;MAY9B;UAVC,MAAM,GAAA;MACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAqB,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA,EACpC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,0BAA0B,EAAa,aAAA,EAAA,MAAM,EAAY,CAAA,EACzF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACA,CACL;;;;;;;;;;;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"p-uyztncxJ.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n display: inline-block;\n width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n textarea {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"])) {\n .pds-textarea__field:not(.is-invalid) {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-accent);\n color: var(--pine-color-text-accent);\n\n &:hover {\n border-color: var(--pine-color-accent-hover);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n\n ~ .pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);\n color: var(--pine-color-text-accent);\n }\n }\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n align-items: center;\n display: flex;\n justify-content: space-between;\n}\n\n.pds-textarea__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n display: block;\n margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n color: var(--pine-color-text-message-danger);\n display: flex;\n font: var(--pine-typography-body-sm-medium);\n gap: var(--pine-dimension-2xs);\n margin-block-start: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n.pds-textarea__field-wrapper {\n display: inline-block;\n position: relative;\n width: 100%;\n}\n\n.pds-textarea__field {\n background-color: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-sizing: border-box;\n color: var(--pine-color-text);\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n min-height: calc(var(--pine-dimension-xl) * 2);\n min-width: calc(var(--pine-dimension-xl) * 2);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n resize: both;\n width: 100%;\n\n // Add bottom padding when character counter is present\n :host([max-length]) & {\n padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n }\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--pine-border-hover);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &::placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &.is-invalid {\n background-color: var(--pine-input-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n color: var(--pine-color-text-muted);\n font: var(--pine-typography-body-sm-medium);\n padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n pointer-events: none;\n position: absolute;\n user-select: none;\n white-space: nowrap;\n z-index: var(--pine-z-index);\n\n // Match textarea disabled state\n :host([aria-disabled=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n }\n\n // Match textarea readonly state\n :host([aria-readonly=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n\n // Match textarea invalid state - target when field has is-invalid class\n .pds-textarea__field.is-invalid ~ & {\n background-color: var(--pine-input-color-background-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId, exposeTypeProperty } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n tag: 'pds-textarea',\n styleUrls: [\n '../../global/styles/utils/label.scss',\n '../pds-input/pds-input.tokens.scss',\n 'pds-textarea.scss'\n ],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsTextarea {\n\n private nativeTextarea?: HTMLTextAreaElement\n private focusedValue?: string | null;\n private inheritedAttributes: Attributes = {};\n private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n private internals?: ElementInternals;\n private resizeObserver?: ResizeObserver;\n private characterCounter?: HTMLElement;\n private readonly _type = 'textarea' as const;\n\n @Element() el: HTMLPdsTextareaElement;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when a keyboard input occurs.\n *\n * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n */\n @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n /**\n * Event emitted whenever the value of the textarea changes.\n *\n * This event will not emit when programmatically setting the `value` property.\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n /**\n * Emitted when a key is pressed down in the textarea.\n */\n @Event() pdsKeyDown!: EventEmitter<KeyboardEvent>;\n\n /**\n * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n * `textarea.focus()`.\n */\n @Method()\n async setFocus() {\n if (this.nativeTextarea) {\n this.nativeTextarea.focus();\n }\n }\n\n /**\n * Specifies if and how the browser provides `autocomplete` assistance for the field.\n */\n @Prop() autocomplete: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines whether or not the textarea is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n */\n @Prop() debounce?: number;\n\n /**\n * Displays an error message below the textarea field.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a message or hint below the textarea field.\n */\n @Prop() helperMessage?: string;\n\n /**\n * Determines whether or not the textarea is invalid or throws an error.\n * @defaultValue false\n */\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /**\n * Text to be displayed as the textarea label.\n */\n @Prop() label?: string;\n\n /**\n * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n */\n @Prop() name: string = this.componentId;\n\n /**\n * Specifies a short hint that describes the expected value of the textarea.\n */\n @Prop() placeholder?: string;\n\n /**\n * Determines whether or not the textarea is readonly.\n * @defaultValue false\n */\n @Prop() readonly = false;\n\n /**\n * Determines whether or not the textarea is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Sets number of rows of text visible without needing to scroll in the textarea.\n */\n @Prop() rows?: number;\n\n /**\n * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n */\n @Prop({ reflect: true }) maxLength?: number;\n\n /**\n * Applies highlight styling to the textarea field.\n */\n @Prop({ reflect: true }) highlight?: boolean;\n\n /**\n * The value of the textarea.\n */\n @Prop({mutable: true}) value?: string | null = '';\n\n @State() hasFocus = false;\n\n\n /**\n * If true, the textarea has action content in the label area\n */\n @State() hasAction = false;\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeTextarea = this.nativeTextarea;\n const value = this.getValue();\n\n if (nativeTextarea && nativeTextarea.value !== value) {\n nativeTextarea.value = value;\n }\n\n // Update form value for Form Associated Custom Elements API\n this.updateFormValue();\n\n // Update character counter position in case content changes affect sizing\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n this.updateCharacterCounterPosition();\n }\n }\n\n @Watch('maxLength')\n protected maxLengthChanged() {\n // Setup or teardown ResizeObserver based on maxLength\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.maxLength && this.nativeTextarea) {\n this.setupResizeObserver();\n }\n\n // Update ElementInternals validity when maxLength changes\n if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);\n this.internals.setValidity(\n { tooLong: isTooLong },\n isTooLong ? 'Value exceeds maxLength' : '',\n this.nativeTextarea\n );\n }\n }\n\n /**\n * Emits an `pdsInput` event.\n */\n private emitInputChange(event?: Event) {\n const { value } = this;\n this.pdsInput.emit({ value, event });\n }\n\n /**\n * Emits an `pdsTextareaChange` event.\n */\n private emitValueChange(event?: Event) {\n const textarea = event.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n const { value } = textarea;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n this.focusedValue = newValue;\n this.pdsTextareaChange.emit({ value: newValue, event });\n }\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLTextAreaElement | null;\n if (input) {\n // Handle maxLength validation\n if (this.maxLength && input.value.length > this.maxLength) {\n // Prevent input beyond maxLength\n input.value = input.value.substring(0, this.maxLength);\n }\n this.value = input.value || '';\n }\n this.emitInputChange(ev);\n\n // Update counter position when content changes\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n // Use requestAnimationFrame to ensure DOM is updated\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n };\n\n private onTextareaChange = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onKeyDown = (ev: KeyboardEvent) => {\n this.pdsKeyDown.emit(ev);\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n this.debounceChanged();\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n disconnectedCallback() {\n // Clean up ResizeObserver\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el),\n };\n this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n }\n\n componentDidLoad() {\n this.originalPdsInput = this.pdsInput;\n // Set initial form value\n this.updateFormValue();\n\n // Setup ResizeObserver for character counter positioning\n this.setupResizeObserver();\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n /**\n * Sets up ResizeObserver to track textarea resize for character counter positioning\n */\n private setupResizeObserver() {\n if (!this.maxLength || !this.nativeTextarea) return;\n\n // ResizeObserver may not be available in test environments\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => {\n // Use requestAnimationFrame to ensure DOM updates are complete\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n });\n\n this.resizeObserver.observe(this.nativeTextarea);\n\n // Initial positioning with a small delay to ensure counter is rendered\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n }\n\n /**\n * Updates character counter position to stay within textarea boundaries during resize\n */\n private updateCharacterCounterPosition() {\n if (!this.characterCounter || !this.nativeTextarea) return;\n\n // Skip positioning in test environments where ResizeObserver isn't available\n if (typeof ResizeObserver === 'undefined') return;\n\n // Ensure the character counter has been rendered and has dimensions\n if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {\n // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n return;\n }\n\n // Position based on textarea's actual dimensions (which change during manual resize)\n const textareaWidth = this.nativeTextarea.offsetWidth;\n const textareaHeight = this.nativeTextarea.offsetHeight;\n const counterWidth = this.characterCounter.offsetWidth;\n const counterHeight = this.characterCounter.offsetHeight;\n\n // Calculate position within textarea boundaries with padding from edges\n const rightPosition = textareaWidth - counterWidth - 8;\n const bottomPosition = textareaHeight - counterHeight - 8;\n\n // Ensure counter stays within textarea boundaries even when resized very small\n const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n // Apply absolute positioning within the field wrapper\n this.characterCounter.style.position = 'absolute';\n this.characterCounter.style.left = `${finalLeft}px`;\n this.characterCounter.style.top = `${finalTop}px`;\n this.characterCounter.style.right = 'auto';\n this.characterCounter.style.bottom = 'auto';\n }\n\n /**\n * Renders the character counter when maxLength is set\n */\n private renderCharacterCounter() {\n if (!this.maxLength) {\n return null;\n }\n\n const currentLength = this.getValue().length;\n return (\n <div\n class=\"pds-textarea__character-counter\"\n ref={(el) => this.characterCounter = el}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${currentLength} of ${this.maxLength} characters`}\n >\n {currentLength} / {this.maxLength}\n </div>\n );\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-textarea__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /**\n * Updates the form value using ElementInternals API\n */\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.getValue();\n this.internals.setFormValue(value || null);\n\n // Set validity based on native textarea validation\n if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.nativeTextarea.validity,\n this.nativeTextarea.validationMessage,\n this.nativeTextarea\n );\n }\n }\n }\n\n\n /**\n * Form Associated Custom Elements API: Called when the form is reset\n */\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /**\n * Form Associated Custom Elements API: Called when the form is disabled\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /**\n * Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string | FormData | null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value from FormData using the textarea's name\n const value = state.get(this.name);\n if (typeof value === 'string') {\n this.value = value;\n }\n }\n }\n\n render() {\n const value = this.getValue();\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <div class=\"pds-textarea__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {!this.hideLabel && this.renderAction()}\n </div>\n }\n <div class=\"pds-textarea__field-wrapper\">\n <textarea\n ref={(el) => this.nativeTextarea = el }\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n maxlength={this.maxLength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onBlur={this.onBlur}\n onChange={this.onTextareaChange}\n onFocus={this.onFocus}\n onInput={this.onInput}\n onKeyDown={this.onKeyDown}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n {this.renderCharacterCounter()}\n </div>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"pds-avatar.entry.esm.js","sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\ndiv {\n // These custom props are not reachable\n --color-background-container: var(--pine-color-grey-050);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-dimension-150);\n border-radius: var(--border-radius-admin-round);\n }\n\n // Remove when FF has support for :has\n :host(.pds-avatar--has-image) & {\n background: transparent\n }\n\n @supports selector(:has) {\n &:has(img) {\n background-color: transparent\n }\n }\n}\n\n.pds-avatar__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-none);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n.pds-avatar__badge {\n background-color: transparent;\n border: var(--pine-dimension-none);\n border-color: transparent;\n border-radius: var(--pine-border-radius-round);\n inset-block-end: var(--pine-dimension-none);\n inset-inline-end: var(--pine-dimension-none);\n position: absolute;\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n tag: 'pds-avatar',\n styleUrls: ['pds-avatar.scss'],\n shadow: true,\n})\nexport class PdsAvatar {\n\n /**\n * The alt for a custom user image.\n * @defaultValue null\n */\n @Prop() alt?: string | null = null;\n\n /**\n * Determines whether the badge is visible or not.\n * @defaultValue false\n */\n @Prop() badge? = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether the avatar functions as a dropdown trigger.\n * @defaultValue false\n */\n @Prop() dropdown? = false;\n\n /**\n * The src for a custom user image.\n * @defaultValue null\n */\n @Prop() image?: string | null = null;\n\n /**\n * Size of the avatar. Value can be preset or custom.\n * @defaultValue lg\n */\n @Prop({ reflect: true }) size?:\n | 'xl' // 64px\n | 'lg' // 56px\n | 'md' // 40px\n | 'sm' // 32px\n | 'xs' // 24px\n | string = 'lg';\n\n /**\n * Determines the variant of avatar. Changes appearance accordingly.\n * @defaultValue customer\n */\n @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n private avatarSize() {\n const sizes: { [key: string]: any } = {\n xs: '24px',\n sm: '32px',\n md: '40px',\n lg: '56px',\n xl: '64px',\n }\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size\n }\n }\n\n private renderAssetWrapper = () => {\n const style = {\n height: this.avatarSize(),\n width: this.avatarSize()\n };\n\n return (\n <div style={style} part=\"asset-wrapper\">\n {this.renderIconOrImage()}\n {this.renderBadge()}\n </div>\n )\n };\n\n private renderAvatar = () => {\n return (\n this.dropdown\n ?\n <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n {this.renderAssetWrapper()}\n </button>\n :\n this.renderAssetWrapper()\n )\n };\n\n private renderBadge = () => (\n this.badge\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => (\n this.image\n ? <img alt={this.alt} src={this.image} />\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n : <pds-icon color=\"var(--pine-color-brand)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n );\n\n private classNames = () => (\n {\n 'pds-avatar': true,\n [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n }\n );\n\n render() {\n\n return (\n <Host\n id={this.componentId}\n class={{...this.classNames()}}\n >\n {this.renderAvatar()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"pds-avatar.entry.esm.js","sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\ndiv {\n // These custom props are not reachable\n --color-background-container: var(--pine-color-background-container-hover);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-dimension-150);\n border-radius: var(--border-radius-admin-round);\n }\n\n // Remove when FF has support for :has\n :host(.pds-avatar--has-image) & {\n background: transparent\n }\n\n @supports selector(:has) {\n &:has(img) {\n background-color: transparent\n }\n }\n}\n\n.pds-avatar__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-none);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n.pds-avatar__badge {\n background-color: transparent;\n border: var(--pine-dimension-none);\n border-color: transparent;\n border-radius: var(--pine-border-radius-round);\n inset-block-end: var(--pine-dimension-none);\n inset-inline-end: var(--pine-dimension-none);\n position: absolute;\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n\n.pds-avatar__initials {\n color: var(--pine-color-brand);\n fill: var(--pine-color-brand);\n font-size: var(--pine-font-size-085);\n font-weight: var(--pine-font-weight-semi-bold);\n height: 100%;\n text-align: center;\n width: 100%;\n\n text {\n text-anchor: middle;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n tag: 'pds-avatar',\n styleUrls: ['pds-avatar.scss'],\n shadow: true,\n})\nexport class PdsAvatar {\n\n /**\n * The alt for a custom user image.\n * @defaultValue null\n */\n @Prop() alt?: string | null = null;\n\n /**\n * Determines whether the badge is visible or not.\n * @defaultValue false\n */\n @Prop() badge? = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether the avatar functions as a dropdown trigger.\n * @defaultValue false\n */\n @Prop() dropdown? = false;\n\n /**\n * The src for a custom user image.\n * @defaultValue null\n */\n @Prop() image?: string | null = null;\n\n /**\n * The initials to display in the avatar when no image is provided.\n * @defaultValue null\n */\n @Prop() initials?: string | null = null;\n\n /**\n * Size of the avatar. Value can be preset or custom.\n * @defaultValue lg\n */\n @Prop({ reflect: true }) size?:\n | 'xl' // 64px\n | 'lg' // 56px\n | 'md' // 40px\n | 'sm' // 32px\n | 'xs' // 24px\n | string = 'lg';\n\n /**\n * Determines the variant of avatar. Changes appearance accordingly.\n * @defaultValue customer\n */\n @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n private avatarSize() {\n const sizes: { [key: string]: any } = {\n xs: '24px',\n sm: '32px',\n md: '40px',\n lg: '56px',\n xl: '64px',\n }\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size\n }\n }\n\n private renderAssetWrapper = () => {\n const style = {\n height: this.avatarSize(),\n width: this.avatarSize()\n };\n\n return (\n <div style={style} part=\"asset-wrapper\">\n {this.renderIconOrImage()}\n {this.renderBadge()}\n </div>\n )\n };\n\n private renderAvatar = () => {\n return (\n this.dropdown\n ?\n <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n {this.renderAssetWrapper()}\n </button>\n :\n this.renderAssetWrapper()\n )\n };\n\n private renderBadge = () => (\n this.badge\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => {\n if (this.image) {\n return <img alt={this.alt} src={this.image} />;\n }\n\n if (this.initials) {\n return (\n <svg class=\"pds-avatar__initials\" viewBox=\"0 0 32 32\">\n <text x=\"16\" y=\"20\">{this.initials}</text>\n </svg>\n );\n }\n\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n return <pds-icon color=\"var(--pine-color-brand)\" icon={userFilled} size=\"33.53%\"></pds-icon>;\n };\n\n private classNames = () => (\n {\n 'pds-avatar': true,\n [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,\n [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n }\n );\n\n render() {\n\n return (\n <Host\n id={this.componentId}\n class={{...this.classNames()}}\n >\n {this.renderAvatar()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"pds-button.entry.esm.js","sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --pds-button-background: var(--color-background-default);\n --pds-button-border: var(--pine-border);\n --pds-button-border-radius: var(--pine-border-radius-full);\n --pds-button-border-radius-start-end: var(--pine-border-radius-full);\n --pds-button-border-radius-start-start: var(--pine-border-radius-full);\n --pds-button-border-radius-end-end: var(--pine-border-radius-full);\n --pds-button-border-radius-end-start: var(--pine-border-radius-full);\n --pds-button-min-height: var(--pine-dimension-450);\n --pds-button-outline-offset: var(--pine-border-width);\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n a,\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--pds-button-background, var(--color-background-default));\n border: var(--pds-button-border);\n border-color: var(--color-border-default);\n border-radius: var(--pds-button-border-radius);\n /* stylelint-disable-next-line order/properties-alphabetical-order */\n border-end-end-radius: var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));\n border-end-start-radius: var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));\n border-start-end-radius: var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));\n border-start-start-radius: var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));\n box-sizing: border-box;\n color: var(--color-text-default);\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-button-min-height);\n padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n position: relative;\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--color-border-focus);\n box-shadow: var(--pds-button-box-shadow-focus, none);\n outline: var(--pds-button-outline-focus, var(--pine-outline-focus));\n outline-offset: var(--pds-button-outline-offset);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n --color-text-default: var(--pine-color-white);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n --color-text-default: var(--pine-color-white);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--tertiary {\n --color-background-default: transparent;\n --color-background-hover: var(--pine-color-background-muted);\n --color-background-disabled: transparent;\n --color-border-default: transparent;\n --color-border-hover: var(--pine-color-background-muted);\n --color-border-disabled: transparent;\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n}\n\n.pds-button--filter {\n --color-background-default: var(--pine-color-background-container);\n --color-background-hover: var(--pine-color-background-subtle);\n --color-background-disabled: var(--pine-color-white);\n --color-border-default: transparent;\n --color-border-hover: transparent;\n --color-border-focus: transparent;\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-hover: var(--pine-color-text-hover);\n --color-text-disabled: var(--pine-color-text-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n --pds-button-border-radius: var(--pine-dimension-125);\n --pds-button-border-radius-start-end: var(--pine-dimension-125);\n --pds-button-border-radius-start-start: var(--pine-dimension-125);\n --pds-button-border-radius-end-end: var(--pine-dimension-125);\n --pds-button-border-radius-end-start: var(--pine-dimension-125);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n &:disabled {\n background-color: var(--pine-color-background-container);\n }\n\n &:hover {\n color: var(--color-text-hover);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: var(--pine-color-text);\n --button-loader-color: var(--pine-color-text);\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n gap: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n.pds-button__icon {\n display: inline-flex;\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n white-space: nowrap;\n}\n\n.pds-button__icon--hidden,\n.pds-button__text--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--small {\n min-height: var(--pine-dimension-400);\n padding: calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n}\n\n.pds-button--micro {\n font-size: var(--pine-font-size-085);\n min-height: var(--pine-dimension-300);\n padding: var(--pine-dimension-025) var(--pine-dimension-xs);\n}\n\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__text--hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n &.pds-button--small {\n height: var(--pine-dimension-400);\n min-height: var(--pine-dimension-400);\n min-width: var(--pine-dimension-400);\n padding: var(--pine-dimension-2xs);\n width: var(--pine-dimension-400);\n }\n\n &.pds-button--micro {\n height: var(--pine-dimension-300);\n min-height: var(--pine-dimension-300);\n min-width: var(--pine-dimension-300);\n padding: var(--pine-dimension-3xs);\n width: var(--pine-dimension-300);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown, addCircle } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @part loader-svg - Exposes the loader SVG element for color customization. Appears only when loading.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines the button's disabled state.\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Determines if the button should take up the full width of its container.\n * @defaultValue false\n */\n @Prop() fullWidth? = false;\n\n /**\n * If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n */\n @Prop() href?: string;\n\n /**\n * Displays a leading icon in the button. DEPRECATED.\n * @defaultValue null\n * @deprecated Use `start` slot instead.\n */\n @Prop() icon?: string = null;\n\n /**\n * When true, displays only the icon and visually hides the text (keeping it accessible).\n */\n @Prop() iconOnly? = false;\n\n /**\n * Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n */\n @Prop() loading? = false;\n\n /**\n * Provides the button with a submittable name.\n */\n @Prop() name?: string;\n\n /**\n * Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n */\n @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n /**\n * Provides button with a type.\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Sets the size of the button.\n * @defaultValue default\n */\n @Prop() size?: 'default' | 'small' | 'micro' = 'default';\n\n /**\n * Sets the style variant of the button.\n * @defaultValue primary\n */\n @Prop() variant: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' | 'filter' = 'primary';\n\n @Event() pdsClick: EventEmitter<Event>;\n\n /**\n * Listen for Enter key presses on form inputs to trigger submit\n */\n @Listen('keydown', { target: 'body' })\n\n handleFormKeyDown(event: KeyboardEvent) {\n // Only handle Enter key for submit buttons that are not disabled\n if (event.key !== 'Enter' || this.type !== 'submit' || this.href || this.disabled) {\n return;\n }\n\n const target = event.target as Element;\n\n // Ensure event.target is an Element with matches method before proceeding\n if (!target || typeof target.matches !== 'function') {\n return;\n }\n const form = this.el.closest('form');\n\n // Check if the Enter key was pressed in a form input within the same form\n if (!form || !target || !form.contains(target)) {\n return;\n }\n\n // Check if target is a form input element (exclude reset buttons)\n const isFormInput = target.matches('input:not([type=\"submit\"]):not([type=\"button\"]):not([type=\"reset\"])') ||\n target.matches('pds-input') ||\n target.matches('pds-select') ||\n target.matches('pds-switch') ||\n target.matches('pds-checkbox') ||\n target.matches('pds-radio');\n\n if (isFormInput) {\n // Find all submit buttons in the form and check their actual properties\n const allSubmitButtons = Array.from(form.querySelectorAll('pds-button, button[type=\"submit\"], input[type=\"submit\"]'));\n const enabledSubmitButtons = allSubmitButtons.filter(button => {\n if (button.tagName.toLowerCase() === 'pds-button') {\n const pdsButton = button as HTMLPdsButtonElement;\n return pdsButton.type === 'submit' && !pdsButton.disabled;\n } else {\n return !button.hasAttribute('disabled');\n }\n });\n\n // Only synthesize click if this button is strictly the first enabled submit button\n if (enabledSubmitButtons.length > 0 && enabledSubmitButtons[0] === this.el) {\n event.preventDefault();\n this.el.click();\n }\n }\n }\n\n\n private handleClick = (ev: Event) => {\n if (this.loading) {\n ev.preventDefault();\n return;\n }\n\n // Prevent form submission for disabled buttons\n if (this.disabled) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && this.type != 'button') {\n // Handle form submission for Shadow DOM buttons\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n this.pdsClick.emit(ev);\n };\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n if (this.size && this.size !== 'default') {\n classNames.push('pds-button--' + this.size);\n }\n\n if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n private hasSlotContent(slotName: string): boolean {\n const elements = this.el.querySelectorAll(`[slot=\"${slotName}\"]`);\n return elements.length > 0;\n }\n\n private renderStartContent() {\n const hasIcon = this.icon && this.variant !== 'disclosure' && this.variant !== 'filter';\n const hasStartSlot = this.hasSlotContent('start');\n\n if (this.variant === 'filter') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={addCircle} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasIcon)) {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasStartSlot)) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n }\n\n return null;\n }\n\n private renderEndContent() {\n if (this.iconOnly) {\n return null;\n }\n\n if (this.variant === 'disclosure') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (this.hasSlotContent('end')) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n }\n\n return null;\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading || this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.renderStartContent()}\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\" exportparts=\"loader-svg\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.renderEndContent()}\n </div>\n );\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"pds-button.entry.esm.js","sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --pds-button-background: var(--color-background-default);\n --pds-button-border: var(--pine-border);\n --pds-button-border-radius: var(--pine-border-radius-full);\n --pds-button-border-radius-start-end: var(--pine-border-radius-full);\n --pds-button-border-radius-start-start: var(--pine-border-radius-full);\n --pds-button-border-radius-end-end: var(--pine-border-radius-full);\n --pds-button-border-radius-end-start: var(--pine-border-radius-full);\n --pds-button-min-height: var(--pine-dimension-450);\n --pds-button-outline-offset: var(--pine-border-width);\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n a,\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--pds-button-background, var(--color-background-default));\n border: var(--pds-button-border);\n border-color: var(--color-border-default);\n border-radius: var(--pds-button-border-radius);\n /* stylelint-disable-next-line order/properties-alphabetical-order */\n border-end-end-radius: var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));\n border-end-start-radius: var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));\n border-start-end-radius: var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));\n border-start-start-radius: var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));\n box-sizing: border-box;\n color: var(--color-text-default);\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-button-min-height);\n padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n position: relative;\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--color-border-focus);\n box-shadow: var(--pds-button-box-shadow-focus, none);\n outline: var(--pds-button-outline-focus, var(--pine-outline-focus));\n outline-offset: var(--pds-button-outline-offset);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n --color-text-default: var(--pine-color-white);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n --color-text-default: var(--pine-color-white);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--tertiary {\n --color-background-default: transparent;\n --color-background-hover: var(--pine-color-background-muted);\n --color-background-disabled: transparent;\n --color-border-default: transparent;\n --color-border-hover: var(--pine-color-background-muted);\n --color-border-disabled: transparent;\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n}\n\n.pds-button--filter {\n --color-background-default: var(--pine-color-background-container);\n --color-background-hover: var(--pine-color-background-subtle);\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n --color-background-disabled: var(--pine-color-white);\n --color-border-default: transparent;\n --color-border-hover: transparent;\n --color-border-focus: transparent;\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-hover: var(--pine-color-text-hover);\n --color-text-disabled: var(--pine-color-text-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n --pds-button-border-radius: var(--pine-dimension-125);\n --pds-button-border-radius-start-end: var(--pine-dimension-125);\n --pds-button-border-radius-start-start: var(--pine-dimension-125);\n --pds-button-border-radius-end-end: var(--pine-dimension-125);\n --pds-button-border-radius-end-start: var(--pine-dimension-125);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n &:disabled {\n background-color: var(--pine-color-background-container);\n }\n\n &:hover {\n color: var(--color-text-hover);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: var(--pine-color-text);\n --button-loader-color: var(--pine-color-text);\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n gap: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n.pds-button__icon {\n display: inline-flex;\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n white-space: nowrap;\n}\n\n.pds-button__icon--hidden,\n.pds-button__text--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--small {\n min-height: var(--pine-dimension-400);\n padding: calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n}\n\n.pds-button--micro {\n font-size: var(--pine-font-size-085);\n min-height: var(--pine-dimension-300);\n padding: var(--pine-dimension-025) var(--pine-dimension-xs);\n}\n\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__text--hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n &.pds-button--small {\n height: var(--pine-dimension-400);\n min-height: var(--pine-dimension-400);\n min-width: var(--pine-dimension-400);\n padding: var(--pine-dimension-2xs);\n width: var(--pine-dimension-400);\n }\n\n &.pds-button--micro {\n height: var(--pine-dimension-300);\n min-height: var(--pine-dimension-300);\n min-width: var(--pine-dimension-300);\n padding: var(--pine-dimension-3xs);\n width: var(--pine-dimension-300);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown, addCircle } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @part loader-svg - Exposes the loader SVG element for color customization. Appears only when loading.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines the button's disabled state.\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Determines if the button should take up the full width of its container.\n * @defaultValue false\n */\n @Prop() fullWidth? = false;\n\n /**\n * If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n */\n @Prop() href?: string;\n\n /**\n * Displays a leading icon in the button. DEPRECATED.\n * @defaultValue null\n * @deprecated Use `start` slot instead.\n */\n @Prop() icon?: string = null;\n\n /**\n * When true, displays only the icon and visually hides the text (keeping it accessible).\n */\n @Prop() iconOnly? = false;\n\n /**\n * Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n */\n @Prop() loading? = false;\n\n /**\n * Provides the button with a submittable name.\n */\n @Prop() name?: string;\n\n /**\n * Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n */\n @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n /**\n * Provides button with a type.\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Sets the size of the button.\n * @defaultValue default\n */\n @Prop() size?: 'default' | 'small' | 'micro' = 'default';\n\n /**\n * Sets the style variant of the button.\n * @defaultValue primary\n */\n @Prop() variant: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' | 'filter' = 'primary';\n\n @Event() pdsClick: EventEmitter<Event>;\n\n /**\n * Listen for Enter key presses on form inputs to trigger submit\n */\n @Listen('keydown', { target: 'body' })\n\n handleFormKeyDown(event: KeyboardEvent) {\n // Only handle Enter key for submit buttons that are not disabled\n if (event.key !== 'Enter' || this.type !== 'submit' || this.href || this.disabled) {\n return;\n }\n\n const target = event.target as Element;\n\n // Ensure event.target is an Element with matches method before proceeding\n if (!target || typeof target.matches !== 'function') {\n return;\n }\n const form = this.el.closest('form');\n\n // Check if the Enter key was pressed in a form input within the same form\n if (!form || !target || !form.contains(target)) {\n return;\n }\n\n // Check if target is a form input element (exclude reset buttons)\n const isFormInput = target.matches('input:not([type=\"submit\"]):not([type=\"button\"]):not([type=\"reset\"])') ||\n target.matches('pds-input') ||\n target.matches('pds-select') ||\n target.matches('pds-switch') ||\n target.matches('pds-checkbox') ||\n target.matches('pds-radio');\n\n if (isFormInput) {\n // Find all submit buttons in the form and check their actual properties\n const allSubmitButtons = Array.from(form.querySelectorAll('pds-button, button[type=\"submit\"], input[type=\"submit\"]'));\n const enabledSubmitButtons = allSubmitButtons.filter(button => {\n if (button.tagName.toLowerCase() === 'pds-button') {\n const pdsButton = button as HTMLPdsButtonElement;\n return pdsButton.type === 'submit' && !pdsButton.disabled;\n } else {\n return !button.hasAttribute('disabled');\n }\n });\n\n // Only synthesize click if this button is strictly the first enabled submit button\n if (enabledSubmitButtons.length > 0 && enabledSubmitButtons[0] === this.el) {\n event.preventDefault();\n this.el.click();\n }\n }\n }\n\n\n private handleClick = (ev: Event) => {\n if (this.loading) {\n ev.preventDefault();\n return;\n }\n\n // Prevent form submission for disabled buttons\n if (this.disabled) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && this.type != 'button') {\n // Handle form submission for Shadow DOM buttons\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n this.pdsClick.emit(ev);\n };\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n if (this.size && this.size !== 'default') {\n classNames.push('pds-button--' + this.size);\n }\n\n if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n private hasSlotContent(slotName: string): boolean {\n const elements = this.el.querySelectorAll(`[slot=\"${slotName}\"]`);\n return elements.length > 0;\n }\n\n private renderStartContent() {\n const hasIcon = this.icon && this.variant !== 'disclosure' && this.variant !== 'filter';\n const hasStartSlot = this.hasSlotContent('start');\n\n if (this.variant === 'filter') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={addCircle} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasIcon)) {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasStartSlot)) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n }\n\n return null;\n }\n\n private renderEndContent() {\n if (this.iconOnly) {\n return null;\n }\n\n if (this.variant === 'disclosure') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (this.hasSlotContent('end')) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n }\n\n return null;\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading || this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.renderStartContent()}\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\" exportparts=\"loader-svg\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.renderEndContent()}\n </div>\n );\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"pds-checkbox.entry.esm.js","sources":["src/global/styles/utils/label.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var( --pine-color-danger);\n\n &:hover {\n background: var(--pine-color-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.is-indeterminate) {\n input {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-white);\n border-block-end: var(--pine-border-width-none);\n border-block-start: var(--pine-border-width-none);\n border-inline-start: var(--pine-border-width-none);\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(90deg) translate3d(-103%, 32%, 0);\n width: 4px;\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-dimension-2xs);\n flex: none;\n height: var(--pine-dimension-sm);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--pine-dimension-sm);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-white);\n border-block-start: var(--pine-border-width-none);\n border-inline-start: var(--pine-border-width-none);\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(43deg) translate3d(-110%, -30%, 0);\n width: 4px;\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--pine-color-text-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-checkbox__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: 6px;\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-checkbox__message--error {\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n","import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsCheckbox {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n private readonly _type = 'checkbox' as const;\n\n @Element() el: HTMLPdsCheckboxElement;\n\n /**\n * It determines whether or not the checkbox is checked.\n */\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * It determines whether or not the checkbox is disabled.\n */\n @Prop() disabled: boolean;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * String used for helper message below checkbox.\n */\n @Prop() helperMessage: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n */\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /**\n * It determines whether or not the checkbox is invalid.\n */\n @Prop() invalid: boolean;\n\n /**\n * String used for label text next to checkbox.\n */\n @Prop() label: string;\n\n /**\n * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * String used for checkbox `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * It determines whether or not the checkbox is required.\n */\n @Prop() required: boolean;\n\n /**\n * The value of the checkbox that is submitted with a form.\n */\n @Prop() value: string;\n\n\n /**\n * Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.updateFormValue();\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For checkboxes, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value || 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string | FormData | null) {\n if (state instanceof FormData) {\n // For checkboxes, restore if the value exists in FormData\n const value = this.value || 'on';\n this.checked = state.get(this.name as string) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value || 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"pds-checkbox.entry.esm.js","sources":["src/global/styles/utils/label.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var( --pine-color-danger);\n\n &:hover {\n background: var(--pine-color-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.is-indeterminate) {\n input {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n border: 1px solid var(--pine-color-white);\n border-block-end: var(--pine-border-width-none);\n border-block-start: var(--pine-border-width-none);\n border-inline-start: var(--pine-border-width-none);\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(90deg) translate3d(-103%, 32%, 0);\n width: 4px;\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-dimension-2xs);\n flex: none;\n height: var(--pine-dimension-sm);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--pine-dimension-sm);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n border: 1px solid var(--pine-color-white);\n border-block-start: var(--pine-border-width-none);\n border-inline-start: var(--pine-border-width-none);\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(43deg) translate3d(-110%, -30%, 0);\n width: 4px;\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--pine-color-text-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-checkbox__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: 6px;\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-checkbox__message--error {\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n","import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsCheckbox {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n private readonly _type = 'checkbox' as const;\n\n @Element() el: HTMLPdsCheckboxElement;\n\n /**\n * It determines whether or not the checkbox is checked.\n */\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * It determines whether or not the checkbox is disabled.\n */\n @Prop() disabled: boolean;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * String used for helper message below checkbox.\n */\n @Prop() helperMessage: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n */\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /**\n * It determines whether or not the checkbox is invalid.\n */\n @Prop() invalid: boolean;\n\n /**\n * String used for label text next to checkbox.\n */\n @Prop() label: string;\n\n /**\n * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * String used for checkbox `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * It determines whether or not the checkbox is required.\n */\n @Prop() required: boolean;\n\n /**\n * The value of the checkbox that is submitted with a form.\n */\n @Prop() value: string;\n\n\n /**\n * Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.updateFormValue();\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For checkboxes, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value || 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string | FormData | null) {\n if (state instanceof FormData) {\n // For checkboxes, restore if the value exists in FormData\n const value = this.value || 'on';\n this.checked = state.get(this.name as string) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value || 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}