@pine-ds/core 0.2.3 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (572) hide show
  1. package/components/index2.js +6 -1
  2. package/components/index2.js.map +1 -1
  3. package/components/pds-accordion.js +1 -1
  4. package/components/pds-accordion.js.map +1 -1
  5. package/components/pds-avatar.js +1 -1
  6. package/components/pds-avatar.js.map +1 -1
  7. package/components/pds-box.js +3 -3
  8. package/components/pds-box.js.map +1 -1
  9. package/components/pds-button2.js +3 -2
  10. package/components/pds-button2.js.map +1 -1
  11. package/components/pds-checkbox2.js +5 -5
  12. package/components/pds-checkbox2.js.map +1 -1
  13. package/components/pds-chip.js +4 -3
  14. package/components/pds-chip.js.map +1 -1
  15. package/components/pds-copytext.js +4 -17
  16. package/components/pds-copytext.js.map +1 -1
  17. package/components/pds-divider.js +2 -2
  18. package/components/pds-divider.js.map +1 -1
  19. package/components/pds-image.js +3 -3
  20. package/components/pds-image.js.map +1 -1
  21. package/components/pds-input.js +4 -4
  22. package/components/pds-input.js.map +1 -1
  23. package/components/pds-link.js +3 -3
  24. package/components/pds-link.js.map +1 -1
  25. package/components/pds-progress.js +2 -2
  26. package/components/pds-progress.js.map +1 -1
  27. package/components/pds-radio.js +4 -4
  28. package/components/pds-radio.js.map +1 -1
  29. package/components/pds-row.js +1 -1
  30. package/components/pds-sortable-item.js +14 -4
  31. package/components/pds-sortable-item.js.map +1 -1
  32. package/components/pds-sortable.js +3 -3
  33. package/components/pds-sortable.js.map +1 -1
  34. package/components/pds-switch.js +4 -4
  35. package/components/pds-switch.js.map +1 -1
  36. package/components/pds-tab.js +4 -4
  37. package/components/pds-tab.js.map +1 -1
  38. package/components/pds-table-body.js +1 -1
  39. package/components/pds-table-cell2.js +3 -3
  40. package/components/pds-table-cell2.js.map +1 -1
  41. package/components/pds-table-head-cell2.js +4 -3
  42. package/components/pds-table-head-cell2.js.map +1 -1
  43. package/components/pds-table-head.js +2 -2
  44. package/components/pds-table-head.js.map +1 -1
  45. package/components/pds-table-row.js +2 -2
  46. package/components/pds-table-row.js.map +1 -1
  47. package/components/pds-table.js +2 -2
  48. package/components/pds-table.js.map +1 -1
  49. package/components/pds-tabpanel.js +2 -2
  50. package/components/pds-tabpanel.js.map +1 -1
  51. package/components/pds-tabs.js +2 -2
  52. package/components/pds-tabs.js.map +1 -1
  53. package/components/pds-textarea.js +5 -5
  54. package/components/pds-textarea.js.map +1 -1
  55. package/components/pds-tooltip.js +3 -3
  56. package/components/pds-tooltip.js.map +1 -1
  57. package/dist/cjs/{index-9b7c547c.js → index-7d9c71f6.js} +26 -3
  58. package/dist/cjs/index-7d9c71f6.js.map +1 -0
  59. package/dist/cjs/index-f034f06e.js +24 -0
  60. package/dist/cjs/index-f034f06e.js.map +1 -0
  61. package/dist/cjs/loader.cjs.js +2 -2
  62. package/dist/cjs/pds-accordion.cjs.entry.js +3 -3
  63. package/dist/cjs/pds-accordion.cjs.entry.js.map +1 -1
  64. package/dist/cjs/pds-avatar.cjs.entry.js +3 -3
  65. package/dist/cjs/pds-avatar.cjs.entry.js.map +1 -1
  66. package/dist/cjs/pds-box.cjs.entry.js +4 -4
  67. package/dist/cjs/pds-box.cjs.entry.js.map +1 -1
  68. package/dist/cjs/pds-button.cjs.entry.js +4 -3
  69. package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
  70. package/dist/cjs/pds-checkbox_2.cjs.entry.js +9 -9
  71. package/dist/cjs/pds-checkbox_2.cjs.entry.js.map +1 -1
  72. package/dist/cjs/pds-chip.cjs.entry.js +5 -4
  73. package/dist/cjs/pds-chip.cjs.entry.js.map +1 -1
  74. package/dist/cjs/pds-copytext.cjs.entry.js +5 -18
  75. package/dist/cjs/pds-copytext.cjs.entry.js.map +1 -1
  76. package/dist/cjs/pds-divider.cjs.entry.js +3 -3
  77. package/dist/cjs/pds-divider.cjs.entry.js.map +1 -1
  78. package/dist/cjs/pds-icon.cjs.entry.js +1 -1
  79. package/dist/cjs/pds-image.cjs.entry.js +4 -4
  80. package/dist/cjs/pds-image.cjs.entry.js.map +1 -1
  81. package/dist/cjs/pds-input.cjs.entry.js +6 -6
  82. package/dist/cjs/pds-input.cjs.entry.js.map +1 -1
  83. package/dist/cjs/{pds-label-b30f3c13.js → pds-label-5ebae56e.js} +2 -2
  84. package/dist/cjs/{pds-label-b30f3c13.js.map → pds-label-5ebae56e.js.map} +1 -1
  85. package/dist/cjs/pds-link.cjs.entry.js +5 -5
  86. package/dist/cjs/pds-link.cjs.entry.js.map +1 -1
  87. package/dist/cjs/pds-progress.cjs.entry.js +3 -3
  88. package/dist/cjs/pds-progress.cjs.entry.js.map +1 -1
  89. package/dist/cjs/pds-radio.cjs.entry.js +6 -6
  90. package/dist/cjs/pds-radio.cjs.entry.js.map +1 -1
  91. package/dist/cjs/pds-row.cjs.entry.js +2 -2
  92. package/dist/cjs/pds-sortable-item.cjs.entry.js +14 -4
  93. package/dist/cjs/pds-sortable-item.cjs.entry.js.map +1 -1
  94. package/dist/cjs/pds-sortable.cjs.entry.js +4 -4
  95. package/dist/cjs/pds-sortable.cjs.entry.js.map +1 -1
  96. package/dist/cjs/pds-switch.cjs.entry.js +6 -6
  97. package/dist/cjs/pds-switch.cjs.entry.js.map +1 -1
  98. package/dist/cjs/pds-tab.cjs.entry.js +5 -5
  99. package/dist/cjs/pds-tab.cjs.entry.js.map +1 -1
  100. package/dist/cjs/pds-table-body.cjs.entry.js +2 -2
  101. package/dist/cjs/pds-table-head-cell.cjs.entry.js +5 -4
  102. package/dist/cjs/pds-table-head-cell.cjs.entry.js.map +1 -1
  103. package/dist/cjs/pds-table-head.cjs.entry.js +3 -3
  104. package/dist/cjs/pds-table-head.cjs.entry.js.map +1 -1
  105. package/dist/cjs/pds-table-row.cjs.entry.js +3 -3
  106. package/dist/cjs/pds-table-row.cjs.entry.js.map +1 -1
  107. package/dist/cjs/pds-table.cjs.entry.js +3 -3
  108. package/dist/cjs/pds-table.cjs.entry.js.map +1 -1
  109. package/dist/cjs/pds-tabpanel.cjs.entry.js +3 -3
  110. package/dist/cjs/pds-tabpanel.cjs.entry.js.map +1 -1
  111. package/dist/cjs/pds-tabs.cjs.entry.js +3 -3
  112. package/dist/cjs/pds-tabs.cjs.entry.js.map +1 -1
  113. package/dist/cjs/pds-textarea.cjs.entry.js +7 -7
  114. package/dist/cjs/pds-textarea.cjs.entry.js.map +1 -1
  115. package/dist/cjs/pds-tooltip.cjs.entry.js +4 -4
  116. package/dist/cjs/pds-tooltip.cjs.entry.js.map +1 -1
  117. package/dist/cjs/pine-core.cjs.js +3 -3
  118. package/dist/cjs/pine-core.cjs.js.map +1 -1
  119. package/dist/collection/collection-manifest.json +2 -2
  120. package/dist/collection/components/pds-accordion/pds-accordion.css +33 -19
  121. package/dist/collection/components/pds-avatar/pds-avatar.css +23 -19
  122. package/dist/collection/components/pds-box/pds-box.css +35 -35
  123. package/dist/collection/components/pds-box/pds-box.js +2 -2
  124. package/dist/collection/components/pds-box/pds-box.js.map +1 -1
  125. package/dist/collection/components/pds-button/pds-button.css +92 -83
  126. package/dist/collection/components/pds-button/pds-button.js +2 -1
  127. package/dist/collection/components/pds-button/pds-button.js.map +1 -1
  128. package/dist/collection/components/pds-checkbox/pds-checkbox.css +29 -29
  129. package/dist/collection/components/pds-checkbox/pds-checkbox.js +4 -4
  130. package/dist/collection/components/pds-checkbox/pds-checkbox.js.map +1 -1
  131. package/dist/collection/components/pds-chip/pds-chip.css +88 -94
  132. package/dist/collection/components/pds-chip/pds-chip.js +3 -2
  133. package/dist/collection/components/pds-chip/pds-chip.js.map +1 -1
  134. package/dist/collection/components/pds-copytext/pds-copytext.css +39 -37
  135. package/dist/collection/components/pds-copytext/pds-copytext.js +3 -16
  136. package/dist/collection/components/pds-copytext/pds-copytext.js.map +1 -1
  137. package/dist/collection/components/pds-divider/pds-divider.css +36 -36
  138. package/dist/collection/components/pds-divider/pds-divider.js +1 -1
  139. package/dist/collection/components/pds-image/pds-image.css +2 -2
  140. package/dist/collection/components/pds-image/pds-image.js +2 -2
  141. package/dist/collection/components/pds-input/pds-input.css +49 -45
  142. package/dist/collection/components/pds-input/pds-input.js +3 -3
  143. package/dist/collection/components/pds-input/pds-input.js.map +1 -1
  144. package/dist/collection/components/pds-link/pds-link.css +19 -19
  145. package/dist/collection/components/pds-link/pds-link.js +2 -2
  146. package/dist/collection/components/pds-link/pds-link.js.map +1 -1
  147. package/dist/collection/components/pds-progress/pds-progress.css +20 -18
  148. package/dist/collection/components/pds-progress/pds-progress.js +2 -2
  149. package/dist/collection/components/pds-progress/pds-progress.js.map +1 -1
  150. package/dist/collection/components/pds-radio/pds-radio.css +32 -29
  151. package/dist/collection/components/pds-radio/pds-radio.js +3 -3
  152. package/dist/collection/components/pds-radio/pds-radio.js.map +1 -1
  153. package/dist/collection/components/pds-row/pds-row.js +1 -1
  154. package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.css +17 -17
  155. package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +15 -5
  156. package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js.map +1 -1
  157. package/dist/collection/components/pds-sortable/pds-sortable-item/stories/pds-sortable-item.stories.js +2 -2
  158. package/dist/collection/components/pds-sortable/pds-sortable.css +3 -3
  159. package/dist/collection/components/pds-sortable/pds-sortable.js +2 -2
  160. package/dist/collection/components/pds-sortable/pds-sortable.js.map +1 -1
  161. package/dist/collection/components/pds-sortable/sortable-interface.js +2 -0
  162. package/dist/collection/components/pds-sortable/sortable-interface.js.map +1 -0
  163. package/dist/collection/components/pds-sortable/stories/pds-sortable.stories.js +6 -6
  164. package/dist/collection/components/pds-switch/pds-switch.css +47 -45
  165. package/dist/collection/components/pds-switch/pds-switch.js +3 -3
  166. package/dist/collection/components/pds-switch/pds-switch.js.map +1 -1
  167. package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
  168. package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css +19 -19
  169. package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
  170. package/dist/collection/components/pds-table/pds-table-head/pds-table-head.css +4 -4
  171. package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
  172. package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js.map +1 -1
  173. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css +25 -25
  174. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +3 -2
  175. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js.map +1 -1
  176. package/dist/collection/components/pds-table/pds-table-row/pds-table-row.css +4 -4
  177. package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
  178. package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js.map +1 -1
  179. package/dist/collection/components/pds-table/pds-table.css +3 -3
  180. package/dist/collection/components/pds-table/pds-table.js +1 -1
  181. package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +50 -48
  182. package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +3 -3
  183. package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.css +2 -2
  184. package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
  185. package/dist/collection/components/pds-tabs/pds-tabs.css +11 -15
  186. package/dist/collection/components/pds-tabs/pds-tabs.js +1 -1
  187. package/dist/collection/components/pds-textarea/pds-textarea.css +51 -48
  188. package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
  189. package/dist/collection/components/pds-textarea/pds-textarea.js.map +1 -1
  190. package/dist/collection/components/pds-tooltip/pds-tooltip.css +67 -67
  191. package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
  192. package/dist/docs.json +10 -10
  193. package/dist/esm/{index-5e54ea50.js → index-6f0bb1b9.js} +26 -3
  194. package/dist/esm/index-6f0bb1b9.js.map +1 -0
  195. package/dist/esm/index-c6934caf.js +14 -0
  196. package/dist/esm/index-c6934caf.js.map +1 -0
  197. package/dist/esm/loader.js +3 -3
  198. package/dist/esm/pds-accordion.entry.js +3 -3
  199. package/dist/esm/pds-accordion.entry.js.map +1 -1
  200. package/dist/esm/pds-avatar.entry.js +3 -3
  201. package/dist/esm/pds-avatar.entry.js.map +1 -1
  202. package/dist/esm/pds-box.entry.js +4 -4
  203. package/dist/esm/pds-box.entry.js.map +1 -1
  204. package/dist/esm/pds-button.entry.js +4 -3
  205. package/dist/esm/pds-button.entry.js.map +1 -1
  206. package/dist/esm/pds-checkbox_2.entry.js +9 -9
  207. package/dist/esm/pds-checkbox_2.entry.js.map +1 -1
  208. package/dist/esm/pds-chip.entry.js +5 -4
  209. package/dist/esm/pds-chip.entry.js.map +1 -1
  210. package/dist/esm/pds-copytext.entry.js +5 -18
  211. package/dist/esm/pds-copytext.entry.js.map +1 -1
  212. package/dist/esm/pds-divider.entry.js +3 -3
  213. package/dist/esm/pds-divider.entry.js.map +1 -1
  214. package/dist/esm/pds-icon.entry.js +1 -1
  215. package/dist/esm/pds-image.entry.js +4 -4
  216. package/dist/esm/pds-image.entry.js.map +1 -1
  217. package/dist/esm/pds-input.entry.js +6 -6
  218. package/dist/esm/pds-input.entry.js.map +1 -1
  219. package/dist/esm/{pds-label-39814469.js → pds-label-d7e11551.js} +2 -2
  220. package/dist/esm/{pds-label-39814469.js.map → pds-label-d7e11551.js.map} +1 -1
  221. package/dist/esm/pds-link.entry.js +5 -5
  222. package/dist/esm/pds-link.entry.js.map +1 -1
  223. package/dist/esm/pds-progress.entry.js +3 -3
  224. package/dist/esm/pds-progress.entry.js.map +1 -1
  225. package/dist/esm/pds-radio.entry.js +6 -6
  226. package/dist/esm/pds-radio.entry.js.map +1 -1
  227. package/dist/esm/pds-row.entry.js +2 -2
  228. package/dist/esm/pds-sortable-item.entry.js +14 -4
  229. package/dist/esm/pds-sortable-item.entry.js.map +1 -1
  230. package/dist/esm/pds-sortable.entry.js +4 -4
  231. package/dist/esm/pds-sortable.entry.js.map +1 -1
  232. package/dist/esm/pds-switch.entry.js +6 -6
  233. package/dist/esm/pds-switch.entry.js.map +1 -1
  234. package/dist/esm/pds-tab.entry.js +5 -5
  235. package/dist/esm/pds-tab.entry.js.map +1 -1
  236. package/dist/esm/pds-table-body.entry.js +2 -2
  237. package/dist/esm/pds-table-head-cell.entry.js +5 -4
  238. package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
  239. package/dist/esm/pds-table-head.entry.js +3 -3
  240. package/dist/esm/pds-table-head.entry.js.map +1 -1
  241. package/dist/esm/pds-table-row.entry.js +3 -3
  242. package/dist/esm/pds-table-row.entry.js.map +1 -1
  243. package/dist/esm/pds-table.entry.js +3 -3
  244. package/dist/esm/pds-table.entry.js.map +1 -1
  245. package/dist/esm/pds-tabpanel.entry.js +3 -3
  246. package/dist/esm/pds-tabpanel.entry.js.map +1 -1
  247. package/dist/esm/pds-tabs.entry.js +3 -3
  248. package/dist/esm/pds-tabs.entry.js.map +1 -1
  249. package/dist/esm/pds-textarea.entry.js +7 -7
  250. package/dist/esm/pds-textarea.entry.js.map +1 -1
  251. package/dist/esm/pds-tooltip.entry.js +4 -4
  252. package/dist/esm/pds-tooltip.entry.js.map +1 -1
  253. package/dist/esm/pine-core.js +4 -4
  254. package/dist/esm/pine-core.js.map +1 -1
  255. package/dist/esm-es5/index-6f0bb1b9.js +3 -0
  256. package/dist/esm-es5/index-6f0bb1b9.js.map +1 -0
  257. package/dist/esm-es5/index-c6934caf.js +2 -0
  258. package/dist/esm-es5/index-c6934caf.js.map +1 -0
  259. package/dist/esm-es5/loader.js +1 -1
  260. package/dist/esm-es5/loader.js.map +1 -1
  261. package/dist/esm-es5/pds-accordion.entry.js +1 -1
  262. package/dist/esm-es5/pds-accordion.entry.js.map +1 -1
  263. package/dist/esm-es5/pds-avatar.entry.js +1 -1
  264. package/dist/esm-es5/pds-avatar.entry.js.map +1 -1
  265. package/dist/esm-es5/pds-box.entry.js +1 -1
  266. package/dist/esm-es5/pds-box.entry.js.map +1 -1
  267. package/dist/esm-es5/pds-button.entry.js +1 -1
  268. package/dist/esm-es5/pds-button.entry.js.map +1 -1
  269. package/dist/esm-es5/pds-checkbox_2.entry.js +1 -1
  270. package/dist/esm-es5/pds-checkbox_2.entry.js.map +1 -1
  271. package/dist/esm-es5/pds-chip.entry.js +1 -1
  272. package/dist/esm-es5/pds-chip.entry.js.map +1 -1
  273. package/dist/esm-es5/pds-copytext.entry.js +1 -1
  274. package/dist/esm-es5/pds-copytext.entry.js.map +1 -1
  275. package/dist/esm-es5/pds-divider.entry.js +1 -1
  276. package/dist/esm-es5/pds-divider.entry.js.map +1 -1
  277. package/dist/esm-es5/pds-icon.entry.js +1 -1
  278. package/dist/esm-es5/pds-image.entry.js +1 -1
  279. package/dist/esm-es5/pds-image.entry.js.map +1 -1
  280. package/dist/esm-es5/pds-input.entry.js +1 -1
  281. package/dist/esm-es5/pds-input.entry.js.map +1 -1
  282. package/dist/esm-es5/{pds-label-39814469.js → pds-label-d7e11551.js} +2 -2
  283. package/dist/esm-es5/pds-link.entry.js +1 -1
  284. package/dist/esm-es5/pds-link.entry.js.map +1 -1
  285. package/dist/esm-es5/pds-progress.entry.js +1 -1
  286. package/dist/esm-es5/pds-progress.entry.js.map +1 -1
  287. package/dist/esm-es5/pds-radio.entry.js +1 -1
  288. package/dist/esm-es5/pds-radio.entry.js.map +1 -1
  289. package/dist/esm-es5/pds-row.entry.js +1 -1
  290. package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
  291. package/dist/esm-es5/pds-sortable-item.entry.js.map +1 -1
  292. package/dist/esm-es5/pds-sortable.entry.js +2 -2
  293. package/dist/esm-es5/pds-sortable.entry.js.map +1 -1
  294. package/dist/esm-es5/pds-switch.entry.js +1 -1
  295. package/dist/esm-es5/pds-switch.entry.js.map +1 -1
  296. package/dist/esm-es5/pds-tab.entry.js +1 -1
  297. package/dist/esm-es5/pds-tab.entry.js.map +1 -1
  298. package/dist/esm-es5/pds-table-body.entry.js +1 -1
  299. package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
  300. package/dist/esm-es5/pds-table-head-cell.entry.js.map +1 -1
  301. package/dist/esm-es5/pds-table-head.entry.js +1 -1
  302. package/dist/esm-es5/pds-table-head.entry.js.map +1 -1
  303. package/dist/esm-es5/pds-table-row.entry.js +1 -1
  304. package/dist/esm-es5/pds-table-row.entry.js.map +1 -1
  305. package/dist/esm-es5/pds-table.entry.js +1 -1
  306. package/dist/esm-es5/pds-table.entry.js.map +1 -1
  307. package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
  308. package/dist/esm-es5/pds-tabpanel.entry.js.map +1 -1
  309. package/dist/esm-es5/pds-tabs.entry.js +1 -1
  310. package/dist/esm-es5/pds-tabs.entry.js.map +1 -1
  311. package/dist/esm-es5/pds-textarea.entry.js +1 -1
  312. package/dist/esm-es5/pds-textarea.entry.js.map +1 -1
  313. package/dist/esm-es5/pds-tooltip.entry.js +1 -1
  314. package/dist/esm-es5/pds-tooltip.entry.js.map +1 -1
  315. package/dist/esm-es5/pine-core.js +1 -1
  316. package/dist/esm-es5/pine-core.js.map +1 -1
  317. package/dist/pine-core/p-0a1e2528.system.entry.js +2 -0
  318. package/dist/pine-core/p-0a1e2528.system.entry.js.map +1 -0
  319. package/dist/pine-core/p-0a636312.system.entry.js +2 -0
  320. package/dist/pine-core/p-0a636312.system.entry.js.map +1 -0
  321. package/dist/pine-core/p-0eb4e674.entry.js +2 -0
  322. package/dist/pine-core/p-0eb4e674.entry.js.map +1 -0
  323. package/dist/pine-core/{p-f5826ecc.system.js → p-0ec12306.system.js} +2 -2
  324. package/dist/pine-core/p-12a4c0ae.system.entry.js +2 -0
  325. package/dist/pine-core/p-12a4c0ae.system.entry.js.map +1 -0
  326. package/dist/pine-core/{p-525195d2.entry.js → p-1632460c.entry.js} +2 -2
  327. package/dist/pine-core/p-16e9d55b.entry.js +2 -0
  328. package/dist/pine-core/p-16e9d55b.entry.js.map +1 -0
  329. package/dist/pine-core/p-173f8d39.entry.js +2 -0
  330. package/dist/pine-core/p-173f8d39.entry.js.map +1 -0
  331. package/dist/pine-core/p-206b272d.entry.js +2 -0
  332. package/dist/pine-core/p-206b272d.entry.js.map +1 -0
  333. package/dist/pine-core/p-209bc3fd.entry.js +2 -0
  334. package/dist/pine-core/p-209bc3fd.entry.js.map +1 -0
  335. package/dist/pine-core/p-2e01613b.entry.js +2 -0
  336. package/dist/pine-core/p-2e01613b.entry.js.map +1 -0
  337. package/dist/pine-core/p-2e19ec3d.system.entry.js +2 -0
  338. package/dist/pine-core/p-2e19ec3d.system.entry.js.map +1 -0
  339. package/dist/pine-core/p-2eacced7.system.entry.js +2 -0
  340. package/dist/pine-core/p-2eacced7.system.entry.js.map +1 -0
  341. package/dist/pine-core/p-2f758669.system.entry.js +2 -0
  342. package/dist/pine-core/p-2f758669.system.entry.js.map +1 -0
  343. package/dist/pine-core/p-2f77dbd3.js +3 -0
  344. package/dist/pine-core/p-2f77dbd3.js.map +1 -0
  345. package/dist/pine-core/p-2fe87b9d.entry.js +2 -0
  346. package/dist/pine-core/p-2fe87b9d.entry.js.map +1 -0
  347. package/dist/pine-core/{p-c0c0038a.system.entry.js → p-3e673113.system.entry.js} +2 -2
  348. package/dist/pine-core/p-403a20e8.js +2 -0
  349. package/dist/pine-core/p-403a20e8.js.map +1 -0
  350. package/dist/pine-core/p-478689a0.system.entry.js +2 -0
  351. package/dist/pine-core/p-478689a0.system.entry.js.map +1 -0
  352. package/dist/pine-core/p-49a28a19.system.entry.js +2 -0
  353. package/dist/pine-core/p-4dfae634.system.entry.js +2 -0
  354. package/dist/pine-core/p-4dfae634.system.entry.js.map +1 -0
  355. package/dist/pine-core/p-4f7ee11c.entry.js +2 -0
  356. package/dist/pine-core/p-4f7ee11c.entry.js.map +1 -0
  357. package/dist/pine-core/{p-1a8582cd.entry.js → p-5073b1c0.entry.js} +3 -3
  358. package/dist/pine-core/{p-1a8582cd.entry.js.map → p-5073b1c0.entry.js.map} +1 -1
  359. package/dist/pine-core/p-51f81513.entry.js +2 -0
  360. package/dist/pine-core/p-51f81513.entry.js.map +1 -0
  361. package/dist/pine-core/{p-780136bd.entry.js → p-52e6f836.entry.js} +2 -2
  362. package/dist/pine-core/p-5f2b3f57.entry.js +2 -0
  363. package/dist/pine-core/p-5f2b3f57.entry.js.map +1 -0
  364. package/dist/pine-core/p-61ab207f.entry.js +2 -0
  365. package/dist/pine-core/p-61ab207f.entry.js.map +1 -0
  366. package/dist/pine-core/p-6370aa12.system.entry.js +2 -0
  367. package/dist/pine-core/p-6370aa12.system.entry.js.map +1 -0
  368. package/dist/pine-core/p-64b4cb70.system.js +3 -0
  369. package/dist/pine-core/p-64b4cb70.system.js.map +1 -0
  370. package/dist/pine-core/p-674edd62.system.js +2 -0
  371. package/dist/pine-core/p-674edd62.system.js.map +1 -0
  372. package/dist/pine-core/p-6aa28287.system.entry.js +2 -0
  373. package/dist/pine-core/p-6aa28287.system.entry.js.map +1 -0
  374. package/dist/pine-core/p-70481699.entry.js +2 -0
  375. package/dist/pine-core/p-70481699.entry.js.map +1 -0
  376. package/dist/pine-core/p-75951ef3.system.entry.js +2 -0
  377. package/dist/pine-core/p-75951ef3.system.entry.js.map +1 -0
  378. package/dist/pine-core/p-75c441ef.system.entry.js +2 -0
  379. package/dist/pine-core/p-75c441ef.system.entry.js.map +1 -0
  380. package/dist/pine-core/p-7611d073.system.js +2 -0
  381. package/dist/pine-core/p-7611d073.system.js.map +1 -0
  382. package/dist/pine-core/p-809648ee.entry.js +2 -0
  383. package/dist/pine-core/p-809648ee.entry.js.map +1 -0
  384. package/dist/pine-core/p-87c2ac18.entry.js +2 -0
  385. package/dist/pine-core/p-87c2ac18.entry.js.map +1 -0
  386. package/dist/pine-core/p-8c5e76d4.system.entry.js +2 -0
  387. package/dist/pine-core/p-8c5e76d4.system.entry.js.map +1 -0
  388. package/dist/pine-core/p-8ce3a7ef.entry.js +2 -0
  389. package/dist/pine-core/p-8ce3a7ef.entry.js.map +1 -0
  390. package/dist/pine-core/p-94371829.system.entry.js +2 -0
  391. package/dist/pine-core/p-94371829.system.entry.js.map +1 -0
  392. package/dist/pine-core/p-9a129745.entry.js +2 -0
  393. package/dist/pine-core/p-9a129745.entry.js.map +1 -0
  394. package/dist/pine-core/{p-0b4a3e15.system.entry.js → p-9e33f4fb.system.entry.js} +3 -3
  395. package/dist/pine-core/{p-0b4a3e15.system.entry.js.map → p-9e33f4fb.system.entry.js.map} +1 -1
  396. package/dist/pine-core/p-9f8a1aa6.entry.js +2 -0
  397. package/dist/pine-core/p-9f8a1aa6.entry.js.map +1 -0
  398. package/dist/pine-core/p-ad891586.system.entry.js +2 -0
  399. package/dist/pine-core/p-ad891586.system.entry.js.map +1 -0
  400. package/dist/pine-core/p-afdfadb0.entry.js +2 -0
  401. package/dist/pine-core/p-b48975f0.system.entry.js +2 -0
  402. package/dist/pine-core/p-b48975f0.system.entry.js.map +1 -0
  403. package/dist/pine-core/p-b52c9d3d.entry.js +2 -0
  404. package/dist/pine-core/p-b52c9d3d.entry.js.map +1 -0
  405. package/dist/pine-core/p-bbaaa246.system.entry.js +2 -0
  406. package/dist/pine-core/p-bbaaa246.system.entry.js.map +1 -0
  407. package/dist/pine-core/p-bc4bbda0.entry.js +2 -0
  408. package/dist/pine-core/p-bc4bbda0.entry.js.map +1 -0
  409. package/dist/pine-core/p-bd5135c3.entry.js +2 -0
  410. package/dist/pine-core/p-bd5135c3.entry.js.map +1 -0
  411. package/dist/pine-core/{p-36a8c980.system.entry.js → p-bec6d20b.system.entry.js} +2 -2
  412. package/dist/pine-core/p-c1249ab9.entry.js +2 -0
  413. package/dist/pine-core/p-c1249ab9.entry.js.map +1 -0
  414. package/dist/pine-core/p-c3828098.entry.js +2 -0
  415. package/dist/pine-core/p-c3828098.entry.js.map +1 -0
  416. package/dist/pine-core/p-c3de3fb3.system.entry.js +2 -0
  417. package/dist/pine-core/p-c3de3fb3.system.entry.js.map +1 -0
  418. package/dist/pine-core/p-cfb22651.system.entry.js +2 -0
  419. package/dist/pine-core/p-cfb22651.system.entry.js.map +1 -0
  420. package/dist/pine-core/p-d73e2a61.system.entry.js +2 -0
  421. package/dist/pine-core/p-d73e2a61.system.entry.js.map +1 -0
  422. package/dist/pine-core/p-dacd68cf.system.entry.js +2 -0
  423. package/dist/pine-core/p-dacd68cf.system.entry.js.map +1 -0
  424. package/dist/pine-core/p-e4f30321.js +2 -0
  425. package/dist/pine-core/p-ec56491f.system.entry.js +2 -0
  426. package/dist/pine-core/p-ec56491f.system.entry.js.map +1 -0
  427. package/dist/pine-core/p-ecbf0b15.system.entry.js +2 -0
  428. package/dist/pine-core/p-ecbf0b15.system.entry.js.map +1 -0
  429. package/dist/pine-core/p-f71ff6cb.system.entry.js +2 -0
  430. package/dist/pine-core/p-f71ff6cb.system.entry.js.map +1 -0
  431. package/dist/pine-core/p-ff9044ed.entry.js +2 -0
  432. package/dist/pine-core/p-ff9044ed.entry.js.map +1 -0
  433. package/dist/pine-core/p-fffaa868.entry.js +2 -0
  434. package/dist/pine-core/p-fffaa868.entry.js.map +1 -0
  435. package/dist/pine-core/pine-core.css +1 -1
  436. package/dist/pine-core/pine-core.esm.js +1 -1
  437. package/dist/pine-core/pine-core.esm.js.map +1 -1
  438. package/dist/pine-core/pine-core.js +1 -1
  439. package/dist/types/components/pds-progress/pds-progress.d.ts +1 -1
  440. package/dist/types/components/pds-sortable/pds-sortable-item/pds-sortable-item.d.ts +4 -1
  441. package/dist/types/components/pds-sortable/sortable-interface.d.ts +7 -0
  442. package/dist/types/components.d.ts +4 -4
  443. package/hydrate/index.js +119 -97
  444. package/package.json +7 -6
  445. package/dist/cjs/index-968864bf.js +0 -14
  446. package/dist/cjs/index-968864bf.js.map +0 -1
  447. package/dist/cjs/index-9b7c547c.js.map +0 -1
  448. package/dist/esm/index-5e54ea50.js.map +0 -1
  449. package/dist/esm/index-9835dc94.js +0 -9
  450. package/dist/esm/index-9835dc94.js.map +0 -1
  451. package/dist/esm-es5/index-5e54ea50.js +0 -3
  452. package/dist/esm-es5/index-5e54ea50.js.map +0 -1
  453. package/dist/esm-es5/index-9835dc94.js +0 -2
  454. package/dist/esm-es5/index-9835dc94.js.map +0 -1
  455. package/dist/pine-core/p-02ff0a87.system.entry.js +0 -2
  456. package/dist/pine-core/p-02ff0a87.system.entry.js.map +0 -1
  457. package/dist/pine-core/p-08c496ee.entry.js +0 -2
  458. package/dist/pine-core/p-08c496ee.entry.js.map +0 -1
  459. package/dist/pine-core/p-1176b1ae.system.entry.js +0 -2
  460. package/dist/pine-core/p-1176b1ae.system.entry.js.map +0 -1
  461. package/dist/pine-core/p-19cb2923.system.entry.js +0 -2
  462. package/dist/pine-core/p-19cb2923.system.entry.js.map +0 -1
  463. package/dist/pine-core/p-1acdba43.entry.js +0 -2
  464. package/dist/pine-core/p-1acdba43.entry.js.map +0 -1
  465. package/dist/pine-core/p-2ca5f853.system.js +0 -2
  466. package/dist/pine-core/p-2ca5f853.system.js.map +0 -1
  467. package/dist/pine-core/p-2e9881db.system.entry.js +0 -2
  468. package/dist/pine-core/p-2e9881db.system.entry.js.map +0 -1
  469. package/dist/pine-core/p-37977a94.entry.js +0 -2
  470. package/dist/pine-core/p-37977a94.entry.js.map +0 -1
  471. package/dist/pine-core/p-394e00a2.entry.js +0 -2
  472. package/dist/pine-core/p-394e00a2.entry.js.map +0 -1
  473. package/dist/pine-core/p-395cf3d0.entry.js +0 -2
  474. package/dist/pine-core/p-395cf3d0.entry.js.map +0 -1
  475. package/dist/pine-core/p-3b4a83e5.entry.js +0 -2
  476. package/dist/pine-core/p-3b4a83e5.entry.js.map +0 -1
  477. package/dist/pine-core/p-445792b5.system.js +0 -3
  478. package/dist/pine-core/p-445792b5.system.js.map +0 -1
  479. package/dist/pine-core/p-44be28a1.system.entry.js +0 -2
  480. package/dist/pine-core/p-44be28a1.system.entry.js.map +0 -1
  481. package/dist/pine-core/p-450da80f.js +0 -2
  482. package/dist/pine-core/p-450da80f.js.map +0 -1
  483. package/dist/pine-core/p-46d00870.entry.js +0 -2
  484. package/dist/pine-core/p-46d00870.entry.js.map +0 -1
  485. package/dist/pine-core/p-480a95e5.system.js +0 -2
  486. package/dist/pine-core/p-480a95e5.system.js.map +0 -1
  487. package/dist/pine-core/p-483b873b.system.entry.js +0 -2
  488. package/dist/pine-core/p-483b873b.system.entry.js.map +0 -1
  489. package/dist/pine-core/p-4b5956a3.entry.js +0 -2
  490. package/dist/pine-core/p-4b5956a3.entry.js.map +0 -1
  491. package/dist/pine-core/p-4f3c9367.system.entry.js +0 -2
  492. package/dist/pine-core/p-4f3c9367.system.entry.js.map +0 -1
  493. package/dist/pine-core/p-50222d44.system.entry.js +0 -2
  494. package/dist/pine-core/p-50222d44.system.entry.js.map +0 -1
  495. package/dist/pine-core/p-5729cd96.system.entry.js +0 -2
  496. package/dist/pine-core/p-5729cd96.system.entry.js.map +0 -1
  497. package/dist/pine-core/p-5eb56ebf.entry.js +0 -2
  498. package/dist/pine-core/p-5eb56ebf.entry.js.map +0 -1
  499. package/dist/pine-core/p-6a7259df.entry.js +0 -2
  500. package/dist/pine-core/p-6a7259df.entry.js.map +0 -1
  501. package/dist/pine-core/p-752dfaa6.entry.js +0 -2
  502. package/dist/pine-core/p-752dfaa6.entry.js.map +0 -1
  503. package/dist/pine-core/p-7835a3e2.entry.js +0 -2
  504. package/dist/pine-core/p-7835a3e2.entry.js.map +0 -1
  505. package/dist/pine-core/p-7e75c2e3.entry.js +0 -2
  506. package/dist/pine-core/p-7e75c2e3.entry.js.map +0 -1
  507. package/dist/pine-core/p-820c8929.entry.js +0 -2
  508. package/dist/pine-core/p-820c8929.entry.js.map +0 -1
  509. package/dist/pine-core/p-869e7901.entry.js +0 -2
  510. package/dist/pine-core/p-869e7901.entry.js.map +0 -1
  511. package/dist/pine-core/p-8cad6b7a.entry.js +0 -2
  512. package/dist/pine-core/p-8cad6b7a.entry.js.map +0 -1
  513. package/dist/pine-core/p-93dd9bc7.entry.js +0 -2
  514. package/dist/pine-core/p-93dd9bc7.entry.js.map +0 -1
  515. package/dist/pine-core/p-99e033f1.system.entry.js +0 -2
  516. package/dist/pine-core/p-99e033f1.system.entry.js.map +0 -1
  517. package/dist/pine-core/p-9a89fdb8.entry.js +0 -2
  518. package/dist/pine-core/p-9a89fdb8.entry.js.map +0 -1
  519. package/dist/pine-core/p-a0368388.system.entry.js +0 -2
  520. package/dist/pine-core/p-a0368388.system.entry.js.map +0 -1
  521. package/dist/pine-core/p-a3c3dae3.system.entry.js +0 -2
  522. package/dist/pine-core/p-a3c3dae3.system.entry.js.map +0 -1
  523. package/dist/pine-core/p-aaced44a.entry.js +0 -2
  524. package/dist/pine-core/p-aaced44a.entry.js.map +0 -1
  525. package/dist/pine-core/p-b851f394.system.entry.js +0 -2
  526. package/dist/pine-core/p-b851f394.system.entry.js.map +0 -1
  527. package/dist/pine-core/p-c04fb6c0.system.entry.js +0 -2
  528. package/dist/pine-core/p-c04fb6c0.system.entry.js.map +0 -1
  529. package/dist/pine-core/p-c0713e59.entry.js +0 -2
  530. package/dist/pine-core/p-c0713e59.entry.js.map +0 -1
  531. package/dist/pine-core/p-c20075a6.system.entry.js +0 -2
  532. package/dist/pine-core/p-c20075a6.system.entry.js.map +0 -1
  533. package/dist/pine-core/p-c6448545.system.entry.js +0 -2
  534. package/dist/pine-core/p-c6448545.system.entry.js.map +0 -1
  535. package/dist/pine-core/p-c707d9d0.entry.js +0 -2
  536. package/dist/pine-core/p-c707d9d0.entry.js.map +0 -1
  537. package/dist/pine-core/p-caa88065.js +0 -2
  538. package/dist/pine-core/p-cbe37d9d.system.entry.js +0 -2
  539. package/dist/pine-core/p-cbe37d9d.system.entry.js.map +0 -1
  540. package/dist/pine-core/p-ccb0d9ee.entry.js +0 -2
  541. package/dist/pine-core/p-ce887d74.system.entry.js +0 -2
  542. package/dist/pine-core/p-ce887d74.system.entry.js.map +0 -1
  543. package/dist/pine-core/p-d3fe5de5.entry.js +0 -2
  544. package/dist/pine-core/p-d3fe5de5.entry.js.map +0 -1
  545. package/dist/pine-core/p-d7606cb1.system.entry.js +0 -2
  546. package/dist/pine-core/p-d7606cb1.system.entry.js.map +0 -1
  547. package/dist/pine-core/p-df656817.system.entry.js +0 -2
  548. package/dist/pine-core/p-df656817.system.entry.js.map +0 -1
  549. package/dist/pine-core/p-e20cf701.system.entry.js +0 -2
  550. package/dist/pine-core/p-e20cf701.system.entry.js.map +0 -1
  551. package/dist/pine-core/p-e74f35bd.js +0 -3
  552. package/dist/pine-core/p-e74f35bd.js.map +0 -1
  553. package/dist/pine-core/p-e7ea6002.system.entry.js +0 -2
  554. package/dist/pine-core/p-e7ea6002.system.entry.js.map +0 -1
  555. package/dist/pine-core/p-eafd2eac.system.entry.js +0 -2
  556. package/dist/pine-core/p-eafd2eac.system.entry.js.map +0 -1
  557. package/dist/pine-core/p-f30b2078.system.entry.js +0 -2
  558. package/dist/pine-core/p-f403ff37.entry.js +0 -2
  559. package/dist/pine-core/p-f403ff37.entry.js.map +0 -1
  560. package/dist/pine-core/p-f72dc7fd.entry.js +0 -2
  561. package/dist/pine-core/p-f72dc7fd.entry.js.map +0 -1
  562. package/dist/pine-core/p-fe949ea3.system.entry.js +0 -2
  563. package/dist/pine-core/p-fe949ea3.system.entry.js.map +0 -1
  564. /package/dist/esm-es5/{pds-label-39814469.js.map → pds-label-d7e11551.js.map} +0 -0
  565. /package/dist/pine-core/{p-f5826ecc.system.js.map → p-0ec12306.system.js.map} +0 -0
  566. /package/dist/pine-core/{p-525195d2.entry.js.map → p-1632460c.entry.js.map} +0 -0
  567. /package/dist/pine-core/{p-c0c0038a.system.entry.js.map → p-3e673113.system.entry.js.map} +0 -0
  568. /package/dist/pine-core/{p-f30b2078.system.entry.js.map → p-49a28a19.system.entry.js.map} +0 -0
  569. /package/dist/pine-core/{p-780136bd.entry.js.map → p-52e6f836.entry.js.map} +0 -0
  570. /package/dist/pine-core/{p-ccb0d9ee.entry.js.map → p-afdfadb0.entry.js.map} +0 -0
  571. /package/dist/pine-core/{p-36a8c980.system.entry.js.map → p-bec6d20b.system.entry.js.map} +0 -0
  572. /package/dist/pine-core/{p-caa88065.js.map → p-e4f30321.js.map} +0 -0
package/dist/esm/pds-accordion.entry.js CHANGED
@@ -1,7 +1,7 @@
1
- import { r as registerInstance, h, H as Host } from './index-5e54ea50.js';
2
- import { d as downSmall } from './index-9835dc94.js';
1
+ import { r as registerInstance, h, H as Host } from './index-6f0bb1b9.js';
2
+ import { d as downSmall } from './index-c6934caf.js';
3
3
 
4
- const pdsAccordionCss = ":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";
4
+ const pdsAccordionCss = ":host{display:block}details{--animation-transform-timing:200ms;--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-content-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-300);--color-text-default:var(--pine-color-charcoal-200);--color-text-active:var(--pine-color-charcoal-500);--color-text-hover:var(--pine-color-charcoal-300);--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-summary-padding-block:var(--pine-spacing-050);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);border-radius:var(--border-radius-default);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}@-webkit-keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}65%{opacity:0}to{opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}65%{opacity:0}to{opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-text-active);font:var(--typography-default)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-animation:slide-down var(--animation-transform-timing);animation:slide-down var(--animation-transform-timing);max-height:0;overflow:hidden}";
5
5
  const PdsAccordionStyle0 = pdsAccordionCss;
6
6
 
7
7
  const PdsAccordion = class {
package/dist/esm/pds-accordion.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"pds-accordion.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,s8FAAs8F,CAAC;AAC/9F,2BAAe,eAAe;;MCWjB,YAAY;;;QA+Bf,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SACnC,CAAA;QAEO,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;gBACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;aACvB;YACD,OAAO,EAAE,CAAC;SACX,CAAA;;sBAtBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QAEvB,IAAK,QAAQ,KAAK,IAAI,EAAG;YACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC3C;KACF;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAwB,KAC1F,kEACE,6DAAM,IAAI,EAAC,OAAO,cAAe,EACjC,iEAAU,IAAI,EAAG,SAAS,GAAK,CACvB,EACV,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,IAClH,8DAAQ,CACJ,CACE,CACL,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 1s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-accordion.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,kkHAAkkH,CAAC;AAC3lH,2BAAe,eAAe;;MCWjB,YAAY;;;QA+Bf,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SACnC,CAAA;QAEO,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;gBACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;aACvB;YACD,OAAO,EAAE,CAAC;SACX,CAAA;;sBAtBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QAEvB,IAAK,QAAQ,KAAK,IAAI,EAAG;YACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC3C;KACF;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAwB,KAC1F,kEACE,6DAAM,IAAI,EAAC,OAAO,cAAe,EACjC,iEAAU,IAAI,EAAG,SAAS,GAAK,CACvB,EACV,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,IAClH,8DAAQ,CACJ,CACE,CACL,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n\n --border-radius-default: var(--pine-border-radius-100);\n\n --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n --color-content-background-default: var(--pine-color-white);\n --color-background-hover: var(--pine-color-grey-300);\n --color-text-default: var(--pine-color-charcoal-200);\n --color-text-active: var(--pine-color-charcoal-500);\n --color-text-hover: var(--pine-color-charcoal-300);\n\n --spacing-details-padding-inline: var(--pine-spacing-150);\n --spacing-summary-padding-block: var(--pine-spacing-050);\n --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n border-radius: var(--border-radius-default);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n@keyframes slide-down {\n from {\n opacity: 0;\n transform: translateY(-100%)\n }\n\n 65% {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n transform: translateY(0%);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-text-active);\n font: var(--typography-default);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 1s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius-default);\n color: var(--color-text-default);\n font: var(--typography-default);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-text-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n animation: slide-down var(--animation-transform-timing);\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/pds-avatar.entry.js CHANGED
@@ -1,7 +1,7 @@
1
- import { r as registerInstance, h, H as Host } from './index-5e54ea50.js';
2
- import { c as checkCircleFilled, u as userFilled } from './index-9835dc94.js';
1
+ import { r as registerInstance, h, H as Host } from './index-6f0bb1b9.js';
2
+ import { c as checkCircleFilled, u as userFilled } from './index-c6934caf.js';
3
3
 
4
- const pdsAvatarCss = ":host{display:inline-block}div{--background-color:var(--pine-color-primary-100);--badge-background-color:var(--pine-color-base-white);--border:var(--pine-border-default);--radius-round:50%;-ms-flex-align:center;align-items:center;background-color:var(--background-color);border-radius:var(--admin-radius-round, var(--radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--admin-radius-round:12px;border-radius:var(--admin-radius-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--badge-background-color);border:var(--border);border-color:var(--badge-background-color);border-radius:var(--radius-round);bottom:0;position:absolute;right:0}img{border-radius:var(--admin-radius-round, var(--radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";
4
+ const pdsAvatarCss = ":host{display:inline-block}div{--color-background-container:var(--pine-color-blue-100);--color-background-badge:var(--pine-color-white);--color-border-badge:var(--pine-color-white);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-radius-round:var(--pine-border-radius-round);--border-radius-none:var(--pine-border-radius-0);--spacing-none:var(--pine-spacing-0);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--border-radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-spacing-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 2px var(--pine-color-primary-200);--border-radius-round:var(--pine-border-radius-round);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--border-radius-none);border-radius:var(--border-radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--spacing-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--color-background-badge);border:var(--border-default);border-color:var(--color-border-badge);border-radius:var(--border-radius-round);bottom:var(--spacing-none);position:absolute;right:var(--spacing-none)}img{border-radius:var(--border-radius-admin-round, var(--border-radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";
5
5
  const PdsAvatarStyle0 = pdsAvatarCss;
6
6
 
7
7
  const PdsAvatar = class {
package/dist/esm/pds-avatar.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"pds-avatar.entry.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,04CAA04C,CAAC;AACh6C,wBAAe,YAAY;;MCUd,SAAS;;;QAiEZ,uBAAkB,GAAG;YAC3B,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YAEF,QACE,WAAK,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,eAAe,IACpC,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,WAAW,EAAE,CACf,EACP;SACF,CAAC;QAEM,iBAAY,GAAG;YACrB,QACE,IAAI,CAAC,QAAQ;;oBAEX,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,IAC7C,IAAI,CAAC,kBAAkB,EAAE,CACnB;;oBAET,IAAI,CAAC,kBAAkB,EAAE,EAC5B;SACF,CAAC;QAEM,gBAAW,GAAG,OACpB,IAAI,CAAC,KAAK;;;;eAIL,gBAAU,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAC,QAAQ,GAAY,CAC5F,CAAC;QAEM,sBAAiB,GAAG,OAC1B,IAAI,CAAC,KAAK;cACN,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;;;;cAIvC,gBAAU,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,GAAY,CAChG,CAAC;QAEM,eAAU,GAAG,OACnB;YACE,YAAY,EAAE,IAAI;YAClB,CAAC,uBAAuB,GAAG,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YACnE,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBA5G4B,IAAI;qBAMjB,KAAK;;wBAWF,KAAK;qBAMO,IAAI;oBAYzB,IAAI;uBAM2C,UAAU;;IAE5D,UAAU;QAChB,MAAM,KAAK,GAA2B;YACpC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;KACF;IAqDD,MAAM;QAEJ,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,oBAAM,IAAI,CAAC,UAAU,EAAE,KAE3B,IAAI,CAAC,YAAY,EAAE,CACf,EACP;KACH;;;;;;","names":[],"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 --background-color: var(--pine-color-primary-100);\n --badge-background-color: var(--pine-color-base-white);\n --border: var(--pine-border-default);\n --radius-round: 50%;\n\n align-items: center;\n background-color: var(--background-color);\n border-radius: var(--admin-radius-round, var(--radius-round));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --admin-radius-round: 12px;\n border-radius: var(--admin-radius-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 --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--radius-round);\n cursor: pointer;\n display: flex;\n padding: 0;\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-avatar__badge {\n background-color: var(--badge-background-color);\n border: var(--border);\n border-color: var(--badge-background-color);\n border-radius: var(--radius-round);\n bottom: 0;\n position: absolute;\n right: 0;\n}\n\nimg {\n border-radius: var(--admin-radius-round, var(--radius-round));\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 styleUrl: '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\">\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 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-primary-400)\" 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"],"version":3}
1
+ {"file":"pds-avatar.entry.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,2zDAA2zD,CAAC;AACj1D,wBAAe,YAAY;;MCUd,SAAS;;;QAiEZ,uBAAkB,GAAG;YAC3B,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YAEF,QACE,WAAK,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,eAAe,IACpC,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,WAAW,EAAE,CACf,EACP;SACF,CAAC;QAEM,iBAAY,GAAG;YACrB,QACE,IAAI,CAAC,QAAQ;;oBAEX,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,IAC7C,IAAI,CAAC,kBAAkB,EAAE,CACnB;;oBAET,IAAI,CAAC,kBAAkB,EAAE,EAC5B;SACF,CAAC;QAEM,gBAAW,GAAG,OACpB,IAAI,CAAC,KAAK;;;;eAIL,gBAAU,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAC,QAAQ,GAAY,CAC5F,CAAC;QAEM,sBAAiB,GAAG,OAC1B,IAAI,CAAC,KAAK;cACN,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;;;;cAIvC,gBAAU,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,GAAY,CAChG,CAAC;QAEM,eAAU,GAAG,OACnB;YACE,YAAY,EAAE,IAAI;YAClB,CAAC,uBAAuB,GAAG,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YACnE,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBA5G4B,IAAI;qBAMjB,KAAK;;wBAWF,KAAK;qBAMO,IAAI;oBAYzB,IAAI;uBAM2C,UAAU;;IAE5D,UAAU;QAChB,MAAM,KAAK,GAA2B;YACpC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;KACF;IAqDD,MAAM;QAEJ,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,oBAAM,IAAI,CAAC,UAAU,EAAE,KAE3B,IAAI,CAAC,YAAY,EAAE,CACf,EACP;KACH;;;;;;","names":[],"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-blue-100);\n --color-background-badge: var(--pine-color-white);\n --color-border-badge: var(--pine-color-white);\n\n --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n --border-radius-round: var(--pine-border-radius-round);\n --border-radius-none: var(--pine-border-radius-0);\n\n --spacing-none: var(--pine-spacing-0);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-spacing-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 --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);\n --border-radius-round: var(--pine-border-radius-round);\n\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--border-radius-none);\n border-radius: var(--border-radius-round);\n cursor: pointer;\n display: flex;\n padding: var(--spacing-none);\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-avatar__badge {\n background-color: var(--color-background-badge);\n border: var(--border-default);\n border-color: var(--color-border-badge);\n border-radius: var(--border-radius-round);\n bottom: var(--spacing-none);\n position: absolute;\n right: var(--spacing-none);\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--border-radius-round));\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 styleUrl: '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\">\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 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-primary-400)\" 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"],"version":3}
package/dist/esm/pds-box.entry.js CHANGED
@@ -1,6 +1,6 @@
1
- import { r as registerInstance, h, H as Host } from './index-5e54ea50.js';
1
+ import { r as registerInstance, h, H as Host } from './index-6f0bb1b9.js';
2
2
 
3
- const pdsBoxCss = "pds-box{--box-background-color:inherit;--box-border-color:inherit;--box-min-height:none;--box-min-width:none;--box-gap-xxs:var(--pine-spacing-050);--box-gap-xs:var(--pine-spacing-100);--box-gap-sm:var(--pine-spacing-200);--box-gap-md:var(--pine-spacing-300);--box-gap-lg:var(--pine-spacing-450);--box-gap-xl:var(--pine-spacing-600);--box-gap-xxl:var(--pine-spacing-800);display:block}[class*=pds-box]{background-color:var(--box-background-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--box-min-height);min-width:var(--box-min-width)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-2xl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-2xl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-2xl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-2xl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-2xl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-box--auto{-ms-flex:0 0 var(--box-min-width, fit-content);flex:0 0 var(--box-min-width, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--box-border-color, var(--pine-border-default-color));border-style:var(--pine-border-default-style);border-width:var(--pine-border-default-width)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-border-radius-xs)}.pds-border-radius-sm{border-radius:var(--pine-border-radius-sm)}.pds-border-radius-md{border-radius:var(--pine-border-radius-md)}.pds-border-radius-lg{border-radius:var(--pine-border-radius-lg)}.pds-border-radius-circle{border-radius:50%}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-xs);box-shadow:var(--pine-box-shadow-xs)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-sm);box-shadow:var(--pine-box-shadow-sm)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-md);box-shadow:var(--pine-box-shadow-md)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-lg);box-shadow:var(--pine-box-shadow-lg)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--box-gap-xxs)}.pds-box-gap-xs{gap:var(--box-gap-xs)}.pds-box-gap-sm{gap:var(--box-gap-sm)}.pds-box-gap-md{gap:var(--box-gap-md)}.pds-box-gap-lg{gap:var(--box-gap-lg)}.pds-box-gap-xl{gap:var(--box-gap-xl)}.pds-box-gap-xxl{gap:var(--box-gap-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--box-gap-xxs)}.pds-padding-xs{padding:var(--box-gap-xxs)}.pds-padding-sm{padding:var(--box-gap-sm)}.pds-padding-md{padding:var(--box-gap-md)}.pds-padding-lg{padding:var(--box-gap-lg)}.pds-padding-xl{padding:var(--box-gap-xl)}.pds-padding-xxl{padding:var(--box-gap-2xl)}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";
3
+ const pdsBoxCss = "pds-box{--color-background-box:inherit;--color-border-box:inherit;--sizing-min-height-box:none;--sizing-min-width-box:none;--spacing-gap-xxs:var(--pine-spacing-050);--spacing-gap-xs:var(--pine-spacing-100);--spacing-gap-sm:var(--pine-spacing-200);--spacing-gap-md:var(--pine-spacing-300);--spacing-gap-lg:var(--pine-spacing-450);--spacing-gap-xl:var(--pine-spacing-600);--spacing-gap-xxl:var(--pine-spacing-800);display:block}[class*=pds-box]{background-color:var(--color-background-box);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--sizing-min-height-box);min-width:var(--sizing-min-width-box)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-xxl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-xxl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-xxl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-xxl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-xxl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-box--auto{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--color-border-box, var(--pine-color-grey-300));border-style:var(--pine-border-default-style);border-width:var(--pine-border-default-width)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-border-radius-xs)}.pds-border-radius-sm{border-radius:var(--pine-border-radius-sm)}.pds-border-radius-md{border-radius:var(--pine-border-radius-md)}.pds-border-radius-lg{border-radius:var(--pine-border-radius-lg)}.pds-border-radius-circle{border-radius:50%}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-xs);box-shadow:var(--pine-box-shadow-xs)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-sm);box-shadow:var(--pine-box-shadow-sm)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-md);box-shadow:var(--pine-box-shadow-md)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-lg);box-shadow:var(--pine-box-shadow-lg)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--spacing-gap-xxs)}.pds-box-gap-xs{gap:var(--spacing-gap-xs)}.pds-box-gap-sm{gap:var(--spacing-gap-sm)}.pds-box-gap-md{gap:var(--spacing-gap-md)}.pds-box-gap-lg{gap:var(--spacing-gap-lg)}.pds-box-gap-xl{gap:var(--spacing-gap-xl)}.pds-box-gap-xxl{gap:var(--spacing-gap-xxl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--spacing-gap-xxs)}.pds-padding-xs{padding:var(--spacing-gap-xxs)}.pds-padding-sm{padding:var(--spacing-gap-sm)}.pds-padding-md{padding:var(--spacing-gap-md)}.pds-padding-lg{padding:var(--spacing-gap-lg)}.pds-padding-xl{padding:var(--spacing-gap-xl)}.pds-padding-xxl{padding:var(--spacing-gap-xxl)}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";
4
4
  const PdsBoxStyle0 = pdsBoxCss;
5
5
 
6
6
  const PdsBox = class {
@@ -67,8 +67,8 @@ const PdsBox = class {
67
67
  this.sizeLg == undefined &&
68
68
  this.sizeXl == undefined ? 'pds-box' : ''}
69
69
  `;
70
- const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--box-background-color': this.backgroundColor })), (this.borderColor && { '--box-border-color': this.borderColor })), (this.minHeight && { '--box-min-height': this.minHeight })), (this.minWidth && { '--box-min-width': this.minWidth }));
71
- return (h(Host, { key: 'c04696c04b987f82aa03e23d41078ffa32ed6e78', class: boxClasses, style: boxInlineStyles }));
70
+ const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--color-background-box': this.backgroundColor })), (this.borderColor && { '--color-border-box': this.borderColor })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-height-box': this.minWidth }));
71
+ return (h(Host, { key: '5293f99d80187d4345c4e7120bb1dd53887b4065', class: boxClasses, style: boxInlineStyles }));
72
72
  }
73
73
  };
74
74
  PdsBox.style = PdsBoxStyle0;
package/dist/esm/pds-box.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"pds-box.entry.js","mappings":"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","names":[],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@import './pds-box.mixins';\n\npds-box {\n --box-background-color: inherit;\n --box-border-color: inherit;\n --box-min-height: none;\n --box-min-width: none;\n\n --box-gap-xxs: var(--pine-spacing-050);\n --box-gap-xs: var(--pine-spacing-100);\n --box-gap-sm: var(--pine-spacing-200);\n --box-gap-md: var(--pine-spacing-300);\n --box-gap-lg: var(--pine-spacing-450);\n --box-gap-xl: var(--pine-spacing-600);\n --box-gap-xxl: var(--pine-spacing-800);\n\n display: block;\n}\n\n[class*='pds-box'] {\n background-color: var(--box-background-color);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--box-min-height);;\n min-width: var(--box-min-width);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n 2xl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--box-min-width, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--box-border-color, var(--pine-border-default-color));\n border-style: var(--pine-border-default-style);\n border-width: var(--pine-border-default-width);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-border-radius-xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-border-radius-sm);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-border-radius-md);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-border-radius-lg);\n}\n\n.pds-border-radius-circle {\n border-radius: 50%;\n}\n\n// Box shadow helpers\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-xs);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-sm);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-md);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-lg);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--box-gap-xxs);\n}\n\n.pds-box-gap-xs {\n gap: var(--box-gap-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--box-gap-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--box-gap-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--box-gap-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--box-gap-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--box-gap-2xl);\n}\n\n// Spacing helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--box-gap-xxs);\n}\n\n.pds-padding-xs {\n padding: var(--box-gap-xxs);\n}\n\n.pds-padding-sm {\n padding: var(--box-gap-sm);\n}\n\n.pds-padding-md {\n padding: var(--box-gap-md);\n}\n\n.pds-padding-lg {\n padding: var(--box-gap-lg);\n}\n\n.pds-padding-xl {\n padding: var(--box-gap-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--box-gap-2xl);\n}\n\n// Display helpers\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /**\n * Defines the vertical alignment of the box items.\n * @defaultValue start\n */\n @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * If `true`, the box will be sized to fit its contents.\n */\n @Prop() auto?: boolean;\n\n /**\n * Defines the background-color of the box.\n */\n @Prop() backgroundColor?: string;\n\n /**\n * If `true`, the box will have a border.\n */\n @Prop() border? = false;\n\n /**\n * Defines the border color of the box.\n */\n @Prop() borderColor?: string;\n\n /**\n * Defines how rounded the box corners are.\n * @defaultValue none\n */\n @Prop() borderRadius?: `none` | `xs`| `sm` | `md` | `lg` | `circle`;\n \n /**\n * Defines the orientation of the box items.\n * @defaultValue row\n */\n @Prop() direction?: `row` | `column`;\n\n /**\n * Defines the display style of the box.\n * @defaultValue flex\n */\n @Prop() display?: `flex` | `inline-flex` | `block` | `inline-block`;\n\n /**\n * If `true`, sets the box `max-width` to `100%`.\n */\n @Prop() fit?: boolean;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() gap?: BoxTShirtSizeType;\n\n /**\n * Defines how a box will grow or shrink to fit the space available in its container.\n * @defaultValue none\n */\n @Prop() flex?: `none` | `grow` | `shrink`;\n\n /**\n * Defines the horizontal alignment of the box items.\n * @defaultValue start\n */\n @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n /**\n * The minimum height of the row. Used in conjunction with alignment props\n */\n @Prop() minHeight?: string;\n\n /**\n * The minimum width of the row. Used in conjunction with alignment props\n */\n @Prop() minWidth?: string;\n \n /**\n * Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offset?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetXs?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetSm?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetMd?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetLg?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetXl?: BoxColumnType;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() padding?: BoxTShirtSizeType;\n\n /**\n * Defines the box shadow.\n * @defaultValue none\n */\n @Prop() shadow?: BoxTShirtSizeType;\n\n /**\n * Size of the column for all screen sizes that are not explicitly set.\n */\n @Prop() size?: BoxColumnType;\n\n /**\n * At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXs?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeSm?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeMd?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeLg?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n const boxInlineStyles = {\n ...(this.backgroundColor && { '--box-background-color': this.backgroundColor }),\n ...(this.borderColor && { '--box-border-color': this.borderColor }),\n ...(this.minHeight && { '--box-min-height': this.minHeight }),\n ...(this.minWidth && { '--box-min-width': this.minWidth }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-box.entry.js","mappings":"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","names":[],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@import './pds-box.mixins';\n\npds-box {\n --color-background-box: inherit;\n --color-border-box: inherit;\n --sizing-min-height-box: none;\n --sizing-min-width-box: none;\n\n --spacing-gap-xxs: var(--pine-spacing-050);\n --spacing-gap-xs: var(--pine-spacing-100);\n --spacing-gap-sm: var(--pine-spacing-200);\n --spacing-gap-md: var(--pine-spacing-300);\n --spacing-gap-lg: var(--pine-spacing-450);\n --spacing-gap-xl: var(--pine-spacing-600);\n --spacing-gap-xxl: var(--pine-spacing-800);\n\n display: block;\n}\n\n[class*='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--sizing-min-height-box);\n min-width: var(--sizing-min-width-box);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: var(--pine-border-default-style);\n border-width: var(--pine-border-default-width);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-border-radius-xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-border-radius-sm);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-border-radius-md);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-border-radius-lg);\n}\n\n.pds-border-radius-circle {\n border-radius: 50%;\n}\n\n// Box shadow helpers\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-xs);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-sm);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-md);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-lg);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--spacing-gap-xxs);\n}\n\n.pds-box-gap-xs {\n gap: var(--spacing-gap-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--spacing-gap-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--spacing-gap-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--spacing-gap-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--spacing-gap-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--spacing-gap-xxl);\n}\n\n// Spacing helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--spacing-gap-xxs);\n}\n\n.pds-padding-xs {\n padding: var(--spacing-gap-xxs);\n}\n\n.pds-padding-sm {\n padding: var(--spacing-gap-sm);\n}\n\n.pds-padding-md {\n padding: var(--spacing-gap-md);\n}\n\n.pds-padding-lg {\n padding: var(--spacing-gap-lg);\n}\n\n.pds-padding-xl {\n padding: var(--spacing-gap-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--spacing-gap-xxl);\n}\n\n// Display helpers\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /**\n * Defines the vertical alignment of the box items.\n * @defaultValue start\n */\n @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * If `true`, the box will be sized to fit its contents.\n */\n @Prop() auto?: boolean;\n\n /**\n * Defines the background-color of the box.\n */\n @Prop() backgroundColor?: string;\n\n /**\n * If `true`, the box will have a border.\n */\n @Prop() border? = false;\n\n /**\n * Defines the border color of the box.\n */\n @Prop() borderColor?: string;\n\n /**\n * Defines how rounded the box corners are.\n * @defaultValue none\n */\n @Prop() borderRadius?: `none` | `xs`| `sm` | `md` | `lg` | `circle`;\n\n /**\n * Defines the orientation of the box items.\n * @defaultValue row\n */\n @Prop() direction?: `row` | `column`;\n\n /**\n * Defines the display style of the box.\n * @defaultValue flex\n */\n @Prop() display?: `flex` | `inline-flex` | `block` | `inline-block`;\n\n /**\n * If `true`, sets the box `max-width` to `100%`.\n */\n @Prop() fit?: boolean;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() gap?: BoxTShirtSizeType;\n\n /**\n * Defines how a box will grow or shrink to fit the space available in its container.\n * @defaultValue none\n */\n @Prop() flex?: `none` | `grow` | `shrink`;\n\n /**\n * Defines the horizontal alignment of the box items.\n * @defaultValue start\n */\n @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n /**\n * The minimum height of the row. Used in conjunction with alignment props\n */\n @Prop() minHeight?: string;\n\n /**\n * The minimum width of the row. Used in conjunction with alignment props\n */\n @Prop() minWidth?: string;\n\n /**\n * Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offset?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetXs?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetSm?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetMd?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetLg?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetXl?: BoxColumnType;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() padding?: BoxTShirtSizeType;\n\n /**\n * Defines the box shadow.\n * @defaultValue none\n */\n @Prop() shadow?: BoxTShirtSizeType;\n\n /**\n * Size of the column for all screen sizes that are not explicitly set.\n */\n @Prop() size?: BoxColumnType;\n\n /**\n * At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXs?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeSm?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeMd?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeLg?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n const boxInlineStyles = {\n ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n ...(this.borderColor && { '--color-border-box': this.borderColor }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-height-box': this.minWidth }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/pds-button.entry.js CHANGED
@@ -1,10 +1,11 @@
1
- import { r as registerInstance, h, H as Host, g as getElement } from './index-5e54ea50.js';
1
+ import { r as registerInstance, h, H as Host, g as getElement } from './index-6f0bb1b9.js';
2
+ import { b as caretDown } from './index-c6934caf.js';
2
3
 
3
4
  const hasShadowDom = (el) => {
4
5
  return !!el.shadowRoot && !!el.attachShadow;
5
6
  };
6
7
 
7
- const pdsButtonCss = ":host{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-disabled:transparent;--background-color-primary:var(--pine-color-neutral-charcoal-400);--background-color-hover-primary:var(--pine-color-neutral-charcoal-500);--background-color-disabled-primary:var(--pine-color-neutral-grey-300);--color-primary:var(--pine-color-base-white);--color-disabled-primary:var(--pine-color-neutral-charcoal-100);--outline-color-primary:var(--pine-color-primary-200);--border-color-secondary:var(--pine-color-neutral-grey-400);--border-color-hover-secondary:var(--pine-color-neutral-grey-500);--border-color-focus-secondary:var(--pine-color-neutral-grey-300);--border-color-disabled-secondary:var(--pine-color-neutral-grey-300);--color-secondary:var(--pine-color-neutral-charcoal-400);--color-disabled-secondary:var(--pine-color-neutral-charcoal-100);--outline-color-secondary:var(--pine-color-primary-200);--background-color-accent:var(--pine-color-primary-300);--background-color-hover-accent:var(--pine-color-primary-400);--background-color-disabled-accent:var(--pine-color-primary-100);--color-accent:var(--pine-color-base-white);--color-disabled-accent:var(--pine-color-primary-200);--outline-color-accent:var(--pine-color-primary-200);--background-color-destructive:var(--pine-color-red-300);--background-color-hover-destructive:var(--pine-color-red-400);--background-color-disabled-destructive:var(--pine-color-red-100);--color-destructive:var(--pine-color-base-white);--color-disabled-destructive:var(--pine-color-red-200);--outline-color-destructive:var(--pine-color-red-200);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:10px;color:var(--color);display:-ms-flexbox;display:flex;font-family:inherit;font-size:1rem;font-weight:500;min-height:40px;padding:0.5rem 1rem}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.pds-button:hover{background-color:var(--background-color-hover);border-color:var(--border-color-hover)}.pds-button:focus{border-color:var(--border-color-focus);outline:4px solid var(--outline-color)}.pds-button:disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled);color:var(--color-disabled)}.pds-button--primary{--background-color:var(--background-color-primary);--background-color-hover:var(--background-color-hover-primary);--background-color-disabled:var(--background-color-disabled-primary);--color:var(--color-primary);--color-disabled:var(--color-disabled-primary);--outline-color:var(--outline-color-primary)}.pds-button--accent{--background-color:var(--background-color-accent);--background-color-hover:var(--background-color-hover-accent);--background-color-disabled:var(--background-color-disabled-accent);--color:var(--color-accent);--color-disabled:var(--color-disabled-accent);--outline-color:var(--outline-color-accent)}.pds-button--destructive{--background-color:var(--background-color-destructive);--background-color-hover:var(--background-color-hover-destructive);--background-color-disabled:var(--background-color-disabled-destructive);--color:var(--color-destructive);--color-disabled:var(--color-disabled-destructive);--outline-color:var(--outline-color-destructive)}.pds-button--secondary,.pds-button--disclosure{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--border-color-disabled:var(--border-color-disabled-secondary);--border-color-focus:var(--border-color-focus-secondary);--border-color-hover:var(--border-color-hover-secondary);--border-color:var(--border-color-secondary);--color:var(--color-secondary);--color-disabled:var(--color-disabled-secondary);--outline-color:var(--outline-color-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.pds-button--unstyled{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--color:inherit;border:0;margin:0;min-height:auto;padding:0;width:inherit}";
8
+ const pdsButtonCss = ":host{--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-background-action-primary-default);--color-background-primary-disabled:var(--pine-color-background-action-primary-disabled);--color-background-primary-hover:var(--pine-color-background-action-primary-hover);--color-text-primary-default:var(--pine-color-text-action-primary-default);--color-text-primary-disabled:var(--pine-color-text-action-primary-disabled);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-text-body-default);--color-text-secondary-disabled:var(--pine-color-text-action-primary-disabled);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-background-action-accent-default);--color-background-accent-disabled:var(--pine-color-background-action-accent-disabled);--color-background-accent-hover:var(--pine-color-background-action-accent-hover);--color-text-accent-default:var(--pine-color-text-action-accent-default);--color-text-accent-disabled:var(--pine-color-text-action-accent-disabled);--color-outline-accent:var(--pine-color-blue-200);--color-background-destructive-default:var(--pine-color-background-action-destructive-default);--color-background-destructive-disabled:var(--pine-color-background-action-destructive-disabled);--color-background-destructive-hover:var(--pine-color-background-action-destructive-hover);--color-text-destructive-default:var(--pine-color-text-action-destructive-default);--color-text-destructive-disabled:var(--pine-color-text-action-destructive-disabled);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-body-med);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 2px var(--pine-color-primary-200);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";
8
9
  const PdsButtonStyle0 = pdsButtonCss;
9
10
 
10
11
  const PdsButton = class {
@@ -43,7 +44,7 @@ const PdsButton = class {
43
44
  return classNames.join(' ');
44
45
  }
45
46
  render() {
46
- return (h(Host, { key: '0f8f16b8e8d941481d66f1833a4a7e5402aab2bc', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'c8b0a1f8b0f6c984477e2bb6cdb77226f8250ac3', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { name: this.icon, part: "icon" }), h("slot", { key: '76310f327aad59ecd150261a186e256c52cf6251' }), this.variant === 'disclosure' && h("pds-icon", { name: "caret-down", part: "caret" }))));
47
+ return (h(Host, { key: '453a94093ba7bb8aa0fdea470cd9008e96601dcf', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'ec841dfb0b026d1c3376f686f6d9187cdecb1762', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { key: '926395c361f5b94f9c4d12980c4a93a52bf79c41', name: this.icon, part: "icon" }), h("slot", { key: '4a74b8b6cd711fee67622c92b515cf329964da64' }), this.variant === 'disclosure' && h("pds-icon", { key: 'e2d356d80d03c3d8a8fc1259528e13a1c88e1307', icon: caretDown, part: "caret" }))));
47
48
  }
48
49
  get el() { return getElement(this); }
49
50
  };
package/dist/esm/pds-button.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"pds-button.entry.js","mappings":";;AAIO,MAAM,YAAY,GAAG,CAAC,EAAe;IAC1C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC;;ACND,MAAM,YAAY,GAAG,ypIAAypI,CAAC;AAC/qI,wBAAe,YAAY;;MCad,SAAS;;;QAwCZ,gBAAW,GAAG,CAAC,EAAS;YAC9B,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE;;gBAEzB,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE;wBACR,EAAE,CAAC,cAAc,EAAE,CAAA;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;wBACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;wBAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;wBACjC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;wBAC5B,UAAU,CAAC,KAAK,EAAE,CAAA;wBAClB,UAAU,CAAC,MAAM,EAAE,CAAA;qBACpB;iBACF;aACF;SACF,CAAA;;wBA7CmB,KAAK;oBAKD,IAAI;;;oBAgBmB,QAAQ;uBAK2C,SAAS;;IAqBnG,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,+DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAY,EACjG,8DAAQ,EACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,gBAAU,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAY,CAC/E,CACJ,EACP;KACH;;;;;;;","names":[],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: transparent;\n --border-color-disabled: transparent;\n\n // primary\n --background-color-primary: var(--pine-color-neutral-charcoal-400);\n --background-color-hover-primary: var(--pine-color-neutral-charcoal-500);\n --background-color-disabled-primary: var(--pine-color-neutral-grey-300);\n --color-primary: var(--pine-color-base-white);\n --color-disabled-primary: var(--pine-color-neutral-charcoal-100);\n --outline-color-primary: var(--pine-color-primary-200);\n\n // secondary\n --border-color-secondary: var(--pine-color-neutral-grey-400);\n --border-color-hover-secondary: var(--pine-color-neutral-grey-500);\n --border-color-focus-secondary: var(--pine-color-neutral-grey-300);\n --border-color-disabled-secondary: var(--pine-color-neutral-grey-300);\n --color-secondary: var(--pine-color-neutral-charcoal-400);\n --color-disabled-secondary: var(--pine-color-neutral-charcoal-100);\n --outline-color-secondary: var(--pine-color-primary-200);\n\n // accent\n --background-color-accent: var(--pine-color-primary-300);\n --background-color-hover-accent: var(--pine-color-primary-400);\n --background-color-disabled-accent: var(--pine-color-primary-100);\n --color-accent: var(--pine-color-base-white);\n --color-disabled-accent: var(--pine-color-primary-200);\n --outline-color-accent: var(--pine-color-primary-200);\n\n // destructive\n --background-color-destructive: var(--pine-color-red-300);\n --background-color-hover-destructive: var(--pine-color-red-400);\n --background-color-disabled-destructive: var(--pine-color-red-100);\n --color-destructive: var(--pine-color-base-white);\n --color-disabled-destructive: var(--pine-color-red-200);\n --outline-color-destructive: var(--pine-color-red-200);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--background-color);\n border: 1px solid var(--border-color);\n border-radius: 10px;\n color: var(--color);\n display: flex;\n font-family: inherit;\n font-size: 1rem;\n font-weight: 500;\n min-height: 40px;\n padding: 0.5rem 1rem;\n\n pds-icon {\n fill: currentColor;\n margin-inline-end: 0.5rem;\n }\n\n &:hover {\n background-color: var(--background-color-hover);\n border-color: var(--border-color-hover);\n }\n\n &:focus {\n border-color: var(--border-color-focus);\n outline: 4px solid var(--outline-color);\n }\n\n &:disabled {\n background-color: var(--background-color-disabled);\n border-color: var(--border-color-disabled);\n color: var(--color-disabled);\n }\n}\n\n.pds-button--primary {\n --background-color: var(--background-color-primary);\n --background-color-hover: var(--background-color-hover-primary);\n --background-color-disabled: var(--background-color-disabled-primary);\n --color: var(--color-primary);\n --color-disabled: var(--color-disabled-primary);\n --outline-color: var(--outline-color-primary);\n}\n\n.pds-button--accent {\n --background-color: var(--background-color-accent);\n --background-color-hover: var(--background-color-hover-accent);\n --background-color-disabled: var(--background-color-disabled-accent);\n --color: var(--color-accent);\n --color-disabled: var(--color-disabled-accent);\n --outline-color: var(--outline-color-accent);\n}\n\n.pds-button--destructive {\n --background-color: var(--background-color-destructive);\n --background-color-hover: var(--background-color-hover-destructive);\n --background-color-disabled: var(--background-color-disabled-destructive);\n --color: var(--color-destructive);\n --color-disabled: var(--color-disabled-destructive);\n --outline-color: var(--outline-color-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --background-color: transparent;\n --background-color-hover: transparent;\n --background-color-disabled: transparent;\n --border-color-disabled: var(--border-color-disabled-secondary);\n --border-color-focus: var(--border-color-focus-secondary);\n --border-color-hover: var(--border-color-hover-secondary);\n --border-color: var(--border-color-secondary);\n --color: var(--color-secondary);\n --color-disabled: var(--color-disabled-secondary);\n --outline-color: var(--outline-color-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: 0;\n margin-inline-start: 0.5rem;\n }\n}\n\n.pds-button--unstyled {\n --background-color: transparent;\n --background-color-hover: transparent;\n --background-color-disabled: transparent;\n --color: inherit;\n border: 0;\n margin: 0;\n min-height: auto;\n padding: 0;\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrl: '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 * Toggles disabled state of button\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Displays icon before text when icon string matches an icon name\n */\n @Prop() icon?: string = null;\n\n /**\n * Provides button with a submittable name\n */\n @Prop() name?: string;\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Provides button with a type\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\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 }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\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 <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon name=\"caret-down\" part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-button.entry.js","mappings":";;;AAIO,MAAM,YAAY,GAAG,CAAC,EAAe;IAC1C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC;;ACND,MAAM,YAAY,GAAG,yuLAAyuL,CAAC;AAC/vL,wBAAe,YAAY;;MCed,SAAS;;;QAwCZ,gBAAW,GAAG,CAAC,EAAS;YAC9B,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE;;gBAEzB,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE;wBACR,EAAE,CAAC,cAAc,EAAE,CAAA;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;wBACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;wBAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;wBACjC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;wBAC5B,UAAU,CAAC,KAAK,EAAE,CAAA;wBAClB,UAAU,CAAC,MAAM,EAAE,CAAA;qBACpB;iBACF;aACF;SACF,CAAA;;wBA7CmB,KAAK;oBAKD,IAAI;;;oBAgBmB,QAAQ;uBAK2C,SAAS;;IAqBnG,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,+DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAY,EACjG,8DAAQ,EACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,GAAY,CAC9E,CACJ,EACP;KACH;;;;;;;","names":[],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n --border-width-default: var(--pine-border-width-thin);\n --border-width-unstyled: var(--pine-border-radius-0);\n\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n\n // primary\n --color-background-primary-default: var(--pine-color-background-action-primary-default);\n --color-background-primary-disabled: var(--pine-color-background-action-primary-disabled);\n --color-background-primary-hover: var(--pine-color-background-action-primary-hover);\n --color-text-primary-default: var(--pine-color-text-action-primary-default);\n --color-text-primary-disabled: var(--pine-color-text-action-primary-disabled);\n --color-outline-primary: var(--pine-color-blue-200);\n\n // secondary\n --color-border-secondary-default: var(--pine-color-grey-400);\n --color-border-secondary-disabled: var(--pine-color-grey-300);\n --color-border-secondary-focus: var(--pine-color-grey-300);\n --color-border-secondary-hover: var(--pine-color-grey-500);\n --color-text-secondary-default: var(--pine-color-text-body-default);\n --color-text-secondary-disabled: var(--pine-color-text-action-primary-disabled);\n --color-outline-secondary: var(--pine-color-blue-200);\n\n // accent\n --color-background-accent-default: var(--pine-color-background-action-accent-default);\n --color-background-accent-disabled: var(--pine-color-background-action-accent-disabled);\n --color-background-accent-hover: var(--pine-color-background-action-accent-hover);\n --color-text-accent-default: var(--pine-color-text-action-accent-default);\n --color-text-accent-disabled: var(--pine-color-text-action-accent-disabled);\n --color-outline-accent: var(--pine-color-blue-200);\n\n // destructive\n --color-background-destructive-default: var(--pine-color-background-action-destructive-default);\n --color-background-destructive-disabled: var(--pine-color-background-action-destructive-disabled);\n --color-background-destructive-hover: var(--pine-color-background-action-destructive-hover);\n --color-text-destructive-default: var(--pine-color-text-action-destructive-default);\n --color-text-destructive-disabled: var(--pine-color-text-action-destructive-disabled);\n --color-outline-destructive: var(--pine-color-red-200);\n\n --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-100);\n --spacing-padding-inline: var(--pine-spacing-200);\n --spacing-unstyled: var(--pine-spacing-0);\n\n --typography-default: var(--pine-body-med);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--border-width-default) solid var(--color-border-default);\n border-radius: var(--pine-border-radius-125);\n color: var(--color-text-default);\n display: flex;\n font: var(--typography-default);\n min-height: 40px;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n pds-icon {\n fill: currentColor;\n margin-inline-end: var(--spacing-icon-margin-inline-end);\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);\n border-color: var(--color-border-focus);\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\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 }\n}\n\n.pds-button--primary {\n --color-background-default: var(--color-background-primary-default);\n --color-background-hover: var(--color-background-primary-hover);\n --color-background-disabled: var(--color-background-primary-disabled);\n --color-text-default: var(--color-text-primary-default);\n --color-text-disabled: var(--color-text-primary-disabled);\n --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--color-background-accent-default);\n --color-background-hover: var(--color-background-accent-hover);\n --color-background-disabled: var(--color-background-accent-disabled);\n --color-text-default: var(--color-text-accent-default);\n --color-text-disabled: var(--color-text-accent-disabled);\n --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--color-background-destructive-default);\n --color-background-hover: var(--color-background-destructive-hover);\n --color-background-disabled: var(--color-background-destructive-disabled);\n --color-text-default: var(--color-text-destructive-default);\n --color-text-disabled: var(--color-text-destructive-disabled);\n --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-border-disabled: var(--color-border-secondary-disabled);\n --color-border-focus: var(--color-border-secondary-focus);\n --color-border-hover: var(--color-border-secondary-hover);\n --color-border-default: var(--color-border-secondary-default);\n --color-text-default: var(--color-text-secondary-default);\n --color-text-disabled: var(--color-text-secondary-disabled);\n --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n margin-inline-start: var(--spacing-disclosure-margin-inline-start);\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: inherit;\n border: var(--border-width-unstyled);\n margin: var(--spacing-unstyled);\n min-height: auto;\n padding: var(--spacing-unstyled);\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrl: '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 * Toggles disabled state of button\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Displays icon before text when icon string matches an icon name\n */\n @Prop() icon?: string = null;\n\n /**\n * Provides button with a submittable name\n */\n @Prop() name?: string;\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Provides button with a type\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\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 }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\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 <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/pds-checkbox_2.entry.js CHANGED
@@ -1,7 +1,7 @@
1
- import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5e54ea50.js';
2
- import { m as messageId, P as PdsLabel, a as assignDescription } from './pds-label-39814469.js';
1
+ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6f0bb1b9.js';
2
+ import { m as messageId, P as PdsLabel, a as assignDescription } from './pds-label-d7e11551.js';
3
3
 
4
- const pdsCheckboxCss = ":host{--background-color:var(--pine-color-base-white);--background-color-disabled:var(--pine-color-neutral-grey-200);--background-color-hover:var(--pine-color-neutral-grey-100);--border:var(--pine-border-interactive);--border-color-disabled:var(--pine-color-neutral-charcoal-100);--border-color-hover:var(--pine-border-interactive-hover-color);--border-color-icon:var(--pine-color-base-white);--border-radius:var(--pine-border-radius-xs);--color-checked:var(--pine-color-neutral-charcoal-500);--color-disabled:var(--pine-color-neutral-grey-300);--color-focus:var(--pine-color-primary-200);--color-invalid-focus:var(--pine-color-red-200);--color-invalid:var(--pine-color-red-300);--message-color-disabled:var(--pine-color-neutral-grey-500);--message-color:var(--pine-color-neutral-charcoal-200);--input-size:16px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--color-invalid)}:host(.is-invalid) input:checked{background:var(--color-invalid)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-invalid-focus);box-shadow:0 0 0 4px var(--color-invalid-focus);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input:checked::after{border-bottom:0;-webkit-transform:rotate(87deg) translate3d(-114%, 25%, 0);transform:rotate(87deg) translate3d(-114%, 25%, 0)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-color);border:var(--border);border-radius:var(--border-radius);height:var(--input-size);margin:0;position:relative;width:var(--input-size)}input:hover{background:var(--background-color-hover);border-color:var(--border-color-hover)}input:checked{background:var(--color-checked);border-color:var(--color-checked)}input:checked::after{border:1px solid var(--border-color-icon);border-left:0;border-top:0;content:\"\";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--background-color-disabled);border-color:var(--color-disabled);cursor:not-allowed}input:disabled:checked{background:var(--color-disabled);border-color:var(--color-disabled)}input:disabled:checked::after{border-color:var(--border-color-disabled)}input:disabled+label{color:var(--border-color-hover);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--message-color-disabled)}input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-focus);box-shadow:0 0 0 4px var(--color-focus);outline:none}label{-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--message-color);font-size:14px;-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
4
+ const pdsCheckboxCss = ":host{--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-color-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-500);--border-radius:var(--pine-border-radius-050);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--box-shadow-focus-invalid:0 0 0 2px var(--pine-color-red-200);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-background-hover:var(--pine-color-grey-100);--color-border-disabled:var(--pine-color-charcoal-100);--color-border-icon:var(--pine-color-white);--color-checked:var(--pine-color-charcoal-500);--color-disabled:var(--pine-color-grey-300);--color-invalid:var(--pine-color-red-300);--color-text-disabled:var(--pine-color-grey-500);--color-text-message:var(--pine-color-charcoal-200);--sizing-input:var(--pine-font-size-100);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--color-invalid)}:host(.is-invalid) input:checked{background:var(--color-invalid)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-invalid);box-shadow:var(--box-shadow-focus-invalid);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input:checked::after{border-bottom:0;-webkit-transform:rotate(87deg) translate3d(-114%, 25%, 0);transform:rotate(87deg) translate3d(-114%, 25%, 0)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-background);border:var(--border-default);border-radius:var(--border-radius);height:var(--sizing-input);margin:0;position:relative;width:var(--sizing-input)}input:hover{background:var(--color-background-hover);border:var(--border-color-interactive-hover)}input:checked{background:var(--color-checked);border-color:var(--color-checked)}input:checked::after{border:1px solid var(--color-border-icon);border-left:0;border-top:0;content:\"\";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--color-background-disabled);border-color:var(--color-disabled);cursor:not-allowed}input:disabled:checked{background:var(--color-disabled);border-color:var(--color-disabled)}input:disabled:checked::after{border-color:var(--color-border-disabled)}input:disabled+label{color:var(--color-text-disabled);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--color-text-disabled)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label{-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--color-text-message);font-size:14px;-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
5
5
  const PdsCheckboxStyle0 = pdsCheckboxCss;
6
6
 
7
7
  const PdsCheckbox = class {
@@ -46,14 +46,14 @@ const PdsCheckbox = class {
46
46
  return classNames.join(' ');
47
47
  }
48
48
  render() {
49
- return (h(Host, { key: 'df4d541eb43253bac6d9f0396d5af5c0a0181db0', class: this.classNames() }, h("input", { key: '59f4ff764cdf4fac9ff38a734b91cf31219f2a59', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), h(PdsLabel, { key: '99da91ab0d67c72f29092a623164b0822ff56a66', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
50
- h("div", { class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
51
- h("div", { class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
49
+ return (h(Host, { key: '6353e355fefe987180b1cb5b00af00e92c8f0c44', class: this.classNames() }, h("input", { key: '16f720ba2c5cad01f8d29456e3ecbc8e4cbb1ce8', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), h(PdsLabel, { key: '8de98b79b9390c392a2bf41173ac97e4e2f4d5e2', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
50
+ h("div", { key: '02f61d5598e4da36f3c87cbb23863d0a485e3542', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
51
+ h("div", { key: '4628f5df5aeeda30f53c327abf62d1125d3eb441', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
52
52
  }
53
53
  };
54
54
  PdsCheckbox.style = PdsCheckboxStyle0;
55
55
 
56
- const pdsTableCellCss = ":host{--background-fixed:var(--pine-color-base-white);--box-shadow:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color:var(--pine-color-neutral-charcoal-200);--fixed-column-index:0;--font-size:var(--pine-font-size-body-sm);--line-height:var(--pine-line-height-sm);--padding:calc(var(--pine-spacing-md) / 2);--padding-compact:var(--pine-spacing-xxs);--fixed-cell-position:0;--max-width-truncated:100px;color:var(--color);display:table-cell;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding);vertical-align:inherit}:host(.is-compact){padding-block:var(--padding-compact)}:host(.is-fixed){background:var(--background-fixed);left:var(--fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(.is-truncated){max-width:var(--max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
56
+ const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-087);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
57
57
  const PdsTableCellStyle0 = pdsTableCellCss;
58
58
 
59
59
  const PdsTableCell = class {
@@ -92,11 +92,11 @@ const PdsTableCell = class {
92
92
  return classNames.join(' ');
93
93
  }
94
94
  render() {
95
- return (h(Host, { key: '71ff527047eaafcf9b9c57a6aa96634e4a887f0b', class: this.classNames(), role: "gridcell", style: this.tableRef &&
95
+ return (h(Host, { key: '7c7f228b3911eec633c6ffd817f22fbc6666be8a', class: this.classNames(), role: "gridcell", style: this.tableRef &&
96
96
  this.tableRef.fixedColumn &&
97
97
  this.tableRef.selectable
98
98
  ? { '--fixed-cell-position': '40px' }
99
- : {} }, h("slot", { key: 'b62c595da7fbf8795e90c67c3d50b9f5e7449067' })));
99
+ : {} }, h("slot", { key: '37c43f300478beffc41d2450bbb5a6e13099f58e' })));
100
100
  }
101
101
  get hostElement() { return getElement(this); }
102
102
  };
package/dist/esm/pds-checkbox_2.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"pds-checkbox.pds-table-cell.entry.js","mappings":"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","names":[],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n --background-color: var(--pine-color-base-white);\n --background-color-disabled: var(--pine-color-neutral-grey-200);\n --background-color-hover: var(--pine-color-neutral-grey-100);\n --border: var(--pine-border-interactive);\n --border-color-disabled: var(--pine-color-neutral-charcoal-100);\n --border-color-hover: var(--pine-border-interactive-hover-color);\n --border-color-icon: var(--pine-color-base-white);\n --border-radius: var(--pine-border-radius-xs);\n --color-checked: var(--pine-color-neutral-charcoal-500);\n --color-disabled: var(--pine-color-neutral-grey-300);\n --color-focus: var(--pine-color-primary-200);\n --color-invalid-focus: var(--pine-color-red-200);\n --color-invalid: var(--pine-color-red-300);\n --message-color-disabled: var(--pine-color-neutral-grey-500);\n --message-color: var(--pine-color-neutral-charcoal-200);\n --input-size: 16px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--color-invalid);\n\n &:checked {\n background: var(--color-invalid);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 4px var(--color-invalid-focus);\n outline: none;\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--color-invalid);\n }\n}\n\n:host(.is-indeterminate) {\n input:checked {\n &::after {\n border-bottom: 0;\n transform: rotate(87deg) translate3d(-114%, 25%, 0);\n }\n }\n}\n\ninput {\n appearance: none;\n background-color: var(--background-color);\n border: var(--border);\n border-radius: var(--border-radius);\n height: var(--input-size);\n margin: 0;\n position: relative;\n width: var(--input-size);\n\n &:hover {\n background: var(--background-color-hover);\n border-color: var(--border-color-hover);\n }\n\n &:checked {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n border: 1px solid var(--border-color-icon);\n border-left: 0;\n border-top: 0;\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(--background-color-disabled);\n border-color: var(--color-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--color-disabled);\n border-color: var(--color-disabled);\n\n &::after {\n border-color: var(--border-color-disabled);\n }\n }\n\n + label {\n color: var(--border-color-hover);\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--message-color-disabled);\n }\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 4px var(--color-focus);\n outline: none;\n }\n}\n\nlabel {\n margin-inline-start: 10px;\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(--message-color);\n font-size: 14px;\n margin-block-start: 6px;\n margin-inline-start: 26px;\n width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrl: 'pds-checkbox.scss',\n shadow: true,\n})\nexport class PdsCheckbox {\n /**\n * It determines whether or not the checkbox is checked.\n */\n @Prop() checked: boolean;\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() 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() labelHidden: 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 * Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\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.pdsCheckboxChange.emit({\n checked: target.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 render() {\n return (\n <Host class={this.classNames()}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"checkbox\"\n id={this.componentId}\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 />\n <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\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 {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n",":host {\n --background-fixed: var(--pine-color-base-white);\n --box-shadow: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n --color: var(--pine-color-neutral-charcoal-200);\n --fixed-column-index: 0;\n --font-size: var(--pine-font-size-body-sm);\n --line-height: var(--pine-line-height-sm);\n --padding: calc(var(--pine-spacing-md) / 2);\n --padding-compact: var(--pine-spacing-xxs);\n --fixed-cell-position: 0;\n --max-width-truncated: 100px;\n\n color: var(--color);\n display: table-cell;\n font-size: var(--font-size);\n line-height: var(--line-height);\n padding: var(--padding);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--background-fixed);\n left: var(--fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow);\n}\n\n:host(.is-truncated) {\n max-width: var(--max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrl: 'pds-table-cell.scss',\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n tableRef: HTMLPdsTableElement;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n this.tableRef.addEventListener('scroll', this.handleScroll);\n }\n }\n\n /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-checkbox.pds-table-cell.entry.js","mappings":"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","names":[],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n --border-color-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-500);\n --border-radius: var(--pine-border-radius-050);\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n --box-shadow-focus-invalid: 0 0 0 2px var(--pine-color-red-200);\n --color-background: var(--pine-color-white);\n --color-background-disabled: var(--pine-color-grey-200);\n --color-background-hover: var(--pine-color-grey-100);\n --color-border-disabled: var(--pine-color-charcoal-100);\n --color-border-icon: var(--pine-color-white);\n --color-checked: var(--pine-color-charcoal-500);\n --color-disabled: var(--pine-color-grey-300);\n --color-invalid: var(--pine-color-red-300);\n --color-text-disabled: var(--pine-color-grey-500);\n --color-text-message: var(--pine-color-charcoal-200);\n --sizing-input: var(--pine-font-size-100);\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--color-invalid);\n\n &:checked {\n background: var(--color-invalid);\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus-invalid); // Remove when outline radius is supported in Safari\n outline: none;\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--color-invalid);\n }\n}\n\n:host(.is-indeterminate) {\n input:checked {\n &::after {\n border-bottom: 0;\n transform: rotate(87deg) translate3d(-114%, 25%, 0);\n }\n }\n}\n\ninput {\n appearance: none;\n background-color: var(--color-background);\n border: var(--border-default);\n border-radius: var(--border-radius);\n height: var(--sizing-input);\n margin: 0;\n position: relative;\n width: var(--sizing-input);\n\n &:hover {\n background: var(--color-background-hover);\n border: var(--border-color-interactive-hover);\n }\n\n &:checked {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n border: 1px solid var(--color-border-icon);\n border-left: 0;\n border-top: 0;\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(--color-background-disabled);\n border-color: var(--color-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--color-disabled);\n border-color: var(--color-disabled);\n\n &::after {\n border-color: var(--color-border-disabled);\n }\n }\n\n + label {\n color: var(--color-text-disabled);\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--color-text-disabled);\n }\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\nlabel {\n margin-inline-start: 10px;\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(--color-text-message);\n font-size: 14px;\n margin-block-start: 6px;\n margin-inline-start: 26px;\n width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrl: 'pds-checkbox.scss',\n shadow: true,\n})\nexport class PdsCheckbox {\n /**\n * It determines whether or not the checkbox is checked.\n */\n @Prop({ mutable: true }) checked: boolean;\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() 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() labelHidden: 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 * Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\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.pdsCheckboxChange.emit({\n checked: target.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 render() {\n return (\n <Host class={this.classNames()}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"checkbox\"\n id={this.componentId}\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 />\n <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\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 {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-charcoal-200);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-087);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrl: 'pds-table-cell.scss',\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n tableRef: HTMLPdsTableElement;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n this.tableRef.addEventListener('scroll', this.handleScroll);\n }\n }\n\n /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}