@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

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 (516) hide show
  1. package/dist/.config/bindings.angular.js +4 -0
  2. package/dist/cjs/breakpoints-cdf1b747.js +59 -0
  3. package/dist/cjs/check-non-empty-bd99d236.js +15 -0
  4. package/dist/cjs/check-one-of-75d270b5.js +13 -0
  5. package/dist/cjs/check-type-cdbf6d29.js +21 -0
  6. package/dist/cjs/check-url-220a286c.js +19 -0
  7. package/dist/cjs/event-guard-efabc84f.js +47 -0
  8. package/dist/cjs/fade-72d5ef55.js +14 -0
  9. package/dist/cjs/get-root-8102fecd.js +17 -0
  10. package/dist/cjs/index-23e36ff7.js +37 -0
  11. package/dist/cjs/{index-010dc207.js → index-b60129c4.js} +17 -10
  12. package/dist/cjs/index.browser-4af21c17.js +16 -0
  13. package/dist/cjs/index.cjs.js +36 -31
  14. package/dist/cjs/loader.cjs.js +2 -2
  15. package/dist/cjs/long-press-event-6e62d113.js +266 -0
  16. package/dist/cjs/{package-8e810a59.js → package-8121f093.js} +1 -1
  17. package/dist/cjs/{post-accordion-b9df8522.js → post-accordion-beac7c9f.js} +11 -12
  18. package/dist/cjs/post-accordion-item-4846fbee.js +64 -0
  19. package/dist/cjs/post-accordion-item.cjs.entry.js +10 -7
  20. package/dist/cjs/post-accordion.cjs.entry.js +6 -4
  21. package/dist/cjs/{post-avatar-f7236084.js → post-avatar-a36991fb.js} +10 -13
  22. package/dist/cjs/post-avatar.cjs.entry.js +5 -4
  23. package/dist/cjs/post-back-to-top-32aa9017.js +96 -0
  24. package/dist/cjs/post-back-to-top.cjs.entry.js +7 -6
  25. package/dist/cjs/post-banner-be0e8909.js +92 -0
  26. package/dist/cjs/post-banner.cjs.entry.js +11 -9
  27. package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +8 -7
  28. package/dist/cjs/post-breadcrumbs-6ef82a41.js +120 -0
  29. package/dist/cjs/post-breadcrumbs.cjs.entry.js +13 -0
  30. package/dist/cjs/post-card-control-fe919333.js +269 -0
  31. package/dist/cjs/post-card-control.cjs.entry.js +6 -5
  32. package/dist/cjs/post-closebutton_15.cjs.entry.js +13 -10
  33. package/dist/cjs/{post-collapsible-trigger-143cf84a.js → post-collapsible-trigger-f42be607.js} +59 -60
  34. package/dist/cjs/post-collapsible_2.cjs.entry.js +11 -10
  35. package/dist/cjs/post-components.cjs.js +2 -2
  36. package/dist/cjs/{post-footer-5f7fdf96.js → post-footer-5179aa17.js} +11 -57
  37. package/dist/cjs/post-footer.cjs.entry.js +4 -3
  38. package/dist/cjs/post-linkarea-27125078.js +30 -0
  39. package/dist/cjs/post-linkarea.cjs.entry.js +11 -0
  40. package/dist/cjs/{post-menu-item-bb0b0b9e.js → post-menu-item-d78a9121.js} +11 -17
  41. package/dist/cjs/post-popover-feb1e773.js +135 -0
  42. package/dist/cjs/post-popover.cjs.entry.js +4 -4
  43. package/dist/cjs/{post-rating-1082197c.js → post-rating-6d153a2c.js} +4 -4
  44. package/dist/cjs/post-rating.cjs.entry.js +3 -3
  45. package/dist/cjs/post-tab-header-e4532918.js +34 -0
  46. package/dist/cjs/post-tab-header.cjs.entry.js +6 -4
  47. package/dist/cjs/{post-tab-panel-60f211a5.js → post-tab-panel-40df21ad.js} +5 -4
  48. package/dist/cjs/post-tab-panel.cjs.entry.js +4 -3
  49. package/dist/cjs/{post-tabs-1f797ce4.js → post-tabs-45db2696.js} +13 -15
  50. package/dist/cjs/post-tabs.cjs.entry.js +5 -4
  51. package/dist/cjs/post-tag-0967bb1e.js +47 -0
  52. package/dist/cjs/post-tag.cjs.entry.js +3 -3
  53. package/dist/cjs/post-togglebutton-42b7d166.js +4494 -0
  54. package/dist/cjs/post-tooltip-f833d51d.js +73 -0
  55. package/dist/cjs/{post-tooltip-38c839a4.js → post-tooltip-trigger-3ceac010.js} +143 -456
  56. package/dist/cjs/post-tooltip-trigger.cjs.entry.js +13 -0
  57. package/dist/cjs/post-tooltip.cjs.entry.js +5 -9
  58. package/dist/cjs/{slide-5d51abe8.js → slide-cd1f09b3.js} +8 -8
  59. package/dist/collection/animations/collapse.js +8 -6
  60. package/dist/collection/animations/fade.js +6 -2
  61. package/dist/collection/animations/slide.js +8 -8
  62. package/dist/collection/collection-manifest.json +5 -3
  63. package/dist/collection/components/post-accordion/post-accordion.css +1 -1
  64. package/dist/collection/components/post-accordion/post-accordion.js +6 -8
  65. package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
  66. package/dist/collection/components/post-accordion-item/post-accordion-item.js +12 -12
  67. package/dist/collection/components/post-avatar/post-avatar.css +1 -3
  68. package/dist/collection/components/post-avatar/post-avatar.js +7 -11
  69. package/dist/collection/components/post-back-to-top/post-back-to-top.css +1 -1
  70. package/dist/collection/components/post-back-to-top/post-back-to-top.js +38 -18
  71. package/dist/collection/components/post-banner/post-banner.css +1 -3
  72. package/dist/collection/components/post-banner/post-banner.js +13 -12
  73. package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js +11 -8
  74. package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -0
  75. package/dist/collection/components/{post-breadcrumb/post-breadcrumb.js → post-breadcrumbs/post-breadcrumbs.js} +20 -21
  76. package/dist/collection/components/post-card-control/post-card-control.css +1 -3
  77. package/dist/collection/components/post-card-control/post-card-control.js +15 -19
  78. package/dist/collection/components/post-closebutton/post-closebutton.css +1 -0
  79. package/dist/collection/components/post-closebutton/post-closebutton.js +12 -1
  80. package/dist/collection/components/post-collapsible/post-collapsible.css +1 -1
  81. package/dist/collection/components/post-collapsible/post-collapsible.js +3 -2
  82. package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js +43 -45
  83. package/dist/collection/components/post-footer/post-footer.js +8 -8
  84. package/dist/collection/components/post-header/post-header.css +1 -1
  85. package/dist/collection/components/post-header/post-header.js +212 -52
  86. package/dist/collection/components/post-icon/post-icon.css +1 -1
  87. package/dist/collection/components/post-icon/post-icon.js +71 -29
  88. package/dist/collection/components/post-language-option/post-language-option.css +1 -3
  89. package/dist/collection/components/post-language-option/post-language-option.js +34 -12
  90. package/dist/collection/components/post-language-switch/post-language-switch.css +1 -1
  91. package/dist/collection/components/post-language-switch/post-language-switch.js +56 -33
  92. package/dist/collection/components/post-language-switch/switch-variants.js +1 -1
  93. package/dist/collection/components/post-linkarea/post-linkarea.css +1 -0
  94. package/dist/collection/components/post-linkarea/post-linkarea.js +30 -0
  95. package/dist/collection/components/post-list/post-list.css +1 -3
  96. package/dist/collection/components/post-list/post-list.js +4 -3
  97. package/dist/collection/components/post-list-item/post-list-item.js +2 -1
  98. package/dist/collection/components/post-logo/post-logo.css +1 -1
  99. package/dist/collection/components/post-logo/post-logo.js +2 -2
  100. package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
  101. package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +157 -25
  102. package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
  103. package/dist/collection/components/post-megadropdown/post-megadropdown.js +179 -55
  104. package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.css +1 -1
  105. package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +41 -12
  106. package/dist/collection/components/post-menu/post-menu.css +1 -3
  107. package/dist/collection/components/post-menu/post-menu.js +44 -30
  108. package/dist/collection/components/post-menu-item/post-menu-item.js +1 -13
  109. package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +16 -10
  110. package/dist/collection/components/post-popover/post-popover.css +1 -3
  111. package/dist/collection/components/post-popover/post-popover.js +23 -16
  112. package/dist/collection/components/post-popovercontainer/post-popovercontainer.css +1 -1
  113. package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +217 -56
  114. package/dist/collection/components/post-rating/post-rating.css +1 -3
  115. package/dist/collection/components/post-rating/post-rating.js +1 -1
  116. package/dist/collection/components/post-tab-header/post-tab-header.css +1 -3
  117. package/dist/collection/components/post-tab-header/post-tab-header.js +6 -5
  118. package/dist/collection/components/post-tab-panel/post-tab-panel.js +4 -3
  119. package/dist/collection/components/post-tabs/post-tabs.css +1 -1
  120. package/dist/collection/components/post-tabs/post-tabs.js +6 -14
  121. package/dist/collection/components/post-tag/post-tag.css +1 -3
  122. package/dist/collection/components/post-tag/post-tag.js +2 -2
  123. package/dist/collection/components/post-togglebutton/post-togglebutton.js +3 -3
  124. package/dist/collection/components/post-tooltip/post-tooltip.css +1 -1
  125. package/dist/collection/components/post-tooltip/post-tooltip.js +62 -212
  126. package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.css +1 -0
  127. package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +230 -0
  128. package/dist/collection/index.js +3 -1
  129. package/dist/collection/utils/attribute-observer.js +6 -5
  130. package/dist/collection/utils/breakpoints.js +21 -15
  131. package/dist/collection/utils/component-on-ready.js +4 -4
  132. package/dist/collection/utils/debounce.js +2 -1
  133. package/dist/collection/utils/environment.js +2 -0
  134. package/dist/collection/utils/event-guard.js +43 -0
  135. package/dist/collection/utils/{is-focusable.js → get-focusable-children.js} +10 -3
  136. package/dist/collection/utils/get-root.js +6 -1
  137. package/dist/collection/utils/index.js +5 -0
  138. package/dist/collection/utils/is-motion-reduced.js +2 -1
  139. package/dist/collection/utils/property-checkers/check-non-empty.js +6 -2
  140. package/dist/collection/utils/property-checkers/check-one-of.js +8 -3
  141. package/dist/collection/utils/property-checkers/check-pattern.js +8 -3
  142. package/dist/collection/utils/property-checkers/check-type.js +11 -6
  143. package/dist/collection/utils/property-checkers/check-url.js +11 -6
  144. package/dist/collection/utils/property-checkers/empty-or.js +5 -2
  145. package/dist/collection/utils/sass-export.js +8 -5
  146. package/dist/components/breakpoints.js +56 -0
  147. package/dist/components/check-non-empty.js +6 -2
  148. package/dist/components/check-one-of.js +8 -3
  149. package/dist/components/check-type.js +11 -6
  150. package/dist/components/event-guard.js +45 -0
  151. package/dist/components/fade.js +6 -2
  152. package/dist/components/get-focusable-children.js +35 -0
  153. package/dist/components/get-root.js +7 -1
  154. package/dist/components/index.browser.js +14 -0
  155. package/dist/components/index.js +3 -1
  156. package/dist/components/index2.js +24 -11
  157. package/dist/components/long-press-event.js +264 -0
  158. package/dist/components/package.js +1 -1
  159. package/dist/components/post-accordion-item2.js +14 -13
  160. package/dist/components/post-accordion2.js +8 -9
  161. package/dist/components/post-avatar2.js +8 -11
  162. package/dist/components/post-back-to-top2.js +41 -20
  163. package/dist/components/post-banner2.js +15 -13
  164. package/dist/components/post-breadcrumb-item2.js +9 -9
  165. package/dist/components/post-breadcrumbs.d.ts +11 -0
  166. package/dist/components/post-breadcrumbs.js +6 -0
  167. package/dist/components/post-breadcrumbs2.js +177 -0
  168. package/dist/components/post-card-control2.js +16 -19
  169. package/dist/components/post-closebutton2.js +7 -2
  170. package/dist/components/post-collapsible-trigger2.js +46 -48
  171. package/dist/components/post-collapsible2.js +13 -10
  172. package/dist/components/post-footer2.js +8 -54
  173. package/dist/components/post-header2.js +174 -51
  174. package/dist/components/post-icon2.js +72 -29
  175. package/dist/components/post-language-option2.js +21 -12
  176. package/dist/components/post-language-switch2.js +44 -45
  177. package/dist/components/{post-breadcrumb.d.ts → post-linkarea.d.ts} +4 -4
  178. package/dist/components/post-linkarea.js +6 -0
  179. package/dist/components/post-linkarea2.js +43 -0
  180. package/dist/components/post-list-item2.js +2 -1
  181. package/dist/components/post-list2.js +5 -4
  182. package/dist/components/post-logo2.js +4 -3
  183. package/dist/components/post-mainnavigation2.js +150 -15
  184. package/dist/components/post-megadropdown-trigger2.js +43 -13
  185. package/dist/components/post-megadropdown2.js +136 -39
  186. package/dist/components/post-menu-item2.js +2 -8
  187. package/dist/components/post-menu-trigger2.js +17 -10
  188. package/dist/components/post-menu2.js +43 -54
  189. package/dist/components/post-popover2.js +46 -15
  190. package/dist/components/post-popovercontainer2.js +921 -111
  191. package/dist/components/post-rating2.js +2 -2
  192. package/dist/components/post-tab-header2.js +8 -6
  193. package/dist/components/post-tab-panel2.js +4 -3
  194. package/dist/components/post-tabs2.js +10 -12
  195. package/dist/components/post-tag2.js +2 -2
  196. package/dist/components/post-togglebutton2.js +4 -3
  197. package/dist/components/post-tooltip-trigger.d.ts +11 -0
  198. package/dist/components/post-tooltip-trigger.js +6 -0
  199. package/dist/components/post-tooltip-trigger2.js +4705 -0
  200. package/dist/components/post-tooltip2.js +34 -4960
  201. package/dist/components/slide.js +9 -9
  202. package/dist/docs.json +567 -252
  203. package/dist/esm/breakpoints-7812702e.js +56 -0
  204. package/dist/esm/check-non-empty-258a56b3.js +13 -0
  205. package/dist/esm/check-one-of-0bee20f5.js +11 -0
  206. package/dist/esm/check-type-37d5d307.js +19 -0
  207. package/dist/esm/check-url-17962bc8.js +17 -0
  208. package/dist/esm/event-guard-538ee077.js +45 -0
  209. package/dist/esm/fade-1f3cacf4.js +11 -0
  210. package/dist/esm/get-root-1b1af46f.js +15 -0
  211. package/dist/esm/index-8f8fe5b0.js +32 -0
  212. package/dist/esm/{index-fb8d6be7.js → index-f4d19816.js} +17 -10
  213. package/dist/esm/index.browser-ff103197.js +14 -0
  214. package/dist/esm/index.js +33 -30
  215. package/dist/esm/loader.js +3 -3
  216. package/dist/esm/long-press-event-04d24397.js +264 -0
  217. package/dist/esm/package-d9237b44.js +3 -0
  218. package/dist/esm/{post-accordion-ee54a3ef.js → post-accordion-fdcf7205.js} +11 -12
  219. package/dist/esm/post-accordion-item-e11e3804.js +62 -0
  220. package/dist/esm/post-accordion-item.entry.js +10 -7
  221. package/dist/esm/post-accordion.entry.js +6 -4
  222. package/dist/esm/{post-avatar-5572fa73.js → post-avatar-d360c6d2.js} +10 -13
  223. package/dist/esm/post-avatar.entry.js +5 -4
  224. package/dist/esm/post-back-to-top-85796c8b.js +94 -0
  225. package/dist/esm/post-back-to-top.entry.js +7 -6
  226. package/dist/esm/post-banner-a3090f67.js +90 -0
  227. package/dist/esm/post-banner.entry.js +11 -9
  228. package/dist/esm/post-breadcrumb-item_2.entry.js +8 -7
  229. package/dist/esm/post-breadcrumbs-15ec5a26.js +118 -0
  230. package/dist/esm/post-breadcrumbs.entry.js +5 -0
  231. package/dist/esm/post-card-control-6142534e.js +267 -0
  232. package/dist/esm/post-card-control.entry.js +6 -5
  233. package/dist/esm/post-closebutton_15.entry.js +13 -10
  234. package/dist/esm/{post-collapsible-trigger-1c7833f8.js → post-collapsible-trigger-68306358.js} +59 -60
  235. package/dist/esm/post-collapsible_2.entry.js +11 -10
  236. package/dist/esm/post-components.js +3 -3
  237. package/dist/esm/{post-footer-b18875e7.js → post-footer-d2a3270e.js} +10 -56
  238. package/dist/esm/post-footer.entry.js +4 -3
  239. package/dist/esm/post-linkarea-64998c67.js +28 -0
  240. package/dist/esm/post-linkarea.entry.js +3 -0
  241. package/dist/esm/{post-menu-item-2906384b.js → post-menu-item-95a0a647.js} +11 -17
  242. package/dist/esm/post-popover-c5f81087.js +133 -0
  243. package/dist/esm/post-popover.entry.js +4 -4
  244. package/dist/esm/{post-rating-95cbdbb8.js → post-rating-7bfedafb.js} +4 -4
  245. package/dist/esm/post-rating.entry.js +3 -3
  246. package/dist/esm/post-tab-header-08033da4.js +32 -0
  247. package/dist/esm/post-tab-header.entry.js +6 -4
  248. package/dist/esm/{post-tab-panel-cafd9e04.js → post-tab-panel-be701793.js} +5 -4
  249. package/dist/esm/post-tab-panel.entry.js +4 -3
  250. package/dist/esm/{post-tabs-beef8eae.js → post-tabs-c69e2842.js} +13 -15
  251. package/dist/esm/post-tabs.entry.js +5 -4
  252. package/dist/esm/post-tag-ebac7f3e.js +45 -0
  253. package/dist/esm/post-tag.entry.js +3 -3
  254. package/dist/esm/post-togglebutton-706e3af0.js +4478 -0
  255. package/dist/esm/post-tooltip-9a195d47.js +71 -0
  256. package/dist/esm/{post-tooltip-b298039a.js → post-tooltip-trigger-7d6f234b.js} +143 -456
  257. package/dist/esm/post-tooltip-trigger.entry.js +5 -0
  258. package/dist/esm/post-tooltip.entry.js +5 -9
  259. package/dist/esm/{slide-3422b8a3.js → slide-cd2850ee.js} +9 -9
  260. package/dist/post-components/index.esm.js +1 -1
  261. package/dist/post-components/p-034715ec.js +1 -0
  262. package/dist/post-components/p-0717fe4c.js +1 -0
  263. package/dist/post-components/p-0889c759.js +1 -0
  264. package/dist/post-components/p-0c03547b.js +1 -0
  265. package/dist/post-components/p-0de8d05f.js +1 -0
  266. package/dist/post-components/p-1373a79b.entry.js +1 -0
  267. package/dist/post-components/{p-4f9746f6.js → p-17dc4170.js} +2 -9
  268. package/dist/post-components/p-181c73d5.js +1 -0
  269. package/dist/post-components/p-1a21fd8d.js +1 -0
  270. package/dist/post-components/p-1ab3eba4.entry.js +1 -0
  271. package/dist/post-components/p-2d6c0670.js +1 -0
  272. package/dist/post-components/p-2dc0a2d0.js +1 -0
  273. package/dist/post-components/p-35ad2e11.entry.js +1 -0
  274. package/dist/post-components/p-368c473a.js +1 -0
  275. package/dist/post-components/p-38f778a7.entry.js +1 -0
  276. package/dist/post-components/p-39a8df3c.entry.js +1 -0
  277. package/dist/post-components/p-3c7f6003.js +1 -0
  278. package/dist/post-components/p-474a41bc.entry.js +1 -0
  279. package/dist/post-components/p-64e3de38.js +1 -0
  280. package/dist/post-components/p-69bc8eaf.entry.js +1 -0
  281. package/dist/post-components/p-6b31a76a.js +1 -0
  282. package/dist/post-components/p-722ffaae.js +1 -0
  283. package/dist/post-components/p-72310bf0.entry.js +1 -0
  284. package/dist/post-components/p-7709c14a.js +1 -0
  285. package/dist/post-components/p-804b61b7.entry.js +1 -0
  286. package/dist/post-components/p-85fdc2d3.js +1 -0
  287. package/dist/post-components/p-89247caa.js +1 -0
  288. package/dist/post-components/p-89dc67c7.entry.js +1 -0
  289. package/dist/post-components/p-8db32dab.js +8 -0
  290. package/dist/post-components/p-8f7f5200.entry.js +1 -0
  291. package/dist/post-components/p-964f9581.js +1 -0
  292. package/dist/post-components/p-9b052461.js +1 -0
  293. package/dist/post-components/{p-c0ae9886.js → p-9e461613.js} +2 -2
  294. package/dist/post-components/p-a52b2d34.js +1 -0
  295. package/dist/post-components/p-ab566526.js +1 -0
  296. package/dist/post-components/p-b648e537.entry.js +1 -0
  297. package/dist/post-components/p-bc33a6d9.js +1 -0
  298. package/dist/post-components/p-bcfdbd0b.entry.js +1 -0
  299. package/dist/post-components/p-beb67979.js +1 -0
  300. package/dist/post-components/p-c41868b1.js +1 -0
  301. package/dist/post-components/p-c65f32b0.js +1 -0
  302. package/dist/post-components/p-c71700a7.js +1 -0
  303. package/dist/post-components/p-cb027003.js +1 -0
  304. package/dist/post-components/p-cc5b1437.js +1 -0
  305. package/dist/post-components/p-ceda889e.entry.js +1 -0
  306. package/dist/post-components/p-d45df336.js +1 -0
  307. package/dist/post-components/p-de4d4274.js +1 -0
  308. package/dist/post-components/p-deb9efcf.entry.js +1 -0
  309. package/dist/post-components/p-e585c6fe.js +1 -0
  310. package/dist/post-components/p-e9f1cc46.entry.js +1 -0
  311. package/dist/post-components/p-ee4e776d.entry.js +1 -0
  312. package/dist/post-components/p-ee7c3bcc.entry.js +1 -0
  313. package/dist/post-components/p-f56482fa.entry.js +1 -0
  314. package/dist/post-components/p-f8c652ce.entry.js +1 -0
  315. package/dist/post-components/post-components.esm.js +1 -1
  316. package/dist/types/animations/collapse.d.ts +2 -2
  317. package/dist/types/animations/fade.d.ts +2 -2
  318. package/dist/types/animations/slide.d.ts +2 -2
  319. package/dist/types/components/post-accordion-item/post-accordion-item.d.ts +1 -1
  320. package/dist/types/components/post-avatar/post-avatar.d.ts +1 -1
  321. package/dist/types/components/post-back-to-top/post-back-to-top.d.ts +4 -2
  322. package/dist/types/components/post-banner/post-banner.d.ts +5 -5
  323. package/dist/types/components/post-breadcrumb-item/post-breadcrumb-item.d.ts +4 -0
  324. package/dist/types/components/{post-breadcrumb/post-breadcrumb.d.ts → post-breadcrumbs/post-breadcrumbs.d.ts} +4 -4
  325. package/dist/types/components/post-card-control/post-card-control.d.ts +3 -3
  326. package/dist/types/components/post-collapsible-trigger/post-collapsible-trigger.d.ts +9 -14
  327. package/dist/types/components/post-footer/post-footer.d.ts +2 -2
  328. package/dist/types/components/post-header/post-header.d.ts +38 -10
  329. package/dist/types/components/post-icon/post-icon.d.ts +11 -7
  330. package/dist/types/components/post-language-option/post-language-option.d.ts +9 -5
  331. package/dist/types/components/post-language-switch/post-language-switch.d.ts +16 -8
  332. package/dist/types/components/post-language-switch/switch-variants.d.ts +1 -1
  333. package/dist/types/components/post-linkarea/post-linkarea.d.ts +5 -0
  334. package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts +36 -9
  335. package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +37 -13
  336. package/dist/types/components/post-megadropdown-trigger/post-megadropdown-trigger.d.ts +9 -1
  337. package/dist/types/components/post-menu/post-menu.d.ts +4 -3
  338. package/dist/types/components/post-menu-item/post-menu-item.d.ts +0 -1
  339. package/dist/types/components/post-menu-trigger/post-menu-trigger.d.ts +4 -3
  340. package/dist/types/components/post-popover/post-popover.d.ts +6 -4
  341. package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +40 -14
  342. package/dist/types/components/post-tab-header/post-tab-header.d.ts +1 -1
  343. package/dist/types/components/post-tabs/post-tabs.d.ts +1 -1
  344. package/dist/types/components/post-tag/post-tag.d.ts +1 -1
  345. package/dist/types/components/post-togglebutton/post-togglebutton.d.ts +1 -1
  346. package/dist/types/components/post-tooltip/post-tooltip.d.ts +21 -34
  347. package/dist/types/components/post-tooltip-trigger/post-tooltip-trigger.d.ts +46 -0
  348. package/dist/types/components.d.ts +181 -94
  349. package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/.config/bindings.angular.d.ts +2 -0
  350. package/dist/types/index.d.ts +5 -3
  351. package/dist/types/popover-fn.d.ts +11 -0
  352. package/dist/types/utils/attribute-observer.d.ts +1 -1
  353. package/dist/types/utils/breakpoints.d.ts +1 -0
  354. package/dist/types/utils/component-on-ready.d.ts +1 -1
  355. package/dist/types/utils/environment.d.ts +2 -0
  356. package/dist/types/utils/event-guard.d.ts +4 -0
  357. package/dist/types/utils/get-focusable-children.d.ts +1 -0
  358. package/dist/types/utils/get-root.d.ts +5 -1
  359. package/dist/types/utils/index.d.ts +5 -0
  360. package/dist/types/utils/property-checkers/check-non-empty.d.ts +3 -1
  361. package/dist/types/utils/property-checkers/check-one-of.d.ts +3 -1
  362. package/dist/types/utils/property-checkers/check-pattern.d.ts +3 -1
  363. package/dist/types/utils/property-checkers/check-type.d.ts +3 -1
  364. package/dist/types/utils/property-checkers/check-url.d.ts +3 -1
  365. package/dist/types/utils/property-checkers/index.d.ts +12 -4
  366. package/dist/types/utils/sass-export.d.ts +5 -1
  367. package/loaders/breakpoints.js +56 -0
  368. package/loaders/check-non-empty.js +6 -2
  369. package/loaders/check-one-of.js +8 -3
  370. package/loaders/check-type.js +11 -6
  371. package/loaders/event-guard.js +45 -0
  372. package/loaders/fade.js +6 -2
  373. package/loaders/get-focusable-children.js +35 -0
  374. package/loaders/get-root.js +7 -1
  375. package/loaders/index.browser.js +14 -0
  376. package/loaders/index.d.ts +6 -2
  377. package/loaders/index.js +8 -5
  378. package/loaders/index2.js +25 -12
  379. package/loaders/long-press-event.js +264 -0
  380. package/loaders/package.js +1 -1
  381. package/loaders/post-accordion-item2.js +15 -14
  382. package/loaders/post-accordion.js +8 -9
  383. package/loaders/post-avatar.js +8 -11
  384. package/loaders/post-back-to-top.js +41 -20
  385. package/loaders/post-banner.js +16 -14
  386. package/loaders/post-breadcrumb-item2.js +9 -9
  387. package/loaders/post-breadcrumbs.d.ts +11 -0
  388. package/loaders/post-breadcrumbs.js +180 -0
  389. package/loaders/post-card-control.js +16 -19
  390. package/loaders/post-closebutton.js +7 -2
  391. package/loaders/post-collapsible-trigger2.js +46 -48
  392. package/loaders/post-collapsible2.js +14 -11
  393. package/loaders/post-footer.js +8 -54
  394. package/loaders/post-header.js +174 -51
  395. package/loaders/post-icon2.js +73 -30
  396. package/loaders/post-language-option.js +22 -13
  397. package/loaders/post-language-switch.js +45 -46
  398. package/loaders/{post-breadcrumb.d.ts → post-linkarea.d.ts} +4 -4
  399. package/loaders/post-linkarea.js +46 -0
  400. package/loaders/post-list-item.js +2 -1
  401. package/loaders/post-list.js +5 -4
  402. package/loaders/post-logo.js +4 -3
  403. package/loaders/post-mainnavigation.js +150 -15
  404. package/loaders/post-megadropdown-trigger.js +43 -13
  405. package/loaders/post-megadropdown.js +136 -39
  406. package/loaders/post-menu-item2.js +2 -8
  407. package/loaders/post-menu-trigger2.js +17 -10
  408. package/loaders/post-menu2.js +43 -54
  409. package/loaders/post-popover.js +46 -15
  410. package/loaders/post-popovercontainer2.js +921 -111
  411. package/loaders/post-rating.js +2 -2
  412. package/loaders/post-tab-header.js +8 -6
  413. package/loaders/post-tab-panel.js +4 -3
  414. package/loaders/post-tabs.js +10 -12
  415. package/loaders/post-tag.js +2 -2
  416. package/loaders/post-togglebutton.js +4 -3
  417. package/loaders/post-tooltip-trigger.d.ts +11 -0
  418. package/loaders/post-tooltip-trigger.js +4708 -0
  419. package/loaders/post-tooltip.js +34 -4960
  420. package/loaders/slide.js +9 -9
  421. package/package.json +41 -32
  422. package/dist/cjs/attribute-observer-10f08c04.js +0 -27
  423. package/dist/cjs/check-non-empty-eeaa8f77.js +0 -11
  424. package/dist/cjs/check-one-of-f4f5d0c0.js +0 -8
  425. package/dist/cjs/check-type-64af82a9.js +0 -16
  426. package/dist/cjs/check-url-3ffdd2fb.js +0 -14
  427. package/dist/cjs/debounce-1151afe3.js +0 -12
  428. package/dist/cjs/fade-35a3633a.js +0 -10
  429. package/dist/cjs/get-root-7a3498ef.js +0 -11
  430. package/dist/cjs/index-5d4e0aed.js +0 -29
  431. package/dist/cjs/post-accordion-item-ecc6749f.js +0 -63
  432. package/dist/cjs/post-back-to-top-60762f8e.js +0 -75
  433. package/dist/cjs/post-banner-9662f22c.js +0 -90
  434. package/dist/cjs/post-breadcrumb-b40732fc.js +0 -111
  435. package/dist/cjs/post-breadcrumb.cjs.entry.js +0 -13
  436. package/dist/cjs/post-card-control-039c9a4b.js +0 -272
  437. package/dist/cjs/post-popover-d0ce9dc6.js +0 -104
  438. package/dist/cjs/post-tab-header-4b6d8d54.js +0 -32
  439. package/dist/cjs/post-tag-ddaaaedc.js +0 -47
  440. package/dist/cjs/post-togglebutton-0984a694.js +0 -3239
  441. package/dist/collection/components/post-breadcrumb/post-breadcrumb.css +0 -3
  442. package/dist/collection/components/post-menu-item/post-menu-item.css +0 -1
  443. package/dist/components/attribute-observer.js +0 -25
  444. package/dist/components/debounce.js +0 -10
  445. package/dist/components/post-breadcrumb.js +0 -6
  446. package/dist/components/post-breadcrumb2.js +0 -168
  447. package/dist/esm/attribute-observer-37fa950a.js +0 -25
  448. package/dist/esm/check-non-empty-58bd6b17.js +0 -9
  449. package/dist/esm/check-one-of-6b3ef8eb.js +0 -6
  450. package/dist/esm/check-type-8828dbe4.js +0 -14
  451. package/dist/esm/check-url-a974431e.js +0 -12
  452. package/dist/esm/debounce-abe98cc2.js +0 -10
  453. package/dist/esm/fade-7fd71785.js +0 -7
  454. package/dist/esm/get-root-7af2e0d1.js +0 -9
  455. package/dist/esm/index-b49c9904.js +0 -24
  456. package/dist/esm/package-4d81f3c2.js +0 -3
  457. package/dist/esm/post-accordion-item-e10452dc.js +0 -61
  458. package/dist/esm/post-back-to-top-1d823c43.js +0 -73
  459. package/dist/esm/post-banner-78480475.js +0 -88
  460. package/dist/esm/post-breadcrumb-aaa77f74.js +0 -109
  461. package/dist/esm/post-breadcrumb.entry.js +0 -5
  462. package/dist/esm/post-card-control-862aa961.js +0 -270
  463. package/dist/esm/post-popover-2432bb3f.js +0 -102
  464. package/dist/esm/post-tab-header-dfea00ea.js +0 -30
  465. package/dist/esm/post-tag-a77e7af6.js +0 -45
  466. package/dist/esm/post-togglebutton-395bf3f0.js +0 -3223
  467. package/dist/post-components/p-0711f76d.entry.js +0 -1
  468. package/dist/post-components/p-095a06f6.entry.js +0 -1
  469. package/dist/post-components/p-0b5a5f32.js +0 -1
  470. package/dist/post-components/p-135fa60f.js +0 -1
  471. package/dist/post-components/p-18e38d8a.js +0 -1
  472. package/dist/post-components/p-2737eaf5.js +0 -1
  473. package/dist/post-components/p-2e1ec074.entry.js +0 -1
  474. package/dist/post-components/p-4202b433.entry.js +0 -1
  475. package/dist/post-components/p-45773f59.js +0 -1
  476. package/dist/post-components/p-4953de7e.js +0 -1
  477. package/dist/post-components/p-4a3f67ab.js +0 -1
  478. package/dist/post-components/p-4f67c5f5.entry.js +0 -1
  479. package/dist/post-components/p-5075c672.entry.js +0 -1
  480. package/dist/post-components/p-515e0f96.js +0 -1
  481. package/dist/post-components/p-5467b223.js +0 -1
  482. package/dist/post-components/p-611b3c41.js +0 -1
  483. package/dist/post-components/p-67036798.entry.js +0 -1
  484. package/dist/post-components/p-6adeaa6c.js +0 -1
  485. package/dist/post-components/p-6d953fb2.js +0 -1
  486. package/dist/post-components/p-6edb0ac5.js +0 -1
  487. package/dist/post-components/p-6f8f39ca.js +0 -1
  488. package/dist/post-components/p-7503a623.js +0 -1
  489. package/dist/post-components/p-761b24c7.entry.js +0 -1
  490. package/dist/post-components/p-77c4c1d2.js +0 -1
  491. package/dist/post-components/p-7cf0c2ad.js +0 -1
  492. package/dist/post-components/p-856c14d6.entry.js +0 -1
  493. package/dist/post-components/p-866bf50a.entry.js +0 -1
  494. package/dist/post-components/p-8d621781.js +0 -1
  495. package/dist/post-components/p-8fe2d72c.entry.js +0 -1
  496. package/dist/post-components/p-9ad5088f.entry.js +0 -1
  497. package/dist/post-components/p-a1d2b90e.js +0 -1
  498. package/dist/post-components/p-a521419d.entry.js +0 -1
  499. package/dist/post-components/p-aa538648.js +0 -1
  500. package/dist/post-components/p-afdbee2f.js +0 -1
  501. package/dist/post-components/p-b02817f2.entry.js +0 -1
  502. package/dist/post-components/p-b095519d.js +0 -1
  503. package/dist/post-components/p-b157dcba.entry.js +0 -1
  504. package/dist/post-components/p-b22656b1.js +0 -1
  505. package/dist/post-components/p-bdbd11cb.js +0 -1
  506. package/dist/post-components/p-c537e196.entry.js +0 -1
  507. package/dist/post-components/p-d4f93f2b.js +0 -1
  508. package/dist/post-components/p-dca4246a.entry.js +0 -1
  509. package/dist/post-components/p-f319b026.js +0 -1
  510. package/dist/post-components/p-f4b7b379.js +0 -1
  511. package/dist/post-components/p-fac66087.entry.js +0 -1
  512. package/dist/post-components/p-fc91cbc2.js +0 -1
  513. package/dist/types/utils/is-focusable.d.ts +0 -1
  514. package/loaders/attribute-observer.js +0 -25
  515. package/loaders/debounce.js +0 -10
  516. package/loaders/post-breadcrumb.js +0 -171
@@ -2,15 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const postTooltip = require('./post-tooltip-38c839a4.js');
6
- require('./index-010dc207.js');
7
- require('./package-8e810a59.js');
8
- require('./attribute-observer-10f08c04.js');
9
- require('./index-5d4e0aed.js');
10
- require('./constants-238701d3.js');
11
- require('./check-one-of-f4f5d0c0.js');
12
- require('./check-type-64af82a9.js');
13
- require('./check-url-3ffdd2fb.js');
5
+ const postTooltip = require('./post-tooltip-f833d51d.js');
6
+ require('./index-b60129c4.js');
7
+ require('./package-8121f093.js');
8
+ require('./check-type-cdbf6d29.js');
9
+ require('./breakpoints-cdf1b747.js');
14
10
 
15
11
 
16
12
 
@@ -3,26 +3,26 @@
3
3
  const easing = 'ease';
4
4
  const duration = 500;
5
5
  const fill = 'forwards';
6
- const slideUp = (el, translateSize = '100%') => {
6
+ function slideUp(el, translateSize = '-100%') {
7
7
  return el.animate([
8
- { transform: `translateY(${translateSize})` }, // Starting position (no translation)
9
- { transform: 'translateY(0)' }, // End position
8
+ { transform: 'translateY(0)' }, // Starting position (no translation)
9
+ { transform: `translateY(${translateSize})` }, // End position
10
10
  ], {
11
11
  duration: duration,
12
12
  easing,
13
13
  fill,
14
14
  });
15
- };
16
- const slideDown = (el, translateSize = '100%') => {
15
+ }
16
+ function slideDown(el, translateSize = '-100%') {
17
17
  return el.animate([
18
- { transform: 'translateY(0)' }, // Starting position (no translation)
19
- { transform: `translateY(${translateSize})` }, // End position
18
+ { transform: `translateY(${translateSize})` }, // Starting position (no translation)
19
+ { transform: 'translateY(0)' }, // End position
20
20
  ], {
21
21
  duration: duration,
22
22
  easing,
23
23
  fill,
24
24
  });
25
- };
25
+ }
26
26
 
27
27
  exports.slideDown = slideDown;
28
28
  exports.slideUp = slideUp;
@@ -1,3 +1,4 @@
1
+ import { IS_BROWSER } from "../utils/index";
1
2
  const collapseDuration = 350;
2
3
  const collapseEasing = 'ease';
3
4
  const collapsedKeyframe = { height: '0', overflow: 'hidden' };
@@ -6,12 +7,13 @@ const animationOptions = {
6
7
  easing: collapseEasing,
7
8
  fill: 'forwards',
8
9
  };
9
- export const collapse = (el) => {
10
- const expandedKeyframe = { height: window.getComputedStyle(el).height };
10
+ export function collapse(el) {
11
+ const elHeight = IS_BROWSER ? window.getComputedStyle(el).height : `${el.scrollHeight}px`;
12
+ const expandedKeyframe = { height: elHeight };
11
13
  return el.animate([expandedKeyframe, collapsedKeyframe], animationOptions);
12
- };
13
- export const expand = (el) => {
14
+ }
15
+ export function expand(el) {
14
16
  const expandedKeyframe = { height: `${el.scrollHeight}px`, offset: 1 };
15
- const finalKeyframe = { height: 'auto' };
17
+ const finalKeyframe = { height: 'auto', overflow: 'visible' };
16
18
  return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions);
17
- };
19
+ }
@@ -1,5 +1,9 @@
1
1
  const fadeDuration = 200;
2
2
  const fadedOutKeyframe = { opacity: '0' };
3
3
  const fadedInKeyframe = { opacity: '1' };
4
- export const fadeIn = (el) => el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
5
- export const fadeOut = (el) => el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
4
+ export function fadeIn(el) {
5
+ return el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
6
+ }
7
+ export function fadeOut(el) {
8
+ return el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
9
+ }
@@ -1,23 +1,23 @@
1
1
  const easing = 'ease';
2
2
  const duration = 500;
3
3
  const fill = 'forwards';
4
- export const slideUp = (el, translateSize = '100%') => {
4
+ export function slideUp(el, translateSize = '-100%') {
5
5
  return el.animate([
6
- { transform: `translateY(${translateSize})` }, // Starting position (no translation)
7
- { transform: 'translateY(0)' }, // End position
6
+ { transform: 'translateY(0)' }, // Starting position (no translation)
7
+ { transform: `translateY(${translateSize})` }, // End position
8
8
  ], {
9
9
  duration: duration,
10
10
  easing,
11
11
  fill,
12
12
  });
13
- };
14
- export const slideDown = (el, translateSize = '100%') => {
13
+ }
14
+ export function slideDown(el, translateSize = '-100%') {
15
15
  return el.animate([
16
- { transform: 'translateY(0)' }, // Starting position (no translation)
17
- { transform: `translateY(${translateSize})` }, // End position
16
+ { transform: `translateY(${translateSize})` }, // Starting position (no translation)
17
+ { transform: 'translateY(0)' }, // End position
18
18
  ], {
19
19
  duration: duration,
20
20
  easing,
21
21
  fill,
22
22
  });
23
- };
23
+ }
@@ -1,21 +1,22 @@
1
1
  {
2
2
  "entries": [
3
+ "components/post-header/post-header.js",
3
4
  "components/post-accordion/post-accordion.js",
4
5
  "components/post-accordion-item/post-accordion-item.js",
5
6
  "components/post-avatar/post-avatar.js",
6
7
  "components/post-back-to-top/post-back-to-top.js",
7
8
  "components/post-banner/post-banner.js",
8
- "components/post-breadcrumb/post-breadcrumb.js",
9
+ "components/post-breadcrumbs/post-breadcrumbs.js",
9
10
  "components/post-breadcrumb-item/post-breadcrumb-item.js",
10
11
  "components/post-card-control/post-card-control.js",
11
12
  "components/post-closebutton/post-closebutton.js",
12
13
  "components/post-collapsible/post-collapsible.js",
13
14
  "components/post-collapsible-trigger/post-collapsible-trigger.js",
14
15
  "components/post-footer/post-footer.js",
15
- "components/post-header/post-header.js",
16
16
  "components/post-icon/post-icon.js",
17
17
  "components/post-language-option/post-language-option.js",
18
18
  "components/post-language-switch/post-language-switch.js",
19
+ "components/post-linkarea/post-linkarea.js",
19
20
  "components/post-list/post-list.js",
20
21
  "components/post-list-item/post-list-item.js",
21
22
  "components/post-logo/post-logo.js",
@@ -33,7 +34,8 @@
33
34
  "components/post-tab-panel/post-tab-panel.js",
34
35
  "components/post-tag/post-tag.js",
35
36
  "components/post-togglebutton/post-togglebutton.js",
36
- "components/post-tooltip/post-tooltip.js"
37
+ "components/post-tooltip/post-tooltip.js",
38
+ "components/post-tooltip-trigger/post-tooltip-trigger.js"
37
39
  ],
38
40
  "compiler": {
39
41
  "name": "@stencil/core",
@@ -1 +1 @@
1
- :host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-top:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:not(:only-of-type):first-of-type){--post-accordion-button-border-top: var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}
1
+ :host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:not(:only-of-type):first-of-type){--post-accordion-button-border-top: var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}
@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
2
2
  import { version } from "../../../../package";
3
3
  import { HEADING_LEVELS } from "../../types/index";
4
4
  import { checkOneOf } from "../../utils/index";
5
+ import { eventGuard } from "../../utils/event-gua"; // Import eventGuard
5
6
  /**
6
7
  * @slot default - Slot for placing post-accordion-item components.
7
8
  */
@@ -14,7 +15,7 @@ export class PostAccordion {
14
15
  validateHeadingLevel(newValue = this.headingLevel) {
15
16
  if (!newValue)
16
17
  return;
17
- checkOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion` must be a number between 1 and 6.');
18
+ checkOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion` must be a number between 1 and 6.');
18
19
  this.accordionItems.forEach(item => {
19
20
  item.setAttribute('heading-level', String(newValue));
20
21
  });
@@ -24,10 +25,7 @@ export class PostAccordion {
24
25
  this.validateHeadingLevel();
25
26
  }
26
27
  collapseToggleHandler(event) {
27
- event.stopPropagation();
28
- const toggledItem = event.target;
29
- const closestParentAccordion = toggledItem.closest('post-accordion');
30
- if (closestParentAccordion === this.host && toggledItem.localName === 'post-accordion-item') {
28
+ eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion' }, () => {
31
29
  const toggledAccordionItem = event.target;
32
30
  const isClosing = this.expandedItems.has(toggledAccordionItem);
33
31
  if (isClosing) {
@@ -38,13 +36,13 @@ export class PostAccordion {
38
36
  }
39
37
  if (this.multiple || isClosing)
40
38
  return;
41
- // close other open accordion items to have only one opened at a time
39
+ // Close other open accordion items to ensure only one is open at a time
42
40
  Array.from(this.expandedItems.values())
43
41
  .filter(item => item !== toggledAccordionItem)
44
42
  .forEach(item => {
45
43
  item.toggle(false);
46
44
  });
47
- }
45
+ });
48
46
  }
49
47
  /**
50
48
  * Toggles the `post-accordion-item` with the given id.
@@ -90,7 +88,7 @@ export class PostAccordion {
90
88
  });
91
89
  }
92
90
  render() {
93
- return (h(Host, { key: 'cfc6280e052937f50bc481fe73cf25ede6e40314', "data-version": version }, h("div", { key: '090539a2ebe9d216609a7e56597c5f379d439fb8', class: "accordion" }, h("slot", { key: '4ae4095b14b6b9233f1d66c8543d625a77a77e09', onSlotchange: () => this.registerAccordionItems() }))));
91
+ return (h(Host, { key: '80e15cf7835f213cfee1ca7cf83cc2fd24bba3ff', "data-version": version }, h("div", { key: '1cf03d4960115b52394b5cb07cd2286747c728dd', class: "accordion" }, h("slot", { key: 'b94328a45a3cba6a8d3b418061036eb8af2cf027', onSlotchange: () => this.registerAccordionItems() }))));
94
92
  }
95
93
  static get is() { return "post-accordion"; }
96
94
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- :host::after{display:block;content:"";margin-top:calc(var(--post-device-border-width-default)*-1);border-bottom:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.accordion-button::before{display:block;position:absolute;content:"";inset:0;bottom:auto;border-top:var(--post-accordion-button-border-top)}.accordion-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:var(--post-device-border-width-default) solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}
1
+ .accordion-item::after{display:block;content:"";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-item:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-item:has(.accordion-button:hover)::after{border-color:Highlight}}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{display:block;position:absolute;content:"";inset:0;inset-block-end:auto;border-block-start:var(--post-accordion-button-border-top)}.accordion-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}
@@ -2,6 +2,8 @@ import { h, Host } from "@stencil/core";
2
2
  import { version } from "../../../../package";
3
3
  import { HEADING_LEVELS } from "../../types/index";
4
4
  import { checkEmptyOrOneOf } from "../../utils/index";
5
+ import { nanoid } from "nanoid";
6
+ import { eventGuard } from "../../utils/event-gua";
5
7
  /**
6
8
  * @part button - The pseudo-element, used to override styles on the components internal header `button` element.
7
9
  * @part body - The pseudo-element, used to override styles on the components internal `body` element.
@@ -16,21 +18,20 @@ export class PostAccordionItem {
16
18
  this.collapsed = false;
17
19
  this.headingLevel = undefined;
18
20
  }
19
- validateHeadingLevel(newValue = this.headingLevel) {
20
- checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
21
+ validateHeadingLevel() {
22
+ checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
21
23
  }
22
24
  componentWillLoad() {
23
- this.id = this.host.id || `a${crypto.randomUUID()}`;
25
+ this.id = this.host.id || `p${nanoid(6)}`;
24
26
  }
25
27
  componentDidLoad() {
26
28
  this.validateHeadingLevel();
27
29
  }
28
- // capture to make sure the "collapsed" property is updated before the event is consumed
30
+ // Capture to make sure the "collapsed" property is updated before the event is consumed
29
31
  onCollapseToggle(event) {
30
- if (event.target === this.host &&
31
- event.target.localName === 'post-accordion-item') {
32
+ eventGuard(this.host, event, { targetLocalName: 'post-collapsible', delegatorSelector: 'post-accordion-item' }, () => {
32
33
  this.collapsed = !event.detail;
33
- }
34
+ });
34
35
  }
35
36
  /**
36
37
  * Triggers the collapse programmatically.
@@ -45,13 +46,12 @@ export class PostAccordionItem {
45
46
  this.slottedLogo = this.host.querySelector('img[slot="logo"]');
46
47
  }
47
48
  render() {
48
- var _a, _b;
49
- const headingLevel = (_a = this.host.closest('post-accorddion')) === null || _a === void 0 ? void 0 : _a.getAttribute('heading-level');
50
- const HeadingTag = `h${(_b = headingLevel !== null && headingLevel !== void 0 ? headingLevel : this.headingLevel) !== null && _b !== void 0 ? _b : 2}`;
51
- return (h(Host, { key: 'e11a8ce9df85f6813f152433d0b5526668415953', id: this.id, "data-version": version }, h("div", { key: 'd62b7f758fca1ffbcef7c6f29b3a0ce48ded9749', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '492458d3cda61325d931a83be1f1be1f98f63301', for: `${this.id}--collapse` }, h(HeadingTag, { key: '1a4bc90415504cd00a65922ff5e61221c8368eea', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'c14154955c74a4482cc197aca95297ae29ef066f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '112810b9df4a73bc02a46a98ba2d0ce069168c7c', class: {
49
+ const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
50
+ const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
51
+ return (h(Host, { key: '725d3710f7937f82c2382938d15770001e923b61', id: this.id, "data-version": version }, h("div", { key: '679d25d8278fbf9ae68546ee50c27a86ded95999', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '7c2af8dc6a1f5265b4ae2cad066be7d2e0bf6a78', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'a10e59a17fdb272fe6308d2ba98f37f90490fab8', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'e2b527850c8342a8adf99453d0ac330b6a94760f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'b722a4bc51757546eefa58c7c3ea3a688838298a', class: {
52
52
  'logo-container': true,
53
53
  'has-image': !!this.slottedLogo,
54
- } }, h("slot", { key: '67e72b84363597fc0e239baccb533b9083251a6b', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '3e9a2b38f621990cabfa84431ca8a7fd39087c88', name: "header" }), h("post-icon", { key: 'e8337b48394b9357b62e517c3b066dfa1bb5f5d7', name: "2051" })))), h("post-collapsible", { key: 'ca23a5a9a8b1615dc4352223a3135514ea5f279a', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '668805a03a3ee2facee60ecba0fa549edf0cecba', class: "accordion-body", part: "body" }, h("slot", { key: '3ddf282a59dad61dcd093c11a23f33635c9162d1' }))))));
54
+ } }, h("slot", { key: '1a42494db72a7b437b1d98fa2e8159d73ece22fa', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '049865bb25f833780ef8e27fe8477e06476a2427', name: "header" }), h("post-icon", { key: 'da0cf7078e4f51710dbfd39c0afa90465fcb53c6', name: "2051" })))), h("post-collapsible", { key: '7c3b268e34d3e4f52820b11a6c090aefbc16e3b9', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '993a7fffbccb557aed2842305f3927e5c3b5047a', class: "accordion-body", part: "body" }, h("slot", { key: '580eb87b1cb4f88acd7dddddecaa1c1982b7f6e3' }))))));
55
55
  }
56
56
  static get is() { return "post-accordion-item"; }
57
57
  static get encapsulation() { return "shadow"; }
@@ -1,3 +1 @@
1
- /*!
2
- * Copyright 2021 by Swiss Post, Information Technology
3
- */:host{--post-avatar-bg: var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg: var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.initials span:not(caption){position:absolute !important}
1
+ @keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{--post-avatar-bg: var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg: var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.initials span:not(caption){position:absolute !important}
@@ -29,7 +29,7 @@ export class PostAvatar {
29
29
  this.initials = '';
30
30
  }
31
31
  validateFirstname() {
32
- checkNonEmpty(this.firstname, 'The `firstname` property of the `post-avatar` is required!');
32
+ checkNonEmpty(this, 'firstname');
33
33
  }
34
34
  async getAvatar() {
35
35
  if (this.slottedImage !== null) {
@@ -46,10 +46,9 @@ export class PostAvatar {
46
46
  }
47
47
  }
48
48
  async getImageByProp(prop, fetchImage) {
49
- var _a;
50
49
  if (!prop)
51
50
  return false;
52
- const imageResponse = (_a = (await this.getStorageItem(prop))) !== null && _a !== void 0 ? _a : { ok: false, url: '' };
51
+ const imageResponse = (await this.getStorageItem(prop)) ?? { ok: false, url: '' };
53
52
  if (!imageResponse.ok) {
54
53
  try {
55
54
  const r = await fetchImage();
@@ -89,20 +88,17 @@ export class PostAvatar {
89
88
  .trim();
90
89
  }
91
90
  async getStorageItem(keyToken) {
92
- var _a;
93
91
  const key = await this.cryptify(keyToken);
94
- const value = (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(key);
92
+ const value = window?.sessionStorage?.getItem(key);
95
93
  return value ? JSON.parse(value) : null;
96
94
  }
97
95
  async setStorageItem(keyToken, value) {
98
- var _a;
99
96
  const key = await this.cryptify(keyToken);
100
- (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.setItem(key, value);
97
+ window?.sessionStorage?.setItem(key, value);
101
98
  }
102
99
  async removeStorageItem(keyToken) {
103
- var _a;
104
100
  const key = await this.cryptify(keyToken);
105
- (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(key);
101
+ window?.sessionStorage?.removeItem(key);
106
102
  }
107
103
  async cryptify(key) {
108
104
  return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
@@ -162,7 +158,7 @@ export class PostAvatar {
162
158
  "text": "Defines the users firstname."
163
159
  },
164
160
  "attribute": "firstname",
165
- "reflect": false
161
+ "reflect": true
166
162
  },
167
163
  "lastname": {
168
164
  "type": "string",
@@ -193,7 +189,7 @@ export class PostAvatar {
193
189
  "optional": true,
194
190
  "docs": {
195
191
  "tags": [],
196
- "text": "Defines the company internal userId.<div className=\"mb-1 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>"
192
+ "text": "Defines the company internal userId.<div className=\"mb-4 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>"
197
193
  },
198
194
  "attribute": "userid",
199
195
  "reflect": false
@@ -1 +1 @@
1
- :host{--post-floating-button-translate-y: calc(-1 * var(--post-core-dimension-112));position:fixed;top:var(--post-device-position-1);right:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
1
+ :host{--post-floating-button-position-top: var(--post-device-position-4);--post-back-to-top-position-top: calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation: var(--post-device-elevation-300);position:fixed;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
@@ -13,24 +13,53 @@ export class PostBackToTop {
13
13
  isBelowFold() {
14
14
  return window.scrollY > window.innerHeight;
15
15
  }
16
- // Watch for changes in belowFold
16
+ /*Watch for changes in belowFold to show/hide the back to top button*/
17
17
  watchBelowFold(newValue) {
18
18
  if (newValue) {
19
- slideUp(this.el, this.translateY);
19
+ slideDown(this.host, this.translateY);
20
20
  }
21
21
  else {
22
- slideDown(this.el, this.translateY);
22
+ slideUp(this.host, this.translateY);
23
23
  }
24
24
  }
25
25
  scrollToTop() {
26
26
  window.scrollTo({
27
27
  top: 0,
28
+ behavior: 'smooth',
28
29
  });
29
30
  }
31
+ getSecondPixelValue(parts) {
32
+ for (const part of parts) {
33
+ const pixelValues = part.match(/\b\d+px\b/g);
34
+ if (pixelValues && pixelValues.length > 1) {
35
+ return pixelValues[1];
36
+ }
37
+ }
38
+ }
39
+ animateButton() {
40
+ // Get the back-to-top button top postiion
41
+ const positionTop = window.getComputedStyle(this.host).getPropertyValue('top');
42
+ const buttonElement = this.host.shadowRoot.querySelector('button');
43
+ // Extract the elevation height from the back-to-top button elevation token
44
+ const elevation = getComputedStyle(buttonElement).getPropertyValue('--post-back-to-top-elevation');
45
+ const elevationParts = elevation.split(',');
46
+ const elevationHeight = this.getSecondPixelValue(elevationParts);
47
+ // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
48
+ this.translateY =
49
+ String((-1 * 100) / 100 -
50
+ parseFloat(positionTop.replace('px', '')) -
51
+ parseFloat(elevationHeight.replace('px', ''))) + 'px';
52
+ if (this.belowFold) {
53
+ slideDown(this.host, this.translateY);
54
+ }
55
+ if (!this.belowFold) {
56
+ this.host.style.transform = `translateY(${this.translateY})`;
57
+ }
58
+ }
30
59
  // Validate the label
31
60
  validateLabel() {
32
- checkType(this.label, 'string', 'The label property of the Back to Top component is required for accessibility purposes. Please ensure it is set.');
33
- checkNonEmpty(this.label, 'The label property of the Back to Top component must not be empty. Please provide a proper text for the label');
61
+ checkNonEmpty(this, 'label');
62
+ checkType(this, 'label', 'string');
34
63
  }
35
64
  // Set the initial state
36
65
  componentWillLoad() {
@@ -38,23 +67,14 @@ export class PostBackToTop {
38
67
  }
39
68
  componentDidLoad() {
40
69
  window.addEventListener('scroll', this.handleScroll, false);
41
- this.translateY = window
42
- .getComputedStyle(this.el)
43
- .getPropertyValue('--post-floating-button-translate-y');
44
- if (!this.belowFold) {
45
- this.el.style.transform = `translateY(${this.translateY})`;
46
- }
47
- // Initial load
48
- if (this.belowFold) {
49
- slideUp(this.el, this.translateY);
50
- }
70
+ this.animateButton();
51
71
  this.validateLabel();
52
72
  }
53
73
  disconnectedCallback() {
54
74
  window.removeEventListener('scroll', this.handleScroll);
55
75
  }
56
76
  render() {
57
- return (h(Host, { key: '92d56ff9055c2af38ae47b28c3af20771eed9a39', "data-version": version }, h("button", { key: 'ae305dd5b5a3f8d97553945e547ad45e824e6b7d', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '37792f99d6ef79df4260f6ad1c5780e545f7870a', "aria-hidden": "true", name: "3026" }), h("span", { key: '8768101a26e259c2bd0695a97e6bb4077ad31ae6', class: "visually-hidden" }, this.label))));
77
+ return (h(Host, { key: 'c1ab6c5e7619ad829d64aea16c59a923310cf091', "data-version": version }, h("button", { key: '99e10e4d16c8d82521b001c3b3d902d8ba47ee92', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '5a6a1b472b45fcc466127ece7091617e4700ee16', "aria-hidden": "true", name: "3026" }), h("span", { key: 'c8502e4822347d48034f6a936203e3314c7ae91e', class: "visually-hidden" }, this.label))));
58
78
  }
59
79
  static get is() { return "post-back-to-top"; }
60
80
  static get encapsulation() { return "shadow"; }
@@ -85,7 +105,7 @@ export class PostBackToTop {
85
105
  "text": "The label of the back-to-top button, intended solely for accessibility purposes.\nThis label is always hidden from view."
86
106
  },
87
107
  "attribute": "label",
88
- "reflect": false
108
+ "reflect": true
89
109
  }
90
110
  };
91
111
  }
@@ -94,7 +114,7 @@ export class PostBackToTop {
94
114
  "belowFold": {}
95
115
  };
96
116
  }
97
- static get elementRef() { return "el"; }
117
+ static get elementRef() { return "host"; }
98
118
  static get watchers() {
99
119
  return [{
100
120
  "propName": "belowFold",
@@ -1,3 +1 @@
1
- .banner,.alert{min-height:calc(var(--post-device-sizing-notification-icon-2) + (2 * var(--post-device-spacing-padding-10)));box-sizing:border-box;box-shadow:var(--post-device-elevation-100);border-radius:var(--post-device-border-radius-2);padding:var(--post-device-spacing-padding-10) var(--post-device-spacing-padding-10);padding-inline-start:calc(var(--post-device-spacing-padding-10) + var(--post-device-sizing-notification-icon-2) + var(--post-device-spacing-gap-inline-6));font-weight:400;border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);position:relative;color:var(--post-scheme-color-surface-default-fg);background-color:var(--post-scheme-color-signal-neutral);border-color:var(--post-scheme-color-signal-neutral-dark);color-scheme:var(--post-core-bg-scheme-light)}.banner:not(.no-icon)::before,.alert:not(.no-icon)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-signal-neutral-dark)}.banner:has(>post-icon)::before,.alert:has(>post-icon)::before{content:none}.banner>post-icon,.alert>post-icon{background-color:var(--post-scheme-color-signal-neutral);color:var(--post-scheme-color-signal-neutral-dark)}.banner::before,.alert::before{content:"";display:block}.banner::before,.banner>post-icon,.alert::before,.alert>post-icon{position:absolute;height:var(--post-device-sizing-notification-icon-2);width:var(--post-device-sizing-notification-icon-2);left:var(--post-device-spacing-padding-10);top:var(--post-device-spacing-padding-10)}.banner.no-icon,.alert.no-icon{min-height:calc(2 * var(--post-device-spacing-padding-10) + close.$close-size);padding-inline-start:var(--post-device-spacing-padding-10)}.banner.no-icon::before,.alert.no-icon::before{content:unset}.banner.no-icon>post-icon,.alert.no-icon>post-icon{display:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner,.alert{filter:none !important;border:2px solid CanvasText}}.banner:not(.banner-action):not(.alert-action),.alert:not(.banner-action):not(.alert-action){display:flex;flex-direction:column;justify-content:center;gap:.25rem}.banner:not(.banner-action):not(.alert-action) a,.alert:not(.banner-action):not(.alert-action) a{font-weight:400}.banner:not(.banner-action):not(.alert-action) hr,.alert:not(.banner-action):not(.alert-action) hr{margin-block:.5rem .75rem !important}.banner:not(.banner-action):not(.alert-action)>*,.alert:not(.banner-action):not(.alert-action)>*{margin:0}.banner-container{border:unset;background-color:rgba(0,0,0,0)}.banner-dismissible,.alert-dismissible{pointer-events:auto;position:relative}.banner-dismissible:not(.banner-action):not(.alert-action),.alert-dismissible:not(.banner-action):not(.alert-action){padding-inline-end:calc(var(--post-device-spacing-padding-10) + var(--post-device-spacing-gap-inline-6) + 1.5rem)}.banner-dismissible>.btn-close,.alert-dismissible>.btn-close{position:absolute;inset-block-start:1rem;inset-inline-end:var(--post-device-spacing-padding-10)}.banner-buttons,.alert-buttons{display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;margin-block-start:var(--post-device-spacing-padding-block-10);gap:var(--post-device-spacing-gap-1)}@media(max-width: 779.98px){.banner-buttons,.alert-buttons{flex-direction:column}}.banner-action>.banner-content,.banner-action>.alert-content,.alert-action>.banner-content,.alert-action>.alert-content{display:flex;flex-direction:column;justify-content:center;gap:.25rem}.banner-action>.banner-content a,.banner-action>.alert-content a,.alert-action>.banner-content a,.alert-action>.alert-content a{font-weight:400}.banner-action>.banner-content hr,.banner-action>.alert-content hr,.alert-action>.banner-content hr,.alert-action>.alert-content hr{margin-block:.5rem .75rem !important}.banner-action>.banner-content>*,.banner-action>.alert-content>*,.alert-action>.banner-content>*,.alert-action>.alert-content>*{margin:0}@media(max-width: 779.98px){.banner-action,.alert-action{flex-direction:column;align-items:stretch}.banner-action>.banner-content,.banner-action>.alert-content,.alert-action>.banner-content,.alert-action>.alert-content{padding-inline-start:var(--post-device-spacing-gap-inline-6)var(--post-device-sizing-notification-icon-2);padding-inline-end:var(--post-device-spacing-gap-inline-6)1.5rem}.banner-action.no-icon>.banner-content,.banner-action.no-icon>.alert-content,.alert-action.no-icon>.banner-content,.alert-action.no-icon>.alert-content{padding-inline-start:0}.banner-action>.banner-buttons,.banner-action>.alert-buttons,.alert-action>.banner-buttons,.alert-action>.alert-buttons{display:flex}.banner-action>.banner-buttons>.btn,.banner-action>.banner-buttons>::slotted(.btn),.banner-action>.alert-buttons>.btn,.banner-action>.alert-buttons>::slotted(.btn),.alert-action>.banner-buttons>.btn,.alert-action>.banner-buttons>::slotted(.btn),.alert-action>.alert-buttons>.btn,.alert-action>.alert-buttons>::slotted(.btn){flex:1 0 0;width:100%}.banner-action>.banner-buttons>.btn:first-child,.banner-action>.banner-buttons>::slotted(.btn:first-child),.banner-action>.alert-buttons>.btn:first-child,.banner-action>.alert-buttons>::slotted(.btn:first-child),.alert-action>.banner-buttons>.btn:first-child,.alert-action>.banner-buttons>::slotted(.btn:first-child),.alert-action>.alert-buttons>.btn:first-child,.alert-action>.alert-buttons>::slotted(.btn:first-child){margin-inline-start:0}}.banner-neutral,.alert-neutral{background-color:var(--post-scheme-color-signal-neutral);border-color:var(--post-scheme-color-signal-neutral-dark);color-scheme:var(--post-core-bg-scheme-light)}.banner-neutral:not(.no-icon)::before,.alert-neutral:not(.no-icon)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-signal-neutral-dark)}.banner-neutral:has(>post-icon)::before,.alert-neutral:has(>post-icon)::before{content:none}.banner-neutral>post-icon,.alert-neutral>post-icon{background-color:var(--post-scheme-color-signal-neutral);color:var(--post-scheme-color-signal-neutral-dark)}.banner-success,.alert-success{background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-success:not(.no-icon)::before,.alert-success:not(.no-icon)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-success-icon)}.banner-success:has(>post-icon)::before,.alert-success:has(>post-icon)::before{content:none}.banner-success>post-icon,.alert-success>post-icon{background-color:var(--post-scheme-color-interactive-notification-success-bg);color:var(--post-scheme-color-interactive-notification-success-icon)}.banner-warning,.alert-warning{background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-warning:not(.no-icon)::before,.alert-warning:not(.no-icon)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-warning-icon)}.banner-warning:has(>post-icon)::before,.alert-warning:has(>post-icon)::before{content:none}.banner-warning>post-icon,.alert-warning>post-icon{background-color:var(--post-scheme-color-interactive-notification-warning-bg);color:var(--post-scheme-color-interactive-notification-warning-icon)}.banner-error,.alert-error{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-error:not(.no-icon)::before,.alert-error:not(.no-icon)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-error-icon)}.banner-error:has(>post-icon)::before,.alert-error:has(>post-icon)::before{content:none}.banner-error>post-icon,.alert-error>post-icon{background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-icon)}.banner-info,.alert-info{background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-info:not(.no-icon)::before,.alert-info:not(.no-icon)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-info-icon)}.banner-info:has(>post-icon)::before,.alert-info:has(>post-icon)::before{content:none}.banner-info>post-icon,.alert-info>post-icon{background-color:var(--post-scheme-color-interactive-notification-info-bg);color:var(--post-scheme-color-interactive-notification-info-icon)}.banner-danger,.alert-danger{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-danger:not(.no-icon)::before,.alert-danger:not(.no-icon)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-error-icon)}.banner-danger:has(>post-icon)::before,.alert-danger:has(>post-icon)::before{content:none}.banner-danger>post-icon,.alert-danger>post-icon{background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-icon)}.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:var(--post-gray-40)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}/*!
2
- * Copyright 2021 by Swiss Post, Information Technology
3
- */:host{display:block}:host ::slotted(*){margin:0 !important}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}
1
+ .banner,.alert{min-height:calc(var(--post-device-sizing-notification-icon-2) + (2 * var(--post-device-spacing-padding-10)));box-sizing:border-box;box-shadow:var(--post-device-elevation-100);border-radius:var(--post-device-border-radius-2);padding:var(--post-device-spacing-padding-10) var(--post-device-spacing-padding-10);padding-inline-start:calc(var(--post-device-spacing-padding-10) + var(--post-device-sizing-notification-icon-2) + var(--post-device-spacing-gap-inline-6));font-weight:var(--post-core-font-weight-400);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);position:relative;color:var(--post-scheme-color-surface-default-fg);background-color:var(--post-scheme-color-signal-neutral);border-color:var(--post-scheme-color-signal-neutral-dark);color-scheme:var(--post-core-bg-scheme-light)}.banner:not(.no-icon)::before,.alert:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-signal-neutral-dark)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner:not(.no-icon)::before,.alert:not(.no-icon)::before{color:CanvasText}}.banner:has(>post-icon)::before,.alert:has(>post-icon)::before{content:none}.banner>post-icon,.alert>post-icon{background-color:var(--post-scheme-color-signal-neutral);color:var(--post-scheme-color-signal-neutral-dark)}.banner::before,.alert::before{content:"";display:block}.banner::before,.banner>post-icon,.alert::before,.alert>post-icon{position:absolute;height:var(--post-device-sizing-notification-icon-2);width:var(--post-device-sizing-notification-icon-2);left:var(--post-device-spacing-padding-10);top:var(--post-device-spacing-padding-10)}.banner.no-icon,.alert.no-icon{min-height:calc(2*var(--post-device-spacing-padding-10) + var(--post-core-dimension-24));padding-inline-start:var(--post-device-spacing-padding-10)}.banner.no-icon::before,.alert.no-icon::before{content:unset}.banner.no-icon>post-icon,.alert.no-icon>post-icon{display:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner,.alert{filter:none !important;border:2px solid CanvasText}}.banner:not(.banner-action):not(.alert-action),.alert:not(.banner-action):not(.alert-action){display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.banner:not(.banner-action):not(.alert-action) a,.alert:not(.banner-action):not(.alert-action) a{font-weight:var(--post-core-font-weight-400)}.banner:not(.banner-action):not(.alert-action) hr,.alert:not(.banner-action):not(.alert-action) hr{margin-block:var(--post-core-dimension-8) var(--post-core-dimension-12) !important}.banner:not(.banner-action):not(.alert-action)>*,.alert:not(.banner-action):not(.alert-action)>*{margin:0}.banner-container{border:unset;background-color:rgba(0,0,0,0)}.banner-dismissible,.alert-dismissible{pointer-events:auto;position:relative}.banner-dismissible:not(.banner-action):not(.alert-action),.alert-dismissible:not(.banner-action):not(.alert-action){padding-inline-end:calc(var(--post-device-spacing-padding-10) + var(--post-device-spacing-gap-inline-6) + var(--post-core-dimension-24))}.banner-dismissible>.btn-close,.alert-dismissible>.btn-close{position:absolute;inset-block-start:1rem;inset-inline-end:var(--post-device-spacing-padding-10)}.banner-buttons,.alert-buttons{display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;margin-block-start:var(--post-device-spacing-padding-block-10);gap:var(--post-device-spacing-gap-1)}@media(max-width: 779.98px){.banner-buttons,.alert-buttons{flex-direction:column}}.banner-action>.banner-content,.banner-action>.alert-content,.alert-action>.banner-content,.alert-action>.alert-content{display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.banner-action>.banner-content a,.banner-action>.alert-content a,.alert-action>.banner-content a,.alert-action>.alert-content a{font-weight:var(--post-core-font-weight-400)}.banner-action>.banner-content hr,.banner-action>.alert-content hr,.alert-action>.banner-content hr,.alert-action>.alert-content hr{margin-block:var(--post-core-dimension-8) var(--post-core-dimension-12) !important}.banner-action>.banner-content>*,.banner-action>.alert-content>*,.alert-action>.banner-content>*,.alert-action>.alert-content>*{margin:0}@media(max-width: 779.98px){.banner-action,.alert-action{flex-direction:column;align-items:stretch}.banner-action>.banner-content,.banner-action>.alert-content,.alert-action>.banner-content,.alert-action>.alert-content{padding-inline-start:var(--post-device-spacing-gap-inline-6)var(--post-device-sizing-notification-icon-2);padding-inline-end:var(--post-device-spacing-gap-inline-6)var(--post-core-dimension-24)}.banner-action.no-icon>.banner-content,.banner-action.no-icon>.alert-content,.alert-action.no-icon>.banner-content,.alert-action.no-icon>.alert-content{padding-inline-start:0}.banner-action>.banner-buttons,.banner-action>.alert-buttons,.alert-action>.banner-buttons,.alert-action>.alert-buttons{display:flex}.banner-action>.banner-buttons>.btn,.banner-action>.banner-buttons>::slotted(.btn),.banner-action>.alert-buttons>.btn,.banner-action>.alert-buttons>::slotted(.btn),.alert-action>.banner-buttons>.btn,.alert-action>.banner-buttons>::slotted(.btn),.alert-action>.alert-buttons>.btn,.alert-action>.alert-buttons>::slotted(.btn){flex:1 0 0;width:100%}.banner-action>.banner-buttons>.btn:first-child,.banner-action>.banner-buttons>::slotted(.btn:first-child),.banner-action>.alert-buttons>.btn:first-child,.banner-action>.alert-buttons>::slotted(.btn:first-child),.alert-action>.banner-buttons>.btn:first-child,.alert-action>.banner-buttons>::slotted(.btn:first-child),.alert-action>.alert-buttons>.btn:first-child,.alert-action>.alert-buttons>::slotted(.btn:first-child){margin-inline-start:0}}.banner-neutral,.alert-neutral{background-color:var(--post-scheme-color-signal-neutral);border-color:var(--post-scheme-color-signal-neutral-dark);color-scheme:var(--post-core-bg-scheme-light)}.banner-neutral:not(.no-icon)::before,.alert-neutral:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-signal-neutral-dark)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-neutral:not(.no-icon)::before,.alert-neutral:not(.no-icon)::before{color:CanvasText}}.banner-neutral:has(>post-icon)::before,.alert-neutral:has(>post-icon)::before{content:none}.banner-neutral>post-icon,.alert-neutral>post-icon{background-color:var(--post-scheme-color-signal-neutral);color:var(--post-scheme-color-signal-neutral-dark)}.banner-success,.alert-success{background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-success:not(.no-icon)::before,.alert-success:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-success-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-success:not(.no-icon)::before,.alert-success:not(.no-icon)::before{color:CanvasText}}.banner-success:has(>post-icon)::before,.alert-success:has(>post-icon)::before{content:none}.banner-success>post-icon,.alert-success>post-icon{background-color:var(--post-scheme-color-interactive-notification-success-bg);color:var(--post-scheme-color-interactive-notification-success-icon)}.banner-warning,.alert-warning{background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-warning:not(.no-icon)::before,.alert-warning:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-warning-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-warning:not(.no-icon)::before,.alert-warning:not(.no-icon)::before{color:CanvasText}}.banner-warning:has(>post-icon)::before,.alert-warning:has(>post-icon)::before{content:none}.banner-warning>post-icon,.alert-warning>post-icon{background-color:var(--post-scheme-color-interactive-notification-warning-bg);color:var(--post-scheme-color-interactive-notification-warning-icon)}.banner-error,.alert-error{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-error:not(.no-icon)::before,.alert-error:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-error-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-error:not(.no-icon)::before,.alert-error:not(.no-icon)::before{color:CanvasText}}.banner-error:has(>post-icon)::before,.alert-error:has(>post-icon)::before{content:none}.banner-error>post-icon,.alert-error>post-icon{background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-icon)}.banner-info,.alert-info{background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-info:not(.no-icon)::before,.alert-info:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-info-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-info:not(.no-icon)::before,.alert-info:not(.no-icon)::before{color:CanvasText}}.banner-info:has(>post-icon)::before,.alert-info:has(>post-icon)::before{content:none}.banner-info>post-icon,.alert-info>post-icon{background-color:var(--post-scheme-color-interactive-notification-info-bg);color:var(--post-scheme-color-interactive-notification-info-icon)}.banner-danger,.alert-danger{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.banner-danger:not(.no-icon)::before,.alert-danger:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-error-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.banner-danger:not(.no-icon)::before,.alert-danger:not(.no-icon)::before{color:CanvasText}}.banner-danger:has(>post-icon)::before,.alert-danger:has(>post-icon)::before{content:none}.banner-danger>post-icon,.alert-danger>post-icon{background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-icon)}.btn-close{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{background-color:ButtonFace !important}.btn-close:hover{background-color:Highlight !important}}.btn-close{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}:host ::slotted(*){margin:0 !important}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}