@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
@@ -15,6 +15,10 @@ import { startFocusVisible } from "./app.focus.util";
15
15
  export class App {
16
16
  constructor() {
17
17
  this.debouncedNotify = debounce(() => this.notifyResize(), 100);
18
+ /**
19
+ * PUBLIC PROPERTY API
20
+ * ─────────────────────────────────────────────────────
21
+ */
18
22
  /**
19
23
  * Disables all animation inside the ds-app. Can be used for simplify e2e testing.
20
24
  */
@@ -27,6 +31,10 @@ export class App {
27
31
  * @internal Comma separated list of components to log.
28
32
  */
29
33
  this.logger = '';
34
+ /**
35
+ * EVENT HANDLERS
36
+ * ─────────────────────────────────────────────────────
37
+ */
30
38
  this.notifyResize = async () => {
31
39
  if (dsBrowser.hasDocument && dsBrowser.hasWindow) {
32
40
  const doc = document.documentElement;
@@ -37,6 +45,10 @@ export class App {
37
45
  createLogger(log) {
38
46
  this.log = log;
39
47
  }
48
+ /**
49
+ * LIFECYCLE
50
+ * ─────────────────────────────────────────────────────
51
+ */
40
52
  connectedCallback() {
41
53
  if (this.animated === false) {
42
54
  updateDsAnimated(this.animated);
@@ -67,17 +79,28 @@ export class App {
67
79
  window.removeEventListener('resize', this.debouncedNotify);
68
80
  }
69
81
  }
82
+ /**
83
+ * PUBLIC METHODS
84
+ * ─────────────────────────────────────────────────────
85
+ */
86
+ /**
87
+ * Sets focus on the given elements using the app's focus-visible handling.
88
+ */
70
89
  async setFocus(elements) {
71
90
  if (this.focusVisible) {
72
91
  this.focusVisible.setFocus(elements);
73
92
  }
74
93
  }
94
+ /**
95
+ * RENDER
96
+ * ─────────────────────────────────────────────────────
97
+ */
75
98
  render() {
76
- return (h(Host, { key: '1eaae424ed6f20db8d0d6a0c7c485f4d620d20bf', class: {
99
+ return (h(Host, { key: '8bcef45566c21039ed2bfb494bf7bcd4dbbc8344', class: {
77
100
  'ds-app': true,
78
101
  'ds-app--safari': dsBrowser.isSafari,
79
102
  'ds-app--touch': dsDevice.hasTouchScreen,
80
- } }, h("slot", { key: 'c80d99b79ee378c003a130f35beb688f746edb69' })));
103
+ } }, h("slot", { key: 'f3dba312b6a595d0b6a07a6f6b894f3fbb36f5c9' })));
81
104
  }
82
105
  static get is() { return "ds-app"; }
83
106
  static get originalStyleUrls() {
@@ -201,7 +224,7 @@ export class App {
201
224
  "return": "Promise<void>"
202
225
  },
203
226
  "docs": {
204
- "text": "",
227
+ "text": "Sets focus on the given elements using the app's focus-visible handling.",
205
228
  "tags": []
206
229
  }
207
230
  }
@@ -223,3 +246,7 @@ __decorate([
223
246
  Type('boolean'),
224
247
  __metadata("design:type", Boolean)
225
248
  ], App.prototype, "ready", void 0);
249
+ __decorate([
250
+ Type('string'),
251
+ __metadata("design:type", String)
252
+ ], App.prototype, "logger", void 0);
@@ -1 +1 @@
1
- :host{--_badge-position: var(--badge-position, var(--mod-badge-position, static));--_badge-top: var(--badge-top, var(--mod-badge-top));--_badge-right: var(--badge-right, var(--mod-badge-right));--_badge-bottom: var(--badge-bottom, var(--mod-badge-bottom));--_badge-left: var(--badge-left, var(--mod-badge-left));position:var(--_badge-position);top:var(--_badge-top);right:var(--_badge-right);bottom:var(--_badge-bottom);left:var(--_badge-left);--_badge-m: var(--badge-m, var(--mod-badge-m, 0));--_badge-my: var(--badge-my, var(--mod-badge-my));--_badge-mx: var(--badge-mx, var(--mod-badge-mx));--_badge-ml: var(--badge-ml, var(--mod-badge-ml));--_badge-mr: var(--badge-mr, var(--mod-badge-mr));--_badge-mt: var(--badge-mt, var(--mod-badge-mt));--_badge-mb: var(--badge-mb, var(--mod-badge-mb));margin:var(--_badge-m);margin-inline:var(--_badge-mx);margin-block:var(--_badge-my);margin-left:var(--_badge-ml);margin-right:var(--_badge-mr);margin-top:var(--_badge-mt);margin-bottom:var(--_badge-mb);--_badge-font-family: var(--badge-font-family, var(--mod-badge-font-family, var(--ds-badge-text-family)));--_badge-font-weight: var(--badge-font-weight, var(--mod-badge-font-weight, var(--ds-badge-text-weight)));--_badge-min-width: var(--badge-min-width, var(--mod-badge-min-width, var(--ds-badge-size-base)));--_badge-height: var(--badge-height, var(--mod-badge-height, var(--ds-badge-size-base)));--_badge-radius: var(--badge-radius, var(--mod-badge-radius, calc(var(--ds-badge-size-base) / 2)));--_badge-color-background: var(--badge-color-background, var(--mod-badge-color-background, var(--ds-badge-color-base-background)));--_badge-color-text: var(--badge-color-text, var(--mod-badge-color-text, var(--ds-badge-color-base-text)));--_badge-pulse-color: var(--badge-pulse-color, var(--mod-badge-pulse-color, var(--ds-badge-color-base-background)));--_badge-font-size: var(--badge-font-size, var(--mod-badge-font-size, 85%));--_badge-icon-size: var(--badge-icon-size, var(--mod-badge-icon-size, 0.75rem));--_badge-icon-color: var(--badge-icon-color, var(--mod-badge-icon-color, var(--ds-badge-color-base-text)));--_badge-gap: var(--badge-gap, var(--mod-badge-gap, 4px));--_badge-padding-inline: var(--badge-padding-inline, var(--mod-badge-padding-inline, 4px));--_badge-padding-block: var(--badge-padding-block, var(--mod-badge-padding-block, 4px))}:host{-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;display:inline-flex;vertical-align:text-top;justify-content:center;align-items:center;hyphens:auto;font-size:var(--_badge-font-size);white-space:nowrap;line-height:1;z-index:1;cursor:inherit;min-width:var(--_badge-min-width);height:var(--_badge-height);border-radius:var(--_badge-radius);background:var(--_badge-color-background);color:var(--_badge-color-text);font-family:var(--_badge-font-family);font-weight:var(--_badge-font-weight);gap:var(--_badge-gap);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block)}:host ds-icon{--icon-size: var(--_badge-icon-size);--icon-inner-size: var(--_badge-icon-size);--icon-color: var(--_badge-icon-color)}:host(.is-red){--mod-badge-color-text: var(--ds-badge-color-red-text);--mod-badge-color-background: var(--ds-badge-color-red-background);--mod-badge-pulse-color: var(--ds-badge-color-red-background);--mod-badge-icon-color: var(--ds-badge-color-red-text);--icon-color: var(--ds-badge-color-red-text)}:host(.is-green){--mod-badge-color-text: var(--ds-badge-color-green-text);--mod-badge-color-background: var(--ds-badge-color-green-background);--mod-badge-pulse-color: var(--ds-badge-color-green-background);--mod-badge-icon-color: var(--ds-badge-color-green-text);--icon-color: var(--ds-badge-color-green-text)}:host(.is-yellow){--mod-badge-color-text: var(--ds-badge-color-yellow-text);--mod-badge-color-background: var(--ds-badge-color-yellow-background);--mod-badge-pulse-color: var(--ds-badge-color-yellow-background);--mod-badge-icon-color: var(--ds-badge-color-yellow-text);--icon-color: var(--ds-badge-color-yellow-text)}:host(.is-purple){--mod-badge-color-text: var(--ds-badge-color-purple-text);--mod-badge-color-background: var(--ds-badge-color-purple-background);--mod-badge-pulse-color: var(--ds-badge-color-purple-background);--mod-badge-icon-color: var(--ds-badge-color-purple-text);--icon-color: var(--ds-badge-color-purple-text)}:host(.is-grey){--mod-badge-color-text: var(--ds-badge-color-grey-text);--mod-badge-color-background: var(--ds-badge-color-grey-background);--mod-badge-pulse-color: var(--ds-badge-color-grey-background);--mod-badge-icon-color: var(--ds-badge-color-grey-text);--icon-color: var(--ds-badge-color-grey-text)}:host(.is-success){--mod-badge-color-text: var(--ds-badge-color-success-text);--mod-badge-color-background: var(--ds-badge-color-success-background);--mod-badge-pulse-color: var(--ds-badge-color-success-background);--mod-badge-icon-color: var(--ds-badge-color-success-text);--icon-color: var(--ds-badge-color-success-text)}:host(.is-warning){--mod-badge-color-text: var(--ds-badge-color-warning-text);--mod-badge-color-background: var(--ds-badge-color-warning-background);--mod-badge-pulse-color: var(--ds-badge-color-warning-background);--mod-badge-icon-color: var(--ds-badge-color-warning-text);--icon-color: var(--ds-badge-color-warning-text)}:host(.is-danger){--mod-badge-color-text: var(--ds-badge-color-danger-text);--mod-badge-color-background: var(--ds-badge-color-danger-background);--mod-badge-pulse-color: var(--ds-badge-color-danger-background);--mod-badge-icon-color: var(--ds-badge-color-danger-text);--icon-color: var(--ds-badge-color-danger-text)}:host(.is-sm){--mod-badge-radius: calc(var(--ds-badge-size-sm) / 2);--mod-badge-height: var(--ds-badge-size-sm);--mod-badge-min-width: var(--ds-badge-size-sm);--mod-badge-padding-inline: 0;--mod-badge-padding-block: 0;--mod-badge-font-size: 0;max-width:var(--ds-badge-size-sm);padding:0;overflow:hidden}:host(.is-sm)>*{display:none}:host(.is-lg){--mod-badge-min-width: var(--ds-badge-size-lg);--mod-badge-height: var(--ds-badge-size-lg);--mod-badge-radius: calc(var(--ds-badge-size-lg) / 2);--mod-badge-font-size: 1rem;--mod-badge-icon-size: 1.125rem}:host(.is-pulse){animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_badge-pulse-color)}70%{box-shadow:0 0 0 .5rem rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
1
+ :host{--_badge-position: var(--badge-position, var(--mod-badge-position, static));--_badge-top: var(--badge-top, var(--mod-badge-top));--_badge-right: var(--badge-right, var(--mod-badge-right));--_badge-bottom: var(--badge-bottom, var(--mod-badge-bottom));--_badge-left: var(--badge-left, var(--mod-badge-left));position:var(--_badge-position);top:var(--_badge-top);right:var(--_badge-right);bottom:var(--_badge-bottom);left:var(--_badge-left);--_badge-m: var(--badge-m, var(--mod-badge-m, 0));--_badge-my: var(--badge-my, var(--mod-badge-my));--_badge-mx: var(--badge-mx, var(--mod-badge-mx));--_badge-ml: var(--badge-ml, var(--mod-badge-ml));--_badge-mr: var(--badge-mr, var(--mod-badge-mr));--_badge-mt: var(--badge-mt, var(--mod-badge-mt));--_badge-mb: var(--badge-mb, var(--mod-badge-mb));margin:var(--_badge-m);margin-inline:var(--_badge-mx);margin-block:var(--_badge-my);margin-left:var(--_badge-ml);margin-right:var(--_badge-mr);margin-top:var(--_badge-mt);margin-bottom:var(--_badge-mb);--_badge-font-family: var(--badge-font-family, var(--mod-badge-font-family, var(--ds-badge-font-family)));--_badge-font-weight: var(--badge-font-weight, var(--mod-badge-font-weight, var(--ds-badge-font-weight)));--_badge-min-width: var(--badge-min-width, var(--mod-badge-min-width, var(--ds-badge-size-base)));--_badge-height: var(--badge-height, var(--mod-badge-height, var(--ds-badge-size-base)));--_badge-radius: var(--badge-radius, var(--mod-badge-radius, calc(var(--ds-badge-size-base) / 2)));--_badge-color-background: var(--badge-color-background, var(--mod-badge-color-background, var(--ds-badge-base-color-background)));--_badge-color-text: var(--badge-color-text, var(--mod-badge-color-text, var(--ds-badge-base-color-text)));--_badge-pulse-color: var(--badge-pulse-color, var(--mod-badge-pulse-color, var(--ds-badge-base-color-background)));--_badge-font-size: var(--badge-font-size, var(--mod-badge-font-size, 85%));--_badge-icon-size: var(--badge-icon-size, var(--mod-badge-icon-size, 0.75rem));--_badge-icon-color: var(--badge-icon-color, var(--mod-badge-icon-color, var(--ds-badge-base-color-text)));--_badge-gap: var(--badge-gap, var(--mod-badge-gap, 4px));--_badge-padding-inline: var(--badge-padding-inline, var(--mod-badge-padding-inline, 4px));--_badge-padding-block: var(--badge-padding-block, var(--mod-badge-padding-block, 4px))}:host{-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;display:inline-flex;vertical-align:text-top;justify-content:center;align-items:center;hyphens:auto;font-size:var(--_badge-font-size);white-space:nowrap;line-height:1;z-index:1;cursor:inherit;min-width:var(--_badge-min-width);height:var(--_badge-height);border-radius:var(--_badge-radius);background:var(--_badge-color-background);color:var(--_badge-color-text);font-family:var(--_badge-font-family);font-weight:var(--_badge-font-weight);gap:var(--_badge-gap);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block)}:host ds-icon{--icon-size: var(--_badge-icon-size);--icon-inner-size: var(--_badge-icon-size);--icon-color: var(--_badge-icon-color)}:host(.is-red){--mod-badge-color-text: var(--ds-badge-red-color-text);--mod-badge-color-background: var(--ds-badge-red-color-background);--mod-badge-pulse-color: var(--ds-badge-red-color-background);--mod-badge-icon-color: var(--ds-badge-red-color-text);--icon-color: var(--ds-badge-red-color-text)}:host(.is-green){--mod-badge-color-text: var(--ds-badge-green-color-text);--mod-badge-color-background: var(--ds-badge-green-color-background);--mod-badge-pulse-color: var(--ds-badge-green-color-background);--mod-badge-icon-color: var(--ds-badge-green-color-text);--icon-color: var(--ds-badge-green-color-text)}:host(.is-yellow){--mod-badge-color-text: var(--ds-badge-yellow-color-text);--mod-badge-color-background: var(--ds-badge-yellow-color-background);--mod-badge-pulse-color: var(--ds-badge-yellow-color-background);--mod-badge-icon-color: var(--ds-badge-yellow-color-text);--icon-color: var(--ds-badge-yellow-color-text)}:host(.is-purple){--mod-badge-color-text: var(--ds-badge-purple-color-text);--mod-badge-color-background: var(--ds-badge-purple-color-background);--mod-badge-pulse-color: var(--ds-badge-purple-color-background);--mod-badge-icon-color: var(--ds-badge-purple-color-text);--icon-color: var(--ds-badge-purple-color-text)}:host(.is-grey){--mod-badge-color-text: var(--ds-badge-grey-color-text);--mod-badge-color-background: var(--ds-badge-grey-color-background);--mod-badge-pulse-color: var(--ds-badge-grey-color-background);--mod-badge-icon-color: var(--ds-badge-grey-color-text);--icon-color: var(--ds-badge-grey-color-text)}:host(.is-success){--mod-badge-color-text: var(--ds-badge-success-color-text);--mod-badge-color-background: var(--ds-badge-success-color-background);--mod-badge-pulse-color: var(--ds-badge-success-color-background);--mod-badge-icon-color: var(--ds-badge-success-color-text);--icon-color: var(--ds-badge-success-color-text)}:host(.is-warning){--mod-badge-color-text: var(--ds-badge-warning-color-text);--mod-badge-color-background: var(--ds-badge-warning-color-background);--mod-badge-pulse-color: var(--ds-badge-warning-color-background);--mod-badge-icon-color: var(--ds-badge-warning-color-text);--icon-color: var(--ds-badge-warning-color-text)}:host(.is-danger){--mod-badge-color-text: var(--ds-badge-danger-color-text);--mod-badge-color-background: var(--ds-badge-danger-color-background);--mod-badge-pulse-color: var(--ds-badge-danger-color-background);--mod-badge-icon-color: var(--ds-badge-danger-color-text);--icon-color: var(--ds-badge-danger-color-text)}:host(.is-sm){--mod-badge-radius: calc(var(--ds-badge-size-sm) / 2);--mod-badge-height: var(--ds-badge-size-sm);--mod-badge-min-width: var(--ds-badge-size-sm);--mod-badge-padding-inline: 0;--mod-badge-padding-block: 0;--mod-badge-font-size: 0;max-width:var(--ds-badge-size-sm);padding:0;overflow:hidden}:host(.is-sm)>*{display:none}:host(.is-lg){--mod-badge-min-width: var(--ds-badge-size-lg);--mod-badge-height: var(--ds-badge-size-lg);--mod-badge-radius: calc(var(--ds-badge-size-lg) / 2);--mod-badge-font-size: 1rem;--mod-badge-icon-size: 1.125rem}:host(.is-pulse){animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_badge-pulse-color)}70%{box-shadow:0 0 0 .5rem rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
3
3
  */
4
- export const BADGE_SIZES = ['sm', 'lg', 'small', 'large', ''];
5
- export const BADGE_COLORS = ['grey', 'danger', 'warning', 'success', 'red', 'yellow', 'green', 'purple', ''];
6
- export const BADGE_POSITIONS = ['card', 'button', 'tabs', ''];
4
+ export const BADGE_SIZES = ['sm', 'lg', 'small', 'large'];
5
+ export const BADGE_COLORS = ['grey', 'danger', 'warning', 'success', 'red', 'yellow', 'green', 'purple'];
6
+ export const BADGE_POSITIONS = ['card', 'button', 'tabs'];
@@ -14,25 +14,14 @@ import { BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS, } from "./badge.interfaces"
14
14
  */
15
15
  export class Badge {
16
16
  constructor() {
17
- // ========================================================================
18
- // PUBLIC PROPERTY API
19
- // ========================================================================
20
17
  /**
21
- * Name of the icon to show. If an icon is present, text should be hidden.
22
- */
23
- this.icon = '';
24
- /**
25
- * Define the size of badge. Small is recommended for tabs.
18
+ * PUBLIC PROPERTY API
19
+ * ─────────────────────────────────────────────────────
26
20
  */
27
- this.size = '';
28
21
  /**
29
- * Define the color for the badge.
30
- */
31
- this.color = '';
32
- /**
33
- * If `true` the badge is added to the top right corner of the card.
22
+ * Name of the icon to show. If an icon is present, text should be hidden.
34
23
  */
35
- this.position = '';
24
+ this.icon = '';
36
25
  /**
37
26
  * If `true` the badge is added to the top right corner of the card.
38
27
  */
@@ -41,25 +30,17 @@ export class Badge {
41
30
  createLogger(log) {
42
31
  this.log = log;
43
32
  }
44
- // ========================================================================
45
- // LIFECYCLE
46
- // ========================================================================
47
- // ========================================================================
48
- // PROPERTY VALIDATION
49
- // ========================================================================
50
- // ========================================================================
51
- // PRIVATE METHODS
52
- // ========================================================================
53
- // ========================================================================
54
- // RENDER
55
- // ========================================================================
33
+ /**
34
+ * RENDER
35
+ * ─────────────────────────────────────────────────────
36
+ */
56
37
  render() {
57
38
  const size = normalizeDeprecatedTShirtSize(this.size) || '';
58
- return (h(Host, { key: '96172084445525ad98729b13be73fd5608f20c3f', class: {
39
+ return (h(Host, { key: '34a3b93d70e490c99a38e6c745d18ecfdfdcc9e2', class: {
59
40
  [`is-${this.color}`]: hasValue(this.color),
60
41
  [`is-${size}`]: hasValue(this.size),
61
42
  'is-pulse': this.pulse,
62
- } }, h("span", { key: '23c0d0ddfd7be982b9d3538e5a6fba39993b3a99', id: "badge", part: "badge" }, h("slot", { key: 'c477848d6d4cb7079c12dfc667e3d63c15041ef9' }), size !== 'sm' && hasValue(this.icon) ? h("ds-icon", { part: "icon", name: this.icon }) : '')));
43
+ } }, h("span", { key: 'ef842b604bf9d7135795e706bb2251bc97222dac', id: "badge", part: "badge" }, h("slot", { key: '72ae5dd7aacdf19ad8fb059e7eb6657ff1eaf92f' }), size !== 'sm' && hasValue(this.icon) ? h("ds-icon", { part: "icon", name: this.icon }) : '')));
63
44
  }
64
45
  static get is() { return "ds-badge"; }
65
46
  static get encapsulation() { return "shadow"; }
@@ -100,7 +81,7 @@ export class Badge {
100
81
  "mutable": false,
101
82
  "complexType": {
102
83
  "original": "BadgeSize",
103
- "resolved": "\"\" | \"large\" | \"lg\" | \"sm\" | \"small\"",
84
+ "resolved": "\"large\" | \"lg\" | \"sm\" | \"small\" | undefined",
104
85
  "references": {
105
86
  "BadgeSize": {
106
87
  "location": "import",
@@ -111,7 +92,7 @@ export class Badge {
111
92
  }
112
93
  },
113
94
  "required": false,
114
- "optional": false,
95
+ "optional": true,
115
96
  "docs": {
116
97
  "tags": [],
117
98
  "text": "Define the size of badge. Small is recommended for tabs."
@@ -119,15 +100,14 @@ export class Badge {
119
100
  "getter": false,
120
101
  "setter": false,
121
102
  "reflect": true,
122
- "attribute": "size",
123
- "defaultValue": "''"
103
+ "attribute": "size"
124
104
  },
125
105
  "color": {
126
106
  "type": "string",
127
107
  "mutable": false,
128
108
  "complexType": {
129
109
  "original": "BadgeColor",
130
- "resolved": "\"\" | \"danger\" | \"green\" | \"grey\" | \"purple\" | \"red\" | \"success\" | \"warning\" | \"yellow\"",
110
+ "resolved": "\"danger\" | \"green\" | \"grey\" | \"purple\" | \"red\" | \"success\" | \"warning\" | \"yellow\" | undefined",
131
111
  "references": {
132
112
  "BadgeColor": {
133
113
  "location": "import",
@@ -138,7 +118,7 @@ export class Badge {
138
118
  }
139
119
  },
140
120
  "required": false,
141
- "optional": false,
121
+ "optional": true,
142
122
  "docs": {
143
123
  "tags": [],
144
124
  "text": "Define the color for the badge."
@@ -146,15 +126,14 @@ export class Badge {
146
126
  "getter": false,
147
127
  "setter": false,
148
128
  "reflect": true,
149
- "attribute": "color",
150
- "defaultValue": "''"
129
+ "attribute": "color"
151
130
  },
152
131
  "position": {
153
132
  "type": "string",
154
133
  "mutable": false,
155
134
  "complexType": {
156
135
  "original": "BadgePosition",
157
- "resolved": "\"\" | \"button\" | \"card\" | \"tabs\"",
136
+ "resolved": "\"button\" | \"card\" | \"tabs\" | undefined",
158
137
  "references": {
159
138
  "BadgePosition": {
160
139
  "location": "import",
@@ -165,16 +144,15 @@ export class Badge {
165
144
  }
166
145
  },
167
146
  "required": false,
168
- "optional": false,
147
+ "optional": true,
169
148
  "docs": {
170
149
  "tags": [],
171
- "text": "If `true` the badge is added to the top right corner of the card."
150
+ "text": "Defines where the badge is positioned relative to its host, e.g. the top right corner of a card."
172
151
  },
173
152
  "getter": false,
174
153
  "setter": false,
175
154
  "reflect": true,
176
- "attribute": "position",
177
- "defaultValue": "''"
155
+ "attribute": "position"
178
156
  },
179
157
  "pulse": {
180
158
  "type": "boolean",
@@ -4,7 +4,6 @@
4
4
  export const BUTTON_GROUP_ALIGNMENTS = ['right', 'center', 'left', ''];
5
5
  export const BUTTON_GROUP_DIRECTIONS = ['auto', 'row', 'column'];
6
6
  export const BUTTON_COLORS = [
7
- '',
8
7
  'primary',
9
8
  'secondary',
10
9
  'tertiary',
@@ -297,7 +297,7 @@ export class Button {
297
297
  "mutable": false,
298
298
  "complexType": {
299
299
  "original": "ButtonColor",
300
- "resolved": "\"\" | \"danger\" | \"info\" | \"info-light\" | \"light\" | \"link\" | \"primary\" | \"primary-light\" | \"secondary\" | \"success\" | \"tertiary\" | \"tertiary-green\" | \"tertiary-purple\" | \"tertiary-red\" | \"tertiary-yellow\" | \"text\" | \"warning\"",
300
+ "resolved": "\"danger\" | \"info\" | \"info-light\" | \"light\" | \"link\" | \"primary\" | \"primary-light\" | \"secondary\" | \"success\" | \"tertiary\" | \"tertiary-green\" | \"tertiary-purple\" | \"tertiary-red\" | \"tertiary-yellow\" | \"text\" | \"warning\"",
301
301
  "references": {
302
302
  "ButtonColor": {
303
303
  "location": "import",
@@ -1 +1 @@
1
- :host{--_card-content-position: var(--card-content-position, var(--mod-card-content-position, static));--_card-content-top: var(--card-content-top, var(--mod-card-content-top));--_card-content-right: var(--card-content-right, var(--mod-card-content-right));--_card-content-bottom: var(--card-content-bottom, var(--mod-card-content-bottom));--_card-content-left: var(--card-content-left, var(--mod-card-content-left));position:var(--_card-content-position);top:var(--_card-content-top);right:var(--_card-content-right);bottom:var(--_card-content-bottom);left:var(--_card-content-left);--_card-content-m: var(--card-content-m, var(--mod-card-content-m, 0));--_card-content-my: var(--card-content-my, var(--mod-card-content-my));--_card-content-mx: var(--card-content-mx, var(--mod-card-content-mx));--_card-content-ml: var(--card-content-ml, var(--mod-card-content-ml));--_card-content-mr: var(--card-content-mr, var(--mod-card-content-mr));--_card-content-mt: var(--card-content-mt, var(--mod-card-content-mt));--_card-content-mb: var(--card-content-mb, var(--mod-card-content-mb));margin:var(--_card-content-m);margin-inline:var(--_card-content-mx);margin-block:var(--_card-content-my);margin-left:var(--_card-content-ml);margin-right:var(--_card-content-mr);margin-top:var(--_card-content-mt);margin-bottom:var(--_card-content-mb);display:block;margin:var(--_card-content-m);margin-inline:var(--_card-content-mx);margin-block:var(--_card-content-my);margin-left:var(--_card-content-ml);margin-right:var(--_card-content-mr);margin-top:var(--_card-content-mt);margin-bottom:var(--_card-content-mb);position:var(--_card-content-position);top:var(--_card-content-top);right:var(--_card-content-right);bottom:var(--_card-content-bottom);left:var(--_card-content-left)}:host{font-family:var(--ds-alias-text-family-body);font-weight:var(--ds-alias-text-weight-regular)}:host strong,:host b{font-weight:var(--ds-alias-text-weight-bold)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host ds-heading{font-family:var(--ds-alias-text-family-heading);font-weight:var(--ds-heading-weight)}:host h1,:host [role=heading][aria-level="1"]{font-size:var(--ds-heading-1-size-device)}:host h2,:host [role=heading][aria-level="2"]{font-size:var(--ds-heading-2-size-device)}:host h3,:host [role=heading][aria-level="3"]{font-size:var(--ds-heading-3-size-device)}:host h4,:host [role=heading][aria-level="4"]{font-size:var(--ds-heading-4-size-device)}:host h5,:host [role=heading][aria-level="5"]{font-size:var(--ds-heading-5-size-device)}:host ds-heading:not(:last-child),:host h1:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h1:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h2:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h2:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h3:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h3:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h4:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h4:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h5:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-2xs-device)}:host h5:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-2xs-device)}:host ds-text:not(:last-child),:host p.text:not(:last-child){--text-mb: var(--ds-alias-space-base-device)}:host p:not(.text,:last-child){margin-bottom:var(--ds-alias-space-base-device)}:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p.text,:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+ds-text{--text-mt: var(--ds-alias-space-base-device)}:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p:not(.text,ds-text){margin-top:var(--ds-alias-space-base-device)}
1
+ :host{--_card-content-position: var(--card-content-position, var(--mod-card-content-position, static));--_card-content-top: var(--card-content-top, var(--mod-card-content-top));--_card-content-right: var(--card-content-right, var(--mod-card-content-right));--_card-content-bottom: var(--card-content-bottom, var(--mod-card-content-bottom));--_card-content-left: var(--card-content-left, var(--mod-card-content-left));position:var(--_card-content-position);top:var(--_card-content-top);right:var(--_card-content-right);bottom:var(--_card-content-bottom);left:var(--_card-content-left);--_card-content-m: var(--card-content-m, var(--mod-card-content-m, 0));--_card-content-my: var(--card-content-my, var(--mod-card-content-my));--_card-content-mx: var(--card-content-mx, var(--mod-card-content-mx));--_card-content-ml: var(--card-content-ml, var(--mod-card-content-ml));--_card-content-mr: var(--card-content-mr, var(--mod-card-content-mr));--_card-content-mt: var(--card-content-mt, var(--mod-card-content-mt));--_card-content-mb: var(--card-content-mb, var(--mod-card-content-mb));margin:var(--_card-content-m);margin-inline:var(--_card-content-mx);margin-block:var(--_card-content-my);margin-left:var(--_card-content-ml);margin-right:var(--_card-content-mr);margin-top:var(--_card-content-mt);margin-bottom:var(--_card-content-mb);display:block;margin:var(--_card-content-m);margin-inline:var(--_card-content-mx);margin-block:var(--_card-content-my);margin-left:var(--_card-content-ml);margin-right:var(--_card-content-mr);margin-top:var(--_card-content-mt);margin-bottom:var(--_card-content-mb);position:var(--_card-content-position);top:var(--_card-content-top);right:var(--_card-content-right);bottom:var(--_card-content-bottom);left:var(--_card-content-left)}:host{font-family:var(--ds-alias-text-family-body);font-weight:var(--ds-alias-text-weight-regular)}:host strong,:host b{font-weight:var(--ds-alias-text-weight-bold)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host ds-heading{font-family:var(--ds-alias-text-family-heading);font-weight:var(--ds-heading-font-weight)}:host h1,:host [role=heading][aria-level="1"]{font-size:var(--ds-heading-1-size-device)}:host h2,:host [role=heading][aria-level="2"]{font-size:var(--ds-heading-2-size-device)}:host h3,:host [role=heading][aria-level="3"]{font-size:var(--ds-heading-3-size-device)}:host h4,:host [role=heading][aria-level="4"]{font-size:var(--ds-heading-4-size-device)}:host h5,:host [role=heading][aria-level="5"]{font-size:var(--ds-heading-5-size-device)}:host ds-heading:not(:last-child),:host h1:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h1:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h2:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h2:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h3:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h3:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h4:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h4:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h5:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-2xs-device)}:host h5:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-2xs-device)}:host ds-text:not(:last-child),:host p.text:not(:last-child){--text-mb: var(--ds-alias-space-base-device)}:host p:not(.text,:last-child){margin-bottom:var(--ds-alias-space-base-device)}:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p.text,:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+ds-text{--text-mt: var(--ds-alias-space-base-device)}:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p:not(.text,ds-text){margin-top:var(--ds-alias-space-base-device)}
@@ -21,23 +21,19 @@ export class CardSubtitle {
21
21
  * If `true` the card text color is bold.
22
22
  */
23
23
  this.bold = false;
24
- /**
25
- * If `true` the card text color becomes white.
26
- */
27
- this.color = '';
28
24
  }
29
25
  createLogger(log) {
30
26
  this.log = log;
31
27
  }
32
28
  render() {
33
- return (h(Host, { key: 'f0ebc669832a45b2a8614cfc1736e6b7b568f57a', class: {
29
+ return (h(Host, { key: 'bac619921e784bd2bf2d9d3a75cfd435c9c1840e', class: {
34
30
  'card-header': true,
35
- } }, h("span", { key: '9881912fa1461c37c5ecda96b1e85f8b3cb1ea29', class: {
31
+ } }, h("span", { key: '072f1b05c414a58e451e54ca1618cb5d77067f21', class: {
36
32
  'text': true,
37
33
  'is-bold': this.bold,
38
34
  [`is-${this.color}`]: hasValue(this.color) && !this.inverted,
39
35
  'is-inverted': this.inverted,
40
- } }, h("slot", { key: '479fd315099be3aacb3378e5f2f78759cf386e7d' }))));
36
+ } }, h("slot", { key: 'eb92c2403f1c2535db682a1f425fae474a95e6ae' }))));
41
37
  }
42
38
  static get is() { return "ds-card-subtitle"; }
43
39
  static get encapsulation() { return "shadow"; }
@@ -98,7 +94,7 @@ export class CardSubtitle {
98
94
  "mutable": false,
99
95
  "complexType": {
100
96
  "original": "HeadingColor",
101
- "resolved": "\"\" | \"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\"",
97
+ "resolved": "\"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\" | undefined",
102
98
  "references": {
103
99
  "HeadingColor": {
104
100
  "location": "import",
@@ -109,7 +105,7 @@ export class CardSubtitle {
109
105
  }
110
106
  },
111
107
  "required": false,
112
- "optional": false,
108
+ "optional": true,
113
109
  "docs": {
114
110
  "tags": [],
115
111
  "text": "If `true` the card text color becomes white."
@@ -117,8 +113,7 @@ export class CardSubtitle {
117
113
  "getter": false,
118
114
  "setter": false,
119
115
  "reflect": false,
120
- "attribute": "color",
121
- "defaultValue": "''"
116
+ "attribute": "color"
122
117
  }
123
118
  };
124
119
  }
@@ -21,18 +21,12 @@ export class CardTitle {
21
21
  * The actual heading level used in the HTML markup.
22
22
  */
23
23
  this.level = 'h3';
24
- /**
25
- * Make the visual style mimic a specific heading level.
26
- * This option allows you to make e.g. h1 visually look like h3,
27
- * but still keep it h1 in the markup.
28
- */
29
- this.visualLevel = '';
30
24
  }
31
25
  createLogger(log) {
32
26
  this.log = log;
33
27
  }
34
28
  render() {
35
- return (h(Host, { key: '72e817c803b8ab4a17b7900a88497bf5cc34ee77' }, h("ds-heading", { key: 'aa65474978e8ebe8ec69d7394ecf98d88c950b86', level: this.level, visualLevel: this.visualLevel, space: "none", inverted: this.inverted }, h("slot", { key: '028afa9859201893ec5fe95303ebd13c6c942176' }))));
29
+ return (h(Host, { key: 'bfe21d09ce3bbf2cc5d95a22b0440f7b48f2e42e' }, h("ds-heading", { key: '3519b56f27ea575fdf6f5e18512c88aba3b19787', level: this.level, visualLevel: this.visualLevel, space: "none", inverted: this.inverted }, h("slot", { key: 'db68ae10025bdb8aa669dfa724c4d357e9ee25d6' }))));
36
30
  }
37
31
  static get is() { return "ds-card-title"; }
38
32
  static get encapsulation() { return "shadow"; }
@@ -100,7 +94,7 @@ export class CardTitle {
100
94
  "mutable": false,
101
95
  "complexType": {
102
96
  "original": "HeadingVisualLevel",
103
- "resolved": "\"\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"base\" | \"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"lg\" | \"md\" | \"xl\"",
97
+ "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"base\" | \"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"lg\" | \"md\" | \"xl\" | undefined",
104
98
  "references": {
105
99
  "HeadingVisualLevel": {
106
100
  "location": "import",
@@ -111,7 +105,7 @@ export class CardTitle {
111
105
  }
112
106
  },
113
107
  "required": false,
114
- "optional": false,
108
+ "optional": true,
115
109
  "docs": {
116
110
  "tags": [],
117
111
  "text": "Make the visual style mimic a specific heading level.\nThis option allows you to make e.g. h1 visually look like h3,\nbut still keep it h1 in the markup."
@@ -119,8 +113,7 @@ export class CardTitle {
119
113
  "getter": false,
120
114
  "setter": false,
121
115
  "reflect": false,
122
- "attribute": "visual-level",
123
- "defaultValue": "''"
116
+ "attribute": "visual-level"
124
117
  }
125
118
  };
126
119
  }
@@ -1 +1 @@
1
- :host{--_card-position: var(--card-position, var(--mod-card-position, static));--_card-top: var(--card-top, var(--mod-card-top));--_card-right: var(--card-right, var(--mod-card-right));--_card-bottom: var(--card-bottom, var(--mod-card-bottom));--_card-left: var(--card-left, var(--mod-card-left));position:var(--_card-position);top:var(--_card-top);right:var(--_card-right);bottom:var(--_card-bottom);left:var(--_card-left);--_card-m: var(--card-m, var(--mod-card-m, 0));--_card-my: var(--card-my, var(--mod-card-my));--_card-mx: var(--card-mx, var(--mod-card-mx));--_card-ml: var(--card-ml, var(--mod-card-ml));--_card-mr: var(--card-mr, var(--mod-card-mr));--_card-mt: var(--card-mt, var(--mod-card-mt));--_card-mb: var(--card-mb, var(--mod-card-mb));margin:var(--_card-m);margin-inline:var(--_card-mx);margin-block:var(--_card-my);margin-left:var(--_card-ml);margin-right:var(--_card-mr);margin-top:var(--_card-mt);margin-bottom:var(--_card-mb);--_card-color-background: var(--card-color-background, var(--mod-card-color-background, var(--ds-card-color-base-background)));--_card-color-text: var(--card-color-text, var(--mod-card-color-text, var(--ds-card-color-base-text)));--_card-color-border: var(--card-color-border, var(--mod-card-color-border, var(--ds-card-color-base-border, transparent)));--_card-radius: var(--card-radius, var(--mod-card-radius, var(--ds-card-radius-base)));--_card-border-width: var(--card-border-width, var(--mod-card-border-width, 0rem));--_card-border-style: var(--card-border-style, var(--mod-card-border-style, solid));--_card-shadow: var(--card-shadow, var(--mod-card-shadow, var(--ds-card-shadow-base)));--_card-gap: var(--card-gap, var(--mod-card-gap, var(--ds-card-space-base-device)));--_card-padding-left: var(--card-padding-left, var(--mod-card-padding-left, var(--ds-card-space-base-device)));--_card-padding-right: var(--card-padding-right, var(--mod-card-padding-right, var(--ds-card-space-base-device)));--_card-padding-top: var(--card-padding-top, var(--mod-card-padding-top, var(--ds-card-space-base-device)));--_card-padding-bottom: var(--card-padding-bottom, var(--mod-card-padding-bottom, var(--ds-card-space-base-device)));--_card-header-grid-template-columns: var(--card-header-grid-template-columns, var(--mod-card-header-grid-template-columns, 1fr auto));--_card-header-margin-left: var(--card-header-margin-left, var(--mod-card-header-margin-left, 0));--_card-header-grid-template-areas: var( --card-header-grid-template-areas, var(--mod-card-header-grid-template-areas, 'title .' 'subtitle subtitle') )}#card{position:relative;display:flex;flex-direction:column;width:100%;color:var(--_card-color-text);background-color:var(--_card-color-background);border-radius:var(--_card-radius);border-color:var(--_card-color-border);border-width:var(--_card-border-width);border-style:var(--_card-border-style);box-shadow:var(--_card-shadow);gap:var(--_card-gap);padding-left:calc(var(--_card-padding-left) - var(--_card-border-width));padding-right:calc(var(--_card-padding-right) - var(--_card-border-width));padding-top:calc(var(--_card-padding-top) - var(--_card-border-width));padding-bottom:calc(var(--_card-padding-bottom) - var(--_card-border-width));text-decoration:none}#card .card-header{--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem;--tags-display: flex;--tags-mt: 0.25rem}@media screen and (min-width: 769px){#card .card-header{--buttons-wrap: nowrap;--tags-display: inline-flex;--tags-mt: 0}}#card .card-header{column-gap:calc(var(--_card-gap)/2);display:grid;align-items:start;grid-auto-rows:auto;margin-left:var(--_card-header-margin-left);grid-template-columns:var(--_card-header-grid-template-columns);grid-template-areas:var(--_card-header-grid-template-areas)}#card .card-header ds-icon,#card .card-header ::slotted(ds-icon){grid-area:icon}#card .card-header>.tag,#card .card-header>.tags,#card .card-header>ds-tag,#card .card-header>ds-tag-group,#card .card-header ::slotted(ds-tag),#card .card-header ::slotted(ds-tag-group){grid-area:tag;margin-bottom:1rem}#card .card-header .title,#card .card-header ds-card-title{grid-area:title}#card .card-header>p,#card .card-header .subtitle,#card .card-header ds-card-subtitle{grid-area:subtitle}#card .card-header .title,#card .card-header .subtitle,#card .card-header .heading{margin:0}#card .card-content{font-family:var(--ds-alias-text-family-body);font-weight:var(--ds-alias-text-weight-regular)}#card .card-content strong,#card .card-content b{font-weight:var(--ds-alias-text-weight-bold)}#card .card-content h1,#card .card-content h2,#card .card-content h3,#card .card-content h4,#card .card-content h5,#card .card-content h6,#card .card-content ds-heading{font-family:var(--ds-alias-text-family-heading);font-weight:var(--ds-heading-weight)}#card .card-content h1,#card .card-content [role=heading][aria-level="1"]{font-size:var(--ds-heading-1-size-device)}#card .card-content h2,#card .card-content [role=heading][aria-level="2"]{font-size:var(--ds-heading-2-size-device)}#card .card-content h3,#card .card-content [role=heading][aria-level="3"]{font-size:var(--ds-heading-3-size-device)}#card .card-content h4,#card .card-content [role=heading][aria-level="4"]{font-size:var(--ds-heading-4-size-device)}#card .card-content h5,#card .card-content [role=heading][aria-level="5"]{font-size:var(--ds-heading-5-size-device)}#card .card-content ds-heading:not(:last-child),#card .card-content h1:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h1:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h2:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h2:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h3:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h3:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h4:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h4:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h5:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-2xs-device)}#card .card-content h5:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-2xs-device)}#card .card-content ds-text:not(:last-child),#card .card-content p.text:not(:last-child){--text-mb: var(--ds-alias-space-base-device)}#card .card-content p:not(.text,:last-child){margin-bottom:var(--ds-alias-space-base-device)}#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p.text,#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+ds-text{--text-mt: var(--ds-alias-space-base-device)}#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p:not(.text,ds-text){margin-top:var(--ds-alias-space-base-device)}#card .card-actions{--_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){#card .card-actions ::slotted(.button:not(.is-square,.is-circle)),#card .card-actions .button:not(.is-square,.is-circle){flex:1 1 auto}#card .card-actions ::slotted(ds-button:not(.is-square,.is-circle)),#card .card-actions ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}#card .card-actions.as-col-reverse{--mod-buttons-direction: column-reverse}#card .card-actions.as-row-reverse{--mod-buttons-direction: row-reverse}#card .card-actions.as-row{--mod-buttons-direction: row}#card .card-actions.as-col{--mod-buttons-direction: column}@media screen and (max-width: 768px){#card .card-actions.as-col ::slotted(.button),#card .card-actions.as-col .button,#card .card-actions.as-col ::slotted(ds-button),#card .card-actions.as-col ds-button,#card .card-actions.as-col-reverse ::slotted(.button),#card .card-actions.as-col-reverse .button,#card .card-actions.as-col-reverse ::slotted(ds-button),#card .card-actions.as-col-reverse ds-button{width:100%}}@media screen and (min-width: 769px){#card .card-actions.as-col.is-center,#card .card-actions.as-col.is-centered,#card .card-actions.as-col-reverse.is-center,#card .card-actions.as-col-reverse.is-centered{--mod-buttons-align-items: center}#card .card-actions.as-col.is-left,#card .card-actions.as-col-reverse.is-left{--mod-buttons-align-items: flex-start}#card .card-actions.as-col.is-right,#card .card-actions.as-col-reverse.is-right{--mod-buttons-align-items: flex-end}}@media screen and (min-width: 769px){#card .card-actions.as-row.is-center,#card .card-actions.as-row.is-centered,#card .card-actions.is-center:not(.as-col),#card .card-actions.is-centered:not(.as-col){--mod-buttons-justify-content: center}#card .card-actions.as-row.is-left,#card .card-actions.is-left:not(.as-col){--mod-buttons-justify-content: flex-start}#card .card-actions.as-row.is-right,#card .card-actions.is-right:not(.as-col){--mod-buttons-justify-content: flex-end}}@media screen and (min-width: 769px){#card .card-actions.is-wide ::slotted(.button:not(.is-square,.is-circle)),#card .card-actions.is-wide .button:not(.is-square,.is-circle),#card .card-actions.is-wide ::slotted(ds-button:not(.is-square,.is-circle)),#card .card-actions.is-wide ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}#card.align-center{align-items:center;--buttons-align-items: center;--buttons-justify-content: center}#card.align-right{--buttons-align-items: flex-end;--buttons-justify-content: flex-end}:host ::slotted(picture){--picture-img-radius: var(--_card-radius)}:host(.is-fullheight),:host(.is-fullheight) #card{height:100%}:host(.is-fullheight) ::slotted(ds-card-content){height:100%}:host ::slotted(ds-badge){--badge-position: absolute;--badge-top: 0;transform:translate(calc(50% + var(--_card-gap)), -50%);align-self:flex-end}:host ::slotted(ds-tag[position=left]){--tag-position: absolute;--tag-top: 0;align-self:flex-start;transform:translateY(-50%)}:host ::slotted(ds-tag[position=center]){--tag-position: absolute;--tag-top: 0;align-self:center;transform:translateY(-50%)}:host ::slotted(ds-tag[position=right]){--tag-position: absolute;--tag-top: 0;align-self:flex-end;transform:translateY(-50%)}:host(.is-square){--mod-card-radius: var(--ds-card-radius-square)}:host(.is-flat){--mod-card-radius: var(--ds-card-radius-flat);--mod-card-shadow: var(--ds-card-shadow-flat)}:host(.is-dense){--mod-card-shadow: var(--ds-card-shadow-flat);--mod-card-padding-left: 0;--mod-card-padding-right: 0;--mod-card-padding-top: 0;--mod-card-padding-bottom: 0}:host(.is-outlined){--mod-card-shadow: var(--ds-card-shadow-flat);--mod-card-border-width: var(--ds-card-outline-width);--mod-card-border-style: dashed;--mod-card-color-border: var(--ds-card-color-base-outline, transparent)}:host(.is-white){--mod-card-color-background: var(--ds-card-color-white-background);--mod-card-color-text: var(--ds-card-color-white-text);--mod-card-color-border: var(--ds-card-color-white-border, transparent)}:host(.is-white.is-outlined){--mod-card-color-border: var(--ds-card-color-white-outline, transparent)}:host(.is-primary){--mod-card-color-background: var(--ds-card-color-primary-background);--mod-card-color-text: var(--ds-card-color-primary-text);--mod-card-color-border: var(--ds-card-color-primary-border, transparent)}:host(.is-primary.is-outlined){--mod-card-color-border: var(--ds-card-color-primary-outline, transparent)}:host(.is-primary-light){--mod-card-color-background: var(--ds-card-color-primary-light-background);--mod-card-color-text: var(--ds-card-color-primary-light-text);--mod-card-color-border: var(--ds-card-color-primary-light-border, transparent)}:host(.is-primary-light.is-outlined){--mod-card-color-border: var(--ds-card-color-primary-light-outline, transparent)}:host(.is-info){--mod-card-color-background: var(--ds-card-color-info-background);--mod-card-color-text: var(--ds-card-color-info-text);--mod-card-color-border: var(--ds-card-color-info-border, transparent)}:host(.is-info.is-outlined){--mod-card-color-border: var(--ds-card-color-info-outline, transparent)}:host(.is-success){--mod-card-color-background: var(--ds-card-color-success-background);--mod-card-color-text: var(--ds-card-color-success-text);--mod-card-color-border: var(--ds-card-color-success-border, transparent)}:host(.is-success.is-outlined){--mod-card-color-border: var(--ds-card-color-success-outline, transparent)}:host(.is-warning){--mod-card-color-background: var(--ds-card-color-warning-background);--mod-card-color-text: var(--ds-card-color-warning-text);--mod-card-color-border: var(--ds-card-color-warning-border, transparent)}:host(.is-warning.is-outlined){--mod-card-color-border: var(--ds-card-color-warning-outline, transparent)}:host(.is-danger){--mod-card-color-background: var(--ds-card-color-danger-background);--mod-card-color-text: var(--ds-card-color-danger-text);--mod-card-color-border: var(--ds-card-color-danger-border, transparent)}:host(.is-danger.is-outlined){--mod-card-color-border: var(--ds-card-color-danger-outline, transparent)}:host(.is-grey){--mod-card-color-background: var(--ds-card-color-grey-background);--mod-card-color-text: var(--ds-card-color-grey-text);--mod-card-color-border: var(--ds-card-color-grey-border, transparent)}:host(.is-grey.is-outlined){--mod-card-color-border: var(--ds-card-color-grey-outline, transparent)}:host(.is-grey-light){--mod-card-color-background: var(--ds-card-color-grey-light-background);--mod-card-color-text: var(--ds-card-color-grey-light-text);--mod-card-color-border: var(--ds-card-color-grey-light-border, transparent)}:host(.is-grey-light.is-outlined){--mod-card-color-border: var(--ds-card-color-grey-light-outline, transparent)}:host(.is-red){--mod-card-color-background: var(--ds-card-color-red-background);--mod-card-color-text: var(--ds-card-color-red-text);--mod-card-color-border: var(--ds-card-color-red-border, transparent)}:host(.is-red.is-outlined){--mod-card-color-border: var(--ds-card-color-red-outline, transparent)}:host(.is-red-light){--mod-card-color-background: var(--ds-card-color-red-light-background);--mod-card-color-text: var(--ds-card-color-red-light-text);--mod-card-color-border: var(--ds-card-color-red-light-border, transparent)}:host(.is-red-light.is-outlined){--mod-card-color-border: var(--ds-card-color-red-light-outline, transparent)}:host(.is-red-lighter){--mod-card-color-background: var(--ds-card-color-red-lighter-background);--mod-card-color-text: var(--ds-card-color-red-lighter-text);--mod-card-color-border: var(--ds-card-color-red-lighter-border, transparent)}:host(.is-red-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-red-lighter-outline, transparent)}:host(.is-green){--mod-card-color-background: var(--ds-card-color-green-background);--mod-card-color-text: var(--ds-card-color-green-text);--mod-card-color-border: var(--ds-card-color-green-border, transparent)}:host(.is-green.is-outlined){--mod-card-color-border: var(--ds-card-color-green-outline, transparent)}:host(.is-green-light){--mod-card-color-background: var(--ds-card-color-green-light-background);--mod-card-color-text: var(--ds-card-color-green-light-text);--mod-card-color-border: var(--ds-card-color-green-light-border, transparent)}:host(.is-green-light.is-outlined){--mod-card-color-border: var(--ds-card-color-green-light-outline, transparent)}:host(.is-green-lighter){--mod-card-color-background: var(--ds-card-color-green-lighter-background);--mod-card-color-text: var(--ds-card-color-green-lighter-text);--mod-card-color-border: var(--ds-card-color-green-lighter-border, transparent)}:host(.is-green-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-green-lighter-outline, transparent)}:host(.is-purple){--mod-card-color-background: var(--ds-card-color-purple-background);--mod-card-color-text: var(--ds-card-color-purple-text);--mod-card-color-border: var(--ds-card-color-purple-border, transparent)}:host(.is-purple.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-outline, transparent)}:host(.is-purple-light){--mod-card-color-background: var(--ds-card-color-purple-light-background);--mod-card-color-text: var(--ds-card-color-purple-light-text);--mod-card-color-border: var(--ds-card-color-purple-light-border, transparent)}:host(.is-purple-light.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-light-outline, transparent)}:host(.is-purple-lighter){--mod-card-color-background: var(--ds-card-color-purple-lighter-background);--mod-card-color-text: var(--ds-card-color-purple-lighter-text);--mod-card-color-border: var(--ds-card-color-purple-lighter-border, transparent)}:host(.is-purple-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-lighter-outline, transparent)}:host(.is-yellow){--mod-card-color-background: var(--ds-card-color-yellow-background);--mod-card-color-text: var(--ds-card-color-yellow-text);--mod-card-color-border: var(--ds-card-color-yellow-border, transparent)}:host(.is-yellow.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-outline, transparent)}:host(.is-yellow-light){--mod-card-color-background: var(--ds-card-color-yellow-light-background);--mod-card-color-text: var(--ds-card-color-yellow-light-text);--mod-card-color-border: var(--ds-card-color-yellow-light-border, transparent)}:host(.is-yellow-light.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-light-outline, transparent)}:host(.is-yellow-lighter){--mod-card-color-background: var(--ds-card-color-yellow-lighter-background);--mod-card-color-text: var(--ds-card-color-yellow-lighter-text);--mod-card-color-border: var(--ds-card-color-yellow-lighter-border, transparent)}:host(.is-yellow-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-lighter-outline, transparent)}:host(.has-space-sm){--mod-card-gap: var(--ds-card-space-sm-device)}:host(.has-space-sm:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-sm-device);--mod-card-padding-right: var(--ds-card-space-sm-device);--mod-card-padding-top: var(--ds-card-space-sm-device);--mod-card-padding-bottom: var(--ds-card-space-sm-device)}:host(.has-space-md){--mod-card-gap: var(--ds-card-space-md-device)}:host(.has-space-md:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-md-device);--mod-card-padding-right: var(--ds-card-space-md-device);--mod-card-padding-top: var(--ds-card-space-md-device);--mod-card-padding-bottom: var(--ds-card-space-md-device)}:host(.has-space-lg){--mod-card-gap: var(--ds-card-space-lg-device)}:host(.has-space-lg:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-lg-device);--mod-card-padding-right: var(--ds-card-space-lg-device);--mod-card-padding-top: var(--ds-card-space-lg-device);--mod-card-padding-bottom: var(--ds-card-space-lg-device)}:host(.is-tile){--mod-card-header-grid-template-columns: auto 1fr auto;--mod-card-header-grid-template-areas: 'icon title .' 'icon subtitle subtitle'}@media screen and (min-width: 769px){:host(.is-tile){--mod-card-padding-left: calc( var(--ds-card-space-base-device) + var(--ds-icon-tile-size-lg-device) + calc(var(--_card-gap) / 2) );--mod-card-header-margin-left: calc(calc(var(--ds-icon-tile-size-lg-device) * -1) - calc(var(--_card-gap) / 2))}}:host(.is-image-teaser) #card{margin-top:calc(var(--_card-gap)*-1*2);margin-left:calc(var(--_card-gap));margin-right:calc(var(--_card-gap));max-width:fit-content}@media screen and (min-width: 769px){:host(.is-image-teaser-wide) #card,:host(.is-image-teaser-wide-center) #card,:host(.is-image-teaser-wide-right) #card{width:75%;margin-left:calc(var(--_card-gap)*2);margin-right:calc(var(--_card-gap))}}@media screen and (min-width: 1024px){:host(.is-image-teaser-wide) #card,:host(.is-image-teaser-wide-center) #card,:host(.is-image-teaser-wide-right) #card{width:50%}}@media screen and (min-width: 769px){:host(.is-image-teaser-wide-center) #card{margin-left:auto;margin-right:auto}}@media screen and (min-width: 769px){:host(.is-image-teaser-wide-right) #card{margin-left:auto;margin-right:calc(var(--_card-gap)*2)}}a.image-link,button.image-link{cursor:pointer}a.image-link picture,button.image-link picture{display:block;overflow:hidden}a.image-link img,button.image-link img{display:block;transition:all .4s ease-out}@media(hover: hover)and (pointer: fine){a.image-link img:hover,a.image-link img.is-hovered,button.image-link img:hover,button.image-link img.is-hovered{transform:scale(1.1)}}a.image-link img:active,a.image-link img.is-pressed,button.image-link img:active,button.image-link img.is-pressed{transform:scale(1.1)}:host{display:block;width:100%}
1
+ :host{--_card-position: var(--card-position, var(--mod-card-position, static));--_card-top: var(--card-top, var(--mod-card-top));--_card-right: var(--card-right, var(--mod-card-right));--_card-bottom: var(--card-bottom, var(--mod-card-bottom));--_card-left: var(--card-left, var(--mod-card-left));position:var(--_card-position);top:var(--_card-top);right:var(--_card-right);bottom:var(--_card-bottom);left:var(--_card-left);--_card-m: var(--card-m, var(--mod-card-m, 0));--_card-my: var(--card-my, var(--mod-card-my));--_card-mx: var(--card-mx, var(--mod-card-mx));--_card-ml: var(--card-ml, var(--mod-card-ml));--_card-mr: var(--card-mr, var(--mod-card-mr));--_card-mt: var(--card-mt, var(--mod-card-mt));--_card-mb: var(--card-mb, var(--mod-card-mb));margin:var(--_card-m);margin-inline:var(--_card-mx);margin-block:var(--_card-my);margin-left:var(--_card-ml);margin-right:var(--_card-mr);margin-top:var(--_card-mt);margin-bottom:var(--_card-mb);--_card-color-background: var(--card-color-background, var(--mod-card-color-background, var(--ds-card-color-base-background)));--_card-color-text: var(--card-color-text, var(--mod-card-color-text, var(--ds-card-color-base-text)));--_card-color-border: var(--card-color-border, var(--mod-card-color-border, var(--ds-card-color-base-border, transparent)));--_card-radius: var(--card-radius, var(--mod-card-radius, var(--ds-card-radius-base)));--_card-border-width: var(--card-border-width, var(--mod-card-border-width, 0rem));--_card-border-style: var(--card-border-style, var(--mod-card-border-style, solid));--_card-shadow: var(--card-shadow, var(--mod-card-shadow, var(--ds-card-shadow-base)));--_card-gap: var(--card-gap, var(--mod-card-gap, var(--ds-card-space-base-device)));--_card-padding-left: var(--card-padding-left, var(--mod-card-padding-left, var(--ds-card-space-base-device)));--_card-padding-right: var(--card-padding-right, var(--mod-card-padding-right, var(--ds-card-space-base-device)));--_card-padding-top: var(--card-padding-top, var(--mod-card-padding-top, var(--ds-card-space-base-device)));--_card-padding-bottom: var(--card-padding-bottom, var(--mod-card-padding-bottom, var(--ds-card-space-base-device)));--_card-header-grid-template-columns: var(--card-header-grid-template-columns, var(--mod-card-header-grid-template-columns, 1fr auto));--_card-header-margin-left: var(--card-header-margin-left, var(--mod-card-header-margin-left, 0));--_card-header-grid-template-areas: var( --card-header-grid-template-areas, var(--mod-card-header-grid-template-areas, 'title .' 'subtitle subtitle') )}#card{position:relative;display:flex;flex-direction:column;width:100%;color:var(--_card-color-text);background-color:var(--_card-color-background);border-radius:var(--_card-radius);border-color:var(--_card-color-border);border-width:var(--_card-border-width);border-style:var(--_card-border-style);box-shadow:var(--_card-shadow);gap:var(--_card-gap);padding-left:calc(var(--_card-padding-left) - var(--_card-border-width));padding-right:calc(var(--_card-padding-right) - var(--_card-border-width));padding-top:calc(var(--_card-padding-top) - var(--_card-border-width));padding-bottom:calc(var(--_card-padding-bottom) - var(--_card-border-width));text-decoration:none}#card .card-header{--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem;--tags-display: flex;--tags-mt: 0.25rem}@media screen and (min-width: 769px){#card .card-header{--buttons-wrap: nowrap;--tags-display: inline-flex;--tags-mt: 0}}#card .card-header{column-gap:calc(var(--_card-gap)/2);display:grid;align-items:start;grid-auto-rows:auto;margin-left:var(--_card-header-margin-left);grid-template-columns:var(--_card-header-grid-template-columns);grid-template-areas:var(--_card-header-grid-template-areas)}#card .card-header ds-icon,#card .card-header ::slotted(ds-icon){grid-area:icon}#card .card-header>.tag,#card .card-header>.tags,#card .card-header>ds-tag,#card .card-header>ds-tag-group,#card .card-header ::slotted(ds-tag),#card .card-header ::slotted(ds-tag-group){grid-area:tag;margin-bottom:1rem}#card .card-header .title,#card .card-header ds-card-title{grid-area:title}#card .card-header>p,#card .card-header .subtitle,#card .card-header ds-card-subtitle{grid-area:subtitle}#card .card-header .title,#card .card-header .subtitle,#card .card-header .heading{margin:0}#card .card-content{font-family:var(--ds-alias-text-family-body);font-weight:var(--ds-alias-text-weight-regular)}#card .card-content strong,#card .card-content b{font-weight:var(--ds-alias-text-weight-bold)}#card .card-content h1,#card .card-content h2,#card .card-content h3,#card .card-content h4,#card .card-content h5,#card .card-content h6,#card .card-content ds-heading{font-family:var(--ds-alias-text-family-heading);font-weight:var(--ds-heading-font-weight)}#card .card-content h1,#card .card-content [role=heading][aria-level="1"]{font-size:var(--ds-heading-1-size-device)}#card .card-content h2,#card .card-content [role=heading][aria-level="2"]{font-size:var(--ds-heading-2-size-device)}#card .card-content h3,#card .card-content [role=heading][aria-level="3"]{font-size:var(--ds-heading-3-size-device)}#card .card-content h4,#card .card-content [role=heading][aria-level="4"]{font-size:var(--ds-heading-4-size-device)}#card .card-content h5,#card .card-content [role=heading][aria-level="5"]{font-size:var(--ds-heading-5-size-device)}#card .card-content ds-heading:not(:last-child),#card .card-content h1:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h1:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h2:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h2:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h3:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h3:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h4:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h4:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h5:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-2xs-device)}#card .card-content h5:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-2xs-device)}#card .card-content ds-text:not(:last-child),#card .card-content p.text:not(:last-child){--text-mb: var(--ds-alias-space-base-device)}#card .card-content p:not(.text,:last-child){margin-bottom:var(--ds-alias-space-base-device)}#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p.text,#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+ds-text{--text-mt: var(--ds-alias-space-base-device)}#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p:not(.text,ds-text){margin-top:var(--ds-alias-space-base-device)}#card .card-actions{--_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){#card .card-actions ::slotted(.button:not(.is-square,.is-circle)),#card .card-actions .button:not(.is-square,.is-circle){flex:1 1 auto}#card .card-actions ::slotted(ds-button:not(.is-square,.is-circle)),#card .card-actions ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}#card .card-actions.as-col-reverse{--mod-buttons-direction: column-reverse}#card .card-actions.as-row-reverse{--mod-buttons-direction: row-reverse}#card .card-actions.as-row{--mod-buttons-direction: row}#card .card-actions.as-col{--mod-buttons-direction: column}@media screen and (max-width: 768px){#card .card-actions.as-col ::slotted(.button),#card .card-actions.as-col .button,#card .card-actions.as-col ::slotted(ds-button),#card .card-actions.as-col ds-button,#card .card-actions.as-col-reverse ::slotted(.button),#card .card-actions.as-col-reverse .button,#card .card-actions.as-col-reverse ::slotted(ds-button),#card .card-actions.as-col-reverse ds-button{width:100%}}@media screen and (min-width: 769px){#card .card-actions.as-col.is-center,#card .card-actions.as-col.is-centered,#card .card-actions.as-col-reverse.is-center,#card .card-actions.as-col-reverse.is-centered{--mod-buttons-align-items: center}#card .card-actions.as-col.is-left,#card .card-actions.as-col-reverse.is-left{--mod-buttons-align-items: flex-start}#card .card-actions.as-col.is-right,#card .card-actions.as-col-reverse.is-right{--mod-buttons-align-items: flex-end}}@media screen and (min-width: 769px){#card .card-actions.as-row.is-center,#card .card-actions.as-row.is-centered,#card .card-actions.is-center:not(.as-col),#card .card-actions.is-centered:not(.as-col){--mod-buttons-justify-content: center}#card .card-actions.as-row.is-left,#card .card-actions.is-left:not(.as-col){--mod-buttons-justify-content: flex-start}#card .card-actions.as-row.is-right,#card .card-actions.is-right:not(.as-col){--mod-buttons-justify-content: flex-end}}@media screen and (min-width: 769px){#card .card-actions.is-wide ::slotted(.button:not(.is-square,.is-circle)),#card .card-actions.is-wide .button:not(.is-square,.is-circle),#card .card-actions.is-wide ::slotted(ds-button:not(.is-square,.is-circle)),#card .card-actions.is-wide ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}#card.align-center{align-items:center;--buttons-align-items: center;--buttons-justify-content: center}#card.align-right{--buttons-align-items: flex-end;--buttons-justify-content: flex-end}:host ::slotted(picture){--picture-img-radius: var(--_card-radius)}:host(.is-fullheight),:host(.is-fullheight) #card{height:100%}:host(.is-fullheight) ::slotted(ds-card-content){height:100%}:host ::slotted(ds-badge){--badge-position: absolute;--badge-top: 0;transform:translate(calc(50% + var(--_card-gap)), -50%);align-self:flex-end}:host ::slotted(ds-tag[position=left]){--tag-position: absolute;--tag-top: 0;align-self:flex-start;transform:translateY(-50%)}:host ::slotted(ds-tag[position=center]){--tag-position: absolute;--tag-top: 0;align-self:center;transform:translateY(-50%)}:host ::slotted(ds-tag[position=right]){--tag-position: absolute;--tag-top: 0;align-self:flex-end;transform:translateY(-50%)}:host(.is-square){--mod-card-radius: var(--ds-card-radius-square)}:host(.is-flat){--mod-card-radius: var(--ds-card-radius-flat);--mod-card-shadow: var(--ds-card-shadow-flat)}:host(.is-dense){--mod-card-shadow: var(--ds-card-shadow-flat);--mod-card-padding-left: 0;--mod-card-padding-right: 0;--mod-card-padding-top: 0;--mod-card-padding-bottom: 0}:host(.is-outlined){--mod-card-shadow: var(--ds-card-shadow-flat);--mod-card-border-width: var(--ds-card-outline-width);--mod-card-border-style: dashed;--mod-card-color-border: var(--ds-card-color-base-outline, transparent)}:host(.is-white){--mod-card-color-background: var(--ds-card-color-white-background);--mod-card-color-text: var(--ds-card-color-white-text);--mod-card-color-border: var(--ds-card-color-white-border, transparent)}:host(.is-white.is-outlined){--mod-card-color-border: var(--ds-card-color-white-outline, transparent)}:host(.is-primary){--mod-card-color-background: var(--ds-card-color-primary-background);--mod-card-color-text: var(--ds-card-color-primary-text);--mod-card-color-border: var(--ds-card-color-primary-border, transparent)}:host(.is-primary.is-outlined){--mod-card-color-border: var(--ds-card-color-primary-outline, transparent)}:host(.is-primary-light){--mod-card-color-background: var(--ds-card-color-primary-light-background);--mod-card-color-text: var(--ds-card-color-primary-light-text);--mod-card-color-border: var(--ds-card-color-primary-light-border, transparent)}:host(.is-primary-light.is-outlined){--mod-card-color-border: var(--ds-card-color-primary-light-outline, transparent)}:host(.is-info){--mod-card-color-background: var(--ds-card-color-info-background);--mod-card-color-text: var(--ds-card-color-info-text);--mod-card-color-border: var(--ds-card-color-info-border, transparent)}:host(.is-info.is-outlined){--mod-card-color-border: var(--ds-card-color-info-outline, transparent)}:host(.is-success){--mod-card-color-background: var(--ds-card-color-success-background);--mod-card-color-text: var(--ds-card-color-success-text);--mod-card-color-border: var(--ds-card-color-success-border, transparent)}:host(.is-success.is-outlined){--mod-card-color-border: var(--ds-card-color-success-outline, transparent)}:host(.is-warning){--mod-card-color-background: var(--ds-card-color-warning-background);--mod-card-color-text: var(--ds-card-color-warning-text);--mod-card-color-border: var(--ds-card-color-warning-border, transparent)}:host(.is-warning.is-outlined){--mod-card-color-border: var(--ds-card-color-warning-outline, transparent)}:host(.is-danger){--mod-card-color-background: var(--ds-card-color-danger-background);--mod-card-color-text: var(--ds-card-color-danger-text);--mod-card-color-border: var(--ds-card-color-danger-border, transparent)}:host(.is-danger.is-outlined){--mod-card-color-border: var(--ds-card-color-danger-outline, transparent)}:host(.is-grey){--mod-card-color-background: var(--ds-card-color-grey-background);--mod-card-color-text: var(--ds-card-color-grey-text);--mod-card-color-border: var(--ds-card-color-grey-border, transparent)}:host(.is-grey.is-outlined){--mod-card-color-border: var(--ds-card-color-grey-outline, transparent)}:host(.is-grey-light){--mod-card-color-background: var(--ds-card-color-grey-light-background);--mod-card-color-text: var(--ds-card-color-grey-light-text);--mod-card-color-border: var(--ds-card-color-grey-light-border, transparent)}:host(.is-grey-light.is-outlined){--mod-card-color-border: var(--ds-card-color-grey-light-outline, transparent)}:host(.is-red){--mod-card-color-background: var(--ds-card-color-red-background);--mod-card-color-text: var(--ds-card-color-red-text);--mod-card-color-border: var(--ds-card-color-red-border, transparent)}:host(.is-red.is-outlined){--mod-card-color-border: var(--ds-card-color-red-outline, transparent)}:host(.is-red-light){--mod-card-color-background: var(--ds-card-color-red-light-background);--mod-card-color-text: var(--ds-card-color-red-light-text);--mod-card-color-border: var(--ds-card-color-red-light-border, transparent)}:host(.is-red-light.is-outlined){--mod-card-color-border: var(--ds-card-color-red-light-outline, transparent)}:host(.is-red-lighter){--mod-card-color-background: var(--ds-card-color-red-lighter-background);--mod-card-color-text: var(--ds-card-color-red-lighter-text);--mod-card-color-border: var(--ds-card-color-red-lighter-border, transparent)}:host(.is-red-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-red-lighter-outline, transparent)}:host(.is-green){--mod-card-color-background: var(--ds-card-color-green-background);--mod-card-color-text: var(--ds-card-color-green-text);--mod-card-color-border: var(--ds-card-color-green-border, transparent)}:host(.is-green.is-outlined){--mod-card-color-border: var(--ds-card-color-green-outline, transparent)}:host(.is-green-light){--mod-card-color-background: var(--ds-card-color-green-light-background);--mod-card-color-text: var(--ds-card-color-green-light-text);--mod-card-color-border: var(--ds-card-color-green-light-border, transparent)}:host(.is-green-light.is-outlined){--mod-card-color-border: var(--ds-card-color-green-light-outline, transparent)}:host(.is-green-lighter){--mod-card-color-background: var(--ds-card-color-green-lighter-background);--mod-card-color-text: var(--ds-card-color-green-lighter-text);--mod-card-color-border: var(--ds-card-color-green-lighter-border, transparent)}:host(.is-green-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-green-lighter-outline, transparent)}:host(.is-purple){--mod-card-color-background: var(--ds-card-color-purple-background);--mod-card-color-text: var(--ds-card-color-purple-text);--mod-card-color-border: var(--ds-card-color-purple-border, transparent)}:host(.is-purple.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-outline, transparent)}:host(.is-purple-light){--mod-card-color-background: var(--ds-card-color-purple-light-background);--mod-card-color-text: var(--ds-card-color-purple-light-text);--mod-card-color-border: var(--ds-card-color-purple-light-border, transparent)}:host(.is-purple-light.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-light-outline, transparent)}:host(.is-purple-lighter){--mod-card-color-background: var(--ds-card-color-purple-lighter-background);--mod-card-color-text: var(--ds-card-color-purple-lighter-text);--mod-card-color-border: var(--ds-card-color-purple-lighter-border, transparent)}:host(.is-purple-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-lighter-outline, transparent)}:host(.is-yellow){--mod-card-color-background: var(--ds-card-color-yellow-background);--mod-card-color-text: var(--ds-card-color-yellow-text);--mod-card-color-border: var(--ds-card-color-yellow-border, transparent)}:host(.is-yellow.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-outline, transparent)}:host(.is-yellow-light){--mod-card-color-background: var(--ds-card-color-yellow-light-background);--mod-card-color-text: var(--ds-card-color-yellow-light-text);--mod-card-color-border: var(--ds-card-color-yellow-light-border, transparent)}:host(.is-yellow-light.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-light-outline, transparent)}:host(.is-yellow-lighter){--mod-card-color-background: var(--ds-card-color-yellow-lighter-background);--mod-card-color-text: var(--ds-card-color-yellow-lighter-text);--mod-card-color-border: var(--ds-card-color-yellow-lighter-border, transparent)}:host(.is-yellow-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-lighter-outline, transparent)}:host(.has-space-sm){--mod-card-gap: var(--ds-card-space-sm-device)}:host(.has-space-sm:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-sm-device);--mod-card-padding-right: var(--ds-card-space-sm-device);--mod-card-padding-top: var(--ds-card-space-sm-device);--mod-card-padding-bottom: var(--ds-card-space-sm-device)}:host(.has-space-md){--mod-card-gap: var(--ds-card-space-md-device)}:host(.has-space-md:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-md-device);--mod-card-padding-right: var(--ds-card-space-md-device);--mod-card-padding-top: var(--ds-card-space-md-device);--mod-card-padding-bottom: var(--ds-card-space-md-device)}:host(.has-space-lg){--mod-card-gap: var(--ds-card-space-lg-device)}:host(.has-space-lg:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-lg-device);--mod-card-padding-right: var(--ds-card-space-lg-device);--mod-card-padding-top: var(--ds-card-space-lg-device);--mod-card-padding-bottom: var(--ds-card-space-lg-device)}:host(.is-tile){--mod-card-header-grid-template-columns: auto 1fr auto;--mod-card-header-grid-template-areas: 'icon title .' 'icon subtitle subtitle'}@media screen and (min-width: 769px){:host(.is-tile){--mod-card-padding-left: calc( var(--ds-card-space-base-device) + var(--ds-icon-tile-size-lg-device) + calc(var(--_card-gap) / 2) );--mod-card-header-margin-left: calc(calc(var(--ds-icon-tile-size-lg-device) * -1) - calc(var(--_card-gap) / 2))}}:host(.is-image-teaser) #card{margin-top:calc(var(--_card-gap)*-1*2);margin-left:calc(var(--_card-gap));margin-right:calc(var(--_card-gap));max-width:fit-content}@media screen and (min-width: 769px){:host(.is-image-teaser-wide) #card,:host(.is-image-teaser-wide-center) #card,:host(.is-image-teaser-wide-right) #card{width:75%;margin-left:calc(var(--_card-gap)*2);margin-right:calc(var(--_card-gap))}}@media screen and (min-width: 1024px){:host(.is-image-teaser-wide) #card,:host(.is-image-teaser-wide-center) #card,:host(.is-image-teaser-wide-right) #card{width:50%}}@media screen and (min-width: 769px){:host(.is-image-teaser-wide-center) #card{margin-left:auto;margin-right:auto}}@media screen and (min-width: 769px){:host(.is-image-teaser-wide-right) #card{margin-left:auto;margin-right:calc(var(--_card-gap)*2)}}a.image-link,button.image-link{cursor:pointer}a.image-link picture,button.image-link picture{display:block;overflow:hidden}a.image-link img,button.image-link img{display:block;transition:all .4s ease-out}@media(hover: hover)and (pointer: fine){a.image-link img:hover,a.image-link img.is-hovered,button.image-link img:hover,button.image-link img.is-hovered{transform:scale(1.1)}}a.image-link img:active,a.image-link img.is-pressed,button.image-link img:active,button.image-link img.is-pressed{transform:scale(1.1)}:host{display:block;width:100%}
@@ -5,13 +5,14 @@ import { __decorate, __metadata } from "tslib";
5
5
  import { h, } from "@stencil/core";
6
6
  import { Field } from "../../input/field.util";
7
7
  import { defaultConfig, ListenToConfig } from "../../../global/index";
8
- import { Logger, hasTagName, isDescendant, stopEventBubbling, areArraysEqual, hasValue, OneOf, Type, } from "../../../utils/index";
8
+ import { Logger, hasTagName, isDescendant, stopEventBubbling, areArraysEqual, hasValue, OneOf, Type, watchInvalidTextSlot, } from "../../../utils/index";
9
9
  import { INPUT_COLORS } from "../../input/input.interfaces";
10
10
  import { CHECKBOX_LABEL_POSITIONS, CHECKBOX_TILE_COLORS, CHECKBOX_GROUP_COLUMNS, } from "../checkbox.interfaces";
11
11
  /**
12
12
  * Checkbox Group groups multiple checkboxes so multiple options can be selected within a form field.
13
13
  *
14
14
  * @slot - The checkbox items to display inside the group.
15
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
15
16
  */
16
17
  export class CheckboxGroup {
17
18
  constructor() {
@@ -19,6 +20,7 @@ export class CheckboxGroup {
19
20
  this.language = defaultConfig.language;
20
21
  this.region = defaultConfig.region;
21
22
  this.internalValue = [];
23
+ this.hasInvalidTextSlotContent = false;
22
24
  /**
23
25
  * PUBLIC PROPERTY API
24
26
  * ------------------------------------------------------
@@ -146,9 +148,16 @@ export class CheckboxGroup {
146
148
  */
147
149
  connectedCallback() {
148
150
  this.valueChanged();
151
+ this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
152
+ this.hasInvalidTextSlotContent = hasContent;
153
+ });
149
154
  this.passDownAttributes();
150
155
  this.internals.setFormValue(this.internalValue.join(','));
151
156
  }
157
+ disconnectedCallback() {
158
+ var _a;
159
+ (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
160
+ }
152
161
  componentWillLoad() {
153
162
  this.handleValueChange();
154
163
  }
@@ -226,6 +235,7 @@ export class CheckboxGroup {
226
235
  return Array.from(this.el.querySelectorAll('ds-checkbox'));
227
236
  }
228
237
  passDownAttributes() {
238
+ const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
229
239
  this.getCheckboxes().forEach(checkbox => {
230
240
  var _a;
231
241
  if (this.control) {
@@ -235,9 +245,7 @@ export class CheckboxGroup {
235
245
  if (hasValue(this.readonly)) {
236
246
  checkbox.readonly = this.readonly;
237
247
  }
238
- if (hasValue(this.invalid)) {
239
- checkbox.invalid = this.invalid;
240
- }
248
+ checkbox.invalid = isInvalid;
241
249
  }
242
250
  checkbox.name = this.name;
243
251
  checkbox.labelPosition = this.labelPosition;
@@ -267,10 +275,10 @@ export class CheckboxGroup {
267
275
  * ------------------------------------------------------
268
276
  */
269
277
  render() {
270
- return (h(Field, { key: 'a11f6ecb85f81b131ee192b72a0a0bcc1b6ff780', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
278
+ return (h(Field, { key: '585b8478c2f8caed4f3f5f8d243f7cd3bb0573d7', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
271
279
  'is-vertical': this.vertical,
272
280
  'is-tile': this.tile,
273
- } }, h("slot", { key: '9e36bc5aa1775d77a2f199ab1840dcd70def2bac', onSlotchange: this.handleSlotChange })));
281
+ } }, h("slot", { key: 'ee909dfcbb89215398c98fdf30252b7db6fbfbd5', onSlotchange: this.handleSlotChange })));
274
282
  }
275
283
  static get is() { return "ds-checkbox-group"; }
276
284
  static get encapsulation() { return "shadow"; }
@@ -733,7 +741,8 @@ export class CheckboxGroup {
733
741
  return {
734
742
  "language": {},
735
743
  "region": {},
736
- "internalValue": {}
744
+ "internalValue": {},
745
+ "hasInvalidTextSlotContent": {}
737
746
  };
738
747
  }
739
748
  static get events() {
@@ -26,6 +26,7 @@ const HOST_VARIANTS = [
26
26
  'form',
27
27
  'field-disabled',
28
28
  'field-invalid',
29
+ 'field-invalid-slot',
29
30
  'tile-basic',
30
31
  'tile-columns',
31
32
  'tile-invalid',