@baloise/ds-core 20.0.0-next.7 → 20.0.0-next.9

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 (488) hide show
  1. package/components/ds-accordion.js +1 -1
  2. package/components/ds-alert-container.js +1 -1
  3. package/components/ds-app.js +1 -1
  4. package/components/ds-badge.js +1 -1
  5. package/components/ds-button-group.js +1 -1
  6. package/components/ds-button.js +1 -1
  7. package/components/ds-card-actions.js +1 -1
  8. package/components/ds-card-content.js +1 -1
  9. package/components/ds-card-subtitle.js +1 -1
  10. package/components/ds-card-title.js +1 -1
  11. package/components/ds-card.js +1 -1
  12. package/components/ds-carousel.js +1 -1
  13. package/components/ds-checkbox-group.js +1 -1
  14. package/components/ds-close.js +1 -1
  15. package/components/ds-content.js +1 -1
  16. package/components/ds-data-item.js +1 -1
  17. package/components/ds-date.js +1 -1
  18. package/components/ds-drawer.js +1 -1
  19. package/components/ds-file-upload.js +1 -1
  20. package/components/ds-footer.js +1 -1
  21. package/components/ds-heading.js +1 -1
  22. package/components/ds-hint.js +1 -1
  23. package/components/ds-icon.js +1 -1
  24. package/components/ds-input-slider.js +1 -1
  25. package/components/ds-input.js +1 -1
  26. package/components/ds-item.js +1 -1
  27. package/components/ds-modal.js +1 -1
  28. package/components/ds-navbar.js +1 -1
  29. package/components/ds-notification.js +1 -1
  30. package/components/ds-number-input.js +1 -1
  31. package/components/ds-pagination.js +1 -1
  32. package/components/ds-popup.js +1 -1
  33. package/components/ds-radio-group.js +1 -1
  34. package/components/ds-segment.js +1 -1
  35. package/components/ds-select.js +1 -1
  36. package/components/ds-snackbar.js +1 -1
  37. package/components/ds-spinner.js +1 -1
  38. package/components/ds-stack.js +1 -1
  39. package/components/ds-step.js +1 -1
  40. package/components/ds-steps.js +1 -1
  41. package/components/ds-tabs.js +1 -1
  42. package/components/ds-tag.js +1 -1
  43. package/components/ds-textarea.js +1 -1
  44. package/components/ds-toast.js +1 -1
  45. package/components/index.js +1 -1
  46. package/components/{p-DenZRIeA.js → p-BXJT6RzI.js} +1 -1
  47. package/components/p-BdLq-Ecc.js +4 -0
  48. package/components/{p-DSeYzuO7.js → p-BmKEBYP4.js} +1 -1
  49. package/components/p-BoWAkGY5.js +4 -0
  50. package/components/{p-DYTOWDAA.js → p-CTbJFS-e.js} +1 -1
  51. package/components/{p-VsWv65bD.js → p-CaMOovXn.js} +1 -1
  52. package/components/p-Ce8PV2ZO.js +4 -0
  53. package/components/p-CmBtAxar.js +4 -0
  54. package/components/p-D8gpyiFZ.js +4 -0
  55. package/components/{p-ng5ZzTOj.js → p-DBX_haol.js} +1 -1
  56. package/components/{p-ABj0eATe.js → p-DPbhygsR.js} +1 -1
  57. package/components/{p-BwwAKEvn.js → p-DZzsZ_YH.js} +1 -1
  58. package/components/p-DbUsvqrz.js +4 -0
  59. package/components/p-Dbqy6lZU.js +5 -0
  60. package/components/{p-D9YYP2SG.js → p-fS80bKHo.js} +1 -1
  61. package/components/{p-D5zw5ezD.js → p-hPpcXLRP.js} +1 -1
  62. package/components/p-o0H7eIVX.js +5 -0
  63. package/components/p-std0LSH2.js +4 -0
  64. package/components/p-u5aa74vh.js +2 -1
  65. package/components/p-wud2RGEy.js +4 -0
  66. package/dist/cjs/{breakpoints.decorator-DY5iYsA5.js → breakpoints.decorator-DbttiLa9.js} +1 -1
  67. package/dist/cjs/{breakpoints.subject-CzhLlIwN.js → breakpoints.subject-CNyiZaBe.js} +3 -3
  68. package/dist/cjs/{button.interfaces-CqlUGR-N.js → button.interfaces-BKyK0H_f.js} +0 -1
  69. package/dist/cjs/{config.decorator-C64wi-MA.js → config.decorator-bU7c6ybP.js} +1 -1
  70. package/dist/cjs/{config.utils-BhWbrVRz.js → config.utils-BhJig3l5.js} +1 -1
  71. package/dist/cjs/{create-validator-decorator-Ctd288ve.js → create-validator-decorator-CiRieHJL.js} +1 -1
  72. package/dist/cjs/design-system.cjs.js +2 -2
  73. package/dist/cjs/{device-CIliLOe9.js → device-DM1GXL99.js} +1 -1
  74. package/dist/cjs/ds-accordion.cjs.entry.js +9 -9
  75. package/dist/cjs/ds-alert-container.cjs.entry.js +13 -17
  76. package/dist/cjs/ds-app.cjs.entry.js +35 -8
  77. package/dist/cjs/ds-badge.cjs.entry.js +20 -39
  78. package/dist/cjs/ds-button-group.cjs.entry.js +7 -7
  79. package/dist/cjs/ds-button_2.cjs.entry.js +20 -20
  80. package/dist/cjs/ds-card-actions.cjs.entry.js +4 -4
  81. package/dist/cjs/ds-card-content.cjs.entry.js +3 -3
  82. package/dist/cjs/ds-card-header.cjs.entry.js +5 -5
  83. package/dist/cjs/ds-card-subtitle.cjs.entry.js +10 -14
  84. package/dist/cjs/ds-card-title.cjs.entry.js +8 -14
  85. package/dist/cjs/ds-card.cjs.entry.js +7 -7
  86. package/dist/cjs/ds-carousel-item.cjs.entry.js +6 -6
  87. package/dist/cjs/ds-carousel.cjs.entry.js +8 -8
  88. package/dist/cjs/ds-checkbox-group.cjs.entry.js +22 -15
  89. package/dist/cjs/ds-checkbox.cjs.entry.js +7 -7
  90. package/dist/cjs/ds-content_2.cjs.entry.js +18 -68
  91. package/dist/cjs/ds-data-item.cjs.entry.js +6 -6
  92. package/dist/cjs/ds-data-label.cjs.entry.js +4 -4
  93. package/dist/cjs/ds-data-value.cjs.entry.js +2 -2
  94. package/dist/cjs/ds-data.cjs.entry.js +4 -4
  95. package/dist/cjs/ds-date.cjs.entry.js +18 -12
  96. package/dist/cjs/ds-divider_2.cjs.entry.js +12 -12
  97. package/dist/cjs/ds-drawer_2.cjs.entry.js +9 -9
  98. package/dist/cjs/ds-file-upload.cjs.entry.js +18 -11
  99. package/dist/cjs/ds-footer.cjs.entry.js +7 -7
  100. package/dist/cjs/ds-heading.cjs.entry.js +21 -37
  101. package/dist/cjs/ds-hint-text.cjs.entry.js +2 -2
  102. package/dist/cjs/ds-hint-title.cjs.entry.js +2 -2
  103. package/dist/cjs/ds-hint.cjs.entry.js +11 -11
  104. package/dist/cjs/ds-icon_2.cjs.entry.js +19 -23
  105. package/dist/cjs/ds-input-slider.cjs.entry.js +21 -14
  106. package/dist/cjs/ds-input.cjs.entry.js +20 -11
  107. package/dist/cjs/ds-item.cjs.entry.js +7 -7
  108. package/dist/cjs/ds-label.cjs.entry.js +8 -8
  109. package/dist/cjs/ds-list.cjs.entry.js +4 -4
  110. package/dist/cjs/ds-modal-body.cjs.entry.js +2 -2
  111. package/dist/cjs/ds-modal-header.cjs.entry.js +2 -2
  112. package/dist/cjs/ds-modal.cjs.entry.js +7 -7
  113. package/dist/cjs/ds-navbar.cjs.entry.js +14 -14
  114. package/dist/cjs/ds-notification.cjs.entry.js +16 -22
  115. package/dist/cjs/ds-number-input.cjs.entry.js +20 -11
  116. package/dist/cjs/ds-pagination.cjs.entry.js +12 -12
  117. package/dist/cjs/ds-progress-bar.cjs.entry.js +12 -12
  118. package/dist/cjs/ds-radio-group.cjs.entry.js +21 -14
  119. package/dist/cjs/ds-radio.cjs.entry.js +7 -7
  120. package/dist/cjs/ds-segment-item.cjs.entry.js +4 -4
  121. package/dist/cjs/ds-segment.cjs.entry.js +21 -15
  122. package/dist/cjs/ds-select-optgroup.cjs.entry.js +4 -4
  123. package/dist/cjs/ds-select-option.cjs.entry.js +4 -4
  124. package/dist/cjs/ds-select.cjs.entry.js +18 -13
  125. package/dist/cjs/ds-shape.cjs.entry.js +4 -4
  126. package/dist/cjs/ds-snackbar.cjs.entry.js +36 -24
  127. package/dist/cjs/ds-step-panel.cjs.entry.js +5 -5
  128. package/dist/cjs/ds-step.cjs.entry.js +5 -5
  129. package/dist/cjs/ds-steps.cjs.entry.js +7 -14
  130. package/dist/cjs/ds-tab-panel.cjs.entry.js +5 -5
  131. package/dist/cjs/ds-tab.cjs.entry.js +5 -5
  132. package/dist/cjs/ds-tabs.cjs.entry.js +8 -8
  133. package/dist/cjs/ds-tag-group.cjs.entry.js +2 -2
  134. package/dist/cjs/ds-tag.cjs.entry.js +7 -7
  135. package/dist/cjs/ds-text.cjs.entry.js +6 -6
  136. package/dist/cjs/ds-textarea.cjs.entry.js +19 -10
  137. package/dist/cjs/ds-toast.cjs.entry.js +32 -20
  138. package/dist/cjs/ds-toggle.cjs.entry.js +5 -5
  139. package/dist/cjs/ds-tooltip.cjs.entry.js +4 -4
  140. package/dist/cjs/{field.util-g9nhtuZH.js → field.util-C7hgA41e.js} +32 -2
  141. package/dist/cjs/{focus-BUszBnbl.js → focus-CHzvkERd.js} +1 -1
  142. package/dist/cjs/{form-control-B4Qf8fg-.js → form-control-CmRONWa7.js} +1 -1
  143. package/dist/cjs/{has-value-rj502MLA.js → has-value-3s9rhB3K.js} +1 -1
  144. package/dist/cjs/{heading.interfaces-B5NJ2yjL.js → heading.interfaces-CAc5LNKb.js} +2 -3
  145. package/dist/cjs/{index-CqInh7Vc.js → index-DD7qcaNz.js} +75 -1
  146. package/dist/cjs/index.cjs.js +7 -7
  147. package/dist/cjs/{listener-1PZJDuOW.js → listener-CAzIWSXQ.js} +1 -1
  148. package/dist/cjs/loader.cjs.js +2 -2
  149. package/dist/cjs/{one-of-BotLfpAZ.js → one-of-xdIxH9e7.js} +1 -1
  150. package/dist/cjs/{required-BAhZ8oRM.js → required-Dh6TQNa1.js} +1 -1
  151. package/dist/cjs/{resize.decorator-Sqefy8ta.js → resize.decorator-C53-TjuS.js} +2 -2
  152. package/dist/cjs/{scroll--5tnvpG1.js → scroll-BOeiw1-E.js} +1 -1
  153. package/dist/cjs/{svg-D9RbiR8R.js → svg-B9eUbG7a.js} +96 -33
  154. package/dist/cjs/{tslib.es6-BIB10hMZ.js → tslib.es6-DMgN1vwG.js} +1 -1
  155. package/dist/cjs/{type-Br_NbeTX.js → type-BcP2cAG-.js} +1 -1
  156. package/dist/collection/components/accordion/accordion.host.css +1 -1
  157. package/dist/collection/components/alert/alert-container.interfaces.js +1 -1
  158. package/dist/collection/components/alert/alert-container.js +9 -14
  159. package/dist/collection/components/alert/snackbar/snackbar.host.css +1 -1
  160. package/dist/collection/components/alert/snackbar/snackbar.js +22 -10
  161. package/dist/collection/components/alert/toast/toast.host.css +1 -1
  162. package/dist/collection/components/alert/toast/toast.js +20 -8
  163. package/dist/collection/components/app/app.js +30 -3
  164. package/dist/collection/components/badge/badge.host.css +1 -1
  165. package/dist/collection/components/badge/badge.interfaces.js +3 -3
  166. package/dist/collection/components/badge/badge.js +20 -42
  167. package/dist/collection/components/button/button.interfaces.js +0 -1
  168. package/dist/collection/components/button/button.js +1 -1
  169. package/dist/collection/components/card/card-content/card-content.host.css +1 -1
  170. package/dist/collection/components/card/card-subtitle/card-subtitle.js +6 -11
  171. package/dist/collection/components/card/card-title/card-title.js +4 -11
  172. package/dist/collection/components/card/card.host.css +1 -1
  173. package/dist/collection/components/checkbox/checkbox-group/checkbox-group.js +16 -7
  174. package/dist/collection/components/checkbox/test/checkbox.visual.play.js +1 -0
  175. package/dist/collection/components/close/close.host.css +1 -1
  176. package/dist/collection/components/close/close.interfaces.js +1 -1
  177. package/dist/collection/components/close/close.js +14 -16
  178. package/dist/collection/components/content/content.host.css +1 -1
  179. package/dist/collection/components/content/content.interfaces.js +2 -3
  180. package/dist/collection/components/content/content.js +21 -60
  181. package/dist/collection/components/date/date.js +12 -4
  182. package/dist/collection/components/date/test/date.visual.play.js +1 -0
  183. package/dist/collection/components/file-upload/file-upload.js +13 -4
  184. package/dist/collection/components/file-upload/test/file-upload.visual.play.js +10 -1
  185. package/dist/collection/components/heading/heading.host.css +1 -1
  186. package/dist/collection/components/heading/heading.interfaces.js +2 -3
  187. package/dist/collection/components/heading/heading.js +25 -45
  188. package/dist/collection/components/input/field.util.js +1 -1
  189. package/dist/collection/components/input/input.js +14 -3
  190. package/dist/collection/components/input/test/input.visual.play.js +2 -1
  191. package/dist/collection/components/input-slider/input-slider.js +17 -8
  192. package/dist/collection/components/input-slider/test/input-slider.visual.play.js +1 -0
  193. package/dist/collection/components/list/item/item.host.css +1 -1
  194. package/dist/collection/components/notification/notification.host.css +1 -1
  195. package/dist/collection/components/notification/notification.interfaces.js +1 -2
  196. package/dist/collection/components/notification/notification.js +11 -17
  197. package/dist/collection/components/number-input/number-input.js +13 -2
  198. package/dist/collection/components/number-input/test/number-input.visual.play.js +1 -1
  199. package/dist/collection/components/radio/radio-group/radio-group.js +16 -7
  200. package/dist/collection/components/radio/test/radio.visual.play.js +1 -0
  201. package/dist/collection/components/segment/segment/segment.js +15 -7
  202. package/dist/collection/components/segment/test/segment.visual.play.js +1 -0
  203. package/dist/collection/components/select/select.host.css +1 -1
  204. package/dist/collection/components/select/select.js +11 -4
  205. package/dist/collection/components/select/test/select.visual.play.js +2 -2
  206. package/dist/collection/components/spinner/spinner.host.css +1 -1
  207. package/dist/collection/components/spinner/spinner.interfaces.js +1 -1
  208. package/dist/collection/components/spinner/spinner.js +12 -16
  209. package/dist/collection/components/stack/stack.host.css +1 -1
  210. package/dist/collection/components/stack/stack.interfaces.js +1 -2
  211. package/dist/collection/components/stack/stack.js +13 -33
  212. package/dist/collection/components/steps/steps/steps.js +1 -8
  213. package/dist/collection/components/steps/test/steps.component.play.js +29 -1
  214. package/dist/collection/components/tag/tag.host.css +1 -1
  215. package/dist/collection/components/textarea/test/textarea.visual.play.js +2 -2
  216. package/dist/collection/components/textarea/textarea.js +13 -2
  217. package/dist/collection/global/constants/version.constant.js +1 -1
  218. package/dist/collection/global/global.js +2 -0
  219. package/dist/collection/global/token-preview.js +75 -0
  220. package/dist/collection/global/token-preview.types.js +1 -0
  221. package/dist/collection/utils/index.js +1 -0
  222. package/dist/collection/utils/invalid-text-slot.js +31 -0
  223. package/dist/design-system/design-system.esm.js +1 -1
  224. package/dist/design-system/index.esm.js +1 -1
  225. package/dist/design-system/{p-b4738dc266.entry.js → p-001b20140b.entry.js} +1 -1
  226. package/dist/design-system/p-0c031d8d90.entry.js +4 -0
  227. package/dist/design-system/p-0c18812daa.entry.js +4 -0
  228. package/dist/design-system/p-14e27a87da.entry.js +4 -0
  229. package/dist/design-system/{p-564ee4d78f.entry.js → p-19e0638e5c.entry.js} +1 -1
  230. package/dist/design-system/{p-ee76bf354e.entry.js → p-1dc3406415.entry.js} +1 -1
  231. package/dist/design-system/{p-3d2539929c.entry.js → p-200a0ea72c.entry.js} +1 -1
  232. package/dist/design-system/{p-ce67cbbed5.entry.js → p-2516721737.entry.js} +1 -1
  233. package/dist/design-system/{p-24c85e99f5.entry.js → p-2a67e9b4eb.entry.js} +1 -1
  234. package/dist/design-system/p-2cc9740eb6.entry.js +4 -0
  235. package/dist/design-system/p-37295c3a5d.entry.js +4 -0
  236. package/dist/design-system/{p-b44641ec28.entry.js → p-3d1f15112e.entry.js} +1 -1
  237. package/dist/design-system/p-3de8e2b6c9.entry.js +4 -0
  238. package/dist/design-system/{p-0bf3d4d939.entry.js → p-4042b35fee.entry.js} +1 -1
  239. package/dist/design-system/{p-00e6b1b780.entry.js → p-40b3d4d0f9.entry.js} +1 -1
  240. package/dist/design-system/{p-5f1a8be21c.entry.js → p-45af50a69f.entry.js} +1 -1
  241. package/dist/design-system/p-4df80c06f8.entry.js +4 -0
  242. package/dist/design-system/p-4f12c6449d.entry.js +4 -0
  243. package/dist/design-system/p-4f95f06b86.entry.js +4 -0
  244. package/dist/design-system/p-573457cd4b.entry.js +4 -0
  245. package/dist/design-system/{p-2eb6067210.entry.js → p-662983c8bd.entry.js} +1 -1
  246. package/dist/design-system/{p-32e156bc72.entry.js → p-68693c06a1.entry.js} +1 -1
  247. package/dist/design-system/{p-9f9364d7df.entry.js → p-69784a200e.entry.js} +1 -1
  248. package/dist/design-system/{p-ChSKXFK5.js → p-6Iq8BM7N.js} +1 -1
  249. package/dist/design-system/{p-a42ecb68a0.entry.js → p-6ba71ce374.entry.js} +1 -1
  250. package/dist/design-system/{p-5ded2b6438.entry.js → p-72c08ce551.entry.js} +1 -1
  251. package/dist/design-system/p-72fe1ab876.entry.js +4 -0
  252. package/dist/design-system/p-73b26207bf.entry.js +4 -0
  253. package/dist/design-system/{p-b8669a617c.entry.js → p-7576fb01bf.entry.js} +1 -1
  254. package/dist/design-system/p-819d71abe1.entry.js +4 -0
  255. package/dist/design-system/{p-6c60833550.entry.js → p-88682a66d5.entry.js} +1 -1
  256. package/dist/design-system/{p-ab8bee7022.entry.js → p-8a7c2f5b0a.entry.js} +1 -1
  257. package/dist/design-system/{p-5d4a5d0b61.entry.js → p-8bfcfd7b07.entry.js} +1 -1
  258. package/dist/design-system/p-936673f9f9.entry.js +4 -0
  259. package/dist/design-system/{p-f7be5b6114.entry.js → p-9537ebc880.entry.js} +1 -1
  260. package/dist/design-system/{p-3e3a6799d6.entry.js → p-96d37205c9.entry.js} +1 -1
  261. package/dist/design-system/{p-4bfc094a03.entry.js → p-97ad0e648a.entry.js} +1 -1
  262. package/dist/design-system/p-9e0f190f06.entry.js +4 -0
  263. package/dist/design-system/{p-adc58b2821.entry.js → p-9f746ea4e3.entry.js} +1 -1
  264. package/dist/design-system/{p-DJBD4skP.js → p-B2dqoehY.js} +2 -2
  265. package/dist/design-system/p-B9ddSbbe.js +4 -0
  266. package/dist/design-system/p-BDcIydUK.js +4 -0
  267. package/dist/design-system/p-BdLq-Ecc.js +4 -0
  268. package/dist/design-system/{p-Dk0GEN2t.js → p-BjaiDrCD.js} +1 -1
  269. package/dist/design-system/{p-DoHCSvjl.js → p-BnJgNfen.js} +1 -1
  270. package/dist/design-system/{p-DOvdnojj.js → p-Bnpwi9iD.js} +1 -1
  271. package/dist/design-system/p-C6AmBSV7.js +4 -0
  272. package/dist/design-system/{p-Chgme2NJ.js → p-CBGYLNZZ.js} +1 -1
  273. package/dist/design-system/{p-1A9jKraP.js → p-CR2JnhVY.js} +1 -1
  274. package/dist/design-system/{p-CfgwSore.js → p-ClSAXeZN.js} +1 -1
  275. package/dist/design-system/p-D-_px2sY.js +5 -0
  276. package/dist/design-system/p-DNQg2PVW.js +4 -0
  277. package/dist/design-system/p-DQGbRzw_.js +4 -0
  278. package/dist/design-system/{p-x2KazRjl.js → p-DWdcUUdS.js} +1 -1
  279. package/dist/design-system/{p-C5Rtikeh.js → p-DuKlHFAK.js} +1 -1
  280. package/dist/design-system/{p-B-v2Wm-V.js → p-MUUOiuTm.js} +2 -2
  281. package/dist/design-system/p-_Ywzmi-B.js +4 -0
  282. package/dist/design-system/{p-Y0rKqVvm.js → p-_rk5qARQ.js} +1 -1
  283. package/dist/design-system/{p-44981aaf8d.entry.js → p-a343b84e8a.entry.js} +1 -1
  284. package/dist/design-system/p-a3ed278181.entry.js +4 -0
  285. package/dist/design-system/{p-CrYAd3JT.js → p-aPnyJLhr.js} +1 -1
  286. package/dist/design-system/{p-fa613cd0d1.entry.js → p-abcc8edf7e.entry.js} +1 -1
  287. package/dist/design-system/{p-3d675c6507.entry.js → p-ac55e3783c.entry.js} +1 -1
  288. package/dist/design-system/{p-3e43fa2bc6.entry.js → p-ac7f3f89be.entry.js} +1 -1
  289. package/dist/design-system/{p-1b1e3ad99c.entry.js → p-ae8753bf2a.entry.js} +1 -1
  290. package/dist/design-system/{p-d3a80b8422.entry.js → p-afea3755c2.entry.js} +1 -1
  291. package/dist/design-system/{p-0ea6cdd218.entry.js → p-bd31b396d8.entry.js} +1 -1
  292. package/dist/design-system/p-bd740897a1.entry.js +4 -0
  293. package/dist/design-system/p-bec54c38fc.entry.js +4 -0
  294. package/dist/design-system/{p-1750b3c4f1.entry.js → p-bf03129378.entry.js} +1 -1
  295. package/dist/design-system/{p-85bf3794f9.entry.js → p-bfd0557b47.entry.js} +1 -1
  296. package/dist/design-system/{p-7246bfb9a0.entry.js → p-c07aa25e4d.entry.js} +1 -1
  297. package/dist/design-system/p-c19c74c2b1.entry.js +4 -0
  298. package/dist/design-system/p-c8f95bd01a.entry.js +4 -0
  299. package/dist/design-system/{p-a782c877ea.entry.js → p-d5d7700fd3.entry.js} +1 -1
  300. package/dist/design-system/p-d727654ec3.entry.js +4 -0
  301. package/dist/design-system/{p-aa3aee2591.entry.js → p-dadd7a84bc.entry.js} +1 -1
  302. package/dist/design-system/p-dd5e815ef3.entry.js +4 -0
  303. package/dist/design-system/p-e16572468e.entry.js +4 -0
  304. package/dist/design-system/{p-8a9d617f75.entry.js → p-e23b6d59c0.entry.js} +1 -1
  305. package/dist/design-system/p-e94b66c13e.entry.js +4 -0
  306. package/dist/design-system/{p-78112e7b35.entry.js → p-ec3f2ded29.entry.js} +1 -1
  307. package/dist/design-system/{p-2b038255c5.entry.js → p-ed3f364d1f.entry.js} +1 -1
  308. package/dist/design-system/{p-599a693db3.entry.js → p-eedaf7fe85.entry.js} +1 -1
  309. package/dist/design-system/p-ef1bf78788.entry.js +4 -0
  310. package/dist/design-system/p-f7787fca37.entry.js +4 -0
  311. package/dist/design-system/{p-dbd3d3b3d3.entry.js → p-fd868dc1f5.entry.js} +1 -1
  312. package/dist/esm/{breakpoints.decorator-D9M4v98c.js → breakpoints.decorator-CIweMjJQ.js} +1 -1
  313. package/dist/esm/{breakpoints.subject-DHZ7TzYV.js → breakpoints.subject-CUVOWezN.js} +3 -3
  314. package/dist/esm/{button.interfaces-BPGfTrrM.js → button.interfaces-C6AmBSV7.js} +0 -1
  315. package/dist/esm/{config.decorator-CRYVBTkX.js → config.decorator-CyvsD1EY.js} +1 -1
  316. package/dist/esm/{config.utils-CR4Xudpz.js → config.utils-Db2OSTX3.js} +1 -1
  317. package/dist/esm/{create-validator-decorator-fUav5byo.js → create-validator-decorator-g9TfAa1g.js} +1 -1
  318. package/dist/esm/design-system.js +3 -3
  319. package/dist/esm/{device-CapioAfe.js → device-CtidwsPr.js} +1 -1
  320. package/dist/esm/ds-accordion.entry.js +9 -9
  321. package/dist/esm/ds-alert-container.entry.js +13 -17
  322. package/dist/esm/ds-app.entry.js +35 -8
  323. package/dist/esm/ds-badge.entry.js +20 -39
  324. package/dist/esm/ds-button-group.entry.js +7 -7
  325. package/dist/esm/ds-button_2.entry.js +20 -20
  326. package/dist/esm/ds-card-actions.entry.js +4 -4
  327. package/dist/esm/ds-card-content.entry.js +3 -3
  328. package/dist/esm/ds-card-header.entry.js +5 -5
  329. package/dist/esm/ds-card-subtitle.entry.js +10 -14
  330. package/dist/esm/ds-card-title.entry.js +8 -14
  331. package/dist/esm/ds-card.entry.js +7 -7
  332. package/dist/esm/ds-carousel-item.entry.js +6 -6
  333. package/dist/esm/ds-carousel.entry.js +8 -8
  334. package/dist/esm/ds-checkbox-group.entry.js +22 -15
  335. package/dist/esm/ds-checkbox.entry.js +7 -7
  336. package/dist/esm/ds-content_2.entry.js +18 -68
  337. package/dist/esm/ds-data-item.entry.js +6 -6
  338. package/dist/esm/ds-data-label.entry.js +4 -4
  339. package/dist/esm/ds-data-value.entry.js +2 -2
  340. package/dist/esm/ds-data.entry.js +4 -4
  341. package/dist/esm/ds-date.entry.js +18 -12
  342. package/dist/esm/ds-divider_2.entry.js +12 -12
  343. package/dist/esm/ds-drawer_2.entry.js +9 -9
  344. package/dist/esm/ds-file-upload.entry.js +18 -11
  345. package/dist/esm/ds-footer.entry.js +7 -7
  346. package/dist/esm/ds-heading.entry.js +21 -37
  347. package/dist/esm/ds-hint-text.entry.js +2 -2
  348. package/dist/esm/ds-hint-title.entry.js +2 -2
  349. package/dist/esm/ds-hint.entry.js +11 -11
  350. package/dist/esm/ds-icon_2.entry.js +19 -23
  351. package/dist/esm/ds-input-slider.entry.js +21 -14
  352. package/dist/esm/ds-input.entry.js +20 -11
  353. package/dist/esm/ds-item.entry.js +7 -7
  354. package/dist/esm/ds-label.entry.js +8 -8
  355. package/dist/esm/ds-list.entry.js +4 -4
  356. package/dist/esm/ds-modal-body.entry.js +2 -2
  357. package/dist/esm/ds-modal-header.entry.js +2 -2
  358. package/dist/esm/ds-modal.entry.js +7 -7
  359. package/dist/esm/ds-navbar.entry.js +14 -14
  360. package/dist/esm/ds-notification.entry.js +16 -22
  361. package/dist/esm/ds-number-input.entry.js +20 -11
  362. package/dist/esm/ds-pagination.entry.js +12 -12
  363. package/dist/esm/ds-progress-bar.entry.js +12 -12
  364. package/dist/esm/ds-radio-group.entry.js +21 -14
  365. package/dist/esm/ds-radio.entry.js +7 -7
  366. package/dist/esm/ds-segment-item.entry.js +4 -4
  367. package/dist/esm/ds-segment.entry.js +21 -15
  368. package/dist/esm/ds-select-optgroup.entry.js +4 -4
  369. package/dist/esm/ds-select-option.entry.js +4 -4
  370. package/dist/esm/ds-select.entry.js +18 -13
  371. package/dist/esm/ds-shape.entry.js +4 -4
  372. package/dist/esm/ds-snackbar.entry.js +36 -24
  373. package/dist/esm/ds-step-panel.entry.js +5 -5
  374. package/dist/esm/ds-step.entry.js +5 -5
  375. package/dist/esm/ds-steps.entry.js +7 -14
  376. package/dist/esm/ds-tab-panel.entry.js +5 -5
  377. package/dist/esm/ds-tab.entry.js +5 -5
  378. package/dist/esm/ds-tabs.entry.js +8 -8
  379. package/dist/esm/ds-tag-group.entry.js +2 -2
  380. package/dist/esm/ds-tag.entry.js +7 -7
  381. package/dist/esm/ds-text.entry.js +6 -6
  382. package/dist/esm/ds-textarea.entry.js +19 -10
  383. package/dist/esm/ds-toast.entry.js +32 -20
  384. package/dist/esm/ds-toggle.entry.js +5 -5
  385. package/dist/esm/ds-tooltip.entry.js +4 -4
  386. package/dist/esm/{field.util-neIQBS-h.js → field.util-Dl02gvlr.js} +32 -3
  387. package/dist/esm/{focus-6OAqvfus.js → focus-C1_jVoAm.js} +1 -1
  388. package/dist/esm/{form-control-DhinyMa9.js → form-control-BAP86QSm.js} +1 -1
  389. package/dist/esm/{has-value-Dmsj8ZQw.js → has-value-CADjf9QZ.js} +1 -1
  390. package/dist/esm/{heading.interfaces-Ceu7FIWM.js → heading.interfaces-BdLq-Ecc.js} +2 -3
  391. package/dist/esm/{index-B-v2Wm-V.js → index-MUUOiuTm.js} +75 -1
  392. package/dist/esm/index.js +10 -10
  393. package/dist/esm/{listener-DIZDQOuO.js → listener-DiVrGAqj.js} +1 -1
  394. package/dist/esm/loader.js +3 -3
  395. package/dist/esm/{one-of-CjRvS2Tk.js → one-of-rLykP5eX.js} +1 -1
  396. package/dist/esm/{required-Dtml5IID.js → required-BsfIY-qW.js} +1 -1
  397. package/dist/esm/{resize.decorator-eogZBBk6.js → resize.decorator-BNy5tJCt.js} +2 -2
  398. package/dist/esm/{scroll-v2MaEkiZ.js → scroll-D4cC-Fsr.js} +1 -1
  399. package/dist/esm/{svg-B8KVoKrH.js → svg-D-_px2sY.js} +96 -33
  400. package/dist/esm/{tslib.es6-n47B6oUi.js → tslib.es6-C7vR-gMn.js} +1 -1
  401. package/dist/esm/{type-7qEQcw90.js → type-Bqge296W.js} +1 -1
  402. package/dist/types/components/alert/alert-container.d.ts +5 -6
  403. package/dist/types/components/alert/alert-container.interfaces.d.ts +1 -1
  404. package/dist/types/components/alert/snackbar/snackbar.d.ts +10 -6
  405. package/dist/types/components/alert/toast/toast.d.ts +8 -4
  406. package/dist/types/components/app/app.d.ts +23 -0
  407. package/dist/types/components/badge/badge.d.ts +12 -4
  408. package/dist/types/components/badge/badge.interfaces.d.ts +3 -3
  409. package/dist/types/components/button/button.interfaces.d.ts +1 -1
  410. package/dist/types/components/card/card-subtitle/card-subtitle.d.ts +1 -1
  411. package/dist/types/components/card/card-title/card-title.d.ts +1 -1
  412. package/dist/types/components/checkbox/checkbox-group/checkbox-group.d.ts +4 -0
  413. package/dist/types/components/close/close.d.ts +14 -2
  414. package/dist/types/components/close/close.interfaces.d.ts +1 -1
  415. package/dist/types/components/content/content.d.ts +6 -6
  416. package/dist/types/components/content/content.interfaces.d.ts +3 -3
  417. package/dist/types/components/date/date.d.ts +3 -0
  418. package/dist/types/components/file-upload/file-upload.d.ts +3 -0
  419. package/dist/types/components/heading/heading.d.ts +10 -10
  420. package/dist/types/components/heading/heading.interfaces.d.ts +3 -3
  421. package/dist/types/components/input/input.d.ts +4 -0
  422. package/dist/types/components/input-slider/input-slider.d.ts +4 -1
  423. package/dist/types/components/notification/notification.d.ts +5 -5
  424. package/dist/types/components/notification/notification.interfaces.d.ts +2 -2
  425. package/dist/types/components/number-input/number-input.d.ts +4 -0
  426. package/dist/types/components/radio/radio-group/radio-group.d.ts +4 -0
  427. package/dist/types/components/segment/segment/segment.d.ts +3 -0
  428. package/dist/types/components/select/select.d.ts +3 -0
  429. package/dist/types/components/spinner/spinner.d.ts +8 -7
  430. package/dist/types/components/spinner/spinner.interfaces.d.ts +1 -1
  431. package/dist/types/components/stack/stack.d.ts +3 -3
  432. package/dist/types/components/stack/stack.interfaces.d.ts +2 -2
  433. package/dist/types/components/textarea/textarea.d.ts +4 -0
  434. package/dist/types/components.d.ts +29 -74
  435. package/dist/types/global/token-preview.d.ts +8 -0
  436. package/dist/types/global/token-preview.types.d.ts +20 -0
  437. package/dist/types/utils/index.d.ts +1 -0
  438. package/dist/types/utils/invalid-text-slot.d.ts +9 -0
  439. package/docs/cem.json +100 -92
  440. package/docs/components.json +1246 -1409
  441. package/docs/html.html-data.json +1 -1
  442. package/docs/visual-pages.json +51 -0
  443. package/package.json +29 -6
  444. package/sbom.cdx.json +35379 -17251
  445. package/components/p--EKmxaBS.js +0 -4
  446. package/components/p-CA7G72wZ.js +0 -4
  447. package/components/p-CWDuQL1i.js +0 -4
  448. package/components/p-Ceu7FIWM.js +0 -4
  449. package/components/p-DQBzmbR6.js +0 -4
  450. package/components/p-DY0y8uLL.js +0 -4
  451. package/components/p-Du7QOHtz.js +0 -5
  452. package/components/p-FBQaJyH0.js +0 -4
  453. package/components/p-gz0Nxl39.js +0 -4
  454. package/components/p-qaSW94OG.js +0 -4
  455. package/dist/design-system/p-0f2a87fa39.entry.js +0 -4
  456. package/dist/design-system/p-138be1f0cc.entry.js +0 -4
  457. package/dist/design-system/p-16b03e0b02.entry.js +0 -4
  458. package/dist/design-system/p-2bb98dfa2f.entry.js +0 -4
  459. package/dist/design-system/p-3824068ae7.entry.js +0 -4
  460. package/dist/design-system/p-3aa3841834.entry.js +0 -4
  461. package/dist/design-system/p-4284d6d646.entry.js +0 -4
  462. package/dist/design-system/p-4b2a59576c.entry.js +0 -4
  463. package/dist/design-system/p-53d9a40010.entry.js +0 -4
  464. package/dist/design-system/p-5a6c6959fa.entry.js +0 -4
  465. package/dist/design-system/p-5f28436626.entry.js +0 -4
  466. package/dist/design-system/p-77e7a6a068.entry.js +0 -4
  467. package/dist/design-system/p-7ebdd14afc.entry.js +0 -4
  468. package/dist/design-system/p-7f42c18249.entry.js +0 -4
  469. package/dist/design-system/p-908e7b073a.entry.js +0 -4
  470. package/dist/design-system/p-B8KVoKrH.js +0 -5
  471. package/dist/design-system/p-BPGfTrrM.js +0 -4
  472. package/dist/design-system/p-Ceu7FIWM.js +0 -4
  473. package/dist/design-system/p-DYPX3A8m.js +0 -4
  474. package/dist/design-system/p-DiUgZKWs.js +0 -4
  475. package/dist/design-system/p-DkhJaoXg.js +0 -4
  476. package/dist/design-system/p-DypNSUAh.js +0 -4
  477. package/dist/design-system/p-Z0zrglhd.js +0 -4
  478. package/dist/design-system/p-a8df8f067b.entry.js +0 -4
  479. package/dist/design-system/p-aa3c0ff536.entry.js +0 -4
  480. package/dist/design-system/p-b390490b0d.entry.js +0 -4
  481. package/dist/design-system/p-b851a43fff.entry.js +0 -4
  482. package/dist/design-system/p-b8f626bf28.entry.js +0 -4
  483. package/dist/design-system/p-bd543e1baf.entry.js +0 -4
  484. package/dist/design-system/p-d4d9205dda.entry.js +0 -4
  485. package/dist/design-system/p-e0b2d6e296.entry.js +0 -4
  486. package/dist/design-system/p-e94ee7391c.entry.js +0 -4
  487. package/dist/design-system/p-faf75173db.entry.js +0 -4
  488. package/dist/design-system/p-fff38e1ca7.entry.js +0 -4
package/dist/collection/components/accordion/accordion.host.css CHANGED
@@ -1 +1 @@
1
- .button{--_button-position: var(--button-position, var(--mod-button-position, static));--_button-top: var(--button-top, var(--mod-button-top));--_button-right: var(--button-right, var(--mod-button-right));--_button-bottom: var(--button-bottom, var(--mod-button-bottom));--_button-left: var(--button-left, var(--mod-button-left));position:var(--_button-position);top:var(--_button-top);right:var(--_button-right);bottom:var(--_button-bottom);left:var(--_button-left);--_button-m: var(--button-m, var(--mod-button-m, 0));--_button-my: var(--button-my, var(--mod-button-my));--_button-mx: var(--button-mx, var(--mod-button-mx));--_button-ml: var(--button-ml, var(--mod-button-ml));--_button-mr: var(--button-mr, var(--mod-button-mr));--_button-mt: var(--button-mt, var(--mod-button-mt));--_button-mb: var(--button-mb, var(--mod-button-mb));margin:var(--_button-m);margin-inline:var(--_button-mx);margin-block:var(--_button-my);margin-left:var(--_button-ml);margin-right:var(--_button-mr);margin-top:var(--_button-mt);margin-bottom:var(--_button-mb);--_button-font-family: var(--button-font-family, var(--mod-button-font-family, var(--ds-button-family)));--_button-font-weight: var(--button-font-weight, var(--mod-button-font-weight, var(--ds-button-weight)));--_button-font-size: var(--button-font-size, var(--mod-button-font-size, var(--ds-button-size-base)));--_button-line-height: var(--button-line-height, var(--mod-button-line-height, var(--ds-button-line-height)));--_button-radius: var(--button-radius, var(--mod-button-radius, var(--ds-button-radius-base)));--_button-color-text: var(--button-color-text, var(--mod-button-color-text, var(--ds-button-color-primary-base-text)));--_button-color-border: var(--button-color-border, var(--mod-button-color-border, var(--ds-button-color-primary-base-border)));--_button-color-background: var(--button-color-background, var(--mod-button-color-background, var(--ds-button-color-primary-base-background)));--_button-color-text-hover: var(--button-color-text-hover, var(--mod-button-color-text-hover, var(--ds-button-color-primary-hover-text)));--_button-color-border-hover: var(--button-color-border-hover, var(--mod-button-color-border-hover, var(--ds-button-color-primary-hover-border)));--_button-color-background-hover: var(--button-color-background-hover, var(--mod-button-color-background-hover, var(--ds-button-color-primary-hover-background)));--_button-color-text-active: var(--button-color-text-active, var(--mod-button-color-text-active, var(--ds-button-color-primary-active-text)));--_button-color-border-active: var(--button-color-border-active, var(--mod-button-color-border-active, var(--ds-button-color-primary-active-border)));--_button-color-background-active: var(--button-color-background-active, var(--mod-button-color-background-active, var(--ds-button-color-primary-active-background)));--_button-width: var(--button-width, var(--mod-button-width, var(--ds-button-width, fit-content)));--_button-border-style: var(--button-border-style, var(--mod-button-border-style, solid));--_button-gap: var(--button-gap, var(--mod-button-gap, 0.5rem));--_button-min-height: var(--button-min-height, var(--mod-button-min-height, 3rem));--_button-min-width: var(--button-min-width, var(--mod-button-min-width, 3rem));--_button-padding-inline: var(--button-padding-inline, var(--mod-button-padding-inline, 1.5rem));--_button-box-shadow: var(--button-box-shadow, var(--mod-button-box-shadow, none));--_button-text-shadow: var(--button-text-shadow, var(--mod-button-text-shadow, none));--_button-focus-shadow: var(--button-focus-shadow, var(--mod-button-focus-shadow, var(--ds-alias-interaction-focus-color-base)))}.button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{.button{display:none !important}}.button{appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;box-shadow:var(--_button-box-shadow);text-shadow:var(--_button-text-shadow);touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);font-size:var(--_button-font-size);font-family:var(--_button-font-family);font-weight:var(--_button-font-weight);line-height:var(--_button-line-height);border-radius:var(--_button-radius);border-style:var(--_button-border-style);border-width:var(--ds-alias-border-width-base);width:var(--_button-width, fit-content);min-width:var(--_button-min-width);min-height:var(--_button-min-height);gap:var(--_button-gap);padding-inline:var(--_button-padding-inline);background-color:var(--_button-color-background);color:var(--_button-color-text);border-color:var(--_button-color-border)}.button::-moz-focus-inner{border:0}.button{--spinner-size: 1.5rem;--icon-color: var(--_button-color-text)}.button:focus,.button:active{outline:none}@media(hover: hover)and (pointer: fine){.button:focus-visible:not(:active),.button.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_button-focus-shadow) 0 0 0 5px !important}}@media(hover: hover)and (pointer: fine){.button:hover,.button.is-hovered{--icon-color: var(--_button-color-text-hover);color:var(--_button-color-text-hover);background-color:var(--_button-color-background-hover);border-color:var(--_button-color-border-hover)}}.button:active,.button.is-pressed{--icon-color: var(--_button-color-text-active);background-color:var(--_button-color-background-active);color:var(--_button-color-text-active);border-color:var(--_button-color-border-active);translate:0 .5px}.button.is-wide{width:100%;flex:1 1 auto}.button.is-link{text-decoration:underline;text-underline-offset:.25rem;text-decoration-thickness:var(--ds-link-border-width)}.button .badge,.button ds-badge{--badge-position: absolute;--badge-top: -0.5rem;--badge-right: -0.5rem}.button.is-primary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border)}.button.is-secondary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border)}.button.is-tertiary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-active-border)}.button.is-tertiary-yellow:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-yellow-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-active-border)}.button.is-tertiary-purple:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-purple-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-active-border)}.button.is-tertiary-green:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-green-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-active-border)}.button.is-tertiary-red:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-red-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-active-border)}.button.is-info:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-info-base-text);--mod-button-color-background: var(--ds-button-color-info-base-background);--mod-button-color-border: var(--ds-button-color-info-base-border);--mod-button-color-text-hover: var(--ds-button-color-info-hover-text);--mod-button-color-background-hover: var(--ds-button-color-info-hover-background);--mod-button-color-border-hover: var(--ds-button-color-info-hover-border);--mod-button-color-text-active: var(--ds-button-color-info-active-text);--mod-button-color-background-active: var(--ds-button-color-info-active-background);--mod-button-color-border-active: var(--ds-button-color-info-active-border)}.button.is-success:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-success-base-text);--mod-button-color-background: var(--ds-button-color-success-base-background);--mod-button-color-border: var(--ds-button-color-success-base-border);--mod-button-color-text-hover: var(--ds-button-color-success-hover-text);--mod-button-color-background-hover: var(--ds-button-color-success-hover-background);--mod-button-color-border-hover: var(--ds-button-color-success-hover-border);--mod-button-color-text-active: var(--ds-button-color-success-active-text);--mod-button-color-background-active: var(--ds-button-color-success-active-background);--mod-button-color-border-active: var(--ds-button-color-success-active-border)}.button.is-warning:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-warning-base-text);--mod-button-color-background: var(--ds-button-color-warning-base-background);--mod-button-color-border: var(--ds-button-color-warning-base-border);--mod-button-color-text-hover: var(--ds-button-color-warning-hover-text);--mod-button-color-background-hover: var(--ds-button-color-warning-hover-background);--mod-button-color-border-hover: var(--ds-button-color-warning-hover-border);--mod-button-color-text-active: var(--ds-button-color-warning-active-text);--mod-button-color-background-active: var(--ds-button-color-warning-active-background);--mod-button-color-border-active: var(--ds-button-color-warning-active-border)}.button.is-danger:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-danger-base-text);--mod-button-color-background: var(--ds-button-color-danger-base-background);--mod-button-color-border: var(--ds-button-color-danger-base-border);--mod-button-color-text-hover: var(--ds-button-color-danger-hover-text);--mod-button-color-background-hover: var(--ds-button-color-danger-hover-background);--mod-button-color-border-hover: var(--ds-button-color-danger-hover-border);--mod-button-color-text-active: var(--ds-button-color-danger-active-text);--mod-button-color-background-active: var(--ds-button-color-danger-active-background);--mod-button-color-border-active: var(--ds-button-color-danger-active-border)}.button.is-link:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-link-base-text);--mod-button-color-background: var(--ds-button-color-link-base-background);--mod-button-color-border: var(--ds-button-color-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-link-active-text);--mod-button-color-background-active: var(--ds-button-color-link-active-background);--mod-button-color-border-active: var(--ds-button-color-link-active-border)}.button.is-text:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-text-base-text);--mod-button-color-background: var(--ds-button-color-text-base-background);--mod-button-color-border: var(--ds-button-color-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-text-active-text);--mod-button-color-background-active: var(--ds-button-color-text-active-background);--mod-button-color-border-active: var(--ds-button-color-text-active-border)}.button.is-primary.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-yellow.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-purple.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-green.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-red.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-info.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-success.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-warning.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-danger.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-secondary.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-secondary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-secondary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-secondary-active-border)}.button.is-tertiary.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-tertiary-active-border)}.button.is-text.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-text-base-text);--mod-button-color-background: var(--ds-button-color-inverted-text-base-background);--mod-button-color-border: var(--ds-button-color-inverted-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-text-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-text-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-text-active-border)}.button.is-link.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-link-base-text);--mod-button-color-background: var(--ds-button-color-inverted-link-base-background);--mod-button-color-border: var(--ds-button-color-inverted-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-link-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-link-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-link-active-border)}.button.is-sm,.button.is-small{--mod-button-font-size: var(--ds-button-size-sm);--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--mod-button-padding-inline: 0.75rem}.button.is-lg,.button.is-large{--mod-button-font-size: var(--ds-button-size-lg);--mod-button-min-height: 3.5rem;--mod-button-min-width: 3.5rem;--mod-button-padding-inline: 1.5rem}.button.is-xl{--mod-button-font-size: var(--ds-button-size-xl);--mod-button-min-height: 5.5rem;--mod-button-min-width: 5.5rem;--mod-button-padding-inline: 1.5rem}.button.is-flat{--mod-button-padding-inline: 0;--mod-button-min-height: 1.75rem}.button.is-rounded{--mod-button-radius: var(--ds-button-radius-rounded)}.button.is-square:not(.is-sm),.button.is-square:not(.is-small){--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}.button.is-square.is-sm,.button.is-square.is-small{--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}.button.is-circle:not(.is-sm),.button.is-circle:not(.is-small){--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}.button.is-circle.is-small,.button.is-circle.is-sm{--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}.button.is-tertiary-purple.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-purple-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-dashed-active-border)}.button.is-tertiary-red.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-red-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-dashed-active-border)}.button.is-tertiary-green.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-green-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-dashed-active-border)}.button.is-tertiary-yellow.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-yellow-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-dashed-active-border)}.button.has-shadow:not(.is-link,.is-text){--mod-button-box-shadow: var(--ds-alias-shadow-box-base)}.button.is-text.has-shadow,.button.is-link.has-shadow{--mod-button-text-shadow: var(--ds-alias-shadow-text)}.button.has-no-wrap{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:stretch}.button:is(input[type=checkbox],input[type=radio])[aria-label]::after{--_button-content: attr(aria-label);content:var(--_button-content)}.button:is(input[type=checkbox],input[type=radio]){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border);appearance:none;vertical-align:middle}.button:is(input[type=checkbox],input[type=radio]):where(input:checked){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border);isolation:isolate}fieldset[disabled] .button,fieldset[disabled] .button:hover,fieldset[disabled] .button.is-hovered,fieldset[disabled] .button:active,fieldset[disabled] .button.is-pressed,fieldset[disabled] .button:focus,fieldset[disabled] .button.is-focused,.button.is-loading,.button.is-loading:hover,.button.is-loading.is-hovered,.button.is-loading:active,.button.is-loading.is-pressed,.button.is-loading:focus,.button.is-loading.is-focused,.button.is-disabled,.button.is-disabled:hover,.button.is-disabled.is-hovered,.button.is-disabled:active,.button.is-disabled.is-pressed,.button.is-disabled:focus,.button.is-disabled.is-focused,.button.is-inverted.is-disabled,.button.is-inverted.is-disabled:hover,.button.is-inverted.is-disabled.is-hovered,.button.is-inverted.is-disabled:active,.button.is-inverted.is-disabled.is-pressed,.button.is-inverted.is-disabled:focus,.button.is-inverted.is-disabled.is-focused,.button[disabled],.button[disabled]:hover,.button[disabled].is-hovered,.button[disabled]:active,.button[disabled].is-pressed,.button[disabled]:focus,.button[disabled].is-focused{pointer-events:none;opacity:1;box-shadow:none;text-decoration:none;cursor:default;translate:0 0;background-color:var(--ds-button-color-disabled-base-background);border-color:var(--ds-button-color-disabled-base-border);color:var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-icon,fieldset[disabled] .button:hover>ds-icon,fieldset[disabled] .button.is-hovered>ds-icon,fieldset[disabled] .button:active>ds-icon,fieldset[disabled] .button.is-pressed>ds-icon,fieldset[disabled] .button:focus>ds-icon,fieldset[disabled] .button.is-focused>ds-icon,.button.is-loading>ds-icon,.button.is-loading:hover>ds-icon,.button.is-loading.is-hovered>ds-icon,.button.is-loading:active>ds-icon,.button.is-loading.is-pressed>ds-icon,.button.is-loading:focus>ds-icon,.button.is-loading.is-focused>ds-icon,.button.is-disabled>ds-icon,.button.is-disabled:hover>ds-icon,.button.is-disabled.is-hovered>ds-icon,.button.is-disabled:active>ds-icon,.button.is-disabled.is-pressed>ds-icon,.button.is-disabled:focus>ds-icon,.button.is-disabled.is-focused>ds-icon,.button.is-inverted.is-disabled>ds-icon,.button.is-inverted.is-disabled:hover>ds-icon,.button.is-inverted.is-disabled.is-hovered>ds-icon,.button.is-inverted.is-disabled:active>ds-icon,.button.is-inverted.is-disabled.is-pressed>ds-icon,.button.is-inverted.is-disabled:focus>ds-icon,.button.is-inverted.is-disabled.is-focused>ds-icon,.button[disabled]>ds-icon,.button[disabled]:hover>ds-icon,.button[disabled].is-hovered>ds-icon,.button[disabled]:active>ds-icon,.button[disabled].is-pressed>ds-icon,.button[disabled]:focus>ds-icon,.button[disabled].is-focused>ds-icon{--icon-color: var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-spinner,fieldset[disabled] .button:hover>ds-spinner,fieldset[disabled] .button.is-hovered>ds-spinner,fieldset[disabled] .button:active>ds-spinner,fieldset[disabled] .button.is-pressed>ds-spinner,fieldset[disabled] .button:focus>ds-spinner,fieldset[disabled] .button.is-focused>ds-spinner,.button.is-loading>ds-spinner,.button.is-loading:hover>ds-spinner,.button.is-loading.is-hovered>ds-spinner,.button.is-loading:active>ds-spinner,.button.is-loading.is-pressed>ds-spinner,.button.is-loading:focus>ds-spinner,.button.is-loading.is-focused>ds-spinner,.button.is-disabled>ds-spinner,.button.is-disabled:hover>ds-spinner,.button.is-disabled.is-hovered>ds-spinner,.button.is-disabled:active>ds-spinner,.button.is-disabled.is-pressed>ds-spinner,.button.is-disabled:focus>ds-spinner,.button.is-disabled.is-focused>ds-spinner,.button.is-inverted.is-disabled>ds-spinner,.button.is-inverted.is-disabled:hover>ds-spinner,.button.is-inverted.is-disabled.is-hovered>ds-spinner,.button.is-inverted.is-disabled:active>ds-spinner,.button.is-inverted.is-disabled.is-pressed>ds-spinner,.button.is-inverted.is-disabled:focus>ds-spinner,.button.is-inverted.is-disabled.is-focused>ds-spinner,.button[disabled]>ds-spinner,.button[disabled]:hover>ds-spinner,.button[disabled].is-hovered>ds-spinner,.button[disabled]:active>ds-spinner,.button[disabled].is-pressed>ds-spinner,.button[disabled]:focus>ds-spinner,.button[disabled].is-focused>ds-spinner{--spinner-color: var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-spinner.is-circle,fieldset[disabled] .button:hover>ds-spinner.is-circle,fieldset[disabled] .button.is-hovered>ds-spinner.is-circle,fieldset[disabled] .button:active>ds-spinner.is-circle,fieldset[disabled] .button.is-pressed>ds-spinner.is-circle,fieldset[disabled] .button:focus>ds-spinner.is-circle,fieldset[disabled] .button.is-focused>ds-spinner.is-circle,.button.is-loading>ds-spinner.is-circle,.button.is-loading:hover>ds-spinner.is-circle,.button.is-loading.is-hovered>ds-spinner.is-circle,.button.is-loading:active>ds-spinner.is-circle,.button.is-loading.is-pressed>ds-spinner.is-circle,.button.is-loading:focus>ds-spinner.is-circle,.button.is-loading.is-focused>ds-spinner.is-circle,.button.is-disabled>ds-spinner.is-circle,.button.is-disabled:hover>ds-spinner.is-circle,.button.is-disabled.is-hovered>ds-spinner.is-circle,.button.is-disabled:active>ds-spinner.is-circle,.button.is-disabled.is-pressed>ds-spinner.is-circle,.button.is-disabled:focus>ds-spinner.is-circle,.button.is-disabled.is-focused>ds-spinner.is-circle,.button.is-inverted.is-disabled>ds-spinner.is-circle,.button.is-inverted.is-disabled:hover>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-hovered>ds-spinner.is-circle,.button.is-inverted.is-disabled:active>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-pressed>ds-spinner.is-circle,.button.is-inverted.is-disabled:focus>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-focused>ds-spinner.is-circle,.button[disabled]>ds-spinner.is-circle,.button[disabled]:hover>ds-spinner.is-circle,.button[disabled].is-hovered>ds-spinner.is-circle,.button[disabled]:active>ds-spinner.is-circle,.button[disabled].is-pressed>ds-spinner.is-circle,.button[disabled]:focus>ds-spinner.is-circle,.button[disabled].is-focused>ds-spinner.is-circle{--spinner-circle-color-border-background: var(--ds-global-color-grey-4);--spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text)}.buttons{--_buttons-align-items: var(--buttons-align-items, var(--mod-buttons-align-items, center));--_buttons-justify-content: var(--buttons-justify-content, var(--mod-buttons-justify-content, flex-start));--_buttons-direction: var(--buttons-direction, var(--mod-buttons-direction, row));--_buttons-gap: var(--buttons-gap, var(--mod-buttons-gap, 0.25rem));--_buttons-wrap: var(--buttons-wrap, var(--mod-buttons-wrap, wrap));display:flex;gap:var(--_buttons-gap);flex-direction:var(--_buttons-direction);align-items:var(--_buttons-align-items);justify-content:var(--_buttons-justify-content);flex-wrap:var(--_buttons-wrap);width:100%}@media screen and (max-width: 768px){.buttons ::slotted(.button:not(.is-square,.is-circle)),.buttons .button:not(.is-square,.is-circle){flex:1 1 auto}.buttons ::slotted(ds-button:not(.is-square,.is-circle)),.buttons ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}.buttons.as-col-reverse{--mod-buttons-direction: column-reverse}.buttons.as-row-reverse{--mod-buttons-direction: row-reverse}.buttons.as-row{--mod-buttons-direction: row}.buttons.as-col{--mod-buttons-direction: column}@media screen and (max-width: 768px){.buttons.as-col ::slotted(.button),.buttons.as-col .button,.buttons.as-col ::slotted(ds-button),.buttons.as-col ds-button,.buttons.as-col-reverse ::slotted(.button),.buttons.as-col-reverse .button,.buttons.as-col-reverse ::slotted(ds-button),.buttons.as-col-reverse ds-button{width:100%}}@media screen and (min-width: 769px){.buttons.as-col.is-center,.buttons.as-col.is-centered,.buttons.as-col-reverse.is-center,.buttons.as-col-reverse.is-centered{--mod-buttons-align-items: center}.buttons.as-col.is-left,.buttons.as-col-reverse.is-left{--mod-buttons-align-items: flex-start}.buttons.as-col.is-right,.buttons.as-col-reverse.is-right{--mod-buttons-align-items: flex-end}}@media screen and (min-width: 769px){.buttons.as-row.is-center,.buttons.as-row.is-centered,.buttons.is-center:not(.as-col),.buttons.is-centered:not(.as-col){--mod-buttons-justify-content: center}.buttons.as-row.is-left,.buttons.is-left:not(.as-col){--mod-buttons-justify-content: flex-start}.buttons.as-row.is-right,.buttons.is-right:not(.as-col){--mod-buttons-justify-content: flex-end}}@media screen and (min-width: 769px){.buttons.is-wide ::slotted(.button:not(.is-square,.is-circle)),.buttons.is-wide .button:not(.is-square,.is-circle),.buttons.is-wide ::slotted(ds-button:not(.is-square,.is-circle)),.buttons.is-wide ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}:host{--_accordion-focus: var(--accordion-focus, var(--mod-accordion-focus, var(--ds-alias-interaction-focus-color-base)));--_accordion-marker-size: var(--accordion-marker-size, var(--mod-accordion-marker-size, 1rem));--_accordion-summary-color: var(--accordion-summary-color, var(--mod-accordion-summary-color, var(--ds-accordion-summary-color-base)));--_accordion-summary-font-family: var(--accordion-summary-font-family, var(--mod-accordion-summary-font-family, var(--ds-accordion-summary-font-family)));--_accordion-summary-font-weight: var(--accordion-summary-font-weight, var(--mod-accordion-summary-font-weight, var(--ds-accordion-summary-font-weight)));--_accordion-summary-font-line-height: var(--accordion-summary-font-line-height, var(--mod-accordion-summary-font-line-height, var(--ds-accordion-summary-font-line-height)));--_accordion-summary-font-size: var(--accordion-summary-font-size, var(--mod-accordion-summary-font-size, var(--ds-accordion-summary-font-size-device)));--_accordion-summary-color-hover: var(--accordion-summary-color-hover, var(--mod-accordion-summary-color-hover, var(--ds-accordion-summary-color-hover)));--_accordion-summary-color-active: var(--accordion-summary-color-active, var(--mod-accordion-summary-color-active, var(--ds-accordion-summary-color-active)));--_accordion-radius: var(--accordion-radius, var(--mod-accordion-radius, var(--ds-accordion-radius-base)))}:host{display:flex;flex-direction:column;justify-content:center;position:relative}:host #header{min-height:2.5rem;display:flex;justify-content:center;align-items:center}:host #summary:not(.button){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:inherit;border:none;width:100%;padding:0;margin:0;outline:none;color:var(--_accordion-summary-color);font-family:var(--_accordion-summary-font-family);font-weight:var(--_accordion-summary-font-weight);line-height:var(--_accordion-summary-font-line-height);font-size:var(--_accordion-summary-font-size)}:host #summary:not(.button).has-marker-left #marker{order:-1}@media(hover: hover)and (pointer: fine){:host #summary:not(.button):hover,:host #summary:not(.button).is-hovered{color:var(--_accordion-summary-color-hover)}:host #summary:not(.button):hover ds-icon,:host #summary:not(.button).is-hovered ds-icon{--icon-color: var(--_accordion-summary-color-hover)}}:host #summary:not(.button):active,:host #summary:not(.button).is-pressed{color:var(--_accordion-summary-color-active)}:host #summary:not(.button):active ds-icon,:host #summary:not(.button).is-pressed ds-icon{--icon-color: var(--_accordion-summary-color-active)}:host #summary:not(.button):focus-visible:not(:active):before,:host #summary:not(.button).is-focused:not(:active):before{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_accordion-focus) 0 0 0 5px !important;content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--_accordion-radius)}:host #label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block}:host #label:not(.is-button){flex:1;text-align:left}:host(.is-title){--mod-accordion-summary-font-family: var(--ds-alias-text-family-heading);--mod-accordion-summary-font-weight: var(--ds-heading-weight);--mod-accordion-summary-font-line-height: var(--ds-heading-line-height)}:host(.is-h1){--mod-accordion-summary-font-size: var(--ds-heading-1-size-device)}:host(.is-h2){--mod-accordion-summary-font-size: var(--ds-heading-2-size-device)}:host(.is-h3){--mod-accordion-summary-font-size: var(--ds-heading-3-size-device)}:host(.is-h4){--mod-accordion-summary-font-size: var(--ds-heading-4-size-device)}:host(.is-h5){--mod-accordion-summary-font-size: var(--ds-heading-5-size-device)}:host(:not(.is-button)) #marker{min-width:var(--_accordion-marker-size);width:1.5rem;height:var(--_accordion-marker-size);cursor:pointer}:host(:not(.is-button)[open]:not([open=" false "])) #marker{transform:rotate(180deg)}:host(:not(.is-button)[open]:not([open=" false "])) #marker.has-marker-plus{transform:rotate(45deg)}:root{interpolate-size:allow-keywords}@media(prefers-reduced-motion: no-preference){:host(.is-animated) #marker{transition:transform 300ms ease}:host(.is-animated) #content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:content-visibility .3s,grid-template-rows .3s;transition-behavior:allow-discrete}:host(.is-animated) #content>#inner{min-height:0;transition:visibility .3s;visibility:hidden}:host(.is-animated[open]:not([open=" false "])) #content{grid-template-rows:1fr}:host(.is-animated[open]:not([open=" false "])) #content>#inner{visibility:visible}:host(.is-animated[open]:not([open=" false "]):not(.is-animating)) #content{overflow:visible}:host(.is-animated.is-animating) #content{overflow:hidden}}
1
+ .button{--_button-position: var(--button-position, var(--mod-button-position, static));--_button-top: var(--button-top, var(--mod-button-top));--_button-right: var(--button-right, var(--mod-button-right));--_button-bottom: var(--button-bottom, var(--mod-button-bottom));--_button-left: var(--button-left, var(--mod-button-left));position:var(--_button-position);top:var(--_button-top);right:var(--_button-right);bottom:var(--_button-bottom);left:var(--_button-left);--_button-m: var(--button-m, var(--mod-button-m, 0));--_button-my: var(--button-my, var(--mod-button-my));--_button-mx: var(--button-mx, var(--mod-button-mx));--_button-ml: var(--button-ml, var(--mod-button-ml));--_button-mr: var(--button-mr, var(--mod-button-mr));--_button-mt: var(--button-mt, var(--mod-button-mt));--_button-mb: var(--button-mb, var(--mod-button-mb));margin:var(--_button-m);margin-inline:var(--_button-mx);margin-block:var(--_button-my);margin-left:var(--_button-ml);margin-right:var(--_button-mr);margin-top:var(--_button-mt);margin-bottom:var(--_button-mb);--_button-font-family: var(--button-font-family, var(--mod-button-font-family, var(--ds-button-family)));--_button-font-weight: var(--button-font-weight, var(--mod-button-font-weight, var(--ds-button-weight)));--_button-font-size: var(--button-font-size, var(--mod-button-font-size, var(--ds-button-size-base)));--_button-line-height: var(--button-line-height, var(--mod-button-line-height, var(--ds-button-line-height)));--_button-radius: var(--button-radius, var(--mod-button-radius, var(--ds-button-radius-base)));--_button-color-text: var(--button-color-text, var(--mod-button-color-text, var(--ds-button-color-primary-base-text)));--_button-color-border: var(--button-color-border, var(--mod-button-color-border, var(--ds-button-color-primary-base-border)));--_button-color-background: var(--button-color-background, var(--mod-button-color-background, var(--ds-button-color-primary-base-background)));--_button-color-text-hover: var(--button-color-text-hover, var(--mod-button-color-text-hover, var(--ds-button-color-primary-hover-text)));--_button-color-border-hover: var(--button-color-border-hover, var(--mod-button-color-border-hover, var(--ds-button-color-primary-hover-border)));--_button-color-background-hover: var(--button-color-background-hover, var(--mod-button-color-background-hover, var(--ds-button-color-primary-hover-background)));--_button-color-text-active: var(--button-color-text-active, var(--mod-button-color-text-active, var(--ds-button-color-primary-active-text)));--_button-color-border-active: var(--button-color-border-active, var(--mod-button-color-border-active, var(--ds-button-color-primary-active-border)));--_button-color-background-active: var(--button-color-background-active, var(--mod-button-color-background-active, var(--ds-button-color-primary-active-background)));--_button-width: var(--button-width, var(--mod-button-width, var(--ds-button-width, fit-content)));--_button-border-style: var(--button-border-style, var(--mod-button-border-style, solid));--_button-gap: var(--button-gap, var(--mod-button-gap, 0.5rem));--_button-min-height: var(--button-min-height, var(--mod-button-min-height, 3rem));--_button-min-width: var(--button-min-width, var(--mod-button-min-width, 3rem));--_button-padding-inline: var(--button-padding-inline, var(--mod-button-padding-inline, 1.5rem));--_button-box-shadow: var(--button-box-shadow, var(--mod-button-box-shadow, none));--_button-text-shadow: var(--button-text-shadow, var(--mod-button-text-shadow, none));--_button-focus-shadow: var(--button-focus-shadow, var(--mod-button-focus-shadow, var(--ds-alias-interaction-focus-color-base)))}.button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{.button{display:none !important}}.button{appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;box-shadow:var(--_button-box-shadow);text-shadow:var(--_button-text-shadow);touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);font-size:var(--_button-font-size);font-family:var(--_button-font-family);font-weight:var(--_button-font-weight);line-height:var(--_button-line-height);border-radius:var(--_button-radius);border-style:var(--_button-border-style);border-width:var(--ds-alias-border-width-base);width:var(--_button-width, fit-content);min-width:var(--_button-min-width);min-height:var(--_button-min-height);gap:var(--_button-gap);padding-inline:var(--_button-padding-inline);background-color:var(--_button-color-background);color:var(--_button-color-text);border-color:var(--_button-color-border)}.button::-moz-focus-inner{border:0}.button{--spinner-size: 1.5rem;--icon-color: var(--_button-color-text)}.button:focus,.button:active{outline:none}@media(hover: hover)and (pointer: fine){.button:focus-visible:not(:active),.button.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_button-focus-shadow) 0 0 0 5px !important}}@media(hover: hover)and (pointer: fine){.button:hover,.button.is-hovered{--icon-color: var(--_button-color-text-hover);color:var(--_button-color-text-hover);background-color:var(--_button-color-background-hover);border-color:var(--_button-color-border-hover)}}.button:active,.button.is-pressed{--icon-color: var(--_button-color-text-active);background-color:var(--_button-color-background-active);color:var(--_button-color-text-active);border-color:var(--_button-color-border-active);translate:0 .5px}.button.is-wide{width:100%;flex:1 1 auto}.button.is-link{text-decoration:underline;text-underline-offset:.25rem;text-decoration-thickness:var(--ds-link-border-width)}.button .badge,.button ds-badge{--badge-position: absolute;--badge-top: -0.5rem;--badge-right: -0.5rem}.button.is-primary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border)}.button.is-secondary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border)}.button.is-tertiary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-active-border)}.button.is-tertiary-yellow:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-yellow-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-active-border)}.button.is-tertiary-purple:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-purple-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-active-border)}.button.is-tertiary-green:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-green-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-active-border)}.button.is-tertiary-red:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-red-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-active-border)}.button.is-info:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-info-base-text);--mod-button-color-background: var(--ds-button-color-info-base-background);--mod-button-color-border: var(--ds-button-color-info-base-border);--mod-button-color-text-hover: var(--ds-button-color-info-hover-text);--mod-button-color-background-hover: var(--ds-button-color-info-hover-background);--mod-button-color-border-hover: var(--ds-button-color-info-hover-border);--mod-button-color-text-active: var(--ds-button-color-info-active-text);--mod-button-color-background-active: var(--ds-button-color-info-active-background);--mod-button-color-border-active: var(--ds-button-color-info-active-border)}.button.is-success:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-success-base-text);--mod-button-color-background: var(--ds-button-color-success-base-background);--mod-button-color-border: var(--ds-button-color-success-base-border);--mod-button-color-text-hover: var(--ds-button-color-success-hover-text);--mod-button-color-background-hover: var(--ds-button-color-success-hover-background);--mod-button-color-border-hover: var(--ds-button-color-success-hover-border);--mod-button-color-text-active: var(--ds-button-color-success-active-text);--mod-button-color-background-active: var(--ds-button-color-success-active-background);--mod-button-color-border-active: var(--ds-button-color-success-active-border)}.button.is-warning:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-warning-base-text);--mod-button-color-background: var(--ds-button-color-warning-base-background);--mod-button-color-border: var(--ds-button-color-warning-base-border);--mod-button-color-text-hover: var(--ds-button-color-warning-hover-text);--mod-button-color-background-hover: var(--ds-button-color-warning-hover-background);--mod-button-color-border-hover: var(--ds-button-color-warning-hover-border);--mod-button-color-text-active: var(--ds-button-color-warning-active-text);--mod-button-color-background-active: var(--ds-button-color-warning-active-background);--mod-button-color-border-active: var(--ds-button-color-warning-active-border)}.button.is-danger:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-danger-base-text);--mod-button-color-background: var(--ds-button-color-danger-base-background);--mod-button-color-border: var(--ds-button-color-danger-base-border);--mod-button-color-text-hover: var(--ds-button-color-danger-hover-text);--mod-button-color-background-hover: var(--ds-button-color-danger-hover-background);--mod-button-color-border-hover: var(--ds-button-color-danger-hover-border);--mod-button-color-text-active: var(--ds-button-color-danger-active-text);--mod-button-color-background-active: var(--ds-button-color-danger-active-background);--mod-button-color-border-active: var(--ds-button-color-danger-active-border)}.button.is-link:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-link-base-text);--mod-button-color-background: var(--ds-button-color-link-base-background);--mod-button-color-border: var(--ds-button-color-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-link-active-text);--mod-button-color-background-active: var(--ds-button-color-link-active-background);--mod-button-color-border-active: var(--ds-button-color-link-active-border)}.button.is-text:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-text-base-text);--mod-button-color-background: var(--ds-button-color-text-base-background);--mod-button-color-border: var(--ds-button-color-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-text-active-text);--mod-button-color-background-active: var(--ds-button-color-text-active-background);--mod-button-color-border-active: var(--ds-button-color-text-active-border)}.button.is-primary.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-yellow.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-purple.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-green.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-red.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-info.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-success.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-warning.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-danger.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-secondary.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-secondary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-secondary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-secondary-active-border)}.button.is-tertiary.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-tertiary-active-border)}.button.is-text.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-text-base-text);--mod-button-color-background: var(--ds-button-color-inverted-text-base-background);--mod-button-color-border: var(--ds-button-color-inverted-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-text-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-text-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-text-active-border)}.button.is-link.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-link-base-text);--mod-button-color-background: var(--ds-button-color-inverted-link-base-background);--mod-button-color-border: var(--ds-button-color-inverted-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-link-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-link-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-link-active-border)}.button.is-sm,.button.is-small{--mod-button-font-size: var(--ds-button-size-sm);--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--mod-button-padding-inline: 0.75rem}.button.is-lg,.button.is-large{--mod-button-font-size: var(--ds-button-size-lg);--mod-button-min-height: 3.5rem;--mod-button-min-width: 3.5rem;--mod-button-padding-inline: 1.5rem}.button.is-xl{--mod-button-font-size: var(--ds-button-size-xl);--mod-button-min-height: 5.5rem;--mod-button-min-width: 5.5rem;--mod-button-padding-inline: 1.5rem}.button.is-flat{--mod-button-padding-inline: 0;--mod-button-min-height: 1.75rem}.button.is-rounded{--mod-button-radius: var(--ds-button-radius-rounded)}.button.is-square:not(.is-sm),.button.is-square:not(.is-small){--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}.button.is-square.is-sm,.button.is-square.is-small{--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}.button.is-circle:not(.is-sm),.button.is-circle:not(.is-small){--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}.button.is-circle.is-small,.button.is-circle.is-sm{--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}.button.is-tertiary-purple.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-purple-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-dashed-active-border)}.button.is-tertiary-red.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-red-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-dashed-active-border)}.button.is-tertiary-green.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-green-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-dashed-active-border)}.button.is-tertiary-yellow.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-yellow-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-dashed-active-border)}.button.has-shadow:not(.is-link,.is-text){--mod-button-box-shadow: var(--ds-alias-shadow-box-base)}.button.is-text.has-shadow,.button.is-link.has-shadow{--mod-button-text-shadow: var(--ds-alias-shadow-text)}.button.has-no-wrap{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:stretch}.button:is(input[type=checkbox],input[type=radio])[aria-label]::after{--_button-content: attr(aria-label);content:var(--_button-content)}.button:is(input[type=checkbox],input[type=radio]){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border);appearance:none;vertical-align:middle}.button:is(input[type=checkbox],input[type=radio]):where(input:checked){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border);isolation:isolate}fieldset[disabled] .button,fieldset[disabled] .button:hover,fieldset[disabled] .button.is-hovered,fieldset[disabled] .button:active,fieldset[disabled] .button.is-pressed,fieldset[disabled] .button:focus,fieldset[disabled] .button.is-focused,.button.is-loading,.button.is-loading:hover,.button.is-loading.is-hovered,.button.is-loading:active,.button.is-loading.is-pressed,.button.is-loading:focus,.button.is-loading.is-focused,.button.is-disabled,.button.is-disabled:hover,.button.is-disabled.is-hovered,.button.is-disabled:active,.button.is-disabled.is-pressed,.button.is-disabled:focus,.button.is-disabled.is-focused,.button.is-inverted.is-disabled,.button.is-inverted.is-disabled:hover,.button.is-inverted.is-disabled.is-hovered,.button.is-inverted.is-disabled:active,.button.is-inverted.is-disabled.is-pressed,.button.is-inverted.is-disabled:focus,.button.is-inverted.is-disabled.is-focused,.button[disabled],.button[disabled]:hover,.button[disabled].is-hovered,.button[disabled]:active,.button[disabled].is-pressed,.button[disabled]:focus,.button[disabled].is-focused{pointer-events:none;opacity:1;box-shadow:none;text-decoration:none;cursor:default;translate:0 0;background-color:var(--ds-button-color-disabled-base-background);border-color:var(--ds-button-color-disabled-base-border);color:var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-icon,fieldset[disabled] .button:hover>ds-icon,fieldset[disabled] .button.is-hovered>ds-icon,fieldset[disabled] .button:active>ds-icon,fieldset[disabled] .button.is-pressed>ds-icon,fieldset[disabled] .button:focus>ds-icon,fieldset[disabled] .button.is-focused>ds-icon,.button.is-loading>ds-icon,.button.is-loading:hover>ds-icon,.button.is-loading.is-hovered>ds-icon,.button.is-loading:active>ds-icon,.button.is-loading.is-pressed>ds-icon,.button.is-loading:focus>ds-icon,.button.is-loading.is-focused>ds-icon,.button.is-disabled>ds-icon,.button.is-disabled:hover>ds-icon,.button.is-disabled.is-hovered>ds-icon,.button.is-disabled:active>ds-icon,.button.is-disabled.is-pressed>ds-icon,.button.is-disabled:focus>ds-icon,.button.is-disabled.is-focused>ds-icon,.button.is-inverted.is-disabled>ds-icon,.button.is-inverted.is-disabled:hover>ds-icon,.button.is-inverted.is-disabled.is-hovered>ds-icon,.button.is-inverted.is-disabled:active>ds-icon,.button.is-inverted.is-disabled.is-pressed>ds-icon,.button.is-inverted.is-disabled:focus>ds-icon,.button.is-inverted.is-disabled.is-focused>ds-icon,.button[disabled]>ds-icon,.button[disabled]:hover>ds-icon,.button[disabled].is-hovered>ds-icon,.button[disabled]:active>ds-icon,.button[disabled].is-pressed>ds-icon,.button[disabled]:focus>ds-icon,.button[disabled].is-focused>ds-icon{--icon-color: var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-spinner,fieldset[disabled] .button:hover>ds-spinner,fieldset[disabled] .button.is-hovered>ds-spinner,fieldset[disabled] .button:active>ds-spinner,fieldset[disabled] .button.is-pressed>ds-spinner,fieldset[disabled] .button:focus>ds-spinner,fieldset[disabled] .button.is-focused>ds-spinner,.button.is-loading>ds-spinner,.button.is-loading:hover>ds-spinner,.button.is-loading.is-hovered>ds-spinner,.button.is-loading:active>ds-spinner,.button.is-loading.is-pressed>ds-spinner,.button.is-loading:focus>ds-spinner,.button.is-loading.is-focused>ds-spinner,.button.is-disabled>ds-spinner,.button.is-disabled:hover>ds-spinner,.button.is-disabled.is-hovered>ds-spinner,.button.is-disabled:active>ds-spinner,.button.is-disabled.is-pressed>ds-spinner,.button.is-disabled:focus>ds-spinner,.button.is-disabled.is-focused>ds-spinner,.button.is-inverted.is-disabled>ds-spinner,.button.is-inverted.is-disabled:hover>ds-spinner,.button.is-inverted.is-disabled.is-hovered>ds-spinner,.button.is-inverted.is-disabled:active>ds-spinner,.button.is-inverted.is-disabled.is-pressed>ds-spinner,.button.is-inverted.is-disabled:focus>ds-spinner,.button.is-inverted.is-disabled.is-focused>ds-spinner,.button[disabled]>ds-spinner,.button[disabled]:hover>ds-spinner,.button[disabled].is-hovered>ds-spinner,.button[disabled]:active>ds-spinner,.button[disabled].is-pressed>ds-spinner,.button[disabled]:focus>ds-spinner,.button[disabled].is-focused>ds-spinner{--spinner-color: var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-spinner.is-circle,fieldset[disabled] .button:hover>ds-spinner.is-circle,fieldset[disabled] .button.is-hovered>ds-spinner.is-circle,fieldset[disabled] .button:active>ds-spinner.is-circle,fieldset[disabled] .button.is-pressed>ds-spinner.is-circle,fieldset[disabled] .button:focus>ds-spinner.is-circle,fieldset[disabled] .button.is-focused>ds-spinner.is-circle,.button.is-loading>ds-spinner.is-circle,.button.is-loading:hover>ds-spinner.is-circle,.button.is-loading.is-hovered>ds-spinner.is-circle,.button.is-loading:active>ds-spinner.is-circle,.button.is-loading.is-pressed>ds-spinner.is-circle,.button.is-loading:focus>ds-spinner.is-circle,.button.is-loading.is-focused>ds-spinner.is-circle,.button.is-disabled>ds-spinner.is-circle,.button.is-disabled:hover>ds-spinner.is-circle,.button.is-disabled.is-hovered>ds-spinner.is-circle,.button.is-disabled:active>ds-spinner.is-circle,.button.is-disabled.is-pressed>ds-spinner.is-circle,.button.is-disabled:focus>ds-spinner.is-circle,.button.is-disabled.is-focused>ds-spinner.is-circle,.button.is-inverted.is-disabled>ds-spinner.is-circle,.button.is-inverted.is-disabled:hover>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-hovered>ds-spinner.is-circle,.button.is-inverted.is-disabled:active>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-pressed>ds-spinner.is-circle,.button.is-inverted.is-disabled:focus>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-focused>ds-spinner.is-circle,.button[disabled]>ds-spinner.is-circle,.button[disabled]:hover>ds-spinner.is-circle,.button[disabled].is-hovered>ds-spinner.is-circle,.button[disabled]:active>ds-spinner.is-circle,.button[disabled].is-pressed>ds-spinner.is-circle,.button[disabled]:focus>ds-spinner.is-circle,.button[disabled].is-focused>ds-spinner.is-circle{--spinner-circle-color-border-background: var(--ds-global-color-grey-4);--spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text)}.buttons{--_buttons-align-items: var(--buttons-align-items, var(--mod-buttons-align-items, center));--_buttons-justify-content: var(--buttons-justify-content, var(--mod-buttons-justify-content, flex-start));--_buttons-direction: var(--buttons-direction, var(--mod-buttons-direction, row));--_buttons-gap: var(--buttons-gap, var(--mod-buttons-gap, 0.25rem));--_buttons-wrap: var(--buttons-wrap, var(--mod-buttons-wrap, wrap));display:flex;gap:var(--_buttons-gap);flex-direction:var(--_buttons-direction);align-items:var(--_buttons-align-items);justify-content:var(--_buttons-justify-content);flex-wrap:var(--_buttons-wrap);width:100%}@media screen and (max-width: 768px){.buttons ::slotted(.button:not(.is-square,.is-circle)),.buttons .button:not(.is-square,.is-circle){flex:1 1 auto}.buttons ::slotted(ds-button:not(.is-square,.is-circle)),.buttons ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}.buttons.as-col-reverse{--mod-buttons-direction: column-reverse}.buttons.as-row-reverse{--mod-buttons-direction: row-reverse}.buttons.as-row{--mod-buttons-direction: row}.buttons.as-col{--mod-buttons-direction: column}@media screen and (max-width: 768px){.buttons.as-col ::slotted(.button),.buttons.as-col .button,.buttons.as-col ::slotted(ds-button),.buttons.as-col ds-button,.buttons.as-col-reverse ::slotted(.button),.buttons.as-col-reverse .button,.buttons.as-col-reverse ::slotted(ds-button),.buttons.as-col-reverse ds-button{width:100%}}@media screen and (min-width: 769px){.buttons.as-col.is-center,.buttons.as-col.is-centered,.buttons.as-col-reverse.is-center,.buttons.as-col-reverse.is-centered{--mod-buttons-align-items: center}.buttons.as-col.is-left,.buttons.as-col-reverse.is-left{--mod-buttons-align-items: flex-start}.buttons.as-col.is-right,.buttons.as-col-reverse.is-right{--mod-buttons-align-items: flex-end}}@media screen and (min-width: 769px){.buttons.as-row.is-center,.buttons.as-row.is-centered,.buttons.is-center:not(.as-col),.buttons.is-centered:not(.as-col){--mod-buttons-justify-content: center}.buttons.as-row.is-left,.buttons.is-left:not(.as-col){--mod-buttons-justify-content: flex-start}.buttons.as-row.is-right,.buttons.is-right:not(.as-col){--mod-buttons-justify-content: flex-end}}@media screen and (min-width: 769px){.buttons.is-wide ::slotted(.button:not(.is-square,.is-circle)),.buttons.is-wide .button:not(.is-square,.is-circle),.buttons.is-wide ::slotted(ds-button:not(.is-square,.is-circle)),.buttons.is-wide ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}:host{--_accordion-focus: var(--accordion-focus, var(--mod-accordion-focus, var(--ds-alias-interaction-focus-color-base)));--_accordion-marker-size: var(--accordion-marker-size, var(--mod-accordion-marker-size, 1rem));--_accordion-summary-color: var(--accordion-summary-color, var(--mod-accordion-summary-color, var(--ds-accordion-summary-color-base)));--_accordion-summary-font-family: var(--accordion-summary-font-family, var(--mod-accordion-summary-font-family, var(--ds-accordion-summary-font-family)));--_accordion-summary-font-weight: var(--accordion-summary-font-weight, var(--mod-accordion-summary-font-weight, var(--ds-accordion-summary-font-weight)));--_accordion-summary-font-line-height: var(--accordion-summary-font-line-height, var(--mod-accordion-summary-font-line-height, var(--ds-accordion-summary-font-line-height)));--_accordion-summary-font-size: var(--accordion-summary-font-size, var(--mod-accordion-summary-font-size, var(--ds-accordion-summary-font-size-device)));--_accordion-summary-color-hover: var(--accordion-summary-color-hover, var(--mod-accordion-summary-color-hover, var(--ds-accordion-summary-color-hover)));--_accordion-summary-color-active: var(--accordion-summary-color-active, var(--mod-accordion-summary-color-active, var(--ds-accordion-summary-color-active)));--_accordion-radius: var(--accordion-radius, var(--mod-accordion-radius, var(--ds-accordion-radius-base)))}:host{display:flex;flex-direction:column;justify-content:center;position:relative}:host #header{min-height:2.5rem;display:flex;justify-content:center;align-items:center}:host #summary:not(.button){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:inherit;border:none;width:100%;padding:0;margin:0;outline:none;color:var(--_accordion-summary-color);font-family:var(--_accordion-summary-font-family);font-weight:var(--_accordion-summary-font-weight);line-height:var(--_accordion-summary-font-line-height);font-size:var(--_accordion-summary-font-size)}:host #summary:not(.button).has-marker-left #marker{order:-1}@media(hover: hover)and (pointer: fine){:host #summary:not(.button):hover,:host #summary:not(.button).is-hovered{color:var(--_accordion-summary-color-hover)}:host #summary:not(.button):hover ds-icon,:host #summary:not(.button).is-hovered ds-icon{--icon-color: var(--_accordion-summary-color-hover)}}:host #summary:not(.button):active,:host #summary:not(.button).is-pressed{color:var(--_accordion-summary-color-active)}:host #summary:not(.button):active ds-icon,:host #summary:not(.button).is-pressed ds-icon{--icon-color: var(--_accordion-summary-color-active)}:host #summary:not(.button):focus-visible:not(:active):before,:host #summary:not(.button).is-focused:not(:active):before{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_accordion-focus) 0 0 0 5px !important;content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--_accordion-radius)}:host #label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block}:host #label:not(.is-button){flex:1;text-align:left}:host(.is-title){--mod-accordion-summary-font-family: var(--ds-alias-text-family-heading);--mod-accordion-summary-font-weight: var(--ds-heading-font-weight);--mod-accordion-summary-font-line-height: var(--ds-heading-line-height)}:host(.is-h1){--mod-accordion-summary-font-size: var(--ds-heading-1-size-device)}:host(.is-h2){--mod-accordion-summary-font-size: var(--ds-heading-2-size-device)}:host(.is-h3){--mod-accordion-summary-font-size: var(--ds-heading-3-size-device)}:host(.is-h4){--mod-accordion-summary-font-size: var(--ds-heading-4-size-device)}:host(.is-h5){--mod-accordion-summary-font-size: var(--ds-heading-5-size-device)}:host(:not(.is-button)) #marker{min-width:var(--_accordion-marker-size);width:1.5rem;height:var(--_accordion-marker-size);cursor:pointer}:host(:not(.is-button)[open]:not([open=" false "])) #marker{transform:rotate(180deg)}:host(:not(.is-button)[open]:not([open=" false "])) #marker.has-marker-plus{transform:rotate(45deg)}:root{interpolate-size:allow-keywords}@media(prefers-reduced-motion: no-preference){:host(.is-animated) #marker{transition:transform 300ms ease}:host(.is-animated) #content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:content-visibility .3s,grid-template-rows .3s;transition-behavior:allow-discrete}:host(.is-animated) #content>#inner{min-height:0;transition:visibility .3s;visibility:hidden}:host(.is-animated[open]:not([open=" false "])) #content{grid-template-rows:1fr}:host(.is-animated[open]:not([open=" false "])) #content>#inner{visibility:visible}:host(.is-animated[open]:not([open=" false "]):not(.is-animating)) #content{overflow:visible}:host(.is-animated.is-animating) #content{overflow:hidden}}
package/dist/collection/components/alert/alert-container.interfaces.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
3
3
  */
4
4
  export const ALERT_TYPES = ['toast', 'snackbar'];
5
- export const ALERT_CONTAINER_SIZES = ['', 'fluid', 'detail-page', 'compact', 'blog-page', 'wide'];
5
+ export const ALERT_CONTAINER_SIZES = ['fluid', 'detail-page', 'compact', 'blog-page', 'wide'];
6
6
  export const ALERT_COLORS = [
7
7
  'base',
8
8
  'info',
package/dist/collection/components/alert/alert-container.js CHANGED
@@ -16,16 +16,12 @@ export class AlertContainer {
16
16
  this.alertTimers = {};
17
17
  /**
18
18
  * PUBLIC PROPERTY API
19
- * ------------------------------------------------------
19
+ * ─────────────────────────────────────────────────────
20
20
  */
21
21
  /**
22
22
  * If `true`, alerts animate in and out.
23
23
  */
24
24
  this.animated = false;
25
- /**
26
- * Defines the container size constraint for the alert layout.
27
- */
28
- this.container = '';
29
25
  /**
30
26
  * Defines the display type: `toast` (top-right overlay) or `snackbar` (bottom banner).
31
27
  */
@@ -36,7 +32,7 @@ export class AlertContainer {
36
32
  }
37
33
  /**
38
34
  * PUBLIC METHODS
39
- * ------------------------------------------------------
35
+ * ─────────────────────────────────────────────────────
40
36
  */
41
37
  /**
42
38
  * Adds an alert to the queue and returns its generated ID.
@@ -71,7 +67,7 @@ export class AlertContainer {
71
67
  }
72
68
  /**
73
69
  * PRIVATE METHODS
74
- * ------------------------------------------------------
70
+ * ─────────────────────────────────────────────────────
75
71
  */
76
72
  activeTimer(id, duration) {
77
73
  if (duration !== 'infinite') {
@@ -118,15 +114,15 @@ export class AlertContainer {
118
114
  }
119
115
  /**
120
116
  * RENDER
121
- * ------------------------------------------------------
117
+ * ─────────────────────────────────────────────────────
122
118
  */
123
119
  render() {
124
120
  const visibleAlerts = this.alerts.slice(0, this.maxVisibleItems);
125
121
  const AlertElement = this.type === 'toast' ? 'ds-toast' : 'ds-snackbar';
126
- return (h(Host, { key: '4b27582dc8593dc0f58058dfa15bba7e3b3ef7d5', class: {
122
+ return (h(Host, { key: '57bfdf1ecbf92740b2e180b449ccea6a3764bea8', class: {
127
123
  'is-toast': this.type === 'toast',
128
124
  'is-snackbar': this.type === 'snackbar',
129
- } }, h("div", { key: '9a0e962b0f44b361b348072db213475e25b8f75f', id: "wrapper", class: { container: this.type === 'toast' } }, visibleAlerts.map(alert => (h(AlertElement, { key: alert.alertId, id: alert.alertId, alertId: alert.alertId, visible: alert.visible, heading: alert.heading, message: alert.message, color: alert.color, duration: alert.duration, closable: alert.closable, closeHandler: () => alert.closeHandler(alert.alertId), action: alert.action, actionIcon: alert.actionIcon, actionTarget: alert.actionTarget, actionHref: alert.actionHref, actionHandler: () => alert.actionHandler(alert.alertId), onDsCloseClick: () => this.removeAlert(alert.alertId), onDsDidLoad: () => this.present(alert.alertId), onDsDidPause: () => {
125
+ } }, h("div", { key: '134a3e7fd04fd9c65e090ee67b4908affedc4eb8', id: "wrapper", class: { container: this.type === 'toast' } }, visibleAlerts.map(alert => (h(AlertElement, { key: alert.alertId, id: alert.alertId, alertId: alert.alertId, visible: alert.visible, heading: alert.heading, message: alert.message, color: alert.color, duration: alert.duration, closable: alert.closable, closeHandler: () => alert.closeHandler(alert.alertId), action: alert.action, actionIcon: alert.actionIcon, actionTarget: alert.actionTarget, actionHref: alert.actionHref, actionHandler: () => alert.actionHandler(alert.alertId), onDsCloseClick: () => this.removeAlert(alert.alertId), onDsDidLoad: () => this.present(alert.alertId), onDsDidPause: () => {
130
126
  this.alertTimers[alert.alertId] && this.alertTimers[alert.alertId].pause();
131
127
  }, onDsDidResume: () => {
132
128
  this.alertTimers[alert.alertId] && this.alertTimers[alert.alertId].resume();
@@ -171,7 +167,7 @@ export class AlertContainer {
171
167
  "mutable": false,
172
168
  "complexType": {
173
169
  "original": "AlertContainerSize",
174
- "resolved": "\"\" | \"blog-page\" | \"compact\" | \"detail-page\" | \"fluid\" | \"wide\"",
170
+ "resolved": "\"blog-page\" | \"compact\" | \"detail-page\" | \"fluid\" | \"wide\" | undefined",
175
171
  "references": {
176
172
  "AlertContainerSize": {
177
173
  "location": "import",
@@ -182,7 +178,7 @@ export class AlertContainer {
182
178
  }
183
179
  },
184
180
  "required": false,
185
- "optional": false,
181
+ "optional": true,
186
182
  "docs": {
187
183
  "tags": [],
188
184
  "text": "Defines the container size constraint for the alert layout."
@@ -190,8 +186,7 @@ export class AlertContainer {
190
186
  "getter": false,
191
187
  "setter": false,
192
188
  "reflect": false,
193
- "attribute": "container",
194
- "defaultValue": "''"
189
+ "attribute": "container"
195
190
  },
196
191
  "type": {
197
192
  "type": "string",
package/dist/collection/components/alert/snackbar/snackbar.host.css CHANGED
@@ -1 +1 @@
1
- :host{--_snackbar-position: var(--snackbar-position, var(--mod-snackbar-position, static));--_snackbar-top: var(--snackbar-top, var(--mod-snackbar-top));--_snackbar-right: var(--snackbar-right, var(--mod-snackbar-right));--_snackbar-bottom: var(--snackbar-bottom, var(--mod-snackbar-bottom));--_snackbar-left: var(--snackbar-left, var(--mod-snackbar-left));position:var(--_snackbar-position);top:var(--_snackbar-top);right:var(--_snackbar-right);bottom:var(--_snackbar-bottom);left:var(--_snackbar-left);--_snackbar-m: var(--snackbar-m, var(--mod-snackbar-m, 0));--_snackbar-my: var(--snackbar-my, var(--mod-snackbar-my));--_snackbar-mx: var(--snackbar-mx, var(--mod-snackbar-mx));--_snackbar-ml: var(--snackbar-ml, var(--mod-snackbar-ml));--_snackbar-mr: var(--snackbar-mr, var(--mod-snackbar-mr));--_snackbar-mt: var(--snackbar-mt, var(--mod-snackbar-mt));--_snackbar-mb: var(--snackbar-mb, var(--mod-snackbar-mb));margin:var(--_snackbar-m);margin-inline:var(--_snackbar-mx);margin-block:var(--_snackbar-my);margin-left:var(--_snackbar-ml);margin-right:var(--_snackbar-mr);margin-top:var(--_snackbar-mt);margin-bottom:var(--_snackbar-mb);--_snackbar-shadow: var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--ds-alias-shadow-box-base)));--_snackbar-radius: var(--snackbar-radius, var(--mod-snackbar-radius, var(--ds-snackbar-radius)));--_snackbar-bg: var(--snackbar-bg, var(--mod-snackbar-bg, var(--ds-snackbar-default-color-bg-base)));--_snackbar-color: var(--snackbar-color, var(--mod-snackbar-color, var(--ds-snackbar-default-color-text-base)));--_snackbar-icon-color: var(--snackbar-icon-color, var(--mod-snackbar-icon-color, var(--ds-snackbar-default-color-icon-base)));--_snackbar-progress-duration: var(--snackbar-progress-duration, var(--mod-snackbar-progress-duration, 0));--_snackbar-progress-bar-bg: var(--snackbar-progress-bar-bg, var(--mod-snackbar-progress-bar-bg, var(--ds-snackbar-default-color-progress-bar-base)));--_snackbar-progress-bg: var(--snackbar-progress-bg, var(--mod-snackbar-progress-bg, var(--ds-snackbar-default-color-progress-bg-base)));--_snackbar-heading-font-family: var(--snackbar-heading-font-family, var(--mod-snackbar-heading-font-family, var(--ds-alias-text-family-heading)));--_snackbar-heading-font-weight: var(--snackbar-heading-font-weight, var(--mod-snackbar-heading-font-weight, var(--ds-alias-text-weight-bold)));--_snackbar-heading-font-size: var(--snackbar-heading-font-size, var(--mod-snackbar-heading-font-size, var(--ds-alias-text-size-base-device)));--_snackbar-heading-line-height: var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--ds-alias-text-line-height-heading)));--_snackbar-content-font-family: var(--snackbar-content-font-family, var(--mod-snackbar-content-font-family, var(--ds-alias-text-family-body)));--_snackbar-content-font-weight: var(--snackbar-content-font-weight, var(--mod-snackbar-content-font-weight, inherit));--_snackbar-content-font-size: var(--snackbar-content-font-size, var(--mod-snackbar-content-font-size, var(--ds-alias-text-size-sm-device)));--_snackbar-content-line-height: var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--ds-alias-text-line-height-body)));--_snackbar-gap: var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));--_snackbar-p: var(--snackbar-p, var(--mod-snackbar-p, 1rem));--_snackbar-animation-start-opacity: var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));--_snackbar-animation-start-transform: var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));--_snackbar-animation-transition: var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));--_snackbar-animation-end-opacity: var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));--_snackbar-animation-end-transform: var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{opacity:var(--_snackbar-animation-start-opacity);transform:var(--_snackbar-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_snackbar-color);background:var(--_snackbar-bg);border-radius:var(--_snackbar-radius);box-shadow:var(--_snackbar-shadow);padding:var(--_snackbar-p);column-gap:calc(var(--_snackbar-gap)*4);row-gap:var(--_snackbar-gap);align-items:center}:host #icon{grid-area:icon;align-self:flex-start}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_snackbar-heading-font-family);font-weight:var(--_snackbar-heading-font-weight);line-height:var(--_snackbar-heading-line-height);font-size:var(--_snackbar-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_snackbar-content-font-family);font-size:var(--_snackbar-content-font-size);font-weight:var(--_snackbar-content-font-weight);line-height:var(--_snackbar-content-line-height)}:host #action{grid-area:action;align-self:center}:host #action ds-close,:host #action ds-button,:host #action .button{--button-mt: 1rem;--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem}:host ::slotted(ds-button),:host ::slotted(ds-close),:host ::slotted(ds-button-group){--button-mt: 1rem;--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem}:host .close,:host ds-close{grid-area:close;align-self:flex-start}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content" ". action"}:host(.is-closable){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close" ". action action"}:host(.is-mobile-closed){display:block;max-width:fit-content;--mod-snackbar-p: 0;--mod-snackbar-bg: transparent;--mod-snackbar-width: fit-content}:host(.is-mobile-closed) #icon,:host(.is-mobile-closed) #content,:host(.is-mobile-closed) #action{display:none}:host(.is-ready){transition:var(--_snackbar-animation-transition)}:host(.is-visible){opacity:var(--_snackbar-animation-end-opacity);transform:var(--_snackbar-animation-end-transform)}:host(.has-progess-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_snackbar-progress-bg);border-bottom-left-radius:var(--_snackbar-radius);border-bottom-right-radius:var(--_snackbar-radius)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-info){--mod-snackbar-color: var(--ds-snackbar-info-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-info-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-info-color-bg-base);--mod-snackbar-icon-color: var(--ds-snackbar-info-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-info-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-info-color-progress-bg-base)}:host(.is-success){--mod-snackbar-color: var(--ds-snackbar-success-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-success-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-success-color-bg-base);--mod-snackbar-icon-color: var(--ds-snackbar-success-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-success-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-success-color-progress-bg-base)}:host(.is-warning){--mod-snackbar-color: var(--ds-snackbar-warning-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-warning-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-warning-color-bg-base);--mod-snackbar-icon-color: var(--ds-snackbar-warning-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-warning-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-warning-color-progress-bg-base)}:host(.is-danger){--mod-snackbar-color: var(--ds-snackbar-danger-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-danger-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-danger-color-bg-base);--mod-snackbar-icon-color: var(--ds-snackbar-danger-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-danger-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-danger-color-progress-bg-base)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}
1
+ :host{--_snackbar-position: var(--snackbar-position, var(--mod-snackbar-position, static));--_snackbar-top: var(--snackbar-top, var(--mod-snackbar-top));--_snackbar-right: var(--snackbar-right, var(--mod-snackbar-right));--_snackbar-bottom: var(--snackbar-bottom, var(--mod-snackbar-bottom));--_snackbar-left: var(--snackbar-left, var(--mod-snackbar-left));position:var(--_snackbar-position);top:var(--_snackbar-top);right:var(--_snackbar-right);bottom:var(--_snackbar-bottom);left:var(--_snackbar-left);--_snackbar-m: var(--snackbar-m, var(--mod-snackbar-m, 0));--_snackbar-my: var(--snackbar-my, var(--mod-snackbar-my));--_snackbar-mx: var(--snackbar-mx, var(--mod-snackbar-mx));--_snackbar-ml: var(--snackbar-ml, var(--mod-snackbar-ml));--_snackbar-mr: var(--snackbar-mr, var(--mod-snackbar-mr));--_snackbar-mt: var(--snackbar-mt, var(--mod-snackbar-mt));--_snackbar-mb: var(--snackbar-mb, var(--mod-snackbar-mb));margin:var(--_snackbar-m);margin-inline:var(--_snackbar-mx);margin-block:var(--_snackbar-my);margin-left:var(--_snackbar-ml);margin-right:var(--_snackbar-mr);margin-top:var(--_snackbar-mt);margin-bottom:var(--_snackbar-mb);--_snackbar-shadow: var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--ds-alias-shadow-box-base)));--_snackbar-radius: var(--snackbar-radius, var(--mod-snackbar-radius, var(--ds-snackbar-radius)));--_snackbar-bg: var(--snackbar-bg, var(--mod-snackbar-bg, var(--ds-snackbar-primary-color-background-base)));--_snackbar-color: var(--snackbar-color, var(--mod-snackbar-color, var(--ds-snackbar-primary-color-text-base)));--_snackbar-icon-color: var(--snackbar-icon-color, var(--mod-snackbar-icon-color, var(--ds-snackbar-primary-color-icon-base)));--_snackbar-progress-duration: var(--snackbar-progress-duration, var(--mod-snackbar-progress-duration, 0));--_snackbar-progress-bar-bg: var(--snackbar-progress-bar-bg, var(--mod-snackbar-progress-bar-bg, var(--ds-snackbar-primary-color-progress-bar-base)));--_snackbar-progress-bg: var(--snackbar-progress-bg, var(--mod-snackbar-progress-bg, var(--ds-snackbar-primary-color-progress-background-base)));--_snackbar-heading-font-family: var(--snackbar-heading-font-family, var(--mod-snackbar-heading-font-family, var(--ds-alias-text-family-heading)));--_snackbar-heading-font-weight: var(--snackbar-heading-font-weight, var(--mod-snackbar-heading-font-weight, var(--ds-alias-text-weight-bold)));--_snackbar-heading-font-size: var(--snackbar-heading-font-size, var(--mod-snackbar-heading-font-size, var(--ds-alias-text-size-base-device)));--_snackbar-heading-line-height: var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--ds-alias-text-line-height-heading)));--_snackbar-content-font-family: var(--snackbar-content-font-family, var(--mod-snackbar-content-font-family, var(--ds-alias-text-family-body)));--_snackbar-content-font-weight: var(--snackbar-content-font-weight, var(--mod-snackbar-content-font-weight, inherit));--_snackbar-content-font-size: var(--snackbar-content-font-size, var(--mod-snackbar-content-font-size, var(--ds-alias-text-size-sm-device)));--_snackbar-content-line-height: var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--ds-alias-text-line-height-body)));--_snackbar-gap: var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));--_snackbar-p: var(--snackbar-p, var(--mod-snackbar-p, 1rem));--_snackbar-animation-start-opacity: var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));--_snackbar-animation-start-transform: var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));--_snackbar-animation-transition: var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));--_snackbar-animation-end-opacity: var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));--_snackbar-animation-end-transform: var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{opacity:var(--_snackbar-animation-start-opacity);transform:var(--_snackbar-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_snackbar-color);background:var(--_snackbar-bg);border-radius:var(--_snackbar-radius);box-shadow:var(--_snackbar-shadow);padding:var(--_snackbar-p);column-gap:calc(var(--_snackbar-gap)*4);row-gap:var(--_snackbar-gap);align-items:center}:host #icon{grid-area:icon;align-self:flex-start}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_snackbar-heading-font-family);font-weight:var(--_snackbar-heading-font-weight);line-height:var(--_snackbar-heading-line-height);font-size:var(--_snackbar-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_snackbar-content-font-family);font-size:var(--_snackbar-content-font-size);font-weight:var(--_snackbar-content-font-weight);line-height:var(--_snackbar-content-line-height)}:host #action{grid-area:action;align-self:center}:host #action ds-close,:host #action ds-button,:host #action .button{--button-mt: 1rem;--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem}:host ::slotted(ds-button),:host ::slotted(ds-close),:host ::slotted(ds-button-group){--button-mt: 1rem;--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem}:host .close,:host ds-close{grid-area:close;align-self:flex-start}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content" ". action"}:host(.is-closable){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close" ". action action"}:host(.is-mobile-closed){display:block;max-width:fit-content;--mod-snackbar-p: 0;--mod-snackbar-bg: transparent;--mod-snackbar-width: fit-content}:host(.is-mobile-closed) #icon,:host(.is-mobile-closed) #content,:host(.is-mobile-closed) #action{display:none}:host(.is-ready){transition:var(--_snackbar-animation-transition)}:host(.is-visible){opacity:var(--_snackbar-animation-end-opacity);transform:var(--_snackbar-animation-end-transform)}:host(.has-progess-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_snackbar-progress-bg);border-bottom-left-radius:var(--_snackbar-radius);border-bottom-right-radius:var(--_snackbar-radius)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-info){--mod-snackbar-color: var(--ds-snackbar-info-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-info-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-info-color-background-base);--mod-snackbar-icon-color: var(--ds-snackbar-info-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-info-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-info-color-progress-background-base)}:host(.is-success){--mod-snackbar-color: var(--ds-snackbar-success-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-success-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-success-color-background-base);--mod-snackbar-icon-color: var(--ds-snackbar-success-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-success-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-success-color-progress-background-base)}:host(.is-warning){--mod-snackbar-color: var(--ds-snackbar-warning-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-warning-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-warning-color-background-base);--mod-snackbar-icon-color: var(--ds-snackbar-warning-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-warning-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-warning-color-progress-background-base)}:host(.is-danger){--mod-snackbar-color: var(--ds-snackbar-danger-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-danger-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-danger-color-background-base);--mod-snackbar-icon-color: var(--ds-snackbar-danger-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-danger-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-danger-color-progress-background-base)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}
package/dist/collection/components/alert/snackbar/snackbar.js CHANGED
@@ -19,6 +19,10 @@ export class Snackbar {
19
19
  this.isMobile = dsBreakpoints.isMobile;
20
20
  this.mobileOpenState = false;
21
21
  this.didLoad = false;
22
+ /**
23
+ * PUBLIC PROPERTY API
24
+ * ─────────────────────────────────────────────────────
25
+ */
22
26
  /**
23
27
  * Defines the color of the element
24
28
  * Color type primary is deprecated, please use info instead.
@@ -80,7 +84,7 @@ export class Snackbar {
80
84
  this.actionHandler = () => void 0;
81
85
  /**
82
86
  * PRIVATE METHODS
83
- * ------------------------------------------------------
87
+ * ─────────────────────────────────────────────────────
84
88
  */
85
89
  this.generateSvgContent = () => {
86
90
  if (hasValue(this.svg) && this.svg.length > 0) {
@@ -113,7 +117,7 @@ export class Snackbar {
113
117
  }
114
118
  /**
115
119
  * LIFECYCLE
116
- * ------------------------------------------------------
120
+ * ─────────────────────────────────────────────────────
117
121
  */
118
122
  componentDidLoad() {
119
123
  raf(() => {
@@ -122,15 +126,15 @@ export class Snackbar {
122
126
  });
123
127
  }
124
128
  /**
125
- * LISTENERS
126
- * ------------------------------------------------------
129
+ * PUBLIC LISTENERS
130
+ * ─────────────────────────────────────────────────────
127
131
  */
128
132
  listenToBreakpoint(breakpoints) {
129
133
  this.isMobile = breakpoints.mobile;
130
134
  }
131
135
  /**
132
136
  * PUBLIC METHODS
133
- * ------------------------------------------------------
137
+ * ─────────────────────────────────────────────────────
134
138
  */
135
139
  /**
136
140
  * Closes this notification
@@ -141,27 +145,27 @@ export class Snackbar {
141
145
  }
142
146
  /**
143
147
  * RENDER
144
- * ------------------------------------------------------
148
+ * ─────────────────────────────────────────────────────
145
149
  */
146
150
  render() {
147
151
  const iconName = this.generateIconName();
148
152
  const svgContent = this.generateSvgContent();
149
- return (h(Host, { key: '66c571295c3931b071bb104e339febfac87db6df', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
153
+ return (h(Host, { key: '7dd8cbff5210c94aed353e878f3c31431c1733de', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
150
154
  [`is-ready`]: this.didLoad,
151
155
  [`is-visible`]: this.visible,
152
156
  [`is-closable`]: this.closable,
153
157
  [`is-mobile-open`]: this.isMobile && this.mobileOpenState,
154
158
  [`is-mobile-closed`]: this.isMobile && !this.mobileOpenState,
155
159
  [`is-${this.color}`]: hasValue(this.color),
156
- } }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: '9f9cedbf2fed42189e302a0aebc9852a2771136e', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: iconName, onClick: () => (this.mobileOpenState = true) })), iconName && !svgContent && (h("ds-icon", { key: 'a4c826d95d2041345bf4cee0540cb172f5336c79', part: "icon", id: "icon", name: iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
160
+ } }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: 'a1fe8bf8330b49df3607560a662fa80ccde6ea77', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: iconName, onClick: () => (this.mobileOpenState = true) })), iconName && !svgContent && (h("ds-icon", { key: '0e12504be8ef39a9af63f8acf38a5ce4aa2eebc5', part: "icon", id: "icon", name: iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
157
161
  ? 'triangle'
158
162
  : this.color === 'danger' || this.color === 'success' || this.color === 'info'
159
163
  ? 'circle'
160
- : undefined })), svgContent && h("ds-icon", { key: 'cdb9be5a9499d7ffad58c8c2e5a9096963b67f69', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), h("span", { key: '52810e3cb684318ce4fd8ec8be8529f63a8e8e8b', part: "content", id: "content" }, this.heading && h("h2", { key: '8ae2906a4ffabbc970c9c995c5d9efb0cc94fbc8', part: "heading" }, this.heading), h("span", { key: 'affd6a8d4ce4c19274a8c760f00f0a051bbae56e', part: "message" }, this.message, h("slot", { key: '75fd4ab26f8f6f8d1d89d2c1e0428b53bb3d75c5' }))), h("ds-button-group", { key: '0c644ee957e3a615e2c7fa030d537bea002e72ca', part: "action", id: "action" }, h("slot", { key: '840fb7d2be9fcf41ffa5b4eeff53d4a1b26d209a', name: "action" }), this.action && (h("ds-button", { key: '18d900d559bd085b5732ec37484622ee9da199ff', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
164
+ : undefined })), svgContent && h("ds-icon", { key: 'e9a0b074084f5952ef5eefcd9d434b6af15b6a5f', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), h("span", { key: 'd65d767a79e0e8094d7ccb88f4902321b14b03be', part: "content", id: "content" }, this.heading && h("h2", { key: '463d2b5b335d804d572347e229b0b94f97f9b9b7', part: "heading" }, this.heading), h("span", { key: 'd964774c987ef6906bd76bb6982f16ad1c4f9e3a', part: "message" }, this.message, h("slot", { key: 'bacfa9ac71c53f0223fb0a62b6fc1fca526acd3a' }))), h("ds-button-group", { key: 'e83047c52b2dda1709df234871e3dbb3e3755c95', part: "action", id: "action" }, h("slot", { key: 'ea3fed1cdf6c5f73d459aa097c00a677ecfc33c7', name: "action" }), this.action && (h("ds-button", { key: 'eb1607a6468a84b66c03af8ef4772e877bf149d7', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
161
165
  stopEventBubbling(ev);
162
166
  this.dsActionClick.emit(ev);
163
167
  this.actionHandler(this.alertId);
164
- } }, this.action)), this.closable && (h("ds-close", { key: 'd8c8c528cff2edbfac7a23488271c2071d5a84df', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
168
+ } }, this.action)), this.closable && (h("ds-close", { key: '7d9abbb81fc6fae5a78ca68d993e7376178aaa39', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
165
169
  stopEventBubbling(ev);
166
170
  this.close();
167
171
  } })))));
@@ -625,6 +629,14 @@ __decorate([
625
629
  Type('string'),
626
630
  __metadata("design:type", String)
627
631
  ], Snackbar.prototype, "actionHref", void 0);
632
+ __decorate([
633
+ Type('string'),
634
+ __metadata("design:type", String)
635
+ ], Snackbar.prototype, "alertId", void 0);
636
+ __decorate([
637
+ Type('boolean'),
638
+ __metadata("design:type", Boolean)
639
+ ], Snackbar.prototype, "visible", void 0);
628
640
  __decorate([
629
641
  ListenToBreakpoints(),
630
642
  __metadata("design:type", Function),
package/dist/collection/components/alert/toast/toast.host.css CHANGED
@@ -1 +1 @@
1
- :host{--_toast-position: var(--toast-position, var(--mod-toast-position, static));--_toast-top: var(--toast-top, var(--mod-toast-top));--_toast-right: var(--toast-right, var(--mod-toast-right));--_toast-bottom: var(--toast-bottom, var(--mod-toast-bottom));--_toast-left: var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m: var(--toast-m, var(--mod-toast-m, 0));--_toast-my: var(--toast-my, var(--mod-toast-my));--_toast-mx: var(--toast-mx, var(--mod-toast-mx));--_toast-ml: var(--toast-ml, var(--mod-toast-ml));--_toast-mr: var(--toast-mr, var(--mod-toast-mr));--_toast-mt: var(--toast-mt, var(--mod-toast-mt));--_toast-mb: var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow: var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius: var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg: var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-default-color-bg-base)));--_toast-color: var(--toast-color, var(--mod-toast-color, var(--ds-toast-default-color-text-base)));--_toast-icon-color: var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-default-color-icon-base)));--_toast-progress-duration: var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg: var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-default-color-progress-bar-base)));--_toast-progress-bg: var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-default-color-progress-bg-base)));--_toast-heading-font-family: var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-alias-text-family-heading)));--_toast-heading-font-weight: var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-alias-text-weight-bold)));--_toast-heading-font-size: var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-alias-text-size-base-device)));--_toast-heading-line-height: var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-alias-text-line-height-heading)));--_toast-content-font-family: var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-alias-text-family-body)));--_toast-content-font-weight: var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size: var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-alias-text-size-sm-device)));--_toast-content-line-height: var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-alias-text-line-height-body)));--_toast-gap: var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p: var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity: var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform: var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition: var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity: var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform: var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);transform:var(--_toast-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);align-items:center;width:100%}:host ds-icon:not([name]){--icon-color: null;--icon-size: var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt: 0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color: var(--ds-toast-info-color-text-base);--mod-toast-border-color: var(--ds-toast-info-color-border-base);--mod-toast-bg: var(--ds-toast-info-color-bg-base);--mod-toast-icon-color: var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-info-color-progress-bg-base)}:host(.is-success){--mod-toast-color: var(--ds-toast-success-color-text-base);--mod-toast-border-color: var(--ds-toast-success-color-border-base);--mod-toast-bg: var(--ds-toast-success-color-bg-base);--mod-toast-icon-color: var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-success-color-progress-bg-base)}:host(.is-warning){--mod-toast-color: var(--ds-toast-warning-color-text-base);--mod-toast-border-color: var(--ds-toast-warning-color-border-base);--mod-toast-bg: var(--ds-toast-warning-color-bg-base);--mod-toast-icon-color: var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-warning-color-progress-bg-base)}:host(.is-danger){--mod-toast-color: var(--ds-toast-danger-color-text-base);--mod-toast-border-color: var(--ds-toast-danger-color-border-base);--mod-toast-bg: var(--ds-toast-danger-color-bg-base);--mod-toast-icon-color: var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-danger-color-progress-bg-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}
1
+ :host{--_toast-position: var(--toast-position, var(--mod-toast-position, static));--_toast-top: var(--toast-top, var(--mod-toast-top));--_toast-right: var(--toast-right, var(--mod-toast-right));--_toast-bottom: var(--toast-bottom, var(--mod-toast-bottom));--_toast-left: var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m: var(--toast-m, var(--mod-toast-m, 0));--_toast-my: var(--toast-my, var(--mod-toast-my));--_toast-mx: var(--toast-mx, var(--mod-toast-mx));--_toast-ml: var(--toast-ml, var(--mod-toast-ml));--_toast-mr: var(--toast-mr, var(--mod-toast-mr));--_toast-mt: var(--toast-mt, var(--mod-toast-mt));--_toast-mb: var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow: var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius: var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg: var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-primary-color-background-base)));--_toast-color: var(--toast-color, var(--mod-toast-color, var(--ds-toast-primary-color-text-base)));--_toast-icon-color: var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-primary-color-icon-base)));--_toast-progress-duration: var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg: var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-primary-color-progress-bar-base)));--_toast-progress-bg: var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-primary-color-progress-background-base)));--_toast-heading-font-family: var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-alias-text-family-heading)));--_toast-heading-font-weight: var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-alias-text-weight-bold)));--_toast-heading-font-size: var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-alias-text-size-base-device)));--_toast-heading-line-height: var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-alias-text-line-height-heading)));--_toast-content-font-family: var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-alias-text-family-body)));--_toast-content-font-weight: var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size: var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-alias-text-size-sm-device)));--_toast-content-line-height: var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-alias-text-line-height-body)));--_toast-gap: var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p: var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity: var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform: var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition: var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity: var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform: var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);transform:var(--_toast-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);align-items:center;width:100%}:host ds-icon:not([name]){--icon-color: null;--icon-size: var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt: 0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color: var(--ds-toast-info-color-text-base);--mod-toast-border-color: var(--ds-toast-info-color-border-base);--mod-toast-bg: var(--ds-toast-info-color-background-base);--mod-toast-icon-color: var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-info-color-progress-background-base)}:host(.is-success){--mod-toast-color: var(--ds-toast-success-color-text-base);--mod-toast-border-color: var(--ds-toast-success-color-border-base);--mod-toast-bg: var(--ds-toast-success-color-background-base);--mod-toast-icon-color: var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-success-color-progress-background-base)}:host(.is-warning){--mod-toast-color: var(--ds-toast-warning-color-text-base);--mod-toast-border-color: var(--ds-toast-warning-color-border-base);--mod-toast-bg: var(--ds-toast-warning-color-background-base);--mod-toast-icon-color: var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-warning-color-progress-background-base)}:host(.is-danger){--mod-toast-color: var(--ds-toast-danger-color-text-base);--mod-toast-border-color: var(--ds-toast-danger-color-border-base);--mod-toast-bg: var(--ds-toast-danger-color-background-base);--mod-toast-icon-color: var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-danger-color-progress-background-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}
package/dist/collection/components/alert/toast/toast.js CHANGED
@@ -19,6 +19,10 @@ export class Toast {
19
19
  this.animated = false;
20
20
  this.didLoad = false;
21
21
  this.didPause = false;
22
+ /**
23
+ * PUBLIC PROPERTY API
24
+ * ─────────────────────────────────────────────────────
25
+ */
22
26
  /**
23
27
  * Defines the color of the element
24
28
  * Color type primary is deprecated, please use info instead.
@@ -77,7 +81,7 @@ export class Toast {
77
81
  this.actionHandler = () => void 0;
78
82
  /**
79
83
  * PRIVATE METHODS
80
- * ------------------------------------------------------
84
+ * ─────────────────────────────────────────────────────
81
85
  */
82
86
  this.generateSvgContent = () => {
83
87
  if (hasValue(this.svg)) {
@@ -110,7 +114,7 @@ export class Toast {
110
114
  }
111
115
  /**
112
116
  * LIFECYCLE
113
- * ------------------------------------------------------
117
+ * ─────────────────────────────────────────────────────
114
118
  */
115
119
  componentDidLoad() {
116
120
  raf(() => {
@@ -120,7 +124,7 @@ export class Toast {
120
124
  }
121
125
  /**
122
126
  * PUBLIC METHODS
123
- * ------------------------------------------------------
127
+ * ─────────────────────────────────────────────────────
124
128
  */
125
129
  /**
126
130
  * Closes this notification
@@ -137,7 +141,7 @@ export class Toast {
137
141
  }
138
142
  /**
139
143
  * RENDER
140
- * ------------------------------------------------------
144
+ * ─────────────────────────────────────────────────────
141
145
  */
142
146
  render() {
143
147
  const iconName = this.generateIconName();
@@ -149,7 +153,7 @@ export class Toast {
149
153
  '--toast-progress-duration': `${this.duration}ms`,
150
154
  }
151
155
  : {};
152
- return (h(Host, { key: 'f38cb2cdb7460f866c5c9f7d14a6b2565cba63f9', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
156
+ return (h(Host, { key: 'd4ca47796b7b5927412383a15311e794ae217be4', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
153
157
  [`is-ready`]: this.didLoad,
154
158
  [`is-paused`]: this.didPause,
155
159
  [`is-visible`]: this.visible,
@@ -163,7 +167,7 @@ export class Toast {
163
167
  }, onMouseLeave: () => {
164
168
  this.didPause = false;
165
169
  this.dsDidResume.emit();
166
- } }, !hasValue(svgContent) && (h("ds-icon", { key: 'a3533c4ad23fcfeeb13628cce8292c877010d31d', id: "icon", part: "icon", name: iconName || this.color === 'warning'
170
+ } }, !hasValue(svgContent) && (h("ds-icon", { key: '69dad798037879665cfcac7c2c4c5202e59398ff', id: "icon", part: "icon", name: iconName || this.color === 'warning'
167
171
  ? 'alert'
168
172
  : this.color === 'danger'
169
173
  ? 'alert'
@@ -175,11 +179,11 @@ export class Toast {
175
179
  ? 'triangle'
176
180
  : this.color === 'danger' || this.color === 'success' || this.color === 'info'
177
181
  ? 'circle'
178
- : undefined })), hasValue(svgContent) && h("ds-icon", { key: '206dbb5cd3673773eb5a9327679676ad9a0d15f9', id: "icon", part: "icon", svg: svgContent }), h("span", { key: 'f7f7fb5c0071f6cb35a005e9a843cfc527d96e3f', part: "content", id: "content" }, this.heading && h("h2", { key: '073902110e1777b279e829e05bcc040e24b8251e', part: "heading" }, this.heading), h("span", { key: '677a6c7b3bb849376cd47b8449e8cab982c396b6', part: "message" }, this.message, h("slot", { key: '722ebc769eb27196aef924c2028a5b0c04590d25' }))), hasValue(this.action) && (h("ds-button", { key: '814a491f7657a3ad56021a3607651244afafc2af', id: "action", color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
182
+ : undefined })), hasValue(svgContent) && h("ds-icon", { key: 'a6ba300bdb84ba361450bb08059293a6a533de37', id: "icon", part: "icon", svg: svgContent }), h("span", { key: '0c1dcbd34ccd9e8d4f5fa8abf575c8de78af23ca', part: "content", id: "content" }, this.heading && h("h2", { key: 'e0f1f64c75f147c46ffbc7fcd38df70b79d1788d', part: "heading" }, this.heading), h("span", { key: 'b61f2943532f86a484ab688253a8e7a04327c00b', part: "message" }, this.message, h("slot", { key: 'e9924f719790067a6e2bdb136b18dec3841f04ae' }))), hasValue(this.action) && (h("ds-button", { key: 'ba37a92ae3638e6304ddca76b9793003455e79eb', id: "action", color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
179
183
  stopEventBubbling(ev);
180
184
  this.dsActionClick.emit(ev);
181
185
  this.actionHandler(this.alertId);
182
- } }, this.action)), this.closable && (h("ds-close", { key: 'e1c6e38442650af9321ba62e43a94fc2e10cbb6f', part: "close", onClick: ev => {
186
+ } }, this.action)), this.closable && (h("ds-close", { key: '1b2978686c359bb6b6cf6f9e40bd8a693b8480cd', part: "close", onClick: ev => {
183
187
  stopEventBubbling(ev);
184
188
  this.close();
185
189
  } }))));
@@ -739,6 +743,14 @@ __decorate([
739
743
  Type('string'),
740
744
  __metadata("design:type", String)
741
745
  ], Toast.prototype, "actionHref", void 0);
746
+ __decorate([
747
+ Type('string'),
748
+ __metadata("design:type", String)
749
+ ], Toast.prototype, "alertId", void 0);
750
+ __decorate([
751
+ Type('boolean'),
752
+ __metadata("design:type", Boolean)
753
+ ], Toast.prototype, "visible", void 0);
742
754
  __decorate([
743
755
  ListenToConfig(),
744
756
  __metadata("design:type", Function),