@pnx-mixtape/mxds 0.0.23 → 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 (299) hide show
  1. package/.storybook/decorators.ts +7 -0
  2. package/.storybook/main.ts +29 -0
  3. package/.storybook/manager.ts +6 -0
  4. package/.storybook/preview.ts +61 -0
  5. package/.storybook/public/demo-logo.svg +4 -0
  6. package/.storybook/public/design-system.svg +1 -0
  7. package/.storybook/public/favicon.svg +7 -0
  8. package/.storybook/public/mixtape-logo.png +0 -0
  9. package/.storybook/public/mixtape.webp +0 -0
  10. package/.storybook/public/pinto.png +0 -0
  11. package/.storybook/public/pinto.svg +1 -0
  12. package/.storybook/public/xb.png +0 -0
  13. package/.storybook/public/xb.svg +1 -0
  14. package/.storybook/src/global.d.ts +16 -0
  15. package/.storybook/src/theme.ts +8 -0
  16. package/.storybook/storybook.css +35 -0
  17. package/.storybook/theme-demo.css +93 -0
  18. package/.storybook/vitest.setup.ts +17 -0
  19. package/dist/build/accordion.css +76 -86
  20. package/dist/build/accordion.entry.js +46 -72
  21. package/dist/build/base.css +1 -993
  22. package/dist/build/breadcrumb.css +1 -55
  23. package/dist/build/button.css +1 -126
  24. package/dist/build/callout.css +1 -11
  25. package/dist/build/card.css +1 -161
  26. package/dist/build/carousel.css +1 -125
  27. package/dist/build/chunks/Accordion-Dwh42fp7.js +42 -0
  28. package/dist/build/chunks/DropMenu-plGsgySm.js +43 -0
  29. package/dist/build/chunks/Popover-Bws25suh.js +27 -0
  30. package/dist/build/chunks/polyfills-Du4RTZDf.js +511 -0
  31. package/dist/build/chunks/popover-Bd5oQ1Ic.js +407 -0
  32. package/dist/build/chunks/utilities-DepaJdUg.js +242 -0
  33. package/dist/build/constants.css +91 -123
  34. package/dist/build/container-grid.css +1 -186
  35. package/dist/build/content-block.css +1 -36
  36. package/dist/build/dialog.css +1 -108
  37. package/dist/build/dialog.entry.js +45 -85
  38. package/dist/build/drop-menu.css +1 -89
  39. package/dist/build/drop-menu.entry.js +2 -2
  40. package/dist/build/drupal.css +1 -66
  41. package/dist/build/filters.css +1 -117
  42. package/dist/build/filters.entry.js +113 -142
  43. package/dist/build/footer.css +1 -141
  44. package/dist/build/form.css +1 -491
  45. package/dist/build/global-alert.css +1 -60
  46. package/dist/build/global-alert.entry.js +51 -75
  47. package/dist/build/grid.css +1 -195
  48. package/dist/build/header.css +1 -149
  49. package/dist/build/header.entry.js +598 -1180
  50. package/dist/build/hero-banner.css +1 -73
  51. package/dist/build/icon.css +1 -399
  52. package/dist/build/in-page-alert.css +1 -93
  53. package/dist/build/in-page-navigation.css +1 -17
  54. package/dist/build/in-page-navigation.entry.js +67 -103
  55. package/dist/build/link-list.css +1 -45
  56. package/dist/build/list-item.css +1 -29
  57. package/dist/build/masthead.css +1 -53
  58. package/dist/build/navigation.css +1 -356
  59. package/dist/build/navigation.entry.js +79 -222
  60. package/dist/build/page.css +1 -65
  61. package/dist/build/pagination.css +1 -111
  62. package/dist/build/popover.css +1 -119
  63. package/dist/build/popover.entry.js +1 -2
  64. package/dist/build/results-bar.css +1 -21
  65. package/dist/build/section.css +1 -147
  66. package/dist/build/side-navigation.css +1 -85
  67. package/dist/build/sidebar.css +1 -53
  68. package/dist/build/social-links.css +1 -20
  69. package/dist/build/steps.css +1 -118
  70. package/dist/build/sticky.css +1 -47
  71. package/dist/build/sticky.entry.js +48 -59
  72. package/dist/build/tabs.css +1 -108
  73. package/dist/build/tabs.entry.js +130 -209
  74. package/dist/build/tag.css +1 -70
  75. package/dist/build/utilities.css +1 -186
  76. package/dist/build/utility-list.css +1 -43
  77. package/dist/build/utility-list.entry.js +52 -80
  78. package/package.json +44 -54
  79. package/src/Atom/Atom.mdx +18 -18
  80. package/src/Atom/Background/{Backgrounds.stories.ts → Background.stories.ts} +2 -1
  81. package/src/Atom/Background/__snapshots__/Background.stories.ts.snap +81 -0
  82. package/src/Atom/Background/_background.css +10 -11
  83. package/src/Atom/Background/backgrounds.twig +6 -4
  84. package/src/Atom/Button/Button.stories.ts +0 -1
  85. package/src/Atom/Button/Button.stories.tsx +2 -0
  86. package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +77 -97
  87. package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +3 -15
  88. package/src/Atom/Button/_buttons-styles.css +18 -6
  89. package/src/Atom/Button/_buttons.css +1 -1
  90. package/src/Atom/DefinitionList/DefinitionList.stories.tsx +2 -1
  91. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap +13 -26
  92. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +2 -29
  93. package/src/Atom/Heading/Heading.stories.tsx +2 -1
  94. package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +9 -13
  95. package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +2 -8
  96. package/src/Atom/Icon/Icon.stories.tsx +2 -1
  97. package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +21 -28
  98. package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +4 -15
  99. package/src/Atom/Icon/_extended-set.css +0 -8
  100. package/src/Atom/Icon/_icon.css +15 -6
  101. package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +6 -9
  102. package/src/Atom/Link/Link.stories.tsx +2 -1
  103. package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +47 -56
  104. package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +4 -22
  105. package/src/Atom/Link/_links.css +1 -0
  106. package/src/Atom/Media/Media.stories.ts +1 -1
  107. package/src/Atom/Media/Media.stories.tsx +2 -1
  108. package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +27 -12
  109. package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +3 -16
  110. package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +5 -8
  111. package/src/Atom/Table/Table.stories.ts +0 -1
  112. package/src/Atom/Table/TableResponsive.stories.ts +0 -1
  113. package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +129 -261
  114. package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +34 -67
  115. package/src/Atom/Text/Text.stories.tsx +2 -1
  116. package/src/Atom/Text/__snapshots__/Text.stories.ts.snap +32 -46
  117. package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +2 -6
  118. package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +6 -11
  119. package/src/Atom/_flow.css +16 -1
  120. package/src/Component/Accordion/Accordion.stories.tsx +2 -0
  121. package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +106 -140
  122. package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +3 -49
  123. package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +52 -81
  124. package/src/Component/Breadcrumb/Breadcrumb.stories.tsx +2 -0
  125. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +29 -33
  126. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +3 -62
  127. package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +9 -11
  128. package/src/Component/Card/Card.stories.tsx +2 -0
  129. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +237 -272
  130. package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +4 -85
  131. package/src/Component/Carousel/Elements/Carousel.ts +10 -7
  132. package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +992 -1187
  133. package/src/Component/ContentBlock/ContentBlock.stories.tsx +2 -0
  134. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +161 -155
  135. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +2 -25
  136. package/src/Component/Dialog/Dialog.stories.tsx +2 -0
  137. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +92 -110
  138. package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +2 -31
  139. package/src/Component/DropMenu/DropMenu.stories.tsx +2 -0
  140. package/src/Component/DropMenu/DropMenu.tsx +1 -3
  141. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +25 -72
  142. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +2 -46
  143. package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap +80 -121
  144. package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +323 -424
  145. package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +2 -0
  146. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +25 -37
  147. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +3 -46
  148. package/src/Component/HeroBanner/HeroBanner.stories.tsx +2 -0
  149. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +105 -106
  150. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.tsx.snap +3 -34
  151. package/src/Component/HeroSearch/HeroSearch.stories.ts +0 -2
  152. package/src/Component/HeroSearch/HeroSearch.stories.tsx +2 -0
  153. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +122 -165
  154. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.tsx.snap +3 -34
  155. package/src/Component/InPageAlert/InPageAlert.stories.tsx +2 -0
  156. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +87 -70
  157. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +5 -65
  158. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +1 -0
  159. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +2 -0
  160. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +88 -208
  161. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -148
  162. package/src/Component/InPageNavigation/in-page-navigation.css +5 -0
  163. package/src/Component/LinkList/LinkList.stories.tsx +2 -1
  164. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +67 -66
  165. package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +2 -32
  166. package/src/Component/ListItem/ListItem.stories.tsx +2 -1
  167. package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +153 -167
  168. package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap +2 -25
  169. package/src/Component/Navigation/Dropdown.stories.tsx +2 -0
  170. package/src/Component/Navigation/Elements/Navigation.ts +5 -5
  171. package/src/Component/Navigation/Navigation.stories.tsx +2 -0
  172. package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +2 -38
  173. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +204 -279
  174. package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +3 -59
  175. package/src/Component/Navigation/_navigation.css +2 -2
  176. package/src/Component/Pagination/Pagination.stories.tsx +2 -0
  177. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +70 -60
  178. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +2 -62
  179. package/src/Component/Popover/Elements/Popover.ts +5 -1
  180. package/src/Component/Popover/Popover.stories.ts +45 -0
  181. package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +366 -470
  182. package/src/Component/Popover/popover.css +3 -4
  183. package/src/Component/ResultsBar/ResultsBar.stories.tsx +2 -0
  184. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.ts.snap +25 -46
  185. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap +4 -50
  186. package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +76 -81
  187. package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +35 -32
  188. package/src/Component/SocialShare/SocialShare.stories.tsx +2 -1
  189. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.ts.snap +11 -27
  190. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap +4 -22
  191. package/src/Component/SocialShare/social-share.twig +1 -0
  192. package/src/Component/Steps/__snapshots__/StepItem.stories.ts.snap +11 -23
  193. package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +142 -173
  194. package/src/Component/Steps/steps.css +4 -3
  195. package/src/Component/Sticky/Sticky.stories.tsx +2 -0
  196. package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +6 -12
  197. package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +2 -10
  198. package/src/Component/Tabs/Tabs.stories.tsx +2 -0
  199. package/src/Component/Tabs/__snapshots__/TabItem.stories.ts.snap +5 -9
  200. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +37 -210
  201. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +2 -116
  202. package/src/Component/Tag/Tag.stories.tsx +2 -0
  203. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +37 -61
  204. package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +2 -6
  205. package/src/Component/Tag/tags.twig +6 -6
  206. package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap +122 -245
  207. package/src/Component/UtilityList/utility-list.css +4 -0
  208. package/src/Component/UtilityList/utility-list.twig +2 -1
  209. package/src/Form/Checkbox/FormCheckbox.stories.tsx +2 -2
  210. package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap +13 -26
  211. package/src/Form/Checkbox/__snapshots__/FormCheckbox.stories.tsx.snap +5 -0
  212. package/src/Form/Description/FormDescription.stories.tsx +2 -1
  213. package/src/Form/Description/__snapshots__/Description.stories.ts.snap +5 -9
  214. package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap +2 -9
  215. package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap +9 -17
  216. package/src/Form/Form/Form.stories.tsx +2 -1
  217. package/src/Form/Form/FormTitle.stories.tsx +2 -1
  218. package/src/Form/Form/__snapshots__/Form.stories.tsx.snap +2 -5
  219. package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap +2 -8
  220. package/src/Form/FormItem/FormItem.stories.tsx +8 -5
  221. package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +88 -129
  222. package/src/Form/Label/FormLabel.stories.tsx +2 -1
  223. package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap +3 -18
  224. package/src/Form/Label/__snapshots__/Label.stories.ts.snap +13 -25
  225. package/src/Form/Radio/FormRadio.stories.tsx +2 -14
  226. package/src/Form/Radio/__snapshots__/FormRadio.stories.tsx.snap +3 -0
  227. package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap +42 -57
  228. package/src/Form/Search/__snapshots__/Search.stories.ts.snap +11 -26
  229. package/src/Form/Select/FormSelect.stories.tsx +2 -1
  230. package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap +2 -22
  231. package/src/Form/Select/__snapshots__/Select.stories.ts.snap +8 -19
  232. package/src/Form/TextInput/FormText.stories.tsx +2 -1
  233. package/src/Form/TextInput/InputDivider.stories.ts +0 -1
  234. package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +2 -12
  235. package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +11 -26
  236. package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +11 -25
  237. package/src/Form/Textarea/FormTextarea.stories.tsx +2 -1
  238. package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +2 -11
  239. package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +5 -11
  240. package/src/Layout/Footer/Footer.stories.ts +18 -1
  241. package/src/Layout/Footer/Footer.stories.tsx +2 -0
  242. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +360 -301
  243. package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap +3 -62
  244. package/src/Layout/Footer/footer.css +16 -35
  245. package/src/Layout/Footer/footer.twig +6 -6
  246. package/src/Layout/Grid/Grid.stories.tsx +2 -0
  247. package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +72 -66
  248. package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +6 -62
  249. package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap +9 -13
  250. package/src/Layout/Header/Header.stories.tsx +2 -1
  251. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +315 -466
  252. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -58
  253. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +86 -87
  254. package/src/Layout/Page/Page.stories.tsx +2 -0
  255. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +2 -81
  256. package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +51 -61
  257. package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +34 -78
  258. package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +54 -89
  259. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +89 -99
  260. package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +4 -34
  261. package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +3 -35
  262. package/src/Layout/Section/section.twig +2 -2
  263. package/src/Layout/Sidebar/Sidebar.stories.tsx +1 -1
  264. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +49 -40
  265. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +4 -44
  266. package/src/Layout/Sidebar/sidebar.css +2 -2
  267. package/src/Layout/Sidebar/sidebar.twig +8 -5
  268. package/src/Utility/_layout-utils.css +9 -1
  269. package/src/constants.css +115 -114
  270. package/src/enums.ts +1 -0
  271. package/src/tokens.js +26 -19
  272. package/dist/build/accordion.entry.js.map +0 -1
  273. package/dist/build/chunks/Accordion-D1HQ0FDq.js +0 -63
  274. package/dist/build/chunks/Accordion-D1HQ0FDq.js.map +0 -1
  275. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js +0 -129
  276. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map +0 -1
  277. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js +0 -70
  278. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map +0 -1
  279. package/dist/build/chunks/polyfills-DnrsypYs.js +0 -812
  280. package/dist/build/chunks/polyfills-DnrsypYs.js.map +0 -1
  281. package/dist/build/chunks/popover-DzUcnIlX.js +0 -797
  282. package/dist/build/chunks/popover-DzUcnIlX.js.map +0 -1
  283. package/dist/build/chunks/popover.entry-BQvyR0d5.js +0 -38
  284. package/dist/build/chunks/popover.entry-BQvyR0d5.js.map +0 -1
  285. package/dist/build/chunks/utilities-Ci7wwNeg.js +0 -148
  286. package/dist/build/chunks/utilities-Ci7wwNeg.js.map +0 -1
  287. package/dist/build/dialog.entry.js.map +0 -1
  288. package/dist/build/drop-menu.entry.js.map +0 -1
  289. package/dist/build/filters.entry.js.map +0 -1
  290. package/dist/build/global-alert.entry.js.map +0 -1
  291. package/dist/build/header.entry.js.map +0 -1
  292. package/dist/build/in-page-navigation.entry.js.map +0 -1
  293. package/dist/build/navigation.entry.js.map +0 -1
  294. package/dist/build/popover.entry.js.map +0 -1
  295. package/dist/build/sticky.entry.js.map +0 -1
  296. package/dist/build/tabs.entry.js.map +0 -1
  297. package/dist/build/utility-list.entry.js.map +0 -1
  298. package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap +0 -176
  299. package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap +0 -110
package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap CHANGED
@@ -1,1198 +1,1003 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`Component/Carousel Carousel smoke-test 1`] = `
4
- <div class="mx-page default">
5
- <mx-carousel class="mx-carousel mx-vertical-flow"
6
- role="group"
7
- >
8
- <div class="mx-carousel__buttons"
9
- data-buttons
10
- >
11
- <button class="mx-carousel__prev mx-button mx-button--icon-only"
12
- type="button"
13
- >
14
- <span class="sr-only">
15
- previous
16
- </span>
17
- <span class="mx-icon mx-icon--chevron-left">
18
- </span>
19
- </button>
20
- <button class="mx-carousel__next mx-button mx-button--icon-only"
21
- type="button"
22
- >
23
- <span class="sr-only">
24
- next
25
- </span>
26
- <span class="mx-icon mx-icon--chevron-right">
27
- </span>
28
- </button>
29
- </div>
30
- <ul class="mx-carousel__scrollable overflowing">
31
- <li>
32
- <div class="mx-container">
33
- <article class="mx-card mx-card--block mx-background--box">
34
- <div class="mx-card__content mx-vertical-flow-flex">
35
- <h3>
36
- Tile 1
37
- </h3>
38
- <div class="mx-text--lede mx-vertical-flow-flex">
39
- <p>
40
- Tiles are just block cards without an image.
41
- </p>
42
- </div>
43
- <a class="mx-link--more"
44
- href="#"
45
- >
46
- <span>
47
- Find out more
48
- </span>
49
- </a>
50
- </div>
51
- </article>
52
- </div>
53
- </li>
54
- <li>
55
- <div class="mx-container">
56
- <article class="mx-card mx-card--block mx-background--box">
57
- <div class="mx-card__content mx-vertical-flow-flex">
58
- <h3>
59
- Tile 2
60
- </h3>
61
- <div class="mx-text--lede mx-vertical-flow-flex">
62
- <p>
63
- Tiles are just block cards without an image.
64
- </p>
65
- </div>
66
- <a class="mx-link--more"
67
- href="#"
68
- >
69
- <span>
70
- Find out more
71
- </span>
72
- </a>
73
- </div>
74
- </article>
75
- </div>
76
- </li>
77
- <li>
78
- <div class="mx-container">
79
- <article class="mx-card mx-card--block mx-background--box">
80
- <div class="mx-card__content mx-vertical-flow-flex">
81
- <h3>
82
- Tile 3
83
- </h3>
84
- <div class="mx-text--lede mx-vertical-flow-flex">
85
- <p>
86
- Tiles are just block cards without an image.
87
- </p>
88
- </div>
89
- <a class="mx-link--more"
90
- href="#"
91
- >
92
- <span>
93
- Find out more
94
- </span>
95
- </a>
96
- </div>
97
- </article>
98
- </div>
99
- </li>
100
- <li>
101
- <div class="mx-container">
102
- <article class="mx-card mx-card--block mx-background--box">
103
- <div class="mx-card__content mx-vertical-flow-flex">
104
- <h3>
105
- Tile 4
106
- </h3>
107
- <div class="mx-text--lede mx-vertical-flow-flex">
108
- <p>
109
- Tiles are just block cards without an image.
110
- </p>
111
- </div>
112
- <a class="mx-link--more"
113
- href="#"
114
- >
115
- <span>
116
- Find out more
117
- </span>
118
- </a>
119
- </div>
120
- </article>
121
- </div>
122
- </li>
123
- <li inert>
124
- <div class="mx-container">
125
- <article class="mx-card mx-card--block mx-background--box">
126
- <div class="mx-card__content mx-vertical-flow-flex">
127
- <h3>
128
- Tile 5
129
- </h3>
130
- <div class="mx-text--lede mx-vertical-flow-flex">
131
- <p>
132
- Tiles are just block cards without an image but may have longer text and trigger height changes..
133
- </p>
134
- </div>
135
- <a class="mx-link--more"
136
- href="#"
137
- >
138
- <span>
139
- Find out more
140
- </span>
141
- </a>
142
- </div>
143
- </article>
144
- </div>
145
- </li>
146
- <li inert>
147
- <div class="mx-container">
148
- <article class="mx-card mx-card--block mx-background--box">
149
- <div class="mx-card__content mx-vertical-flow-flex">
150
- <h3>
151
- Tile 6
152
- </h3>
153
- <div class="mx-text--lede mx-vertical-flow-flex">
154
- <p>
155
- Tiles are just block cards without an image.
156
- </p>
157
- </div>
158
- <a class="mx-link--more"
159
- href="#"
160
- >
161
- <span>
162
- Find out more
163
- </span>
164
- </a>
165
- </div>
166
- </article>
167
- </div>
168
- </li>
169
- <li inert>
170
- <div class="mx-container">
171
- <article class="mx-card mx-card--block mx-background--box">
172
- <div class="mx-card__content mx-vertical-flow-flex">
173
- <h3>
174
- Tile 7
175
- </h3>
176
- <div class="mx-text--lede mx-vertical-flow-flex">
177
- <p>
178
- Tiles are just block cards without an image.
179
- </p>
180
- </div>
181
- <a class="mx-link--more"
182
- href="#"
183
- >
184
- <span>
185
- Find out more
186
- </span>
187
- </a>
188
- </div>
189
- </article>
190
- </div>
191
- </li>
192
- <li inert>
193
- <div class="mx-container">
194
- <article class="mx-card mx-card--block mx-background--box">
195
- <div class="mx-card__content mx-vertical-flow-flex">
196
- <h3>
197
- Tile 8
198
- </h3>
199
- <div class="mx-text--lede mx-vertical-flow-flex">
200
- <p>
201
- Tiles are just block cards without an image.
202
- </p>
203
- </div>
204
- <a class="mx-link--more"
205
- href="#"
206
- >
207
- <span>
208
- Find out more
209
- </span>
210
- </a>
211
- </div>
212
- </article>
213
- </div>
214
- </li>
215
- <li inert>
216
- <div class="mx-container">
217
- <article class="mx-card mx-card--block mx-background--box">
218
- <div class="mx-card__content mx-vertical-flow-flex">
219
- <h3>
220
- Tile 9
221
- </h3>
222
- <div class="mx-text--lede mx-vertical-flow-flex">
223
- <p>
224
- Tiles are just block cards without an image.
225
- </p>
226
- </div>
227
- <a class="mx-link--more"
228
- href="#"
229
- >
230
- <span>
231
- Find out more
232
- </span>
233
- </a>
234
- </div>
235
- </article>
236
- </div>
237
- </li>
238
- <li inert>
239
- <div class="mx-container">
240
- <article class="mx-card mx-card--block mx-background--box">
241
- <div class="mx-card__content mx-vertical-flow-flex">
242
- <h3>
243
- Tile 10
244
- </h3>
245
- <div class="mx-text--lede mx-vertical-flow-flex">
246
- <p>
247
- Tiles are just block cards without an image.
248
- </p>
249
- </div>
250
- <a class="mx-link--more"
251
- href="#"
252
- >
253
- <span>
254
- Find out more
255
- </span>
256
- </a>
257
- </div>
258
- </article>
259
- </div>
260
- </li>
261
- <li inert>
262
- <div class="mx-container">
263
- <article class="mx-card mx-card--block mx-background--box">
264
- <div class="mx-card__content mx-vertical-flow-flex">
265
- <h3>
266
- Tile 11
267
- </h3>
268
- <div class="mx-text--lede mx-vertical-flow-flex">
269
- <p>
270
- Tiles are just block cards without an image.
271
- </p>
272
- </div>
273
- <a class="mx-link--more"
274
- href="#"
275
- >
276
- <span>
277
- Find out more
278
- </span>
279
- </a>
280
- </div>
281
- </article>
282
- </div>
283
- </li>
284
- </ul>
285
- </mx-carousel>
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
+
3
+ exports[`Carousel 1`] = `
4
+ "
5
+ <mx-carousel class="mx-carousel mx-vertical-flow" role="group">
6
+ <div class="mx-carousel__buttons" data-buttons="">
7
+ <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
8
+ <span class="sr-only">previous</span>
9
+ <span class="mx-icon mx-icon--chevron-left"></span>
10
+ </button>
11
+ <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
12
+ <span class="sr-only">next</span>
13
+ <span class="mx-icon mx-icon--chevron-right"></span>
14
+ </button>
15
+ </div>
16
+ <ul class="mx-carousel__scrollable overflowing">
17
+ <li>
18
+ <div class="mx-container">
19
+ <article class="mx-card mx-card--block mx-background--box">
20
+ <div class="mx-card__content mx-vertical-flow-flex">
21
+
22
+ <h3>Tile 1</h3>
23
+
24
+
25
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
26
+
27
+
28
+ <a class="mx-link--more" href="#">
29
+
30
+ <span>Find out more</span>
31
+
32
+ </a>
33
+
34
+ </div>
35
+ </article>
286
36
  </div>
287
- `;
37
+ </li>
38
+ <li>
39
+ <div class="mx-container">
40
+ <article class="mx-card mx-card--block mx-background--box">
41
+ <div class="mx-card__content mx-vertical-flow-flex">
42
+
43
+ <h3>Tile 2</h3>
288
44
 
289
- exports[`Component/Carousel Counters smoke-test 1`] = `
290
- <div class="mx-page default">
291
- <mx-carousel class="mx-carousel mx-vertical-flow"
292
- role="group"
293
- >
294
- <div class="mx-carousel__buttons"
295
- data-buttons
296
- >
297
- <button class="mx-carousel__prev mx-button mx-button--icon-only"
298
- type="button"
299
- >
300
- <span class="sr-only">
301
- previous
302
- </span>
303
- <span class="mx-icon mx-icon--chevron-left">
304
- </span>
305
- </button>
306
- <button class="mx-carousel__next mx-button mx-button--icon-only"
307
- type="button"
308
- >
309
- <span class="sr-only">
310
- next
311
- </span>
312
- <span class="mx-icon mx-icon--chevron-right">
313
- </span>
314
- </button>
315
- </div>
316
- <ul class="mx-carousel__scrollable overflowing">
317
- <li>
318
- <div class="mx-container">
319
- <article class="mx-card mx-card--block mx-background--box">
320
- <div class="mx-card__content mx-vertical-flow-flex">
321
- <h3>
322
- Tile 1
323
- </h3>
324
- <div class="mx-text--lede mx-vertical-flow-flex">
325
- <p>
326
- Tiles are just block cards without an image.
327
- </p>
328
- </div>
329
- <a class="mx-link--more"
330
- href="#"
331
- >
332
- <span>
333
- Find out more
334
- </span>
335
- </a>
336
- </div>
337
- </article>
338
- </div>
339
- </li>
340
- <li>
341
- <div class="mx-container">
342
- <article class="mx-card mx-card--block mx-background--box">
343
- <div class="mx-card__content mx-vertical-flow-flex">
344
- <h3>
345
- Tile 2
346
- </h3>
347
- <div class="mx-text--lede mx-vertical-flow-flex">
348
- <p>
349
- Tiles are just block cards without an image.
350
- </p>
351
- </div>
352
- <a class="mx-link--more"
353
- href="#"
354
- >
355
- <span>
356
- Find out more
357
- </span>
358
- </a>
359
- </div>
360
- </article>
361
- </div>
362
- </li>
363
- <li>
364
- <div class="mx-container">
365
- <article class="mx-card mx-card--block mx-background--box">
366
- <div class="mx-card__content mx-vertical-flow-flex">
367
- <h3>
368
- Tile 3
369
- </h3>
370
- <div class="mx-text--lede mx-vertical-flow-flex">
371
- <p>
372
- Tiles are just block cards without an image.
373
- </p>
374
- </div>
375
- <a class="mx-link--more"
376
- href="#"
377
- >
378
- <span>
379
- Find out more
380
- </span>
381
- </a>
382
- </div>
383
- </article>
384
- </div>
385
- </li>
386
- <li>
387
- <div class="mx-container">
388
- <article class="mx-card mx-card--block mx-background--box">
389
- <div class="mx-card__content mx-vertical-flow-flex">
390
- <h3>
391
- Tile 4
392
- </h3>
393
- <div class="mx-text--lede mx-vertical-flow-flex">
394
- <p>
395
- Tiles are just block cards without an image.
396
- </p>
397
- </div>
398
- <a class="mx-link--more"
399
- href="#"
400
- >
401
- <span>
402
- Find out more
403
- </span>
404
- </a>
405
- </div>
406
- </article>
407
- </div>
408
- </li>
409
- <li inert>
410
- <div class="mx-container">
411
- <article class="mx-card mx-card--block mx-background--box">
412
- <div class="mx-card__content mx-vertical-flow-flex">
413
- <h3>
414
- Tile 5
415
- </h3>
416
- <div class="mx-text--lede mx-vertical-flow-flex">
417
- <p>
418
- Tiles are just block cards without an image but may have longer text and trigger height changes..
419
- </p>
420
- </div>
421
- <a class="mx-link--more"
422
- href="#"
423
- >
424
- <span>
425
- Find out more
426
- </span>
427
- </a>
428
- </div>
429
- </article>
430
- </div>
431
- </li>
432
- <li inert>
433
- <div class="mx-container">
434
- <article class="mx-card mx-card--block mx-background--box">
435
- <div class="mx-card__content mx-vertical-flow-flex">
436
- <h3>
437
- Tile 6
438
- </h3>
439
- <div class="mx-text--lede mx-vertical-flow-flex">
440
- <p>
441
- Tiles are just block cards without an image.
442
- </p>
443
- </div>
444
- <a class="mx-link--more"
445
- href="#"
446
- >
447
- <span>
448
- Find out more
449
- </span>
450
- </a>
451
- </div>
452
- </article>
453
- </div>
454
- </li>
455
- <li inert>
456
- <div class="mx-container">
457
- <article class="mx-card mx-card--block mx-background--box">
458
- <div class="mx-card__content mx-vertical-flow-flex">
459
- <h3>
460
- Tile 7
461
- </h3>
462
- <div class="mx-text--lede mx-vertical-flow-flex">
463
- <p>
464
- Tiles are just block cards without an image.
465
- </p>
466
- </div>
467
- <a class="mx-link--more"
468
- href="#"
469
- >
470
- <span>
471
- Find out more
472
- </span>
473
- </a>
474
- </div>
475
- </article>
476
- </div>
477
- </li>
478
- <li inert>
479
- <div class="mx-container">
480
- <article class="mx-card mx-card--block mx-background--box">
481
- <div class="mx-card__content mx-vertical-flow-flex">
482
- <h3>
483
- Tile 8
484
- </h3>
485
- <div class="mx-text--lede mx-vertical-flow-flex">
486
- <p>
487
- Tiles are just block cards without an image.
488
- </p>
489
- </div>
490
- <a class="mx-link--more"
491
- href="#"
492
- >
493
- <span>
494
- Find out more
495
- </span>
496
- </a>
497
- </div>
498
- </article>
499
- </div>
500
- </li>
501
- <li inert>
502
- <div class="mx-container">
503
- <article class="mx-card mx-card--block mx-background--box">
504
- <div class="mx-card__content mx-vertical-flow-flex">
505
- <h3>
506
- Tile 9
507
- </h3>
508
- <div class="mx-text--lede mx-vertical-flow-flex">
509
- <p>
510
- Tiles are just block cards without an image.
511
- </p>
512
- </div>
513
- <a class="mx-link--more"
514
- href="#"
515
- >
516
- <span>
517
- Find out more
518
- </span>
519
- </a>
520
- </div>
521
- </article>
522
- </div>
523
- </li>
524
- <li inert>
525
- <div class="mx-container">
526
- <article class="mx-card mx-card--block mx-background--box">
527
- <div class="mx-card__content mx-vertical-flow-flex">
528
- <h3>
529
- Tile 10
530
- </h3>
531
- <div class="mx-text--lede mx-vertical-flow-flex">
532
- <p>
533
- Tiles are just block cards without an image.
534
- </p>
535
- </div>
536
- <a class="mx-link--more"
537
- href="#"
538
- >
539
- <span>
540
- Find out more
541
- </span>
542
- </a>
543
- </div>
544
- </article>
545
- </div>
546
- </li>
547
- <li inert>
548
- <div class="mx-container">
549
- <article class="mx-card mx-card--block mx-background--box">
550
- <div class="mx-card__content mx-vertical-flow-flex">
551
- <h3>
552
- Tile 11
553
- </h3>
554
- <div class="mx-text--lede mx-vertical-flow-flex">
555
- <p>
556
- Tiles are just block cards without an image.
557
- </p>
558
- </div>
559
- <a class="mx-link--more"
560
- href="#"
561
- >
562
- <span>
563
- Find out more
564
- </span>
565
- </a>
566
- </div>
567
- </article>
568
- </div>
569
- </li>
570
- </ul>
571
- <ol class="mx-carousel__pagination"
572
- data-pagination="counter"
573
- >
574
- <li>
575
- <button type="button"
576
- data-index="0"
577
- disabled
578
- >
579
- 1
580
- </button>
581
- </li>
582
- <li>
583
- <button type="button"
584
- data-index="1"
585
- >
586
- 2
587
- </button>
588
- </li>
589
- <li>
590
- <button type="button"
591
- data-index="2"
592
- >
593
- 3
594
- </button>
595
- </li>
596
- </ol>
597
- </mx-carousel>
45
+
46
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
47
+
48
+
49
+ <a class="mx-link--more" href="#">
50
+
51
+ <span>Find out more</span>
52
+
53
+ </a>
54
+
55
+ </div>
56
+ </article>
598
57
  </div>
599
- `;
58
+ </li>
59
+ <li>
60
+ <div class="mx-container">
61
+ <article class="mx-card mx-card--block mx-background--box">
62
+ <div class="mx-card__content mx-vertical-flow-flex">
63
+
64
+ <h3>Tile 3</h3>
65
+
66
+
67
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
68
+
69
+
70
+ <a class="mx-link--more" href="#">
71
+
72
+ <span>Find out more</span>
73
+
74
+ </a>
75
+
76
+ </div>
77
+ </article>
78
+ </div>
79
+ </li>
80
+ <li>
81
+ <div class="mx-container">
82
+ <article class="mx-card mx-card--block mx-background--box">
83
+ <div class="mx-card__content mx-vertical-flow-flex">
84
+
85
+ <h3>Tile 4</h3>
86
+
87
+
88
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
89
+
90
+
91
+ <a class="mx-link--more" href="#">
92
+
93
+ <span>Find out more</span>
94
+
95
+ </a>
96
+
97
+ </div>
98
+ </article>
99
+ </div>
100
+ </li>
101
+ <li inert="">
102
+ <div class="mx-container">
103
+ <article class="mx-card mx-card--block mx-background--box">
104
+ <div class="mx-card__content mx-vertical-flow-flex">
105
+
106
+ <h3>Tile 5</h3>
107
+
108
+
109
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
110
+
111
+
112
+ <a class="mx-link--more" href="#">
113
+
114
+ <span>Find out more</span>
115
+
116
+ </a>
117
+
118
+ </div>
119
+ </article>
120
+ </div>
121
+ </li>
122
+ <li inert="">
123
+ <div class="mx-container">
124
+ <article class="mx-card mx-card--block mx-background--box">
125
+ <div class="mx-card__content mx-vertical-flow-flex">
126
+
127
+ <h3>Tile 6</h3>
128
+
129
+
130
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
131
+
132
+
133
+ <a class="mx-link--more" href="#">
134
+
135
+ <span>Find out more</span>
136
+
137
+ </a>
600
138
 
601
- exports[`Component/Carousel Loop smoke-test 1`] = `
602
- <div class="mx-page default">
603
- <mx-carousel class="mx-carousel mx-vertical-flow"
604
- role="group"
605
- loop
606
- >
607
- <div class="mx-carousel__buttons"
608
- data-buttons
609
- >
610
- <button class="mx-carousel__prev mx-button mx-button--icon-only"
611
- type="button"
612
- >
613
- <span class="sr-only">
614
- previous
615
- </span>
616
- <span class="mx-icon mx-icon--chevron-left">
617
- </span>
618
- </button>
619
- <button class="mx-carousel__next mx-button mx-button--icon-only"
620
- type="button"
621
- >
622
- <span class="sr-only">
623
- next
624
- </span>
625
- <span class="mx-icon mx-icon--chevron-right">
626
- </span>
627
- </button>
628
- </div>
629
- <ul class="mx-carousel__scrollable overflowing">
630
- <li>
631
- <div class="mx-container">
632
- <article class="mx-card mx-card--block mx-background--box">
633
- <div class="mx-card__content mx-vertical-flow-flex">
634
- <h3>
635
- Tile 1
636
- </h3>
637
- <div class="mx-text--lede mx-vertical-flow-flex">
638
- <p>
639
- Tiles are just block cards without an image.
640
- </p>
641
- </div>
642
- <a class="mx-link--more"
643
- href="#"
644
- >
645
- <span>
646
- Find out more
647
- </span>
648
- </a>
649
- </div>
650
- </article>
651
- </div>
652
- </li>
653
- <li>
654
- <div class="mx-container">
655
- <article class="mx-card mx-card--block mx-background--box">
656
- <div class="mx-card__content mx-vertical-flow-flex">
657
- <h3>
658
- Tile 2
659
- </h3>
660
- <div class="mx-text--lede mx-vertical-flow-flex">
661
- <p>
662
- Tiles are just block cards without an image.
663
- </p>
664
- </div>
665
- <a class="mx-link--more"
666
- href="#"
667
- >
668
- <span>
669
- Find out more
670
- </span>
671
- </a>
672
- </div>
673
- </article>
674
- </div>
675
- </li>
676
- <li>
677
- <div class="mx-container">
678
- <article class="mx-card mx-card--block mx-background--box">
679
- <div class="mx-card__content mx-vertical-flow-flex">
680
- <h3>
681
- Tile 3
682
- </h3>
683
- <div class="mx-text--lede mx-vertical-flow-flex">
684
- <p>
685
- Tiles are just block cards without an image.
686
- </p>
687
- </div>
688
- <a class="mx-link--more"
689
- href="#"
690
- >
691
- <span>
692
- Find out more
693
- </span>
694
- </a>
695
- </div>
696
- </article>
697
- </div>
698
- </li>
699
- <li>
700
- <div class="mx-container">
701
- <article class="mx-card mx-card--block mx-background--box">
702
- <div class="mx-card__content mx-vertical-flow-flex">
703
- <h3>
704
- Tile 4
705
- </h3>
706
- <div class="mx-text--lede mx-vertical-flow-flex">
707
- <p>
708
- Tiles are just block cards without an image.
709
- </p>
710
- </div>
711
- <a class="mx-link--more"
712
- href="#"
713
- >
714
- <span>
715
- Find out more
716
- </span>
717
- </a>
718
- </div>
719
- </article>
720
- </div>
721
- </li>
722
- <li inert>
723
- <div class="mx-container">
724
- <article class="mx-card mx-card--block mx-background--box">
725
- <div class="mx-card__content mx-vertical-flow-flex">
726
- <h3>
727
- Tile 5
728
- </h3>
729
- <div class="mx-text--lede mx-vertical-flow-flex">
730
- <p>
731
- Tiles are just block cards without an image but may have longer text and trigger height changes..
732
- </p>
733
- </div>
734
- <a class="mx-link--more"
735
- href="#"
736
- >
737
- <span>
738
- Find out more
739
- </span>
740
- </a>
741
- </div>
742
- </article>
743
- </div>
744
- </li>
745
- <li inert>
746
- <div class="mx-container">
747
- <article class="mx-card mx-card--block mx-background--box">
748
- <div class="mx-card__content mx-vertical-flow-flex">
749
- <h3>
750
- Tile 6
751
- </h3>
752
- <div class="mx-text--lede mx-vertical-flow-flex">
753
- <p>
754
- Tiles are just block cards without an image.
755
- </p>
756
- </div>
757
- <a class="mx-link--more"
758
- href="#"
759
- >
760
- <span>
761
- Find out more
762
- </span>
763
- </a>
764
- </div>
765
- </article>
766
- </div>
767
- </li>
768
- <li inert>
769
- <div class="mx-container">
770
- <article class="mx-card mx-card--block mx-background--box">
771
- <div class="mx-card__content mx-vertical-flow-flex">
772
- <h3>
773
- Tile 7
774
- </h3>
775
- <div class="mx-text--lede mx-vertical-flow-flex">
776
- <p>
777
- Tiles are just block cards without an image.
778
- </p>
779
- </div>
780
- <a class="mx-link--more"
781
- href="#"
782
- >
783
- <span>
784
- Find out more
785
- </span>
786
- </a>
787
- </div>
788
- </article>
789
- </div>
790
- </li>
791
- <li inert>
792
- <div class="mx-container">
793
- <article class="mx-card mx-card--block mx-background--box">
794
- <div class="mx-card__content mx-vertical-flow-flex">
795
- <h3>
796
- Tile 8
797
- </h3>
798
- <div class="mx-text--lede mx-vertical-flow-flex">
799
- <p>
800
- Tiles are just block cards without an image.
801
- </p>
802
- </div>
803
- <a class="mx-link--more"
804
- href="#"
805
- >
806
- <span>
807
- Find out more
808
- </span>
809
- </a>
810
- </div>
811
- </article>
812
- </div>
813
- </li>
814
- <li inert>
815
- <div class="mx-container">
816
- <article class="mx-card mx-card--block mx-background--box">
817
- <div class="mx-card__content mx-vertical-flow-flex">
818
- <h3>
819
- Tile 9
820
- </h3>
821
- <div class="mx-text--lede mx-vertical-flow-flex">
822
- <p>
823
- Tiles are just block cards without an image.
824
- </p>
825
- </div>
826
- <a class="mx-link--more"
827
- href="#"
828
- >
829
- <span>
830
- Find out more
831
- </span>
832
- </a>
833
- </div>
834
- </article>
835
- </div>
836
- </li>
837
- <li inert>
838
- <div class="mx-container">
839
- <article class="mx-card mx-card--block mx-background--box">
840
- <div class="mx-card__content mx-vertical-flow-flex">
841
- <h3>
842
- Tile 10
843
- </h3>
844
- <div class="mx-text--lede mx-vertical-flow-flex">
845
- <p>
846
- Tiles are just block cards without an image.
847
- </p>
848
- </div>
849
- <a class="mx-link--more"
850
- href="#"
851
- >
852
- <span>
853
- Find out more
854
- </span>
855
- </a>
856
- </div>
857
- </article>
858
- </div>
859
- </li>
860
- <li inert>
861
- <div class="mx-container">
862
- <article class="mx-card mx-card--block mx-background--box">
863
- <div class="mx-card__content mx-vertical-flow-flex">
864
- <h3>
865
- Tile 11
866
- </h3>
867
- <div class="mx-text--lede mx-vertical-flow-flex">
868
- <p>
869
- Tiles are just block cards without an image.
870
- </p>
871
- </div>
872
- <a class="mx-link--more"
873
- href="#"
874
- >
875
- <span>
876
- Find out more
877
- </span>
878
- </a>
879
- </div>
880
- </article>
881
- </div>
882
- </li>
883
- </ul>
139
+ </div>
140
+ </article>
141
+ </div>
142
+ </li>
143
+ <li inert="">
144
+ <div class="mx-container">
145
+ <article class="mx-card mx-card--block mx-background--box">
146
+ <div class="mx-card__content mx-vertical-flow-flex">
147
+
148
+ <h3>Tile 7</h3>
149
+
150
+
151
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
152
+
153
+
154
+ <a class="mx-link--more" href="#">
155
+
156
+ <span>Find out more</span>
157
+
158
+ </a>
159
+
160
+ </div>
161
+ </article>
162
+ </div>
163
+ </li>
164
+ <li inert="">
165
+ <div class="mx-container">
166
+ <article class="mx-card mx-card--block mx-background--box">
167
+ <div class="mx-card__content mx-vertical-flow-flex">
168
+
169
+ <h3>Tile 8</h3>
170
+
171
+
172
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
173
+
174
+
175
+ <a class="mx-link--more" href="#">
176
+
177
+ <span>Find out more</span>
178
+
179
+ </a>
180
+
181
+ </div>
182
+ </article>
183
+ </div>
184
+ </li>
185
+ <li inert="">
186
+ <div class="mx-container">
187
+ <article class="mx-card mx-card--block mx-background--box">
188
+ <div class="mx-card__content mx-vertical-flow-flex">
189
+
190
+ <h3>Tile 9</h3>
191
+
192
+
193
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
194
+
195
+
196
+ <a class="mx-link--more" href="#">
197
+
198
+ <span>Find out more</span>
199
+
200
+ </a>
201
+
202
+ </div>
203
+ </article>
204
+ </div>
205
+ </li>
206
+ <li inert="">
207
+ <div class="mx-container">
208
+ <article class="mx-card mx-card--block mx-background--box">
209
+ <div class="mx-card__content mx-vertical-flow-flex">
210
+
211
+ <h3>Tile 10</h3>
212
+
213
+
214
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
215
+
216
+
217
+ <a class="mx-link--more" href="#">
218
+
219
+ <span>Find out more</span>
220
+
221
+ </a>
222
+
223
+ </div>
224
+ </article>
225
+ </div>
226
+ </li>
227
+ <li inert="">
228
+ <div class="mx-container">
229
+ <article class="mx-card mx-card--block mx-background--box">
230
+ <div class="mx-card__content mx-vertical-flow-flex">
231
+
232
+ <h3>Tile 11</h3>
233
+
234
+
235
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
236
+
237
+
238
+ <a class="mx-link--more" href="#">
239
+
240
+ <span>Find out more</span>
241
+
242
+ </a>
243
+
244
+ </div>
245
+ </article>
246
+ </div>
247
+ </li>
248
+ </ul>
884
249
  </mx-carousel>
250
+ "
251
+ `;
252
+
253
+ exports[`Counters 1`] = `
254
+ "
255
+ <mx-carousel class="mx-carousel mx-vertical-flow" role="group">
256
+ <div class="mx-carousel__buttons" data-buttons="">
257
+ <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
258
+ <span class="sr-only">previous</span>
259
+ <span class="mx-icon mx-icon--chevron-left"></span>
260
+ </button>
261
+ <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
262
+ <span class="sr-only">next</span>
263
+ <span class="mx-icon mx-icon--chevron-right"></span>
264
+ </button>
265
+ </div>
266
+ <ul class="mx-carousel__scrollable overflowing">
267
+ <li>
268
+ <div class="mx-container">
269
+ <article class="mx-card mx-card--block mx-background--box">
270
+ <div class="mx-card__content mx-vertical-flow-flex">
271
+
272
+ <h3>Tile 1</h3>
273
+
274
+
275
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
276
+
277
+
278
+ <a class="mx-link--more" href="#">
279
+
280
+ <span>Find out more</span>
281
+
282
+ </a>
283
+
284
+ </div>
285
+ </article>
286
+ </div>
287
+ </li>
288
+ <li>
289
+ <div class="mx-container">
290
+ <article class="mx-card mx-card--block mx-background--box">
291
+ <div class="mx-card__content mx-vertical-flow-flex">
292
+
293
+ <h3>Tile 2</h3>
294
+
295
+
296
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
297
+
298
+
299
+ <a class="mx-link--more" href="#">
300
+
301
+ <span>Find out more</span>
302
+
303
+ </a>
304
+
305
+ </div>
306
+ </article>
307
+ </div>
308
+ </li>
309
+ <li>
310
+ <div class="mx-container">
311
+ <article class="mx-card mx-card--block mx-background--box">
312
+ <div class="mx-card__content mx-vertical-flow-flex">
313
+
314
+ <h3>Tile 3</h3>
315
+
316
+
317
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
318
+
319
+
320
+ <a class="mx-link--more" href="#">
321
+
322
+ <span>Find out more</span>
323
+
324
+ </a>
325
+
326
+ </div>
327
+ </article>
328
+ </div>
329
+ </li>
330
+ <li>
331
+ <div class="mx-container">
332
+ <article class="mx-card mx-card--block mx-background--box">
333
+ <div class="mx-card__content mx-vertical-flow-flex">
334
+
335
+ <h3>Tile 4</h3>
336
+
337
+
338
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
339
+
340
+
341
+ <a class="mx-link--more" href="#">
342
+
343
+ <span>Find out more</span>
344
+
345
+ </a>
346
+
347
+ </div>
348
+ </article>
349
+ </div>
350
+ </li>
351
+ <li inert="">
352
+ <div class="mx-container">
353
+ <article class="mx-card mx-card--block mx-background--box">
354
+ <div class="mx-card__content mx-vertical-flow-flex">
355
+
356
+ <h3>Tile 5</h3>
357
+
358
+
359
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
360
+
361
+
362
+ <a class="mx-link--more" href="#">
363
+
364
+ <span>Find out more</span>
365
+
366
+ </a>
367
+
368
+ </div>
369
+ </article>
370
+ </div>
371
+ </li>
372
+ <li inert="">
373
+ <div class="mx-container">
374
+ <article class="mx-card mx-card--block mx-background--box">
375
+ <div class="mx-card__content mx-vertical-flow-flex">
376
+
377
+ <h3>Tile 6</h3>
378
+
379
+
380
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
381
+
382
+
383
+ <a class="mx-link--more" href="#">
384
+
385
+ <span>Find out more</span>
386
+
387
+ </a>
388
+
389
+ </div>
390
+ </article>
885
391
  </div>
392
+ </li>
393
+ <li inert="">
394
+ <div class="mx-container">
395
+ <article class="mx-card mx-card--block mx-background--box">
396
+ <div class="mx-card__content mx-vertical-flow-flex">
397
+
398
+ <h3>Tile 7</h3>
399
+
400
+
401
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
402
+
403
+
404
+ <a class="mx-link--more" href="#">
405
+
406
+ <span>Find out more</span>
407
+
408
+ </a>
409
+
410
+ </div>
411
+ </article>
412
+ </div>
413
+ </li>
414
+ <li inert="">
415
+ <div class="mx-container">
416
+ <article class="mx-card mx-card--block mx-background--box">
417
+ <div class="mx-card__content mx-vertical-flow-flex">
418
+
419
+ <h3>Tile 8</h3>
420
+
421
+
422
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
423
+
424
+
425
+ <a class="mx-link--more" href="#">
426
+
427
+ <span>Find out more</span>
428
+
429
+ </a>
430
+
431
+ </div>
432
+ </article>
433
+ </div>
434
+ </li>
435
+ <li inert="">
436
+ <div class="mx-container">
437
+ <article class="mx-card mx-card--block mx-background--box">
438
+ <div class="mx-card__content mx-vertical-flow-flex">
439
+
440
+ <h3>Tile 9</h3>
441
+
442
+
443
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
444
+
445
+
446
+ <a class="mx-link--more" href="#">
447
+
448
+ <span>Find out more</span>
449
+
450
+ </a>
451
+
452
+ </div>
453
+ </article>
454
+ </div>
455
+ </li>
456
+ <li inert="">
457
+ <div class="mx-container">
458
+ <article class="mx-card mx-card--block mx-background--box">
459
+ <div class="mx-card__content mx-vertical-flow-flex">
460
+
461
+ <h3>Tile 10</h3>
462
+
463
+
464
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
465
+
466
+
467
+ <a class="mx-link--more" href="#">
468
+
469
+ <span>Find out more</span>
470
+
471
+ </a>
472
+
473
+ </div>
474
+ </article>
475
+ </div>
476
+ </li>
477
+ <li inert="">
478
+ <div class="mx-container">
479
+ <article class="mx-card mx-card--block mx-background--box">
480
+ <div class="mx-card__content mx-vertical-flow-flex">
481
+
482
+ <h3>Tile 11</h3>
483
+
484
+
485
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
486
+
487
+
488
+ <a class="mx-link--more" href="#">
489
+
490
+ <span>Find out more</span>
491
+
492
+ </a>
493
+
494
+ </div>
495
+ </article>
496
+ </div>
497
+ </li>
498
+ </ul>
499
+ <ol class="mx-carousel__pagination" data-pagination="counter" hidden=""></ol>
500
+ </mx-carousel>
501
+ "
886
502
  `;
887
503
 
888
- exports[`Component/Carousel Paginated smoke-test 1`] = `
889
- <div class="mx-page default">
890
- <mx-carousel class="mx-carousel mx-vertical-flow"
891
- role="group"
892
- >
893
- <div class="mx-carousel__buttons"
894
- data-buttons
895
- >
896
- <button class="mx-carousel__prev mx-button mx-button--icon-only"
897
- type="button"
898
- >
899
- <span class="sr-only">
900
- previous
901
- </span>
902
- <span class="mx-icon mx-icon--chevron-left">
903
- </span>
904
- </button>
905
- <button class="mx-carousel__next mx-button mx-button--icon-only"
906
- type="button"
907
- >
908
- <span class="sr-only">
909
- next
910
- </span>
911
- <span class="mx-icon mx-icon--chevron-right">
912
- </span>
913
- </button>
914
- </div>
915
- <ul class="mx-carousel__scrollable overflowing">
916
- <li>
917
- <div class="mx-container">
918
- <article class="mx-card mx-card--block mx-background--box">
919
- <div class="mx-card__content mx-vertical-flow-flex">
920
- <h3>
921
- Tile 1
922
- </h3>
923
- <div class="mx-text--lede mx-vertical-flow-flex">
924
- <p>
925
- Tiles are just block cards without an image.
926
- </p>
927
- </div>
928
- <a class="mx-link--more"
929
- href="#"
930
- >
931
- <span>
932
- Find out more
933
- </span>
934
- </a>
935
- </div>
936
- </article>
937
- </div>
938
- </li>
939
- <li>
940
- <div class="mx-container">
941
- <article class="mx-card mx-card--block mx-background--box">
942
- <div class="mx-card__content mx-vertical-flow-flex">
943
- <h3>
944
- Tile 2
945
- </h3>
946
- <div class="mx-text--lede mx-vertical-flow-flex">
947
- <p>
948
- Tiles are just block cards without an image.
949
- </p>
950
- </div>
951
- <a class="mx-link--more"
952
- href="#"
953
- >
954
- <span>
955
- Find out more
956
- </span>
957
- </a>
958
- </div>
959
- </article>
960
- </div>
961
- </li>
962
- <li>
963
- <div class="mx-container">
964
- <article class="mx-card mx-card--block mx-background--box">
965
- <div class="mx-card__content mx-vertical-flow-flex">
966
- <h3>
967
- Tile 3
968
- </h3>
969
- <div class="mx-text--lede mx-vertical-flow-flex">
970
- <p>
971
- Tiles are just block cards without an image.
972
- </p>
973
- </div>
974
- <a class="mx-link--more"
975
- href="#"
976
- >
977
- <span>
978
- Find out more
979
- </span>
980
- </a>
981
- </div>
982
- </article>
983
- </div>
984
- </li>
985
- <li>
986
- <div class="mx-container">
987
- <article class="mx-card mx-card--block mx-background--box">
988
- <div class="mx-card__content mx-vertical-flow-flex">
989
- <h3>
990
- Tile 4
991
- </h3>
992
- <div class="mx-text--lede mx-vertical-flow-flex">
993
- <p>
994
- Tiles are just block cards without an image.
995
- </p>
996
- </div>
997
- <a class="mx-link--more"
998
- href="#"
999
- >
1000
- <span>
1001
- Find out more
1002
- </span>
1003
- </a>
1004
- </div>
1005
- </article>
1006
- </div>
1007
- </li>
1008
- <li inert>
1009
- <div class="mx-container">
1010
- <article class="mx-card mx-card--block mx-background--box">
1011
- <div class="mx-card__content mx-vertical-flow-flex">
1012
- <h3>
1013
- Tile 5
1014
- </h3>
1015
- <div class="mx-text--lede mx-vertical-flow-flex">
1016
- <p>
1017
- Tiles are just block cards without an image but may have longer text and trigger height changes..
1018
- </p>
1019
- </div>
1020
- <a class="mx-link--more"
1021
- href="#"
1022
- >
1023
- <span>
1024
- Find out more
1025
- </span>
1026
- </a>
1027
- </div>
1028
- </article>
1029
- </div>
1030
- </li>
1031
- <li inert>
1032
- <div class="mx-container">
1033
- <article class="mx-card mx-card--block mx-background--box">
1034
- <div class="mx-card__content mx-vertical-flow-flex">
1035
- <h3>
1036
- Tile 6
1037
- </h3>
1038
- <div class="mx-text--lede mx-vertical-flow-flex">
1039
- <p>
1040
- Tiles are just block cards without an image.
1041
- </p>
1042
- </div>
1043
- <a class="mx-link--more"
1044
- href="#"
1045
- >
1046
- <span>
1047
- Find out more
1048
- </span>
1049
- </a>
1050
- </div>
1051
- </article>
1052
- </div>
1053
- </li>
1054
- <li inert>
1055
- <div class="mx-container">
1056
- <article class="mx-card mx-card--block mx-background--box">
1057
- <div class="mx-card__content mx-vertical-flow-flex">
1058
- <h3>
1059
- Tile 7
1060
- </h3>
1061
- <div class="mx-text--lede mx-vertical-flow-flex">
1062
- <p>
1063
- Tiles are just block cards without an image.
1064
- </p>
1065
- </div>
1066
- <a class="mx-link--more"
1067
- href="#"
1068
- >
1069
- <span>
1070
- Find out more
1071
- </span>
1072
- </a>
1073
- </div>
1074
- </article>
1075
- </div>
1076
- </li>
1077
- <li inert>
1078
- <div class="mx-container">
1079
- <article class="mx-card mx-card--block mx-background--box">
1080
- <div class="mx-card__content mx-vertical-flow-flex">
1081
- <h3>
1082
- Tile 8
1083
- </h3>
1084
- <div class="mx-text--lede mx-vertical-flow-flex">
1085
- <p>
1086
- Tiles are just block cards without an image.
1087
- </p>
1088
- </div>
1089
- <a class="mx-link--more"
1090
- href="#"
1091
- >
1092
- <span>
1093
- Find out more
1094
- </span>
1095
- </a>
1096
- </div>
1097
- </article>
1098
- </div>
1099
- </li>
1100
- <li inert>
1101
- <div class="mx-container">
1102
- <article class="mx-card mx-card--block mx-background--box">
1103
- <div class="mx-card__content mx-vertical-flow-flex">
1104
- <h3>
1105
- Tile 9
1106
- </h3>
1107
- <div class="mx-text--lede mx-vertical-flow-flex">
1108
- <p>
1109
- Tiles are just block cards without an image.
1110
- </p>
1111
- </div>
1112
- <a class="mx-link--more"
1113
- href="#"
1114
- >
1115
- <span>
1116
- Find out more
1117
- </span>
1118
- </a>
1119
- </div>
1120
- </article>
1121
- </div>
1122
- </li>
1123
- <li inert>
1124
- <div class="mx-container">
1125
- <article class="mx-card mx-card--block mx-background--box">
1126
- <div class="mx-card__content mx-vertical-flow-flex">
1127
- <h3>
1128
- Tile 10
1129
- </h3>
1130
- <div class="mx-text--lede mx-vertical-flow-flex">
1131
- <p>
1132
- Tiles are just block cards without an image.
1133
- </p>
1134
- </div>
1135
- <a class="mx-link--more"
1136
- href="#"
1137
- >
1138
- <span>
1139
- Find out more
1140
- </span>
1141
- </a>
1142
- </div>
1143
- </article>
1144
- </div>
1145
- </li>
1146
- <li inert>
1147
- <div class="mx-container">
1148
- <article class="mx-card mx-card--block mx-background--box">
1149
- <div class="mx-card__content mx-vertical-flow-flex">
1150
- <h3>
1151
- Tile 11
1152
- </h3>
1153
- <div class="mx-text--lede mx-vertical-flow-flex">
1154
- <p>
1155
- Tiles are just block cards without an image.
1156
- </p>
1157
- </div>
1158
- <a class="mx-link--more"
1159
- href="#"
1160
- >
1161
- <span>
1162
- Find out more
1163
- </span>
1164
- </a>
1165
- </div>
1166
- </article>
1167
- </div>
1168
- </li>
1169
- </ul>
1170
- <ol class="mx-carousel__pagination"
1171
- data-pagination="pagination"
1172
- >
1173
- <li>
1174
- <button type="button"
1175
- data-index="0"
1176
- disabled
1177
- >
1178
- 1
1179
- </button>
1180
- </li>
1181
- <li>
1182
- <button type="button"
1183
- data-index="1"
1184
- >
1185
- 2
1186
- </button>
1187
- </li>
1188
- <li>
1189
- <button type="button"
1190
- data-index="2"
1191
- >
1192
- 3
1193
- </button>
1194
- </li>
1195
- </ol>
504
+ exports[`Loop 1`] = `
505
+ "
506
+ <mx-carousel class="mx-carousel mx-vertical-flow" role="group" loop="">
507
+ <div class="mx-carousel__buttons" data-buttons="">
508
+ <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
509
+ <span class="sr-only">previous</span>
510
+ <span class="mx-icon mx-icon--chevron-left"></span>
511
+ </button>
512
+ <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
513
+ <span class="sr-only">next</span>
514
+ <span class="mx-icon mx-icon--chevron-right"></span>
515
+ </button>
516
+ </div>
517
+ <ul class="mx-carousel__scrollable overflowing">
518
+ <li>
519
+ <div class="mx-container">
520
+ <article class="mx-card mx-card--block mx-background--box">
521
+ <div class="mx-card__content mx-vertical-flow-flex">
522
+
523
+ <h3>Tile 1</h3>
524
+
525
+
526
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
527
+
528
+
529
+ <a class="mx-link--more" href="#">
530
+
531
+ <span>Find out more</span>
532
+
533
+ </a>
534
+
535
+ </div>
536
+ </article>
537
+ </div>
538
+ </li>
539
+ <li>
540
+ <div class="mx-container">
541
+ <article class="mx-card mx-card--block mx-background--box">
542
+ <div class="mx-card__content mx-vertical-flow-flex">
543
+
544
+ <h3>Tile 2</h3>
545
+
546
+
547
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
548
+
549
+
550
+ <a class="mx-link--more" href="#">
551
+
552
+ <span>Find out more</span>
553
+
554
+ </a>
555
+
556
+ </div>
557
+ </article>
558
+ </div>
559
+ </li>
560
+ <li>
561
+ <div class="mx-container">
562
+ <article class="mx-card mx-card--block mx-background--box">
563
+ <div class="mx-card__content mx-vertical-flow-flex">
564
+
565
+ <h3>Tile 3</h3>
566
+
567
+
568
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
569
+
570
+
571
+ <a class="mx-link--more" href="#">
572
+
573
+ <span>Find out more</span>
574
+
575
+ </a>
576
+
577
+ </div>
578
+ </article>
579
+ </div>
580
+ </li>
581
+ <li>
582
+ <div class="mx-container">
583
+ <article class="mx-card mx-card--block mx-background--box">
584
+ <div class="mx-card__content mx-vertical-flow-flex">
585
+
586
+ <h3>Tile 4</h3>
587
+
588
+
589
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
590
+
591
+
592
+ <a class="mx-link--more" href="#">
593
+
594
+ <span>Find out more</span>
595
+
596
+ </a>
597
+
598
+ </div>
599
+ </article>
600
+ </div>
601
+ </li>
602
+ <li inert="">
603
+ <div class="mx-container">
604
+ <article class="mx-card mx-card--block mx-background--box">
605
+ <div class="mx-card__content mx-vertical-flow-flex">
606
+
607
+ <h3>Tile 5</h3>
608
+
609
+
610
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
611
+
612
+
613
+ <a class="mx-link--more" href="#">
614
+
615
+ <span>Find out more</span>
616
+
617
+ </a>
618
+
619
+ </div>
620
+ </article>
621
+ </div>
622
+ </li>
623
+ <li inert="">
624
+ <div class="mx-container">
625
+ <article class="mx-card mx-card--block mx-background--box">
626
+ <div class="mx-card__content mx-vertical-flow-flex">
627
+
628
+ <h3>Tile 6</h3>
629
+
630
+
631
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
632
+
633
+
634
+ <a class="mx-link--more" href="#">
635
+
636
+ <span>Find out more</span>
637
+
638
+ </a>
639
+
640
+ </div>
641
+ </article>
642
+ </div>
643
+ </li>
644
+ <li inert="">
645
+ <div class="mx-container">
646
+ <article class="mx-card mx-card--block mx-background--box">
647
+ <div class="mx-card__content mx-vertical-flow-flex">
648
+
649
+ <h3>Tile 7</h3>
650
+
651
+
652
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
653
+
654
+
655
+ <a class="mx-link--more" href="#">
656
+
657
+ <span>Find out more</span>
658
+
659
+ </a>
660
+
661
+ </div>
662
+ </article>
663
+ </div>
664
+ </li>
665
+ <li inert="">
666
+ <div class="mx-container">
667
+ <article class="mx-card mx-card--block mx-background--box">
668
+ <div class="mx-card__content mx-vertical-flow-flex">
669
+
670
+ <h3>Tile 8</h3>
671
+
672
+
673
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
674
+
675
+
676
+ <a class="mx-link--more" href="#">
677
+
678
+ <span>Find out more</span>
679
+
680
+ </a>
681
+
682
+ </div>
683
+ </article>
684
+ </div>
685
+ </li>
686
+ <li inert="">
687
+ <div class="mx-container">
688
+ <article class="mx-card mx-card--block mx-background--box">
689
+ <div class="mx-card__content mx-vertical-flow-flex">
690
+
691
+ <h3>Tile 9</h3>
692
+
693
+
694
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
695
+
696
+
697
+ <a class="mx-link--more" href="#">
698
+
699
+ <span>Find out more</span>
700
+
701
+ </a>
702
+
703
+ </div>
704
+ </article>
705
+ </div>
706
+ </li>
707
+ <li inert="">
708
+ <div class="mx-container">
709
+ <article class="mx-card mx-card--block mx-background--box">
710
+ <div class="mx-card__content mx-vertical-flow-flex">
711
+
712
+ <h3>Tile 10</h3>
713
+
714
+
715
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
716
+
717
+
718
+ <a class="mx-link--more" href="#">
719
+
720
+ <span>Find out more</span>
721
+
722
+ </a>
723
+
724
+ </div>
725
+ </article>
726
+ </div>
727
+ </li>
728
+ <li inert="">
729
+ <div class="mx-container">
730
+ <article class="mx-card mx-card--block mx-background--box">
731
+ <div class="mx-card__content mx-vertical-flow-flex">
732
+
733
+ <h3>Tile 11</h3>
734
+
735
+
736
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
737
+
738
+
739
+ <a class="mx-link--more" href="#">
740
+
741
+ <span>Find out more</span>
742
+
743
+ </a>
744
+
745
+ </div>
746
+ </article>
747
+ </div>
748
+ </li>
749
+ </ul>
1196
750
  </mx-carousel>
751
+ "
752
+ `;
753
+
754
+ exports[`Paginated 1`] = `
755
+ "
756
+ <mx-carousel class="mx-carousel mx-vertical-flow" role="group">
757
+ <div class="mx-carousel__buttons" data-buttons="">
758
+ <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
759
+ <span class="sr-only">previous</span>
760
+ <span class="mx-icon mx-icon--chevron-left"></span>
761
+ </button>
762
+ <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
763
+ <span class="sr-only">next</span>
764
+ <span class="mx-icon mx-icon--chevron-right"></span>
765
+ </button>
766
+ </div>
767
+ <ul class="mx-carousel__scrollable overflowing">
768
+ <li>
769
+ <div class="mx-container">
770
+ <article class="mx-card mx-card--block mx-background--box">
771
+ <div class="mx-card__content mx-vertical-flow-flex">
772
+
773
+ <h3>Tile 1</h3>
774
+
775
+
776
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
777
+
778
+
779
+ <a class="mx-link--more" href="#">
780
+
781
+ <span>Find out more</span>
782
+
783
+ </a>
784
+
785
+ </div>
786
+ </article>
787
+ </div>
788
+ </li>
789
+ <li>
790
+ <div class="mx-container">
791
+ <article class="mx-card mx-card--block mx-background--box">
792
+ <div class="mx-card__content mx-vertical-flow-flex">
793
+
794
+ <h3>Tile 2</h3>
795
+
796
+
797
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
798
+
799
+
800
+ <a class="mx-link--more" href="#">
801
+
802
+ <span>Find out more</span>
803
+
804
+ </a>
805
+
806
+ </div>
807
+ </article>
808
+ </div>
809
+ </li>
810
+ <li>
811
+ <div class="mx-container">
812
+ <article class="mx-card mx-card--block mx-background--box">
813
+ <div class="mx-card__content mx-vertical-flow-flex">
814
+
815
+ <h3>Tile 3</h3>
816
+
817
+
818
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
819
+
820
+
821
+ <a class="mx-link--more" href="#">
822
+
823
+ <span>Find out more</span>
824
+
825
+ </a>
826
+
827
+ </div>
828
+ </article>
829
+ </div>
830
+ </li>
831
+ <li>
832
+ <div class="mx-container">
833
+ <article class="mx-card mx-card--block mx-background--box">
834
+ <div class="mx-card__content mx-vertical-flow-flex">
835
+
836
+ <h3>Tile 4</h3>
837
+
838
+
839
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
840
+
841
+
842
+ <a class="mx-link--more" href="#">
843
+
844
+ <span>Find out more</span>
845
+
846
+ </a>
847
+
848
+ </div>
849
+ </article>
850
+ </div>
851
+ </li>
852
+ <li inert="">
853
+ <div class="mx-container">
854
+ <article class="mx-card mx-card--block mx-background--box">
855
+ <div class="mx-card__content mx-vertical-flow-flex">
856
+
857
+ <h3>Tile 5</h3>
858
+
859
+
860
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
861
+
862
+
863
+ <a class="mx-link--more" href="#">
864
+
865
+ <span>Find out more</span>
866
+
867
+ </a>
868
+
869
+ </div>
870
+ </article>
871
+ </div>
872
+ </li>
873
+ <li inert="">
874
+ <div class="mx-container">
875
+ <article class="mx-card mx-card--block mx-background--box">
876
+ <div class="mx-card__content mx-vertical-flow-flex">
877
+
878
+ <h3>Tile 6</h3>
879
+
880
+
881
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
882
+
883
+
884
+ <a class="mx-link--more" href="#">
885
+
886
+ <span>Find out more</span>
887
+
888
+ </a>
889
+
890
+ </div>
891
+ </article>
1197
892
  </div>
893
+ </li>
894
+ <li inert="">
895
+ <div class="mx-container">
896
+ <article class="mx-card mx-card--block mx-background--box">
897
+ <div class="mx-card__content mx-vertical-flow-flex">
898
+
899
+ <h3>Tile 7</h3>
900
+
901
+
902
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
903
+
904
+
905
+ <a class="mx-link--more" href="#">
906
+
907
+ <span>Find out more</span>
908
+
909
+ </a>
910
+
911
+ </div>
912
+ </article>
913
+ </div>
914
+ </li>
915
+ <li inert="">
916
+ <div class="mx-container">
917
+ <article class="mx-card mx-card--block mx-background--box">
918
+ <div class="mx-card__content mx-vertical-flow-flex">
919
+
920
+ <h3>Tile 8</h3>
921
+
922
+
923
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
924
+
925
+
926
+ <a class="mx-link--more" href="#">
927
+
928
+ <span>Find out more</span>
929
+
930
+ </a>
931
+
932
+ </div>
933
+ </article>
934
+ </div>
935
+ </li>
936
+ <li inert="">
937
+ <div class="mx-container">
938
+ <article class="mx-card mx-card--block mx-background--box">
939
+ <div class="mx-card__content mx-vertical-flow-flex">
940
+
941
+ <h3>Tile 9</h3>
942
+
943
+
944
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
945
+
946
+
947
+ <a class="mx-link--more" href="#">
948
+
949
+ <span>Find out more</span>
950
+
951
+ </a>
952
+
953
+ </div>
954
+ </article>
955
+ </div>
956
+ </li>
957
+ <li inert="">
958
+ <div class="mx-container">
959
+ <article class="mx-card mx-card--block mx-background--box">
960
+ <div class="mx-card__content mx-vertical-flow-flex">
961
+
962
+ <h3>Tile 10</h3>
963
+
964
+
965
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
966
+
967
+
968
+ <a class="mx-link--more" href="#">
969
+
970
+ <span>Find out more</span>
971
+
972
+ </a>
973
+
974
+ </div>
975
+ </article>
976
+ </div>
977
+ </li>
978
+ <li inert="">
979
+ <div class="mx-container">
980
+ <article class="mx-card mx-card--block mx-background--box">
981
+ <div class="mx-card__content mx-vertical-flow-flex">
982
+
983
+ <h3>Tile 11</h3>
984
+
985
+
986
+ <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
987
+
988
+
989
+ <a class="mx-link--more" href="#">
990
+
991
+ <span>Find out more</span>
992
+
993
+ </a>
994
+
995
+ </div>
996
+ </article>
997
+ </div>
998
+ </li>
999
+ </ul>
1000
+ <ol class="mx-carousel__pagination" data-pagination="pagination" hidden=""></ol>
1001
+ </mx-carousel>
1002
+ "
1198
1003
  `;