@pnx-mixtape/mxds 0.0.13 → 0.0.15

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 (350) hide show
  1. package/README.md +37 -23
  2. package/dist/build/accordion.css +1 -98
  3. package/dist/build/accordion.entry.js +1 -83
  4. package/dist/build/base.css +1 -996
  5. package/dist/build/breadcrumb.css +1 -51
  6. package/dist/build/button.css +1 -132
  7. package/dist/build/callout.css +1 -11
  8. package/dist/build/card.css +1 -149
  9. package/dist/build/carousel.css +1 -0
  10. package/dist/build/chunks/Accordion-RtUfbsTy.js +1 -0
  11. package/dist/build/chunks/disclosure-widget-CPdkUWkq.js +1 -0
  12. package/dist/build/chunks/drop-menu.entry-BqBzLfVC.js +1 -0
  13. package/dist/build/chunks/keyboard-Cs0cduxq.js +1 -0
  14. package/dist/build/chunks/polyfills-5KNOJw2W.js +1 -0
  15. package/dist/build/chunks/popover-CiVl-0jk.js +1 -0
  16. package/dist/build/chunks/utilities-CE6xwgqF.js +2 -0
  17. package/dist/build/constants.css +1 -120
  18. package/dist/build/container-grid.css +1 -208
  19. package/dist/build/content-block.css +1 -36
  20. package/dist/build/dialog.css +1 -98
  21. package/dist/build/dialog.entry.js +1 -113
  22. package/dist/build/drop-menu.css +1 -78
  23. package/dist/build/drop-menu.entry.js +1 -2
  24. package/dist/build/drupal.css +1 -74
  25. package/dist/build/filters.css +1 -105
  26. package/dist/build/filters.entry.js +1 -137
  27. package/dist/build/footer.css +1 -151
  28. package/dist/build/form.css +1 -517
  29. package/dist/build/global-alert.css +1 -60
  30. package/dist/build/global-alert.entry.js +1 -68
  31. package/dist/build/grid.css +1 -200
  32. package/dist/build/header.css +1 -153
  33. package/dist/build/header.entry.js +1 -103
  34. package/dist/build/hero-banner.css +1 -62
  35. package/dist/build/icon.css +1 -399
  36. package/dist/build/in-page-alert.css +1 -94
  37. package/dist/build/in-page-navigation.css +1 -17
  38. package/dist/build/in-page-navigation.entry.js +1 -99
  39. package/dist/build/link-list.css +1 -45
  40. package/dist/build/list-item.css +1 -114
  41. package/dist/build/masthead.css +1 -53
  42. package/dist/build/navigation.css +1 -396
  43. package/dist/build/navigation.entry.js +1 -124
  44. package/dist/build/page.css +1 -80
  45. package/dist/build/pagination.css +1 -130
  46. package/dist/build/results-bar.css +1 -0
  47. package/dist/build/section.css +1 -163
  48. package/dist/build/side-navigation.css +1 -88
  49. package/dist/build/sidebar.css +1 -59
  50. package/dist/build/social-links.css +1 -20
  51. package/dist/build/steps.css +1 -118
  52. package/dist/build/sticky.css +1 -47
  53. package/dist/build/sticky.entry.js +1 -60
  54. package/dist/build/tabs.css +1 -109
  55. package/dist/build/tabs.entry.js +1 -202
  56. package/dist/build/tag.css +1 -71
  57. package/dist/build/utilities.css +1 -178
  58. package/package.json +56 -64
  59. package/src/Atom/Background/Backgrounds.stories.ts +13 -1
  60. package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap +157 -81
  61. package/src/Atom/Background/_background.css +16 -10
  62. package/src/Atom/Base.mdx +25 -17
  63. package/src/Atom/Button/Button.stories.ts +1 -4
  64. package/src/Atom/Button/Button.stories.tsx +1 -1
  65. package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +47 -37
  66. package/src/Atom/Button/_buttons-styles.css +7 -7
  67. package/src/Atom/Button/_buttons.css +1 -6
  68. package/src/Atom/DefinitionList/DefinitionList.stories.ts +32 -0
  69. package/src/Atom/DefinitionList/DefinitionList.stories.tsx +1 -1
  70. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap +32 -0
  71. package/src/Atom/DefinitionList/definition-list.twig +9 -0
  72. package/src/Atom/Heading/Heading.stories.ts +1 -1
  73. package/src/Atom/Heading/Heading.stories.tsx +1 -1
  74. package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +5 -3
  75. package/src/Atom/Heading/_headings.css +24 -24
  76. package/src/Atom/Icon/Icon.mdx +1 -1
  77. package/src/Atom/Icon/Icon.stories.ts +1 -1
  78. package/src/Atom/Icon/Icon.stories.tsx +1 -1
  79. package/src/Atom/Icon/Icon.tsx +2 -2
  80. package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +14 -8
  81. package/src/Atom/Icon/_icon.css +4 -4
  82. package/src/Atom/Image/Image.stories.ts +1 -1
  83. package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +7 -5
  84. package/src/Atom/Image/_image.css +2 -7
  85. package/src/Atom/Link/Link.stories.ts +1 -1
  86. package/src/Atom/Link/Link.stories.tsx +1 -1
  87. package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +50 -37
  88. package/src/Atom/Link/_links.css +2 -22
  89. package/src/Atom/Link/link.twig +1 -0
  90. package/src/Atom/Media/Media.stories.ts +2 -1
  91. package/src/Atom/Media/Media.stories.tsx +1 -1
  92. package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +11 -24
  93. package/src/Atom/Media/_media.css +8 -8
  94. package/src/Atom/Spacing/Spacing.stories.ts +1 -1
  95. package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +5 -3
  96. package/src/Atom/Table/Table.stories.ts +1 -1
  97. package/src/Atom/Table/TableResponsive.stories.ts +1 -1
  98. package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +256 -248
  99. package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +65 -63
  100. package/src/Atom/Text/Text.stories.tsx +1 -1
  101. package/src/Atom/Text/TextSizes.stories.ts +1 -1
  102. package/src/Atom/Text/__snapshots__/TextSizes.stories.ts.snap +59 -55
  103. package/src/Atom/Text/_text-sizes.css +17 -17
  104. package/src/Atom/Text/rich-text.twig +9 -0
  105. package/src/Atom/Video/Video.stories.ts +1 -1
  106. package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +9 -7
  107. package/src/Atom/_animated.css +0 -14
  108. package/src/Atom/_generic.css +57 -15
  109. package/src/Atom/base.css +1 -1
  110. package/src/Component/Accordion/Accordion.stories.ts +1 -4
  111. package/src/Component/Accordion/Accordion.stories.tsx +1 -2
  112. package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +60 -56
  113. package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +0 -1
  114. package/src/Component/Accordion/accordion.css +16 -4
  115. package/src/Component/Breadcrumb/Breadcrumb.stories.ts +1 -1
  116. package/src/Component/Breadcrumb/Breadcrumb.stories.tsx +1 -1
  117. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +31 -29
  118. package/src/Component/Breadcrumb/breadcrumb.css +4 -0
  119. package/src/Component/Callout/Callout.stories.ts +1 -9
  120. package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +9 -7
  121. package/src/Component/Card/Card.stories.ts +11 -18
  122. package/src/Component/Card/Card.stories.tsx +1 -1
  123. package/src/Component/Card/Card.tsx +9 -5
  124. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +257 -229
  125. package/src/Component/Card/card.css +36 -33
  126. package/src/Component/Card/card.twig +6 -6
  127. package/src/Component/Carousel/Carousel.stories.ts +201 -0
  128. package/src/Component/Carousel/Elements/Carousel.ts +241 -0
  129. package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +912 -0
  130. package/src/Component/Carousel/carousel.css +119 -0
  131. package/src/Component/Carousel/carousel.twig +27 -0
  132. package/src/Component/ContentBlock/ContentBlock.stories.ts +27 -19
  133. package/src/Component/ContentBlock/ContentBlock.stories.tsx +1 -1
  134. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +153 -93
  135. package/src/Component/Dialog/Dialog.stories.ts +75 -7
  136. package/src/Component/Dialog/Dialog.stories.tsx +1 -1
  137. package/src/Component/Dialog/Elements/Dialog.ts +14 -34
  138. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +102 -66
  139. package/src/Component/Dialog/dialog.css +32 -20
  140. package/src/Component/Dialog/dialog.twig +14 -15
  141. package/src/Component/DropMenu/Components/DropMenuContext.tsx +7 -9
  142. package/src/Component/DropMenu/Components/DropMenuItem.tsx +1 -1
  143. package/src/Component/DropMenu/DropMenu.stories.ts +1 -1
  144. package/src/Component/DropMenu/DropMenu.stories.tsx +1 -1
  145. package/src/Component/DropMenu/Elements/DropMenu.ts +1 -1
  146. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +28 -26
  147. package/src/Component/DropMenu/drop-menu.css +11 -3
  148. package/src/Component/Filters/Filters.stories.ts +1 -4
  149. package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +397 -389
  150. package/src/Component/Filters/filters.css +14 -5
  151. package/src/Component/GlobalAlert/GlobalAlert.stories.ts +1 -1
  152. package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +1 -1
  153. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +33 -29
  154. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +2 -2
  155. package/src/Component/GlobalAlert/global-alert.css +2 -2
  156. package/src/Component/HeroBanner/HeroBanner.stories.ts +1 -4
  157. package/src/Component/HeroBanner/HeroBanner.stories.tsx +1 -1
  158. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +68 -64
  159. package/src/Component/HeroBanner/hero-banner.css +6 -1
  160. package/src/Component/HeroBanner/hero-banner.twig +3 -4
  161. package/src/Component/InPageAlert/InPageAlert.stories.ts +1 -1
  162. package/src/Component/InPageAlert/InPageAlert.stories.tsx +1 -1
  163. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +10 -8
  164. package/src/Component/InPageAlert/in-page-alert.css +8 -8
  165. package/src/Component/InPageNavigation/Elements/InPageNavigation.ts +1 -1
  166. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +1 -4
  167. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +1 -1
  168. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +64 -62
  169. package/src/Component/LinkList/LinkList.stories.ts +1 -1
  170. package/src/Component/LinkList/LinkList.stories.tsx +1 -1
  171. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +31 -29
  172. package/src/Component/ListItem/ListItem.stories.ts +2 -4
  173. package/src/Component/ListItem/ListItem.stories.tsx +1 -1
  174. package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +162 -148
  175. package/src/Component/ListItem/list-item.css +7 -88
  176. package/src/Component/ListItem/list-item.twig +8 -8
  177. package/src/Component/Navigation/Dropdown.stories.tsx +1 -1
  178. package/src/Component/Navigation/Navigation.stories.ts +1 -1
  179. package/src/Component/Navigation/Navigation.stories.tsx +1 -1
  180. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +291 -283
  181. package/src/Component/Navigation/_navigation-collapsible.css +11 -14
  182. package/src/Component/Navigation/_navigation-dropdown.css +11 -17
  183. package/src/Component/Pagination/Components/PaginationContext.tsx +4 -8
  184. package/src/Component/Pagination/Pagination.stories.ts +1 -1
  185. package/src/Component/Pagination/Pagination.stories.tsx +1 -1
  186. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +59 -57
  187. package/src/Component/Pagination/pagination.css +2 -8
  188. package/src/Component/ResultsBar/Components/ResultsBarInfo.tsx +28 -0
  189. package/src/Component/ResultsBar/Components/ResultsBarSort.tsx +17 -0
  190. package/src/Component/ResultsBar/ResultsBar.stories.ts +37 -0
  191. package/src/Component/ResultsBar/ResultsBar.stories.tsx +50 -0
  192. package/src/Component/ResultsBar/ResultsBar.tsx +7 -0
  193. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.ts.snap +54 -0
  194. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap +53 -0
  195. package/src/Component/ResultsBar/results-bar.css +19 -0
  196. package/src/Component/ResultsBar/results-bar.twig +24 -0
  197. package/src/Component/SideNavigation/SideNavigation.stories.ts +1 -1
  198. package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +82 -80
  199. package/src/Component/SideNavigation/side-navigation.css +2 -8
  200. package/src/Component/SocialLinks/SocialLinks.stories.ts +1 -1
  201. package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +30 -28
  202. package/src/Component/Steps/Steps.stories.ts +1 -1
  203. package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +86 -78
  204. package/src/Component/Steps/steps.css +1 -1
  205. package/src/Component/Sticky/Sticky.stories.ts +1 -1
  206. package/src/Component/Sticky/Sticky.stories.tsx +1 -1
  207. package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +9 -7
  208. package/src/Component/Tabs/Tabs.stories.ts +1 -1
  209. package/src/Component/Tabs/Tabs.stories.tsx +1 -1
  210. package/src/Component/Tabs/Tabs.tsx +4 -4
  211. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +73 -71
  212. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +0 -2
  213. package/src/Component/Tabs/tabs.css +14 -21
  214. package/src/Component/Tag/Tag.stories.ts +1 -1
  215. package/src/Component/Tag/Tag.stories.tsx +1 -1
  216. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +59 -53
  217. package/src/Component/Tag/tag.css +6 -6
  218. package/src/Component/Tile/Tile.stories.ts +38 -12
  219. package/src/Component/Tile/Tile.stories.tsx +2 -2
  220. package/src/Component/Tile/Tile.tsx +30 -17
  221. package/src/Component/Tile/__snapshots__/Tile.stories.ts.snap +49 -75
  222. package/src/Component/Tile/__snapshots__/Tile.stories.tsx.snap +6 -16
  223. package/src/Form/Checkbox/Checkbox.stories.ts +1 -1
  224. package/src/Form/Checkbox/FormCheckbox.stories.tsx +1 -1
  225. package/src/Form/Checkbox/FormCheckbox.tsx +5 -7
  226. package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap +23 -19
  227. package/src/Form/Description/Description.stories.ts +1 -1
  228. package/src/Form/Description/FormDescription.stories.tsx +1 -1
  229. package/src/Form/Description/FormStatus.stories.ts +1 -1
  230. package/src/Form/Description/__snapshots__/Description.stories.ts.snap +7 -5
  231. package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap +14 -10
  232. package/src/Form/Form/Form.stories.tsx +1 -1
  233. package/src/Form/Form/FormTitle.stories.tsx +1 -1
  234. package/src/Form/FormItem/FormItem.stories.ts +1 -4
  235. package/src/Form/FormItem/FormItem.stories.tsx +1 -1
  236. package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +119 -109
  237. package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap +4 -4
  238. package/src/Form/Label/FormLabel.stories.tsx +1 -1
  239. package/src/Form/Label/FormLabel.tsx +1 -1
  240. package/src/Form/Label/Label.stories.ts +1 -1
  241. package/src/Form/Label/__snapshots__/Label.stories.ts.snap +21 -15
  242. package/src/Form/Radio/FormRadio.stories.tsx +1 -1
  243. package/src/Form/Radio/FormRadio.tsx +4 -4
  244. package/src/Form/Radio/Radio.stories.ts +1 -1
  245. package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap +55 -51
  246. package/src/Form/Search/Search.stories.ts +1 -4
  247. package/src/Form/Search/__snapshots__/Search.stories.ts.snap +23 -21
  248. package/src/Form/Select/FormSelect.stories.tsx +1 -1
  249. package/src/Form/Select/FormSelect.tsx +1 -1
  250. package/src/Form/Select/Select.stories.ts +1 -1
  251. package/src/Form/Select/__snapshots__/Select.stories.ts.snap +18 -16
  252. package/src/Form/TextInput/FormText.stories.tsx +1 -1
  253. package/src/Form/TextInput/InputDivider.stories.ts +1 -1
  254. package/src/Form/TextInput/TextInput.stories.ts +1 -1
  255. package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +1 -1
  256. package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +24 -22
  257. package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +18 -14
  258. package/src/Form/Textarea/FormTextarea.stories.tsx +1 -1
  259. package/src/Form/Textarea/Textarea.stories.ts +1 -1
  260. package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +1 -1
  261. package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +9 -7
  262. package/src/Form/form.css +24 -34
  263. package/src/Introduction.mdx +40 -0
  264. package/src/Layout/Footer/Footer.stories.ts +1 -6
  265. package/src/Layout/Footer/Footer.stories.tsx +1 -1
  266. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +10 -10
  267. package/src/Layout/Footer/footer.css +2 -6
  268. package/src/Layout/Footer/footer.twig +0 -1
  269. package/src/Layout/Grid/Grid.stories.ts +8 -8
  270. package/src/Layout/Grid/Grid.stories.tsx +2 -2
  271. package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +38 -32
  272. package/src/Layout/Grid/container-grid.css +10 -10
  273. package/src/Layout/Grid/grid-item.twig +3 -1
  274. package/src/Layout/Grid/grid.css +3 -3
  275. package/src/Layout/Header/Header.stories.ts +1 -6
  276. package/src/Layout/Header/Header.stories.tsx +1 -1
  277. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +11 -11
  278. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +3 -3
  279. package/src/Layout/Header/_header.css +18 -16
  280. package/src/Layout/Header/header.twig +1 -2
  281. package/src/Layout/Masthead/Masthead.stories.ts +1 -3
  282. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +6 -6
  283. package/src/Layout/Masthead/masthead.twig +0 -2
  284. package/src/Layout/Page/Page.stories.tsx +1 -1
  285. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +3 -3
  286. package/src/Layout/Page/page.css +16 -40
  287. package/src/Layout/Page/page.twig +6 -1
  288. package/src/Layout/Section/Background.stories.ts +60 -8
  289. package/src/Layout/Section/Breakouts.stories.ts +1 -3
  290. package/src/Layout/Section/Flow.stories.ts +1 -3
  291. package/src/Layout/Section/Section.stories.ts +1 -6
  292. package/src/Layout/Section/Section.stories.tsx +1 -1
  293. package/src/Layout/Section/SectionGrid.stories.tsx +1 -1
  294. package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +36 -24
  295. package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +54 -52
  296. package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +18 -18
  297. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +2 -2
  298. package/src/Layout/Section/section.css +15 -18
  299. package/src/Layout/Section/section.twig +0 -1
  300. package/src/Layout/Section/twig/section-background.twig +29 -10
  301. package/src/Layout/Section/twig/sections-breakout.twig +28 -33
  302. package/src/Layout/Section/twig/sections-flow.twig +17 -17
  303. package/src/Layout/Section/twig/sections-stacked.twig +4 -4
  304. package/src/Layout/Sidebar/Sidebar.stories.ts +1 -3
  305. package/src/Layout/Sidebar/Sidebar.stories.tsx +1 -1
  306. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +5 -5
  307. package/src/Layout/Sidebar/sidebar.css +2 -18
  308. package/src/Utility/Context/ImageComponent.tsx +3 -6
  309. package/src/Utility/Context/LinkComponent.tsx +3 -6
  310. package/src/Utility/Drupal/drupal.css +1 -5
  311. package/src/Utility/Elements/breakpoint-loader.ts +0 -1
  312. package/src/Utility/Elements/cookie-compliance.ts +0 -1
  313. package/src/Utility/Elements/io-loader.ts +0 -1
  314. package/src/Utility/Hooks/useLocalStorage.ts +0 -1
  315. package/src/Utility/Hooks/useMediaQuery.ts +0 -1
  316. package/src/Utility/Hooks/useToggle.ts +0 -1
  317. package/src/Utility/global.d.ts +0 -1
  318. package/src/Utility/utilities.ts +0 -1
  319. package/src/constants.css +53 -24
  320. package/src/enums.ts +1 -2
  321. package/src/react.ts +3 -0
  322. package/src/tokens.js +19 -19
  323. package/dist/build/accordion.entry.js.map +0 -1
  324. package/dist/build/chunks/Accordion-DSze7pxN.js +0 -61
  325. package/dist/build/chunks/Accordion-DSze7pxN.js.map +0 -1
  326. package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js +0 -124
  327. package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js.map +0 -1
  328. package/dist/build/chunks/drop-menu.entry-BC6x9vst.js +0 -132
  329. package/dist/build/chunks/drop-menu.entry-BC6x9vst.js.map +0 -1
  330. package/dist/build/chunks/keyboard-C73DHu0c.js +0 -101
  331. package/dist/build/chunks/keyboard-C73DHu0c.js.map +0 -1
  332. package/dist/build/chunks/polyfills-CJ5uTmUJ.js +0 -749
  333. package/dist/build/chunks/polyfills-CJ5uTmUJ.js.map +0 -1
  334. package/dist/build/chunks/popover-wbPSyFRj.js +0 -654
  335. package/dist/build/chunks/popover-wbPSyFRj.js.map +0 -1
  336. package/dist/build/chunks/utilities-B4YZb689.js +0 -243
  337. package/dist/build/chunks/utilities-B4YZb689.js.map +0 -1
  338. package/dist/build/dialog.entry.js.map +0 -1
  339. package/dist/build/drop-menu.entry.js.map +0 -1
  340. package/dist/build/filters.entry.js.map +0 -1
  341. package/dist/build/global-alert.entry.js.map +0 -1
  342. package/dist/build/header.entry.js.map +0 -1
  343. package/dist/build/in-page-navigation.entry.js.map +0 -1
  344. package/dist/build/navigation.entry.js.map +0 -1
  345. package/dist/build/sticky.entry.js.map +0 -1
  346. package/dist/build/tabs.entry.js.map +0 -1
  347. package/dist/build/tiles.css +0 -61
  348. package/src/Component/Tile/tile.twig +0 -10
  349. package/src/Component/Tile/tiles.css +0 -58
  350. package/src/Component/Tile/twig/tiles.twig +0 -18
package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap CHANGED
@@ -1,171 +1,298 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Component/Navigation Collapsible smoke-test 1`] = `
4
- <mx-nav>
5
- <nav class="mx-nav mx-nav--collapsible"
6
- aria-label="Links"
7
- id="links-story"
8
- >
9
- <ul class="mx-nav__level-1">
10
- <li>
11
- <a href="#">
12
- News
13
- </a>
14
- </li>
15
- <li class="mx-nav__has-subnav">
16
- <a href="#"
17
- id="unique-0"
18
- >
19
- What we do
20
- </a>
21
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
22
- aria-expanded="false"
23
- aria-controls="unique-0"
24
- >
25
- Sub-navigation
26
- </button>
27
- <ul class="mx-nav__level-2"
28
- inert
29
- id="unique-1"
30
- aria-labelledby="unique-1"
31
- >
32
- <li>
33
- <a href="#">
34
- Events
35
- </a>
36
- </li>
37
- <li class="mx-nav__has-subnav">
38
- <a href="#"
39
- id="unique-2"
40
- >
41
- Who we are
42
- </a>
43
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
44
- aria-expanded="false"
45
- aria-controls="unique-2"
46
- >
47
- Sub-navigation
48
- </button>
49
- <ul class="mx-nav__level-3"
50
- inert
51
- id="unique-3"
52
- aria-labelledby="unique-3"
53
- >
54
- <li>
55
- <a href="#">
56
- Our team
57
- </a>
58
- </li>
59
- <li>
60
- <a href="#"
61
- aria-current="page"
62
- >
63
- Our philosophy
64
- </a>
65
- </li>
66
- <li>
67
- <a href="#">
68
- Why music?
69
- </a>
70
- </li>
71
- </ul>
72
- </li>
73
- <li>
74
- <a href="#">
75
- Join us
76
- </a>
77
- </li>
78
- <li>
79
- <a href="#">
80
- Careers
81
- </a>
82
- </li>
83
- </ul>
84
- </li>
85
- <li>
86
- <a href="#">
87
- Contact
88
- </a>
89
- </li>
90
- <li>
91
- <a href="#">
92
- Resources
93
- </a>
94
- </li>
95
- </ul>
96
- </nav>
97
- </mx-nav>
4
+ <div class="mx-page default">
5
+ <mx-nav>
6
+ <nav class="mx-nav mx-nav--collapsible"
7
+ aria-label="Links"
8
+ id="links-story"
9
+ >
10
+ <ul class="mx-nav__level-1">
11
+ <li>
12
+ <a href="#">
13
+ News
14
+ </a>
15
+ </li>
16
+ <li class="mx-nav__has-subnav">
17
+ <a href="#"
18
+ id="unique-0"
19
+ >
20
+ What we do
21
+ </a>
22
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
23
+ aria-expanded="false"
24
+ aria-controls="unique-0"
25
+ >
26
+ Sub-navigation
27
+ </button>
28
+ <ul class="mx-nav__level-2"
29
+ inert
30
+ id="unique-1"
31
+ aria-labelledby="unique-1"
32
+ >
33
+ <li>
34
+ <a href="#">
35
+ Events
36
+ </a>
37
+ </li>
38
+ <li class="mx-nav__has-subnav">
39
+ <a href="#"
40
+ id="unique-2"
41
+ >
42
+ Who we are
43
+ </a>
44
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
45
+ aria-expanded="false"
46
+ aria-controls="unique-2"
47
+ >
48
+ Sub-navigation
49
+ </button>
50
+ <ul class="mx-nav__level-3"
51
+ inert
52
+ id="unique-3"
53
+ aria-labelledby="unique-3"
54
+ >
55
+ <li>
56
+ <a href="#">
57
+ Our team
58
+ </a>
59
+ </li>
60
+ <li>
61
+ <a href="#"
62
+ aria-current="page"
63
+ >
64
+ Our philosophy
65
+ </a>
66
+ </li>
67
+ <li>
68
+ <a href="#">
69
+ Why music?
70
+ </a>
71
+ </li>
72
+ </ul>
73
+ </li>
74
+ <li>
75
+ <a href="#">
76
+ Join us
77
+ </a>
78
+ </li>
79
+ <li>
80
+ <a href="#">
81
+ Careers
82
+ </a>
83
+ </li>
84
+ </ul>
85
+ </li>
86
+ <li>
87
+ <a href="#">
88
+ Contact
89
+ </a>
90
+ </li>
91
+ <li>
92
+ <a href="#">
93
+ Resources
94
+ </a>
95
+ </li>
96
+ </ul>
97
+ </nav>
98
+ </mx-nav>
99
+ </div>
98
100
  `;
99
101
 
100
102
  exports[`Component/Navigation Dropdown smoke-test 1`] = `
101
- <mx-nav flyout>
102
- <nav class="mx-nav mx-nav--dropdown"
103
- aria-label="Links"
104
- id="links-story"
105
- >
106
- <ul class="mx-nav__level-1">
107
- <li>
108
- <a href="#">
109
- News
110
- </a>
111
- </li>
112
- <li class="mx-nav__has-subnav">
113
- <a href="#"
114
- id="unique-0"
115
- >
116
- What we do
117
- </a>
118
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
119
- aria-expanded="false"
120
- aria-controls="unique-0"
121
- >
122
- Sub-navigation
123
- </button>
124
- <ul class="mx-nav__level-2"
125
- inert
126
- id="unique-1"
127
- aria-labelledby="unique-1"
128
- >
129
- <li>
130
- <a href="#">
131
- Events
132
- </a>
133
- </li>
134
- <li>
135
- <a href="#">
136
- Who we are
137
- </a>
138
- </li>
139
- <li>
140
- <a href="#">
141
- Join us
142
- </a>
143
- </li>
144
- <li>
145
- <a href="#">
146
- Careers
147
- </a>
148
- </li>
149
- </ul>
150
- </li>
151
- <li>
152
- <a href="#">
153
- Contact
154
- </a>
155
- </li>
156
- <li>
157
- <a href="#">
158
- Resources
159
- </a>
160
- </li>
161
- </ul>
162
- </nav>
163
- </mx-nav>
103
+ <div class="mx-page default">
104
+ <mx-nav flyout>
105
+ <nav class="mx-nav mx-nav--dropdown"
106
+ aria-label="Links"
107
+ id="links-story"
108
+ >
109
+ <ul class="mx-nav__level-1">
110
+ <li>
111
+ <a href="#">
112
+ News
113
+ </a>
114
+ </li>
115
+ <li class="mx-nav__has-subnav">
116
+ <a href="#"
117
+ id="unique-0"
118
+ >
119
+ What we do
120
+ </a>
121
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
122
+ aria-expanded="false"
123
+ aria-controls="unique-0"
124
+ >
125
+ Sub-navigation
126
+ </button>
127
+ <ul class="mx-nav__level-2"
128
+ inert
129
+ id="unique-1"
130
+ aria-labelledby="unique-1"
131
+ >
132
+ <li>
133
+ <a href="#">
134
+ Events
135
+ </a>
136
+ </li>
137
+ <li>
138
+ <a href="#">
139
+ Who we are
140
+ </a>
141
+ </li>
142
+ <li>
143
+ <a href="#">
144
+ Join us
145
+ </a>
146
+ </li>
147
+ <li>
148
+ <a href="#">
149
+ Careers
150
+ </a>
151
+ </li>
152
+ </ul>
153
+ </li>
154
+ <li>
155
+ <a href="#">
156
+ Contact
157
+ </a>
158
+ </li>
159
+ <li>
160
+ <a href="#">
161
+ Resources
162
+ </a>
163
+ </li>
164
+ </ul>
165
+ </nav>
166
+ </mx-nav>
167
+ </div>
164
168
  `;
165
169
 
166
170
  exports[`Component/Navigation Mega smoke-test 1`] = `
167
- <mx-nav edgecheck>
168
- <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav"
171
+ <div class="mx-page default">
172
+ <mx-nav edgecheck>
173
+ <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav"
174
+ aria-label="Links"
175
+ id="links-story"
176
+ >
177
+ <ul class="mx-nav__level-1">
178
+ <li>
179
+ <a href="#"
180
+ aria-current="page"
181
+ >
182
+ Home
183
+ </a>
184
+ </li>
185
+ <li class="mx-nav__has-subnav">
186
+ <a href="#"
187
+ id="unique-0"
188
+ >
189
+ About
190
+ </a>
191
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
192
+ aria-expanded="false"
193
+ aria-controls="unique-0"
194
+ >
195
+ Sub-navigation
196
+ </button>
197
+ <ul class="mx-nav__level-2"
198
+ inert
199
+ id="unique-1"
200
+ aria-labelledby="unique-1"
201
+ >
202
+ <li class="mx-nav__has-subnav">
203
+ <a href="#"
204
+ aria-current="page"
205
+ id="unique-2"
206
+ >
207
+ Who
208
+ </a>
209
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
210
+ aria-expanded="false"
211
+ aria-controls="unique-2"
212
+ >
213
+ Sub-navigation
214
+ </button>
215
+ <ul class="mx-nav__level-3"
216
+ inert
217
+ id="unique-3"
218
+ aria-labelledby="unique-3"
219
+ >
220
+ <li>
221
+ <a href="#"
222
+ aria-current="page"
223
+ >
224
+ How come?
225
+ </a>
226
+ </li>
227
+ <li>
228
+ <a href="#">
229
+ Why not?
230
+ </a>
231
+ </li>
232
+ <li>
233
+ <a href="#">
234
+ What for?
235
+ </a>
236
+ </li>
237
+ </ul>
238
+ </li>
239
+ <li>
240
+ <a href="#">
241
+ What
242
+ </a>
243
+ </li>
244
+ <li>
245
+ <a href="#">
246
+ Why
247
+ </a>
248
+ </li>
249
+ </ul>
250
+ </li>
251
+ <li class="mx-nav__has-subnav">
252
+ <a href="#"
253
+ id="unique-4"
254
+ >
255
+ Contact
256
+ </a>
257
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
258
+ aria-expanded="false"
259
+ aria-controls="unique-4"
260
+ >
261
+ Sub-navigation
262
+ </button>
263
+ <ul class="mx-nav__level-2"
264
+ inert
265
+ id="unique-5"
266
+ aria-labelledby="unique-5"
267
+ >
268
+ <li>
269
+ <a href="#"
270
+ aria-current="page"
271
+ >
272
+ How
273
+ </a>
274
+ </li>
275
+ <li>
276
+ <a href="#">
277
+ Where
278
+ </a>
279
+ </li>
280
+ <li>
281
+ <a href="#">
282
+ When
283
+ </a>
284
+ </li>
285
+ </ul>
286
+ </li>
287
+ </ul>
288
+ </nav>
289
+ </mx-nav>
290
+ </div>
291
+ `;
292
+
293
+ exports[`Component/Navigation Navigation smoke-test 1`] = `
294
+ <div class="mx-page default">
295
+ <nav class="mx-nav"
169
296
  aria-label="Links"
170
297
  id="links-story"
171
298
  >
@@ -177,136 +304,17 @@ exports[`Component/Navigation Mega smoke-test 1`] = `
177
304
  Home
178
305
  </a>
179
306
  </li>
180
- <li class="mx-nav__has-subnav">
181
- <a href="#"
182
- id="unique-0"
183
- >
307
+ <li>
308
+ <a href="#">
184
309
  About
185
310
  </a>
186
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
187
- aria-expanded="false"
188
- aria-controls="unique-0"
189
- >
190
- Sub-navigation
191
- </button>
192
- <ul class="mx-nav__level-2"
193
- inert
194
- id="unique-1"
195
- aria-labelledby="unique-1"
196
- >
197
- <li class="mx-nav__has-subnav">
198
- <a href="#"
199
- aria-current="page"
200
- id="unique-2"
201
- >
202
- Who
203
- </a>
204
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
205
- aria-expanded="false"
206
- aria-controls="unique-2"
207
- >
208
- Sub-navigation
209
- </button>
210
- <ul class="mx-nav__level-3"
211
- inert
212
- id="unique-3"
213
- aria-labelledby="unique-3"
214
- >
215
- <li>
216
- <a href="#"
217
- aria-current="page"
218
- >
219
- How come?
220
- </a>
221
- </li>
222
- <li>
223
- <a href="#">
224
- Why not?
225
- </a>
226
- </li>
227
- <li>
228
- <a href="#">
229
- What for?
230
- </a>
231
- </li>
232
- </ul>
233
- </li>
234
- <li>
235
- <a href="#">
236
- What
237
- </a>
238
- </li>
239
- <li>
240
- <a href="#">
241
- Why
242
- </a>
243
- </li>
244
- </ul>
245
311
  </li>
246
- <li class="mx-nav__has-subnav">
247
- <a href="#"
248
- id="unique-4"
249
- >
312
+ <li>
313
+ <a href="#">
250
314
  Contact
251
315
  </a>
252
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
253
- aria-expanded="false"
254
- aria-controls="unique-4"
255
- >
256
- Sub-navigation
257
- </button>
258
- <ul class="mx-nav__level-2"
259
- inert
260
- id="unique-5"
261
- aria-labelledby="unique-5"
262
- >
263
- <li>
264
- <a href="#"
265
- aria-current="page"
266
- >
267
- How
268
- </a>
269
- </li>
270
- <li>
271
- <a href="#">
272
- Where
273
- </a>
274
- </li>
275
- <li>
276
- <a href="#">
277
- When
278
- </a>
279
- </li>
280
- </ul>
281
316
  </li>
282
317
  </ul>
283
318
  </nav>
284
- </mx-nav>
285
- `;
286
-
287
- exports[`Component/Navigation Navigation smoke-test 1`] = `
288
- <nav class="mx-nav"
289
- aria-label="Links"
290
- id="links-story"
291
- >
292
- <ul class="mx-nav__level-1">
293
- <li>
294
- <a href="#"
295
- aria-current="page"
296
- >
297
- Home
298
- </a>
299
- </li>
300
- <li>
301
- <a href="#">
302
- About
303
- </a>
304
- </li>
305
- <li>
306
- <a href="#">
307
- Contact
308
- </a>
309
- </li>
310
- </ul>
311
- </nav>
319
+ </div>
312
320
  `;
package/src/Component/Navigation/_navigation-collapsible.css CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  @layer design-system.components {
6
6
  .mx-nav--collapsible {
7
+ --outline-offset: -1px;
8
+
7
9
  & .mx-nav__toggle {
8
10
  inset-inline: auto var(--spacing-xxs);
9
11
 
@@ -27,10 +29,6 @@
27
29
  padding-block: var(--item-spacing, var(--spacing-xxs));
28
30
  padding-inline: var(--indent, var(--spacing-xxs))
29
31
  var(--item-spacing, var(--spacing-xxs));
30
-
31
- &:is(:focus, :focus-visible) {
32
- outline-offset: -1px;
33
- }
34
32
  }
35
33
  }
36
34
 
@@ -59,19 +57,18 @@
59
57
  }
60
58
 
61
59
  & li > ul {
62
- transition:
63
- transform 0.2s var(--ease),
64
- opacity 0.8s var(--ease);
65
- transform-origin: top;
66
- will-change: block-size;
60
+ opacity: 1;
61
+ display: grid;
62
+
63
+ @starting-style {
64
+ opacity: 0;
65
+ display: grid;
66
+ }
67
67
 
68
68
  &[inert] {
69
- block-size: 0;
70
69
  opacity: 0;
71
- transform: scaleY(0);
72
- transition:
73
- transform 0.8s var(--ease),
74
- opacity 0.2s var(--ease);
70
+ display: none;
71
+ transition-duration: 0.4s;
75
72
  }
76
73
  }
77
74