@pnx-mixtape/mxds 0.0.22 → 0.0.23

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 (375) hide show
  1. package/dist/build/accordion.entry.js +32 -43
  2. package/dist/build/accordion.entry.js.map +1 -1
  3. package/dist/build/base.css +17 -39
  4. package/dist/build/button.css +9 -10
  5. package/dist/build/chunks/{Accordion-O-huO4At.js → Accordion-D1HQ0FDq.js} +23 -21
  6. package/dist/build/chunks/{Accordion-O-huO4At.js.map → Accordion-D1HQ0FDq.js.map} +1 -1
  7. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js +129 -0
  8. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map +1 -0
  9. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js +70 -0
  10. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map +1 -0
  11. package/dist/build/chunks/{polyfills-C-B7iqDG.js → polyfills-DnrsypYs.js} +35 -26
  12. package/dist/build/chunks/polyfills-DnrsypYs.js.map +1 -0
  13. package/dist/build/chunks/popover.entry-BQvyR0d5.js +38 -0
  14. package/dist/build/chunks/popover.entry-BQvyR0d5.js.map +1 -0
  15. package/dist/build/chunks/{utilities-DXELy_An.js → utilities-Ci7wwNeg.js} +9 -106
  16. package/dist/build/chunks/utilities-Ci7wwNeg.js.map +1 -0
  17. package/dist/build/constants.css +10 -31
  18. package/dist/build/dialog.entry.js +23 -31
  19. package/dist/build/dialog.entry.js.map +1 -1
  20. package/dist/build/drop-menu.entry.js +1 -1
  21. package/dist/build/drupal.css +5 -9
  22. package/dist/build/filters.entry.js +54 -50
  23. package/dist/build/filters.entry.js.map +1 -1
  24. package/dist/build/form.css +12 -26
  25. package/dist/build/global-alert.entry.js +26 -19
  26. package/dist/build/global-alert.entry.js.map +1 -1
  27. package/dist/build/grid.css +3 -9
  28. package/dist/build/header.entry.js +93 -88
  29. package/dist/build/header.entry.js.map +1 -1
  30. package/dist/build/icon.css +3 -3
  31. package/dist/build/in-page-navigation.entry.js +16 -12
  32. package/dist/build/in-page-navigation.entry.js.map +1 -1
  33. package/dist/build/navigation.css +9 -23
  34. package/dist/build/navigation.entry.js +148 -50
  35. package/dist/build/navigation.entry.js.map +1 -1
  36. package/dist/build/page.css +1 -1
  37. package/dist/build/popover.css +119 -0
  38. package/dist/build/popover.entry.js +2 -0
  39. package/dist/build/popover.entry.js.map +1 -0
  40. package/dist/build/section.css +1 -1
  41. package/dist/build/sticky.entry.js +11 -12
  42. package/dist/build/sticky.entry.js.map +1 -1
  43. package/dist/build/tabs.entry.js +108 -91
  44. package/dist/build/tabs.entry.js.map +1 -1
  45. package/dist/build/utility-list.css +43 -0
  46. package/dist/build/utility-list.entry.js +80 -0
  47. package/dist/build/utility-list.entry.js.map +1 -0
  48. package/package.json +9 -10
  49. package/src/Atom/{Base.mdx → Atom.mdx} +1 -1
  50. package/src/Atom/Background/Backgrounds.stories.ts +21 -4
  51. package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap +1 -1
  52. package/src/Atom/Background/_background.css +1 -2
  53. package/src/Atom/Blockquote/_blockquote.css +1 -2
  54. package/src/Atom/Button/Button.stories.ts +128 -19
  55. package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +75 -11
  56. package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +1 -1
  57. package/src/Atom/Button/_buttons.css +4 -5
  58. package/src/Atom/DefinitionList/DefinitionList.stories.ts +20 -3
  59. package/src/Atom/DefinitionList/DefinitionList.stories.tsx +3 -9
  60. package/src/Atom/DefinitionList/DefinitionList.tsx +3 -4
  61. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap +1 -1
  62. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +1 -1
  63. package/src/Atom/Heading/Heading.stories.ts +49 -7
  64. package/src/Atom/Heading/Heading.tsx +1 -6
  65. package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +9 -1
  66. package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +1 -1
  67. package/src/Atom/Heading/_headings.css +1 -2
  68. package/src/Atom/Icon/Icon.mdx +5 -1
  69. package/src/Atom/Icon/Icon.stories.ts +76 -6
  70. package/src/Atom/Icon/Icon.tsx +1 -8
  71. package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +18 -4
  72. package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +1 -1
  73. package/src/Atom/Icon/_icon.css +1 -1
  74. package/src/Atom/Image/Image.stories.ts +4 -3
  75. package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +1 -1
  76. package/src/Atom/Link/Link.stories.ts +74 -7
  77. package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +4 -4
  78. package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +1 -1
  79. package/src/Atom/Media/Media.stories.ts +34 -5
  80. package/src/Atom/Media/Media.tsx +1 -6
  81. package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +2 -2
  82. package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +1 -1
  83. package/src/Atom/Media/_media.css +2 -10
  84. package/src/Atom/Spacing/Spacing.stories.ts +45 -31
  85. package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +5 -4
  86. package/src/Atom/Spacing/spacing.twig +5 -2
  87. package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +1 -1
  88. package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +1 -1
  89. package/src/Atom/Table/_table.css +1 -2
  90. package/src/Atom/Text/Text.stories.ts +62 -0
  91. package/src/Atom/Text/__snapshots__/{TextSizes.stories.ts.snap → Text.stories.ts.snap} +14 -27
  92. package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +1 -1
  93. package/src/Atom/Text/_text-sizes.css +2 -4
  94. package/src/Atom/Text/text-style.twig +11 -1
  95. package/src/Atom/Text/text-styles-example.twig +2 -16
  96. package/src/Atom/Video/Video.stories.ts +6 -4
  97. package/src/Atom/Video/Video.tsx +1 -5
  98. package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +1 -1
  99. package/src/Atom/_generic.css +2 -4
  100. package/src/Atom/_hr.css +1 -2
  101. package/src/Component/Accordion/Accordion.stories.ts +26 -8
  102. package/src/Component/Accordion/Accordion.stories.tsx +8 -10
  103. package/src/Component/Accordion/Accordion.tsx +2 -13
  104. package/src/Component/Accordion/AccordionItem.stories.ts +90 -0
  105. package/src/Component/Accordion/Components/AccordionContent.tsx +1 -5
  106. package/src/Component/Accordion/Components/AccordionTitle.tsx +1 -4
  107. package/src/Component/Accordion/Elements/Accordion.ts +1 -1
  108. package/src/Component/Accordion/Elements/AccordionDiv.ts +4 -11
  109. package/src/Component/Accordion/Elements/AccordionGroup.ts +10 -24
  110. package/src/Component/Accordion/Elements/AccordionMobile.ts +4 -4
  111. package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +17 -6
  112. package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +1 -1
  113. package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +90 -0
  114. package/src/Component/Accordion/accordion.css +7 -5
  115. package/src/Component/Accordion/twig/accordion-div.twig +13 -11
  116. package/src/Component/Accordion/twig/accordion-mobile.twig +13 -11
  117. package/src/Component/Breadcrumb/Breadcrumb.stories.ts +14 -0
  118. package/src/Component/Breadcrumb/Breadcrumb.tsx +2 -12
  119. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +1 -1
  120. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +1 -1
  121. package/src/Component/Breadcrumb/breadcrumb.css +1 -4
  122. package/src/Component/Callout/Callout.stories.ts +20 -0
  123. package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +1 -1
  124. package/src/Component/Callout/callout.css +1 -2
  125. package/src/Component/Card/Card.stories.ts +129 -14
  126. package/src/Component/Card/Card.stories.tsx +2 -2
  127. package/src/Component/Card/Components/CardContent.tsx +1 -5
  128. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +16 -16
  129. package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +1 -1
  130. package/src/Component/Card/card.css +2 -6
  131. package/src/Component/Carousel/Carousel.stories.ts +61 -8
  132. package/src/Component/Carousel/Elements/Carousel.ts +10 -19
  133. package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +288 -2
  134. package/src/Component/Carousel/carousel.css +1 -2
  135. package/src/Component/ContentBlock/Components/ContentBlockContent.tsx +1 -5
  136. package/src/Component/ContentBlock/Components/ContentBlockMedia.tsx +1 -4
  137. package/src/Component/ContentBlock/ContentBlock.stories.ts +63 -13
  138. package/src/Component/ContentBlock/ContentBlock.stories.tsx +2 -2
  139. package/src/Component/ContentBlock/ContentBlock.tsx +1 -5
  140. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +11 -11
  141. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +1 -1
  142. package/src/Component/Dialog/Dialog.stories.ts +78 -21
  143. package/src/Component/Dialog/Dialog.stories.tsx +2 -3
  144. package/src/Component/Dialog/Elements/Dialog.ts +7 -16
  145. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +8 -11
  146. package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +1 -1
  147. package/src/Component/Dialog/dialog.css +1 -2
  148. package/src/Component/Dialog/dialog.twig +1 -1
  149. package/src/Component/DropMenu/Components/DropMenuContext.tsx +4 -12
  150. package/src/Component/DropMenu/DropMenu.stories.ts +60 -1
  151. package/src/Component/DropMenu/DropMenu.tsx +2 -7
  152. package/src/Component/DropMenu/Elements/DropMenu.ts +21 -91
  153. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +53 -11
  154. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +1 -1
  155. package/src/Component/DropMenu/drop-menu.css +13 -41
  156. package/src/Component/DropMenu/drop-menu.twig +8 -6
  157. package/src/Component/Filters/Elements/Filters.ts +7 -11
  158. package/src/Component/Filters/FilterItem.stories.ts +180 -0
  159. package/src/Component/Filters/Filters.stories.ts +83 -8
  160. package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap +135 -0
  161. package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +43 -41
  162. package/src/Component/Filters/filter-item.twig +1 -1
  163. package/src/Component/Filters/filters.css +33 -17
  164. package/src/Component/GlobalAlert/Elements/ClosableAlert.ts +8 -7
  165. package/src/Component/GlobalAlert/GlobalAlert.stories.ts +60 -12
  166. package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +1 -2
  167. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +8 -6
  168. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +3 -3
  169. package/src/Component/HeroBanner/HeroBanner.stories.ts +84 -7
  170. package/src/Component/HeroBanner/HeroBanner.stories.tsx +4 -4
  171. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +91 -99
  172. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.tsx.snap +1 -1
  173. package/src/Component/HeroSearch/HeroSearch.stories.ts +23 -4
  174. package/src/Component/HeroSearch/HeroSearch.stories.tsx +4 -4
  175. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +10 -10
  176. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.tsx.snap +1 -1
  177. package/src/Component/InPageAlert/InPageAlert.stories.ts +76 -8
  178. package/src/Component/InPageAlert/InPageAlert.stories.tsx +1 -2
  179. package/src/Component/InPageAlert/InPageAlert.tsx +1 -4
  180. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +80 -2
  181. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +1 -1
  182. package/src/Component/InPageNavigation/Elements/InPageNavigation.ts +7 -9
  183. package/src/Component/InPageNavigation/Hooks/useInPageNavigation.ts +3 -5
  184. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +44 -9
  185. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +32 -40
  186. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +152 -5
  187. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +1 -1
  188. package/src/Component/LinkList/LinkList.stories.ts +23 -0
  189. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +8 -8
  190. package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +1 -1
  191. package/src/Component/LinkList/link-list.css +1 -2
  192. package/src/Component/ListItem/Components/ListItemContent.tsx +1 -5
  193. package/src/Component/ListItem/Components/ListItemMedia.tsx +1 -4
  194. package/src/Component/ListItem/ListItem.stories.ts +91 -11
  195. package/src/Component/ListItem/ListItem.stories.tsx +6 -7
  196. package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +1 -1
  197. package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap +1 -1
  198. package/src/Component/ListItem/list-item.css +1 -2
  199. package/src/Component/Navigation/Components/DropdownLevel.tsx +5 -13
  200. package/src/Component/Navigation/Elements/Navigation.ts +6 -13
  201. package/src/Component/Navigation/Navigation.stories.ts +48 -0
  202. package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +1 -1
  203. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +1 -1
  204. package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +1 -1
  205. package/src/Component/Navigation/_navigation-collapsible.css +2 -4
  206. package/src/Component/Navigation/_navigation-dropdown.css +2 -6
  207. package/src/Component/Navigation/_navigation-mega.css +1 -4
  208. package/src/Component/Navigation/_navigation.css +1 -4
  209. package/src/Component/Pagination/Components/PaginationContext.tsx +5 -19
  210. package/src/Component/Pagination/Components/PaginationItem.tsx +1 -5
  211. package/src/Component/Pagination/Pagination.stories.ts +28 -0
  212. package/src/Component/Pagination/Pagination.tsx +3 -11
  213. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +3 -3
  214. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +1 -1
  215. package/src/Component/Pagination/pagination.css +1 -4
  216. package/src/Component/Popover/Elements/Popover.ts +55 -0
  217. package/src/Component/Popover/Popover.stories.ts +259 -0
  218. package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +508 -0
  219. package/src/Component/{DropMenu → Popover}/polyfills.js +6 -4
  220. package/src/Component/Popover/popover.css +113 -0
  221. package/src/Component/Popover/popover.entry.js +1 -0
  222. package/src/Component/Popover/popover.twig +27 -0
  223. package/src/Component/ResultsBar/Components/ResultsBarInfo.tsx +2 -7
  224. package/src/Component/ResultsBar/Components/ResultsBarSort.tsx +1 -6
  225. package/src/Component/ResultsBar/ResultsBar.stories.ts +34 -4
  226. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.ts.snap +3 -3
  227. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap +1 -1
  228. package/src/Component/SideNavigation/SideNavigation.stories.ts +40 -0
  229. package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +1 -1
  230. package/src/Component/SideNavigation/side-navigation.css +3 -6
  231. package/src/Component/SocialLinks/SocialLinks.stories.ts +20 -0
  232. package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +5 -5
  233. package/src/Component/SocialShare/SocialShare.stories.ts +37 -0
  234. package/src/Component/SocialShare/SocialShare.tsx +2 -4
  235. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.ts.snap +40 -0
  236. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap +1 -1
  237. package/src/Component/SocialShare/social-share.twig +34 -0
  238. package/src/Component/Steps/StepItem.stories.ts +48 -0
  239. package/src/Component/Steps/Steps.stories.ts +82 -13
  240. package/src/Component/Steps/__snapshots__/StepItem.stories.ts.snap +31 -0
  241. package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +97 -16
  242. package/src/Component/Steps/steps.css +4 -11
  243. package/src/Component/Sticky/Elements/Sticky.ts +3 -8
  244. package/src/Component/Sticky/Sticky.stories.ts +35 -3
  245. package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +1 -1
  246. package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +1 -1
  247. package/src/Component/Sticky/sticky.twig +1 -1
  248. package/src/Component/Tabs/Components/Tab.tsx +2 -8
  249. package/src/Component/Tabs/Components/TabPanel.tsx +1 -5
  250. package/src/Component/Tabs/Elements/Tabs.ts +21 -31
  251. package/src/Component/Tabs/TabItem.stories.ts +52 -0
  252. package/src/Component/Tabs/Tabs.stories.ts +51 -8
  253. package/src/Component/Tabs/Tabs.tsx +6 -22
  254. package/src/Component/Tabs/__snapshots__/TabItem.stories.ts.snap +12 -0
  255. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +127 -11
  256. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +1 -1
  257. package/src/Component/Tabs/tab-item.twig +1 -2
  258. package/src/Component/Tabs/tabs.css +56 -59
  259. package/src/Component/Tag/Tag.stories.ts +30 -0
  260. package/src/Component/Tag/Tag.tsx +1 -5
  261. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +1 -1
  262. package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +1 -1
  263. package/src/Component/Tag/tag.css +1 -4
  264. package/src/Component/UtilityList/Elements/UtilityList.ts +110 -0
  265. package/src/Component/UtilityList/UtilityList.stories.ts +72 -0
  266. package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap +274 -0
  267. package/src/Component/UtilityList/utility-list.css +40 -0
  268. package/src/Component/UtilityList/utility-list.entry.js +1 -0
  269. package/src/Component/UtilityList/utility-list.twig +66 -0
  270. package/src/Form/Checkbox/FormCheckbox.stories.tsx +1 -3
  271. package/src/Form/Checkbox/FormCheckbox.tsx +4 -25
  272. package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap +3 -3
  273. package/src/Form/Description/Description.stories.ts +1 -2
  274. package/src/Form/Description/FormStatus.stories.ts +1 -4
  275. package/src/Form/Description/__snapshots__/Description.stories.ts.snap +1 -1
  276. package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap +1 -1
  277. package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap +3 -3
  278. package/src/Form/Form/Form.tsx +1 -3
  279. package/src/Form/Form/__snapshots__/Form.stories.tsx.snap +1 -1
  280. package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap +1 -1
  281. package/src/Form/FormItem/FormItem.stories.ts +3 -9
  282. package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +18 -18
  283. package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap +1 -1
  284. package/src/Form/Label/FormLabel.tsx +1 -5
  285. package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap +1 -1
  286. package/src/Form/Label/__snapshots__/Label.stories.ts.snap +3 -3
  287. package/src/Form/Radio/FormRadio.stories.tsx +1 -3
  288. package/src/Form/Radio/FormRadio.tsx +4 -25
  289. package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap +9 -9
  290. package/src/Form/Search/__snapshots__/Search.stories.ts.snap +1 -1
  291. package/src/Form/Select/FormSelect.tsx +3 -9
  292. package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap +1 -1
  293. package/src/Form/Select/__snapshots__/Select.stories.ts.snap +2 -2
  294. package/src/Form/TextInput/FormText.tsx +3 -9
  295. package/src/Form/TextInput/TextInput.stories.ts +1 -4
  296. package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +1 -1
  297. package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +1 -1
  298. package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +3 -3
  299. package/src/Form/Textarea/FormTextarea.tsx +3 -9
  300. package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +1 -1
  301. package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +2 -2
  302. package/src/Form/form.css +6 -14
  303. package/src/Introduction.mdx +1 -2
  304. package/src/Layout/Footer/Footer.stories.ts +1 -5
  305. package/src/Layout/Footer/Footer.stories.tsx +2 -3
  306. package/src/Layout/Footer/Footer.tsx +3 -12
  307. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +4 -4
  308. package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap +1 -1
  309. package/src/Layout/Grid/Grid.stories.ts +40 -8
  310. package/src/Layout/Grid/Grid.tsx +1 -2
  311. package/src/Layout/Grid/GridItem.stories.ts +63 -0
  312. package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +29 -4
  313. package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +1 -1
  314. package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap +19 -0
  315. package/src/Layout/Grid/grid-item.twig +3 -9
  316. package/src/Layout/Grid/grid.css +1 -4
  317. package/src/Layout/Header/Elements/GlobalToggle.ts +9 -29
  318. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +5 -5
  319. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +3 -3
  320. package/src/Layout/Masthead/Masthead.stories.ts +1 -4
  321. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +3 -3
  322. package/src/Layout/Page/Page.stories.tsx +2 -2
  323. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +3 -3
  324. package/src/Layout/Page/page.css +2 -10
  325. package/src/Layout/Section/Background.stories.ts +14 -39
  326. package/src/Layout/Section/Breakouts.stories.ts +3 -0
  327. package/src/Layout/Section/Flow.stories.ts +3 -0
  328. package/src/Layout/Section/Section.stories.ts +93 -11
  329. package/src/Layout/Section/Section.tsx +3 -13
  330. package/src/Layout/Section/SectionGrid.tsx +2 -9
  331. package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +4 -4
  332. package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +1 -1
  333. package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +1 -1
  334. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +93 -3
  335. package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +1 -1
  336. package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +1 -1
  337. package/src/Layout/Section/section.css +2 -5
  338. package/src/Layout/Section/section.twig +1 -3
  339. package/src/Layout/Sidebar/Sidebar.stories.ts +46 -4
  340. package/src/Layout/Sidebar/Sidebar.tsx +1 -3
  341. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +4 -4
  342. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +1 -1
  343. package/src/Utility/Context/ImageComponent.tsx +4 -8
  344. package/src/Utility/Context/LinkComponent.tsx +1 -5
  345. package/src/Utility/Drupal/drupal.css +2 -4
  346. package/src/Utility/Elements/breakpoint-loader.ts +4 -10
  347. package/src/Utility/Elements/cookie-compliance.ts +2 -8
  348. package/src/Utility/Elements/disclosure-widget.ts +11 -18
  349. package/src/Utility/Elements/io-loader.ts +4 -6
  350. package/src/Utility/Elements/keyboard.ts +4 -14
  351. package/src/Utility/Hooks/useLocalStorage.ts +5 -18
  352. package/src/Utility/Hooks/useMediaQuery.ts +1 -4
  353. package/src/Utility/Hooks/useToggle.ts +1 -3
  354. package/src/Utility/global.d.ts +1 -5
  355. package/src/Utility/utilities.ts +20 -45
  356. package/src/constants.css +7 -28
  357. package/src/enums.ts +3 -1
  358. package/src/react.ts +5 -21
  359. package/src/tokens.js +2 -2
  360. package/dist/build/chunks/disclosure-widget-DVpnRsTI.js +0 -126
  361. package/dist/build/chunks/disclosure-widget-DVpnRsTI.js.map +0 -1
  362. package/dist/build/chunks/drop-menu.entry-B4TtnC50.js +0 -132
  363. package/dist/build/chunks/drop-menu.entry-B4TtnC50.js.map +0 -1
  364. package/dist/build/chunks/keyboard-rvZ4dfGF.js +0 -104
  365. package/dist/build/chunks/keyboard-rvZ4dfGF.js.map +0 -1
  366. package/dist/build/chunks/polyfills-C-B7iqDG.js.map +0 -1
  367. package/dist/build/chunks/utilities-DXELy_An.js.map +0 -1
  368. package/src/Atom/Text/TextSizes.stories.ts +0 -25
  369. package/src/Atom/Text/text-alignment.twig +0 -5
  370. package/src/Component/Accordion/twig/accordion-example.twig +0 -36
  371. package/src/Component/Tile/README.md +0 -3
  372. package/src/Component/Tile/Tile.stories.ts +0 -49
  373. package/src/Component/Tile/Tile.stories.tsx +0 -35
  374. package/src/Component/Tile/__snapshots__/Tile.stories.ts.snap +0 -57
  375. package/src/Component/Tile/__snapshots__/Tile.stories.tsx.snap +0 -23
@@ -53,8 +53,7 @@ export default class DisclosureWidget {
53
53
  }
54
54
 
55
55
  init = (): void => {
56
- if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget"))
57
- return
56
+ if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget")) return
58
57
  const { attribute, setInitialAttribute } = this.options
59
58
  this.trigger.disclosureWidget = this
60
59
  if (setInitialAttribute) this.element.setAttribute(attribute, "")
@@ -67,19 +66,16 @@ export default class DisclosureWidget {
67
66
  const hasAttribute: boolean = this.element.hasAttribute(attribute)
68
67
  this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute
69
68
  this.trigger.setAttribute("aria-expanded", String(this.isOpen))
70
- const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent(
71
- "disclosure-toggle",
72
- {
73
- bubbles: true,
74
- cancelable: true,
75
- detail: {
76
- isOpen: this.isOpen,
77
- id: this.id,
78
- options: this.options,
79
- target: this.element,
80
- },
69
+ const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent("disclosure-toggle", {
70
+ bubbles: true,
71
+ cancelable: true,
72
+ detail: {
73
+ isOpen: this.isOpen,
74
+ id: this.id,
75
+ options: this.options,
76
+ target: this.element,
81
77
  },
82
- )
78
+ })
83
79
  this.trigger.dispatchEvent(newEvent)
84
80
  }
85
81
 
@@ -88,10 +84,7 @@ export default class DisclosureWidget {
88
84
 
89
85
  if (type === "mouseover" || type === "mouseout") {
90
86
  const triggerParent = this.trigger.parentNode
91
- if (
92
- triggerParent !== currentTarget ||
93
- triggerParent.contains(relatedTarget as HTMLElement)
94
- )
87
+ if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget as HTMLElement))
95
88
  return
96
89
  } else if (this.trigger !== currentTarget) return
97
90
 
@@ -46,11 +46,9 @@ export default class IntersectionLoader {
46
46
 
47
47
  static create = (selector: string, callback: () => any): void => {
48
48
  if (!Object.hasOwn(window, "once")) return
49
- window
50
- .once("intersection-loader", selector)
51
- ?.forEach((el: HTMLElement): void => {
52
- const loader: IntersectionLoader = new IntersectionLoader(el, callback)
53
- loader.init()
54
- })
49
+ window.once("intersection-loader", selector)?.forEach((el: HTMLElement): void => {
50
+ const loader: IntersectionLoader = new IntersectionLoader(el, callback)
51
+ loader.init()
52
+ })
55
53
  }
56
54
  }
@@ -34,10 +34,7 @@ export default class Keyboard {
34
34
  window.Mixtape.Menu = null
35
35
  }
36
36
 
37
- getNextFocusableMenuItem = (
38
- active: number,
39
- back: boolean = false,
40
- ): number => {
37
+ getNextFocusableMenuItem = (active: number, back: boolean = false): number => {
41
38
  if (!back) {
42
39
  // If moving forward, it's the active index + 1, or 0 if we are at the
43
40
  // end of the menu.
@@ -64,8 +61,7 @@ export default class Keyboard {
64
61
  // toggle to be clicked before the items are tabbable. This allows invisible
65
62
  // menu items to be skipped when moving focus with the this.
66
63
  // Make sure tabbable.
67
- let tabbable: string =
68
- window.Mixtape.Menu.items[focus].getAttribute("tabindex")
64
+ let tabbable: string = window.Mixtape.Menu.items[focus].getAttribute("tabindex")
69
65
  if (tabbable !== "-1") {
70
66
  window.Mixtape.Menu.items[focus].focus()
71
67
  } else {
@@ -90,14 +86,8 @@ export default class Keyboard {
90
86
  // It's up to the popup class to preventDefault on it's contents to
91
87
  // stop this from being triggered.
92
88
  if (activePopup.id) {
93
- const popupEl: HTMLElement = document.querySelector(
94
- `#${activePopup.id}`,
95
- ).parentElement
96
- if (
97
- popupEl &&
98
- (target === popupEl || popupEl?.contains(target as HTMLElement))
99
- )
100
- return
89
+ const popupEl: HTMLElement = document.querySelector(`#${activePopup.id}`).parentElement
90
+ if (popupEl && (target === popupEl || popupEl?.contains(target as HTMLElement))) return
101
91
  activePopup.closefn()
102
92
  }
103
93
  }
@@ -11,9 +11,7 @@ type LocalStorageProps = {
11
11
  const setLocalStorageItem = (key: string, value: any): void => {
12
12
  const stringifiedValue = JSON.stringify(value)
13
13
  window.localStorage.setItem(key, stringifiedValue)
14
- window.dispatchEvent(
15
- new StorageEvent("storage", { key, newValue: stringifiedValue }),
16
- )
14
+ window.dispatchEvent(new StorageEvent("storage", { key, newValue: stringifiedValue }))
17
15
  }
18
16
 
19
17
  const removeLocalStorageItem = (key: string): void => {
@@ -21,10 +19,7 @@ const removeLocalStorageItem = (key: string): void => {
21
19
  window.dispatchEvent(new StorageEvent("storage", { key, newValue: null }))
22
20
  }
23
21
 
24
- const useLocalStorage = ({
25
- key,
26
- initialValue,
27
- }: LocalStorageProps): [string, SetStateCallback] => {
22
+ const useLocalStorage = ({ key, initialValue }: LocalStorageProps): [string, SetStateCallback] => {
28
23
  const subscribe = useCallback((callback: LocalStorageCallback) => {
29
24
  window.addEventListener("storage", callback)
30
25
  return () => window.removeEventListener("storage", callback)
@@ -36,18 +31,13 @@ const useLocalStorage = ({
36
31
  throw Error("useLocalStorage is a client-only hook")
37
32
  }
38
33
 
39
- const store: string = useSyncExternalStore(
40
- subscribe,
41
- getSnapshot,
42
- getServerSnapshot,
43
- )
34
+ const store: string = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
44
35
 
45
36
  const setState = useCallback(
46
37
  (value): void => {
47
38
  try {
48
39
  const storeValue: string = JSON.parse(store) as string
49
- const nextState =
50
- typeof value === "function" ? value(storeValue) : value
40
+ const nextState = typeof value === "function" ? value(storeValue) : value
51
41
  if (nextState === undefined || nextState === null) {
52
42
  removeLocalStorageItem(key)
53
43
  } else {
@@ -62,10 +52,7 @@ const useLocalStorage = ({
62
52
  )
63
53
 
64
54
  useEffect(() => {
65
- if (
66
- window.localStorage.getItem(key) === null &&
67
- typeof initialValue !== "undefined"
68
- ) {
55
+ if (window.localStorage.getItem(key) === null && typeof initialValue !== "undefined") {
69
56
  setLocalStorageItem(key, initialValue)
70
57
  }
71
58
  }, [key, initialValue])
@@ -1,9 +1,6 @@
1
1
  import { useCallback, useSyncExternalStore } from "react"
2
2
 
3
- type MediaQueryCallBack = (
4
- this: MediaQueryList,
5
- ev: MediaQueryListEvent,
6
- ) => void
3
+ type MediaQueryCallBack = (this: MediaQueryList, ev: MediaQueryListEvent) => void
7
4
 
8
5
  const useMediaQuery = (query: string): boolean => {
9
6
  const subscribe = useCallback(
@@ -1,8 +1,6 @@
1
1
  import { useState, useCallback } from "react"
2
2
 
3
- const useToggle = (
4
- initialValue: boolean,
5
- ): [boolean, (value?: boolean) => void] => {
3
+ const useToggle = (initialValue: boolean): [boolean, (value?: boolean) => void] => {
6
4
  const [on, setOn] = useState(initialValue)
7
5
 
8
6
  const handleToggle = useCallback((value?: boolean): void => {
@@ -13,11 +13,7 @@ declare global {
13
13
  }
14
14
  }
15
15
  CookieCompliance?: CookieCompliance
16
- once?: (
17
- name: string,
18
- selector: string,
19
- context?: any,
20
- ) => NodeListOf<HTMLElement>
16
+ once?: (name: string, selector: string, context?: any) => NodeListOf<HTMLElement>
21
17
  }
22
18
  }
23
19
 
@@ -37,30 +37,21 @@ export const makeCamelCase = (string: string): string => {
37
37
  if (typeof string !== "string" || !string) return ""
38
38
  const output: string = string
39
39
  .trim()
40
- .replace(
41
- /(?:^\w|[A-Z]|\b\w|\s+)/g,
42
- (match: string, index: number): string => {
43
- if (+match === 0) return ""
44
- return index === 0 ? match.toLowerCase() : match.toUpperCase()
45
- },
46
- )
40
+ .replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match: string, index: number): string => {
41
+ if (+match === 0) return ""
42
+ return index === 0 ? match.toLowerCase() : match.toUpperCase()
43
+ })
47
44
  return output.replace(/[^\w\s]/gi, "")
48
45
  }
49
46
 
50
- export const isInternalLink = (
51
- href: string,
52
- internalHostnames: string[],
53
- ): boolean => {
47
+ export const isInternalLink = (href: string, internalHostnames: string[]): boolean => {
54
48
  if (typeof href !== "string" || !href || !Array.isArray(internalHostnames)) {
55
49
  return false
56
50
  }
57
51
 
58
52
  try {
59
53
  const { hostname }: { hostname: string } = new URL(href)
60
- return (
61
- window.location.hostname === hostname ||
62
- internalHostnames.includes(hostname)
63
- )
54
+ return window.location.hostname === hostname || internalHostnames.includes(hostname)
64
55
  } catch (error) {
65
56
  console.error(error)
66
57
  return false
@@ -85,9 +76,7 @@ export const getElementBox = (
85
76
  ): void => {
86
77
  const observer: ResizeObserver = new ResizeObserver(entries => {
87
78
  entries.forEach(({ contentBoxSize, borderBoxSize }) => {
88
- const [{ inlineSize, blockSize }] = content
89
- ? contentBoxSize
90
- : borderBoxSize
79
+ const [{ inlineSize, blockSize }] = content ? contentBoxSize : borderBoxSize
91
80
  element.style.setProperty("--inline-size", `${inlineSize.toFixed(1)}px`)
92
81
  element.style.setProperty("--block-size", `${blockSize.toFixed(1)}px`)
93
82
  if (once) observer.unobserve(element)
@@ -102,11 +91,8 @@ export const handleOutsideClick = (
102
91
  callback: () => void,
103
92
  ignored: HTMLElement[] = [],
104
93
  ): void => {
105
- const {
106
- target,
107
- clientY,
108
- clientX,
109
- }: { target: EventTarget; clientY: number; clientX: number } = event
94
+ const { target, clientY, clientX }: { target: EventTarget; clientY: number; clientX: number } =
95
+ event
110
96
  // FF treating option click as outside click.
111
97
  const isOption: boolean =
112
98
  target instanceof HTMLOptionElement || target instanceof HTMLSelectElement
@@ -118,38 +104,27 @@ export const handleOutsideClick = (
118
104
  // Exit early if we can.
119
105
  if (isIgnored.length || isOption) return
120
106
  // Check if click is inside the dialog content.
121
- const obs: IntersectionObserver = new IntersectionObserver(
122
- ([{ boundingClientRect }]) => {
123
- const { top, height, width, left } = boundingClientRect
124
- const isInDialog: boolean =
125
- top <= clientY &&
126
- clientY <= top + height &&
127
- left <= clientX &&
128
- clientX <= left + width
107
+ const obs: IntersectionObserver = new IntersectionObserver(([{ boundingClientRect }]) => {
108
+ const { top, height, width, left } = boundingClientRect
109
+ const isInDialog: boolean =
110
+ top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width
129
111
 
130
- if (!isInDialog) {
131
- callback()
132
- }
133
- obs.disconnect()
134
- },
135
- )
112
+ if (!isInDialog) {
113
+ callback()
114
+ }
115
+ obs.disconnect()
116
+ })
136
117
  obs.observe(container)
137
118
  }
138
119
 
139
- export const handleEscape = (
140
- event: KeyboardEvent,
141
- callback: () => void,
142
- ): void => {
120
+ export const handleEscape = (event: KeyboardEvent, callback: () => void): void => {
143
121
  const { key } = event
144
122
  if (key === "Escape") {
145
123
  callback()
146
124
  }
147
125
  }
148
126
 
149
- export const loadOnReady = (
150
- callback: (this: Window, ev: Event) => void,
151
- name: string,
152
- ): void => {
127
+ export const loadOnReady = (callback: (this: Window, ev: Event) => void, name: string): void => {
153
128
  // @ts-expect-error Drupal is global
154
129
  if (Object.hasOwn(window, "Drupal") && Object.hasOwn(Drupal, "behaviors")) {
155
130
  // @ts-expect-error Drupal is global
package/src/constants.css CHANGED
@@ -30,37 +30,16 @@
30
30
 
31
31
  color-scheme: var(--color-scheme);
32
32
 
33
- --colour-background: light-dark(
34
- token("colour.main.bg"),
35
- token("colour.reverse.bg")
36
- );
37
- --colour-background-alt: light-dark(
38
- token("colour.main.bgAlt"),
39
- token("colour.reverse.bgAlt")
40
- );
41
- --colour-foreground: light-dark(
42
- token("colour.main.fg"),
43
- token("colour.reverse.fg")
44
- );
45
- --colour-foreground-alt: light-dark(
46
- token("colour.main.fgAlt"),
47
- token("colour.reverse.fgAlt")
48
- );
49
- --colour-border: light-dark(
50
- token("colour.main.border"),
51
- token("colour.reverse.border")
52
- );
33
+ --colour-background: light-dark(token("colour.main.bg"), token("colour.reverse.bg"));
34
+ --colour-background-alt: light-dark(token("colour.main.bgAlt"), token("colour.reverse.bgAlt"));
35
+ --colour-foreground: light-dark(token("colour.main.fg"), token("colour.reverse.fg"));
36
+ --colour-foreground-alt: light-dark(token("colour.main.fgAlt"), token("colour.reverse.fgAlt"));
37
+ --colour-border: light-dark(token("colour.main.border"), token("colour.reverse.border"));
53
38
  --colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
54
39
 
55
40
  /* Reverse colors */
56
- --colour-foreground-reverse: light-dark(
57
- token("colour.reverse.fg"),
58
- token("colour.main.fg")
59
- );
60
- --colour-background-reverse: light-dark(
61
- token("colour.reverse.bg"),
62
- token("colour.main.bg")
63
- );
41
+ --colour-foreground-reverse: light-dark(token("colour.reverse.fg"), token("colour.main.fg"));
42
+ --colour-background-reverse: light-dark(token("colour.reverse.bg"), token("colour.main.bg"));
64
43
 
65
44
  /* State colours */
66
45
  --colour-error: oklch(45% 0.3 var(--_hue-error));
package/src/enums.ts CHANGED
@@ -53,7 +53,7 @@ export enum HeadingStyles {
53
53
  M = "mx-heading--m",
54
54
  S = "mx-heading--s",
55
55
  XS = "mx-heading--xs",
56
- RESET = "mx-spacing--top",
56
+ RESET = "mx-spacing--reset",
57
57
  RESETTOP = "mx-spacing--top-reset",
58
58
  RESETBOTTOM = "mx-spacing--bottom-reset",
59
59
  }
@@ -118,6 +118,7 @@ export enum Icons {
118
118
  FACEBOOK = "facebook",
119
119
  GOOGLE = "google",
120
120
  INFO = "info",
121
+ FILE = "file",
121
122
  INSTAGRAM = "instagram",
122
123
  LINKEDIN = "linkedin",
123
124
  MASTODON = "mastodon",
@@ -144,6 +145,7 @@ export enum Icons {
144
145
  TICK = "tick",
145
146
  TRASH = "trash",
146
147
  USER = "user",
148
+ SHARE = "share",
147
149
  }
148
150
 
149
151
  export enum GridColumns {
package/src/react.ts CHANGED
@@ -2,20 +2,14 @@ export {
2
2
  default as ImageComponentProvider,
3
3
  useImageComponent,
4
4
  } from "./Utility/Context/ImageComponent"
5
- export {
6
- default as LinkComponentProvider,
7
- useLinkComponent,
8
- } from "./Utility/Context/LinkComponent"
5
+ export { default as LinkComponentProvider, useLinkComponent } from "./Utility/Context/LinkComponent"
9
6
  export { default as Heading } from "./Atom/Heading/Heading"
10
7
  export { default as Media } from "./Atom/Media/Media"
11
8
  export { default as Link } from "./Atom/Link/Link"
12
9
  export { default as Text } from "./Atom/Text/Text"
13
10
  export { default as Video } from "./Atom/Video/Video"
14
11
  export { default as Button } from "./Atom/Button/Button"
15
- export {
16
- default as Accordion,
17
- useAccordion,
18
- } from "./Component/Accordion/Accordion"
12
+ export { default as Accordion, useAccordion } from "./Component/Accordion/Accordion"
19
13
  export { default as AccordionTitle } from "./Component/Accordion/Components/AccordionTitle"
20
14
  export { default as AccordionTitleIcon } from "./Component/Accordion/Components/AccordionTitleIcon"
21
15
  export { default as AccordionContent } from "./Component/Accordion/Components/AccordionContent"
@@ -33,11 +27,7 @@ export { default as InPageNavigation } from "./Component/InPageNavigation/InPage
33
27
  export { default as useInPageNavigation } from "./Component/InPageNavigation/Hooks/useInPageNavigation"
34
28
  export { default as InPageAlert } from "./Component/InPageAlert/InPageAlert"
35
29
  export { default as GlobalAlert } from "./Component/GlobalAlert/GlobalAlert"
36
- export {
37
- default as FormCheckbox,
38
- Checkbox,
39
- SingleCheckbox,
40
- } from "./Form/Checkbox/FormCheckbox"
30
+ export { default as FormCheckbox, Checkbox, SingleCheckbox } from "./Form/Checkbox/FormCheckbox"
41
31
  export { default as FormDescription } from "./Form/Description/FormDescription"
42
32
  export { default as FormLabel } from "./Form/Label/FormLabel"
43
33
  export { default as FormRadio, Radio } from "./Form/Radio/FormRadio"
@@ -51,15 +41,9 @@ export { default as Page } from "./Layout/Page/Page"
51
41
  export { default as HeroBanner } from "./Component/HeroBanner/HeroBanner"
52
42
  export { default as Section } from "./Layout/Section/Section"
53
43
  export { default as SectionGrid } from "./Layout/Section/SectionGrid"
54
- export {
55
- default as LinkList,
56
- LinkListItem,
57
- } from "./Component/LinkList/LinkList"
44
+ export { default as LinkList, LinkListItem } from "./Component/LinkList/LinkList"
58
45
  export { default as Message } from "./Component/InPageAlert/InPageAlert"
59
- export {
60
- default as Pagination,
61
- PaginationItem,
62
- } from "./Component/Pagination/Pagination"
46
+ export { default as Pagination, PaginationItem } from "./Component/Pagination/Pagination"
63
47
  export {
64
48
  default as PaginationProvider,
65
49
  usePagination,
package/src/tokens.js CHANGED
@@ -108,12 +108,12 @@ export default {
108
108
  hue: "260",
109
109
  },
110
110
  radius: {
111
- m: "3px",
111
+ m: "4px",
112
112
  l: global.size.l,
113
113
  round: "50%",
114
114
  },
115
115
  shadow: {
116
- colour: "oklch(0.25 0 100)",
116
+ colour: "oklch(0.25 0 100 / 0.15)",
117
117
  size: global.size.xs,
118
118
  },
119
119
  ratio: "16 / 9",
@@ -1,126 +0,0 @@
1
- import { m as makeAnchor } from "./utilities-DXELy_An.js";
2
- class DisclosureWidget {
3
- constructor(trigger, element, overrides, context = document) {
4
- this.init = () => {
5
- if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget"))
6
- return;
7
- const { attribute, setInitialAttribute } = this.options;
8
- this.trigger.disclosureWidget = this;
9
- if (setInitialAttribute) this.element.setAttribute(attribute, "");
10
- this.attach();
11
- };
12
- this.handleToggle = () => {
13
- const { attribute, setInitialAttribute } = this.options;
14
- this.element.toggleAttribute(attribute);
15
- const hasAttribute = this.element.hasAttribute(attribute);
16
- this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute;
17
- this.trigger.setAttribute("aria-expanded", String(this.isOpen));
18
- const newEvent = new CustomEvent(
19
- "disclosure-toggle",
20
- {
21
- bubbles: true,
22
- cancelable: true,
23
- detail: {
24
- isOpen: this.isOpen,
25
- id: this.id,
26
- options: this.options,
27
- target: this.element
28
- }
29
- }
30
- );
31
- this.trigger.dispatchEvent(newEvent);
32
- };
33
- this.handleMouse = (event) => {
34
- const { currentTarget, type, relatedTarget } = event;
35
- if (type === "mouseover" || type === "mouseout") {
36
- const triggerParent = this.trigger.parentNode;
37
- if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget))
38
- return;
39
- } else if (this.trigger !== currentTarget) return;
40
- const { shouldPreventDefault } = this.options;
41
- this.handleToggle();
42
- if (shouldPreventDefault) {
43
- event.preventDefault();
44
- event.stopPropagation();
45
- }
46
- };
47
- this.handleKeyboard = (event) => {
48
- const { key, target } = event;
49
- if (this.trigger !== target) return;
50
- const { isOpen } = this;
51
- const { shouldPreventDefault } = this.options;
52
- switch (key) {
53
- // Down/Enter should open it.
54
- case "ArrowDown":
55
- case "Enter":
56
- if (!isOpen) this.handleToggle();
57
- if (shouldPreventDefault) event.preventDefault();
58
- break;
59
- // Up/Esc should close it.
60
- case "ArrowUp":
61
- case "Escape":
62
- if (isOpen) this.handleToggle();
63
- if (shouldPreventDefault) event.preventDefault();
64
- break;
65
- }
66
- };
67
- this.attach = () => {
68
- if (this.attached) return;
69
- const { clickEvent } = this.options;
70
- if (clickEvent === "mouseover") {
71
- const parent = this.trigger.parentNode;
72
- parent.addEventListener("mouseover", this.handleMouse);
73
- parent.addEventListener("mouseout", this.handleMouse);
74
- } else {
75
- this.trigger.addEventListener("click", this.handleMouse);
76
- }
77
- this.trigger.addEventListener("keydown", this.handleKeyboard);
78
- this.trigger.setAttribute("aria-expanded", "false");
79
- if (!this.trigger.hasAttribute("aria-controls"))
80
- this.trigger.setAttribute("aria-controls", this.id);
81
- this.attached = true;
82
- };
83
- this.detach = () => {
84
- if (!this.attached) return;
85
- if (this.isOpen) {
86
- this.handleToggle();
87
- }
88
- const { clickEvent } = this.options;
89
- if (clickEvent === "mouseover") {
90
- const parent = this.trigger.parentNode;
91
- parent.removeEventListener("mouseover", this.handleMouse);
92
- parent.removeEventListener("mouseout", this.handleMouse);
93
- } else {
94
- this.trigger.removeEventListener("click", this.handleMouse);
95
- }
96
- this.trigger.removeEventListener("keydown", this.handleKeyboard);
97
- this.trigger.removeAttribute("aria-expanded");
98
- this.attached = false;
99
- };
100
- this.generatedId = () => {
101
- const string = this.trigger?.textContent?.trim();
102
- return !string ? "" : makeAnchor(string);
103
- };
104
- if (!trigger) {
105
- throw new Error("toggle is required.");
106
- }
107
- if (!element) {
108
- throw new Error("element is required.");
109
- }
110
- const options = {
111
- attribute: "inert",
112
- shouldPreventDefault: true,
113
- setInitialAttribute: true,
114
- clickEvent: "click"
115
- };
116
- this.options = { ...options, ...overrides };
117
- this.context = context || document;
118
- this.trigger = trigger;
119
- this.element = element;
120
- this.id = this.element.id || this.generatedId();
121
- }
122
- }
123
- export {
124
- DisclosureWidget as D
125
- };
126
- //# sourceMappingURL=disclosure-widget-DVpnRsTI.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"disclosure-widget-DVpnRsTI.js","sources":["../../../src/Utility/Elements/disclosure-widget.ts"],"sourcesContent":["/**\n * Class for a generic Disclosure Widget.\n */\nimport { makeAnchor } from \"../utilities\"\n\ntype DisclosureWidgetOptions = {\n attribute?: string\n shouldPreventDefault?: boolean\n setInitialAttribute?: boolean\n clickEvent?: \"click\" | \"mouseover\"\n}\n\nexport type DisclosureWidgetEvent = {\n isOpen: boolean\n id: string\n options: DisclosureWidgetOptions\n target: Element\n}\n\nexport default class DisclosureWidget {\n options: DisclosureWidgetOptions\n context: Document | Element\n trigger: Element & { disclosureWidget?: DisclosureWidget }\n element: Element\n id: string\n isOpen?: boolean\n attached?: boolean\n\n constructor(\n trigger: Element,\n element: Element,\n overrides?: DisclosureWidgetOptions,\n context: Element | Document = document,\n ) {\n if (!trigger) {\n throw new Error(\"toggle is required.\")\n }\n if (!element) {\n throw new Error(\"element is required.\")\n }\n const options: DisclosureWidgetOptions = {\n attribute: \"inert\",\n shouldPreventDefault: true,\n setInitialAttribute: true,\n clickEvent: \"click\",\n }\n\n this.options = { ...options, ...overrides }\n this.context = context || document\n this.trigger = trigger\n this.element = element\n this.id = this.element.id || this.generatedId()\n }\n\n init = (): void => {\n if (Object.prototype.hasOwnProperty.call(this.trigger, \"disclosureWidget\"))\n return\n const { attribute, setInitialAttribute } = this.options\n this.trigger.disclosureWidget = this\n if (setInitialAttribute) this.element.setAttribute(attribute, \"\")\n this.attach()\n }\n\n handleToggle = (): void => {\n const { attribute, setInitialAttribute } = this.options\n this.element.toggleAttribute(attribute)\n const hasAttribute: boolean = this.element.hasAttribute(attribute)\n this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute\n this.trigger.setAttribute(\"aria-expanded\", String(this.isOpen))\n const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent(\n \"disclosure-toggle\",\n {\n bubbles: true,\n cancelable: true,\n detail: {\n isOpen: this.isOpen,\n id: this.id,\n options: this.options,\n target: this.element,\n },\n },\n )\n this.trigger.dispatchEvent(newEvent)\n }\n\n handleMouse = (event: MouseEvent): void => {\n const { currentTarget, type, relatedTarget } = event\n\n if (type === \"mouseover\" || type === \"mouseout\") {\n const triggerParent = this.trigger.parentNode\n if (\n triggerParent !== currentTarget ||\n triggerParent.contains(relatedTarget as HTMLElement)\n )\n return\n } else if (this.trigger !== currentTarget) return\n\n const { shouldPreventDefault } = this.options\n this.handleToggle()\n if (shouldPreventDefault) {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n\n handleKeyboard = (event: KeyboardEvent): void => {\n const { key, target } = event\n if (this.trigger !== target) return\n const { isOpen } = this\n const { shouldPreventDefault } = this.options\n\n switch (key) {\n // Down/Enter should open it.\n case \"ArrowDown\":\n case \"Enter\":\n if (!isOpen) this.handleToggle()\n if (shouldPreventDefault) event.preventDefault()\n break\n\n // Up/Esc should close it.\n case \"ArrowUp\":\n case \"Escape\":\n if (isOpen) this.handleToggle()\n if (shouldPreventDefault) event.preventDefault()\n break\n\n default:\n break\n }\n }\n\n attach = (): void => {\n if (this.attached) return\n const { clickEvent } = this.options\n if (clickEvent === \"mouseover\") {\n const parent = this.trigger.parentNode\n parent.addEventListener(\"mouseover\", this.handleMouse)\n parent.addEventListener(\"mouseout\", this.handleMouse)\n } else {\n this.trigger.addEventListener(\"click\", this.handleMouse)\n }\n this.trigger.addEventListener(\"keydown\", this.handleKeyboard)\n\n this.trigger.setAttribute(\"aria-expanded\", \"false\")\n if (!this.trigger.hasAttribute(\"aria-controls\"))\n this.trigger.setAttribute(\"aria-controls\", this.id)\n this.attached = true\n }\n\n detach = (): void => {\n if (!this.attached) return\n if (this.isOpen) {\n this.handleToggle()\n }\n const { clickEvent } = this.options\n if (clickEvent === \"mouseover\") {\n const parent = this.trigger.parentNode\n parent.removeEventListener(\"mouseover\", this.handleMouse)\n parent.removeEventListener(\"mouseout\", this.handleMouse)\n } else {\n this.trigger.removeEventListener(\"click\", this.handleMouse)\n }\n this.trigger.removeEventListener(\"keydown\", this.handleKeyboard)\n\n this.trigger.removeAttribute(\"aria-expanded\")\n this.attached = false\n }\n\n generatedId = (): string => {\n const string: string | undefined = this.trigger?.textContent?.trim()\n return !string ? \"\" : makeAnchor(string)\n }\n}\n"],"names":[],"mappings":"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"}