@pnx-mixtape/mxds 0.0.24 → 0.0.26

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 (272) hide show
  1. package/.storybook/decorators.ts +1 -1
  2. package/.storybook/main.ts +9 -1
  3. package/.storybook/preview.ts +1 -0
  4. package/.storybook/theme-demo.css +17 -13
  5. package/.storybook/vitest.setup.ts +17 -0
  6. package/dist/build/accordion.css +76 -86
  7. package/dist/build/accordion.entry.js +46 -72
  8. package/dist/build/base.css +1 -993
  9. package/dist/build/breadcrumb.css +1 -55
  10. package/dist/build/button.css +1 -126
  11. package/dist/build/callout.css +1 -11
  12. package/dist/build/card.css +1 -161
  13. package/dist/build/carousel.css +1 -125
  14. package/dist/build/chunks/Accordion-Dwh42fp7.js +42 -0
  15. package/dist/build/chunks/DropMenu-plGsgySm.js +43 -0
  16. package/dist/build/chunks/Popover-Bws25suh.js +27 -0
  17. package/dist/build/chunks/polyfills-Du4RTZDf.js +511 -0
  18. package/dist/build/chunks/popover-Bd5oQ1Ic.js +407 -0
  19. package/dist/build/chunks/utilities-DepaJdUg.js +242 -0
  20. package/dist/build/constants.css +91 -123
  21. package/dist/build/container-grid.css +1 -186
  22. package/dist/build/content-block.css +1 -36
  23. package/dist/build/dialog.css +1 -108
  24. package/dist/build/dialog.entry.js +45 -85
  25. package/dist/build/drop-menu.css +1 -89
  26. package/dist/build/drop-menu.entry.js +2 -2
  27. package/dist/build/drupal.css +1 -66
  28. package/dist/build/filters.css +1 -117
  29. package/dist/build/filters.entry.js +113 -142
  30. package/dist/build/footer.css +1 -141
  31. package/dist/build/form.css +1 -491
  32. package/dist/build/global-alert.css +1 -60
  33. package/dist/build/global-alert.entry.js +51 -75
  34. package/dist/build/grid.css +1 -195
  35. package/dist/build/header.css +1 -149
  36. package/dist/build/header.entry.js +598 -1180
  37. package/dist/build/hero-banner.css +1 -73
  38. package/dist/build/icon.css +1 -399
  39. package/dist/build/in-page-alert.css +1 -93
  40. package/dist/build/in-page-navigation.css +1 -17
  41. package/dist/build/in-page-navigation.entry.js +67 -103
  42. package/dist/build/link-list.css +1 -45
  43. package/dist/build/list-item.css +1 -29
  44. package/dist/build/masthead.css +1 -53
  45. package/dist/build/navigation.css +1 -356
  46. package/dist/build/navigation.entry.js +79 -222
  47. package/dist/build/page.css +1 -65
  48. package/dist/build/pagination.css +1 -111
  49. package/dist/build/popover.css +1 -119
  50. package/dist/build/popover.entry.js +1 -2
  51. package/dist/build/results-bar.css +1 -21
  52. package/dist/build/section.css +1 -147
  53. package/dist/build/side-navigation.css +1 -85
  54. package/dist/build/sidebar.css +1 -53
  55. package/dist/build/social-links.css +1 -20
  56. package/dist/build/steps.css +1 -118
  57. package/dist/build/sticky.css +1 -47
  58. package/dist/build/sticky.entry.js +48 -59
  59. package/dist/build/tabs.css +1 -108
  60. package/dist/build/tabs.entry.js +130 -209
  61. package/dist/build/tag.css +1 -70
  62. package/dist/build/utilities.css +1 -186
  63. package/dist/build/utility-list.css +1 -43
  64. package/dist/build/utility-list.entry.js +52 -80
  65. package/package.json +40 -52
  66. package/src/Atom/Background/__snapshots__/Background.stories.ts.snap +61 -216
  67. package/src/Atom/Background/_background.css +2 -1
  68. package/src/Atom/Button/Button.stories.tsx +2 -0
  69. package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +77 -97
  70. package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +3 -15
  71. package/src/Atom/DefinitionList/DefinitionList.stories.tsx +2 -1
  72. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap +13 -26
  73. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +2 -29
  74. package/src/Atom/Heading/Heading.stories.tsx +2 -1
  75. package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +9 -13
  76. package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +2 -8
  77. package/src/Atom/Icon/Icon.stories.tsx +2 -1
  78. package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +21 -28
  79. package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +4 -15
  80. package/src/Atom/Icon/_icon.css +7 -6
  81. package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +6 -9
  82. package/src/Atom/Link/Link.stories.tsx +2 -1
  83. package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +47 -56
  84. package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +4 -22
  85. package/src/Atom/Media/Media.stories.ts +1 -1
  86. package/src/Atom/Media/Media.stories.tsx +2 -1
  87. package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +27 -12
  88. package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +3 -16
  89. package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +5 -8
  90. package/src/Atom/Table/TableResponsive.stories.ts +0 -1
  91. package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +129 -261
  92. package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +34 -67
  93. package/src/Atom/Text/Text.stories.tsx +2 -1
  94. package/src/Atom/Text/__snapshots__/Text.stories.ts.snap +32 -46
  95. package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +2 -6
  96. package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +6 -11
  97. package/src/Atom/_flow.css +16 -1
  98. package/src/Component/Accordion/Accordion.stories.tsx +2 -0
  99. package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +106 -140
  100. package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +3 -49
  101. package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +52 -81
  102. package/src/Component/Breadcrumb/Breadcrumb.stories.tsx +2 -0
  103. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +29 -33
  104. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +3 -62
  105. package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +9 -11
  106. package/src/Component/Card/Card.stories.tsx +2 -0
  107. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +237 -272
  108. package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +4 -85
  109. package/src/Component/Carousel/Elements/Carousel.ts +10 -7
  110. package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +992 -1187
  111. package/src/Component/ContentBlock/ContentBlock.stories.tsx +2 -0
  112. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +161 -155
  113. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +2 -25
  114. package/src/Component/Dialog/Dialog.stories.tsx +2 -0
  115. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +92 -110
  116. package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +2 -31
  117. package/src/Component/DropMenu/DropMenu.stories.tsx +2 -0
  118. package/src/Component/DropMenu/DropMenu.tsx +1 -3
  119. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +25 -72
  120. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +2 -46
  121. package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap +80 -121
  122. package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +323 -424
  123. package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +2 -0
  124. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +25 -37
  125. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +3 -46
  126. package/src/Component/HeroBanner/HeroBanner.stories.tsx +2 -0
  127. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +105 -106
  128. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.tsx.snap +3 -34
  129. package/src/Component/HeroSearch/HeroSearch.stories.tsx +2 -0
  130. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +121 -158
  131. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.tsx.snap +3 -34
  132. package/src/Component/InPageAlert/InPageAlert.stories.tsx +2 -0
  133. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +87 -70
  134. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +5 -65
  135. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +1 -0
  136. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +2 -0
  137. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +88 -208
  138. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -148
  139. package/src/Component/InPageNavigation/in-page-navigation.css +5 -0
  140. package/src/Component/LinkList/LinkList.stories.tsx +2 -1
  141. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +67 -66
  142. package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +2 -32
  143. package/src/Component/ListItem/ListItem.stories.tsx +2 -1
  144. package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +153 -167
  145. package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap +2 -25
  146. package/src/Component/Navigation/Dropdown.stories.tsx +2 -0
  147. package/src/Component/Navigation/Elements/Navigation.ts +5 -5
  148. package/src/Component/Navigation/Navigation.stories.tsx +2 -0
  149. package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +2 -38
  150. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +204 -279
  151. package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +3 -59
  152. package/src/Component/Navigation/_navigation.css +2 -2
  153. package/src/Component/Pagination/Pagination.stories.tsx +2 -0
  154. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +70 -60
  155. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +2 -62
  156. package/src/Component/Popover/Elements/Popover.ts +5 -1
  157. package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +366 -496
  158. package/src/Component/Popover/popover.css +3 -4
  159. package/src/Component/ResultsBar/ResultsBar.stories.tsx +2 -0
  160. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.ts.snap +25 -46
  161. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap +4 -50
  162. package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +76 -81
  163. package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +35 -32
  164. package/src/Component/SocialShare/SocialShare.stories.tsx +2 -1
  165. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.ts.snap +11 -27
  166. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap +4 -22
  167. package/src/Component/SocialShare/social-share.twig +1 -0
  168. package/src/Component/Steps/__snapshots__/StepItem.stories.ts.snap +11 -23
  169. package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +142 -173
  170. package/src/Component/Sticky/Sticky.stories.tsx +2 -0
  171. package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +6 -12
  172. package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +2 -10
  173. package/src/Component/Tabs/Tabs.stories.tsx +2 -0
  174. package/src/Component/Tabs/__snapshots__/TabItem.stories.ts.snap +5 -9
  175. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +37 -210
  176. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +2 -116
  177. package/src/Component/Tag/Tag.stories.tsx +2 -0
  178. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +37 -61
  179. package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +2 -6
  180. package/src/Component/Tag/tags.twig +6 -6
  181. package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap +122 -245
  182. package/src/Component/UtilityList/utility-list.css +4 -0
  183. package/src/Component/UtilityList/utility-list.twig +2 -1
  184. package/src/Form/Checkbox/FormCheckbox.stories.tsx +2 -2
  185. package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap +13 -26
  186. package/src/Form/Checkbox/__snapshots__/FormCheckbox.stories.tsx.snap +5 -0
  187. package/src/Form/Description/FormDescription.stories.tsx +2 -1
  188. package/src/Form/Description/__snapshots__/Description.stories.ts.snap +5 -9
  189. package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap +2 -9
  190. package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap +9 -17
  191. package/src/Form/Form/Form.stories.tsx +2 -1
  192. package/src/Form/Form/FormTitle.stories.tsx +2 -1
  193. package/src/Form/Form/__snapshots__/Form.stories.tsx.snap +2 -5
  194. package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap +2 -8
  195. package/src/Form/FormItem/FormItem.stories.tsx +8 -5
  196. package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +88 -129
  197. package/src/Form/Label/FormLabel.stories.tsx +2 -1
  198. package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap +3 -18
  199. package/src/Form/Label/__snapshots__/Label.stories.ts.snap +13 -25
  200. package/src/Form/Radio/FormRadio.stories.tsx +2 -14
  201. package/src/Form/Radio/__snapshots__/FormRadio.stories.tsx.snap +3 -0
  202. package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap +42 -57
  203. package/src/Form/Search/__snapshots__/Search.stories.ts.snap +11 -26
  204. package/src/Form/Select/FormSelect.stories.tsx +2 -1
  205. package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap +2 -22
  206. package/src/Form/Select/__snapshots__/Select.stories.ts.snap +8 -19
  207. package/src/Form/TextInput/FormText.stories.tsx +2 -1
  208. package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +2 -12
  209. package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +11 -26
  210. package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +11 -25
  211. package/src/Form/Textarea/FormTextarea.stories.tsx +2 -1
  212. package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +2 -11
  213. package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +5 -11
  214. package/src/Layout/Footer/Footer.stories.ts +18 -1
  215. package/src/Layout/Footer/Footer.stories.tsx +2 -0
  216. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +360 -301
  217. package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap +3 -62
  218. package/src/Layout/Footer/footer.css +16 -35
  219. package/src/Layout/Footer/footer.twig +6 -6
  220. package/src/Layout/Grid/Grid.stories.tsx +2 -0
  221. package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +72 -66
  222. package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +6 -62
  223. package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap +9 -13
  224. package/src/Layout/Header/Header.stories.tsx +2 -1
  225. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +315 -466
  226. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -58
  227. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +86 -87
  228. package/src/Layout/Page/Page.stories.tsx +2 -0
  229. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +2 -81
  230. package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +51 -61
  231. package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +34 -78
  232. package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +54 -89
  233. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +89 -99
  234. package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +4 -34
  235. package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +3 -35
  236. package/src/Layout/Section/section.twig +2 -2
  237. package/src/Layout/Sidebar/Sidebar.stories.tsx +1 -1
  238. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +49 -40
  239. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +4 -44
  240. package/src/Layout/Sidebar/sidebar.css +2 -2
  241. package/src/Layout/Sidebar/sidebar.twig +8 -5
  242. package/src/Utility/_layout-utils.css +9 -1
  243. package/src/constants.css +2 -2
  244. package/src/tokens.js +2 -2
  245. package/.storybook/test-runner.ts +0 -77
  246. package/dist/build/accordion.entry.js.map +0 -1
  247. package/dist/build/chunks/Accordion-D1HQ0FDq.js +0 -63
  248. package/dist/build/chunks/Accordion-D1HQ0FDq.js.map +0 -1
  249. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js +0 -129
  250. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map +0 -1
  251. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js +0 -70
  252. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map +0 -1
  253. package/dist/build/chunks/polyfills-DnrsypYs.js +0 -812
  254. package/dist/build/chunks/polyfills-DnrsypYs.js.map +0 -1
  255. package/dist/build/chunks/popover-DzUcnIlX.js +0 -797
  256. package/dist/build/chunks/popover-DzUcnIlX.js.map +0 -1
  257. package/dist/build/chunks/popover.entry-BQvyR0d5.js +0 -38
  258. package/dist/build/chunks/popover.entry-BQvyR0d5.js.map +0 -1
  259. package/dist/build/chunks/utilities-Ci7wwNeg.js +0 -148
  260. package/dist/build/chunks/utilities-Ci7wwNeg.js.map +0 -1
  261. package/dist/build/dialog.entry.js.map +0 -1
  262. package/dist/build/drop-menu.entry.js.map +0 -1
  263. package/dist/build/filters.entry.js.map +0 -1
  264. package/dist/build/global-alert.entry.js.map +0 -1
  265. package/dist/build/header.entry.js.map +0 -1
  266. package/dist/build/in-page-navigation.entry.js.map +0 -1
  267. package/dist/build/navigation.entry.js.map +0 -1
  268. package/dist/build/popover.entry.js.map +0 -1
  269. package/dist/build/sticky.entry.js.map +0 -1
  270. package/dist/build/tabs.entry.js.map +0 -1
  271. package/dist/build/utility-list.entry.js.map +0 -1
  272. package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap +0 -110
@@ -1,55 +1 @@
1
- /**
2
- * Breadcrumb Navigation
3
- */
4
-
5
- @layer design-system.components {
6
- .mx-nav--breadcrumbs {
7
- --nav-font-size: var(--font-size-s);
8
-
9
- position: relative;
10
- z-index: 1;
11
- overflow: auto;
12
- white-space: nowrap;
13
- padding-inline: var(--outline-size);
14
- padding-block: var(--outline-size);
15
- margin-inline: calc(var(--outline-size) * -1);
16
- margin-block: calc(var(--outline-size) * -1);
17
- }
18
-
19
- .mx-nav--breadcrumbs > ul {
20
- gap: var(--breadcrumb-gap, var(--spacing-xxxxs));
21
- }
22
-
23
- .mx-nav--breadcrumbs > ul > li {
24
- color: var(
25
- --breadcrumb-foreground,
26
- var(--foreground, var(--colour-foreground-alt))
27
- );
28
- display: flex;
29
- align-items: center;
30
- }
31
-
32
- :is(.mx-nav--breadcrumbs > ul > li):where(:not(:last-child))::after {
33
- content: "";
34
- display: block;
35
- vertical-align: middle;
36
- -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");
37
- mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");
38
- -webkit-mask-position: center;
39
- mask-position: center;
40
- -webkit-mask-repeat: no-repeat;
41
- mask-repeat: no-repeat;
42
- block-size: var(--spacing-m);
43
- inline-size: var(--spacing-m);
44
- background-color: currentcolor;
45
- }
46
-
47
- .mx-nav--breadcrumbs [aria-current="page"] {
48
- pointer-events: none;
49
- }
50
- :is([dir="rtl"] .mx-nav--breadcrumbs,.translated-rtl .mx-nav--breadcrumbs) > ul > li::after {
51
- transform: rotate(180deg);
52
- }
53
- }
54
-
55
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJyZWFkY3J1bWIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxtQ0FBbUM7O0lBRW5DLGtCQUFrQjtJQUNsQixVQUFVO0lBQ1YsY0FBYztJQUNkLG1CQUFtQjtJQUNuQixtQ0FBbUM7SUFDbkMsa0NBQWtDO0lBQ2xDLDZDQUE2QztJQUM3Qyw0Q0FBNEM7RUE4QjlDOztJQTVCRTtNQUNFLGdEQUFnRDtJQUNsRDs7SUFFQTtNQUNFOzs7T0FHQztNQUNELGFBQWE7TUFDYixtQkFBbUI7SUFhckI7O01BWEU7UUFDRSxXQUFXO1FBQ1gsY0FBYztRQUNkLHNCQUFzQjtRQUN0Qiw2TEFBZ0U7Z0JBQWhFLHFMQUFnRTtRQUNoRSw2QkFBcUI7Z0JBQXJCLHFCQUFxQjtRQUNyQiw4QkFBc0I7Z0JBQXRCLHNCQUFzQjtRQUN0Qiw0QkFBNEI7UUFDNUIsNkJBQTZCO1FBQzdCLDhCQUE4QjtNQUNoQzs7SUFHRjtNQUNFLG9CQUFvQjtJQUN0QjtJQUtBO01BQ0UseUJBQXlCO0lBQzNCO0FBRUoiLCJmaWxlIjoiYnJlYWRjcnVtYi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEJyZWFkY3J1bWIgTmF2aWdhdGlvblxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtbmF2LS1icmVhZGNydW1icyB7XG4gICAgLS1uYXYtZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtcyk7XG5cbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgei1pbmRleDogMTtcbiAgICBvdmVyZmxvdzogYXV0bztcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1vdXRsaW5lLXNpemUpO1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLW91dGxpbmUtc2l6ZSk7XG4gICAgbWFyZ2luLWlubGluZTogY2FsYyh2YXIoLS1vdXRsaW5lLXNpemUpICogLTEpO1xuICAgIG1hcmdpbi1ibG9jazogY2FsYyh2YXIoLS1vdXRsaW5lLXNpemUpICogLTEpO1xuXG4gICAgJiA+IHVsIHtcbiAgICAgIGdhcDogdmFyKC0tYnJlYWRjcnVtYi1nYXAsIHZhcigtLXNwYWNpbmcteHh4eHMpKTtcbiAgICB9XG5cbiAgICAmID4gdWwgPiBsaSB7XG4gICAgICBjb2xvcjogdmFyKFxuICAgICAgICAtLWJyZWFkY3J1bWItZm9yZWdyb3VuZCxcbiAgICAgICAgdmFyKC0tZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQtYWx0KSlcbiAgICAgICk7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgJjp3aGVyZSg6bm90KDpsYXN0LWNoaWxkKSk6OmFmdGVyIHtcbiAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gICAgICAgIG1hc2staW1hZ2U6IHN2Zy1sb2FkKFwiLi4vLi4vQXRvbS9JY29uL2ltYWdlcy9jaGV2cm9uLXJpZ2h0LnN2Z1wiKTtcbiAgICAgICAgbWFzay1wb3NpdGlvbjogY2VudGVyO1xuICAgICAgICBtYXNrLXJlcGVhdDogbm8tcmVwZWF0O1xuICAgICAgICBibG9jay1zaXplOiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgICAgICBpbmxpbmUtc2l6ZTogdmFyKC0tc3BhY2luZy1tKTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudGNvbG9yO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgW2FyaWEtY3VycmVudD1cInBhZ2VcIl0ge1xuICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgW2Rpcj1cInJ0bFwiXSAubXgtbmF2LS1icmVhZGNydW1icyxcbiAgLnRyYW5zbGF0ZWQtcnRsIC5teC1uYXYtLWJyZWFkY3J1bWJzIHtcbiAgICAmID4gdWwgPiBsaTo6YWZ0ZXIge1xuICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */
1
+ @layer design-system.components{.mx-nav--breadcrumbs{--nav-font-size: var(--font-size-s);position:relative;z-index:1;overflow:auto;white-space:nowrap;padding-inline:var(--outline-size);padding-block:var(--outline-size);margin-inline:calc(var(--outline-size) * -1);margin-block:calc(var(--outline-size) * -1)}.mx-nav--breadcrumbs>ul{gap:var(--breadcrumb-gap, var(--spacing-xxxxs))}.mx-nav--breadcrumbs>ul>li{color:var(--breadcrumb-foreground, var(--foreground, var(--colour-foreground-alt)));display:flex;align-items:center}:is(.mx-nav--breadcrumbs>ul>li):where(:not(:last-child)):after{content:"";display:block;vertical-align:middle;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;block-size:var(--spacing-m);inline-size:var(--spacing-m);background-color:currentcolor}.mx-nav--breadcrumbs [aria-current=page]{pointer-events:none}:is([dir=rtl] .mx-nav--breadcrumbs,.translated-rtl .mx-nav--breadcrumbs)>ul>li:after{transform:rotate(180deg)}}
@@ -1,126 +1 @@
1
- /**
2
- * Buttons
3
- */
4
-
5
- @layer design-system.atoms {
6
- .mx-button {
7
- --outline-offset: 0.0625rem;
8
-
9
- display: inline-flex;
10
- inline-size: -moz-fit-content;
11
- inline-size: fit-content;
12
- gap: var(--button-gap, var(--spacing-s));
13
- font-size: var(--button-font-size, var(--font-size));
14
- font-weight: var(--font-weight-bold);
15
- font-family: var(--font-family);
16
- line-height: var(--line-height-ui);
17
- border: 2px solid var(--line-colour, var(--colour-border));
18
- border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
19
- border-radius: var(--radius, var(--border-radius-l));
20
- padding-block: var(--vertical-padding, var(--spacing-xxs));
21
- padding-inline: var(--horizontal-padding, var(--spacing-m));
22
- background-color: var(--background, var(--colour-background));
23
- color: var(--foreground, var(--colour-foreground));
24
- text-decoration-line: none;
25
- }
26
-
27
- .mx-button:hover {
28
- cursor: pointer;
29
- text-decoration-line: none;
30
- }
31
-
32
- .mx-button:disabled {
33
- cursor: not-allowed;
34
- opacity: 0.3;
35
- }
36
-
37
- .mx-button--full-width {
38
- inline-size: 100%;
39
- justify-content: center;
40
- }
41
-
42
- .mx-button--large {
43
- --vertical-padding: var(--spacing-s);
44
- --horizontal-padding: var(--spacing-l);
45
- }
46
-
47
- .mx-button--small {
48
- --button-font-size: var(--font-size-s);
49
- --vertical-padding: var(--spacing-xxxs);
50
- --horizontal-padding: var(--spacing-s);
51
- }
52
-
53
- .mx-button--icon-only {
54
- inline-size: var(--spacing-xl);
55
- block-size: var(--spacing-xl);
56
- padding: 0;
57
- border-radius: var(--border-radius-round);
58
- overflow: hidden;
59
- flex-wrap: wrap;
60
- }
61
-
62
- .mx-button--icon-only::before,.mx-button--icon-only::after {
63
- --icon-size: 100%;
64
-
65
- -webkit-mask-size: var(--spacing-s);
66
-
67
- mask-size: var(--spacing-s);
68
- }
69
-
70
- .mx-button--icon-only:has(.mx-icon) {
71
- align-content: center;
72
- justify-content: center;
73
- place-content: center;
74
- }
75
- }
76
-
77
- /**
78
- * Buttons
79
- */
80
-
81
- @layer design-system.atoms {
82
- .mx-button--dark {
83
- --line-colour: var(--colour-link);
84
- --background: var(--colour-link);
85
- --foreground: var(--colour-foreground-reverse);
86
- }
87
-
88
- .mx-button--dark.mx-button--outline {
89
- --background: transparent;
90
- --foreground: var(--colour-primary);
91
- }
92
-
93
- .mx-button--light {
94
- border: transparent;
95
- color: var(--link-colour, var(--colour-link));
96
- text-decoration-line: underline;
97
- }
98
-
99
- .mx-button--light:hover {
100
- text-decoration-line: underline;
101
- }
102
-
103
- .mx-button--destructive {
104
- --line-colour: var(--colour-error);
105
- --background: var(--colour-error);
106
- --foreground: var(--colour-foreground-reverse);
107
- }
108
-
109
- .mx-button--destructive.mx-button--outline {
110
- --background: transparent;
111
- --foreground: var(--colour-error);
112
- }
113
-
114
- .mx-button--white {
115
- --line-colour: var(--colour-foreground-reverse);
116
- --background: var(--colour-foreground-reverse);
117
- --foreground: var(--colour-foreground);
118
- }
119
-
120
- .mx-button--white.mx-button--outline {
121
- --background: transparent;
122
- --foreground: var(--colour-foreground-reverse);
123
- }
124
- }
125
-
126
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9idXR0b25zLmNzcyIsIl9idXR0b25zLXN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLDJCQUFxQjs7SUFFckIsb0JBQW9CO0lBQ3BCLDZCQUF3QjtJQUF4Qix3QkFBd0I7SUFDeEIsd0NBQXdDO0lBQ3hDLG9EQUFvRDtJQUNwRCxvQ0FBb0M7SUFDcEMsK0JBQStCO0lBQy9CLGtDQUFrQztJQUNsQywwREFBNkU7SUFBN0UsNkVBQTZFO0lBQzdFLG9EQUFvRDtJQUNwRCwwREFBMEQ7SUFDMUQsMkRBQTJEO0lBQzNELDZEQUE2RDtJQUM3RCxrREFBa0Q7SUFDbEQsMEJBQTBCO0VBVzVCOztJQVRFO01BQ0UsZUFBZTtNQUNmLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLG1CQUFtQjtNQUNuQixZQUFZO0lBQ2Q7O0VBR0Y7SUFDRSxpQkFBaUI7SUFDakIsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0Usb0NBQW9DO0lBQ3BDLHNDQUFzQztFQUN4Qzs7RUFFQTtJQUNFLHNDQUFzQztJQUN0Qyx1Q0FBdUM7SUFDdkMsc0NBQXNDO0VBQ3hDOztFQUVBO0lBQ0UsOEJBQThCO0lBQzlCLDZCQUE2QjtJQUM3QixVQUFVO0lBQ1YseUNBQXlDO0lBQ3pDLGdCQUFnQjtJQUNoQixlQUFlO0VBWWpCOztJQVZFO01BRUUsaUJBQWlCOztNQUVqQixtQ0FBMkI7O2NBQTNCLDJCQUEyQjtJQUM3Qjs7SUFFQTtNQUNFLHFCQUFxQjtNQUFyQix1QkFBcUI7TUFBckIscUJBQXFCO0lBQ3ZCO0FBRUo7O0FDckVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxpQ0FBaUM7SUFDakMsZ0NBQWdDO0lBQ2hDLDhDQUE4QztFQU1oRDs7SUFKRTtNQUNFLHlCQUF5QjtNQUN6QixtQ0FBbUM7SUFDckM7O0VBR0Y7SUFDRSxtQkFBbUI7SUFDbkIsNkNBQTZDO0lBQzdDLCtCQUErQjtFQUtqQzs7SUFIRTtNQUNFLCtCQUErQjtJQUNqQzs7RUFHRjtJQUNFLGtDQUFrQztJQUNsQyxpQ0FBaUM7SUFDakMsOENBQThDO0VBTWhEOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLGlDQUFpQztJQUNuQzs7RUFHRjtJQUNFLCtDQUErQztJQUMvQyw4Q0FBOEM7SUFDOUMsc0NBQXNDO0VBTXhDOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLDhDQUE4QztJQUNoRDtBQUVKIiwiZmlsZSI6ImJ1dHRvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEJ1dHRvbnNcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5hdG9tcyB7XG4gIC5teC1idXR0b24ge1xuICAgIC0tb3V0bGluZS1vZmZzZXQ6IDFweDtcblxuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBnYXA6IHZhcigtLWJ1dHRvbi1nYXAsIHZhcigtLXNwYWNpbmctcykpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tYnV0dG9uLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplKSk7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LXVpKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWQgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMsIHZhcigtLWJvcmRlci1yYWRpdXMtbCkpO1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLXZlcnRpY2FsLXBhZGRpbmcsIHZhcigtLXNwYWNpbmcteHhzKSk7XG4gICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy1tKSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKTtcbiAgICBjb2xvcjogdmFyKC0tZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpKTtcbiAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogbm9uZTtcblxuICAgICY6aG92ZXIge1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IG5vbmU7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICAgICAgb3BhY2l0eTogMC4zO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWZ1bGwtd2lkdGgge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB9XG5cbiAgLm14LWJ1dHRvbi0tbGFyZ2Uge1xuICAgIC0tdmVydGljYWwtcGFkZGluZzogdmFyKC0tc3BhY2luZy1zKTtcbiAgICAtLWhvcml6b250YWwtcGFkZGluZzogdmFyKC0tc3BhY2luZy1sKTtcbiAgfVxuXG4gIC5teC1idXR0b24tLXNtYWxsIHtcbiAgICAtLWJ1dHRvbi1mb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1zKTtcbiAgICAtLXZlcnRpY2FsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmcteHh4cyk7XG4gICAgLS1ob3Jpem9udGFsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctcyk7XG4gIH1cblxuICAubXgtYnV0dG9uLS1pY29uLW9ubHkge1xuICAgIGlubGluZS1zaXplOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICBibG9jay1zaXplOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtcm91bmQpO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgZmxleC13cmFwOiB3cmFwO1xuXG4gICAgJjo6YmVmb3JlLFxuICAgICY6OmFmdGVyIHtcbiAgICAgIC0taWNvbi1zaXplOiAxMDAlO1xuXG4gICAgICBtYXNrLXNpemU6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgfVxuXG4gICAgJjpoYXMoLm14LWljb24pIHtcbiAgICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cbiIsIi8qKlxuICogQnV0dG9uc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmF0b21zIHtcbiAgLm14LWJ1dHRvbi0tZGFyayB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWxpbmspO1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWxpbmspO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG5cbiAgICAmLm14LWJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItcHJpbWFyeSk7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0tbGlnaHQge1xuICAgIGJvcmRlcjogdHJhbnNwYXJlbnQ7XG4gICAgY29sb3I6IHZhcigtLWxpbmstY29sb3VyLCB2YXIoLS1jb2xvdXItbGluaykpO1xuICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0tZGVzdHJ1Y3RpdmUge1xuICAgIC0tbGluZS1jb2xvdXI6IHZhcigtLWNvbG91ci1lcnJvcik7XG4gICAgLS1iYWNrZ3JvdW5kOiB2YXIoLS1jb2xvdXItZXJyb3IpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG5cbiAgICAmLm14LWJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZXJyb3IpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLXdoaXRlIHtcbiAgICAtLWxpbmUtY29sb3VyOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQpO1xuXG4gICAgJi5teC1idXR0b24tLW91dGxpbmUge1xuICAgICAgLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG4gICAgfVxuICB9XG59XG4iXX0= */
1
+ @layer design-system.atoms{.mx-button{--outline-offset: .0625rem;display:inline-flex;inline-size:-moz-fit-content;inline-size:fit-content;gap:var(--button-gap, var(--spacing-s));font-size:var(--button-font-size, var(--font-size));font-weight:var(--font-weight-bold);font-family:var(--font-family);line-height:var(--line-height-ui);border:2px solid currentcolor;border:var(--line-width, 2px) solid var(--line-colour, currentcolor);border-radius:var(--radius, var(--border-radius-l));padding-block:var(--vertical-padding, var(--spacing-xxs));padding-inline:var(--horizontal-padding, var(--spacing-m));background-color:var(--background, var(--colour-background));color:var(--foreground, var(--colour-foreground));text-decoration-line:none}.mx-button:hover{cursor:pointer;text-decoration-line:none}.mx-button:disabled{cursor:not-allowed;opacity:.3}.mx-button--full-width{inline-size:100%;justify-content:center}.mx-button--large{--vertical-padding: var(--spacing-s);--horizontal-padding: var(--spacing-l)}.mx-button--small{--button-font-size: var(--font-size-s);--vertical-padding: var(--spacing-xxxs);--horizontal-padding: var(--spacing-s)}.mx-button--icon-only{inline-size:var(--spacing-xl);block-size:var(--spacing-xl);padding:0;border-radius:var(--border-radius-round);overflow:hidden;flex-wrap:wrap}.mx-button--icon-only:before,.mx-button--icon-only:after{--icon-size: 100%;-webkit-mask-size:var(--spacing-s);mask-size:var(--spacing-s)}.mx-button--icon-only:has(.mx-icon){align-content:center;justify-content:center;place-content:center}}@layer design-system.atoms{.mx-button--dark{--line-colour: var(--button-dark-bg, var(--colour-link));--background: var(--button-dark-bg, var(--colour-link));--foreground: var(--button-dark-fg, var(--colour-foreground-reverse))}.mx-button--dark.mx-button--outline{--background: transparent;--foreground: var(--button-dark-bg, var(--colour-link))}.mx-button--light{--line-colour: var(--button-light-bg, transparent);--background: var(--button-light-bg, transparent);--foreground: var(--button-light-fg, var(--link-colour, var(--colour-link)));text-decoration-line:underline}.mx-button--light:hover{text-decoration-line:underline}.mx-button--accent{--line-colour: var(--button-light-bg, var(--colour-accent));--background: var(--button-light-bg, var(--colour-accent))}.mx-button--accent.mx-button--outline{--background: transparent;--foreground: var(--button-light-bg, var(--colour-accent))}.mx-button--destructive{--line-colour: var(--colour-error);--background: var(--colour-error);--foreground: var(--colour-foreground-reverse)}.mx-button--destructive.mx-button--outline{--background: transparent;--foreground: var(--colour-error)}.mx-button--white{--line-colour: var(--colour-foreground-reverse);--background: var(--colour-foreground-reverse);--foreground: var(--colour-foreground)}.mx-button--white.mx-button--outline{--background: transparent;--foreground: var(--colour-foreground-reverse)}}
@@ -1,11 +1 @@
1
- @layer design-system.components {
2
- .mx-callout {
3
- padding-inline-start: var(--line-gap, var(--gap));
4
- border-inline-start: 6px solid
5
- var(--line-colour, var(--colour-primary));
6
- border-inline-start: var(--line-width, 6px) solid
7
- var(--line-colour, var(--colour-primary));
8
- }
9
- }
10
-
11
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGxvdXQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0U7SUFDRSxpREFBaUQ7SUFDakQ7K0NBQzJDO0lBRDNDOytDQUMyQztFQUM3QztBQUNGIiwiZmlsZSI6ImNhbGxvdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1jYWxsb3V0IHtcbiAgICBwYWRkaW5nLWlubGluZS1zdGFydDogdmFyKC0tbGluZS1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGJvcmRlci1pbmxpbmUtc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDZweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItcHJpbWFyeSkpO1xuICB9XG59XG4iXX0= */
1
+ @layer design-system.components{.mx-callout{padding-inline-start:var(--line-gap, var(--gap));border-inline-start:6px solid var(--line-colour, var(--colour-primary));border-inline-start:var(--line-width, 6px) solid var(--line-colour, var(--colour-primary))}}
@@ -1,161 +1 @@
1
- /**
2
- * Content Card
3
- */
4
-
5
- @layer design-system.components {
6
- .mx-card {
7
- block-size: 100%;
8
- display: grid;
9
- grid-gap: var(--card-gap, var(--gap));
10
- gap: var(--card-gap, var(--gap));
11
- }
12
-
13
- .mx-card[class*="mx-background--"] {
14
- border-radius: var(--border-radius);
15
- }
16
-
17
- @container (min-width: 720px) {
18
-
19
- .mx-card[class*="mx-background--"] {
20
- --content-min-spacing: var(--content-max-spacing, var(--spacing-m));
21
- }
22
- }
23
-
24
- .mx-card[class*="mx-background--"] .mx-card__content {
25
- padding-inline: var(--content-min-spacing, var(--spacing-s));
26
- padding-block-end: var(--content-min-spacing, var(--spacing-s));
27
- }
28
-
29
- .mx-card[class*="mx-background--"]:not(:has(.mx-card__media,.mx-card__icon)) .mx-card__content {
30
- padding-block-start: var(--content-min-spacing, var(--spacing-s));
31
- }
32
-
33
- .mx-card[class*="mx-background--"] .mx-card__icon {
34
- padding-inline: var(--content-min-spacing, var(--spacing-s));
35
- padding-block-start: var(--content-min-spacing, var(--spacing-s));
36
- }
37
-
38
- .mx-card.mx-background--box[class*="mx-background--"] {
39
- padding-inline: unset;
40
- }
41
-
42
- .mx-card:has(.mx-card__media) {
43
- grid-template: "media" "content" 1fr / 1fr;
44
- }
45
-
46
- @container (min-width: 720px) {
47
-
48
- .mx-card:has(.mx-card__media) {
49
- --card-gap: var(--gap-l);
50
- --card-alignment: center;
51
-
52
- grid-template: "media content" 1fr / 1fr 1fr;
53
-
54
- grid-template: "media content" 1fr / var(--media-col, 1fr) var(
55
- --content-col,
56
- 1fr
57
- );
58
- }
59
-
60
- .mx-card.mx-card--reversed:has(.mx-card__media) {
61
- grid-template-areas: "content media";
62
- grid-template-columns: 1fr 1fr;
63
- grid-template-columns: var(--content-col, 1fr) var(--media-col, 1fr);
64
- }
65
- }
66
-
67
- @container (min-width: 946px) {
68
-
69
- .mx-card:has(.mx-card__media) {
70
- --card-gap: var(--large-card-gap, 6rem);
71
- }
72
- }
73
- @container (min-width: 720px) {
74
- .mx-card[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
75
- padding-block-start: var(--content-min-spacing, var(--spacing-s));
76
- }
77
-
78
- .mx-card[class*="mx-background--"]:has(.mx-card__media):where(:not(.mx-card--reversed)) .mx-card__content {
79
- padding-inline-start: 0;
80
- }
81
-
82
- .mx-card.mx-card--reversed[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
83
- padding-inline-end: 0;
84
- }
85
- }
86
-
87
- .mx-card:has(.mx-card__media) .mx-card__content {
88
- grid-area: content;
89
- align-self: stretch;
90
- align-self: var(--align-content, var(--card-alignment, stretch));
91
- }
92
-
93
- .mx-card:has(.mx-card__media) .mx-card__media {
94
- grid-area: media;
95
- align-self: stretch;
96
- align-self: var(--align-media, var(--card-alignment, stretch));
97
- inline-size: 100%;
98
- }
99
-
100
- :is(.mx-card:has(.mx-card__media) .mx-card__media) img {
101
- aspect-ratio: var(--ratio);
102
- border-radius: var(--border-radius);
103
- -o-object-fit: cover;
104
- object-fit: cover;
105
- inline-size: 100%;
106
- }
107
-
108
- .mx-card:has(.mx-card__media) .mx-skeleton--bg {
109
- grid-area: media;
110
- }
111
-
112
- .mx-card:has(.mx-card__media) .mx-card__icon {
113
- grid-area: media;
114
- }
115
-
116
- .mx-card .mx-link-list {
117
- inline-size: 100%;
118
- }
119
-
120
- .mx-card__content > a:last-child {
121
- margin-block-start: auto;
122
- }
123
- }
124
-
125
- /**
126
- * Content Card Grid
127
- */
128
-
129
- @layer design-system.components {
130
- .mx-grid:has(> *:nth-child(2):last-child)
131
- > :is(.mx-card, .mx-container:has(.mx-card)) {
132
- inline-size: min(100%, 37ch);
133
- inline-size: min(100%, var(--max-card-width, 37ch));
134
- margin-inline: auto;
135
- }
136
- }
137
-
138
- /**
139
- * Content Card Linked
140
- */
141
-
142
- @layer design-system.components {
143
- a.mx-card[href]:hover {
144
- color: inherit;
145
- }
146
-
147
- .mx-card--block {
148
- position: relative;
149
- }
150
-
151
- .mx-card--block a::before {
152
- content: "";
153
- position: absolute;
154
- inset-block-start: 0;
155
- inset-inline-start: 0;
156
- inline-size: 100%;
157
- block-size: 100%;
158
- }
159
- }
160
-
161
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLHFDQUFnQztJQUFoQyxnQ0FBZ0M7RUFnR2xDOztJQTlGRTtNQUNFLG1DQUFtQztJQXVCckM7O01BckJFOztJQUhGO1FBSUksbUVBQW1FO0lBb0J2RTtNQW5CRTs7TUFFQTtRQUNFLDREQUE0RDtRQUM1RCwrREFBK0Q7TUFDakU7O01BRUE7UUFDRSxpRUFBaUU7TUFDbkU7O01BRUE7UUFDRSw0REFBNEQ7UUFDNUQsaUVBQWlFO01BQ25FOztNQUVBO1FBQ0UscUJBQXFCO01BQ3ZCOztJQUdGO01BQ0UsMENBQTBDO0lBOEQ1Qzs7TUE1REU7O0lBSEY7UUFJSSx3QkFBd0I7UUFDeEIsd0JBQXdCOztRQUV4Qiw0Q0FHRzs7UUFISDs7O1dBR0c7SUFxRFA7O1FBbkRJO1VBQ0Usb0NBQW9DO1VBQ3BDLDhCQUFvRTtVQUFwRSxvRUFBb0U7UUFDdEU7TUFDRjs7TUFFQTs7SUFsQkY7UUFtQkksdUNBQXVDO0lBNEMzQztNQTNDRTtRQUdFO1VBQ0U7WUFDRSxpRUFBaUU7VUFDbkU7O1VBRUE7WUFDRSx1QkFBdUI7VUFDekI7O1VBRUE7WUFDRSxxQkFBcUI7VUFDdkI7UUFDRjs7TUFHRjtRQUNFLGtCQUFrQjtRQUNsQixtQkFBZ0U7UUFBaEUsZ0VBQWdFO01BQ2xFOztNQUVBO1FBQ0UsZ0JBQWdCO1FBQ2hCLG1CQUE4RDtRQUE5RCw4REFBOEQ7UUFDOUQsaUJBQWlCO01BUW5COztRQU5FO1VBQ0UsMEJBQTBCO1VBQzFCLG1DQUFtQztVQUNuQyxvQkFBaUI7YUFBakIsaUJBQWlCO1VBQ2pCLGlCQUFpQjtRQUNuQjs7TUFHRjtRQUNFLGdCQUFnQjtNQUNsQjs7TUFFQTtRQUNFLGdCQUFnQjtNQUNsQjs7SUFHRjtNQUNFLGlCQUFpQjtJQUNuQjs7RUFHRjtJQUNFLHdCQUF3QjtFQUMxQjtBQUNGOztBQUVBOztFQUVFOztBQUVGO0VBQ0U7O0lBRUUsNEJBQW1EO0lBQW5ELG1EQUFtRDtJQUNuRCxtQkFBbUI7RUFDckI7QUFDRjs7QUFFQTs7RUFFRTs7QUFFRjtJQUVJO01BQ0UsY0FBYztJQUNoQjs7RUFHRjtJQUNFLGtCQUFrQjtFQVVwQjs7SUFSRTtNQUNFLFdBQVc7TUFDWCxrQkFBa0I7TUFDbEIsb0JBQW9CO01BQ3BCLHFCQUFxQjtNQUNyQixpQkFBaUI7TUFDakIsZ0JBQWdCO0lBQ2xCO0FBRUoiLCJmaWxlIjoiY2FyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvbnRlbnQgQ2FyZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtY2FyZCB7XG4gICAgYmxvY2stc2l6ZTogMTAwJTtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdhcDogdmFyKC0tY2FyZC1nYXAsIHZhcigtLWdhcCkpO1xuXG4gICAgJltjbGFzcyo9XCJteC1iYWNrZ3JvdW5kLS1cIl0ge1xuICAgICAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cyk7XG5cbiAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmNvbnRlbnRDYXJkXCIpKSB7XG4gICAgICAgIC0tY29udGVudC1taW4tc3BhY2luZzogdmFyKC0tY29udGVudC1tYXgtc3BhY2luZywgdmFyKC0tc3BhY2luZy1tKSk7XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICBwYWRkaW5nLWlubGluZTogdmFyKC0tY29udGVudC1taW4tc3BhY2luZywgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgICAgIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgIH1cblxuICAgICAgJjpub3QoOmhhcygubXgtY2FyZF9fbWVkaWEsIC5teC1jYXJkX19pY29uKSkgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgIH1cblxuICAgICAgJiAubXgtY2FyZF9faWNvbiB7XG4gICAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgICAgcGFkZGluZy1ibG9jay1zdGFydDogdmFyKC0tY29udGVudC1taW4tc3BhY2luZywgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgICB9XG5cbiAgICAgICYubXgtYmFja2dyb3VuZC0tYm94IHtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHVuc2V0O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6aGFzKC5teC1jYXJkX19tZWRpYSkge1xuICAgICAgZ3JpZC10ZW1wbGF0ZTogXCJtZWRpYVwiIFwiY29udGVudFwiIDFmciAvIDFmcjtcblxuICAgICAgQGNvbnRhaW5lciAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQuY29udGVudENhcmRcIikpIHtcbiAgICAgICAgLS1jYXJkLWdhcDogdmFyKC0tZ2FwLWwpO1xuICAgICAgICAtLWNhcmQtYWxpZ25tZW50OiBjZW50ZXI7XG5cbiAgICAgICAgZ3JpZC10ZW1wbGF0ZTogXCJtZWRpYSBjb250ZW50XCIgMWZyIC8gdmFyKC0tbWVkaWEtY29sLCAxZnIpIHZhcihcbiAgICAgICAgICAgIC0tY29udGVudC1jb2wsXG4gICAgICAgICAgICAxZnJcbiAgICAgICAgICApO1xuXG4gICAgICAgICYubXgtY2FyZC0tcmV2ZXJzZWQge1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6IFwiY29udGVudCBtZWRpYVwiO1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogdmFyKC0tY29udGVudC1jb2wsIDFmcikgdmFyKC0tbWVkaWEtY29sLCAxZnIpO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmxcIikpIHtcbiAgICAgICAgLS1jYXJkLWdhcDogdmFyKC0tbGFyZ2UtY2FyZC1nYXAsIDZyZW0pO1xuICAgICAgfVxuXG4gICAgICAmW2NsYXNzKj1cIm14LWJhY2tncm91bmQtLVwiXSB7XG4gICAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmNvbnRlbnRDYXJkXCIpKSB7XG4gICAgICAgICAgJiAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAmOndoZXJlKDpub3QoLm14LWNhcmQtLXJldmVyc2VkKSkgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICAgICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgJi5teC1jYXJkLS1yZXZlcnNlZCAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgICAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDA7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICBncmlkLWFyZWE6IGNvbnRlbnQ7XG4gICAgICAgIGFsaWduLXNlbGY6IHZhcigtLWFsaWduLWNvbnRlbnQsIHZhcigtLWNhcmQtYWxpZ25tZW50LCBzdHJldGNoKSk7XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX21lZGlhIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgICAgYWxpZ24tc2VsZjogdmFyKC0tYWxpZ24tbWVkaWEsIHZhcigtLWNhcmQtYWxpZ25tZW50LCBzdHJldGNoKSk7XG4gICAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuXG4gICAgICAgICYgaW1nIHtcbiAgICAgICAgICBhc3BlY3QtcmF0aW86IHZhcigtLXJhdGlvKTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICAgICAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgICAgICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5teC1za2VsZXRvbi0tYmcge1xuICAgICAgICBncmlkLWFyZWE6IG1lZGlhO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jYXJkX19pY29uIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1saW5rLWxpc3Qge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcmRfX2NvbnRlbnQgPiBhOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1ibG9jay1zdGFydDogYXV0bztcbiAgfVxufVxuXG4vKipcbiAqIENvbnRlbnQgQ2FyZCBHcmlkXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1ncmlkOmhhcyg+ICo6bnRoLWNoaWxkKDIpOmxhc3QtY2hpbGQpXG4gICAgPiA6aXMoLm14LWNhcmQsIC5teC1jb250YWluZXI6aGFzKC5teC1jYXJkKSkge1xuICAgIGlubGluZS1zaXplOiBtaW4oMTAwJSwgdmFyKC0tbWF4LWNhcmQtd2lkdGgsIDM3Y2gpKTtcbiAgICBtYXJnaW4taW5saW5lOiBhdXRvO1xuICB9XG59XG5cbi8qKlxuICogQ29udGVudCBDYXJkIExpbmtlZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICBhW2hyZWZdLm14LWNhcmQge1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcmQtLWJsb2NrIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAmIGE6OmJlZm9yZSB7XG4gICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IDA7XG4gICAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG59XG4iXX0= */
1
+ @layer design-system.components{.mx-card{block-size:100%;display:grid;grid-gap:var(--card-gap, var(--gap));gap:var(--card-gap, var(--gap))}.mx-card[class*=mx-background--]{border-radius:var(--border-radius)}@container (min-width: 720px){.mx-card[class*=mx-background--]{--content-min-spacing: var(--content-max-spacing, var(--spacing-m))}}.mx-card[class*=mx-background--] .mx-card__content{padding-inline:var(--content-min-spacing, var(--spacing-s));padding-block-end:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--]:not(:has(.mx-card__media,.mx-card__icon)) .mx-card__content{padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--] .mx-card__icon{padding-inline:var(--content-min-spacing, var(--spacing-s));padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card.mx-background--box[class*=mx-background--]{padding-inline:unset}.mx-card:has(.mx-card__media){grid-template:"media" "content" 1fr / 1fr}@container (min-width: 720px){.mx-card:has(.mx-card__media){--card-gap: var(--gap-l);--card-alignment: center;grid-template:"media content" 1fr / 1fr 1fr;grid-template:"media content" 1fr / var(--media-col, 1fr) var(--content-col, 1fr)}.mx-card.mx-card--reversed:has(.mx-card__media){grid-template-areas:"content media";grid-template-columns:1fr 1fr;grid-template-columns:var(--content-col, 1fr) var(--media-col, 1fr)}}@container (min-width: 946px){.mx-card:has(.mx-card__media){--card-gap: var(--large-card-gap, 6rem)}}@container (min-width: 720px){.mx-card[class*=mx-background--]:has(.mx-card__media) .mx-card__content{padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--]:has(.mx-card__media):where(:not(.mx-card--reversed)) .mx-card__content{padding-inline-start:0}.mx-card.mx-card--reversed[class*=mx-background--]:has(.mx-card__media) .mx-card__content{padding-inline-end:0}}.mx-card:has(.mx-card__media) .mx-card__content{grid-area:content;align-self:stretch;align-self:var(--align-content, var(--card-alignment, stretch))}.mx-card:has(.mx-card__media) .mx-card__media{grid-area:media;align-self:stretch;align-self:var(--align-media, var(--card-alignment, stretch));inline-size:100%}:is(.mx-card:has(.mx-card__media) .mx-card__media) img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);-o-object-fit:cover;object-fit:cover;inline-size:100%}.mx-card:has(.mx-card__media) .mx-skeleton--bg{grid-area:media}.mx-card:has(.mx-card__media) .mx-card__icon{grid-area:media}.mx-card .mx-link-list{inline-size:100%}.mx-card__content>a:last-child{margin-block-start:auto}}@layer design-system.components{.mx-grid:has(>*:nth-child(2):last-child)>:is(.mx-card,.mx-container:has(.mx-card)){inline-size:min(100%,37ch);inline-size:min(100%,var(--max-card-width, 37ch));margin-inline:auto}}@layer design-system.components{a.mx-card[href]:hover{color:inherit}.mx-card--block{position:relative}.mx-card--block a:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}}
@@ -1,125 +1 @@
1
- /**
2
- * Carousel.
3
- */
4
-
5
- @layer design-system.components.carousel {
6
- .mx-carousel {
7
- display: block;
8
- }
9
-
10
- .mx-carousel__scrollable {
11
- list-style: none;
12
- display: flex;
13
- block-size: auto;
14
- block-size: var(--block-size, auto);
15
- overflow-x: auto;
16
- overflow-y: hidden;
17
- overflow: auto hidden;
18
- scroll-snap-type: x mandatory;
19
- -webkit-overflow-scrolling: touch;
20
- scroll-behavior: smooth;
21
- scrollbar-color: var(--colour-foreground) var(--colour-background);
22
- }
23
-
24
- .mx-carousel__scrollable::-webkit-scrollbar {
25
- block-size: 1rem;
26
- }
27
-
28
- .mx-carousel__scrollable::-webkit-scrollbar-track {
29
- background-color: var(--colour-background);
30
- }
31
-
32
- .mx-carousel__scrollable::-webkit-scrollbar-thumb {
33
- background-color: var(--colour-foreground);
34
- background-image: linear-gradient(
35
- var(--colour-background) 0,
36
- var(--colour-background) 0.25rem,
37
- var(--colour-foreground) 0.25rem,
38
- var(--colour-foreground) 0.75rem,
39
- var(--colour-background) 0.75rem
40
- );
41
- }
42
-
43
- .mx-carousel__scrollable > li {
44
- flex: 0 0 25ch;
45
- flex: 0 0 var(--inline-size, 25ch);
46
- display: flex;
47
- scroll-snap-align: start;
48
- }
49
-
50
- [inert]:is(.mx-carousel__scrollable > li) {
51
- opacity: 0.3;
52
- }
53
-
54
- :is(.mx-carousel__scrollable > li) + li {
55
- margin-inline-start: var(--gap);
56
- }
57
-
58
- :is(.mx-carousel__scrollable > li) .mx-container {
59
- inline-size: 100%;
60
- display: flex;
61
- }
62
-
63
- .mx-carousel__scrollable:not(:first-child) {
64
- padding-block-start: var(--gap);
65
- }
66
-
67
- .mx-carousel__scrollable.overflowing:not(.no-bar) {
68
- padding-block-end: var(--gap);
69
- }
70
-
71
- .mx-carousel__scrollable.no-bar {
72
- scrollbar-width: none;
73
- }
74
-
75
- .mx-carousel__scrollable.no-bar::-webkit-scrollbar {
76
- display: none;
77
- }
78
- .mx-carousel__buttons:not([hidden]) {
79
- display: flex;
80
- gap: var(--gap-s);
81
- }
82
-
83
- .mx-carousel__buttons button[disabled] {
84
- opacity: 0.5;
85
- }
86
-
87
- .mx-carousel__pagination {
88
- list-style: none;
89
- padding-inline: 0;
90
- display: flex;
91
- align-items: center;
92
- gap: var(--spacing-xxxs);
93
- }
94
-
95
- .mx-carousel__pagination[data-pagination="counter"] {
96
- --border-radius: var(--border-radius-round);
97
- --indent: 200%;
98
- }
99
-
100
- .mx-carousel__pagination button {
101
- border-radius: var(--border-radius);
102
- border: 2px solid
103
- var(--line-colour, var(--colour-border));
104
- border: var(--line-width, 2px) solid
105
- var(--line-colour, var(--colour-border));
106
- background-color: var(--background, var(--colour-background));
107
- color: var(--foreground, var(--colour-foreground));
108
- min-block-size: 2em;
109
- min-inline-size: 2em;
110
- font-family: inherit;
111
- text-align: center;
112
- cursor: pointer;
113
- overflow: hidden;
114
- text-indent: inherit;
115
- text-indent: var(--indent, unset);
116
- }
117
-
118
- [disabled]:is(.mx-carousel__pagination button) {
119
- --background: var(--active-background, var(--colour-border));
120
-
121
- cursor: not-allowed;
122
- }
123
- }
124
-
125
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcm91c2VsLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0UsY0FBYztFQUNoQjs7RUFFQTtJQUNFLGdCQUFnQjtJQUNoQixhQUFhO0lBQ2IsZ0JBQW1DO0lBQW5DLG1DQUFtQztJQUNuQyxnQkFBcUI7SUFBckIsa0JBQXFCO0lBQXJCLHFCQUFxQjtJQUNyQiw2QkFBNkI7SUFDN0IsaUNBQWlDO0lBQ2pDLHVCQUF1QjtJQUN2QixrRUFBa0U7RUF1RHBFOztJQXJERTtNQUNFLGdCQUFnQjtJQUNsQjs7SUFFQTtNQUNFLDBDQUEwQztJQUM1Qzs7SUFFQTtNQUNFLDBDQUEwQztNQUMxQzs7Ozs7O09BTUM7SUFDSDs7SUFFQTtNQUNFLGNBQWtDO01BQWxDLGtDQUFrQztNQUNsQyxhQUFhO01BQ2Isd0JBQXdCO0lBYzFCOztNQVpFO1FBQ0UsWUFBWTtNQUNkOztNQUVBO1FBQ0UsK0JBQStCO01BQ2pDOztNQUVBO1FBQ0UsaUJBQWlCO1FBQ2pCLGFBQWE7TUFDZjs7SUFHRjtNQUNFLCtCQUErQjtJQUNqQzs7SUFFQTtNQUNFLDZCQUE2QjtJQUMvQjs7SUFFQTtNQUNFLHFCQUFxQjtJQUt2Qjs7TUFIRTtRQUNFLGFBQWE7TUFDZjtJQUtGO01BQ0UsYUFBYTtNQUNiLGlCQUFpQjtJQUNuQjs7SUFFQTtNQUNFLFlBQVk7SUFDZDs7RUFHRjtJQUNFLGdCQUFnQjtJQUNoQixpQkFBaUI7SUFDakIsYUFBYTtJQUNiLG1CQUFtQjtJQUNuQix3QkFBd0I7RUEyQjFCOztJQXpCRTtNQUNFLDJDQUEyQztNQUMzQyxjQUFjO0lBQ2hCOztJQUVBO01BQ0UsbUNBQW1DO01BQ25DO2dEQUMwQztNQUQxQztnREFDMEM7TUFDMUMsNkRBQTZEO01BQzdELGtEQUFrRDtNQUNsRCxtQkFBbUI7TUFDbkIsb0JBQW9CO01BQ3BCLG9CQUFvQjtNQUNwQixrQkFBa0I7TUFDbEIsZUFBZTtNQUNmLGdCQUFnQjtNQUNoQixvQkFBaUM7TUFBakMsaUNBQWlDO0lBT25DOztNQUxFO1FBQ0UsNERBQTREOztRQUU1RCxtQkFBbUI7TUFDckI7QUFHTiIsImZpbGUiOiJjYXJvdXNlbC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENhcm91c2VsLlxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMuY2Fyb3VzZWwge1xuICAubXgtY2Fyb3VzZWwge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5cbiAgLm14LWNhcm91c2VsX19zY3JvbGxhYmxlIHtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYmxvY2stc2l6ZTogdmFyKC0tYmxvY2stc2l6ZSwgYXV0byk7XG4gICAgb3ZlcmZsb3c6IGF1dG8gaGlkZGVuO1xuICAgIHNjcm9sbC1zbmFwLXR5cGU6IHggbWFuZGF0b3J5O1xuICAgIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbiAgICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDtcbiAgICBzY3JvbGxiYXItY29sb3I6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCk7XG5cbiAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICBibG9jay1zaXplOiAxcmVtO1xuICAgIH1cblxuICAgICY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKTtcbiAgICB9XG5cbiAgICAmOjotd2Via2l0LXNjcm9sbGJhci10aHVtYiB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCk7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKSAwLFxuICAgICAgICB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkgMC4yNXJlbSxcbiAgICAgICAgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpIDAuMjVyZW0sXG4gICAgICAgIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSAwLjc1cmVtLFxuICAgICAgICB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkgMC43NXJlbVxuICAgICAgKTtcbiAgICB9XG5cbiAgICAmID4gbGkge1xuICAgICAgZmxleDogMCAwIHZhcigtLWlubGluZS1zaXplLCAyNWNoKTtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBzY3JvbGwtc25hcC1hbGlnbjogc3RhcnQ7XG5cbiAgICAgICZbaW5lcnRdIHtcbiAgICAgICAgb3BhY2l0eTogMC4zO1xuICAgICAgfVxuXG4gICAgICAmICsgbGkge1xuICAgICAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiB2YXIoLS1nYXApO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jb250YWluZXIge1xuICAgICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOm5vdCg6Zmlyc3QtY2hpbGQpIHtcbiAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLWdhcCk7XG4gICAgfVxuXG4gICAgJi5vdmVyZmxvd2luZzpub3QoLm5vLWJhcikge1xuICAgICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLWdhcCk7XG4gICAgfVxuXG4gICAgJi5uby1iYXIge1xuICAgICAgc2Nyb2xsYmFyLXdpZHRoOiBub25lO1xuXG4gICAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcm91c2VsX19idXR0b25zIHtcbiAgICAmOm5vdChbaGlkZGVuXSkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGdhcDogdmFyKC0tZ2FwLXMpO1xuICAgIH1cblxuICAgICYgYnV0dG9uW2Rpc2FibGVkXSB7XG4gICAgICBvcGFjaXR5OiAwLjU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcm91c2VsX19wYWdpbmF0aW9uIHtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgIHBhZGRpbmctaW5saW5lOiAwO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLXNwYWNpbmcteHh4cyk7XG5cbiAgICAmW2RhdGEtcGFnaW5hdGlvbj1cImNvdW50ZXJcIl0ge1xuICAgICAgLS1ib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXJvdW5kKTtcbiAgICAgIC0taW5kZW50OiAyMDAlO1xuICAgIH1cblxuICAgICYgYnV0dG9uIHtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuICAgICAgYm9yZGVyOiB2YXIoLS1saW5lLXdpZHRoLCAycHgpIHNvbGlkXG4gICAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkpO1xuICAgICAgY29sb3I6IHZhcigtLWZvcmVncm91bmQsIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSk7XG4gICAgICBtaW4tYmxvY2stc2l6ZTogMmVtO1xuICAgICAgbWluLWlubGluZS1zaXplOiAyZW07XG4gICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICB0ZXh0LWluZGVudDogdmFyKC0taW5kZW50LCB1bnNldCk7XG5cbiAgICAgICZbZGlzYWJsZWRdIHtcbiAgICAgICAgLS1iYWNrZ3JvdW5kOiB2YXIoLS1hY3RpdmUtYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuXG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0= */
1
+ @layer design-system.components.carousel{.mx-carousel{display:block}.mx-carousel__scrollable{list-style:none;display:flex;block-size:auto;block-size:var(--block-size, auto);overflow-x:auto;overflow-y:hidden;overflow:auto hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-color:var(--colour-foreground) var(--colour-background)}.mx-carousel__scrollable::-webkit-scrollbar{block-size:1rem}.mx-carousel__scrollable::-webkit-scrollbar-track{background-color:var(--colour-background)}.mx-carousel__scrollable::-webkit-scrollbar-thumb{background-color:var(--colour-foreground);background-image:linear-gradient(var(--colour-background) 0,var(--colour-background) .25rem,var(--colour-foreground) .25rem,var(--colour-foreground) .75rem,var(--colour-background) .75rem)}.mx-carousel__scrollable>li{flex:0 0 25ch;flex:0 0 var(--inline-size, 25ch);display:flex;scroll-snap-align:start}[inert]:is(.mx-carousel__scrollable>li){opacity:.3}:is(.mx-carousel__scrollable>li)+li{margin-inline-start:var(--gap)}:is(.mx-carousel__scrollable>li) .mx-container{inline-size:100%;display:flex}.mx-carousel__scrollable:not(:first-child){padding-block-start:var(--gap)}.mx-carousel__scrollable.overflowing:not(.no-bar){padding-block-end:var(--gap)}.mx-carousel__scrollable.no-bar{scrollbar-width:none}.mx-carousel__scrollable.no-bar::-webkit-scrollbar{display:none}.mx-carousel__buttons:not([hidden]){display:flex;gap:var(--gap-s)}.mx-carousel__buttons button[disabled]{opacity:.5}.mx-carousel__pagination{list-style:none;padding-inline:0;display:flex;align-items:center;gap:var(--spacing-xxxs)}.mx-carousel__pagination[data-pagination=counter]{--border-radius: var(--border-radius-round);--indent: 200%}.mx-carousel__pagination button{border-radius:var(--border-radius);border:2px solid var(--line-colour, var(--colour-border));border:var(--line-width, 2px) solid var(--line-colour, var(--colour-border));background-color:var(--background, var(--colour-background));color:var(--foreground, var(--colour-foreground));min-block-size:2em;min-inline-size:2em;font-family:inherit;text-align:center;cursor:pointer;overflow:hidden;text-indent:inherit;text-indent:var(--indent, unset)}[disabled]:is(.mx-carousel__pagination button){--background: var(--active-background, var(--colour-border));cursor:not-allowed}}
@@ -0,0 +1,42 @@
1
+ import { i as makeAnchor } from "./utilities-DepaJdUg.js";
2
+ var Accordion = class extends HTMLElement {
3
+ internals_;
4
+ controller;
5
+ constructor() {
6
+ super(), this.internals_ = this.attachInternals(), this.controller = new AbortController();
7
+ }
8
+ connectedCallback() {
9
+ if (!this.details || !this.trigger) return;
10
+ let { signal: e } = this.controller;
11
+ document.addEventListener("beforeprint", this.handleOpen, { signal: e }), document.addEventListener("afterprint", this.handleClose, { signal: e }), this.handleHash(), document.addEventListener("hashchange", this.handleHash, { signal: e });
12
+ }
13
+ disconnectedCallback() {
14
+ this.controller.abort();
15
+ }
16
+ handleOpen = () => {
17
+ this.details && (this.details.open = !0);
18
+ };
19
+ handleClose = () => {
20
+ this.details && (this.details.open = !1);
21
+ };
22
+ handleHash = () => {
23
+ let { hash: e } = window.location;
24
+ e && e === `#${this.details?.id}` && this.handleOpen();
25
+ };
26
+ get details() {
27
+ let e = this.querySelector("details");
28
+ if (!e) throw Error(`${this.localName} must contain a <details> element.`);
29
+ return e.id = e.id || this.generatedId(), e;
30
+ }
31
+ get trigger() {
32
+ let e = this.querySelector("summary");
33
+ if (!e) throw Error(`${this.localName} must contain a <summary> element.`);
34
+ return e;
35
+ }
36
+ generatedId = () => {
37
+ let t = this.trigger?.textContent?.trim();
38
+ return t ? makeAnchor(t) : "";
39
+ };
40
+ };
41
+ customElements.get("mx-accordion") || customElements.define("mx-accordion", Accordion);
42
+ export { Accordion as t };
@@ -0,0 +1,43 @@
1
+ import { t as Popover } from "./Popover-Bws25suh.js";
2
+ var DropMenu = class extends Popover {
3
+ controller;
4
+ closeOnClick;
5
+ constructor() {
6
+ super(), this.controller = new AbortController();
7
+ }
8
+ async connectedCallback() {
9
+ if (await super.connectedCallback(), !this.container || !this.trigger) return;
10
+ this.closeOnClick = this.hasAttribute("closeonclick");
11
+ let { signal: e } = this.controller;
12
+ document.addEventListener("click", (e) => {
13
+ let t = e.target, n = t.closest("a, button");
14
+ t !== this.container && ![...this.items].includes(n) || (this.handleSelect(e), e.preventDefault());
15
+ }, { signal: e }), document.addEventListener("keydown", (e) => {
16
+ let { target: t, key: n } = e;
17
+ t !== this.container && ![...this.items].includes(t) || (n === "Enter" && this.handleSelect(e), e.preventDefault());
18
+ }, { signal: e });
19
+ }
20
+ disconnectedCallback() {
21
+ this.controller.abort();
22
+ }
23
+ handleSelect = (e) => {
24
+ let t = e.target;
25
+ this.items?.forEach((e) => {
26
+ e instanceof HTMLButtonElement && e.setAttribute("aria-checked", String(e === t));
27
+ });
28
+ let n = new CustomEvent("drop-menu-select", {
29
+ bubbles: !0,
30
+ cancelable: !0,
31
+ detail: {
32
+ event: e,
33
+ target: t
34
+ }
35
+ });
36
+ this.container.dispatchEvent(n), this.closeOnClick && this.container.togglePopover();
37
+ };
38
+ get items() {
39
+ return this.container.querySelectorAll("a, button");
40
+ }
41
+ };
42
+ customElements.get("mx-dropmenu") || customElements.define("mx-dropmenu", DropMenu);
43
+ export { DropMenu as t };
@@ -0,0 +1,27 @@
1
+ var Popover = class extends HTMLElement {
2
+ internals_;
3
+ constructor() {
4
+ super(), this.internals_ = this.attachInternals();
5
+ }
6
+ async connectedCallback() {
7
+ if (!(!this.container || !this.trigger)) {
8
+ if (!("anchorName" in document.documentElement.style)) {
9
+ let { default: e } = await import("./polyfills-Du4RTZDf.js");
10
+ new e(this.container);
11
+ }
12
+ typeof HTMLElement < "u" && typeof HTMLElement.prototype == "object" && "popover" in HTMLElement.prototype && await import("./popover-Bd5oQ1Ic.js");
13
+ }
14
+ }
15
+ get container() {
16
+ let e = this.querySelector("[popover]");
17
+ if (!e) throw Error(`${this.localName} must contain a <div popover> element.`);
18
+ return e;
19
+ }
20
+ get trigger() {
21
+ let e = this.querySelector(`[popovertarget=${this.container?.id}]`);
22
+ if (!e) throw Error(`${this.localName} must contain a <button popovertarget="${this.container.id}">`);
23
+ return e;
24
+ }
25
+ };
26
+ customElements.get("mx-popover") || customElements.define("mx-popover", Popover);
27
+ export { Popover as t };