@graupl/graupl 1.0.0-alpha.9 → 1.0.0-beta.0

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 (346) hide show
  1. package/.github/workflows/codeql-analysis.yml +3 -3
  2. package/.husky/commit-msg +0 -1
  3. package/.husky/pre-commit +0 -1
  4. package/CHANGELOG.md +153 -0
  5. package/build.js +7 -0
  6. package/dist/css/base/button.css +2 -0
  7. package/dist/css/base/button.css.map +1 -0
  8. package/dist/css/base/form.css +2 -0
  9. package/dist/css/base/form.css.map +1 -0
  10. package/dist/css/base/link.css +2 -0
  11. package/dist/css/base/link.css.map +1 -0
  12. package/dist/css/base/table.css +2 -0
  13. package/dist/css/base/table.css.map +1 -0
  14. package/dist/css/base.css +2 -0
  15. package/dist/css/base.css.map +1 -0
  16. package/dist/css/component/accordion.css +2 -0
  17. package/dist/css/component/accordion.css.map +1 -0
  18. package/dist/css/component/alert.css +2 -0
  19. package/dist/css/component/alert.css.map +1 -0
  20. package/dist/css/component/card.css +2 -0
  21. package/dist/css/component/card.css.map +1 -0
  22. package/dist/css/component/carousel.css +2 -0
  23. package/dist/css/component/carousel.css.map +1 -0
  24. package/dist/{component → css/component}/input-group.css +1 -1
  25. package/dist/css/component/input-group.css.map +1 -0
  26. package/dist/css/component/menu.css +2 -0
  27. package/dist/css/component/menu.css.map +1 -0
  28. package/dist/css/component/navigation.css +2 -0
  29. package/dist/css/component/navigation.css.map +1 -0
  30. package/dist/css/component.css +2 -0
  31. package/dist/css/component.css.map +1 -0
  32. package/dist/css/graupl.css +2 -0
  33. package/dist/css/graupl.css.map +1 -0
  34. package/dist/css/init.css +2 -0
  35. package/dist/css/init.css.map +1 -0
  36. package/dist/css/layout/columns.css +2 -0
  37. package/dist/css/layout/columns.css.map +1 -0
  38. package/dist/css/layout/container.css.map +1 -0
  39. package/dist/css/layout/flex-columns.css +2 -0
  40. package/dist/css/layout/flex-columns.css.map +1 -0
  41. package/dist/css/layout.css +2 -0
  42. package/dist/css/layout.css.map +1 -0
  43. package/dist/css/normalize.css +2 -0
  44. package/dist/css/normalize.css.map +1 -0
  45. package/dist/css/state/focus.css +2 -0
  46. package/dist/css/state/focus.css.map +1 -0
  47. package/dist/css/state.css +2 -0
  48. package/dist/css/state.css.map +1 -0
  49. package/dist/css/theme/color.css +2 -0
  50. package/dist/css/theme/color.css.map +1 -0
  51. package/dist/css/theme/typography.css +2 -0
  52. package/dist/css/theme/typography.css.map +1 -0
  53. package/dist/css/theme.css +2 -0
  54. package/dist/css/theme.css.map +1 -0
  55. package/dist/css/utilities/alignment.css +2 -0
  56. package/dist/css/utilities/alignment.css.map +1 -0
  57. package/dist/{utilities/colors.css → css/utilities/color.css} +2 -2
  58. package/dist/css/utilities/color.css.map +1 -0
  59. package/dist/css/utilities/display.css +2 -0
  60. package/dist/css/utilities/display.css.map +1 -0
  61. package/dist/css/utilities/flex.css +2 -0
  62. package/dist/css/utilities/flex.css.map +1 -0
  63. package/dist/css/utilities/height.css +2 -0
  64. package/dist/css/utilities/height.css.map +1 -0
  65. package/dist/css/utilities/inset.css +2 -0
  66. package/dist/css/utilities/inset.css.map +1 -0
  67. package/dist/css/utilities/justification.css +2 -0
  68. package/dist/css/utilities/justification.css.map +1 -0
  69. package/dist/css/utilities/list.css +2 -0
  70. package/dist/css/utilities/list.css.map +1 -0
  71. package/dist/css/utilities/order.css +2 -0
  72. package/dist/css/utilities/order.css.map +1 -0
  73. package/dist/css/utilities/postion.css +2 -0
  74. package/dist/css/utilities/postion.css.map +1 -0
  75. package/dist/css/utilities/ratio.css +2 -0
  76. package/dist/css/utilities/ratio.css.map +1 -0
  77. package/dist/css/utilities/spacing.css +2 -0
  78. package/dist/css/utilities/spacing.css.map +1 -0
  79. package/dist/css/utilities/typography.css +2 -0
  80. package/dist/css/utilities/typography.css.map +1 -0
  81. package/dist/css/utilities/visibility.css +2 -0
  82. package/dist/css/utilities/visibility.css.map +1 -0
  83. package/dist/css/utilities/width.css +2 -0
  84. package/dist/css/utilities/width.css.map +1 -0
  85. package/dist/css/utilities.css +2 -0
  86. package/dist/css/utilities.css.map +1 -0
  87. package/dist/js/component/accordion.cjs.js +3 -0
  88. package/dist/js/component/accordion.esm.js +1289 -0
  89. package/dist/js/component/accordion.iife.js +3 -0
  90. package/dist/js/component/alert.cjs.js +3 -0
  91. package/dist/js/component/alert.esm.js +529 -0
  92. package/dist/js/component/alert.iife.js +3 -0
  93. package/dist/js/component/carousel.cjs.js +3 -0
  94. package/dist/js/component/carousel.esm.js +1110 -0
  95. package/dist/js/component/carousel.iife.js +3 -0
  96. package/dist/js/graupl.cjs.js +5 -0
  97. package/dist/js/graupl.esm.js +1462 -0
  98. package/dist/js/graupl.iife.js +5 -0
  99. package/docs/.vitepress/config.js +39 -12
  100. package/docs/components/alert.md +130 -0
  101. package/docs/components/button.md +84 -0
  102. package/docs/components/card.md +369 -0
  103. package/docs/components/index.md +1 -0
  104. package/docs/components/inputgroup.md +159 -0
  105. package/docs/components/menu.md +326 -0
  106. package/docs/components/navigation.md +158 -0
  107. package/docs/content.md +237 -0
  108. package/docs/defaults.md +121 -0
  109. package/docs/forms.md +79 -0
  110. package/docs/functions.md +9 -0
  111. package/docs/getting-started.md +1 -0
  112. package/docs/index.md +1 -7
  113. package/docs/introduction.md +22 -2
  114. package/docs/layout.md +200 -0
  115. package/docs/mixins.md +47 -0
  116. package/docs/state.md +67 -0
  117. package/docs/theme.md +258 -0
  118. package/docs/utilities.md +357 -0
  119. package/eslint.config.js +1 -0
  120. package/index.html +816 -327
  121. package/index.js +12 -0
  122. package/package.json +31 -10
  123. package/scss/base/button.scss +3 -0
  124. package/scss/base/form.scss +1 -1
  125. package/scss/base/link.scss +1 -1
  126. package/scss/base/table.scss +1 -1
  127. package/scss/base.scss +1 -1
  128. package/scss/component/accordion.scss +3 -0
  129. package/scss/component/alert.scss +3 -0
  130. package/scss/component/card.scss +3 -0
  131. package/scss/component/carousel.scss +3 -0
  132. package/scss/component/input-group.scss +1 -1
  133. package/scss/component/menu.scss +3 -0
  134. package/scss/component/navigation.scss +3 -0
  135. package/scss/component.scss +1 -1
  136. package/scss/graupl.scss +1 -3
  137. package/scss/init.scss +3 -0
  138. package/scss/layout/columns.scss +1 -1
  139. package/scss/layout/container.scss +1 -1
  140. package/scss/layout/flex-columns.scss +3 -0
  141. package/scss/layout.scss +1 -1
  142. package/scss/normalize.scss +3 -0
  143. package/scss/state/focus.scss +1 -1
  144. package/scss/state.scss +1 -1
  145. package/scss/theme/color.scss +1 -1
  146. package/scss/theme/typography.scss +1 -1
  147. package/scss/theme.scss +1 -1
  148. package/scss/utilities/alignment.scss +3 -0
  149. package/scss/utilities/color.scss +3 -0
  150. package/scss/utilities/display.scss +3 -0
  151. package/scss/utilities/flex.scss +3 -0
  152. package/scss/utilities/height.scss +3 -0
  153. package/scss/utilities/inset.scss +3 -0
  154. package/scss/utilities/justification.scss +3 -0
  155. package/scss/utilities/list.scss +3 -0
  156. package/scss/utilities/order.scss +3 -0
  157. package/scss/utilities/postion.scss +3 -0
  158. package/scss/utilities/ratio.scss +3 -0
  159. package/scss/utilities/spacing.scss +1 -1
  160. package/scss/utilities/typography.scss +1 -1
  161. package/scss/utilities/visibility.scss +3 -0
  162. package/scss/utilities/width.scss +3 -0
  163. package/scss/utilities.scss +1 -1
  164. package/src/js/accordion/Accordion.js +1163 -0
  165. package/src/js/accordion/AccordionItem.js +496 -0
  166. package/src/js/accordion/index.js +10 -0
  167. package/src/js/alert/Alert.js +581 -0
  168. package/src/js/alert/index.js +11 -0
  169. package/src/js/carousel/Carousel.js +1427 -0
  170. package/src/js/carousel/index.js +10 -0
  171. package/src/js/domHelpers.js +37 -0
  172. package/src/js/eventHandlers.js +39 -0
  173. package/src/js/navigation/index.js +36 -0
  174. package/src/js/storage.js +106 -0
  175. package/src/js/validate.js +225 -0
  176. package/src/scss/_defaults.scss +74 -5
  177. package/src/scss/_index.scss +4 -3
  178. package/src/scss/_init.scss +2 -2
  179. package/src/scss/_normalize.scss +197 -0
  180. package/src/scss/_variables.scss +7 -7
  181. package/src/scss/base/_index.scss +2 -1
  182. package/src/scss/base/button/_defaults.scss +60 -0
  183. package/src/scss/base/button/_index.scss +107 -0
  184. package/src/scss/base/button/_mixins.scss +166 -0
  185. package/src/scss/{component → base}/button/_variables.scss +64 -19
  186. package/src/scss/base/form/_defaults.scss +14 -4
  187. package/src/scss/base/form/_index.scss +23 -20
  188. package/src/scss/base/form/_variables.scss +14 -2
  189. package/src/scss/base/link/_defaults.scss +48 -5
  190. package/src/scss/base/link/_index.scss +111 -10
  191. package/src/scss/base/link/_variables.scss +234 -4
  192. package/src/scss/base/table/_defaults.scss +49 -4
  193. package/src/scss/base/table/_index.scss +102 -8
  194. package/src/scss/base/table/_variables.scss +75 -5
  195. package/src/scss/component/_index.scss +7 -3
  196. package/src/scss/component/accordion/_defaults.scss +40 -0
  197. package/src/scss/component/accordion/_index.scss +180 -0
  198. package/src/scss/component/accordion/_variables.scss +316 -0
  199. package/src/scss/component/alert/_defaults.scss +49 -0
  200. package/src/scss/component/alert/_index.scss +118 -0
  201. package/src/scss/component/alert/_variables.scss +173 -0
  202. package/src/scss/component/card/_defaults.scss +32 -0
  203. package/src/scss/component/card/_index.scss +178 -0
  204. package/src/scss/component/card/_variables.scss +186 -0
  205. package/src/scss/component/carousel/_defaults.scss +43 -0
  206. package/src/scss/component/carousel/_index.scss +188 -0
  207. package/src/scss/component/carousel/_variables.scss +104 -0
  208. package/src/scss/component/input-group/_defaults.scss +11 -4
  209. package/src/scss/component/input-group/_index.scss +13 -11
  210. package/src/scss/component/input-group/_variables.scss +4 -1
  211. package/src/scss/component/menu/_defaults.scss +66 -0
  212. package/src/scss/component/menu/_index.scss +305 -0
  213. package/src/scss/component/menu/_variables.scss +500 -0
  214. package/src/scss/component/navigation/_defaults.scss +29 -0
  215. package/src/scss/component/navigation/_index.scss +189 -0
  216. package/src/scss/component/navigation/_variables.scss +237 -0
  217. package/src/scss/functions/_important.scss +2 -0
  218. package/src/scss/functions/_screen.scss +30 -0
  219. package/src/scss/functions/_theme.scss +28 -7
  220. package/src/scss/layout/_index.scss +2 -1
  221. package/src/scss/layout/columns/_defaults.scss +12 -4
  222. package/src/scss/layout/columns/_index.scss +29 -7
  223. package/src/scss/layout/columns/_variables.scss +6 -2
  224. package/src/scss/layout/container/_defaults.scss +13 -4
  225. package/src/scss/layout/container/_index.scss +12 -7
  226. package/src/scss/layout/container/_variables.scss +4 -1
  227. package/src/scss/layout/flex-columns/_defaults.scss +18 -0
  228. package/src/scss/layout/flex-columns/_index.scss +80 -0
  229. package/src/scss/layout/flex-columns/_variables.scss +26 -0
  230. package/src/scss/mixins/_animation.scss +15 -0
  231. package/src/scss/mixins/_layer.scss +3 -5
  232. package/src/scss/mixins/_screen.scss +56 -0
  233. package/src/scss/mixins/_utility.scss +30 -0
  234. package/src/scss/mixins/_visually-hidden.scss +20 -0
  235. package/src/scss/state/_index.scss +1 -1
  236. package/src/scss/state/focus/_defaults.scss +6 -4
  237. package/src/scss/state/focus/_index.scss +7 -7
  238. package/src/scss/state/focus/_mixins.scss +15 -0
  239. package/src/scss/state/focus/_variables.scss +6 -2
  240. package/src/scss/theme/_index.scss +1 -1
  241. package/src/scss/theme/color/_defaults.scss +101 -19
  242. package/src/scss/theme/color/_index.scss +17 -17
  243. package/src/scss/theme/color/_variables.scss +72 -64
  244. package/src/scss/theme/typography/_defaults.scss +7 -5
  245. package/src/scss/theme/typography/_index.scss +1 -1
  246. package/src/scss/theme/typography/_variables.scss +11 -7
  247. package/src/scss/utilities/_index.scss +14 -2
  248. package/src/scss/utilities/alignment/_defaults.scss +62 -0
  249. package/src/scss/utilities/alignment/_index.scss +75 -0
  250. package/src/scss/utilities/alignment/_variables.scss +6 -0
  251. package/src/scss/utilities/color/_defaults.scss +35 -0
  252. package/src/scss/utilities/color/_index.scss +91 -0
  253. package/src/scss/utilities/color/_variables.scss +6 -0
  254. package/src/scss/utilities/display/_defaults.scss +32 -0
  255. package/src/scss/utilities/display/_index.scss +61 -0
  256. package/src/scss/utilities/display/_variables.scss +6 -0
  257. package/src/scss/utilities/flex/_defaults.scss +63 -0
  258. package/src/scss/utilities/flex/_index.scss +71 -0
  259. package/src/scss/utilities/flex/_variables.scss +6 -0
  260. package/src/scss/utilities/height/_defaults.scss +41 -0
  261. package/src/scss/utilities/height/_index.scss +98 -0
  262. package/src/scss/utilities/height/_variables.scss +6 -0
  263. package/src/scss/utilities/inset/_defaults.scss +41 -0
  264. package/src/scss/utilities/inset/_index.scss +37 -0
  265. package/src/scss/utilities/inset/_variables.scss +6 -0
  266. package/src/scss/utilities/justification/_defaults.scss +59 -0
  267. package/src/scss/utilities/justification/_index.scss +75 -0
  268. package/src/scss/utilities/justification/_variables.scss +6 -0
  269. package/src/scss/utilities/list/_defaults.scss +39 -0
  270. package/src/scss/utilities/list/_index.scss +56 -0
  271. package/src/scss/utilities/list/_variables.scss +6 -0
  272. package/src/scss/utilities/order/_defaults.scss +22 -0
  273. package/src/scss/utilities/order/_index.scss +63 -0
  274. package/src/scss/utilities/order/_variables.scss +6 -0
  275. package/src/scss/utilities/position/_defaults.scss +26 -0
  276. package/src/scss/utilities/position/_index.scss +37 -0
  277. package/src/scss/utilities/position/_variables.scss +6 -0
  278. package/src/scss/utilities/ratio/_defaults.scss +28 -0
  279. package/src/scss/utilities/ratio/_index.scss +52 -0
  280. package/src/scss/utilities/ratio/_variables.scss +9 -0
  281. package/src/scss/utilities/spacing/_defaults.scss +9 -4
  282. package/src/scss/utilities/spacing/_index.scss +134 -29
  283. package/src/scss/utilities/spacing/_variables.scss +5 -2
  284. package/src/scss/utilities/typography/_defaults.scss +29 -4
  285. package/src/scss/utilities/typography/_index.scss +155 -23
  286. package/src/scss/utilities/typography/_variables.scss +5 -2
  287. package/src/scss/utilities/visibility/_defaults.scss +25 -0
  288. package/src/scss/utilities/visibility/_index.scss +36 -0
  289. package/src/scss/utilities/visibility/_variables.scss +6 -0
  290. package/src/scss/utilities/width/_defaults.scss +41 -0
  291. package/src/scss/utilities/width/_index.scss +98 -0
  292. package/src/scss/utilities/width/_variables.scss +6 -0
  293. package/stylelint.config.js +5 -0
  294. package/vite.config.js +57 -0
  295. package/dist/base/form.css +0 -2
  296. package/dist/base/form.css.map +0 -1
  297. package/dist/base/link.css +0 -2
  298. package/dist/base/link.css.map +0 -1
  299. package/dist/base/table.css +0 -2
  300. package/dist/base/table.css.map +0 -1
  301. package/dist/base.css +0 -2
  302. package/dist/base.css.map +0 -1
  303. package/dist/component/button.css +0 -2
  304. package/dist/component/button.css.map +0 -1
  305. package/dist/component/input-group.css.map +0 -1
  306. package/dist/component/table.css +0 -2
  307. package/dist/component/table.css.map +0 -1
  308. package/dist/component.css +0 -2
  309. package/dist/component.css.map +0 -1
  310. package/dist/graupl.css +0 -2
  311. package/dist/graupl.css.map +0 -1
  312. package/dist/layout/columns.css +0 -2
  313. package/dist/layout/columns.css.map +0 -1
  314. package/dist/layout/container.css.map +0 -1
  315. package/dist/layout.css +0 -2
  316. package/dist/layout.css.map +0 -1
  317. package/dist/state/focus.css +0 -2
  318. package/dist/state/focus.css.map +0 -1
  319. package/dist/state.css +0 -2
  320. package/dist/state.css.map +0 -1
  321. package/dist/theme/color.css +0 -2
  322. package/dist/theme/color.css.map +0 -1
  323. package/dist/theme/typography.css +0 -2
  324. package/dist/theme/typography.css.map +0 -1
  325. package/dist/theme.css +0 -2
  326. package/dist/theme.css.map +0 -1
  327. package/dist/utilities/colors.css.map +0 -1
  328. package/dist/utilities/spacing.css +0 -2
  329. package/dist/utilities/spacing.css.map +0 -1
  330. package/dist/utilities/typography.css +0 -2
  331. package/dist/utilities/typography.css.map +0 -1
  332. package/dist/utilities.css +0 -2
  333. package/dist/utilities.css.map +0 -1
  334. package/scss/component/button.scss +0 -3
  335. package/scss/component/table.scss +0 -3
  336. package/scss/utilities/colors.scss +0 -3
  337. package/src/scss/component/button/_defaults.scss +0 -39
  338. package/src/scss/component/button/_index.scss +0 -98
  339. package/src/scss/component/table/_defaults.scss +0 -30
  340. package/src/scss/component/table/_index.scss +0 -77
  341. package/src/scss/component/table/_variables.scss +0 -64
  342. package/src/scss/mixins/_media-queries.scss +0 -26
  343. package/src/scss/utilities/colors/_defaults.scss +0 -5
  344. package/src/scss/utilities/colors/_index.scss +0 -22
  345. package/src/scss/utilities/colors/_variables.scss +0 -3
  346. /package/dist/{layout → css/layout}/container.css +0 -0
package/src/scss/component/menu/_index.scss ADDED
@@ -0,0 +1,305 @@
1
+ // @graupl/graupl menu component styles.
2
+
3
+ @use "defaults";
4
+ @use "variables" as *;
5
+ @use "../../defaults" as root-defaults;
6
+ @use "../../base/button/defaults" as button-defaults;
7
+ @use "../../base/button/variables" as button-variables;
8
+ @use "../../mixins/layer" as *;
9
+ @use "../../mixins/animation";
10
+
11
+ @include layer(component) {
12
+ #{defaults.$menu-selector} {
13
+ --#{root-defaults.$prefix}-link-padding: #{$menu-link-padding};
14
+ --#{root-defaults.$prefix}-link-border-width: #{$menu-link-border-width};
15
+ --#{root-defaults.$prefix}-link-border-radius: #{$menu-link-border-radius};
16
+ --#{root-defaults.$prefix}-link-border-style: #{$menu-link-border-style};
17
+ --#{root-defaults.$prefix}-link-text-decoration: #{$menu-link-text-decoration};
18
+ --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$menu-link-text-decoration-thickness};
19
+ --#{root-defaults.$prefix}-link-text-decoration-style: #{$menu-link-text-decoration-style};
20
+ --#{root-defaults.$prefix}-link-transform: #{$menu-link-transform};
21
+ --#{root-defaults.$prefix}-link-visited-text-decoration: #{$menu-link-visited-text-decoration};
22
+ --#{root-defaults.$prefix}-link-visited-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
23
+ --#{root-defaults.$prefix}-link-visited-text-decoration-style: #{$menu-link-visited-text-decoration-style};
24
+ --#{root-defaults.$prefix}-link-visited-transform: #{$menu-link-visited-transform};
25
+ --#{root-defaults.$prefix}-link-focus-text-decoration: #{$menu-link-focus-text-decoration};
26
+ --#{root-defaults.$prefix}-link-focus-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
27
+ --#{root-defaults.$prefix}-link-focus-text-decoration-style: #{$menu-link-focus-text-decoration-style};
28
+ --#{root-defaults.$prefix}-link-focus-transform: #{$menu-link-focus-transform};
29
+ --#{root-defaults.$prefix}-link-hover-text-decoration: #{$menu-link-hover-text-decoration};
30
+ --#{root-defaults.$prefix}-link-hover-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
31
+ --#{root-defaults.$prefix}-link-hover-text-decoration-style: #{$menu-link-hover-text-decoration-style};
32
+ --#{root-defaults.$prefix}-link-hover-transform: #{$menu-link-hover-transform};
33
+ --#{root-defaults.$prefix}-link-active-text-decoration: #{$menu-link-active-text-decoration};
34
+ --#{root-defaults.$prefix}-link-active-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
35
+ --#{root-defaults.$prefix}-link-active-text-decoration-style: #{$menu-link-active-text-decoration-style};
36
+ --#{root-defaults.$prefix}-link-active-transform: #{$menu-link-active-transform};
37
+ --#{root-defaults.$prefix}-link-disabled-text-decoration: #{$menu-link-disabled-text-decoration};
38
+ --#{root-defaults.$prefix}-link-disabled-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
39
+ --#{root-defaults.$prefix}-link-disabled-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
40
+ --#{root-defaults.$prefix}-link-disabled-transform: #{$menu-link-disabled-transform};
41
+
42
+ display: $menu-display;
43
+ flex-direction: $menu-flex-direction;
44
+ padding: $menu-padding;
45
+ border: $menu-border;
46
+ border-radius: $menu-border-radius;
47
+ list-style: none;
48
+ gap: $menu-gap;
49
+ isolation: isolate;
50
+
51
+ &#{defaults.$menu-show-selector} {
52
+ --#{root-defaults.$prefix}-menu-display: #{$menu-show-display};
53
+ }
54
+
55
+ &#{defaults.$menu-hide-selector} {
56
+ --#{root-defaults.$prefix}-menu-display: #{$menu-hide-display};
57
+ }
58
+ }
59
+
60
+ #{defaults.$submenu-selector} {
61
+ display: $submenu-display;
62
+ position: $submenu-position;
63
+ z-index: $submenu-z-index;
64
+ flex: 1 1;
65
+ flex-direction: $submenu-flex-direction;
66
+ padding: $submenu-padding;
67
+ border: $submenu-border;
68
+ border-radius: $submenu-border-radius;
69
+ list-style: none;
70
+ gap: $submenu-gap;
71
+ isolation: isolate;
72
+ inset: $submenu-inset;
73
+
74
+ &#{defaults.$menu-show-selector} {
75
+ --#{root-defaults.$prefix}-submenu-display: #{$submenu-show-display};
76
+ }
77
+
78
+ &#{defaults.$menu-hide-selector} {
79
+ --#{root-defaults.$prefix}-submenu-display: #{$submenu-hide-display};
80
+ }
81
+ }
82
+
83
+ #{defaults.$menu-item-selector} {
84
+ display: flex;
85
+ position: relative;
86
+ flex-wrap: wrap;
87
+ align-items: center;
88
+ justify-content: center;
89
+ min-width: $menu-item-min-width;
90
+ max-width: $menu-item-max-width;
91
+ padding: $menu-item-padding;
92
+ }
93
+
94
+ #{defaults.$menu-link-selector} {
95
+ display: flex;
96
+ width: 100%;
97
+ padding: $menu-link-padding;
98
+ transform: $menu-link-transform;
99
+ transition: $menu-link-transition;
100
+ border: $menu-link-border;
101
+ border-radius: $menu-link-border-radius;
102
+ text-decoration: $menu-link-text-decoration;
103
+ text-decoration-style: $menu-link-text-decoration-style;
104
+ gap: $menu-link-gap;
105
+ text-decoration-thickness: $menu-link-text-decoration-thickness;
106
+
107
+ &:visited {
108
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-visited-text-decoration};
109
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
110
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-visited-text-decoration-style};
111
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-visited-transform};
112
+ }
113
+
114
+ &:focus-visible {
115
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-focus-text-decoration};
116
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
117
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-focus-text-decoration-style};
118
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-focus-transform};
119
+ }
120
+
121
+ &:hover {
122
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-hover-text-decoration};
123
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
124
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-hover-text-decoration-style};
125
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-hover-transform};
126
+ }
127
+
128
+ &:active {
129
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-active-text-decoration};
130
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
131
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-active-text-decoration-style};
132
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-active-transform};
133
+ }
134
+
135
+ &:disabled,
136
+ &[disabled] {
137
+ &,
138
+ &:visited,
139
+ &:focus-visible,
140
+ &:hover,
141
+ &:active {
142
+ --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-disabled-text-decoration};
143
+ --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
144
+ --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
145
+ --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-disabled-transform};
146
+ }
147
+ }
148
+
149
+ &#{button-defaults.$button-selector} {
150
+ --#{root-defaults.$prefix}-menu-link-padding: #{button-variables.$button-padding};
151
+ --#{root-defaults.$prefix}-menu-link-border-width: #{button-variables.$button-border-width};
152
+ --#{root-defaults.$prefix}-menu-link-border-radius: #{button-variables.$button-border-radius};
153
+ --#{root-defaults.$prefix}-menu-link-border-style: #{button-variables.$button-border-style};
154
+ --#{root-defaults.$prefix}-menu-link-text-decoration: none;
155
+ --#{root-defaults.$prefix}-menu-link-visited-text-decoration: none;
156
+ --#{root-defaults.$prefix}-menu-link-focus-text-decoration: none;
157
+ --#{root-defaults.$prefix}-menu-link-hover-text-decoration: none;
158
+ --#{root-defaults.$prefix}-menu-link-active-text-decoration: none;
159
+ --#{root-defaults.$prefix}-menu-link-disabled-text-decoration: none;
160
+ --#{root-defaults.$prefix}-menu-link-transition: #{button-variables.$button-transition};
161
+ --#{root-defaults.$prefix}-menu-link-transition-reduced-motion: #{button-variables.$button-transition-reduced-motion};
162
+ --#{root-defaults.$prefix}-menu-link-transform: #{button-variables.$button-transform};
163
+ --#{root-defaults.$prefix}-menu-link-visited-transform: #{button-variables.$button-visited-transform};
164
+ --#{root-defaults.$prefix}-menu-link-focus-transform: #{button-variables.$button-focus-transform};
165
+ --#{root-defaults.$prefix}-menu-link-hover-transform: #{button-variables.$button-hover-transform};
166
+ --#{root-defaults.$prefix}-menu-link-active-transform: #{button-variables.$button-active-transform};
167
+ --#{root-defaults.$prefix}-menu-link-disabled-transform: #{button-variables.$button-disabled-transform};
168
+ }
169
+ }
170
+
171
+ #{defaults.$submenu-toggle-selector} {
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: space-between;
175
+
176
+ &::after {
177
+ content: $submenu-toggle-content;
178
+ display: block;
179
+ transform: $submenu-toggle-transform;
180
+ transition: $submenu-toggle-transition;
181
+ }
182
+
183
+ &[aria-expanded="true"]::after {
184
+ --#{root-defaults.$prefix}-submenu-toggle-transform: #{$submenu-toggle-open-transform};
185
+ }
186
+ }
187
+
188
+ @include animation.off {
189
+ #{defaults.$menu-link-selector} {
190
+ --#{root-defaults.$prefix}-menu-link-transition: #{$menu-link-transition-reduced-motion};
191
+ }
192
+
193
+ #{defaults.$submenu-toggle-selector}::after {
194
+ --#{root-defaults.$prefix}-submenu-toggle-transition: #{$submenu-toggle-transition-reduced-motion};
195
+ }
196
+ }
197
+ }
198
+
199
+ @include layer(theme) {
200
+ #{defaults.$menu-selector} {
201
+ --#{root-defaults.$prefix}-link-color: #{$menu-link-color};
202
+ --#{root-defaults.$prefix}-link-background: #{$menu-link-background};
203
+ --#{root-defaults.$prefix}-link-border-color: #{$menu-link-border-color};
204
+ --#{root-defaults.$prefix}-link-text-decoration-color: #{$menu-link-text-decoration-color};
205
+ --#{root-defaults.$prefix}-link-visited-color: #{$menu-link-visited-color};
206
+ --#{root-defaults.$prefix}-link-visited-background: #{$menu-link-visited-background};
207
+ --#{root-defaults.$prefix}-link-visited-border-color: #{$menu-link-visited-border-color};
208
+ --#{root-defaults.$prefix}-link-visited-text-decoration-color: #{$menu-link-visited-text-decoration-color};
209
+ --#{root-defaults.$prefix}-link-focus-color: #{$menu-link-focus-color};
210
+ --#{root-defaults.$prefix}-link-focus-background: #{$menu-link-focus-background};
211
+ --#{root-defaults.$prefix}-link-focus-border-color: #{$menu-link-focus-border-color};
212
+ --#{root-defaults.$prefix}-link-focus-text-decoration-color: #{$menu-link-focus-text-decoration-color};
213
+ --#{root-defaults.$prefix}-link-hover-color: #{$menu-link-hover-color};
214
+ --#{root-defaults.$prefix}-link-hover-background: #{$menu-link-hover-background};
215
+ --#{root-defaults.$prefix}-link-hover-border-color: #{$menu-link-hover-border-color};
216
+ --#{root-defaults.$prefix}-link-hover-text-decoration-color: #{$menu-link-hover-text-decoration-color};
217
+ --#{root-defaults.$prefix}-link-active-color: #{$menu-link-active-color};
218
+ --#{root-defaults.$prefix}-link-active-background: #{$menu-link-active-background};
219
+ --#{root-defaults.$prefix}-link-active-border-color: #{$menu-link-active-border-color};
220
+ --#{root-defaults.$prefix}-link-active-text-decoration-color: #{$menu-link-active-text-decoration-color};
221
+ --#{root-defaults.$prefix}-link-disabled-color: #{$menu-link-disabled-color};
222
+ --#{root-defaults.$prefix}-link-disabled-background: #{$menu-link-disabled-background};
223
+ --#{root-defaults.$prefix}-link-disabled-border-color: #{$menu-link-disabled-border-color};
224
+ --#{root-defaults.$prefix}-link-disabled-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
225
+
226
+ border-color: $menu-border-color;
227
+ background: $menu-background;
228
+ color: $menu-color;
229
+ }
230
+
231
+ #{defaults.$submenu-selector} {
232
+ border-color: $submenu-border-color;
233
+ background: $submenu-background;
234
+ color: $submenu-color;
235
+ }
236
+
237
+ #{defaults.$menu-link-selector} {
238
+ border-color: $menu-link-border-color;
239
+ background: $menu-link-background;
240
+ color: $menu-link-color;
241
+ text-decoration-color: $menu-link-text-decoration-color;
242
+
243
+ &:visited {
244
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-visited-background};
245
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-visited-color};
246
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-visited-text-decoration-color};
247
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-visited-border-color};
248
+ }
249
+
250
+ &:focus-visible {
251
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-focus-background};
252
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-focus-color};
253
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-focus-text-decoration-color};
254
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-focus-border-color};
255
+ }
256
+
257
+ &:hover {
258
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-hover-background};
259
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-hover-color};
260
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-hover-text-decoration-color};
261
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-hover-border-color};
262
+ }
263
+
264
+ &:active {
265
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-active-background};
266
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-active-color};
267
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-active-text-decoration-color};
268
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-active-border-color};
269
+ }
270
+
271
+ &:disabled {
272
+ &,
273
+ &:hover,
274
+ &:active,
275
+ &:focus-visible,
276
+ &:visited {
277
+ --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-disabled-background};
278
+ --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-disabled-color};
279
+ --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
280
+ --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-disabled-border-color};
281
+ }
282
+ }
283
+
284
+ &#{button-defaults.$button-selector} {
285
+ --#{root-defaults.$prefix}-menu-link-background: #{button-variables.$button-background};
286
+ --#{root-defaults.$prefix}-menu-link-color: #{button-variables.$button-color};
287
+ --#{root-defaults.$prefix}-menu-link-border-color: #{button-variables.$button-border-color};
288
+ --#{root-defaults.$prefix}-menu-link-visited-background: #{button-variables.$button-visited-background};
289
+ --#{root-defaults.$prefix}-menu-link-visited-color: #{button-variables.$button-visited-color};
290
+ --#{root-defaults.$prefix}-menu-link-visited-border-color: #{button-variables.$button-visited-border-color};
291
+ --#{root-defaults.$prefix}-menu-link-focus-background: #{button-variables.$button-focus-background};
292
+ --#{root-defaults.$prefix}-menu-link-focus-color: #{button-variables.$button-focus-color};
293
+ --#{root-defaults.$prefix}-menu-link-focus-border-color: #{button-variables.$button-focus-border-color};
294
+ --#{root-defaults.$prefix}-menu-link-hover-background: #{button-variables.$button-hover-background};
295
+ --#{root-defaults.$prefix}-menu-link-hover-color: #{button-variables.$button-hover-color};
296
+ --#{root-defaults.$prefix}-menu-link-hover-border-color: #{button-variables.$button-hover-border-color};
297
+ --#{root-defaults.$prefix}-menu-link-active-background: #{button-variables.$button-active-background};
298
+ --#{root-defaults.$prefix}-menu-link-active-color: #{button-variables.$button-active-color};
299
+ --#{root-defaults.$prefix}-menu-link-active-border-color: #{button-variables.$button-active-border-color};
300
+ --#{root-defaults.$prefix}-menu-link-disabled-background: #{button-variables.$button-disabled-background};
301
+ --#{root-defaults.$prefix}-menu-link-disabled-color: #{button-variables.$button-disabled-color};
302
+ --#{root-defaults.$prefix}-menu-link-disabled-border-color: #{button-variables.$button-disabled-border-color};
303
+ }
304
+ }
305
+ }