@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

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 (273) hide show
  1. package/dist/css/base/button.css +2 -2
  2. package/dist/css/base/button.css.map +1 -1
  3. package/dist/css/base/form.css +2 -2
  4. package/dist/css/base/form.css.map +1 -1
  5. package/dist/css/base/link.css +2 -2
  6. package/dist/css/base/link.css.map +1 -1
  7. package/dist/css/base/table.css +2 -2
  8. package/dist/css/base/table.css.map +1 -1
  9. package/dist/css/base.css +2 -2
  10. package/dist/css/base.css.map +1 -1
  11. package/dist/css/component/accordion.css +2 -5
  12. package/dist/css/component/accordion.css.map +1 -1
  13. package/dist/css/component/alert.css +2 -2
  14. package/dist/css/component/alert.css.map +1 -1
  15. package/dist/css/component/badge.css +2 -2
  16. package/dist/css/component/badge.css.map +1 -1
  17. package/dist/css/component/card.css +2 -2
  18. package/dist/css/component/card.css.map +1 -1
  19. package/dist/css/component/carousel.css +2 -2
  20. package/dist/css/component/carousel.css.map +1 -1
  21. package/dist/css/component/disclosure.css +2 -2
  22. package/dist/css/component/disclosure.css.map +1 -1
  23. package/dist/css/component/input-group.css +2 -2
  24. package/dist/css/component/input-group.css.map +1 -1
  25. package/dist/css/component/list.css +2 -2
  26. package/dist/css/component/list.css.map +1 -1
  27. package/dist/css/component/menu.css +2 -2
  28. package/dist/css/component/menu.css.map +1 -1
  29. package/dist/css/component/navigation.css +2 -2
  30. package/dist/css/component/navigation.css.map +1 -1
  31. package/dist/css/component.css +2 -5
  32. package/dist/css/component.css.map +1 -1
  33. package/dist/css/graupl.css +2 -5
  34. package/dist/css/graupl.css.map +1 -1
  35. package/dist/css/init.css +2 -2
  36. package/dist/css/init.css.map +1 -1
  37. package/dist/css/layout/columns.css +2 -2
  38. package/dist/css/layout/columns.css.map +1 -1
  39. package/dist/css/layout/container.css +2 -2
  40. package/dist/css/layout/container.css.map +1 -1
  41. package/dist/css/layout/flex-columns.css +2 -2
  42. package/dist/css/layout/flex-columns.css.map +1 -1
  43. package/dist/css/layout.css +2 -5
  44. package/dist/css/layout.css.map +1 -1
  45. package/dist/css/normalize.css +2 -2
  46. package/dist/css/normalize.css.map +1 -1
  47. package/dist/css/state/focus.css +2 -2
  48. package/dist/css/state/focus.css.map +1 -1
  49. package/dist/css/state.css +2 -2
  50. package/dist/css/state.css.map +1 -1
  51. package/dist/css/theme/color.css +2 -2
  52. package/dist/css/theme/color.css.map +1 -1
  53. package/dist/css/theme/typography.css +2 -2
  54. package/dist/css/theme/typography.css.map +1 -1
  55. package/dist/css/theme.css +2 -2
  56. package/dist/css/theme.css.map +1 -1
  57. package/dist/css/utilities/alignment.css +1 -1
  58. package/dist/css/utilities/alignment.css.map +1 -1
  59. package/dist/css/utilities/background.css +2 -2
  60. package/dist/css/utilities/background.css.map +1 -1
  61. package/dist/css/utilities/border.css +2 -2
  62. package/dist/css/utilities/border.css.map +1 -1
  63. package/dist/css/utilities/color.css +2 -2
  64. package/dist/css/utilities/color.css.map +1 -1
  65. package/dist/css/utilities/container.css +1 -1
  66. package/dist/css/utilities/container.css.map +1 -1
  67. package/dist/css/utilities/display.css +2 -2
  68. package/dist/css/utilities/display.css.map +1 -1
  69. package/dist/css/utilities/flex.css +2 -2
  70. package/dist/css/utilities/flex.css.map +1 -1
  71. package/dist/css/utilities/gradient.css +2 -2
  72. package/dist/css/utilities/gradient.css.map +1 -1
  73. package/dist/css/utilities/height.css +2 -2
  74. package/dist/css/utilities/height.css.map +1 -1
  75. package/dist/css/utilities/inset.css +2 -2
  76. package/dist/css/utilities/inset.css.map +1 -1
  77. package/dist/css/utilities/justification.css +1 -1
  78. package/dist/css/utilities/justification.css.map +1 -1
  79. package/dist/css/utilities/list.css +1 -1
  80. package/dist/css/utilities/list.css.map +1 -1
  81. package/dist/css/utilities/order.css +2 -2
  82. package/dist/css/utilities/order.css.map +1 -1
  83. package/dist/css/utilities/position.css +2 -2
  84. package/dist/css/utilities/position.css.map +1 -1
  85. package/dist/css/utilities/ratio.css +2 -2
  86. package/dist/css/utilities/ratio.css.map +1 -1
  87. package/dist/css/utilities/spacing.css +2 -2
  88. package/dist/css/utilities/spacing.css.map +1 -1
  89. package/dist/css/utilities/typography.css +2 -2
  90. package/dist/css/utilities/typography.css.map +1 -1
  91. package/dist/css/utilities/visibility.css +2 -2
  92. package/dist/css/utilities/visibility.css.map +1 -1
  93. package/dist/css/utilities/visually-hidden.css +2 -2
  94. package/dist/css/utilities/visually-hidden.css.map +1 -1
  95. package/dist/css/utilities/width.css +2 -2
  96. package/dist/css/utilities/width.css.map +1 -1
  97. package/dist/css/utilities/z-index.css +1 -1
  98. package/dist/css/utilities/z-index.css.map +1 -1
  99. package/dist/css/utilities.css +2 -2
  100. package/dist/css/utilities.css.map +1 -1
  101. package/dist/js/accordion.js.map +1 -1
  102. package/dist/js/alert.js.map +1 -1
  103. package/dist/js/carousel.js.map +1 -1
  104. package/dist/js/component/accordion.cjs.js.map +1 -1
  105. package/dist/js/component/accordion.es.js.map +1 -1
  106. package/dist/js/component/accordion.iife.js.map +1 -1
  107. package/dist/js/component/alert.cjs.js.map +1 -1
  108. package/dist/js/component/alert.es.js.map +1 -1
  109. package/dist/js/component/alert.iife.js.map +1 -1
  110. package/dist/js/component/carousel.cjs.js.map +1 -1
  111. package/dist/js/component/carousel.es.js.map +1 -1
  112. package/dist/js/component/carousel.iife.js.map +1 -1
  113. package/dist/js/component/disclosure.cjs.js +2 -2
  114. package/dist/js/component/disclosure.cjs.js.map +1 -1
  115. package/dist/js/component/disclosure.es.js +2 -2
  116. package/dist/js/component/disclosure.es.js.map +1 -1
  117. package/dist/js/component/disclosure.iife.js +2 -2
  118. package/dist/js/component/disclosure.iife.js.map +1 -1
  119. package/dist/js/component/tabs.cjs.js +5 -0
  120. package/dist/js/component/tabs.cjs.js.map +1 -0
  121. package/dist/js/component/tabs.es.js +5 -0
  122. package/dist/js/component/tabs.es.js.map +1 -0
  123. package/dist/js/component/tabs.iife.js +5 -0
  124. package/dist/js/component/tabs.iife.js.map +1 -0
  125. package/dist/js/disclosure.js +2 -2
  126. package/dist/js/disclosure.js.map +1 -1
  127. package/dist/js/generator/accordion.cjs.js.map +1 -1
  128. package/dist/js/generator/accordion.es.js.map +1 -1
  129. package/dist/js/generator/accordion.iife.js.map +1 -1
  130. package/dist/js/generator/alert.cjs.js.map +1 -1
  131. package/dist/js/generator/alert.es.js.map +1 -1
  132. package/dist/js/generator/alert.iife.js.map +1 -1
  133. package/dist/js/generator/carousel.cjs.js.map +1 -1
  134. package/dist/js/generator/carousel.es.js.map +1 -1
  135. package/dist/js/generator/carousel.iife.js.map +1 -1
  136. package/dist/js/generator/disclosure.cjs.js +2 -2
  137. package/dist/js/generator/disclosure.cjs.js.map +1 -1
  138. package/dist/js/generator/disclosure.es.js +2 -2
  139. package/dist/js/generator/disclosure.es.js.map +1 -1
  140. package/dist/js/generator/disclosure.iife.js +2 -2
  141. package/dist/js/generator/disclosure.iife.js.map +1 -1
  142. package/dist/js/generator/navigation.cjs.js.map +1 -1
  143. package/dist/js/generator/navigation.es.js.map +1 -1
  144. package/dist/js/generator/navigation.iife.js.map +1 -1
  145. package/dist/js/generator/tabs.cjs.js +5 -0
  146. package/dist/js/generator/tabs.cjs.js.map +1 -0
  147. package/dist/js/generator/tabs.es.js +5 -0
  148. package/dist/js/generator/tabs.es.js.map +1 -0
  149. package/dist/js/generator/tabs.iife.js +5 -0
  150. package/dist/js/generator/tabs.iife.js.map +1 -0
  151. package/dist/js/graupl.js +5 -5
  152. package/dist/js/graupl.js.map +1 -1
  153. package/dist/js/navigation.js.map +1 -1
  154. package/dist/js/tabs.js +5 -0
  155. package/dist/js/tabs.js.map +1 -0
  156. package/package.json +4 -3
  157. package/src/js/disclosure/Disclosure.js +25 -45
  158. package/src/js/domHelpers.js +39 -22
  159. package/src/js/tabs/TabToggle.js +378 -0
  160. package/src/js/tabs/Tabs.js +1091 -0
  161. package/src/js/tabs/generator.js +32 -0
  162. package/src/js/tabs/index.js +5 -0
  163. package/src/scss/_defaults.scss +21 -88
  164. package/src/scss/_variables.scss +70 -0
  165. package/src/scss/base/button/_defaults.scss +2 -24
  166. package/src/scss/base/button/_index.scss +53 -52
  167. package/src/scss/base/button/_mixins.scss +24 -58
  168. package/src/scss/base/button/_variables.scss +139 -0
  169. package/src/scss/base/form/_defaults.scss +72 -2
  170. package/src/scss/base/form/_index.scss +196 -70
  171. package/src/scss/base/form/_variables.scss +166 -0
  172. package/src/scss/base/link/_defaults.scss +31 -0
  173. package/src/scss/base/link/_index.scss +177 -172
  174. package/src/scss/base/link/_variables.scss +215 -0
  175. package/src/scss/base/table/_defaults.scss +1 -11
  176. package/src/scss/base/table/_index.scss +126 -117
  177. package/src/scss/base/table/_variables.scss +214 -3
  178. package/src/scss/component/_index.scss +1 -0
  179. package/src/scss/component/accordion/_defaults.scss +73 -22
  180. package/src/scss/component/accordion/_index.scss +437 -62
  181. package/src/scss/component/accordion/_variables.scss +527 -101
  182. package/src/scss/component/alert/_defaults.scss +23 -32
  183. package/src/scss/component/alert/_index.scss +236 -30
  184. package/src/scss/component/alert/_variables.scss +155 -6
  185. package/src/scss/component/badge/_defaults.scss +1 -0
  186. package/src/scss/component/badge/_index.scss +25 -28
  187. package/src/scss/component/badge/_variables.scss +66 -2
  188. package/src/scss/component/card/_defaults.scss +64 -13
  189. package/src/scss/component/card/_index.scss +276 -30
  190. package/src/scss/component/card/_variables.scss +132 -0
  191. package/src/scss/component/carousel/_defaults.scss +73 -15
  192. package/src/scss/component/carousel/_index.scss +357 -41
  193. package/src/scss/component/carousel/_variables.scss +391 -0
  194. package/src/scss/component/disclosure/_index.scss +4 -4
  195. package/src/scss/component/disclosure/_variables.scss +127 -2
  196. package/src/scss/component/input-group/_defaults.scss +10 -3
  197. package/src/scss/component/input-group/_index.scss +72 -4
  198. package/src/scss/component/input-group/_variables.scss +37 -0
  199. package/src/scss/component/list/_defaults.scss +35 -2
  200. package/src/scss/component/list/_index.scss +159 -5
  201. package/src/scss/component/list/_variables.scss +152 -0
  202. package/src/scss/component/menu/_defaults.scss +49 -7
  203. package/src/scss/component/menu/_index.scss +325 -99
  204. package/src/scss/component/menu/_variables.scss +484 -1
  205. package/src/scss/component/navigation/_defaults.scss +45 -3
  206. package/src/scss/component/navigation/_index.scss +249 -98
  207. package/src/scss/component/navigation/_variables.scss +334 -5
  208. package/src/scss/component/tabs/_defaults.scss +82 -0
  209. package/src/scss/component/tabs/_index.scss +497 -0
  210. package/src/scss/component/tabs/_variables.scss +974 -0
  211. package/src/scss/layout/columns/_defaults.scss +5 -3
  212. package/src/scss/layout/columns/_index.scss +27 -21
  213. package/src/scss/layout/columns/_variables.scss +13 -0
  214. package/src/scss/layout/container/_defaults.scss +28 -11
  215. package/src/scss/layout/container/_index.scss +305 -161
  216. package/src/scss/layout/container/_variables.scss +148 -15
  217. package/src/scss/layout/flex-columns/_defaults.scss +5 -3
  218. package/src/scss/layout/flex-columns/_index.scss +28 -20
  219. package/src/scss/layout/flex-columns/_variables.scss +9 -0
  220. package/src/scss/mixins/_state.scss +37 -0
  221. package/src/scss/mixins/_theme.scss +36 -1
  222. package/src/scss/state/focus/_index.scss +17 -12
  223. package/src/scss/state/focus/_variables.scss +30 -4
  224. package/src/scss/theme/color/_defaults.scss +6 -35
  225. package/src/scss/theme/color/_index.scss +167 -1
  226. package/src/scss/theme/color/_variables.scss +155 -0
  227. package/src/scss/theme/typography/_defaults.scss +26 -19
  228. package/src/scss/theme/typography/_index.scss +176 -20
  229. package/src/scss/theme/typography/_variables.scss +186 -0
  230. package/src/scss/utilities/_template/_index.scss +0 -1
  231. package/src/scss/utilities/alignment/_defaults.scss +0 -33
  232. package/src/scss/utilities/alignment/_index.scss +24 -25
  233. package/src/scss/utilities/background/_defaults.scss +0 -77
  234. package/src/scss/utilities/background/_index.scss +32 -37
  235. package/src/scss/utilities/border/_defaults.scss +0 -33
  236. package/src/scss/utilities/border/_index.scss +25 -26
  237. package/src/scss/utilities/color/_defaults.scss +0 -19
  238. package/src/scss/utilities/color/_index.scss +22 -22
  239. package/src/scss/utilities/container/_defaults.scss +0 -11
  240. package/src/scss/utilities/container/_index.scss +20 -19
  241. package/src/scss/utilities/display/_defaults.scss +0 -11
  242. package/src/scss/utilities/display/_index.scss +20 -19
  243. package/src/scss/utilities/flex/_defaults.scss +0 -55
  244. package/src/scss/utilities/flex/_index.scss +28 -31
  245. package/src/scss/utilities/gradient/_defaults.scss +0 -28
  246. package/src/scss/utilities/gradient/_index.scss +27 -28
  247. package/src/scss/utilities/gradient/_variables.scss +15 -0
  248. package/src/scss/utilities/height/_defaults.scss +0 -8
  249. package/src/scss/utilities/height/_index.scss +22 -21
  250. package/src/scss/utilities/inset/_defaults.scss +0 -16
  251. package/src/scss/utilities/inset/_index.scss +20 -20
  252. package/src/scss/utilities/justification/_defaults.scss +0 -33
  253. package/src/scss/utilities/justification/_index.scss +24 -25
  254. package/src/scss/utilities/list/_defaults.scss +0 -22
  255. package/src/scss/utilities/list/_index.scss +22 -22
  256. package/src/scss/utilities/order/_defaults.scss +0 -8
  257. package/src/scss/utilities/order/_index.scss +20 -19
  258. package/src/scss/utilities/position/_defaults.scss +0 -11
  259. package/src/scss/utilities/position/_index.scss +20 -19
  260. package/src/scss/utilities/ratio/_defaults.scss +0 -8
  261. package/src/scss/utilities/ratio/_index.scss +22 -21
  262. package/src/scss/utilities/ratio/_variables.scss +6 -0
  263. package/src/scss/utilities/spacing/_defaults.scss +0 -11
  264. package/src/scss/utilities/spacing/_index.scss +18 -17
  265. package/src/scss/utilities/typography/_defaults.scss +0 -22
  266. package/src/scss/utilities/typography/_index.scss +27 -26
  267. package/src/scss/utilities/visibility/_defaults.scss +0 -11
  268. package/src/scss/utilities/visibility/_index.scss +19 -18
  269. package/src/scss/utilities/visually-hidden/_index.scss +19 -17
  270. package/src/scss/utilities/width/_defaults.scss +0 -8
  271. package/src/scss/utilities/width/_index.scss +21 -20
  272. package/src/scss/utilities/z-index/_defaults.scss +0 -11
  273. package/src/scss/utilities/z-index/_index.scss +19 -18
package/src/scss/component/menu/_index.scss CHANGED
@@ -1,15 +1,275 @@
1
1
  // @graupl/core menu component styles.
2
+ //
3
+ // This module provides the menu and submenu styles.
4
+ //
5
+ // The following selectors are generated by default:
6
+ // - `.menu`: The menu container.
7
+ // - `.submenu`: The submenu container.
8
+ // - `.menu-item`: A menu item.
9
+ // - `.menu-link`: The menu link inside a menu item.
10
+ // - `.submenu-toggle`: The submenu toggle control.
11
+ // - `.show`: Modifier applied when menus/submenus are shown.
12
+ // - `.hide`: Modifier applied when menus/submenus are hidden.
13
+ //
14
+ // The following custom properties can be used to customize the menu component:
15
+ // | Property | Description | Default Value |
16
+ // | ------------------------------------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
17
+ // | `--graupl-menu-flex-direction` | Flex direction of the root menu container. | `row` |
18
+ // | `--graupl-menu-padding-x` | Horizontal padding inside the menu. | `var(--graupl-spacer-0)` |
19
+ // | `--graupl-menu-padding-y` | Vertical padding inside the menu. | `var(--graupl-spacer-0)` |
20
+ // | `--graupl-menu-padding` | Shorthand padding for the menu. | `var(--graupl-menu-padding-y) var(--graupl-menu-padding-x)` |
21
+ // | `--graupl-menu-column-gap` | Column gap between menu items. | `var(--graupl-spacer-0)` |
22
+ // | `--graupl-menu-row-gap` | Row gap between menu rows. | `var(--graupl-spacer-0)` |
23
+ // | `--graupl-menu-gap` | Shorthand gap between menu items. | `var(--graupl-menu-column-gap) var(--graupl-menu-row-gap)` |
24
+ // | `--graupl-menu-show-display` | Display value when the menu is shown. | `flex` |
25
+ // | `--graupl-menu-hide-display` | Display value when the menu is hidden. | `none` |
26
+ // | `--graupl-menu-display` | Base display value for the menu. | `flex` |
27
+ // | `--graupl-menu-background` | Background colour of the menu. | `var(--graupl-background)` |
28
+ // | `--graupl-menu-color` | Text colour of the menu. | `var(--graupl-color)` |
29
+ // | `--graupl-menu-border-color` | Border colour of the menu. | `var(--graupl-menu-color)` |
30
+ // | `--graupl-menu-border-top-left-radius` | Top-left border radius of the menu. | `var(--graupl-border-top-left-radius)` |
31
+ // | `--graupl-menu-border-top-right-radius` | Top-right border radius of the menu. | `var(--graupl-border-top-right-radius)` |
32
+ // | `--graupl-menu-border-bottom-right-radius` | Bottom-right border radius of the menu. | `var(--graupl-border-bottom-right-radius)` |
33
+ // | `--graupl-menu-border-bottom-left-radius` | Bottom-left border radius of the menu. | `var(--graupl-border-bottom-left-radius)` |
34
+ // | `--graupl-menu-border-radius` | Border radius shorthand for the menu. | `var(--graupl-menu-border-top-left-radius) var(--graupl-menu-border-top-right-radius) var(--graupl-menu-border-bottom-right-radius) var(--graupl-menu-border-bottom-left-radius)` |
35
+ // | `--graupl-menu-border-top-width` | Top border width of the menu. | `0` |
36
+ // | `--graupl-menu-border-right-width` | Right border width of the menu. | `0` |
37
+ // | `--graupl-menu-border-bottom-width` | Bottom border width of the menu. | `0` |
38
+ // | `--graupl-menu-border-left-width` | Left border width of the menu. | `0` |
39
+ // | `--graupl-menu-border-width` | Border width shorthand for the menu. | `var(--graupl-menu-border-top-width) var(--graupl-menu-border-right-width) var(--graupl-menu-border-bottom-width) var(--graupl-menu-border-left-width)` |
40
+ // | `--graupl-menu-border-top-style` | Top border style of the menu. | `var(--graupl-border-top-style)` |
41
+ // | `--graupl-menu-border-right-style` | Right border style of the menu. | `var(--graupl-border-right-style)` |
42
+ // | `--graupl-menu-border-bottom-style` | Bottom border style of the menu. | `var(--graupl-border-bottom-style)` |
43
+ // | `--graupl-menu-border-left-style` | Left border style of the menu. | `var(--graupl-border-left-style)` |
44
+ // | `--graupl-menu-border-style` | Border style shorthand for the menu. | `var(--graupl-menu-border-top-style) var(--graupl-menu-border-right-style) var(--graupl-menu-border-bottom-style) var(--graupl-menu-border-left-style)` |
45
+ // | `--graupl-submenu-flex-direction` | Flex direction of submenu lists. | `column` |
46
+ // | `--graupl-submenu-z-index` | Z-index applied to submenu overlays. | `2` |
47
+ // | `--graupl-submenu-padding-x` | Horizontal padding inside submenus. | `var(--graupl-spacer-0)` |
48
+ // | `--graupl-submenu-padding-y` | Vertical padding inside submenus. | `var(--graupl-spacer-0)` |
49
+ // | `--graupl-submenu-padding` | Shorthand padding inside submenus. | `var(--graupl-submenu-padding-y) var(--graupl-submenu-padding-x)` |
50
+ // | `--graupl-submenu-column-gap` | Column gap inside submenus. | `var(--graupl-menu-column-gap)` |
51
+ // | `--graupl-submenu-row-gap` | Row gap inside submenus. | `var(--graupl-menu-row-gap)` |
52
+ // | `--graupl-submenu-gap` | Shorthand gap inside submenus. | `var(--graupl-submenu-column-gap) var(--graupl-submenu-row-gap)` |
53
+ // | `--graupl-submenu-show-display` | Display value when a submenu is shown. | `flex` |
54
+ // | `--graupl-submenu-hide-display` | Display value when a submenu is hidden. | `none` |
55
+ // | `--graupl-submenu-display` | Base display value for submenus. | `none` |
56
+ // | `--graupl-submenu-background` | Background colour of submenus. | `var(--graupl-menu-background)` |
57
+ // | `--graupl-submenu-color` | Text colour of submenus. | `var(--graupl-menu-color)` |
58
+ // | `--graupl-submenu-border-color` | Border colour of submenus. | `var(--graupl-menu-border-color)` |
59
+ // | `--graupl-submenu-border-top-left-radius` | Top-left border radius of submenus. | `var(--graupl-border-top-left-radius)` |
60
+ // | `--graupl-submenu-border-top-right-radius` | Top-right border radius of submenus. | `var(--graupl-border-top-right-radius)` |
61
+ // | `--graupl-submenu-border-bottom-right-radius` | Bottom-right border radius of submenus. | `var(--graupl-border-bottom-right-radius)` |
62
+ // | `--graupl-submenu-border-bottom-left-radius` | Bottom-left border radius of submenus. | `var(--graupl-border-bottom-left-radius)` |
63
+ // | `--graupl-submenu-border-radius` | Border radius shorthand for submenus. | `var(--graupl-submenu-border-top-left-radius) var(--graupl-submenu-border-top-right-radius) var(--graupl-submenu-border-bottom-right-radius) var(--graupl-submenu-border-bottom-left-radius)` |
64
+ // | `--graupl-submenu-border-top-width` | Top border width of submenus. | `var(--graupl-border-top-width)` |
65
+ // | `--graupl-submenu-border-right-width` | Right border width of submenus. | `var(--graupl-border-right-width)` |
66
+ // | `--graupl-submenu-border-bottom-width` | Bottom border width of submenus. | `var(--graupl-border-bottom-width)` |
67
+ // | `--graupl-submenu-border-left-width` | Left border width of submenus. | `var(--graupl-border-left-width)` |
68
+ // | `--graupl-submenu-border-width` | Border width shorthand for submenus. | `var(--graupl-submenu-border-top-width) var(--graupl-submenu-border-right-width) var(--graupl-submenu-border-bottom-width) var(--graupl-submenu-border-left-width)` |
69
+ // | `--graupl-submenu-border-top-style` | Top border style of submenus. | `var(--graupl-border-top-style)` |
70
+ // | `--graupl-submenu-border-right-style` | Right border style of submenus. | `var(--graupl-border-right-style)` |
71
+ // | `--graupl-submenu-border-bottom-style` | Bottom border style of submenus. | `var(--graupl-border-bottom-style)` |
72
+ // | `--graupl-submenu-border-left-style` | Left border style of submenus. | `var(--graupl-border-left-style)` |
73
+ // | `--graupl-submenu-border-style` | Border style shorthand for submenus. | `var(--graupl-submenu-border-top-style) var(--graupl-submenu-border-right-style) var(--graupl-submenu-border-bottom-style) var(--graupl-submenu-border-left-style)` |
74
+ // | `--graupl-submenu-position` | Positioning mode applied to submenus. | `absolute` |
75
+ // | `--graupl-submenu-top` | Top offset applied to submenus. | `100%` |
76
+ // | `--graupl-submenu-right` | Right offset applied to submenus. | `auto` |
77
+ // | `--graupl-submenu-bottom` | Bottom offset applied to submenus. | `auto` |
78
+ // | `--graupl-submenu-left` | Left offset applied to submenus. | `0` |
79
+ // | `--graupl-submenu-inset` | Inset shorthand applied to submenus. | `var(--graupl-submenu-top) var(--graupl-submenu-right) var(--graupl-submenu-bottom) var(--graupl-submenu-left)` |
80
+ // | `--graupl-menu-item-min-width` | Minimum width for menu items. | `min-content` |
81
+ // | `--graupl-menu-item-max-width` | Maximum width for menu items. | `100%` |
82
+ // | `--graupl-menu-item-padding-x` | Horizontal padding for menu items. | `var(--graupl-spacer-0)` |
83
+ // | `--graupl-menu-item-padding-y` | Vertical padding for menu items. | `var(--graupl-spacer-0)` |
84
+ // | `--graupl-menu-item-padding` | Shorthand padding for menu items. | `var(--graupl-menu-item-padding-y) var(--graupl-menu-item-padding-x)` |
85
+ // | `--graupl-submenu-item-width` | Width applied to submenu items. | `100%` |
86
+ // | `--graupl-menu-link-padding-x` | Horizontal padding for menu links. | `var(--graupl-spacer-5)` |
87
+ // | `--graupl-menu-link-padding-y` | Vertical padding for menu links. | `var(--graupl-spacer-3)` |
88
+ // | `--graupl-menu-link-padding` | Shorthand padding for menu links. | `var(--graupl-menu-link-padding-y) var(--graupl-menu-link-padding-x)` |
89
+ // | `--graupl-menu-link-transition` | Transition used for menu link interactions. | `background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |
90
+ // | `--graupl-menu-link-transition-reduced-motion` | Transition used when reduced motion is enabled. | `background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function)` |
91
+ // | `--graupl-menu-link-transform` | Base transform for menu links. | `none` |
92
+ // | `--graupl-menu-link-visited-transform` | Transform for visited menu links. | `var(--graupl-menu-link-transform)` |
93
+ // | `--graupl-menu-link-focus-transform` | Transform for focused menu links. | `var(--graupl-menu-link-transform)` |
94
+ // | `--graupl-menu-link-hover-transform` | Transform for hovered menu links. | `none` |
95
+ // | `--graupl-menu-link-active-transform` | Transform for active menu links. | `var(--graupl-menu-link-hover-transform)` |
96
+ // | `--graupl-menu-link-disabled-transform` | Transform for disabled menu links. | `none` |
97
+ // | `--graupl-menu-link-column-gap` | Column gap between menu link contents. | `var(--graupl-menu-link-padding-x)` |
98
+ // | `--graupl-menu-link-row-gap` | Row gap between menu link contents. | `var(--graupl-spacer-0)` |
99
+ // | `--graupl-menu-link-gap` | Shorthand gap between menu link contents. | `var(--graupl-menu-link-column-gap) var(--graupl-menu-link-row-gap)` |
100
+ // | `--graupl-menu-link-background` | Background colour of menu links. | `var(--graupl-menu-background)` |
101
+ // | `--graupl-menu-link-visited-background` | Background colour of visited menu links. | `var(--graupl-menu-link-background)` |
102
+ // | `--graupl-menu-link-focus-background` | Background colour of focused menu links. | `var(--graupl-menu-link-background)` |
103
+ // | `--graupl-menu-link-hover-background` | Background colour of hovered menu links. | `var(--graupl-menu-color)` |
104
+ // | `--graupl-menu-link-active-background` | Background colour of active menu links. | `var(--graupl-menu-link-hover-background)` |
105
+ // | `--graupl-menu-link-disabled-background` | Background colour of disabled menu links. | `var(--graupl-background)` |
106
+ // | `--graupl-menu-link-color` | Text colour of menu links. | `var(--graupl-menu-color)` |
107
+ // | `--graupl-menu-link-visited-color` | Text colour of visited menu links. | `var(--graupl-menu-link-color)` |
108
+ // | `--graupl-menu-link-focus-color` | Text colour of focused menu links. | `var(--graupl-menu-link-color)` |
109
+ // | `--graupl-menu-link-hover-color` | Text colour of hovered menu links. | `var(--graupl-menu-background)` |
110
+ // | `--graupl-menu-link-active-color` | Text colour of active menu links. | `var(--graupl-menu-link-hover-color)` |
111
+ // | `--graupl-menu-link-disabled-color` | Text colour of disabled menu links. | `var(--graupl-theme-active--primary--200)` |
112
+ // | `--graupl-menu-link-text-decoration` | Base text decoration for menu links. | `none` |
113
+ // | `--graupl-menu-link-visited-text-decoration` | Text decoration for visited menu links. | `var(--graupl-menu-link-text-decoration)` |
114
+ // | `--graupl-menu-link-focus-text-decoration` | Text decoration for focused menu links. | `var(--graupl-menu-link-text-decoration)` |
115
+ // | `--graupl-menu-link-hover-text-decoration` | Text decoration for hovered menu links. | `none` |
116
+ // | `--graupl-menu-link-active-text-decoration` | Text decoration for active menu links. | `var(--graupl-menu-link-hover-text-decoration)` |
117
+ // | `--graupl-menu-link-disabled-text-decoration` | Text decoration for disabled menu links. | `none` |
118
+ // | `--graupl-menu-link-text-decoration-thickness` | Base decoration thickness for menu links. | `var(--graupl-border-width)` |
119
+ // | `--graupl-menu-link-visited-text-decoration-thickness` | Decoration thickness for visited menu links. | `var(--graupl-menu-link-text-decoration-thickness)` |
120
+ // | `--graupl-menu-link-focus-text-decoration-thickness` | Decoration thickness for focused menu links. | `var(--graupl-menu-link-text-decoration-thickness)` |
121
+ // | `--graupl-menu-link-hover-text-decoration-thickness` | Decoration thickness for hovered menu links. | `var(--graupl-border-width)` |
122
+ // | `--graupl-menu-link-active-text-decoration-thickness` | Decoration thickness for active menu links. | `var(--graupl-menu-link-hover-text-decoration-thickness)` |
123
+ // | `--graupl-menu-link-disabled-text-decoration-thickness` | Decoration thickness for disabled menu links. | `var(--graupl-border-width)` |
124
+ // | `--graupl-menu-link-text-decoration-style` | Base decoration style for menu links. | `solid` |
125
+ // | `--graupl-menu-link-visited-text-decoration-style` | Decoration style for visited menu links. | `var(--graupl-menu-link-text-decoration-style)` |
126
+ // | `--graupl-menu-link-focus-text-decoration-style` | Decoration style for focused menu links. | `var(--graupl-menu-link-text-decoration-style)` |
127
+ // | `--graupl-menu-link-hover-text-decoration-style` | Decoration style for hovered menu links. | `solid` |
128
+ // | `--graupl-menu-link-active-text-decoration-style` | Decoration style for active menu links. | `var(--graupl-menu-link-hover-text-decoration-style)` |
129
+ // | `--graupl-menu-link-disabled-text-decoration-style` | Decoration style for disabled menu links. | `solid` |
130
+ // | `--graupl-menu-link-text-decoration-color` | Base decoration colour for menu links. | `var(--graupl-menu-link-color)` |
131
+ // | `--graupl-menu-link-visited-text-decoration-color` | Decoration colour for visited menu links. | `var(--graupl-menu-link-visited-color)` |
132
+ // | `--graupl-menu-link-focus-text-decoration-color` | Decoration colour for focused menu links. | `var(--graupl-menu-link-focus-color)` |
133
+ // | `--graupl-menu-link-hover-text-decoration-color` | Decoration colour for hovered menu links. | `var(--graupl-menu-link-hover-color)` |
134
+ // | `--graupl-menu-link-active-text-decoration-color` | Decoration colour for active menu links. | `var(--graupl-menu-link-active-color)` |
135
+ // | `--graupl-menu-link-disabled-text-decoration-color` | Decoration colour for disabled menu links. | `var(--graupl-menu-link-disabled-color)` |
136
+ // | `--graupl-menu-link-border-top-left-radius` | Top-left border radius of menu links. | `var(--graupl-border-top-left-radius)` |
137
+ // | `--graupl-menu-link-border-top-right-radius` | Top-right border radius of menu links. | `var(--graupl-border-top-right-radius)` |
138
+ // | `--graupl-menu-link-border-bottom-right-radius` | Bottom-right border radius of menu links. | `var(--graupl-border-bottom-right-radius)` |
139
+ // | `--graupl-menu-link-border-bottom-left-radius` | Bottom-left border radius of menu links. | `var(--graupl-border-bottom-left-radius)` |
140
+ // | `--graupl-menu-link-border-radius` | Border radius shorthand for menu links. | `var(--graupl-menu-link-border-top-left-radius) var(--graupl-menu-link-border-top-right-radius) var(--graupl-menu-link-border-bottom-right-radius) var(--graupl-menu-link-border-bottom-left-radius)` |
141
+ // | `--graupl-menu-link-border-top-width` | Top border width of menu links. | `0` |
142
+ // | `--graupl-menu-link-border-right-width` | Right border width of menu links. | `0` |
143
+ // | `--graupl-menu-link-border-bottom-width` | Bottom border width of menu links. | `0` |
144
+ // | `--graupl-menu-link-border-left-width` | Left border width of menu links. | `0` |
145
+ // | `--graupl-menu-link-border-width` | Border width shorthand for menu links. | `var(--graupl-menu-link-border-top-width) var(--graupl-menu-link-border-right-width) var(--graupl-menu-link-border-bottom-width) var(--graupl-menu-link-border-left-width)` |
146
+ // | `--graupl-menu-link-border-top-style` | Top border style of menu links. | `var(--graupl-border-top-style)` |
147
+ // | `--graupl-menu-link-border-right-style` | Right border style of menu links. | `var(--graupl-border-right-style)` |
148
+ // | `--graupl-menu-link-border-bottom-style` | Bottom border style of menu links. | `var(--graupl-border-bottom-style)` |
149
+ // | `--graupl-menu-link-border-left-style` | Left border style of menu links. | `var(--graupl-border-left-style)` |
150
+ // | `--graupl-menu-link-border-style` | Border style shorthand for menu links. | `var(--graupl-menu-link-border-top-style) var(--graupl-menu-link-border-right-style) var(--graupl-menu-link-border-bottom-style) var(--graupl-menu-link-border-left-style)` |
151
+ // | `--graupl-menu-link-border-color` | Border colour of menu links. | `var(--graupl-menu-link-color)` |
152
+ // | `--graupl-menu-link-visited-border-color` | Border colour of visited menu links. | `var(--graupl-menu-link-border-color)` |
153
+ // | `--graupl-menu-link-focus-border-color` | Border colour of focused menu links. | `var(--graupl-menu-link-border-color)` |
154
+ // | `--graupl-menu-link-hover-border-color` | Border colour of hovered menu links. | `var(--graupl-menu-link-hover-color)` |
155
+ // | `--graupl-menu-link-active-border-color` | Border colour of active menu links. | `var(--graupl-menu-link-hover-border-color)` |
156
+ // | `--graupl-menu-link-disabled-border-color` | Border colour of disabled menu links. | `var(--graupl-menu-link-disabled-color)` |
157
+ // | `--graupl-submenu-toggle-transform` | Base transform for submenu toggles. | `rotate(0deg)` |
158
+ // | `--graupl-submenu-toggle-open-transform` | Transform applied when a submenu is open. | `rotate(-180deg)` |
159
+ // | `--graupl-submenu-toggle-content` | Content string for submenu toggle pseudo-elements. | `'↓'` |
160
+ // | `--graupl-submenu-toggle-transition` | Transition applied to submenu toggles. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |
161
+ // | `--graupl-submenu-toggle-transition-reduced-motion` | Transition used when reduced motion is enabled. | `none` |
162
+ //
163
+ // The following sass variables can be used to customize the generation of the menu component:
164
+ // | Variable | Description | Default Value |
165
+ // | ------------------------------- | -------------------------------------------------------------------- | ------------------------- |
166
+ // | `$selector-base` | Selector base for the component. | `"."` |
167
+ // | `$modifier-selector-base` | Selector base for component modifiers. | `"."` |
168
+ // | `$generate-base-theme-map` | Flag to generate the base theme maps for menu variants. | `true` |
169
+ // | `$themeable` | Flag to generate theme modifiers. | `false` |
170
+ // | `$menu-selector-base` | Selector base for the menu. | `$selector-base` |
171
+ // | `$menu-selector` | Selector for the menu. | `"menu"` |
172
+ // | `$menu-theme-selector-base` | Selector base for menu theme modifiers. | `$modifier-selector-base` |
173
+ // | `$menu-theme-selector-prefix` | Selector prefix for menu theme modifiers. | `""` |
174
+ // | `$submenu-selector-base` | Selector base for the submenu. | `$selector-base` |
175
+ // | `$submenu-selector` | Selector for the submenu. | `"submenu"` |
176
+ // | `$menu-item-selector-base` | Selector base for a menu item. | `$selector-base` |
177
+ // | `$menu-item-selector` | Selector for a menu item. | `"menu-item"` |
178
+ // | `$menu-link-selector-base` | Selector base for the menu link. | `$selector-base` |
179
+ // | `$menu-link-selector` | Selector for the menu link. | `"menu-link"` |
180
+ // | `$submenu-toggle-selector-base` | Selector base for the submenu toggle. | `$selector-base` |
181
+ // | `$submenu-toggle-selector` | Selector for the submenu toggle. | `"submenu-toggle"` |
182
+ // | `$menu-show-selector-base` | Selector base for the show modifier. | `"."` |
183
+ // | `$menu-show-selector` | Selector for the show modifier. | `"show"` |
184
+ // | `$menu-hide-selector-base` | Selector base for the hide modifier. | `"."` |
185
+ // | `$menu-hide-selector` | Selector for the hide modifier. | `"hide"` |
186
+ // | `$menu-theme-mappings` | A map of properties and shade values applied to menu theme variants. | `()` |
187
+ // | `$menu-theme-map` | A fully expanded property map used to generate menu theme modifiers. | `()` |
188
+ //
189
+ // ## Using `$menu-theme-mappings`
190
+ //
191
+ // `$menu-theme-mappings` is a single-level map of properties and shade values.
192
+ //
193
+ // e.g.
194
+ // ```scss
195
+ // $menu-theme-mappings: (
196
+ // border-color: 700,
197
+ // );
198
+ // ```
199
+ //
200
+ // This directly[1] informs all menu theme variants what shade to use for each property key.
201
+ // Based on the example above:
202
+ // - Primary menus expose `--graupl-menu-border-color` as `var(--graupl-theme-active--primary--700)`,
203
+ // - Secondary menus expose `--graupl-menu-border-color` as `var(--graupl-theme-active--secondary--700)`, and
204
+ // - Tertiary menus expose `--graupl-menu-border-color` as `var(--graupl-theme-active--tertiary--700)`.
205
+ //
206
+ // You can pair multiple properties to customize all variants together.
207
+ //
208
+ // ```scss
209
+ // $menu-theme-mappings: (
210
+ // color: 900,
211
+ // link-hover-background: 600,
212
+ // );
213
+ // ```
214
+ //
215
+ // - Primary menus use `--graupl-theme-active--primary--900` for `--graupl-menu-color` and `--graupl-theme-active--primary--600` for `--graupl-menu-link-hover-background`.
216
+ // - Secondary menus use the same shades for `--graupl-menu-color` / `--graupl-menu-link-hover-background`, but sourced from the secondary palette.
217
+ // - Tertiary menus follow suit with the tertiary palette.
218
+ //
219
+ // [1] `$menu-theme-mappings` gets parsed into a larger, more explicit map: `$menu-theme-map`.
220
+ //
221
+ // ## Using `$menu-theme-map`
222
+ //
223
+ // `$menu-theme-map` is a multi-level map of properties, colours, and shade values, allowing you to target each variant explicitly.
224
+ //
225
+ // e.g.
226
+ // ```scss
227
+ // $menu-theme-map: (
228
+ // primary: (
229
+ // link-hover-background: (
230
+ // color: primary,
231
+ // shade: 500,
232
+ // ),
233
+ // ),
234
+ // secondary: (
235
+ // border-color: (
236
+ // color: secondary,
237
+ // shade: 600,
238
+ // ),
239
+ // ),
240
+ // );
241
+ // ```
242
+ //
243
+ // This example keeps default behaviour for unspecified variants/properties, while overriding the hover background for primary menus and the border colour for secondary menus.
244
+ //
245
+ // @example
246
+ // <ul class="menu">
247
+ // <li class="menu-item"><a class="menu-link" href="#">Home</a></li>
248
+ // <li class="menu-item submenu-item">
249
+ // <button class="menu-link button link submenu-toggle" type="button">About</button>
250
+ // <ul class="submenu">
251
+ // <li class="menu-item"><a class="menu-link" href="#">About Us</a></li>
252
+ // <li class="menu-item"><a class="menu-link" href="#">Our Team</a></li>
253
+ // <li class="menu-item"><a class="menu-link" href="#">Our Mission</a></li>
254
+ // </ul>
255
+ // </li>
256
+ // <li class="menu-item"><a class="menu-link" href="#">Blog</a></li>
257
+ // <li class="menu-item"><a class="menu-link button tertiary" href="#">Contact</a></li>
258
+ // </ul>
2
259
 
3
- @use "defaults";
4
- @use "variables" as *;
5
- @use "../../defaults" as root-defaults;
6
260
  @use "../../base/button/defaults" as button-defaults;
7
261
  @use "../../base/button/variables" as button-variables;
8
- @use "../../mixins/layer" as *;
262
+ @use "../../defaults" as root-defaults;
9
263
  @use "../../mixins/animation";
264
+ @use "../../mixins/layer" as *;
265
+ @use "../../mixins/state";
266
+ @use "../../mixins/theme";
267
+ @use "defaults";
268
+ @use "variables" as *;
10
269
 
11
270
  @include layer(component) {
12
- #{defaults.$menu-selector} {
271
+ // .menu
272
+ #{defaults.$menu-selector-base}#{defaults.$menu-selector} {
13
273
  --#{root-defaults.$prefix}link-padding: #{$menu-link-padding};
14
274
  --#{root-defaults.$prefix}link-border-width: #{$menu-link-border-width};
15
275
  --#{root-defaults.$prefix}link-border-radius: #{$menu-link-border-radius};
@@ -49,16 +309,19 @@
49
309
  gap: $menu-gap;
50
310
  isolation: isolate;
51
311
 
52
- &#{defaults.$menu-show-selector} {
312
+ // &.show
313
+ &#{defaults.$menu-show-selector-base}#{defaults.$menu-show-selector} {
53
314
  --#{root-defaults.$prefix}menu-display: #{$menu-show-display};
54
315
  }
55
316
 
56
- &#{defaults.$menu-hide-selector} {
317
+ // &.hide
318
+ &#{defaults.$menu-hide-selector-base}#{defaults.$menu-hide-selector} {
57
319
  --#{root-defaults.$prefix}menu-display: #{$menu-hide-display};
58
320
  }
59
321
  }
60
322
 
61
- #{defaults.$submenu-selector} {
323
+ // .submenu
324
+ #{defaults.$submenu-selector-base}#{defaults.$submenu-selector} {
62
325
  display: $submenu-display;
63
326
  position: $submenu-position;
64
327
  z-index: $submenu-z-index;
@@ -73,16 +336,19 @@
73
336
  isolation: isolate;
74
337
  inset: $submenu-inset;
75
338
 
76
- &#{defaults.$menu-show-selector} {
339
+ // &.show
340
+ &#{defaults.$menu-show-selector-base}#{defaults.$menu-show-selector} {
77
341
  --#{root-defaults.$prefix}submenu-display: #{$submenu-show-display};
78
342
  }
79
343
 
80
- &#{defaults.$menu-hide-selector} {
344
+ // &.hide
345
+ &#{defaults.$menu-hide-selector-base}#{defaults.$menu-hide-selector} {
81
346
  --#{root-defaults.$prefix}submenu-display: #{$submenu-hide-display};
82
347
  }
83
348
  }
84
349
 
85
- #{defaults.$menu-item-selector} {
350
+ // .menu-item
351
+ #{defaults.$menu-item-selector-base}#{defaults.$menu-item-selector} {
86
352
  display: flex;
87
353
  position: relative;
88
354
  flex-wrap: wrap;
@@ -93,7 +359,8 @@
93
359
  padding: $menu-item-padding;
94
360
  }
95
361
 
96
- #{defaults.$menu-link-selector} {
362
+ // .menu-link
363
+ #{defaults.$menu-link-selector-base}#{defaults.$menu-link-selector} {
97
364
  display: flex;
98
365
  width: 100%;
99
366
  padding: $menu-link-padding;
@@ -107,48 +374,16 @@
107
374
  gap: $menu-link-gap;
108
375
  text-decoration-thickness: $menu-link-text-decoration-thickness;
109
376
 
110
- &:visited {
111
- --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-visited-text-decoration};
112
- --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
113
- --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-visited-text-decoration-style};
114
- --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-visited-transform};
115
- }
116
-
117
- &:focus-visible {
118
- --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-focus-text-decoration};
119
- --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
120
- --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-focus-text-decoration-style};
121
- --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-focus-transform};
122
- }
123
-
124
- &:hover {
125
- --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-hover-text-decoration};
126
- --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
127
- --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-hover-text-decoration-style};
128
- --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-hover-transform};
129
- }
130
-
131
- &:active {
132
- --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-active-text-decoration};
133
- --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
134
- --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-active-text-decoration-style};
135
- --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-active-transform};
136
- }
137
-
138
- &:disabled,
139
- &[disabled] {
140
- &,
141
- &:visited,
142
- &:focus-visible,
143
- &:hover,
144
- &:active {
145
- --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-disabled-text-decoration};
146
- --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
147
- --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
148
- --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-disabled-transform};
149
- }
150
- }
377
+ @include state.generate-modifiers(
378
+ (
379
+ text-decoration: $menu-link-text-decoration-states,
380
+ text-decoration-thickness: $menu-link-text-decoration-thickness-states,
381
+ text-decoration-style: $menu-link-text-decoration-style-states,
382
+ transform: $menu-link-transform-states,
383
+ )
384
+ );
151
385
 
386
+ // &.button
152
387
  &#{button-defaults.$button-selector-base}#{button-defaults.$button-selector} {
153
388
  --#{root-defaults.$prefix}menu-link-padding: #{button-variables.$button-padding};
154
389
  --#{root-defaults.$prefix}menu-link-border-width: #{button-variables.$button-border-width};
@@ -171,7 +406,8 @@
171
406
  }
172
407
  }
173
408
 
174
- #{defaults.$submenu-toggle-selector} {
409
+ // .submenu-toggle
410
+ #{defaults.$submenu-toggle-selector-base}#{defaults.$submenu-toggle-selector} {
175
411
  display: flex;
176
412
  align-items: center;
177
413
  justify-content: space-between;
@@ -189,18 +425,21 @@
189
425
  }
190
426
 
191
427
  @include animation.off {
192
- #{defaults.$menu-link-selector} {
428
+ // .menu-link
429
+ #{defaults.$menu-link-selector-base}#{defaults.$menu-link-selector} {
193
430
  --#{root-defaults.$prefix}menu-link-transition: #{$menu-link-transition-reduced-motion};
194
431
  }
195
432
 
196
- #{defaults.$submenu-toggle-selector}::after {
433
+ // .submenu-toggle
434
+ #{defaults.$submenu-toggle-selector-base}#{defaults.$submenu-toggle-selector}::after {
197
435
  --#{root-defaults.$prefix}submenu-toggle-transition: #{$submenu-toggle-transition-reduced-motion};
198
436
  }
199
437
  }
200
438
  }
201
439
 
202
440
  @include layer(theme) {
203
- #{defaults.$menu-selector} {
441
+ // .menu
442
+ #{defaults.$menu-selector-base}#{defaults.$menu-selector} {
204
443
  --#{root-defaults.$prefix}link-color: #{$menu-link-color};
205
444
  --#{root-defaults.$prefix}link-background: #{$menu-link-background};
206
445
  --#{root-defaults.$prefix}link-border-color: #{$menu-link-border-color};
@@ -229,61 +468,48 @@
229
468
  border-color: $menu-border-color;
230
469
  background: $menu-background;
231
470
  color: $menu-color;
471
+
472
+ @if root-defaults.$themeable-components and defaults.$themeable {
473
+ @include theme.generate-modifiers(
474
+ defaults.$menu-theme-map,
475
+ defaults.$menu-theme-selector-base,
476
+ defaults.$menu-theme-selector-prefix,
477
+ "menu-"
478
+ );
479
+ @include theme.generate-modifiers(
480
+ defaults.$menu-theme-map,
481
+ defaults.$menu-theme-selector-base,
482
+ defaults.$menu-theme-selector-prefix,
483
+ "menu-",
484
+ ""
485
+ );
486
+ }
232
487
  }
233
488
 
234
- #{defaults.$submenu-selector} {
489
+ // .submenu
490
+ #{defaults.$submenu-selector-base}#{defaults.$submenu-selector} {
235
491
  border-color: $submenu-border-color;
236
492
  background: $submenu-background;
237
493
  color: $submenu-color;
238
494
  }
239
495
 
240
- #{defaults.$menu-link-selector} {
496
+ // .menu-link
497
+ #{defaults.$menu-link-selector-base}#{defaults.$menu-link-selector} {
241
498
  border-color: $menu-link-border-color;
242
499
  background: $menu-link-background;
243
500
  color: $menu-link-color;
244
501
  text-decoration-color: $menu-link-text-decoration-color;
245
502
 
246
- &:visited {
247
- --#{root-defaults.$prefix}menu-link-background: #{$menu-link-visited-background};
248
- --#{root-defaults.$prefix}menu-link-color: #{$menu-link-visited-color};
249
- --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-visited-text-decoration-color};
250
- --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-visited-border-color};
251
- }
252
-
253
- &:focus-visible {
254
- --#{root-defaults.$prefix}menu-link-background: #{$menu-link-focus-background};
255
- --#{root-defaults.$prefix}menu-link-color: #{$menu-link-focus-color};
256
- --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-focus-text-decoration-color};
257
- --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-focus-border-color};
258
- }
259
-
260
- &:hover {
261
- --#{root-defaults.$prefix}menu-link-background: #{$menu-link-hover-background};
262
- --#{root-defaults.$prefix}menu-link-color: #{$menu-link-hover-color};
263
- --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-hover-text-decoration-color};
264
- --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-hover-border-color};
265
- }
266
-
267
- &:active {
268
- --#{root-defaults.$prefix}menu-link-background: #{$menu-link-active-background};
269
- --#{root-defaults.$prefix}menu-link-color: #{$menu-link-active-color};
270
- --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-active-text-decoration-color};
271
- --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-active-border-color};
272
- }
273
-
274
- &:disabled {
275
- &,
276
- &:hover,
277
- &:active,
278
- &:focus-visible,
279
- &:visited {
280
- --#{root-defaults.$prefix}menu-link-background: #{$menu-link-disabled-background};
281
- --#{root-defaults.$prefix}menu-link-color: #{$menu-link-disabled-color};
282
- --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
283
- --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-disabled-border-color};
284
- }
285
- }
503
+ @include state.generate-modifiers(
504
+ (
505
+ border-color: $menu-link-border-color-states,
506
+ background: $menu-link-background-states,
507
+ color: $menu-link-color-states,
508
+ text-decoration-color: $menu-link-text-decoration-color-states,
509
+ )
510
+ );
286
511
 
512
+ // .button
287
513
  &#{button-defaults.$button-selector-base}#{button-defaults.$button-selector} {
288
514
  --#{root-defaults.$prefix}menu-link-background: #{button-variables.$button-background};
289
515
  --#{root-defaults.$prefix}menu-link-color: #{button-variables.$button-color};