@pine-ds/core 3.8.1 → 3.8.2

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 (270) hide show
  1. package/components/pds-box2.js +2 -2
  2. package/components/pds-box2.js.map +1 -1
  3. package/components/pds-progress.js +1 -1
  4. package/components/pds-progress.js.map +1 -1
  5. package/components/pds-radio.js +34 -7
  6. package/components/pds-radio.js.map +1 -1
  7. package/components/pds-row.js +19 -1
  8. package/components/pds-row.js.map +1 -1
  9. package/components/pds-select.js +1 -1
  10. package/components/pds-sortable-item.js +1 -1
  11. package/components/pds-sortable.js +1 -1
  12. package/components/pds-switch.js +3 -3
  13. package/components/pds-tab.js +3 -3
  14. package/components/pds-table-body.js +1 -1
  15. package/components/pds-table-cell2.js +2 -2
  16. package/components/pds-table-head-cell2.js +2 -2
  17. package/components/pds-table-head.js +1 -1
  18. package/components/pds-table-row.js +1 -1
  19. package/components/pds-tabpanel.js +1 -1
  20. package/components/pds-tabs.js +1 -1
  21. package/components/pds-text2.js +1 -1
  22. package/components/pds-textarea.js +4 -4
  23. package/components/pds-toast.js +3 -3
  24. package/components/pds-tooltip.js +2 -2
  25. package/dist/cjs/loader.cjs.js +1 -1
  26. package/dist/cjs/pds-box.cjs.entry.js +2 -2
  27. package/dist/cjs/pds-box.cjs.entry.js.map +1 -1
  28. package/dist/cjs/pds-box.entry.cjs.js.map +1 -1
  29. package/dist/cjs/pds-progress.cjs.entry.js +1 -1
  30. package/dist/cjs/pds-progress.cjs.entry.js.map +1 -1
  31. package/dist/cjs/pds-progress.entry.cjs.js.map +1 -1
  32. package/dist/cjs/pds-radio.cjs.entry.js +30 -5
  33. package/dist/cjs/pds-radio.cjs.entry.js.map +1 -1
  34. package/dist/cjs/pds-radio.entry.cjs.js.map +1 -1
  35. package/dist/cjs/pds-row.cjs.entry.js +19 -1
  36. package/dist/cjs/pds-row.cjs.entry.js.map +1 -1
  37. package/dist/cjs/pds-row.entry.cjs.js.map +1 -1
  38. package/dist/cjs/pds-select.cjs.entry.js +1 -1
  39. package/dist/cjs/pds-sortable-item.cjs.entry.js +1 -1
  40. package/dist/cjs/pds-sortable.cjs.entry.js +1 -1
  41. package/dist/cjs/pds-switch.cjs.entry.js +3 -3
  42. package/dist/cjs/pds-tab.cjs.entry.js +3 -3
  43. package/dist/cjs/pds-table-body.cjs.entry.js +1 -1
  44. package/dist/cjs/pds-table-cell.cjs.entry.js +2 -2
  45. package/dist/cjs/pds-table-head-cell.cjs.entry.js +2 -2
  46. package/dist/cjs/pds-table-head.cjs.entry.js +1 -1
  47. package/dist/cjs/pds-table-row.cjs.entry.js +1 -1
  48. package/dist/cjs/pds-tabpanel.cjs.entry.js +1 -1
  49. package/dist/cjs/pds-tabs.cjs.entry.js +1 -1
  50. package/dist/cjs/pds-text.cjs.entry.js +1 -1
  51. package/dist/cjs/pds-textarea.cjs.entry.js +4 -4
  52. package/dist/cjs/pds-toast.cjs.entry.js +3 -3
  53. package/dist/cjs/pds-tooltip.cjs.entry.js +2 -2
  54. package/dist/cjs/pine-core.cjs.js +1 -1
  55. package/dist/collection/components/pds-box/pds-box.css +2740 -40
  56. package/dist/collection/components/pds-box/pds-box.js +241 -241
  57. package/dist/collection/components/pds-box/pds-box.js.map +1 -1
  58. package/dist/collection/components/pds-progress/pds-progress.css +2 -2
  59. package/dist/collection/components/pds-radio/pds-radio.css +145 -3
  60. package/dist/collection/components/pds-radio/pds-radio.js +62 -5
  61. package/dist/collection/components/pds-radio/pds-radio.js.map +1 -1
  62. package/dist/collection/components/pds-radio/stories/pds-radio.stories.js +37 -0
  63. package/dist/collection/components/pds-row/pds-row.js +31 -13
  64. package/dist/collection/components/pds-row/pds-row.js.map +1 -1
  65. package/dist/collection/components/pds-select/pds-select.js +1 -1
  66. package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +1 -1
  67. package/dist/collection/components/pds-sortable/pds-sortable.js +1 -1
  68. package/dist/collection/components/pds-switch/pds-switch.js +3 -3
  69. package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
  70. package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
  71. package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
  72. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +2 -2
  73. package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
  74. package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +3 -3
  75. package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
  76. package/dist/collection/components/pds-tabs/pds-tabs.js +1 -1
  77. package/dist/collection/components/pds-text/pds-text.js +1 -1
  78. package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
  79. package/dist/collection/components/pds-toast/pds-toast.js +3 -3
  80. package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
  81. package/dist/collection/utils/types.js.map +1 -1
  82. package/dist/docs.json +6764 -2180
  83. package/dist/esm/loader.js +1 -1
  84. package/dist/esm/pds-box.entry.js +2 -2
  85. package/dist/esm/pds-box.entry.js.map +1 -1
  86. package/dist/esm/pds-progress.entry.js +1 -1
  87. package/dist/esm/pds-progress.entry.js.map +1 -1
  88. package/dist/esm/pds-radio.entry.js +31 -6
  89. package/dist/esm/pds-radio.entry.js.map +1 -1
  90. package/dist/esm/pds-row.entry.js +19 -1
  91. package/dist/esm/pds-row.entry.js.map +1 -1
  92. package/dist/esm/pds-select.entry.js +1 -1
  93. package/dist/esm/pds-sortable-item.entry.js +1 -1
  94. package/dist/esm/pds-sortable.entry.js +1 -1
  95. package/dist/esm/pds-switch.entry.js +3 -3
  96. package/dist/esm/pds-tab.entry.js +3 -3
  97. package/dist/esm/pds-table-body.entry.js +1 -1
  98. package/dist/esm/pds-table-cell.entry.js +2 -2
  99. package/dist/esm/pds-table-head-cell.entry.js +2 -2
  100. package/dist/esm/pds-table-head.entry.js +1 -1
  101. package/dist/esm/pds-table-row.entry.js +1 -1
  102. package/dist/esm/pds-tabpanel.entry.js +1 -1
  103. package/dist/esm/pds-tabs.entry.js +1 -1
  104. package/dist/esm/pds-text.entry.js +1 -1
  105. package/dist/esm/pds-textarea.entry.js +4 -4
  106. package/dist/esm/pds-toast.entry.js +3 -3
  107. package/dist/esm/pds-tooltip.entry.js +2 -2
  108. package/dist/esm/pine-core.js +1 -1
  109. package/dist/esm-es5/loader.js +1 -1
  110. package/dist/esm-es5/pds-box.entry.js +1 -1
  111. package/dist/esm-es5/pds-box.entry.js.map +1 -1
  112. package/dist/esm-es5/pds-progress.entry.js +1 -1
  113. package/dist/esm-es5/pds-progress.entry.js.map +1 -1
  114. package/dist/esm-es5/pds-radio.entry.js +1 -1
  115. package/dist/esm-es5/pds-radio.entry.js.map +1 -1
  116. package/dist/esm-es5/pds-row.entry.js +1 -1
  117. package/dist/esm-es5/pds-row.entry.js.map +1 -1
  118. package/dist/esm-es5/pds-select.entry.js +1 -1
  119. package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
  120. package/dist/esm-es5/pds-sortable.entry.js +1 -1
  121. package/dist/esm-es5/pds-switch.entry.js +1 -1
  122. package/dist/esm-es5/pds-tab.entry.js +1 -1
  123. package/dist/esm-es5/pds-table-body.entry.js +1 -1
  124. package/dist/esm-es5/pds-table-cell.entry.js +1 -1
  125. package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
  126. package/dist/esm-es5/pds-table-head.entry.js +1 -1
  127. package/dist/esm-es5/pds-table-row.entry.js +1 -1
  128. package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
  129. package/dist/esm-es5/pds-tabs.entry.js +1 -1
  130. package/dist/esm-es5/pds-text.entry.js +1 -1
  131. package/dist/esm-es5/pds-textarea.entry.js +1 -1
  132. package/dist/esm-es5/pds-toast.entry.js +1 -1
  133. package/dist/esm-es5/pds-tooltip.entry.js +1 -1
  134. package/dist/esm-es5/pine-core.js +1 -1
  135. package/dist/pine-core/p-00f6f3af.system.entry.js +2 -0
  136. package/dist/pine-core/p-00f6f3af.system.entry.js.map +1 -0
  137. package/dist/pine-core/p-04ad9d2c.system.entry.js +2 -0
  138. package/dist/pine-core/p-04ad9d2c.system.entry.js.map +1 -0
  139. package/dist/pine-core/p-0b593535.system.entry.js +2 -0
  140. package/dist/pine-core/p-1039e8e9.entry.js +2 -0
  141. package/dist/pine-core/{p-a2708028.entry.js.map → p-1039e8e9.entry.js.map} +1 -1
  142. package/dist/pine-core/{p-73a2e028.system.entry.js → p-18179981.system.entry.js} +2 -2
  143. package/dist/pine-core/p-18179981.system.entry.js.map +1 -0
  144. package/dist/pine-core/{p-bac9fcfa.entry.js → p-1a7cd7a6.entry.js} +2 -2
  145. package/dist/pine-core/p-2c407961.entry.js +2 -0
  146. package/dist/pine-core/p-2c407961.entry.js.map +1 -0
  147. package/dist/pine-core/{p-94183716.entry.js → p-332338ee.entry.js} +2 -2
  148. package/dist/pine-core/{p-e5adbf74.system.entry.js → p-3cc92094.system.entry.js} +2 -2
  149. package/dist/pine-core/{p-a3785977.entry.js → p-41abb654.entry.js} +2 -2
  150. package/dist/pine-core/{p-ae4ec5cf.system.entry.js → p-4802f8de.system.entry.js} +2 -2
  151. package/dist/pine-core/{p-61a25ab2.entry.js → p-4bc02df0.entry.js} +2 -2
  152. package/dist/pine-core/{p-f6d0bd39.entry.js → p-4c6ec7c4.entry.js} +2 -2
  153. package/dist/pine-core/{p-8f69dd71.system.entry.js → p-4ef17b95.system.entry.js} +2 -2
  154. package/dist/pine-core/{p-55d06d0a.system.entry.js → p-544fea4c.system.entry.js} +2 -2
  155. package/dist/pine-core/{p-00346c62.system.entry.js → p-6d48604a.system.entry.js} +2 -2
  156. package/dist/pine-core/{p-449ebe39.system.entry.js → p-7792f47d.system.entry.js} +2 -2
  157. package/dist/pine-core/{p-75187352.system.entry.js → p-7fa6cf39.system.entry.js} +2 -2
  158. package/dist/pine-core/{p-d4d22aee.entry.js → p-81972d0f.entry.js} +2 -2
  159. package/dist/pine-core/p-8b3f4c31.entry.js +2 -0
  160. package/dist/pine-core/{p-41e2fe3a.entry.js → p-8ff41ba8.entry.js} +2 -2
  161. package/dist/pine-core/{p-8b5fc4b4.system.entry.js → p-90e83476.system.entry.js} +2 -2
  162. package/dist/pine-core/{p-c3579585.system.entry.js → p-97299c83.system.entry.js} +2 -2
  163. package/dist/pine-core/p-972a511a.entry.js +2 -0
  164. package/dist/pine-core/p-972a511a.entry.js.map +1 -0
  165. package/dist/pine-core/{p-a2cb65df.entry.js → p-9ac84e63.entry.js} +2 -2
  166. package/dist/pine-core/{p-2fb6f9d5.entry.js → p-9c1bfa68.entry.js} +2 -2
  167. package/dist/pine-core/p-9c1bfa68.entry.js.map +1 -0
  168. package/dist/pine-core/{p-3dce3bc0.system.entry.js → p-9fbb9f0e.system.entry.js} +2 -2
  169. package/dist/pine-core/{p-yaM1kuaC.system.js.map → p-B8JDvOCM.system.js.map} +1 -1
  170. package/dist/pine-core/{p-DtdXdmNp.system.js.map → p-BDK6YCRb.system.js.map} +1 -1
  171. package/dist/pine-core/{p-CJNB_wrl.system.js.map → p-BJ3oNLWN.system.js.map} +1 -1
  172. package/dist/pine-core/p-BPjnTOEL.system.js +1 -1
  173. package/dist/pine-core/p-BbhWs2I3.system.js.map +1 -0
  174. package/dist/pine-core/p-CEUtKiTx.system.js.map +1 -0
  175. package/dist/pine-core/{p-DN3VK2yy.system.js.map → p-CTkQ9Pq-.system.js.map} +1 -1
  176. package/dist/pine-core/{p-iazk4jjL.system.js.map → p-CdcQ02yR.system.js.map} +1 -1
  177. package/dist/pine-core/{p-Cxlv_2hD.system.js.map → p-CfyzuJNE.system.js.map} +1 -1
  178. package/dist/pine-core/p-CyFXZIZs.system.js.map +1 -0
  179. package/dist/pine-core/p-CypP0PZf.system.js.map +1 -0
  180. package/dist/pine-core/{p-BVDuy7iI.system.js.map → p-DExobiBX.system.js.map} +1 -1
  181. package/dist/pine-core/{p-C3iAHQC6.system.js.map → p-DJ7iTbji.system.js.map} +1 -1
  182. package/dist/pine-core/{p-Ctdx1tCG.system.js.map → p-DiWDsjtE.system.js.map} +1 -1
  183. package/dist/pine-core/{p-DpemOPFJ.system.js.map → p-DpBO6epv.system.js.map} +1 -1
  184. package/dist/pine-core/{p-DfrSuf6X.system.js.map → p-DsyFbeEi.system.js.map} +1 -1
  185. package/dist/pine-core/{p-D0foS5EP.system.js.map → p-K3LH4gRE.system.js.map} +1 -1
  186. package/dist/pine-core/{p-1b9d4482.entry.js → p-ae2d59cd.entry.js} +2 -2
  187. package/dist/pine-core/{p-f92d7570.system.entry.js → p-b8127114.system.entry.js} +2 -2
  188. package/dist/pine-core/{p-2054b5cb.system.entry.js → p-b9e12535.system.entry.js} +2 -2
  189. package/dist/pine-core/p-bc2530d7.entry.js +2 -0
  190. package/dist/pine-core/{p-6ed297cb.entry.js → p-c09c8fa7.entry.js} +2 -2
  191. package/dist/pine-core/{p-DpzRSULT.system.js.map → p-ch9PI3Vl.system.js.map} +1 -1
  192. package/dist/pine-core/p-d61f3ab0.system.entry.js +2 -0
  193. package/dist/pine-core/p-d61f3ab0.system.entry.js.map +1 -0
  194. package/dist/pine-core/{p-d69f0f51.system.entry.js → p-da1fb45d.system.entry.js} +2 -2
  195. package/dist/pine-core/{p-9cf2b7a6.entry.js → p-e18c3044.entry.js} +2 -2
  196. package/dist/pine-core/p-e692908e.entry.js +2 -0
  197. package/dist/pine-core/p-e692908e.entry.js.map +1 -0
  198. package/dist/pine-core/{p-2597bc59.system.entry.js → p-ed724664.system.entry.js} +2 -2
  199. package/dist/pine-core/{p-e34c1224.system.entry.js → p-ed7bea99.system.entry.js} +2 -2
  200. package/dist/pine-core/{p-1b932ee3.entry.js → p-f8e1545e.entry.js} +2 -2
  201. package/dist/pine-core/{p-79422986.entry.js → p-fe60ee09.entry.js} +2 -2
  202. package/dist/pine-core/{p-BIjeWHX_.system.js.map → p-hop4Cgg5.system.js.map} +1 -1
  203. package/dist/pine-core/{p-DOqVoXeA.system.js.map → p-qQVNUF7F.system.js.map} +1 -1
  204. package/dist/pine-core/{p-C1KChp5Q.system.js.map → p-rnM09DN4.system.js.map} +1 -1
  205. package/dist/pine-core/pds-box.entry.esm.js.map +1 -1
  206. package/dist/pine-core/pds-progress.entry.esm.js.map +1 -1
  207. package/dist/pine-core/pds-radio.entry.esm.js.map +1 -1
  208. package/dist/pine-core/pds-row.entry.esm.js.map +1 -1
  209. package/dist/pine-core/pine-core.esm.js +1 -1
  210. package/dist/types/components/pds-box/pds-box.d.ts +61 -61
  211. package/dist/types/components/pds-radio/pds-radio.d.ts +14 -1
  212. package/dist/types/components/pds-row/pds-row.d.ts +4 -4
  213. package/dist/types/components.d.ts +139 -129
  214. package/dist/types/utils/types.d.ts +1 -1
  215. package/hydrate/index.js +88 -39
  216. package/hydrate/index.mjs +88 -39
  217. package/package.json +2 -2
  218. package/dist/pine-core/p-25cf2860.system.entry.js +0 -2
  219. package/dist/pine-core/p-25cf2860.system.entry.js.map +0 -1
  220. package/dist/pine-core/p-2fb6f9d5.entry.js.map +0 -1
  221. package/dist/pine-core/p-39648ce2.entry.js +0 -2
  222. package/dist/pine-core/p-39648ce2.entry.js.map +0 -1
  223. package/dist/pine-core/p-708e963c.system.entry.js +0 -2
  224. package/dist/pine-core/p-708e963c.system.entry.js.map +0 -1
  225. package/dist/pine-core/p-73a2e028.system.entry.js.map +0 -1
  226. package/dist/pine-core/p-786967e8.entry.js +0 -2
  227. package/dist/pine-core/p-875d5d5a.system.entry.js +0 -2
  228. package/dist/pine-core/p-BJjdD3yf.system.js.map +0 -1
  229. package/dist/pine-core/p-CnPN6prI.system.js.map +0 -1
  230. package/dist/pine-core/p-D7B3vOdC.system.js.map +0 -1
  231. package/dist/pine-core/p-HHZU8rBT.system.js.map +0 -1
  232. package/dist/pine-core/p-a2708028.entry.js +0 -2
  233. package/dist/pine-core/p-a645818a.entry.js +0 -2
  234. package/dist/pine-core/p-acd87a10.entry.js +0 -2
  235. package/dist/pine-core/p-acd87a10.entry.js.map +0 -1
  236. package/dist/pine-core/p-bc2fecd4.system.entry.js +0 -2
  237. package/dist/pine-core/p-bc2fecd4.system.entry.js.map +0 -1
  238. package/dist/pine-core/p-be5ef841.entry.js +0 -2
  239. package/dist/pine-core/p-be5ef841.entry.js.map +0 -1
  240. /package/dist/pine-core/{p-875d5d5a.system.entry.js.map → p-0b593535.system.entry.js.map} +0 -0
  241. /package/dist/pine-core/{p-bac9fcfa.entry.js.map → p-1a7cd7a6.entry.js.map} +0 -0
  242. /package/dist/pine-core/{p-94183716.entry.js.map → p-332338ee.entry.js.map} +0 -0
  243. /package/dist/pine-core/{p-e5adbf74.system.entry.js.map → p-3cc92094.system.entry.js.map} +0 -0
  244. /package/dist/pine-core/{p-a3785977.entry.js.map → p-41abb654.entry.js.map} +0 -0
  245. /package/dist/pine-core/{p-ae4ec5cf.system.entry.js.map → p-4802f8de.system.entry.js.map} +0 -0
  246. /package/dist/pine-core/{p-61a25ab2.entry.js.map → p-4bc02df0.entry.js.map} +0 -0
  247. /package/dist/pine-core/{p-f6d0bd39.entry.js.map → p-4c6ec7c4.entry.js.map} +0 -0
  248. /package/dist/pine-core/{p-8f69dd71.system.entry.js.map → p-4ef17b95.system.entry.js.map} +0 -0
  249. /package/dist/pine-core/{p-55d06d0a.system.entry.js.map → p-544fea4c.system.entry.js.map} +0 -0
  250. /package/dist/pine-core/{p-00346c62.system.entry.js.map → p-6d48604a.system.entry.js.map} +0 -0
  251. /package/dist/pine-core/{p-449ebe39.system.entry.js.map → p-7792f47d.system.entry.js.map} +0 -0
  252. /package/dist/pine-core/{p-75187352.system.entry.js.map → p-7fa6cf39.system.entry.js.map} +0 -0
  253. /package/dist/pine-core/{p-d4d22aee.entry.js.map → p-81972d0f.entry.js.map} +0 -0
  254. /package/dist/pine-core/{p-786967e8.entry.js.map → p-8b3f4c31.entry.js.map} +0 -0
  255. /package/dist/pine-core/{p-41e2fe3a.entry.js.map → p-8ff41ba8.entry.js.map} +0 -0
  256. /package/dist/pine-core/{p-8b5fc4b4.system.entry.js.map → p-90e83476.system.entry.js.map} +0 -0
  257. /package/dist/pine-core/{p-c3579585.system.entry.js.map → p-97299c83.system.entry.js.map} +0 -0
  258. /package/dist/pine-core/{p-a2cb65df.entry.js.map → p-9ac84e63.entry.js.map} +0 -0
  259. /package/dist/pine-core/{p-3dce3bc0.system.entry.js.map → p-9fbb9f0e.system.entry.js.map} +0 -0
  260. /package/dist/pine-core/{p-1b9d4482.entry.js.map → p-ae2d59cd.entry.js.map} +0 -0
  261. /package/dist/pine-core/{p-f92d7570.system.entry.js.map → p-b8127114.system.entry.js.map} +0 -0
  262. /package/dist/pine-core/{p-2054b5cb.system.entry.js.map → p-b9e12535.system.entry.js.map} +0 -0
  263. /package/dist/pine-core/{p-a645818a.entry.js.map → p-bc2530d7.entry.js.map} +0 -0
  264. /package/dist/pine-core/{p-6ed297cb.entry.js.map → p-c09c8fa7.entry.js.map} +0 -0
  265. /package/dist/pine-core/{p-d69f0f51.system.entry.js.map → p-da1fb45d.system.entry.js.map} +0 -0
  266. /package/dist/pine-core/{p-9cf2b7a6.entry.js.map → p-e18c3044.entry.js.map} +0 -0
  267. /package/dist/pine-core/{p-2597bc59.system.entry.js.map → p-ed724664.system.entry.js.map} +0 -0
  268. /package/dist/pine-core/{p-e34c1224.system.entry.js.map → p-ed7bea99.system.entry.js.map} +0 -0
  269. /package/dist/pine-core/{p-1b932ee3.entry.js.map → p-f8e1545e.entry.js.map} +0 -0
  270. /package/dist/pine-core/{p-79422986.entry.js.map → p-fe60ee09.entry.js.map} +0 -0
package/components/pds-box2.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"pds-box2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@use './pds-box.mixins' as *;\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\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\n &[min-height] {\n min-height: var(--sizing-min-height-box);\n }\n\n &[min-width] {\n min-width: var(--sizing-min-width-box);\n }\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-row > .pds-box[class*='pds-box-'] {\n flex-basis: auto;\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: solid;\n border-width: var(--border-width-default);\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-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-125);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Margin helpers\n.pds-margin-block-start-xxs {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-start-xs {\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-start-sm {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-start-md {\n margin-block-start: var(--pine-dimension-md);\n}\n\n.pds-margin-block-start-lg {\n margin-block-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-start-xl {\n margin-block-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-start-xxl {\n margin-block-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-start-none {\n margin-inline-start: 0;\n}\n\n.pds-margin-inline-start-xxs {\n margin-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-start-xs {\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-start-sm {\n margin-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-start-md {\n margin-inline-start: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-start-lg {\n margin-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-start-xl {\n margin-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-start-xxl {\n margin-inline-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-end-none {\n margin-inline-end: 0;\n}\n\n.pds-margin-inline-end-xxs {\n margin-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-end-xs {\n margin-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-end-sm {\n margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-end-md {\n margin-inline-end: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-end-lg {\n margin-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-end-xl {\n margin-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-end-xxl {\n margin-inline-end: var(--pine-dimension-2xl);\n}\n\n.pds-margin-block-end-none {\n margin-block-end: 0;\n}\n\n.pds-margin-block-end-xxs {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-end-xs {\n margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-end-sm {\n margin-block-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-end-md {\n margin-block-end: var(--pine-dimension-md);\n}\n\n.pds-margin-block-end-lg {\n margin-block-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-end-xl {\n margin-block-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-end-xxl {\n margin-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Padding block start helpers\n.pds-padding-block-start-none {\n padding-block-start: var(--pine-dimension-none);\n}\n\n.pds-padding-block-start-xxs {\n padding-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-start-xs {\n padding-block-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-start-sm {\n padding-block-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-start-md {\n padding-block-start: var(--pine-dimension-md);\n}\n\n.pds-padding-block-start-lg {\n padding-block-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-start-xl {\n padding-block-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-start-xxl {\n padding-block-start: var(--pine-dimension-2xl);\n}\n\n// Padding block end helpers\n.pds-padding-block-end-none {\n padding-block-end: var(--pine-dimension-none);\n}\n\n.pds-padding-block-end-xxs {\n padding-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-end-xs {\n padding-block-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-end-sm {\n padding-block-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-end-md {\n padding-block-end: var(--pine-dimension-md);\n}\n\n.pds-padding-block-end-lg {\n padding-block-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-end-xl {\n padding-block-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-end-xxl {\n padding-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding inline start helpers\n.pds-padding-inline-start-none {\n padding-inline-start: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-start-xxs {\n padding-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-start-xs {\n padding-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-start-sm {\n padding-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-start-md {\n padding-inline-start: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-start-lg {\n padding-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-start-xl {\n padding-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-start-xxl {\n padding-inline-start: var(--pine-dimension-2xl);\n}\n\n// Padding inline end helpers\n.pds-padding-inline-end-none {\n padding-inline-end: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-end-xxs {\n padding-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-end-xs {\n padding-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-end-sm {\n padding-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-end-md {\n padding-inline-end: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-end-lg {\n padding-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-end-xl {\n padding-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-end-xxl {\n padding-inline-end: var(--pine-dimension-2xl);\n}\n\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\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// Flex Wrap helpers\n.pds-box--wrap {\n flex-wrap: wrap;\n}\n\n// Maps for flex properties\n$justify-content-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'space-between': space-between,\n 'space-around': space-around,\n 'space-evenly': space-evenly\n);\n\n$align-items-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'baseline': baseline,\n 'stretch': stretch\n);\n\n$align-self-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'baseline': baseline,\n 'stretch': stretch\n);\n\n$breakpoints: (\n 'xs': '(max-width: 575px)',\n 'sm': '(min-width: 576px)',\n 'md': '(min-width: 768px)',\n 'lg': '(min-width: 992px)',\n 'xl': '(min-width: 1200px)'\n);\n\n// Justify Content helpers\n@each $name, $value in $justify-content-values {\n .pds-justify-content-#{$name} {\n justify-content: $value;\n }\n}\n\n// Responsive Justify Content helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $justify-content-values {\n .pds-justify-content-#{$breakpoint-name}-#{$name} {\n justify-content: $value;\n }\n }\n }\n}\n\n// Align Items helpers\n@each $name, $value in $align-items-values {\n .pds-align-items-#{$name} {\n align-items: $value;\n }\n}\n\n// Responsive Align Items helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $align-items-values {\n .pds-align-items-#{$breakpoint-name}-#{$name} {\n align-items: $value;\n }\n }\n }\n}\n\n// Align Self helpers\n@each $name, $value in $align-self-values {\n .pds-align-self-#{$name} {\n align-self: $value;\n }\n}\n\n// Responsive Align Self helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $align-self-values {\n .pds-align-self-#{$breakpoint-name}-#{$name} {\n align-self: $value;\n }\n }\n }\n}\n\n// Responsive Flex Wrap helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n .pds-box--wrap-#{$breakpoint-name} {\n flex-wrap: wrap;\n }\n }\n}\n\n// Responsive Auto helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n .pds-box--auto-#{$breakpoint-name} {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n }\n }\n}\n\n// Responsive Fit helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n .pds-box--fit-#{$breakpoint-name} {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n }\n }\n}\n\n// Responsive Gap helpers\n$gap-values: (\n 'none': 0,\n 'xxs': var(--pine-dimension-2xs),\n 'xs': var(--pine-dimension-xs),\n 'sm': var(--pine-dimension-sm),\n 'md': var(--pine-dimension-md),\n 'lg': var(--pine-dimension-lg),\n 'xl': var(--pine-dimension-xl),\n 'xxl': var(--pine-dimension-2xl)\n);\n\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $gap-values {\n .pds-box-gap-#{$breakpoint-name}-#{$name} {\n gap: $value;\n }\n }\n }\n}\n\n// Responsive Margin helpers\n$margin-values: (\n 'none': 0,\n 'xxs': var(--pine-dimension-2xs),\n 'xs': var(--pine-dimension-xs),\n 'sm': var(--pine-dimension-sm),\n 'md': var(--pine-dimension-md),\n 'lg': var(--pine-dimension-lg),\n 'xl': var(--pine-dimension-xl),\n 'xxl': var(--pine-dimension-2xl)\n);\n\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $margin-values {\n .pds-margin-block-start-#{$breakpoint-name}-#{$name} {\n margin-block-start: $value;\n }\n\n .pds-margin-inline-start-#{$breakpoint-name}-#{$name} {\n margin-inline-start: $value;\n }\n\n .pds-margin-inline-end-#{$breakpoint-name}-#{$name} {\n margin-inline-end: $value;\n }\n\n .pds-margin-block-end-#{$breakpoint-name}-#{$name} {\n margin-block-end: $value;\n }\n }\n }\n}\n\n// Responsive Padding helpers\n$padding-values: (\n 'none': var(--pine-dimension-none),\n 'xxs': var(--pine-dimension-2xs),\n 'xs': var(--pine-dimension-xs),\n 'sm': var(--pine-dimension-sm),\n 'md': var(--pine-dimension-md),\n 'lg': var(--pine-dimension-lg),\n 'xl': var(--pine-dimension-xl),\n 'xxl': var(--pine-dimension-2xl)\n);\n\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $padding-values {\n .pds-padding-#{$breakpoint-name}-#{$name} {\n padding: $value;\n }\n\n .pds-padding-block-start-#{$breakpoint-name}-#{$name} {\n padding-block-start: $value;\n }\n\n .pds-padding-block-end-#{$breakpoint-name}-#{$name} {\n padding-block-end: $value;\n }\n\n .pds-padding-inline-start-#{$breakpoint-name}-#{$name} {\n padding-inline-start: $value;\n }\n\n .pds-padding-inline-end-#{$breakpoint-name}-#{$name} {\n padding-inline-end: $value;\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\nimport { normalizeColorValue } from '../../utils/utils';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /**\n * Defines how items within the box are aligned.\n * @defaultValue stretch\n */\n @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch` ;\n\n /**\n * Defines how items within the box are aligned at the XS breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsXs?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how items within the box are aligned at the SM breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsSm?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how items within the box are aligned at the MD breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsMd?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how items within the box are aligned at the LG breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsLg?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how items within the box are aligned at the XL breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsXl?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container.\n * @defaultValue stretch\n */\n @Prop() alignSelf?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the XS breakpoint.\n *\n */\n @Prop() alignSelfXs?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the SM breakpoint.\n *\n */\n @Prop() alignSelfSm?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the MD breakpoint.\n *\n */\n @Prop() alignSelfMd?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the LG breakpoint.\n *\n */\n @Prop() alignSelfLg?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the XL breakpoint.\n *\n */\n @Prop() alignSelfXl?: `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 * If `true`, the box will be sized to fit its contents at the XS breakpoint.\n */\n @Prop() autoXs?: boolean;\n\n /**\n * If `true`, the box will be sized to fit its contents at the SM breakpoint.\n */\n @Prop() autoSm?: boolean;\n\n /**\n * If `true`, the box will be sized to fit its contents at the MD breakpoint.\n */\n @Prop() autoMd?: boolean;\n\n /**\n * If `true`, the box will be sized to fit its contents at the LG breakpoint.\n */\n @Prop() autoLg?: boolean;\n\n /**\n * If `true`, the box will be sized to fit its contents at the XL breakpoint.\n */\n @Prop() autoXl?: 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 * If `true`, sets the box `max-width` to `100%` at the XS breakpoint.\n */\n @Prop() fitXs?: boolean;\n\n /**\n * If `true`, sets the box `max-width` to `100%` at the SM breakpoint.\n */\n @Prop() fitSm?: boolean;\n\n /**\n * If `true`, sets the box `max-width` to `100%` at the MD breakpoint.\n */\n @Prop() fitMd?: boolean;\n\n /**\n * If `true`, sets the box `max-width` to `100%` at the LG breakpoint.\n */\n @Prop() fitLg?: boolean;\n\n /**\n * If `true`, sets the box `max-width` to `100%` at the XL breakpoint.\n */\n @Prop() fitXl?: boolean;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() gap?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() gapXs?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() gapSm?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() gapMd?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() gapLg?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() gapXl?: BoxTShirtSizeType;\n\n /**\n * Defines whether flex items are forced onto one line or can wrap onto multiple lines.\n * @defaultValue false\n */\n @Prop() wrap?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the XS breakpoint.\n * @defaultValue false\n */\n @Prop() wrapXs?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the SM breakpoint.\n * @defaultValue false\n */\n @Prop() wrapSm?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the MD breakpoint.\n * @defaultValue false\n */\n @Prop() wrapMd?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the LG breakpoint.\n * @defaultValue false\n */\n @Prop() wrapLg?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the XL breakpoint.\n * @defaultValue false\n */\n @Prop() wrapXl?: boolean;\n\n /**\n * Defines how a box will grow or shrink to fit the space available in its container.\n * Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').\n * @defaultValue none\n */\n @Prop() flex?: `none` | `grow` | `shrink` | string;\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` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the XS breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentXs?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the SM breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentSm?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the MD breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentMd?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the LG breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentLg?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the XL breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentXl?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the box's outer top spacing.\n * @defaultValue none\n */\n @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer top spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartXs?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer top spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartSm?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer top spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartMd?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer top spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartLg?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer top spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartXl?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer left spacing.\n * @defaultValue none\n */\n @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer left spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartXs?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer left spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartSm?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer left spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartMd?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer left spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartLg?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer left spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartXl?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer right spacing.\n * @defaultValue none\n */\n @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer right spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndXs?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer right spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndSm?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer right spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndMd?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer right spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndLg?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer right spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndXl?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer bottom spacing.\n * @defaultValue none\n */\n @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer bottom spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndXs?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer bottom spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndSm?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer bottom spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndMd?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer bottom spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndLg?: BoxTShirtSizeType;\n\n /**\n * Defines the box's outer bottom spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndXl?: BoxTShirtSizeType;\n\n /**\n * The minimum height of the row. Used in conjunction with alignment props\n */\n @Prop({ reflect: true }) minHeight?: string;\n\n /**\n * The minimum width of the row. Used in conjunction with alignment props\n */\n @Prop({ reflect: true }) 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 spacing between the box items at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingXs?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingSm?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingMd?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingLg?: BoxTShirtSizeType;\n\n /**\n * Defines the spacing between the box items at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingXl?: BoxTShirtSizeType;\n\n\n /**\n * Defines the top spacing.\n * @defaultValue none\n */\n @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n /**\n * Defines the top spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartXs?: BoxTShirtSizeType;\n\n /**\n * Defines the top spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartSm?: BoxTShirtSizeType;\n\n /**\n * Defines the top spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartMd?: BoxTShirtSizeType;\n\n /**\n * Defines the top spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartLg?: BoxTShirtSizeType;\n\n /**\n * Defines the top spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartXl?: BoxTShirtSizeType;\n\n /**\n * Defines the bottom spacing.\n * @defaultValue none\n */\n @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n /**\n * Defines the bottom spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndXs?: BoxTShirtSizeType;\n\n /**\n * Defines the bottom spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndSm?: BoxTShirtSizeType;\n\n /**\n * Defines the bottom spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndMd?: BoxTShirtSizeType;\n\n /**\n * Defines the bottom spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndLg?: BoxTShirtSizeType;\n\n /**\n * Defines the bottom spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndXl?: BoxTShirtSizeType;\n\n /**\n * Defines the left spacing.\n * @defaultValue none\n */\n @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n /**\n * Defines the left spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartXs?: BoxTShirtSizeType;\n\n /**\n * Defines the left spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartSm?: BoxTShirtSizeType;\n\n /**\n * Defines the left spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartMd?: BoxTShirtSizeType;\n\n /**\n * Defines the left spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartLg?: BoxTShirtSizeType;\n\n /**\n * Defines the left spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartXl?: BoxTShirtSizeType;\n\n /**\n * Defines the right spacing.\n * @defaultValue none\n */\n @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n /**\n * Defines the right spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndXs?: BoxTShirtSizeType;\n\n /**\n * Defines the right spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndSm?: BoxTShirtSizeType;\n\n /**\n * Defines the right spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndMd?: BoxTShirtSizeType;\n\n /**\n * Defines the right spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndLg?: BoxTShirtSizeType;\n\n /**\n * Defines the right spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndXl?: BoxTShirtSizeType;\n\n /**\n * Defines the box shadow.\n * @defaultValue none\n */\n @Prop() shadow?: BoxShadowSizeType;\n\n /**\n * Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n */\n @Prop() size?: BoxColumnType;\n\n /**\n * At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n */\n @Prop() sizeXs?: BoxColumnType;\n\n /**\n * At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n */\n @Prop() sizeSm?: BoxColumnType;\n\n /**\n * At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeMd?: BoxColumnType;\n\n /**\n * At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeLg?: BoxColumnType;\n\n /**\n * At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignItemsXs !== undefined && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}\n ${this.alignItemsSm !== undefined && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}\n ${this.alignItemsMd !== undefined && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}\n ${this.alignItemsLg !== undefined && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}\n ${this.alignItemsXl !== undefined && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.alignSelfXs !== undefined && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}\n ${this.alignSelfSm !== undefined && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}\n ${this.alignSelfMd !== undefined && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}\n ${this.alignSelfLg !== undefined && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}\n ${this.alignSelfXl !== undefined && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.autoXs ? 'pds-box--auto-xs' : ''}\n ${this.autoSm ? 'pds-box--auto-sm' : ''}\n ${this.autoMd ? 'pds-box--auto-md' : ''}\n ${this.autoLg ? 'pds-box--auto-lg' : ''}\n ${this.autoXl ? 'pds-box--auto-xl' : ''}\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.fitXs ? 'pds-box--fit-xs' : ''}\n ${this.fitSm ? 'pds-box--fit-sm' : ''}\n ${this.fitMd ? 'pds-box--fit-md' : ''}\n ${this.fitLg ? 'pds-box--fit-lg' : ''}\n ${this.fitXl ? 'pds-box--fit-xl' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.gapXs !== undefined && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}\n ${this.gapSm !== undefined && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}\n ${this.gapMd !== undefined && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}\n ${this.gapLg !== undefined && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}\n ${this.gapXl !== undefined && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}\n ${this.wrap ? 'pds-box--wrap' : ''}\n ${this.wrapXs ? 'pds-box--wrap-xs' : ''}\n ${this.wrapSm ? 'pds-box--wrap-sm' : ''}\n ${this.wrapMd ? 'pds-box--wrap-md' : ''}\n ${this.wrapLg ? 'pds-box--wrap-lg' : ''}\n ${this.wrapXl ? 'pds-box--wrap-xl' : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.justifyContentXs !== undefined && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}\n ${this.justifyContentSm !== undefined && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}\n ${this.justifyContentMd !== undefined && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}\n ${this.justifyContentLg !== undefined && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}\n ${this.justifyContentXl !== undefined && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}\n ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n ${this.marginBlockStartXs !== undefined && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}\n ${this.marginBlockStartSm !== undefined && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}\n ${this.marginBlockStartMd !== undefined && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}\n ${this.marginBlockStartLg !== undefined && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}\n ${this.marginBlockStartXl !== undefined && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}\n ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n ${this.marginInlineStartXs !== undefined && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}\n ${this.marginInlineStartSm !== undefined && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}\n ${this.marginInlineStartMd !== undefined && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}\n ${this.marginInlineStartLg !== undefined && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}\n ${this.marginInlineStartXl !== undefined && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}\n ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n ${this.marginInlineEndXs !== undefined && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}\n ${this.marginInlineEndSm !== undefined && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}\n ${this.marginInlineEndMd !== undefined && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}\n ${this.marginInlineEndLg !== undefined && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}\n ${this.marginInlineEndXl !== undefined && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}\n ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n ${this.marginBlockEndXs !== undefined && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}\n ${this.marginBlockEndSm !== undefined && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}\n ${this.marginBlockEndMd !== undefined && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}\n ${this.marginBlockEndLg !== undefined && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}\n ${this.marginBlockEndXl !== undefined && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}\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.paddingXs !== undefined && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}\n ${this.paddingSm !== undefined && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}\n ${this.paddingMd !== undefined && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}\n ${this.paddingLg !== undefined && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}\n ${this.paddingXl !== undefined && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}\n ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n ${this.paddingBlockStartXs !== undefined && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}\n ${this.paddingBlockStartSm !== undefined && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}\n ${this.paddingBlockStartMd !== undefined && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}\n ${this.paddingBlockStartLg !== undefined && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}\n ${this.paddingBlockStartXl !== undefined && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}\n ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n ${this.paddingBlockEndXs !== undefined && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}\n ${this.paddingBlockEndSm !== undefined && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}\n ${this.paddingBlockEndMd !== undefined && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}\n ${this.paddingBlockEndLg !== undefined && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}\n ${this.paddingBlockEndXl !== undefined && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}\n ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n ${this.paddingInlineStartXs !== undefined && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}\n ${this.paddingInlineStartSm !== undefined && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}\n ${this.paddingInlineStartMd !== undefined && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}\n ${this.paddingInlineStartLg !== undefined && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}\n ${this.paddingInlineStartXl !== undefined && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}\n ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n ${this.paddingInlineEndXs !== undefined && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}\n ${this.paddingInlineEndSm !== undefined && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}\n ${this.paddingInlineEndMd !== undefined && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}\n ${this.paddingInlineEndLg !== undefined && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}\n ${this.paddingInlineEndXl !== undefined && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}\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 // Normalize so pds-box accepts --token, var(--token), or literals (no semantic names)\n const normalizedBackground = normalizeColorValue(this.backgroundColor);\n const normalizedBorder = normalizeColorValue(this.borderColor);\n\n const boxInlineStyles = {\n ...(normalizedBackground && { '--color-background-box': normalizedBackground }),\n ...(normalizedBorder && { '--color-border-box': normalizedBorder }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n ...(this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-box2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@use './pds-box.mixins' as *;\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\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\n &[min-height] {\n min-height: var(--sizing-min-height-box);\n }\n\n &[min-width] {\n min-width: var(--sizing-min-width-box);\n }\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-row > .pds-box[class*='pds-box-'] {\n flex-basis: auto;\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: solid;\n border-width: var(--border-width-default);\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-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-125);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Margin helpers\n.pds-margin-block-start-xxs {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-start-xs {\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-start-sm {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-start-md {\n margin-block-start: var(--pine-dimension-md);\n}\n\n.pds-margin-block-start-lg {\n margin-block-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-start-xl {\n margin-block-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-start-xxl {\n margin-block-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-start-none {\n margin-inline-start: 0;\n}\n\n.pds-margin-inline-start-xxs {\n margin-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-start-xs {\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-start-sm {\n margin-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-start-md {\n margin-inline-start: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-start-lg {\n margin-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-start-xl {\n margin-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-start-xxl {\n margin-inline-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-end-none {\n margin-inline-end: 0;\n}\n\n.pds-margin-inline-end-xxs {\n margin-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-end-xs {\n margin-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-end-sm {\n margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-end-md {\n margin-inline-end: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-end-lg {\n margin-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-end-xl {\n margin-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-end-xxl {\n margin-inline-end: var(--pine-dimension-2xl);\n}\n\n.pds-margin-block-end-none {\n margin-block-end: 0;\n}\n\n.pds-margin-block-end-xxs {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-end-xs {\n margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-end-sm {\n margin-block-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-end-md {\n margin-block-end: var(--pine-dimension-md);\n}\n\n.pds-margin-block-end-lg {\n margin-block-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-end-xl {\n margin-block-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-end-xxl {\n margin-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Padding block start helpers\n.pds-padding-block-start-none {\n padding-block-start: var(--pine-dimension-none);\n}\n\n.pds-padding-block-start-xxs {\n padding-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-start-xs {\n padding-block-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-start-sm {\n padding-block-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-start-md {\n padding-block-start: var(--pine-dimension-md);\n}\n\n.pds-padding-block-start-lg {\n padding-block-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-start-xl {\n padding-block-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-start-xxl {\n padding-block-start: var(--pine-dimension-2xl);\n}\n\n// Padding block end helpers\n.pds-padding-block-end-none {\n padding-block-end: var(--pine-dimension-none);\n}\n\n.pds-padding-block-end-xxs {\n padding-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-end-xs {\n padding-block-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-end-sm {\n padding-block-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-end-md {\n padding-block-end: var(--pine-dimension-md);\n}\n\n.pds-padding-block-end-lg {\n padding-block-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-end-xl {\n padding-block-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-end-xxl {\n padding-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding inline start helpers\n.pds-padding-inline-start-none {\n padding-inline-start: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-start-xxs {\n padding-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-start-xs {\n padding-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-start-sm {\n padding-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-start-md {\n padding-inline-start: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-start-lg {\n padding-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-start-xl {\n padding-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-start-xxl {\n padding-inline-start: var(--pine-dimension-2xl);\n}\n\n// Padding inline end helpers\n.pds-padding-inline-end-none {\n padding-inline-end: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-end-xxs {\n padding-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-end-xs {\n padding-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-end-sm {\n padding-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-end-md {\n padding-inline-end: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-end-lg {\n padding-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-end-xl {\n padding-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-end-xxl {\n padding-inline-end: var(--pine-dimension-2xl);\n}\n\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\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// Flex Wrap helpers\n.pds-box--wrap {\n flex-wrap: wrap;\n}\n\n// Maps for flex properties\n$justify-content-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'space-between': space-between,\n 'space-around': space-around,\n 'space-evenly': space-evenly\n);\n\n$align-items-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'baseline': baseline,\n 'stretch': stretch\n);\n\n$align-self-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'baseline': baseline,\n 'stretch': stretch\n);\n\n$breakpoints: (\n 'xs': '(max-width: 575px)',\n 'sm': '(min-width: 576px)',\n 'md': '(min-width: 768px)',\n 'lg': '(min-width: 992px)',\n 'xl': '(min-width: 1200px)'\n);\n\n// Justify Content helpers\n@each $name, $value in $justify-content-values {\n .pds-justify-content-#{$name} {\n justify-content: $value;\n }\n}\n\n// Responsive Justify Content helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $justify-content-values {\n .pds-justify-content-#{$breakpoint-name}-#{$name} {\n justify-content: $value;\n }\n }\n }\n}\n\n// Align Items helpers\n@each $name, $value in $align-items-values {\n .pds-align-items-#{$name} {\n align-items: $value;\n }\n}\n\n// Responsive Align Items helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $align-items-values {\n .pds-align-items-#{$breakpoint-name}-#{$name} {\n align-items: $value;\n }\n }\n }\n}\n\n// Align Self helpers\n@each $name, $value in $align-self-values {\n .pds-align-self-#{$name} {\n align-self: $value;\n }\n}\n\n// Responsive Align Self helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $align-self-values {\n .pds-align-self-#{$breakpoint-name}-#{$name} {\n align-self: $value;\n }\n }\n }\n}\n\n// Responsive Flex Wrap helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n .pds-box--wrap-#{$breakpoint-name} {\n flex-wrap: wrap;\n }\n }\n}\n\n// Responsive Auto helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n .pds-box--auto-#{$breakpoint-name} {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n }\n }\n}\n\n// Responsive Fit helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n .pds-box--fit-#{$breakpoint-name} {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n }\n }\n}\n\n// Responsive Gap helpers\n$gap-values: (\n 'none': 0,\n 'xxs': var(--pine-dimension-2xs),\n 'xs': var(--pine-dimension-xs),\n 'sm': var(--pine-dimension-sm),\n 'md': var(--pine-dimension-md),\n 'lg': var(--pine-dimension-lg),\n 'xl': var(--pine-dimension-xl),\n 'xxl': var(--pine-dimension-2xl),\n '025': var(--pine-dimension-025),\n '050': var(--pine-dimension-050),\n '100': var(--pine-dimension-100),\n '125': var(--pine-dimension-125),\n '150': var(--pine-dimension-150),\n '200': var(--pine-dimension-200),\n '250': var(--pine-dimension-250),\n '300': var(--pine-dimension-300),\n '350': var(--pine-dimension-350),\n '400': var(--pine-dimension-400),\n '450': var(--pine-dimension-450),\n '500': var(--pine-dimension-500),\n '550': var(--pine-dimension-550),\n '600': var(--pine-dimension-600),\n '650': var(--pine-dimension-650),\n '700': var(--pine-dimension-700),\n '750': var(--pine-dimension-750),\n '800': var(--pine-dimension-800)\n);\n\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $gap-values {\n .pds-box-gap-#{$breakpoint-name}-#{$name} {\n gap: $value;\n }\n }\n }\n}\n\n// Responsive Margin helpers\n$margin-values: (\n 'none': 0,\n 'xxs': var(--pine-dimension-2xs),\n 'xs': var(--pine-dimension-xs),\n 'sm': var(--pine-dimension-sm),\n 'md': var(--pine-dimension-md),\n 'lg': var(--pine-dimension-lg),\n 'xl': var(--pine-dimension-xl),\n 'xxl': var(--pine-dimension-2xl),\n '025': var(--pine-dimension-025),\n '050': var(--pine-dimension-050),\n '100': var(--pine-dimension-100),\n '125': var(--pine-dimension-125),\n '150': var(--pine-dimension-150),\n '200': var(--pine-dimension-200),\n '250': var(--pine-dimension-250),\n '300': var(--pine-dimension-300),\n '350': var(--pine-dimension-350),\n '400': var(--pine-dimension-400),\n '450': var(--pine-dimension-450),\n '500': var(--pine-dimension-500),\n '550': var(--pine-dimension-550),\n '600': var(--pine-dimension-600),\n '650': var(--pine-dimension-650),\n '700': var(--pine-dimension-700),\n '750': var(--pine-dimension-750),\n '800': var(--pine-dimension-800)\n);\n\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $margin-values {\n .pds-margin-block-start-#{$breakpoint-name}-#{$name} {\n margin-block-start: $value;\n }\n\n .pds-margin-inline-start-#{$breakpoint-name}-#{$name} {\n margin-inline-start: $value;\n }\n\n .pds-margin-inline-end-#{$breakpoint-name}-#{$name} {\n margin-inline-end: $value;\n }\n\n .pds-margin-block-end-#{$breakpoint-name}-#{$name} {\n margin-block-end: $value;\n }\n }\n }\n}\n\n// Responsive Padding helpers\n$padding-values: (\n 'none': var(--pine-dimension-none),\n 'xxs': var(--pine-dimension-2xs),\n 'xs': var(--pine-dimension-xs),\n 'sm': var(--pine-dimension-sm),\n 'md': var(--pine-dimension-md),\n 'lg': var(--pine-dimension-lg),\n 'xl': var(--pine-dimension-xl),\n 'xxl': var(--pine-dimension-2xl),\n '025': var(--pine-dimension-025),\n '050': var(--pine-dimension-050),\n '100': var(--pine-dimension-100),\n '125': var(--pine-dimension-125),\n '150': var(--pine-dimension-150),\n '200': var(--pine-dimension-200),\n '250': var(--pine-dimension-250),\n '300': var(--pine-dimension-300),\n '350': var(--pine-dimension-350),\n '400': var(--pine-dimension-400),\n '450': var(--pine-dimension-450),\n '500': var(--pine-dimension-500),\n '550': var(--pine-dimension-550),\n '600': var(--pine-dimension-600),\n '650': var(--pine-dimension-650),\n '700': var(--pine-dimension-700),\n '750': var(--pine-dimension-750),\n '800': var(--pine-dimension-800)\n);\n\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $padding-values {\n .pds-padding-#{$breakpoint-name}-#{$name} {\n padding: $value;\n }\n\n .pds-padding-block-start-#{$breakpoint-name}-#{$name} {\n padding-block-start: $value;\n }\n\n .pds-padding-block-end-#{$breakpoint-name}-#{$name} {\n padding-block-end: $value;\n }\n\n .pds-padding-inline-start-#{$breakpoint-name}-#{$name} {\n padding-inline-start: $value;\n }\n\n .pds-padding-inline-end-#{$breakpoint-name}-#{$name} {\n padding-inline-end: $value;\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxSpacingType, BoxShadowSizeType } from '../../utils/types';\nimport { normalizeColorValue } from '../../utils/utils';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /**\n * Defines how items within the box are aligned.\n * @defaultValue stretch\n */\n @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch` ;\n\n /**\n * Defines how items within the box are aligned at the XS breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsXs?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how items within the box are aligned at the SM breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsSm?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how items within the box are aligned at the MD breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsMd?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how items within the box are aligned at the LG breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsLg?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how items within the box are aligned at the XL breakpoint.\n * @defaultValue stretch\n */\n @Prop() alignItemsXl?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container.\n * @defaultValue stretch\n */\n @Prop() alignSelf?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the XS breakpoint.\n *\n */\n @Prop() alignSelfXs?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the SM breakpoint.\n *\n */\n @Prop() alignSelfSm?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the MD breakpoint.\n *\n */\n @Prop() alignSelfMd?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the LG breakpoint.\n *\n */\n @Prop() alignSelfLg?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * Defines how the box is aligned within its container at the XL breakpoint.\n *\n */\n @Prop() alignSelfXl?: `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 * If `true`, the box will be sized to fit its contents at the XS breakpoint.\n */\n @Prop() autoXs?: boolean;\n\n /**\n * If `true`, the box will be sized to fit its contents at the SM breakpoint.\n */\n @Prop() autoSm?: boolean;\n\n /**\n * If `true`, the box will be sized to fit its contents at the MD breakpoint.\n */\n @Prop() autoMd?: boolean;\n\n /**\n * If `true`, the box will be sized to fit its contents at the LG breakpoint.\n */\n @Prop() autoLg?: boolean;\n\n /**\n * If `true`, the box will be sized to fit its contents at the XL breakpoint.\n */\n @Prop() autoXl?: 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 * If `true`, sets the box `max-width` to `100%` at the XS breakpoint.\n */\n @Prop() fitXs?: boolean;\n\n /**\n * If `true`, sets the box `max-width` to `100%` at the SM breakpoint.\n */\n @Prop() fitSm?: boolean;\n\n /**\n * If `true`, sets the box `max-width` to `100%` at the MD breakpoint.\n */\n @Prop() fitMd?: boolean;\n\n /**\n * If `true`, sets the box `max-width` to `100%` at the LG breakpoint.\n */\n @Prop() fitLg?: boolean;\n\n /**\n * If `true`, sets the box `max-width` to `100%` at the XL breakpoint.\n */\n @Prop() fitXl?: boolean;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() gap?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() gapXs?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() gapSm?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() gapMd?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() gapLg?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() gapXl?: BoxSpacingType;\n\n /**\n * Defines whether flex items are forced onto one line or can wrap onto multiple lines.\n * @defaultValue false\n */\n @Prop() wrap?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the XS breakpoint.\n * @defaultValue false\n */\n @Prop() wrapXs?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the SM breakpoint.\n * @defaultValue false\n */\n @Prop() wrapSm?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the MD breakpoint.\n * @defaultValue false\n */\n @Prop() wrapMd?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the LG breakpoint.\n * @defaultValue false\n */\n @Prop() wrapLg?: boolean;\n\n /**\n * Defines whether flex items can wrap onto multiple lines at the XL breakpoint.\n * @defaultValue false\n */\n @Prop() wrapXl?: boolean;\n\n /**\n * Defines how a box will grow or shrink to fit the space available in its container.\n * Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').\n * @defaultValue none\n */\n @Prop() flex?: `none` | `grow` | `shrink` | string;\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` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the XS breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentXs?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the SM breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentSm?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the MD breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentMd?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the LG breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentLg?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the horizontal alignment of the box items at the XL breakpoint.\n * @defaultValue start\n */\n @Prop() justifyContentXl?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;\n\n /**\n * Defines the box's outer top spacing.\n * @defaultValue none\n */\n @Prop() marginBlockStart?: BoxSpacingType;\n\n /**\n * Defines the box's outer top spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartXs?: BoxSpacingType;\n\n /**\n * Defines the box's outer top spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartSm?: BoxSpacingType;\n\n /**\n * Defines the box's outer top spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartMd?: BoxSpacingType;\n\n /**\n * Defines the box's outer top spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartLg?: BoxSpacingType;\n\n /**\n * Defines the box's outer top spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockStartXl?: BoxSpacingType;\n\n /**\n * Defines the box's outer left spacing.\n * @defaultValue none\n */\n @Prop() marginInlineStart?: BoxSpacingType;\n\n /**\n * Defines the box's outer left spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartXs?: BoxSpacingType;\n\n /**\n * Defines the box's outer left spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartSm?: BoxSpacingType;\n\n /**\n * Defines the box's outer left spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartMd?: BoxSpacingType;\n\n /**\n * Defines the box's outer left spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartLg?: BoxSpacingType;\n\n /**\n * Defines the box's outer left spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineStartXl?: BoxSpacingType;\n\n /**\n * Defines the box's outer right spacing.\n * @defaultValue none\n */\n @Prop() marginInlineEnd?: BoxSpacingType;\n\n /**\n * Defines the box's outer right spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndXs?: BoxSpacingType;\n\n /**\n * Defines the box's outer right spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndSm?: BoxSpacingType;\n\n /**\n * Defines the box's outer right spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndMd?: BoxSpacingType;\n\n /**\n * Defines the box's outer right spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndLg?: BoxSpacingType;\n\n /**\n * Defines the box's outer right spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() marginInlineEndXl?: BoxSpacingType;\n\n /**\n * Defines the box's outer bottom spacing.\n * @defaultValue none\n */\n @Prop() marginBlockEnd?: BoxSpacingType;\n\n /**\n * Defines the box's outer bottom spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndXs?: BoxSpacingType;\n\n /**\n * Defines the box's outer bottom spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndSm?: BoxSpacingType;\n\n /**\n * Defines the box's outer bottom spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndMd?: BoxSpacingType;\n\n /**\n * Defines the box's outer bottom spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndLg?: BoxSpacingType;\n\n /**\n * Defines the box's outer bottom spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() marginBlockEndXl?: BoxSpacingType;\n\n /**\n * The minimum height of the row. Used in conjunction with alignment props\n */\n @Prop({ reflect: true }) minHeight?: string;\n\n /**\n * The minimum width of the row. Used in conjunction with alignment props\n */\n @Prop({ reflect: true }) 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?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingXs?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingSm?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingMd?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingLg?: BoxSpacingType;\n\n /**\n * Defines the spacing between the box items at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingXl?: BoxSpacingType;\n\n\n /**\n * Defines the top spacing.\n * @defaultValue none\n */\n @Prop() paddingBlockStart?: BoxSpacingType;\n\n /**\n * Defines the top spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartXs?: BoxSpacingType;\n\n /**\n * Defines the top spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartSm?: BoxSpacingType;\n\n /**\n * Defines the top spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartMd?: BoxSpacingType;\n\n /**\n * Defines the top spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartLg?: BoxSpacingType;\n\n /**\n * Defines the top spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockStartXl?: BoxSpacingType;\n\n /**\n * Defines the bottom spacing.\n * @defaultValue none\n */\n @Prop() paddingBlockEnd?: BoxSpacingType;\n\n /**\n * Defines the bottom spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndXs?: BoxSpacingType;\n\n /**\n * Defines the bottom spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndSm?: BoxSpacingType;\n\n /**\n * Defines the bottom spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndMd?: BoxSpacingType;\n\n /**\n * Defines the bottom spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndLg?: BoxSpacingType;\n\n /**\n * Defines the bottom spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingBlockEndXl?: BoxSpacingType;\n\n /**\n * Defines the left spacing.\n * @defaultValue none\n */\n @Prop() paddingInlineStart?: BoxSpacingType;\n\n /**\n * Defines the left spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartXs?: BoxSpacingType;\n\n /**\n * Defines the left spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartSm?: BoxSpacingType;\n\n /**\n * Defines the left spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartMd?: BoxSpacingType;\n\n /**\n * Defines the left spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartLg?: BoxSpacingType;\n\n /**\n * Defines the left spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineStartXl?: BoxSpacingType;\n\n /**\n * Defines the right spacing.\n * @defaultValue none\n */\n @Prop() paddingInlineEnd?: BoxSpacingType;\n\n /**\n * Defines the right spacing at the XS breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndXs?: BoxSpacingType;\n\n /**\n * Defines the right spacing at the SM breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndSm?: BoxSpacingType;\n\n /**\n * Defines the right spacing at the MD breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndMd?: BoxSpacingType;\n\n /**\n * Defines the right spacing at the LG breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndLg?: BoxSpacingType;\n\n /**\n * Defines the right spacing at the XL breakpoint.\n * @defaultValue none\n */\n @Prop() paddingInlineEndXl?: BoxSpacingType;\n\n /**\n * Defines the box shadow.\n * @defaultValue none\n */\n @Prop() shadow?: BoxShadowSizeType;\n\n /**\n * Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n */\n @Prop() size?: BoxColumnType;\n\n /**\n * At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n */\n @Prop() sizeXs?: BoxColumnType;\n\n /**\n * At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n */\n @Prop() sizeSm?: BoxColumnType;\n\n /**\n * At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeMd?: BoxColumnType;\n\n /**\n * At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeLg?: BoxColumnType;\n\n /**\n * At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignItemsXs !== undefined && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}\n ${this.alignItemsSm !== undefined && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}\n ${this.alignItemsMd !== undefined && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}\n ${this.alignItemsLg !== undefined && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}\n ${this.alignItemsXl !== undefined && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.alignSelfXs !== undefined && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}\n ${this.alignSelfSm !== undefined && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}\n ${this.alignSelfMd !== undefined && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}\n ${this.alignSelfLg !== undefined && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}\n ${this.alignSelfXl !== undefined && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.autoXs ? 'pds-box--auto-xs' : ''}\n ${this.autoSm ? 'pds-box--auto-sm' : ''}\n ${this.autoMd ? 'pds-box--auto-md' : ''}\n ${this.autoLg ? 'pds-box--auto-lg' : ''}\n ${this.autoXl ? 'pds-box--auto-xl' : ''}\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.fitXs ? 'pds-box--fit-xs' : ''}\n ${this.fitSm ? 'pds-box--fit-sm' : ''}\n ${this.fitMd ? 'pds-box--fit-md' : ''}\n ${this.fitLg ? 'pds-box--fit-lg' : ''}\n ${this.fitXl ? 'pds-box--fit-xl' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.gapXs !== undefined && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}\n ${this.gapSm !== undefined && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}\n ${this.gapMd !== undefined && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}\n ${this.gapLg !== undefined && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}\n ${this.gapXl !== undefined && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}\n ${this.wrap ? 'pds-box--wrap' : ''}\n ${this.wrapXs ? 'pds-box--wrap-xs' : ''}\n ${this.wrapSm ? 'pds-box--wrap-sm' : ''}\n ${this.wrapMd ? 'pds-box--wrap-md' : ''}\n ${this.wrapLg ? 'pds-box--wrap-lg' : ''}\n ${this.wrapXl ? 'pds-box--wrap-xl' : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.justifyContentXs !== undefined && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}\n ${this.justifyContentSm !== undefined && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}\n ${this.justifyContentMd !== undefined && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}\n ${this.justifyContentLg !== undefined && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}\n ${this.justifyContentXl !== undefined && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}\n ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n ${this.marginBlockStartXs !== undefined && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}\n ${this.marginBlockStartSm !== undefined && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}\n ${this.marginBlockStartMd !== undefined && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}\n ${this.marginBlockStartLg !== undefined && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}\n ${this.marginBlockStartXl !== undefined && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}\n ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n ${this.marginInlineStartXs !== undefined && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}\n ${this.marginInlineStartSm !== undefined && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}\n ${this.marginInlineStartMd !== undefined && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}\n ${this.marginInlineStartLg !== undefined && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}\n ${this.marginInlineStartXl !== undefined && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}\n ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n ${this.marginInlineEndXs !== undefined && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}\n ${this.marginInlineEndSm !== undefined && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}\n ${this.marginInlineEndMd !== undefined && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}\n ${this.marginInlineEndLg !== undefined && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}\n ${this.marginInlineEndXl !== undefined && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}\n ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n ${this.marginBlockEndXs !== undefined && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}\n ${this.marginBlockEndSm !== undefined && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}\n ${this.marginBlockEndMd !== undefined && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}\n ${this.marginBlockEndLg !== undefined && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}\n ${this.marginBlockEndXl !== undefined && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}\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.paddingXs !== undefined && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}\n ${this.paddingSm !== undefined && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}\n ${this.paddingMd !== undefined && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}\n ${this.paddingLg !== undefined && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}\n ${this.paddingXl !== undefined && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}\n ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n ${this.paddingBlockStartXs !== undefined && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}\n ${this.paddingBlockStartSm !== undefined && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}\n ${this.paddingBlockStartMd !== undefined && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}\n ${this.paddingBlockStartLg !== undefined && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}\n ${this.paddingBlockStartXl !== undefined && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}\n ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n ${this.paddingBlockEndXs !== undefined && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}\n ${this.paddingBlockEndSm !== undefined && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}\n ${this.paddingBlockEndMd !== undefined && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}\n ${this.paddingBlockEndLg !== undefined && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}\n ${this.paddingBlockEndXl !== undefined && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}\n ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n ${this.paddingInlineStartXs !== undefined && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}\n ${this.paddingInlineStartSm !== undefined && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}\n ${this.paddingInlineStartMd !== undefined && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}\n ${this.paddingInlineStartLg !== undefined && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}\n ${this.paddingInlineStartXl !== undefined && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}\n ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n ${this.paddingInlineEndXs !== undefined && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}\n ${this.paddingInlineEndSm !== undefined && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}\n ${this.paddingInlineEndMd !== undefined && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}\n ${this.paddingInlineEndLg !== undefined && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}\n ${this.paddingInlineEndXl !== undefined && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}\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 // Normalize so pds-box accepts --token, var(--token), or literals (no semantic names)\n const normalizedBackground = normalizeColorValue(this.backgroundColor);\n const normalizedBorder = normalizeColorValue(this.borderColor);\n\n const boxInlineStyles = {\n ...(normalizedBackground && { '--color-background-box': normalizedBackground }),\n ...(normalizedBorder && { '--color-border-box': normalizedBorder }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n ...(this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"version":3}
package/components/pds-progress.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const pdsProgressCss = ":host{--color-progress-fill:var(--pine-color-brand);--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background-color:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background-color:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{font-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}";
3
+ const pdsProgressCss = ":host{--color-progress-fill:var(--pine-color-brand);--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{font-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}";
4
4
 
5
5
  const PdsProgress$1 = /*@__PURE__*/ proxyCustomElement(class PdsProgress extends HTMLElement {
6
6
  constructor() {
package/components/pds-progress.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"pds-progress.js","mappings":";;AAAA,MAAM,cAAc,GAAG,8iDAA8iD;;MCOxjDA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AAME;;;AAGE;AACM,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAkBxB;;;AAGE;AACM,QAAA,IAAO,CAAA,OAAA,GAAG,CAAC;AAEnB;;;AAGE;AACM,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAqB5B;IAnBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAA,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACzD,IAAI,CAAC,KAAK,CACL,EACR,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP,EACL,IAAI,CAAC,WAAW,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAAE,IAAI,CAAC,OAAO,EAAQ,GAAA,CAAA,CAC3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsProgress","__stencil_proxyCustomElement"],"sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n --color-progress-fill: var(--pine-color-brand);\n\n --sizing-progress-bar-width: 100%;\n\n align-items: center;\n display: flex;\n width: var(--sizing-progress-bar-width);\n}\n\n@keyframes progressBar {\n 0% {\n width: 0\n }\n\n 100% {\n width: var(--sizing-progress-bar-width);\n }\n}\n\n.pds-progress {\n align-items: center;\n background-color: var(--pine-color-background-container-disabled);\n border-radius: var(--pine-dimension-2xs);\n display: flex;\n flex-direction: row;\n height: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n animation: progressBar 3s ease;\n animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n background-color: transparent;\n border: 0;\n height: var(--pine-dimension-xs);\n width: 100%;\n}\n\nprogress::-webkit-progress-value {\n background-color: var(--color-progress-fill, var(--pine-color-brand));\n border-radius: var(--pine-dimension-2xs);\n}\n\nprogress::-moz-progress-bar {\n background-color: var(--color-progress-fill, var(--pine-color-brand));\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-progress__label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pds-progress__percentage {\n font-weight: var(--pine-font-weight-medium);\n margin-inline-start: calc(var(--pine-dimension-md) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-progress',\n styleUrls: ['pds-progress.scss'],\n shadow: true,\n})\nexport class PdsProgress {\n /**\n * Determines whether or not progress is animated.\n * @defaultValue false\n */\n @Prop() animated = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n * @defaultValue 'var(--pine-color-blue-300)'\n */\n @Prop() fillColor: string;\n\n /**\n * String used for label text. Label is visually hidden but required for better accessibility.\n */\n @Prop() label!: string;\n\n /**\n * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n * @defaultValue 0\n */\n @Prop() percent = 0;\n\n /**\n * Determines whether or not the percent value should be displayed as text.\n * @defaultValue false\n */\n @Prop() showPercent = false;\n\n render() {\n return (\n <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n <div class=\"pds-progress\">\n <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n {this.label}\n </label>\n <progress\n id={this.componentId}\n max=\"100\"\n style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n value={this.percent}\n >\n </progress>\n </div>\n {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-progress.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kiDAAkiD;;MCO5iDA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AAME;;;AAGE;AACM,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAkBxB;;;AAGE;AACM,QAAA,IAAO,CAAA,OAAA,GAAG,CAAC;AAEnB;;;AAGE;AACM,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAqB5B;IAnBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAA,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACzD,IAAI,CAAC,KAAK,CACL,EACR,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP,EACL,IAAI,CAAC,WAAW,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAAE,IAAI,CAAC,OAAO,EAAQ,GAAA,CAAA,CAC3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsProgress","__stencil_proxyCustomElement"],"sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n --color-progress-fill: var(--pine-color-brand);\n\n --sizing-progress-bar-width: 100%;\n\n align-items: center;\n display: flex;\n width: var(--sizing-progress-bar-width);\n}\n\n@keyframes progressBar {\n 0% {\n width: 0\n }\n\n 100% {\n width: var(--sizing-progress-bar-width);\n }\n}\n\n.pds-progress {\n align-items: center;\n background-color: var(--pine-color-background-container-disabled);\n border-radius: var(--pine-dimension-2xs);\n display: flex;\n flex-direction: row;\n height: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n animation: progressBar 3s ease;\n animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n background-color: transparent;\n border: 0;\n height: var(--pine-dimension-xs);\n width: 100%;\n}\n\nprogress::-webkit-progress-value {\n background: var(--color-progress-fill, var(--pine-color-brand));\n border-radius: var(--pine-dimension-2xs);\n}\n\nprogress::-moz-progress-bar {\n background: var(--color-progress-fill, var(--pine-color-brand));\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-progress__label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pds-progress__percentage {\n font-weight: var(--pine-font-weight-medium);\n margin-inline-start: calc(var(--pine-dimension-md) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-progress',\n styleUrls: ['pds-progress.scss'],\n shadow: true,\n})\nexport class PdsProgress {\n /**\n * Determines whether or not progress is animated.\n * @defaultValue false\n */\n @Prop() animated = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n * @defaultValue 'var(--pine-color-blue-300)'\n */\n @Prop() fillColor: string;\n\n /**\n * String used for label text. Label is visually hidden but required for better accessibility.\n */\n @Prop() label!: string;\n\n /**\n * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n * @defaultValue 0\n */\n @Prop() percent = 0;\n\n /**\n * Determines whether or not the percent value should be displayed as text.\n * @defaultValue false\n */\n @Prop() showPercent = false;\n\n render() {\n return (\n <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n <div class=\"pds-progress\">\n <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n {this.label}\n </label>\n <progress\n id={this.componentId}\n max=\"100\"\n style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n value={this.percent}\n >\n </progress>\n </div>\n {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n </Host>\n );\n }\n}\n"],"version":3}
package/components/pds-radio.js CHANGED
@@ -5,7 +5,7 @@ import { d as defineCustomElement$2 } from './pds-icon2.js';
5
5
 
6
6
  const labelCss = ".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
7
7
 
8
- const pdsRadioCss = ".sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked:hover{background:var(--pine-color-border-danger-hover);border-color:var(--pine-color-border-danger-hover)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-background-container);border-radius:var(--pine-border-radius-full);content:\"\";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;font-size:var(--pine-font-size-body-sm);gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}";
8
+ const pdsRadioCss = ".sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked:hover{background:var(--pine-color-border-danger-hover);border-color:var(--pine-color-border-danger-hover)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:\"\";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-background-container);border-radius:var(--pine-border-radius-full);content:\"\";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:\"\";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.6}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{cursor:not-allowed}.has-image.is-invalid.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-danger)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-danger-hover)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-border-danger);box-shadow:0 0 0 2px var(--pine-color-border-danger)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked) .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-danger);-webkit-box-shadow:0 0 0 2px var(--pine-color-border-danger);box-shadow:0 0 0 2px var(--pine-color-border-danger)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked) .pds-radio__image-container.sc-pds-radio::after{background:var(--pine-color-border-danger)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked) .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-danger-hover);-webkit-box-shadow:0 0 0 2px var(--pine-color-border-danger-hover);box-shadow:0 0 0 2px var(--pine-color-border-danger-hover)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked):hover{-webkit-box-shadow:0 0 0 2px var(--pine-color-border-danger-hover);box-shadow:0 0 0 2px var(--pine-color-border-danger-hover)}.has-image.is-invalid.sc-pds-radio-h label.sc-pds-radio,.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}";
9
9
 
10
10
  const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLElement {
11
11
  constructor() {
@@ -13,6 +13,7 @@ const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLE
13
13
  this.__registerHost();
14
14
  this.pdsRadioChange = createEvent(this, "pdsRadioChange", 7);
15
15
  this._type = 'radio';
16
+ this._hasImage = false;
16
17
  /**
17
18
  * Determines whether or not the radio is checked.
18
19
  * @defaultValue false
@@ -23,6 +24,11 @@ const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLE
23
24
  * @defaultValue false
24
25
  */
25
26
  this.disabled = false;
27
+ /**
28
+ * Adds a border around the radio component for better visual separation.
29
+ * @defaultValue false
30
+ */
31
+ this.hasBorder = false;
26
32
  /**
27
33
  * Determines whether or not the radio is invalid.
28
34
  * @defaultValue false
@@ -42,6 +48,13 @@ const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLE
42
48
  this.pdsRadioChange.emit(isChecked);
43
49
  };
44
50
  }
51
+ hasImageSlot() {
52
+ const imageSlot = this.el.querySelector('[slot="image"]');
53
+ return !!imageSlot;
54
+ }
55
+ hasImage() {
56
+ return this._hasImage;
57
+ }
45
58
  classNames() {
46
59
  const classNames = [];
47
60
  if (this.invalid) {
@@ -50,31 +63,45 @@ const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLE
50
63
  if (this.disabled) {
51
64
  classNames.push('is-disabled');
52
65
  }
53
- return classNames.join(' ');
66
+ if (this.hasBorder) {
67
+ classNames.push('has-border');
68
+ }
69
+ if (this.hasImage()) {
70
+ classNames.push('has-image');
71
+ }
72
+ return classNames.join(' ');
73
+ }
74
+ componentWillLoad() {
75
+ this._hasImage = this.hasImageSlot();
54
76
  }
55
77
  connectedCallback() {
56
78
  // Expose type property on the element instance to match native form element behavior
57
79
  exposeTypeProperty(this.el, () => this._type);
58
80
  }
59
81
  render() {
60
- return (h(Host, { key: '06e5b348a9fe664ac157f0383dab869885644f28', class: this.classNames() }, h("label", { key: '12d203aa9a181de09a4323b0644905f308209e10', htmlFor: this.componentId }, h("input", { key: '693af2832937dfa368859bc5d34e33813093bd19', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h("span", { key: '12cbafe6f967b0336e12083e506d0347fd60bb1a', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
61
- h("div", { key: 'd4c416a2c24331bb23c6bd829aff51dfe142ac4a', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
62
- h("div", { key: '8b973854356bdf1d36401bb7f818bacf573da010', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '85abae586504b4d64a19bf078ddd5fab099e4e06', icon: danger, size: "small" }), this.errorMessage)));
82
+ const renderLabelAndMessages = () => [
83
+ h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '714cf76fc30ab26b58523c6d802650a12de9c01a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: 'fc5deb9d38f9d2cc19a793dc32c46d88c9831482', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
84
+ this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
85
+ this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '771d1a284a0f24f204691c04addc7120d60c7a8c', icon: danger, size: "small" }), this.errorMessage))
86
+ ];
87
+ return (h(Host, { key: 'edf86e2d9070289457c0256e1dbf7a5febdbc386', class: this.classNames() }, this.hasImage() && (h("div", { key: 'fddaf8db228e2e4a2b00ded0fe9afba80c876503', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '2a5dbf40e955d039f6618fe9fa7e345ad5b6548d', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
63
88
  }
64
89
  get el() { return this; }
65
90
  static get style() { return labelCss + pdsRadioCss; }
66
- }, [2, "pds-radio", {
91
+ }, [6, "pds-radio", {
67
92
  "checked": [4],
68
93
  "componentId": [1, "component-id"],
69
94
  "disabled": [4],
70
95
  "errorMessage": [1, "error-message"],
71
96
  "helperMessage": [1, "helper-message"],
97
+ "hasBorder": [4, "has-border"],
72
98
  "invalid": [4],
73
99
  "label": [1],
74
100
  "hideLabel": [4, "hide-label"],
75
101
  "name": [1],
76
102
  "required": [4],
77
- "value": [1]
103
+ "value": [1],
104
+ "_hasImage": [32]
78
105
  }]);
79
106
  function defineCustomElement$1() {
80
107
  if (typeof customElements === "undefined") {
package/components/pds-radio.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"pds-radio.js","mappings":"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","names":["PdsRadio","__stencil_proxyCustomElement"],"sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\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(--pine-color-border-danger);\n\n &:checked {\n background: var(--pine-color-border-danger);\n\n &:hover {\n background: var(--pine-color-border-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--pine-color-text-message-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-radio__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--sizing-margin-block-start);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\n display: flex;\n font-size: var(--pine-font-size-body-sm);\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n /**\n * Determines whether or not the radio is checked.\n * @defaultValue false\n */\n @Prop() checked = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines whether or not the radio is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Displays error message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * Displays helper message text below radio.\n */\n @Prop() helperMessage: string;\n\n /**\n * Determines whether or not the radio is invalid.\n * @defaultValue false\n */\n @Prop() invalid = false;\n\n /**\n * String used for label text next to radio.\n */\n @Prop() label: string;\n\n /**\n * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * String used for radio `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * Determines whether or not the radio is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * The value of the radio that is submitted with a form.\n */\n @Prop() value: string;\n\n\n /**\n * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\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.handleRadioChange}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-radio.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,qXAAqX;;ACAtY,MAAM,WAAW,GAAG,61PAA61P;;MCap2PA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;AAMmB,QAAA,IAAK,CAAA,KAAA,GAAG,OAAgB;AAIxB,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAElC;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAOvB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAYxB;;;AAGG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAEvB;;;AAGC;AACO,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAiBzB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAahB,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,CAAQ,KAAI;AACvC,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB;;AAGF,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;AAC3C,YAAA,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO;AAEhC,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,SAAC;AAkGF;IAhGS,YAAY,GAAA;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;QACzD,OAAO,CAAC,CAAC,SAAS;;IAGZ,QAAQ,GAAA;QACd,OAAO,IAAI,CAAC,SAAS;;IAGf,UAAU,GAAA;QAChB,MAAM,UAAU,GAAG,EAAE;AAErB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;AAEhC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;;AAG9B,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG7B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE;;IAGtC,iBAAiB,GAAA;;AAEf,QAAA,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;;IAG/C,MAAM,GAAA;AACJ,QAAA,MAAM,sBAAsB,GAAG,MAAM;AACnC,YAAA,CAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,CAAG,EAAA,IAAI,CAAC,WAAW,CAAA,MAAA,CAAQ,EAAA,EAChE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,iBAAiB,GAAG,EAAE,EAC/C,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAA,EACjD,IAAI,CAAC,KAAK,CACN,CACD;AACR,YAAA,IAAI,CAAC,aAAa,KAChB,WACE,GAAG,EAAE,CAAG,EAAA,IAAI,CAAC,WAAW,SAAS,EACjC,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,EAExC,EAAA,IAAI,CAAC,aAAa,CACf,CACP;AACD,YAAA,IAAI,CAAC,YAAY,KACf,CACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,WAAW,CAAA,MAAA,CAAQ,EAChC,KAAK,EAAE,CAAA,4CAAA,CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,EAAA,WAAA,EAC9B,WAAW,EAAA,EAErB,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,EAAG,CAAA,EACtC,IAAI,CAAC,YAAY,CACd;SAET;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAC3B,IAAI,CAAC,QAAQ,EAAE,KACd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,iBAAiB,EAAA,EAC5D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,EAAI,CAAA,CAC7E,CACP,EACA,IAAI,CAAC,QAAQ,EAAE,IACd,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAA,EACpC,sBAAsB,EAAE,CACrB,KAEN,sBAAsB,EAAE,CACzB,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsRadio","__stencil_proxyCustomElement"],"sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var(--pine-color-border-danger);\n\n &:hover {\n background: var(--pine-color-border-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.has-border) {\n align-items: flex-start;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: var(--pine-dimension-md);\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n font-weight: var(--pine-font-weight-semi-bold);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\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 &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--pine-color-text-message-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-radio__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Image-based radio styles - matches bordered layout\n:host(.has-image) {\n align-items: center;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n padding: var(--pine-dimension-md);\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n display: flex;\n font-weight: var(--pine-font-weight-semi-bold);\n gap: var(--pine-dimension-xs);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n\n .pds-radio__image-container {\n align-items: center;\n align-self: center;\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n flex: none;\n grid-area: image;\n justify-content: center;\n overflow: hidden;\n position: relative;\n transition: all 0.2s ease;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n }\n\n .pds-radio__image {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n }\n\n .pds-radio__message {\n grid-area: message;\n margin-block-start: 0;\n margin-inline-start: 0;\n }\n\n // Disabled state\n &.is-disabled {\n .pds-radio__image-container {\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n opacity: 0.6;\n\n &:hover {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n label {\n cursor: not-allowed;\n }\n }\n\n // Invalid state\n &.is-invalid {\n .pds-radio__image-container {\n border-color: var(--pine-color-border-danger);\n\n &:hover {\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-border-danger);\n\n .pds-radio__image-container {\n border-color: var(--pine-color-border-danger);\n box-shadow: 0 0 0 2px var(--pine-color-border-danger);\n\n /* stylelint-disable-next-line */\n &::after {\n background: var(--pine-color-border-danger);\n }\n\n /* stylelint-disable-next-line */\n &:hover {\n border-color: var(--pine-color-border-danger-hover);\n box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);\n }\n }\n\n &:hover {\n box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n */\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n @State() private _hasImage = false;\n\n /**\n * Determines whether or not the radio is checked.\n * @defaultValue false\n */\n @Prop() checked = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines whether or not the radio is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Displays error message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * Displays helper message text below radio.\n */\n @Prop() helperMessage: string;\n\n /**\n * Adds a border around the radio component for better visual separation.\n * @defaultValue false\n */\n @Prop() hasBorder = false;\n\n /**\n * Determines whether or not the radio is invalid.\n * @defaultValue false\n */\n @Prop() invalid = false;\n\n /**\n * String used for label text next to radio.\n */\n @Prop() label: string;\n\n /**\n * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * String used for radio `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * Determines whether or not the radio is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * The value of the radio that is submitted with a form.\n */\n @Prop() value: string;\n\n\n /**\n * Emits a boolean indicating whether the radio is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private hasImageSlot(): boolean {\n const imageSlot = this.el.querySelector('[slot=\"image\"]');\n return !!imageSlot;\n }\n\n private hasImage(): boolean {\n return this._hasImage;\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n if (this.hasBorder) {\n classNames.push('has-border');\n }\n if (this.hasImage()) {\n classNames.push('has-image');\n }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this._hasImage = this.hasImageSlot();\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n const renderLabelAndMessages = () => [\n <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\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.handleRadioChange}\n class={this.hasImage() ? 'visually-hidden' : ''}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>,\n this.helperMessage && (\n <div\n key={`${this.componentId}-helper`}\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n ),\n this.errorMessage && (\n <div\n key={`${this.componentId}-error`}\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n )\n ];\n\n return (\n <Host class={this.classNames()}>\n {this.hasImage() && (\n <div class=\"pds-radio__image-container\" part=\"image-container\">\n <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n </div>\n )}\n {this.hasImage() ? (\n <div class=\"pds-radio__content-wrapper\">\n {renderLabelAndMessages()}\n </div>\n ) : (\n renderLabelAndMessages()\n )}\n </Host>\n );\n }\n}\n"],"version":3}
package/components/pds-row.js CHANGED
@@ -23,6 +23,24 @@ const PdsRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsRow extends HTMLEleme
23
23
  lg: '2.25rem',
24
24
  xl: '3rem',
25
25
  xxl: '4rem',
26
+ '025': 'var(--pine-dimension-025)',
27
+ '050': 'var(--pine-dimension-050)',
28
+ '100': 'var(--pine-dimension-100)',
29
+ '125': 'var(--pine-dimension-125)',
30
+ '150': 'var(--pine-dimension-150)',
31
+ '200': 'var(--pine-dimension-200)',
32
+ '250': 'var(--pine-dimension-250)',
33
+ '300': 'var(--pine-dimension-300)',
34
+ '350': 'var(--pine-dimension-350)',
35
+ '400': 'var(--pine-dimension-400)',
36
+ '450': 'var(--pine-dimension-450)',
37
+ '500': 'var(--pine-dimension-500)',
38
+ '550': 'var(--pine-dimension-550)',
39
+ '600': 'var(--pine-dimension-600)',
40
+ '650': 'var(--pine-dimension-650)',
41
+ '700': 'var(--pine-dimension-700)',
42
+ '750': 'var(--pine-dimension-750)',
43
+ '800': 'var(--pine-dimension-800)'
26
44
  };
27
45
  }
28
46
  render() {
@@ -42,7 +60,7 @@ const PdsRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsRow extends HTMLEleme
42
60
  })), (this.minHeight && {
43
61
  'min-height': this.minHeight,
44
62
  }));
45
- return h(Host, { key: 'd9fd2087c959b16ca168ee2b011a3d4bd466c113', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
63
+ return h(Host, { key: '8e3f5095c33ca22b26dc2cd328ec84663e3bc46b', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
46
64
  }
47
65
  static get style() { return pdsRowCss; }
48
66
  }, [0, "pds-row", {