@graupl/graupl 1.0.0-beta.1 → 1.0.0-beta.11

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 (382) hide show
  1. package/dist/css/base/button.css +1 -1
  2. package/dist/css/base/button.css.map +1 -1
  3. package/dist/css/base/form.css +1 -1
  4. package/dist/css/base/form.css.map +1 -1
  5. package/dist/css/base/link.css +1 -1
  6. package/dist/css/base/link.css.map +1 -1
  7. package/dist/css/base/table.css +1 -1
  8. package/dist/css/base/table.css.map +1 -1
  9. package/dist/css/base.css +1 -1
  10. package/dist/css/base.css.map +1 -1
  11. package/dist/css/component/accordion.css +4 -1
  12. package/dist/css/component/accordion.css.map +1 -1
  13. package/dist/css/component/alert.css +1 -1
  14. package/dist/css/component/alert.css.map +1 -1
  15. package/dist/css/component/card.css +1 -1
  16. package/dist/css/component/card.css.map +1 -1
  17. package/dist/css/component/carousel.css +1 -1
  18. package/dist/css/component/carousel.css.map +1 -1
  19. package/dist/css/component/input-group.css +1 -1
  20. package/dist/css/component/input-group.css.map +1 -1
  21. package/dist/css/component/list.css +2 -0
  22. package/dist/css/component/list.css.map +1 -0
  23. package/dist/css/component/menu.css +1 -1
  24. package/dist/css/component/menu.css.map +1 -1
  25. package/dist/css/component/navigation.css +1 -1
  26. package/dist/css/component/navigation.css.map +1 -1
  27. package/dist/css/component.css +4 -1
  28. package/dist/css/component.css.map +1 -1
  29. package/dist/css/graupl.css +4 -1
  30. package/dist/css/graupl.css.map +1 -1
  31. package/dist/css/init.css.map +1 -1
  32. package/dist/css/layout/columns.css +1 -1
  33. package/dist/css/layout/columns.css.map +1 -1
  34. package/dist/css/layout/container.css +1 -1
  35. package/dist/css/layout/container.css.map +1 -1
  36. package/dist/css/layout/flex-columns.css +1 -1
  37. package/dist/css/layout/flex-columns.css.map +1 -1
  38. package/dist/css/layout.css +4 -1
  39. package/dist/css/layout.css.map +1 -1
  40. package/dist/css/normalize.css +1 -1
  41. package/dist/css/normalize.css.map +1 -1
  42. package/dist/css/state/focus.css +1 -1
  43. package/dist/css/state/focus.css.map +1 -1
  44. package/dist/css/state.css +1 -1
  45. package/dist/css/state.css.map +1 -1
  46. package/dist/css/theme/color.css +1 -1
  47. package/dist/css/theme/color.css.map +1 -1
  48. package/dist/css/theme/typography.css +1 -1
  49. package/dist/css/theme/typography.css.map +1 -1
  50. package/dist/css/theme.css +1 -1
  51. package/dist/css/theme.css.map +1 -1
  52. package/dist/css/utilities/alignment.css +1 -1
  53. package/dist/css/utilities/alignment.css.map +1 -1
  54. package/dist/css/utilities/background.css +2 -0
  55. package/dist/css/utilities/background.css.map +1 -0
  56. package/dist/css/utilities/border.css +2 -0
  57. package/dist/css/utilities/border.css.map +1 -0
  58. package/dist/css/utilities/color.css +1 -1
  59. package/dist/css/utilities/color.css.map +1 -1
  60. package/dist/css/utilities/container.css +2 -0
  61. package/dist/css/utilities/container.css.map +1 -0
  62. package/dist/css/utilities/display.css +1 -1
  63. package/dist/css/utilities/display.css.map +1 -1
  64. package/dist/css/utilities/flex.css +1 -1
  65. package/dist/css/utilities/flex.css.map +1 -1
  66. package/dist/css/utilities/gradient.css +2 -0
  67. package/dist/css/utilities/gradient.css.map +1 -0
  68. package/dist/css/utilities/height.css +1 -1
  69. package/dist/css/utilities/height.css.map +1 -1
  70. package/dist/css/utilities/inset.css +1 -1
  71. package/dist/css/utilities/inset.css.map +1 -1
  72. package/dist/css/utilities/justification.css +1 -1
  73. package/dist/css/utilities/justification.css.map +1 -1
  74. package/dist/css/utilities/list.css +1 -1
  75. package/dist/css/utilities/list.css.map +1 -1
  76. package/dist/css/utilities/order.css +1 -1
  77. package/dist/css/utilities/order.css.map +1 -1
  78. package/dist/css/utilities/position.css +2 -0
  79. package/dist/css/utilities/position.css.map +1 -0
  80. package/dist/css/utilities/ratio.css +1 -1
  81. package/dist/css/utilities/ratio.css.map +1 -1
  82. package/dist/css/utilities/spacing.css +1 -1
  83. package/dist/css/utilities/spacing.css.map +1 -1
  84. package/dist/css/utilities/typography.css +1 -1
  85. package/dist/css/utilities/typography.css.map +1 -1
  86. package/dist/css/utilities/visibility.css +1 -1
  87. package/dist/css/utilities/visibility.css.map +1 -1
  88. package/dist/css/utilities/visually-hidden.css +2 -0
  89. package/dist/css/utilities/visually-hidden.css.map +1 -0
  90. package/dist/css/utilities/width.css +1 -1
  91. package/dist/css/utilities/width.css.map +1 -1
  92. package/dist/css/utilities/z-index.css +2 -0
  93. package/dist/css/utilities/z-index.css.map +1 -0
  94. package/dist/css/utilities.css +1 -1
  95. package/dist/css/utilities.css.map +1 -1
  96. package/dist/js/accordion.js +5 -0
  97. package/dist/js/accordion.js.map +1 -0
  98. package/dist/js/alert.js +5 -0
  99. package/dist/js/alert.js.map +1 -0
  100. package/dist/js/carousel.js +5 -0
  101. package/dist/js/carousel.js.map +1 -0
  102. package/dist/js/component/accordion.cjs.js +4 -2
  103. package/dist/js/component/accordion.cjs.js.map +1 -0
  104. package/dist/js/component/accordion.es.js +5 -0
  105. package/dist/js/component/accordion.es.js.map +1 -0
  106. package/dist/js/component/accordion.iife.js +4 -2
  107. package/dist/js/component/accordion.iife.js.map +1 -0
  108. package/dist/js/component/alert.cjs.js +4 -2
  109. package/dist/js/component/alert.cjs.js.map +1 -0
  110. package/dist/js/component/alert.es.js +5 -0
  111. package/dist/js/component/alert.es.js.map +1 -0
  112. package/dist/js/component/alert.iife.js +4 -2
  113. package/dist/js/component/alert.iife.js.map +1 -0
  114. package/dist/js/component/carousel.cjs.js +4 -2
  115. package/dist/js/component/carousel.cjs.js.map +1 -0
  116. package/dist/js/component/carousel.es.js +5 -0
  117. package/dist/js/component/carousel.es.js.map +1 -0
  118. package/dist/js/component/carousel.iife.js +4 -2
  119. package/dist/js/component/carousel.iife.js.map +1 -0
  120. package/dist/js/generator/accordion.cjs.js +5 -0
  121. package/dist/js/generator/accordion.cjs.js.map +1 -0
  122. package/dist/js/generator/accordion.es.js +5 -0
  123. package/dist/js/generator/accordion.es.js.map +1 -0
  124. package/dist/js/generator/accordion.iife.js +5 -0
  125. package/dist/js/generator/accordion.iife.js.map +1 -0
  126. package/dist/js/generator/carousel.cjs.js +5 -0
  127. package/dist/js/generator/carousel.cjs.js.map +1 -0
  128. package/dist/js/generator/carousel.es.js +5 -0
  129. package/dist/js/generator/carousel.es.js.map +1 -0
  130. package/dist/js/generator/carousel.iife.js +5 -0
  131. package/dist/js/generator/carousel.iife.js.map +1 -0
  132. package/dist/js/generator/navigation.cjs.js +3 -0
  133. package/dist/js/generator/navigation.cjs.js.map +1 -0
  134. package/dist/js/generator/navigation.es.js +3 -0
  135. package/dist/js/generator/navigation.es.js.map +1 -0
  136. package/dist/js/generator/navigation.iife.js +3 -0
  137. package/dist/js/generator/navigation.iife.js.map +1 -0
  138. package/dist/js/graupl.js +9 -0
  139. package/dist/js/graupl.js.map +1 -0
  140. package/dist/js/navigation.js +3 -0
  141. package/dist/js/navigation.js.map +1 -0
  142. package/package.json +43 -37
  143. package/scss/base/button.scss +1 -1
  144. package/scss/base/form.scss +1 -1
  145. package/scss/base/link.scss +1 -1
  146. package/scss/base/table.scss +1 -1
  147. package/scss/base.scss +1 -1
  148. package/scss/component/accordion.scss +1 -1
  149. package/scss/component/alert.scss +1 -1
  150. package/scss/component/card.scss +1 -1
  151. package/scss/component/carousel.scss +1 -1
  152. package/scss/component/input-group.scss +1 -1
  153. package/scss/component/list.scss +3 -0
  154. package/scss/component/menu.scss +1 -1
  155. package/scss/component/navigation.scss +1 -1
  156. package/scss/component.scss +1 -1
  157. package/scss/graupl.scss +1 -1
  158. package/scss/init.scss +1 -1
  159. package/scss/layout/columns.scss +1 -1
  160. package/scss/layout/container.scss +1 -1
  161. package/scss/layout/flex-columns.scss +1 -1
  162. package/scss/layout.scss +1 -1
  163. package/scss/normalize.scss +1 -1
  164. package/scss/state/focus.scss +1 -1
  165. package/scss/state.scss +1 -1
  166. package/scss/theme/color.scss +1 -1
  167. package/scss/theme/typography.scss +1 -1
  168. package/scss/theme.scss +1 -1
  169. package/scss/utilities/alignment.scss +1 -1
  170. package/scss/utilities/background.scss +3 -0
  171. package/scss/utilities/border.scss +3 -0
  172. package/scss/utilities/color.scss +1 -1
  173. package/scss/utilities/container.scss +3 -0
  174. package/scss/utilities/display.scss +1 -1
  175. package/scss/utilities/flex.scss +1 -1
  176. package/scss/utilities/gradient.scss +3 -0
  177. package/scss/utilities/height.scss +1 -1
  178. package/scss/utilities/inset.scss +1 -1
  179. package/scss/utilities/justification.scss +1 -1
  180. package/scss/utilities/list.scss +1 -1
  181. package/scss/utilities/order.scss +1 -1
  182. package/scss/utilities/position.scss +3 -0
  183. package/scss/utilities/ratio.scss +1 -1
  184. package/scss/utilities/spacing.scss +1 -1
  185. package/scss/utilities/typography.scss +1 -1
  186. package/scss/utilities/visibility.scss +1 -1
  187. package/scss/utilities/visually-hidden.scss +3 -0
  188. package/scss/utilities/width.scss +1 -1
  189. package/scss/utilities/z-index.scss +3 -0
  190. package/scss/utilities.scss +1 -1
  191. package/.browserslistrc +0 -3
  192. package/.czrc +0 -3
  193. package/.editorconfig +0 -13
  194. package/.github/CODE_OF_CONDUCT.md +0 -73
  195. package/.github/COMMIT_CONVENTION.md +0 -17
  196. package/.github/CONTRIBUTING.md +0 -86
  197. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  198. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  199. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  200. package/.github/SECURITY.md +0 -26
  201. package/.github/dependabot.yml +0 -17
  202. package/.github/pull_request_template.md +0 -5
  203. package/.github/workflows/codeql-analysis.yml +0 -71
  204. package/.github/workflows/docs.yml +0 -59
  205. package/.github/workflows/test.yml +0 -27
  206. package/.husky/commit-msg +0 -3
  207. package/.husky/pre-commit +0 -4
  208. package/.prettierignore +0 -12
  209. package/.stylelintignore +0 -9
  210. package/.versionrc.cjs +0 -61
  211. package/CHANGELOG.md +0 -364
  212. package/build.js +0 -7
  213. package/commitlint.config.js +0 -5
  214. package/dist/css/utilities/postion.css +0 -2
  215. package/dist/css/utilities/postion.css.map +0 -1
  216. package/dist/js/component/accordion.esm.js +0 -1289
  217. package/dist/js/component/alert.esm.js +0 -529
  218. package/dist/js/component/carousel.esm.js +0 -1110
  219. package/dist/js/graupl.cjs.js +0 -5
  220. package/dist/js/graupl.esm.js +0 -1462
  221. package/dist/js/graupl.iife.js +0 -5
  222. package/docs/.vitepress/config.js +0 -78
  223. package/docs/.vitepress/theme/custom.scss +0 -35
  224. package/docs/.vitepress/theme/index.js +0 -4
  225. package/docs/compiling-graupl.md +0 -56
  226. package/docs/components/alert.md +0 -130
  227. package/docs/components/button.md +0 -84
  228. package/docs/components/card.md +0 -369
  229. package/docs/components/index.md +0 -1
  230. package/docs/components/inputgroup.md +0 -159
  231. package/docs/components/menu.md +0 -326
  232. package/docs/components/navigation.md +0 -158
  233. package/docs/content.md +0 -237
  234. package/docs/defaults.md +0 -121
  235. package/docs/forms.md +0 -79
  236. package/docs/functions.md +0 -9
  237. package/docs/getting-started.md +0 -1
  238. package/docs/index.md +0 -1
  239. package/docs/introduction.md +0 -25
  240. package/docs/layout.md +0 -200
  241. package/docs/mixins.md +0 -47
  242. package/docs/state.md +0 -67
  243. package/docs/theme.md +0 -258
  244. package/docs/utilities.md +0 -357
  245. package/eslint.config.js +0 -74
  246. package/index.html +0 -851
  247. package/index.js +0 -12
  248. package/lint-staged.config.js +0 -6
  249. package/postcss.config.cjs +0 -12
  250. package/prettier.config.js +0 -16
  251. package/scss/utilities/postion.scss +0 -3
  252. package/src/js/accordion/Accordion.js +0 -1163
  253. package/src/js/accordion/AccordionItem.js +0 -496
  254. package/src/js/accordion/index.js +0 -10
  255. package/src/js/alert/Alert.js +0 -581
  256. package/src/js/alert/index.js +0 -11
  257. package/src/js/carousel/Carousel.js +0 -1427
  258. package/src/js/carousel/index.js +0 -10
  259. package/src/js/domHelpers.js +0 -37
  260. package/src/js/eventHandlers.js +0 -39
  261. package/src/js/navigation/index.js +0 -36
  262. package/src/js/storage.js +0 -106
  263. package/src/js/validate.js +0 -225
  264. package/src/scss/_defaults.scss +0 -136
  265. package/src/scss/_index.scss +0 -15
  266. package/src/scss/_init.scss +0 -3
  267. package/src/scss/_normalize.scss +0 -197
  268. package/src/scss/_variables.scss +0 -53
  269. package/src/scss/base/_index.scss +0 -6
  270. package/src/scss/base/button/_defaults.scss +0 -60
  271. package/src/scss/base/button/_index.scss +0 -107
  272. package/src/scss/base/button/_mixins.scss +0 -166
  273. package/src/scss/base/button/_variables.scss +0 -176
  274. package/src/scss/base/form/_defaults.scss +0 -17
  275. package/src/scss/base/form/_index.scss +0 -93
  276. package/src/scss/base/form/_variables.scss +0 -153
  277. package/src/scss/base/link/_defaults.scss +0 -50
  278. package/src/scss/base/link/_index.scss +0 -134
  279. package/src/scss/base/link/_variables.scss +0 -262
  280. package/src/scss/base/table/_defaults.scss +0 -53
  281. package/src/scss/base/table/_index.scss +0 -121
  282. package/src/scss/base/table/_variables.scss +0 -135
  283. package/src/scss/component/_index.scss +0 -9
  284. package/src/scss/component/accordion/_defaults.scss +0 -40
  285. package/src/scss/component/accordion/_index.scss +0 -180
  286. package/src/scss/component/accordion/_variables.scss +0 -316
  287. package/src/scss/component/alert/_defaults.scss +0 -49
  288. package/src/scss/component/alert/_index.scss +0 -118
  289. package/src/scss/component/alert/_variables.scss +0 -170
  290. package/src/scss/component/card/_defaults.scss +0 -32
  291. package/src/scss/component/card/_index.scss +0 -178
  292. package/src/scss/component/card/_variables.scss +0 -186
  293. package/src/scss/component/carousel/_defaults.scss +0 -43
  294. package/src/scss/component/carousel/_index.scss +0 -188
  295. package/src/scss/component/carousel/_variables.scss +0 -104
  296. package/src/scss/component/input-group/_defaults.scss +0 -30
  297. package/src/scss/component/input-group/_index.scss +0 -47
  298. package/src/scss/component/input-group/_variables.scss +0 -66
  299. package/src/scss/component/menu/_defaults.scss +0 -66
  300. package/src/scss/component/menu/_index.scss +0 -305
  301. package/src/scss/component/menu/_variables.scss +0 -500
  302. package/src/scss/component/navigation/_defaults.scss +0 -29
  303. package/src/scss/component/navigation/_index.scss +0 -189
  304. package/src/scss/component/navigation/_variables.scss +0 -237
  305. package/src/scss/functions/_important.scss +0 -13
  306. package/src/scss/functions/_screen.scss +0 -30
  307. package/src/scss/functions/_theme.scss +0 -39
  308. package/src/scss/layout/_index.scss +0 -5
  309. package/src/scss/layout/columns/_defaults.scss +0 -19
  310. package/src/scss/layout/columns/_index.scss +0 -58
  311. package/src/scss/layout/columns/_variables.scss +0 -51
  312. package/src/scss/layout/container/_defaults.scss +0 -17
  313. package/src/scss/layout/container/_index.scss +0 -41
  314. package/src/scss/layout/container/_variables.scss +0 -50
  315. package/src/scss/layout/flex-columns/_defaults.scss +0 -18
  316. package/src/scss/layout/flex-columns/_index.scss +0 -80
  317. package/src/scss/layout/flex-columns/_variables.scss +0 -26
  318. package/src/scss/mixins/_animation.scss +0 -15
  319. package/src/scss/mixins/_layer.scss +0 -12
  320. package/src/scss/mixins/_screen.scss +0 -56
  321. package/src/scss/mixins/_utility.scss +0 -30
  322. package/src/scss/mixins/_visually-hidden.scss +0 -20
  323. package/src/scss/state/_index.scss +0 -3
  324. package/src/scss/state/focus/_defaults.scss +0 -10
  325. package/src/scss/state/focus/_index.scss +0 -13
  326. package/src/scss/state/focus/_mixins.scss +0 -15
  327. package/src/scss/state/focus/_variables.scss +0 -44
  328. package/src/scss/theme/_index.scss +0 -4
  329. package/src/scss/theme/color/_defaults.scss +0 -143
  330. package/src/scss/theme/color/_index.scss +0 -42
  331. package/src/scss/theme/color/_variables.scss +0 -129
  332. package/src/scss/theme/typography/_defaults.scss +0 -54
  333. package/src/scss/theme/typography/_index.scss +0 -111
  334. package/src/scss/theme/typography/_variables.scss +0 -231
  335. package/src/scss/utilities/_index.scss +0 -17
  336. package/src/scss/utilities/alignment/_defaults.scss +0 -62
  337. package/src/scss/utilities/alignment/_index.scss +0 -75
  338. package/src/scss/utilities/alignment/_variables.scss +0 -6
  339. package/src/scss/utilities/color/_defaults.scss +0 -35
  340. package/src/scss/utilities/color/_index.scss +0 -91
  341. package/src/scss/utilities/color/_variables.scss +0 -6
  342. package/src/scss/utilities/display/_defaults.scss +0 -32
  343. package/src/scss/utilities/display/_index.scss +0 -61
  344. package/src/scss/utilities/display/_variables.scss +0 -6
  345. package/src/scss/utilities/flex/_defaults.scss +0 -63
  346. package/src/scss/utilities/flex/_index.scss +0 -71
  347. package/src/scss/utilities/flex/_variables.scss +0 -6
  348. package/src/scss/utilities/height/_defaults.scss +0 -41
  349. package/src/scss/utilities/height/_index.scss +0 -98
  350. package/src/scss/utilities/height/_variables.scss +0 -6
  351. package/src/scss/utilities/inset/_defaults.scss +0 -41
  352. package/src/scss/utilities/inset/_index.scss +0 -37
  353. package/src/scss/utilities/inset/_variables.scss +0 -6
  354. package/src/scss/utilities/justification/_defaults.scss +0 -59
  355. package/src/scss/utilities/justification/_index.scss +0 -75
  356. package/src/scss/utilities/justification/_variables.scss +0 -6
  357. package/src/scss/utilities/list/_defaults.scss +0 -39
  358. package/src/scss/utilities/list/_index.scss +0 -56
  359. package/src/scss/utilities/list/_variables.scss +0 -6
  360. package/src/scss/utilities/order/_defaults.scss +0 -22
  361. package/src/scss/utilities/order/_index.scss +0 -63
  362. package/src/scss/utilities/order/_variables.scss +0 -6
  363. package/src/scss/utilities/position/_defaults.scss +0 -26
  364. package/src/scss/utilities/position/_index.scss +0 -37
  365. package/src/scss/utilities/position/_variables.scss +0 -6
  366. package/src/scss/utilities/ratio/_defaults.scss +0 -28
  367. package/src/scss/utilities/ratio/_index.scss +0 -52
  368. package/src/scss/utilities/ratio/_variables.scss +0 -9
  369. package/src/scss/utilities/spacing/_defaults.scss +0 -49
  370. package/src/scss/utilities/spacing/_index.scss +0 -169
  371. package/src/scss/utilities/spacing/_variables.scss +0 -6
  372. package/src/scss/utilities/typography/_defaults.scss +0 -30
  373. package/src/scss/utilities/typography/_index.scss +0 -224
  374. package/src/scss/utilities/typography/_variables.scss +0 -6
  375. package/src/scss/utilities/visibility/_defaults.scss +0 -25
  376. package/src/scss/utilities/visibility/_index.scss +0 -36
  377. package/src/scss/utilities/visibility/_variables.scss +0 -6
  378. package/src/scss/utilities/width/_defaults.scss +0 -41
  379. package/src/scss/utilities/width/_index.scss +0 -98
  380. package/src/scss/utilities/width/_variables.scss +0 -6
  381. package/stylelint.config.js +0 -21
  382. package/vite.config.js +0 -57
package/src/scss/component/menu/_index.scss DELETED
@@ -1,305 +0,0 @@
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
- }