@swisspost/design-system-components 9.0.0-next.33 → 9.0.0-next.35

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 (365) hide show
  1. package/dist/cjs/{attribute-observer-6d8b886b.js → attribute-observer-c3a805b2.js} +3 -1
  2. package/dist/cjs/{breakpoints-c6247c71.js → breakpoints-cdf1b747.js} +12 -7
  3. package/dist/cjs/get-root-8102fecd.js +17 -0
  4. package/dist/cjs/{index-d6bf2c66.js → index-b60129c4.js} +4 -4
  5. package/dist/cjs/index.cjs.js +25 -26
  6. package/dist/cjs/loader.cjs.js +2 -2
  7. package/dist/cjs/long-press-event-6e62d113.js +266 -0
  8. package/dist/cjs/{package-3562c265.js → package-19b74b08.js} +1 -1
  9. package/dist/cjs/{post-accordion-6c5681ba.js → post-accordion-785f602b.js} +5 -5
  10. package/dist/cjs/{post-accordion-item-05a78451.js → post-accordion-item-8e1c9bdb.js} +5 -5
  11. package/dist/cjs/post-accordion-item.cjs.entry.js +5 -4
  12. package/dist/cjs/post-accordion.cjs.entry.js +4 -3
  13. package/dist/cjs/{post-avatar-6710a77a.js → post-avatar-eecfd222.js} +6 -5
  14. package/dist/cjs/post-avatar.cjs.entry.js +4 -3
  15. package/dist/cjs/{post-back-to-top-d0662842.js → post-back-to-top-49a3abcb.js} +9 -9
  16. package/dist/cjs/post-back-to-top.cjs.entry.js +4 -3
  17. package/dist/cjs/{post-banner-bd97db9c.js → post-banner-249ec2ff.js} +5 -9
  18. package/dist/cjs/post-banner.cjs.entry.js +4 -3
  19. package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +4 -3
  20. package/dist/cjs/{post-breadcrumb-36ab841c.js → post-breadcrumbs-f51590d1.js} +39 -31
  21. package/dist/cjs/post-breadcrumbs.cjs.entry.js +13 -0
  22. package/dist/cjs/post-card-control-d0a47015.js +269 -0
  23. package/dist/cjs/post-card-control.cjs.entry.js +4 -3
  24. package/dist/cjs/post-closebutton_15.cjs.entry.js +5 -5
  25. package/dist/cjs/{post-collapsible-trigger-6601c554.js → post-collapsible-trigger-4784edb2.js} +24 -41
  26. package/dist/cjs/post-collapsible_2.cjs.entry.js +5 -5
  27. package/dist/cjs/post-components.cjs.js +2 -2
  28. package/dist/cjs/{post-footer-23699aef.js → post-footer-9d078cb1.js} +11 -11
  29. package/dist/cjs/post-footer.cjs.entry.js +4 -4
  30. package/dist/cjs/{post-linkarea-8e5e1a9f.js → post-linkarea-e4ce3960.js} +5 -5
  31. package/dist/cjs/post-linkarea.cjs.entry.js +3 -3
  32. package/dist/cjs/{post-menu-item-8dd94792.js → post-menu-item-e9ebd27a.js} +4 -4
  33. package/dist/cjs/post-popover-5db53ead.js +112 -0
  34. package/dist/cjs/post-popover.cjs.entry.js +5 -4
  35. package/dist/cjs/{post-rating-ef592484.js → post-rating-98a06828.js} +5 -15
  36. package/dist/cjs/post-rating.cjs.entry.js +3 -3
  37. package/dist/cjs/{post-tab-header-d785e7fc.js → post-tab-header-c8e92f77.js} +6 -5
  38. package/dist/cjs/post-tab-header.cjs.entry.js +4 -3
  39. package/dist/cjs/{post-tab-panel-41ea371e.js → post-tab-panel-d966ee38.js} +4 -4
  40. package/dist/cjs/post-tab-panel.cjs.entry.js +3 -3
  41. package/dist/cjs/{post-tabs-c6f00130.js → post-tabs-83d99b69.js} +5 -12
  42. package/dist/cjs/post-tabs.cjs.entry.js +4 -3
  43. package/dist/cjs/post-tag-a1d78e75.js +47 -0
  44. package/dist/cjs/post-tag.cjs.entry.js +3 -3
  45. package/dist/cjs/{post-togglebutton-02c56b7b.js → post-togglebutton-e4651aad.js} +939 -464
  46. package/dist/cjs/{post-tooltip-3176e280.js → post-tooltip-bb862241.js} +39 -296
  47. package/dist/cjs/post-tooltip.cjs.entry.js +5 -4
  48. package/dist/collection/animations/collapse.js +3 -1
  49. package/dist/collection/collection-manifest.json +1 -1
  50. package/dist/collection/components/post-accordion/post-accordion.js +1 -3
  51. package/dist/collection/components/post-accordion-item/post-accordion-item.js +0 -2
  52. package/dist/collection/components/post-avatar/post-avatar.css +1 -3
  53. package/dist/collection/components/post-avatar/post-avatar.js +3 -4
  54. package/dist/collection/components/post-back-to-top/post-back-to-top.js +6 -8
  55. package/dist/collection/components/post-banner/post-banner.css +1 -3
  56. package/dist/collection/components/post-banner/post-banner.js +0 -6
  57. package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js +0 -2
  58. package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -0
  59. package/dist/collection/components/{post-breadcrumb/post-breadcrumb.js → post-breadcrumbs/post-breadcrumbs.js} +24 -27
  60. package/dist/collection/components/post-card-control/post-card-control.css +1 -3
  61. package/dist/collection/components/post-card-control/post-card-control.js +24 -40
  62. package/dist/collection/components/post-closebutton/post-closebutton.css +1 -0
  63. package/dist/collection/components/post-closebutton/post-closebutton.js +12 -2
  64. package/dist/collection/components/post-collapsible/post-collapsible.js +4 -10
  65. package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js +15 -28
  66. package/dist/collection/components/post-footer/post-footer.js +8 -9
  67. package/dist/collection/components/post-header/post-header.css +1 -1
  68. package/dist/collection/components/post-header/post-header.js +13 -22
  69. package/dist/collection/components/post-icon/post-icon.js +4 -6
  70. package/dist/collection/components/post-language-option/post-language-option.css +1 -3
  71. package/dist/collection/components/post-language-option/post-language-option.js +1 -10
  72. package/dist/collection/components/post-language-switch/post-language-switch.js +7 -19
  73. package/dist/collection/components/post-linkarea/post-linkarea.css +1 -1
  74. package/dist/collection/components/post-linkarea/post-linkarea.js +2 -2
  75. package/dist/collection/components/post-list/post-list.css +1 -3
  76. package/dist/collection/components/post-list/post-list.js +1 -3
  77. package/dist/collection/components/post-list-item/post-list-item.js +1 -2
  78. package/dist/collection/components/post-logo/post-logo.js +1 -2
  79. package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
  80. package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +98 -182
  81. package/dist/collection/components/post-megadropdown/post-megadropdown.js +20 -30
  82. package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +36 -37
  83. package/dist/collection/components/post-menu/post-menu.css +1 -3
  84. package/dist/collection/components/post-menu/post-menu.js +47 -55
  85. package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +13 -15
  86. package/dist/collection/components/post-popover/post-popover.css +1 -3
  87. package/dist/collection/components/post-popover/post-popover.js +13 -13
  88. package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +30 -33
  89. package/dist/collection/components/post-rating/post-rating.css +1 -3
  90. package/dist/collection/components/post-rating/post-rating.js +1 -12
  91. package/dist/collection/components/post-tab-header/post-tab-header.css +1 -3
  92. package/dist/collection/components/post-tab-header/post-tab-header.js +2 -3
  93. package/dist/collection/components/post-tab-panel/post-tab-panel.js +2 -3
  94. package/dist/collection/components/post-tabs/post-tabs.js +1 -10
  95. package/dist/collection/components/post-tag/post-tag.css +1 -3
  96. package/dist/collection/components/post-tag/post-tag.js +1 -2
  97. package/dist/collection/components/post-togglebutton/post-togglebutton.js +10 -11
  98. package/dist/collection/components/post-tooltip/post-tooltip.js +37 -33
  99. package/dist/collection/index.js +1 -1
  100. package/dist/collection/utils/attribute-observer.js +2 -1
  101. package/dist/collection/utils/breakpoints.js +9 -7
  102. package/dist/collection/utils/environment.js +2 -0
  103. package/dist/collection/utils/get-root.js +6 -1
  104. package/dist/collection/utils/index.js +5 -0
  105. package/dist/collection/utils/is-motion-reduced.js +2 -1
  106. package/dist/components/attribute-observer.js +3 -1
  107. package/dist/components/breakpoints.js +12 -8
  108. package/dist/components/get-root.js +7 -1
  109. package/dist/components/index.js +1 -1
  110. package/dist/components/long-press-event.js +264 -0
  111. package/dist/components/package.js +1 -1
  112. package/dist/components/post-accordion-item2.js +3 -3
  113. package/dist/components/post-accordion2.js +3 -3
  114. package/dist/components/post-avatar2.js +5 -4
  115. package/dist/components/post-back-to-top2.js +8 -8
  116. package/dist/components/post-banner2.js +3 -7
  117. package/dist/components/post-breadcrumb-item2.js +2 -2
  118. package/dist/components/{post-breadcrumb.d.ts → post-breadcrumbs.d.ts} +4 -4
  119. package/dist/components/post-breadcrumbs.js +6 -0
  120. package/dist/components/{post-breadcrumb2.js → post-breadcrumbs2.js} +41 -33
  121. package/dist/components/post-card-control2.js +26 -40
  122. package/dist/components/post-closebutton2.js +8 -3
  123. package/dist/components/post-collapsible-trigger2.js +19 -31
  124. package/dist/components/post-collapsible2.js +9 -12
  125. package/dist/components/post-footer2.js +8 -8
  126. package/dist/components/post-header2.js +15 -23
  127. package/dist/components/post-icon2.js +5 -5
  128. package/dist/components/post-language-option2.js +4 -11
  129. package/dist/components/post-language-switch2.js +9 -18
  130. package/dist/components/post-linkarea2.js +5 -4
  131. package/dist/components/post-list-item2.js +2 -2
  132. package/dist/components/post-list2.js +3 -4
  133. package/dist/components/post-logo2.js +3 -2
  134. package/dist/components/post-mainnavigation2.js +94 -182
  135. package/dist/components/post-megadropdown-trigger2.js +38 -37
  136. package/dist/components/post-megadropdown2.js +21 -30
  137. package/dist/components/post-menu-trigger2.js +15 -15
  138. package/dist/components/post-menu2.js +50 -56
  139. package/dist/components/post-popover2.js +15 -13
  140. package/dist/components/post-popovercontainer2.js +638 -36
  141. package/dist/components/post-rating2.js +3 -13
  142. package/dist/components/post-tab-header2.js +5 -4
  143. package/dist/components/post-tab-panel2.js +3 -3
  144. package/dist/components/post-tabs2.js +3 -10
  145. package/dist/components/post-tag2.js +2 -2
  146. package/dist/components/post-togglebutton2.js +12 -11
  147. package/dist/components/post-tooltip2.js +37 -294
  148. package/dist/docs.json +107 -101
  149. package/dist/esm/{attribute-observer-2f203993.js → attribute-observer-009deee5.js} +3 -1
  150. package/dist/esm/{breakpoints-bbe0c54e.js → breakpoints-7812702e.js} +12 -8
  151. package/dist/esm/get-root-1b1af46f.js +15 -0
  152. package/dist/esm/{index-3419e46d.js → index-f4d19816.js} +4 -4
  153. package/dist/esm/index.js +24 -25
  154. package/dist/esm/loader.js +3 -3
  155. package/dist/esm/long-press-event-04d24397.js +264 -0
  156. package/dist/esm/package-791f9257.js +3 -0
  157. package/dist/esm/{post-accordion-024451fa.js → post-accordion-4de9963b.js} +5 -5
  158. package/dist/esm/{post-accordion-item-19b996d1.js → post-accordion-item-2cbb32f9.js} +5 -5
  159. package/dist/esm/post-accordion-item.entry.js +5 -4
  160. package/dist/esm/post-accordion.entry.js +4 -3
  161. package/dist/esm/{post-avatar-33aed045.js → post-avatar-0aaefe87.js} +6 -5
  162. package/dist/esm/post-avatar.entry.js +4 -3
  163. package/dist/esm/{post-back-to-top-7dd43c3b.js → post-back-to-top-24eef0a0.js} +9 -9
  164. package/dist/esm/post-back-to-top.entry.js +4 -3
  165. package/dist/esm/{post-banner-28d18721.js → post-banner-1f37f9f0.js} +5 -9
  166. package/dist/esm/post-banner.entry.js +4 -3
  167. package/dist/esm/post-breadcrumb-item_2.entry.js +4 -3
  168. package/dist/esm/{post-breadcrumb-d86fae7b.js → post-breadcrumbs-2fcccf9f.js} +39 -31
  169. package/dist/esm/post-breadcrumbs.entry.js +5 -0
  170. package/dist/esm/post-card-control-75e8d336.js +267 -0
  171. package/dist/esm/post-card-control.entry.js +4 -3
  172. package/dist/esm/post-closebutton_15.entry.js +5 -5
  173. package/dist/esm/{post-collapsible-trigger-b1612866.js → post-collapsible-trigger-08b79162.js} +24 -41
  174. package/dist/esm/post-collapsible_2.entry.js +5 -5
  175. package/dist/esm/post-components.js +3 -3
  176. package/dist/esm/{post-footer-2ed5e520.js → post-footer-01677010.js} +11 -11
  177. package/dist/esm/post-footer.entry.js +4 -4
  178. package/dist/esm/{post-linkarea-802bf774.js → post-linkarea-4a178d51.js} +5 -5
  179. package/dist/esm/post-linkarea.entry.js +3 -3
  180. package/dist/esm/{post-menu-item-d97611d8.js → post-menu-item-199477fd.js} +4 -4
  181. package/dist/esm/post-popover-2a6a13d8.js +110 -0
  182. package/dist/esm/post-popover.entry.js +5 -4
  183. package/dist/esm/{post-rating-e1ac47ce.js → post-rating-fcf24658.js} +5 -15
  184. package/dist/esm/post-rating.entry.js +3 -3
  185. package/dist/esm/{post-tab-header-06dcbf7f.js → post-tab-header-aaa2f0b8.js} +6 -5
  186. package/dist/esm/post-tab-header.entry.js +4 -3
  187. package/dist/esm/{post-tab-panel-75932601.js → post-tab-panel-91f35995.js} +4 -4
  188. package/dist/esm/post-tab-panel.entry.js +3 -3
  189. package/dist/esm/{post-tabs-3ef2ea23.js → post-tabs-8657f2d6.js} +5 -12
  190. package/dist/esm/post-tabs.entry.js +4 -3
  191. package/dist/esm/post-tag-19141551.js +45 -0
  192. package/dist/esm/post-tag.entry.js +3 -3
  193. package/dist/esm/{post-togglebutton-db251030.js → post-togglebutton-40cac8c2.js} +939 -464
  194. package/dist/esm/{post-tooltip-c256d714.js → post-tooltip-165eb353.js} +39 -296
  195. package/dist/esm/post-tooltip.entry.js +5 -4
  196. package/dist/post-components/index.esm.js +1 -1
  197. package/dist/post-components/p-01544069.js +1 -0
  198. package/dist/post-components/p-02d0c370.js +1 -0
  199. package/dist/post-components/p-03169497.js +1 -0
  200. package/dist/post-components/p-06bf6b81.entry.js +1 -0
  201. package/dist/post-components/p-0ca39161.entry.js +1 -0
  202. package/dist/post-components/p-0f398677.js +1 -0
  203. package/dist/post-components/p-10f9d25e.js +1 -0
  204. package/dist/post-components/p-15da2cf9.js +1 -0
  205. package/dist/post-components/p-1622ed8c.js +1 -0
  206. package/dist/post-components/p-1d5e275b.js +1 -0
  207. package/dist/post-components/p-2a90f66c.js +1 -0
  208. package/dist/post-components/p-32aa68ac.entry.js +1 -0
  209. package/dist/post-components/p-3d30acad.entry.js +1 -0
  210. package/dist/post-components/p-48cd3157.js +1 -0
  211. package/dist/post-components/p-56da2097.entry.js +1 -0
  212. package/dist/post-components/p-65824049.entry.js +1 -0
  213. package/dist/post-components/p-6b31a76a.js +1 -0
  214. package/dist/post-components/p-722ffaae.js +1 -0
  215. package/dist/post-components/p-7c6f4c29.js +1 -0
  216. package/dist/post-components/p-817effd4.js +1 -0
  217. package/dist/post-components/p-8579ac14.js +8 -0
  218. package/dist/post-components/p-86859a7b.entry.js +1 -0
  219. package/dist/post-components/p-8db32dab.js +8 -0
  220. package/dist/post-components/p-936682bc.entry.js +1 -0
  221. package/dist/post-components/p-9597127a.js +1 -0
  222. package/dist/post-components/p-9818ad52.entry.js +1 -0
  223. package/dist/post-components/{p-5c758f41.js → p-9e461613.js} +1 -1
  224. package/dist/post-components/p-9ec20111.js +1 -0
  225. package/dist/post-components/p-a1a39a27.js +1 -0
  226. package/dist/post-components/p-a1bae666.entry.js +1 -0
  227. package/dist/post-components/p-a27907cc.js +1 -0
  228. package/dist/post-components/p-a77a6729.entry.js +1 -0
  229. package/dist/post-components/p-ab3ab29b.js +1 -0
  230. package/dist/post-components/p-ad9ffd61.entry.js +1 -0
  231. package/dist/post-components/p-b8241188.js +1 -0
  232. package/dist/post-components/p-bece917c.js +1 -0
  233. package/dist/post-components/p-bf3c80a3.entry.js +1 -0
  234. package/dist/post-components/p-cd8aef45.entry.js +1 -0
  235. package/dist/post-components/p-cdd3a06a.entry.js +1 -0
  236. package/dist/post-components/p-dc702c39.entry.js +1 -0
  237. package/dist/post-components/p-e077239a.entry.js +1 -0
  238. package/dist/post-components/p-e653daec.entry.js +1 -0
  239. package/dist/post-components/p-e8861c07.entry.js +1 -0
  240. package/dist/post-components/p-f2478a7d.js +1 -0
  241. package/dist/post-components/post-components.esm.js +1 -1
  242. package/dist/types/components/post-avatar/post-avatar.d.ts +1 -1
  243. package/dist/types/components/{post-breadcrumb/post-breadcrumb.d.ts → post-breadcrumbs/post-breadcrumbs.d.ts} +4 -4
  244. package/dist/types/components/post-card-control/post-card-control.d.ts +1 -1
  245. package/dist/types/components/post-collapsible-trigger/post-collapsible-trigger.d.ts +4 -14
  246. package/dist/types/components/post-footer/post-footer.d.ts +2 -2
  247. package/dist/types/components/post-header/post-header.d.ts +1 -0
  248. package/dist/types/components/post-icon/post-icon.d.ts +0 -1
  249. package/dist/types/components/post-language-switch/post-language-switch.d.ts +2 -5
  250. package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts +14 -39
  251. package/dist/types/components/post-menu/post-menu.d.ts +3 -3
  252. package/dist/types/components/post-menu-trigger/post-menu-trigger.d.ts +1 -1
  253. package/dist/types/components/post-popover/post-popover.d.ts +6 -4
  254. package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +1 -1
  255. package/dist/types/components/post-tag/post-tag.d.ts +1 -1
  256. package/dist/types/components/post-tooltip/post-tooltip.d.ts +9 -4
  257. package/dist/types/components.d.ts +35 -35
  258. package/dist/types/index.d.ts +1 -1
  259. package/dist/types/popover-fn.d.ts +11 -0
  260. package/dist/types/utils/environment.d.ts +2 -0
  261. package/dist/types/utils/get-root.d.ts +4 -0
  262. package/dist/types/utils/index.d.ts +5 -0
  263. package/loaders/attribute-observer.js +3 -1
  264. package/loaders/breakpoints.js +12 -8
  265. package/loaders/get-root.js +7 -1
  266. package/loaders/index.d.ts +2 -2
  267. package/loaders/index.js +4 -4
  268. package/loaders/long-press-event.js +264 -0
  269. package/loaders/package.js +1 -1
  270. package/loaders/post-accordion-item2.js +3 -3
  271. package/loaders/post-accordion.js +3 -3
  272. package/loaders/post-avatar.js +5 -4
  273. package/loaders/post-back-to-top.js +8 -8
  274. package/loaders/post-banner.js +3 -7
  275. package/loaders/post-breadcrumb-item2.js +2 -2
  276. package/loaders/{post-breadcrumb.d.ts → post-breadcrumbs.d.ts} +4 -4
  277. package/loaders/{post-breadcrumb.js → post-breadcrumbs.js} +42 -34
  278. package/loaders/post-card-control.js +26 -40
  279. package/loaders/post-closebutton.js +8 -3
  280. package/loaders/post-collapsible-trigger2.js +19 -31
  281. package/loaders/post-collapsible2.js +9 -12
  282. package/loaders/post-footer.js +8 -8
  283. package/loaders/post-header.js +15 -23
  284. package/loaders/post-icon2.js +5 -5
  285. package/loaders/post-language-option.js +4 -11
  286. package/loaders/post-language-switch.js +9 -18
  287. package/loaders/post-linkarea.js +5 -4
  288. package/loaders/post-list-item.js +2 -2
  289. package/loaders/post-list.js +3 -4
  290. package/loaders/post-logo.js +3 -2
  291. package/loaders/post-mainnavigation.js +94 -182
  292. package/loaders/post-megadropdown-trigger.js +38 -37
  293. package/loaders/post-megadropdown.js +21 -30
  294. package/loaders/post-menu-trigger2.js +15 -15
  295. package/loaders/post-menu2.js +50 -56
  296. package/loaders/post-popover.js +15 -13
  297. package/loaders/post-popovercontainer2.js +638 -36
  298. package/loaders/post-rating.js +3 -13
  299. package/loaders/post-tab-header.js +5 -4
  300. package/loaders/post-tab-panel.js +3 -3
  301. package/loaders/post-tabs.js +3 -10
  302. package/loaders/post-tag.js +2 -2
  303. package/loaders/post-togglebutton.js +12 -11
  304. package/loaders/post-tooltip.js +37 -294
  305. package/package.json +20 -15
  306. package/dist/cjs/debounce-158fd76f.js +0 -13
  307. package/dist/cjs/get-root-7a3498ef.js +0 -11
  308. package/dist/cjs/post-breadcrumb.cjs.entry.js +0 -13
  309. package/dist/cjs/post-card-control-155fb433.js +0 -283
  310. package/dist/cjs/post-popover-858cbd12.js +0 -110
  311. package/dist/cjs/post-tag-d1a1176c.js +0 -47
  312. package/dist/collection/components/post-breadcrumb/post-breadcrumb.css +0 -3
  313. package/dist/components/debounce.js +0 -11
  314. package/dist/components/post-breadcrumb.js +0 -6
  315. package/dist/esm/debounce-e54c7131.js +0 -11
  316. package/dist/esm/get-root-7af2e0d1.js +0 -9
  317. package/dist/esm/package-da68ab5a.js +0 -3
  318. package/dist/esm/post-breadcrumb.entry.js +0 -5
  319. package/dist/esm/post-card-control-aa043898.js +0 -281
  320. package/dist/esm/post-popover-e51a7a18.js +0 -108
  321. package/dist/esm/post-tag-a3b989e0.js +0 -45
  322. package/dist/post-components/p-1376c653.js +0 -1
  323. package/dist/post-components/p-13835969.js +0 -1
  324. package/dist/post-components/p-13fdbaf6.entry.js +0 -1
  325. package/dist/post-components/p-1e2169ae.entry.js +0 -1
  326. package/dist/post-components/p-23e4c270.entry.js +0 -1
  327. package/dist/post-components/p-2641e06b.js +0 -1
  328. package/dist/post-components/p-2d3b16c7.js +0 -1
  329. package/dist/post-components/p-33c35e15.js +0 -1
  330. package/dist/post-components/p-3b247d71.entry.js +0 -1
  331. package/dist/post-components/p-42a5fdf8.js +0 -1
  332. package/dist/post-components/p-4ed7bab6.js +0 -1
  333. package/dist/post-components/p-5aeb3656.js +0 -1
  334. package/dist/post-components/p-5c518421.js +0 -1
  335. package/dist/post-components/p-6db1a2e0.entry.js +0 -1
  336. package/dist/post-components/p-6fe98184.entry.js +0 -1
  337. package/dist/post-components/p-7d731077.entry.js +0 -1
  338. package/dist/post-components/p-7ee47334.entry.js +0 -1
  339. package/dist/post-components/p-8223e97b.js +0 -1
  340. package/dist/post-components/p-8a8376d0.js +0 -1
  341. package/dist/post-components/p-8bb828cf.entry.js +0 -1
  342. package/dist/post-components/p-8e55ddd2.js +0 -1
  343. package/dist/post-components/p-9681efce.js +0 -1
  344. package/dist/post-components/p-96a59372.entry.js +0 -1
  345. package/dist/post-components/p-9748a355.js +0 -1
  346. package/dist/post-components/p-99c8fd43.entry.js +0 -1
  347. package/dist/post-components/p-ac042f7a.entry.js +0 -1
  348. package/dist/post-components/p-c34cacb7.js +0 -1
  349. package/dist/post-components/p-c3a970c5.js +0 -1
  350. package/dist/post-components/p-c4651d32.entry.js +0 -1
  351. package/dist/post-components/p-c9b61d31.entry.js +0 -1
  352. package/dist/post-components/p-d16dd7f9.js +0 -1
  353. package/dist/post-components/p-d81c5908.entry.js +0 -1
  354. package/dist/post-components/p-dbe31632.js +0 -1
  355. package/dist/post-components/p-e1baac59.js +0 -1
  356. package/dist/post-components/p-e2294014.js +0 -15
  357. package/dist/post-components/p-e8ff8122.js +0 -1
  358. package/dist/post-components/p-ed78d04a.entry.js +0 -1
  359. package/dist/post-components/p-f1c0924a.js +0 -1
  360. package/dist/post-components/p-f1db96d0.entry.js +0 -1
  361. package/dist/post-components/p-f7aa917f.entry.js +0 -1
  362. package/dist/post-components/p-f96b80cc.entry.js +0 -1
  363. package/dist/post-components/p-fc91cbc2.js +0 -1
  364. package/dist/post-components/p-fd78716d.js +0 -1
  365. package/loaders/debounce.js +0 -11
@@ -21,7 +21,6 @@ export class PostBanner {
21
21
  this.icon = undefined;
22
22
  this.type = 'neutral';
23
23
  }
24
- host;
25
24
  validateDismissible() {
26
25
  checkType(this, 'dismissible', 'boolean');
27
26
  setTimeout(() => this.validateDismissLabel());
@@ -37,11 +36,6 @@ export class PostBanner {
37
36
  validateType() {
38
37
  checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
39
38
  }
40
- /**
41
- * An event emitted when the banner element is dismissed, after the transition.
42
- * It has no payload and only relevant for dismissible banners.
43
- */
44
- postDismissed;
45
39
  componentDidLoad() {
46
40
  this.validateDismissible();
47
41
  this.validateIcon();
@@ -9,8 +9,6 @@ export class PostBreadcrumbItem {
9
9
  this.url = undefined;
10
10
  this.fullUrl = undefined;
11
11
  }
12
- host;
13
- validUrl;
14
12
  validateUrl() {
15
13
  try {
16
14
  this.validUrl = this.constructUrl(this.url);
@@ -0,0 +1 @@
1
+ :host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{gap:var(--post-device-spacing-gap-inline-4);position:absolute;height:0;overflow:hidden;white-space:nowrap}.breadcrumbs-list{display:flex;flex-wrap:nowrap;position:relative;margin:0;padding:0;list-style:none;align-items:center;height:100%;gap:var(--post-device-spacing-gap-inline-4)}post-icon{display:inline-block;box-sizing:border-box;color:var(--post-scheme-color-interactive-primary-enabled-fg1);height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item-icon{padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}li a{display:flex;align-items:center}li a{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}li a: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){li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){li a: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){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}li a:focus{border-radius:var(--post-device-border-radius-focus)}li a .home-icon{padding-block:var(--post-device-spacing-padding-4);padding-inline:var(--post-device-spacing-padding-4)}li a .home-icon:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a .home-icon a,li a .home-icon:focus,li a .home-icon:hover{color:CanvasText !important}}.menu-trigger-wrapper{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.actual-menu{display:flex;align-items:center}post-menu-trigger{display:flex;align-items:center;padding-block:var(--post-device-spacing-padding-block-7)}post-menu-trigger{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}post-menu-trigger: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){post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-trigger: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){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-menu-trigger:focus{border-radius:var(--post-device-border-radius-focus)}post-menu-trigger button{background:none;border:none;line-height:150%;font-size:var(--post-device-font-size-6);cursor:pointer;padding:0;color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-menu-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger button a,post-menu-trigger button:focus,post-menu-trigger button:hover{color:LinkText !important}}post-menu::part(popover-container){display:flex;flex-direction:column;align-items:start;padding:.6rem;gap:var(--post-device-spacing-gap-inline-4)}post-menu::part(popover-container) ::slotted(post-menu-item:not(:last-child)){margin-block-end:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;justify-content:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item a{text-decoration:none;color:var(--post-scheme-color-surface-default-fg);line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);font-size:var(--post-device-font-size-6)}.breadcrumb-item a{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}.breadcrumb-item a: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){.breadcrumb-item a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item a: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){.breadcrumb-item a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item a:focus-visible{border-radius:var(--post-device-border-radius-focus)}.breadcrumb-item span:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item span:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}post-breadcrumb-item:last-of-type{pointer-events:none;color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}post-breadcrumb-item:last-of-type:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.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,17 +1,30 @@
1
1
  import { h, Host } from "@stencil/core";
2
2
  import { version } from "../../../../package";
3
3
  import { checkUrl, debounce } from "../../utils/index";
4
- export class PostBreadcrumb {
4
+ export class PostBreadcrumbs {
5
5
  constructor() {
6
+ // Waits for breadcrumbs navigation reference to be available
7
+ this.waitForBreadcrumbsRef = debounce(() => {
8
+ if (this.breadcrumbsNavRef?.clientWidth > 0) {
9
+ this.checkConcatenation();
10
+ }
11
+ else {
12
+ this.waitForBreadcrumbsRef();
13
+ }
14
+ }, 50);
15
+ // Handles resizing to check concatenation
16
+ this.handleResize = () => {
17
+ if (window.innerWidth === this.lastWindowWidth)
18
+ return;
19
+ this.lastWindowWidth = window.innerWidth;
20
+ this.checkConcatenation();
21
+ };
6
22
  this.homeUrl = undefined;
7
23
  this.homeText = 'Home';
8
24
  this.breadcrumbItems = [];
9
25
  this.isConcatenated = undefined;
10
26
  this.lastWindowWidth = undefined;
11
27
  }
12
- host;
13
- breadcrumbNavRef;
14
- lastItem;
15
28
  validateUrl() {
16
29
  checkUrl(this, 'homeUrl');
17
30
  }
@@ -20,20 +33,11 @@ export class PostBreadcrumb {
20
33
  }
21
34
  componentDidLoad() {
22
35
  window.addEventListener('resize', this.handleResize);
23
- this.waitForBreadcrumbRef();
36
+ this.waitForBreadcrumbsRef();
24
37
  }
25
38
  disconnectedCallback() {
26
39
  window.removeEventListener('resize', this.handleResize);
27
40
  }
28
- // Waits for breadcrumb navigation reference to be available
29
- waitForBreadcrumbRef = debounce(() => {
30
- if (this.breadcrumbNavRef?.clientWidth > 0) {
31
- this.checkConcatenation();
32
- }
33
- else {
34
- this.waitForBreadcrumbRef();
35
- }
36
- }, 50);
37
41
  // Updates breadcrumb items and sets the last item
38
42
  updateBreadcrumbItems() {
39
43
  this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
@@ -42,13 +46,6 @@ export class PostBreadcrumb {
42
46
  }));
43
47
  this.lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
44
48
  }
45
- // Handles resizing to check concatenation
46
- handleResize = () => {
47
- if (window.innerWidth === this.lastWindowWidth)
48
- return;
49
- this.lastWindowWidth = window.innerWidth;
50
- this.checkConcatenation();
51
- };
52
49
  // Determines parent width for concatenation logic
53
50
  getParentWidth() {
54
51
  let parent = this.host.parentNode;
@@ -58,7 +55,7 @@ export class PostBreadcrumb {
58
55
  return parent instanceof HTMLElement ? parent.clientWidth : window.innerWidth;
59
56
  }
60
57
  checkConcatenation() {
61
- if (!this.breadcrumbNavRef)
58
+ if (!this.breadcrumbsNavRef)
62
59
  return;
63
60
  const visibleWidth = this.getParentWidth();
64
61
  // Measure all hidden breadcrumb items
@@ -82,7 +79,7 @@ export class PostBreadcrumb {
82
79
  }
83
80
  render() {
84
81
  const visibleItems = this.breadcrumbItems.slice(0, -1);
85
- return (h(Host, { key: 'd2fd5b6f8319124fa17649c8c5e479e727fc069a', "data-version": version }, h("nav", { key: 'a5f9b38fa054ad46d8972c28d175f864bed3c365', "aria-label": "Breadcrumb", class: "breadcrumbs-nav", ref: el => (this.breadcrumbNavRef = el) }, h("ol", { key: 'ac7ca9a80315ce6ba70e1aaaae6202fbb1a6933e', class: "no-list breadcrumbs-list" }, h("li", { key: '9927b293673f16bbe837419baf7d4a8f97885bc0' }, h("a", { key: '2b2de9924472a3da00f843c7b569358b60d43539', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '540a16d9673e9c423493597468a3db00b7d75cef', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '73fad27cd72f18bb5ea281c88ff2c184d7d8187d', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
82
+ return (h(Host, { key: 'f0c2507a02ea79059af1e4dfefce17ab04780fbe', "data-version": version }, h("nav", { key: '0307206eecadfa5a47ba88f9c17c72b88d26be5c', "aria-label": "Breadcrumbs", class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '646809f73775f8cd74b6b97c21b7055569fa5f4c', class: "no-list breadcrumbs-list" }, h("li", { key: '15bd467366517f0b9a11e54dfdffc13a0b681f3c' }, h("a", { key: 'd05e860d2de60b740b77120f0745752ff1ec1d17', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '3241f72e9fdc82e1521762d2fc47a6472366f722', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '2cdfdb5641b1ba459070b724e6578b842b8d90ae', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
86
83
  if (e.key === 'Enter' || e.key === ' ') {
87
84
  e.preventDefault();
88
85
  this.handleBreadcrumbItemClick();
@@ -93,18 +90,18 @@ export class PostBreadcrumb {
93
90
  linkElement?.click();
94
91
  e.preventDefault();
95
92
  }
96
- } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '31d86d933720b5f6f6928ccfd251443261e9479e', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '3248d32aa6a73c97c3071be85174fb8634d4e722', class: "hidden-items" }, h("a", { key: '05b0231d3a5793588aa9ede628a7b1e6d2e2faf0', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '15a63a894124717cfb2be61779c3971772c38397', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '6c893c56b6a34f311fa66d71c4cb523b00535458', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
93
+ } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '9820e7cc99072f16f9118e3783de126b1c65c51c', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '960f5784f11bd87e787722bd888cf91ec65329e1', class: "hidden-items" }, h("a", { key: '73dfb29ff5b45c6e3fe9a8f88abfde56fc9bb5e3', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'bf6be08c70fca37879312b2adbf2808d83599cf3', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '8c94c725dc315ac31187e079cb01def2891ac352', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
97
94
  }
98
- static get is() { return "post-breadcrumb"; }
95
+ static get is() { return "post-breadcrumbs"; }
99
96
  static get encapsulation() { return "shadow"; }
100
97
  static get originalStyleUrls() {
101
98
  return {
102
- "$": ["post-breadcrumb.scss"]
99
+ "$": ["post-breadcrumbs.scss"]
103
100
  };
104
101
  }
105
102
  static get styleUrls() {
106
103
  return {
107
- "$": ["post-breadcrumb.css"]
104
+ "$": ["post-breadcrumbs.css"]
108
105
  };
109
106
  }
110
107
  static get properties() {
@@ -1,3 +1 @@
1
- /*!
2
- * Copyright 2021 by Swiss Post, Information Technology
3
- */.form-check{display:flex;flex-wrap:wrap;align-items:flex-start;width:fit-content;border-radius:var(--post-device-border-radius-focus)}.form-check-inline{display:inline-flex;vertical-align:top}fieldset>.form-check-inline:not(:last-of-type){margin-right:var(--post-core-dimension-24)}.form-check:has(>input:not(:only-child)){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}.form-check:has(>input:not(:only-child)):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){.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-check:has(>input:not(:only-child)):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){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:has(>input:not(:only-child))>input{outline:none !important}.form-check:has(input[type=checkbox]):not(.form-switch){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=checkbox]):not(.form-switch):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:GrayText}}.form-check.form-switch>input[type=checkbox]~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check.form-switch>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check.form-switch>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox][disabled]~label{color:GrayText}}.form-check:has(input[type=radio]){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=radio]):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=radio])>input[type=radio]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=radio])>input[type=radio]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:GrayText}}.form-check>label{transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);flex:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>label{transition:none}}:where(.form-check>input[type=checkbox]){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}:where(.form-check>input[type=checkbox]):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){:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=checkbox]):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){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:not(.form-switch):has(input[type=checkbox])>input{appearance:none;flex:none;display:inline-flex;margin:var(--post-device-spacing-padding-1);margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-core-dimension-2);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]){cursor:pointer}.form-check:not(.form-switch):has(input[type=checkbox])>input::after{display:block;content:"";width:100%;height:100%;mask-size:var(--post-device-sizing-interactive-icon-size);mask-repeat:no-repeat;mask-position:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate{background-color:SelectedItem}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:SelectedItemText}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:indeterminate::after{background-color:Highlight}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after{mask-image:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{mask-image:url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:Field;border-color:GrayText}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:indeterminate::after{background-color:GrayText}}:where(.form-check>input[type=radio]){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}:where(.form-check>input[type=radio]):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){:where(.form-check>input[type=radio]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=radio]):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){:where(.form-check>input[type=radio]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check>input[type=radio]{appearance:none;flex:none;display:inline-flex;justify-content:center;align-items:center;margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));margin-inline:var(--post-device-spacing-padding-1);width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-device-border-radius-round);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check>input[type=radio]:not([disabled]){cursor:pointer}.form-check>input[type=radio]::after{display:block;content:"";width:var(--post-device-sizing-icon-3);height:var(--post-device-sizing-icon-3);border-radius:inherit}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked{background-color:SelectedItem}.form-check>input[type=radio]:checked::after{background-color:SelectedItemText !important}}.form-check>input[type=radio]:checked::after{background-color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked::after{background-color:FieldText}}.form-check>input[type=radio]:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:Highlight !important}}.form-check>input[type=radio][disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}.form-check>input[type=radio][disabled]:checked::after{background-color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio][disabled]{background-color:Field;border-color:GrayText}.form-check>input[type=radio][disabled]:checked::after{background-color:GrayText}}:host{--post-card-control-bg-context: .bg-yellow, .bg-white, .bg-light, .bg-gray, .bg-warning, .bg-info, .bg-success-background, .bg-warning-background, .bg-error-background, .bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-error;display:flex;width:100%}:host-context(fieldset):host(:not(:last-child)) .card-control{margin-block-end:var(--post-core-dimension-16)}.card-control{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: #fff;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff;flex-basis:100%;display:grid;grid-template:"input label icon" "input content content"/min-content auto min-content;align-items:center;gap:0 var(--post-core-dimension-8);margin:0;padding:var(--post-core-dimension-12);background-color:var(--post-card-control-bg);border:var(--post-core-dimension-2) solid var(--post-card-control-border-color);border-radius:4px;color:var(--post-card-control-color) !important;cursor:pointer}.card-control .card-control--input{grid-area:input;margin:var(--post-core-dimension-4) 0;background-color:var(--post-card-control-input-bg) !important;border-color:var(--post-card-control-input-border-color) !important;color:var(--post-card-control-input-border-color) !important;cursor:inherit;transition:none;outline:none !important}.card-control .card-control--input:hover:not([disabled]),.card-control .card-control--input:hover:not([disabled])~label.form-check-label{color:#000;background-color:rgba(0,0,0,0)}.card-control .card-control--input:focus,.card-control .card-control--input:focus-visible{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control .card-control--input::after{forced-color-adjust:none;border-color:rgba(0,0,0,0)}}.card-control .card-control--label{grid-area:label;margin:var(--post-core-dimension-4) 0;padding:0 !important;color:var(--post-scheme-color-surface-default-fg) !important;pointer-events:none;transition:none}.card-control .card-control--label:not(:has(+.card-control--icon)){grid-area:1/label/1/icon}.card-control .card-control--description{grid-area:label;font-size:.75rem}.card-control .card-control--content{grid-area:content}.card-control .card-control--icon{grid-area:icon;width:var(--post-core-dimension-32);height:var(--post-core-dimension-32);pointer-events:none}.card-control .card-control--icon>slot>*{width:100%;height:100%}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #000;--post-card-control-bg: #fc0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: SelectedItemText;--post-card-control-input-bg: SelectedItem}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:var(--post-card-control-color) !important}}.card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728}.card-control:not(.is-disabled):hover{--post-card-control-border-color: hsl(0, 0%, 20%);--post-card-control-bg: hsl(0, 0%, 40%);--post-card-control-color: #fff;--post-card-control-input-border-color: #000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}.card-control:not(.is-disabled):hover .card-control--input::after{color:FieldText}}.card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.card-control.is-disabled{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: transparent;--post-card-control-color: hsl(0, 0%, 40%);--post-card-control-input-border-color: hsl(0, 0%, 40%);--post-card-control-input-bg: transparent;border-style:dashed;cursor:default}.card-control.is-disabled .card-control--input{padding:2px;border-style:dashed}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field;outline:var(--post-core-dimension-2) solid Field;outline-offset:calc(var(--post-core-dimension-2)*-2)}.card-control .card-control--input{outline:var(--post-core-dimension-2) solid Field}.card-control .card-control--input[type]{background-color:Field !important}.card-control .card-control--input::after{border-color:Field !important}.card-control .card-control--label,.card-control .card-control--content{background-color:var(--post-card-control-bg) !important}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:FieldText !important}.card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.card-control.is-disabled .card-control--input{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='88' /%3e%3c/svg%3e")}.card-control.is-disabled .card-control--input[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' rx='100' ry='100' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='4 2' /%3e%3c/svg%3e")}.card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;position:relative;background-color:Field}.card-control.is-disabled.is-checked::before{display:block;content:"";position:absolute;inset:var(--post-core-dimension-2);background-color:SelectedItem;z-index:1}.card-control.is-disabled.is-checked>*{position:relative;z-index:2}.card-control.is-disabled.is-checked .card-control--input::after{background-color:FieldText !important}}@media(forced-colors: active)and (forced-colors: active),(forced-colors: active)and (-ms-high-contrast: active),(forced-colors: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: active)and (forced-colors: active),(-ms-high-contrast: active)and (-ms-high-contrast: active),(-ms-high-contrast: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: white-on-black)and (forced-colors: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}.card-control.is-checked{--post-card-control-input-bg: field;position:relative}.card-control.is-checked::before{display:block;content:"";position:absolute;inset:var(--post-core-dimension-2);border-radius:calc(var(--post-core-dimension-2)*.5);background-color:SelectedItem}.card-control.is-checked>*{position:relative}.card-control.is-checked .card-control--input{outline:var(--post-core-dimension-2) solid Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg: #fc0}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: post.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: post.$white-alpha-80;--post-card-control-input-border-color: post.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-input-bg: Field}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}:host(:not([data-context])){display:none}:host([data-context*=fieldset]:not(:last-child)) .card-control{margin-block-end:var(--post-core-dimension-16)}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg: #fc0}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: post.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: post.$white-alpha-80;--post-card-control-input-border-color: post.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled.is-checked{--post-card-control-input-bg: Field}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}
1
+ .form-check{display:flex;flex-wrap:wrap;align-items:flex-start;width:fit-content;border-radius:var(--post-device-border-radius-focus)}.form-check-inline{display:inline-flex;vertical-align:top}fieldset>.form-check-inline:not(:last-of-type){margin-right:var(--post-core-dimension-24)}.form-check:has(>input:not(:only-child)){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}.form-check:has(>input:not(:only-child)):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){.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-check:has(>input:not(:only-child)):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){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:has(>input:not(:only-child))>input{outline:none !important}.form-check:has(input[type=checkbox]):not(.form-switch){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=checkbox]):not(.form-switch):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:GrayText}}.form-check.form-switch>input[type=checkbox]~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check.form-switch>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check.form-switch>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox][disabled]~label{color:GrayText}}.form-check:has(input[type=radio]){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=radio]):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=radio])>input[type=radio]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=radio])>input[type=radio]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:GrayText}}.form-check>label{transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);flex:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>label{transition:none}}:where(.form-check>input[type=checkbox]){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}:where(.form-check>input[type=checkbox]):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){:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=checkbox]):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){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:not(.form-switch):has(input[type=checkbox])>input{appearance:none;flex:none;display:inline-flex;margin:var(--post-device-spacing-padding-1);margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-core-dimension-2);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]){cursor:pointer}.form-check:not(.form-switch):has(input[type=checkbox])>input::after{display:block;content:"";width:100%;height:100%;mask-size:var(--post-device-sizing-interactive-icon-size);mask-repeat:no-repeat;mask-position:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate{background-color:SelectedItem}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:SelectedItemText}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:indeterminate::after{background-color:Highlight}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after{mask-image:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{mask-image:url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:Field;border-color:GrayText}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:indeterminate::after{background-color:GrayText}}:where(.form-check>input[type=radio]){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}:where(.form-check>input[type=radio]):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){:where(.form-check>input[type=radio]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=radio]):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){:where(.form-check>input[type=radio]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check>input[type=radio]{appearance:none;flex:none;display:inline-flex;justify-content:center;align-items:center;margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));margin-inline:var(--post-device-spacing-padding-1);width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-device-border-radius-round);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check>input[type=radio]:not([disabled]){cursor:pointer}.form-check>input[type=radio]::after{display:block;content:"";width:var(--post-device-sizing-icon-3);height:var(--post-device-sizing-icon-3);border-radius:inherit}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked{background-color:SelectedItem}.form-check>input[type=radio]:checked::after{background-color:SelectedItemText !important}}.form-check>input[type=radio]:checked::after{background-color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked::after{background-color:FieldText}}.form-check>input[type=radio]:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:Highlight !important}}.form-check>input[type=radio][disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}.form-check>input[type=radio][disabled]:checked::after{background-color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio][disabled]{background-color:Field;border-color:GrayText}.form-check>input[type=radio][disabled]:checked::after{background-color:GrayText}}:host{--post-card-control-bg-context: .bg-yellow, .bg-white, .bg-light, .bg-gray, .bg-warning, .bg-info, .bg-success-background, .bg-warning-background, .bg-error-background, .bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-error;display:flex;width:100%}:host-context(fieldset):host(:not(:last-child)) .card-control{margin-block-end:var(--post-core-dimension-16)}.card-control{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: #fff;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff;flex-basis:100%;display:grid;grid-template:"input label icon" "input content content"/min-content auto min-content;align-items:center;gap:0 var(--post-core-dimension-8);margin:0;padding:var(--post-core-dimension-12);background-color:var(--post-card-control-bg);border:var(--post-core-dimension-2) solid var(--post-card-control-border-color);border-radius:4px;color:var(--post-card-control-color) !important;cursor:pointer}.card-control .card-control--input{grid-area:input;margin:var(--post-core-dimension-4) 0;background-color:var(--post-card-control-input-bg) !important;border-color:var(--post-card-control-input-border-color) !important;color:var(--post-card-control-input-border-color) !important;cursor:inherit;transition:none;outline:none !important}.card-control .card-control--input:hover:not([disabled]),.card-control .card-control--input:hover:not([disabled])~label.form-check-label{color:#000;background-color:rgba(0,0,0,0)}.card-control .card-control--input:focus,.card-control .card-control--input:focus-visible{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control .card-control--input::after{forced-color-adjust:none;border-color:rgba(0,0,0,0)}}.card-control .card-control--label{grid-area:label;margin:var(--post-core-dimension-4) 0;padding:0 !important;color:var(--post-scheme-color-surface-default-fg) !important;pointer-events:none;transition:none}.card-control .card-control--label:not(:has(+.card-control--icon)){grid-area:1/label/1/icon}.card-control .card-control--description{grid-area:label;font-size:.75rem}.card-control .card-control--content{grid-area:content}.card-control .card-control--icon{grid-area:icon;width:var(--post-core-dimension-32);height:var(--post-core-dimension-32);pointer-events:none}.card-control .card-control--icon>slot>*{width:100%;height:100%}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #000;--post-card-control-bg: #fc0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: SelectedItemText;--post-card-control-input-bg: SelectedItem}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:var(--post-card-control-color) !important}}.card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728}.card-control:not(.is-disabled):hover{--post-card-control-border-color: hsl(0, 0%, 20%);--post-card-control-bg: hsl(0, 0%, 40%);--post-card-control-color: #fff;--post-card-control-input-border-color: #000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}.card-control:not(.is-disabled):hover .card-control--input::after{color:FieldText}}.card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.card-control.is-disabled{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: transparent;--post-card-control-color: hsl(0, 0%, 40%);--post-card-control-input-border-color: hsl(0, 0%, 40%);--post-card-control-input-bg: transparent;border-style:dashed;cursor:default}.card-control.is-disabled .card-control--input{padding:2px;border-style:dashed}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field;outline:var(--post-core-dimension-2) solid Field;outline-offset:calc(var(--post-core-dimension-2)*-2)}.card-control .card-control--input{outline:var(--post-core-dimension-2) solid Field}.card-control .card-control--input[type]{background-color:Field !important}.card-control .card-control--input::after{border-color:Field !important}.card-control .card-control--label,.card-control .card-control--content{background-color:var(--post-card-control-bg) !important}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:FieldText !important}.card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.card-control.is-disabled .card-control--input{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='88' /%3e%3c/svg%3e")}.card-control.is-disabled .card-control--input[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' rx='100' ry='100' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='4 2' /%3e%3c/svg%3e")}.card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;position:relative;background-color:Field}.card-control.is-disabled.is-checked::before{display:block;content:"";position:absolute;inset:var(--post-core-dimension-2);background-color:SelectedItem;z-index:1}.card-control.is-disabled.is-checked>*{position:relative;z-index:2}.card-control.is-disabled.is-checked .card-control--input::after{background-color:FieldText !important}}@media(forced-colors: active)and (forced-colors: active),(forced-colors: active)and (-ms-high-contrast: active),(forced-colors: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: active)and (forced-colors: active),(-ms-high-contrast: active)and (-ms-high-contrast: active),(-ms-high-contrast: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: white-on-black)and (forced-colors: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}.card-control.is-checked{--post-card-control-input-bg: field;position:relative}.card-control.is-checked::before{display:block;content:"";position:absolute;inset:var(--post-core-dimension-2);border-radius:calc(var(--post-core-dimension-2)*.5);background-color:SelectedItem}.card-control.is-checked>*{position:relative}.card-control.is-checked .card-control--input{outline:var(--post-core-dimension-2) solid Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg: #fc0}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: post.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: post.$white-alpha-80;--post-card-control-input-border-color: post.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-input-bg: Field}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}:host(:not([data-context])){display:none}:host([data-context*=fieldset]:not(:last-child)) .card-control{margin-block-end:var(--post-core-dimension-16)}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg: #fc0}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: post.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: post.$white-alpha-80;--post-card-control-input-border-color: post.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled.is-checked{--post-card-control-input-bg: Field}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}
@@ -9,42 +9,6 @@ let cardControlIds = 0;
9
9
  * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<p className="banner banner-sm banner-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
10
10
  */
11
11
  export class PostCardControl {
12
- EVENT_MAP = {
13
- input: 'postInput',
14
- change: 'postChange',
15
- };
16
- KEYCODES = {
17
- SPACE: 'Space',
18
- LEFT: 'ArrowLeft',
19
- UP: 'ArrowUp',
20
- RIGHT: 'ArrowRight',
21
- DOWN: 'ArrowDown',
22
- };
23
- group = {
24
- hosts: [],
25
- members: [],
26
- first: null,
27
- last: null,
28
- checked: null,
29
- focused: null,
30
- };
31
- control;
32
- controlId = `PostCardControl_${cardControlIds++}`;
33
- initialChecked;
34
- hasIcon;
35
- host;
36
- internals;
37
- /**
38
- * An event emitted whenever the components checked state is toggled.
39
- * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
40
- */
41
- postInput;
42
- /**
43
- * An event emitted whenever the components checked state is toggled.
44
- * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
45
- * <span className="banner banner-sm banner-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
46
- */
47
- postChange;
48
12
  /**
49
13
  * A public method to reset the controls `checked` and `validity` state.
50
14
  * The validity state is set to `null`, so it's neither valid nor invalid.
@@ -74,6 +38,26 @@ export class PostCardControl {
74
38
  this.controlSetChecked(this.checked);
75
39
  }
76
40
  constructor() {
41
+ this.EVENT_MAP = {
42
+ input: 'postInput',
43
+ change: 'postChange',
44
+ };
45
+ this.KEYCODES = {
46
+ SPACE: 'Space',
47
+ LEFT: 'ArrowLeft',
48
+ UP: 'ArrowUp',
49
+ RIGHT: 'ArrowRight',
50
+ DOWN: 'ArrowDown',
51
+ };
52
+ this.group = {
53
+ hosts: [],
54
+ members: [],
55
+ first: null,
56
+ last: null,
57
+ checked: null,
58
+ focused: null,
59
+ };
60
+ this.controlId = `PostCardControl_${cardControlIds++}`;
77
61
  this.focused = false;
78
62
  this.label = undefined;
79
63
  this.description = null;
@@ -232,14 +216,14 @@ export class PostCardControl {
232
216
  this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
233
217
  }
234
218
  render() {
235
- return (h(Host, { key: '6d243226748befc5cdc25f567672859700b04825', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '0e974eed3c642ca13fa86883c27c0c1e6344d7fd', class: {
219
+ return (h(Host, { key: '9172642a4424a3393c0738feba3a3ef8dcea43e8', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'd6e47613dfe9d33647fd2379010275d70cbcbdcb', class: {
236
220
  'card-control': true,
237
221
  'is-checked': this.checked,
238
222
  'is-disabled': this.disabled,
239
223
  'is-focused': this.focused,
240
224
  'is-valid': this.validity !== null && this.validity !== 'false',
241
225
  'is-invalid': this.validity === 'false',
242
- } }, h("input", { key: 'bd2a44b835eef5ad2927b3d39721e430deccaf9d', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === 'false', onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: 'a05fc353909de0be2cde8c306bfdc6e7248a59bf', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: '348dc3bea78771041ad19530c7265fba2ea189dd', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '7e6198e8e3ec1d2aec677be55c5fe8828198e9d7' })))));
226
+ } }, h("input", { key: '44b0e5d5c2c6a759300979a5c33c2a65afaaa27d', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === 'false', onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: 'fd3106562bfcb5ca0e7e5704272f927bfb201af5', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: 'ebfa245a0e2b6e45384586408614ce85494fbc58', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '99b406bc58fbfcd054f1b551a453a7ac1f4276f6' })))));
243
227
  }
244
228
  componentDidRender() {
245
229
  this.setHostContext();
@@ -291,7 +275,7 @@ export class PostCardControl {
291
275
  "text": "Defines the text in the control-label."
292
276
  },
293
277
  "attribute": "label",
294
- "reflect": false
278
+ "reflect": true
295
279
  },
296
280
  "description": {
297
281
  "type": "string",
@@ -340,7 +324,7 @@ export class PostCardControl {
340
324
  "optional": false,
341
325
  "docs": {
342
326
  "tags": [],
343
- "text": "Defines the `name` attribute of the control.\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
327
+ "text": "Defines the `name` attribute of the control.\n<span className=\"mb-4 banner banner-sm banner-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
344
328
  },
345
329
  "attribute": "name",
346
330
  "reflect": false,
@@ -0,0 +1 @@
1
+ .btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
@@ -4,10 +4,20 @@ import { version } from "../../../../package";
4
4
  * @slot default - Slot for placing visually hidden label in the close button.
5
5
  */
6
6
  export class PostClosebutton {
7
- host;
8
7
  render() {
9
- return (h(Host, { key: 'c03f50379252ba13992bc3d021989ac07dba9f79', "data-version": version }, h("button", { key: 'e97a86bb6e1eace89a1a3a78fb231047f065dd5e', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'aca522d4c251a8183c91c2bd4d810d0716a2fe13', "aria-hidden": "true", name: "closex" }), h("span", { key: '6873522961b1683d1261163b07ee022f93eed836', class: "visually-hidden" }, h("slot", { key: 'bf4b13356c9a0164f1481d1fedc3a78a53e5f8e0' })))));
8
+ return (h(Host, { key: 'cfa55f799fdf9ad0f3ac1eb296e063b5001de997', "data-version": version }, h("button", { key: '7c8a084f6d7278329ddfb5fc4b2b8f992a185666', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'fc74ccb4f0c4c091a02a41cdef918d6c3b065c8c', "aria-hidden": "true", name: "closex" }), h("span", { key: '98478b013714df6d82c6c2f533ac8ecd2abae778', class: "visually-hidden" }, h("slot", { key: '109e2bca4436986dd037d8c29088cc79395bc200' })))));
10
9
  }
11
10
  static get is() { return "post-closebutton"; }
11
+ static get encapsulation() { return "shadow"; }
12
+ static get originalStyleUrls() {
13
+ return {
14
+ "$": ["post-closebutton.scss"]
15
+ };
16
+ }
17
+ static get styleUrls() {
18
+ return {
19
+ "$": ["post-closebutton.css"]
20
+ };
21
+ }
12
22
  static get elementRef() { return "host"; }
13
23
  }
@@ -7,21 +7,14 @@ import { checkEmptyOrType, isMotionReduced } from "../../utils/index";
7
7
  */
8
8
  export class PostCollapsible {
9
9
  constructor() {
10
+ this.isLoaded = false;
11
+ this.isOpen = true;
10
12
  this.collapsed = false;
11
13
  }
12
- isLoaded = false;
13
- isOpen = true;
14
- host;
15
14
  collapsedChange() {
16
15
  checkEmptyOrType(this, 'collapsed', 'boolean');
17
16
  void this.toggle(!this.collapsed);
18
17
  }
19
- /**
20
- * An event emitted when the collapse element is shown or hidden, before the transition.
21
- *
22
- * The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
23
- */
24
- postToggle;
25
18
  componentDidLoad() {
26
19
  this.collapsedChange();
27
20
  this.isLoaded = true;
@@ -46,6 +39,7 @@ export class PostCollapsible {
46
39
  const isHostRendered = this.host.offsetParent;
47
40
  if (isHostRendered)
48
41
  animation.commitStyles();
42
+ this.updateTriggers();
49
43
  return open;
50
44
  }
51
45
  /**
@@ -56,7 +50,7 @@ export class PostCollapsible {
56
50
  triggers.forEach(trigger => trigger.update());
57
51
  }
58
52
  render() {
59
- return (h(Host, { key: 'a43e25138933a758759b4adcca249757db75cc4b', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '2936f71a6fb3ddedda372e8da4a19dbceecaefa6' })));
53
+ return (h(Host, { key: 'a678bc639dfd7686d8e1bd57ca0f09984a24ab61', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: 'e0b88ac152fa09314b4bc01c9abdb11480e2cb4d' })));
60
54
  }
61
55
  static get is() { return "post-collapsible"; }
62
56
  static get encapsulation() { return "shadow"; }
@@ -1,21 +1,17 @@
1
+ import { h, Host } from "@stencil/core";
1
2
  import { version } from "../../../../package";
2
- import { checkNonEmpty, checkType, debounce, getRoot } from "../../utils/index";
3
- import { eventGuard } from "../../utils/event-gua";
3
+ import { checkNonEmpty, checkType, eventGuard, getRoot } from "../../utils/index";
4
4
  export class PostCollapsibleTrigger {
5
5
  constructor() {
6
+ this.observer = new MutationObserver(() => this.setTrigger());
6
7
  this.for = undefined;
7
8
  }
8
- trigger;
9
- observer = new MutationObserver(() => this.setTrigger());
10
- root;
11
- host;
12
9
  /**
13
10
  * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
14
11
  */
15
- setAriaAttributes() {
12
+ validateAriaAttributes() {
16
13
  checkNonEmpty(this, 'for');
17
14
  checkType(this, 'for', 'string', 'The post-collapsible-trigger "for" prop should be a id.');
18
- void this.update();
19
15
  }
20
16
  /**
21
17
  * Initiate a mutation observer that updates the trigger whenever necessary
@@ -25,25 +21,12 @@ export class PostCollapsibleTrigger {
25
21
  this.root.addEventListener('postToggle', this.handlePostToggle);
26
22
  this.observer.observe(this.host, { childList: true, subtree: true });
27
23
  }
28
- /**
29
- * Attach a "postToggle" event listener to the root node
30
- * to update the trigger's "aria-expanded" attribute whenever the controlled post-collapsible is toggled
31
- */
32
- componentWillLoad() {
33
- this.root = getRoot(this.host);
34
- }
35
- /**
36
- * Add the "data-version" to the host element and set the trigger
37
- */
38
24
  componentDidLoad() {
39
- this.host.setAttribute('data-version', version);
40
25
  this.setTrigger();
41
26
  if (!this.trigger)
42
27
  console.warn('The post-collapsible-trigger must contain a button.');
28
+ this.validateAriaAttributes();
43
29
  }
44
- /**
45
- * Disconnect the mutation observer
46
- */
47
30
  disconnectedCallback() {
48
31
  this.observer.disconnect();
49
32
  this.root.removeEventListener('postToggle', this.handlePostToggle);
@@ -52,7 +35,7 @@ export class PostCollapsibleTrigger {
52
35
  * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
53
36
  */
54
37
  async update() {
55
- this.debouncedUpdate();
38
+ this.updateAriaAttributes();
56
39
  }
57
40
  /**
58
41
  * Private handler for the 'postToggle' event.
@@ -65,7 +48,7 @@ export class PostCollapsibleTrigger {
65
48
  }
66
49
  });
67
50
  }
68
- debouncedUpdate = debounce(() => {
51
+ updateAriaAttributes() {
69
52
  if (!this.trigger)
70
53
  return;
71
54
  // add the provided id to the aria-controls list
@@ -78,7 +61,7 @@ export class PostCollapsibleTrigger {
78
61
  const isCollapsed = this.collapsible?.collapsed;
79
62
  const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
80
63
  this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
81
- });
64
+ }
82
65
  /**
83
66
  * Toggle the post-collapsible controlled by the trigger
84
67
  */
@@ -104,9 +87,13 @@ export class PostCollapsibleTrigger {
104
87
  return;
105
88
  this.trigger = trigger;
106
89
  this.trigger.addEventListener('click', () => this.toggleCollapsible());
107
- this.setAriaAttributes();
90
+ this.updateAriaAttributes();
91
+ }
92
+ render() {
93
+ return (h(Host, { key: 'cd703fe34b8c82afc5956b58724d36b06054bc0b', "data-version": version }, h("slot", { key: '5abe4ba2b8922b941cc8aebbc7039e34e1853855' })));
108
94
  }
109
95
  static get is() { return "post-collapsible-trigger"; }
96
+ static get encapsulation() { return "shadow"; }
110
97
  static get properties() {
111
98
  return {
112
99
  "for": {
@@ -124,7 +111,7 @@ export class PostCollapsibleTrigger {
124
111
  "text": "Link the trigger to a post-collapsible with this id"
125
112
  },
126
113
  "attribute": "for",
127
- "reflect": false
114
+ "reflect": true
128
115
  }
129
116
  };
130
117
  }
@@ -153,7 +140,7 @@ export class PostCollapsibleTrigger {
153
140
  static get watchers() {
154
141
  return [{
155
142
  "propName": "for",
156
- "methodName": "setAriaAttributes"
143
+ "methodName": "validateAriaAttributes"
157
144
  }];
158
145
  }
159
146
  }