@graupl/graupl 1.0.0-beta.4 → 1.0.0-beta.41

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 (475) hide show
  1. package/LICENSE +674 -0
  2. package/README.md +9 -0
  3. package/dist/css/base/button.css +2 -2
  4. package/dist/css/base/button.css.map +1 -1
  5. package/dist/css/base/form.css +2 -2
  6. package/dist/css/base/form.css.map +1 -1
  7. package/dist/css/base/link.css +2 -2
  8. package/dist/css/base/link.css.map +1 -1
  9. package/dist/css/base/table.css +2 -2
  10. package/dist/css/base/table.css.map +1 -1
  11. package/dist/css/base.css +2 -2
  12. package/dist/css/base.css.map +1 -1
  13. package/dist/css/component/accordion.css +2 -2
  14. package/dist/css/component/accordion.css.map +1 -1
  15. package/dist/css/component/alert.css +2 -2
  16. package/dist/css/component/alert.css.map +1 -1
  17. package/dist/css/component/badge.css +2 -0
  18. package/dist/css/component/badge.css.map +1 -0
  19. package/dist/css/component/breadcrumb.css +2 -0
  20. package/dist/css/component/breadcrumb.css.map +1 -0
  21. package/dist/css/component/card.css +2 -2
  22. package/dist/css/component/card.css.map +1 -1
  23. package/dist/css/component/carousel.css +2 -2
  24. package/dist/css/component/carousel.css.map +1 -1
  25. package/dist/css/component/disclosure.css +2 -0
  26. package/dist/css/component/disclosure.css.map +1 -0
  27. package/dist/css/component/input-group.css +2 -2
  28. package/dist/css/component/input-group.css.map +1 -1
  29. package/dist/css/component/list.css +2 -2
  30. package/dist/css/component/list.css.map +1 -1
  31. package/dist/css/component/menu.css +2 -2
  32. package/dist/css/component/menu.css.map +1 -1
  33. package/dist/css/component/navigation.css +2 -2
  34. package/dist/css/component/navigation.css.map +1 -1
  35. package/dist/css/component/tabs.css +2 -0
  36. package/dist/css/component/tabs.css.map +1 -0
  37. package/dist/css/component.css +2 -2
  38. package/dist/css/component.css.map +1 -1
  39. package/dist/css/graupl.css +2 -2
  40. package/dist/css/graupl.css.map +1 -1
  41. package/dist/css/init.css +2 -2
  42. package/dist/css/init.css.map +1 -1
  43. package/dist/css/layout/columns.css +2 -2
  44. package/dist/css/layout/columns.css.map +1 -1
  45. package/dist/css/layout/container.css +2 -2
  46. package/dist/css/layout/container.css.map +1 -1
  47. package/dist/css/layout/flex-columns.css +2 -2
  48. package/dist/css/layout/flex-columns.css.map +1 -1
  49. package/dist/css/layout.css +2 -2
  50. package/dist/css/layout.css.map +1 -1
  51. package/dist/css/normalize.css +2 -2
  52. package/dist/css/normalize.css.map +1 -1
  53. package/dist/css/state/focus.css +2 -2
  54. package/dist/css/state/focus.css.map +1 -1
  55. package/dist/css/state.css +2 -2
  56. package/dist/css/state.css.map +1 -1
  57. package/dist/css/theme/color.css +2 -2
  58. package/dist/css/theme/color.css.map +1 -1
  59. package/dist/css/theme/typography.css +2 -2
  60. package/dist/css/theme/typography.css.map +1 -1
  61. package/dist/css/theme.css +2 -2
  62. package/dist/css/theme.css.map +1 -1
  63. package/dist/css/utilities/alignment.css +1 -1
  64. package/dist/css/utilities/alignment.css.map +1 -1
  65. package/dist/css/utilities/background.css +2 -2
  66. package/dist/css/utilities/background.css.map +1 -1
  67. package/dist/css/utilities/border.css +2 -2
  68. package/dist/css/utilities/border.css.map +1 -1
  69. package/dist/css/utilities/color.css +2 -2
  70. package/dist/css/utilities/color.css.map +1 -1
  71. package/dist/css/utilities/container.css +2 -0
  72. package/dist/css/utilities/container.css.map +1 -0
  73. package/dist/css/utilities/display.css +2 -2
  74. package/dist/css/utilities/display.css.map +1 -1
  75. package/dist/css/utilities/flex.css +2 -2
  76. package/dist/css/utilities/flex.css.map +1 -1
  77. package/dist/css/utilities/gradient.css +2 -2
  78. package/dist/css/utilities/gradient.css.map +1 -1
  79. package/dist/css/utilities/height.css +2 -2
  80. package/dist/css/utilities/height.css.map +1 -1
  81. package/dist/css/utilities/inset.css +2 -2
  82. package/dist/css/utilities/inset.css.map +1 -1
  83. package/dist/css/utilities/isolation.css +2 -0
  84. package/dist/css/utilities/isolation.css.map +1 -0
  85. package/dist/css/utilities/justification.css +1 -1
  86. package/dist/css/utilities/justification.css.map +1 -1
  87. package/dist/css/utilities/list.css +1 -1
  88. package/dist/css/utilities/list.css.map +1 -1
  89. package/dist/css/utilities/object.css +2 -0
  90. package/dist/css/utilities/object.css.map +1 -0
  91. package/dist/css/utilities/order.css +2 -2
  92. package/dist/css/utilities/order.css.map +1 -1
  93. package/dist/css/utilities/position.css +2 -0
  94. package/dist/css/utilities/position.css.map +1 -0
  95. package/dist/css/utilities/ratio.css +2 -2
  96. package/dist/css/utilities/ratio.css.map +1 -1
  97. package/dist/css/utilities/spacing.css +2 -2
  98. package/dist/css/utilities/spacing.css.map +1 -1
  99. package/dist/css/utilities/typography.css +2 -2
  100. package/dist/css/utilities/typography.css.map +1 -1
  101. package/dist/css/utilities/visibility.css +2 -2
  102. package/dist/css/utilities/visibility.css.map +1 -1
  103. package/dist/css/utilities/visually-hidden.css +2 -0
  104. package/dist/css/utilities/visually-hidden.css.map +1 -0
  105. package/dist/css/utilities/width.css +2 -2
  106. package/dist/css/utilities/width.css.map +1 -1
  107. package/dist/css/utilities/z-index.css +2 -0
  108. package/dist/css/utilities/z-index.css.map +1 -0
  109. package/dist/css/utilities.css +2 -2
  110. package/dist/css/utilities.css.map +1 -1
  111. package/dist/js/accordion.js +5 -0
  112. package/dist/js/accordion.js.map +1 -0
  113. package/dist/js/alert.js +5 -0
  114. package/dist/js/alert.js.map +1 -0
  115. package/dist/js/breadcrumb.js +5 -0
  116. package/dist/js/breadcrumb.js.map +1 -0
  117. package/dist/js/carousel.js +5 -0
  118. package/dist/js/carousel.js.map +1 -0
  119. package/dist/js/component/accordion.cjs.js +5 -3
  120. package/dist/js/component/accordion.cjs.js.map +1 -0
  121. package/dist/js/component/accordion.es.js +5 -0
  122. package/dist/js/component/accordion.es.js.map +1 -0
  123. package/dist/js/component/accordion.iife.js +5 -3
  124. package/dist/js/component/accordion.iife.js.map +1 -0
  125. package/dist/js/component/alert.cjs.js +5 -3
  126. package/dist/js/component/alert.cjs.js.map +1 -0
  127. package/dist/js/component/alert.es.js +5 -0
  128. package/dist/js/component/alert.es.js.map +1 -0
  129. package/dist/js/component/alert.iife.js +5 -3
  130. package/dist/js/component/alert.iife.js.map +1 -0
  131. package/dist/js/component/breadcrumb.cjs.js +5 -0
  132. package/dist/js/component/breadcrumb.cjs.js.map +1 -0
  133. package/dist/js/component/breadcrumb.es.js +5 -0
  134. package/dist/js/component/breadcrumb.es.js.map +1 -0
  135. package/dist/js/component/breadcrumb.iife.js +5 -0
  136. package/dist/js/component/breadcrumb.iife.js.map +1 -0
  137. package/dist/js/component/carousel.cjs.js +5 -3
  138. package/dist/js/component/carousel.cjs.js.map +1 -0
  139. package/dist/js/component/carousel.es.js +5 -0
  140. package/dist/js/component/carousel.es.js.map +1 -0
  141. package/dist/js/component/carousel.iife.js +5 -3
  142. package/dist/js/component/carousel.iife.js.map +1 -0
  143. package/dist/js/component/disclosure.cjs.js +5 -0
  144. package/dist/js/component/disclosure.cjs.js.map +1 -0
  145. package/dist/js/component/disclosure.es.js +5 -0
  146. package/dist/js/component/disclosure.es.js.map +1 -0
  147. package/dist/js/component/disclosure.iife.js +5 -0
  148. package/dist/js/component/disclosure.iife.js.map +1 -0
  149. package/dist/js/component/tabs.cjs.js +5 -0
  150. package/dist/js/component/tabs.cjs.js.map +1 -0
  151. package/dist/js/component/tabs.es.js +5 -0
  152. package/dist/js/component/tabs.es.js.map +1 -0
  153. package/dist/js/component/tabs.iife.js +5 -0
  154. package/dist/js/component/tabs.iife.js.map +1 -0
  155. package/dist/js/disclosure.js +5 -0
  156. package/dist/js/disclosure.js.map +1 -0
  157. package/dist/js/generator/accordion.cjs.js +5 -0
  158. package/dist/js/generator/accordion.cjs.js.map +1 -0
  159. package/dist/js/generator/accordion.es.js +5 -0
  160. package/dist/js/generator/accordion.es.js.map +1 -0
  161. package/dist/js/generator/accordion.iife.js +5 -0
  162. package/dist/js/generator/accordion.iife.js.map +1 -0
  163. package/dist/js/generator/alert.cjs.js +5 -0
  164. package/dist/js/generator/alert.cjs.js.map +1 -0
  165. package/dist/js/generator/alert.es.js +5 -0
  166. package/dist/js/generator/alert.es.js.map +1 -0
  167. package/dist/js/generator/alert.iife.js +5 -0
  168. package/dist/js/generator/alert.iife.js.map +1 -0
  169. package/dist/js/generator/breadcrumb.cjs.js +5 -0
  170. package/dist/js/generator/breadcrumb.cjs.js.map +1 -0
  171. package/dist/js/generator/breadcrumb.es.js +5 -0
  172. package/dist/js/generator/breadcrumb.es.js.map +1 -0
  173. package/dist/js/generator/breadcrumb.iife.js +5 -0
  174. package/dist/js/generator/breadcrumb.iife.js.map +1 -0
  175. package/dist/js/generator/carousel.cjs.js +5 -0
  176. package/dist/js/generator/carousel.cjs.js.map +1 -0
  177. package/dist/js/generator/carousel.es.js +5 -0
  178. package/dist/js/generator/carousel.es.js.map +1 -0
  179. package/dist/js/generator/carousel.iife.js +5 -0
  180. package/dist/js/generator/carousel.iife.js.map +1 -0
  181. package/dist/js/generator/disclosure.cjs.js +5 -0
  182. package/dist/js/generator/disclosure.cjs.js.map +1 -0
  183. package/dist/js/generator/disclosure.es.js +5 -0
  184. package/dist/js/generator/disclosure.es.js.map +1 -0
  185. package/dist/js/generator/disclosure.iife.js +5 -0
  186. package/dist/js/generator/disclosure.iife.js.map +1 -0
  187. package/dist/js/generator/navigation.cjs.js +3 -0
  188. package/dist/js/generator/navigation.cjs.js.map +1 -0
  189. package/dist/js/generator/navigation.es.js +3 -0
  190. package/dist/js/generator/navigation.es.js.map +1 -0
  191. package/dist/js/generator/navigation.iife.js +3 -0
  192. package/dist/js/generator/navigation.iife.js.map +1 -0
  193. package/dist/js/generator/tabs.cjs.js +5 -0
  194. package/dist/js/generator/tabs.cjs.js.map +1 -0
  195. package/dist/js/generator/tabs.es.js +5 -0
  196. package/dist/js/generator/tabs.es.js.map +1 -0
  197. package/dist/js/generator/tabs.iife.js +5 -0
  198. package/dist/js/generator/tabs.iife.js.map +1 -0
  199. package/dist/js/graupl.js +5 -0
  200. package/dist/js/graupl.js.map +1 -0
  201. package/dist/js/navigation.js +3 -0
  202. package/dist/js/navigation.js.map +1 -0
  203. package/dist/js/storage/initializer.js +3 -0
  204. package/dist/js/storage/initializer.js.map +1 -0
  205. package/dist/js/storage/storage-manager.cjs.js +3 -0
  206. package/dist/js/storage/storage-manager.cjs.js.map +1 -0
  207. package/dist/js/storage/storage-manager.es.js +3 -0
  208. package/dist/js/storage/storage-manager.es.js.map +1 -0
  209. package/dist/js/storage/storage-manager.iife.js +3 -0
  210. package/dist/js/storage/storage-manager.iife.js.map +1 -0
  211. package/dist/js/tabs.js +5 -0
  212. package/dist/js/tabs.js.map +1 -0
  213. package/package.json +59 -49
  214. package/scss/base/button.scss +1 -1
  215. package/scss/base/form.scss +1 -1
  216. package/scss/base/link.scss +1 -1
  217. package/scss/base/table.scss +1 -1
  218. package/scss/base.scss +1 -1
  219. package/scss/component/accordion.scss +1 -1
  220. package/scss/component/alert.scss +1 -1
  221. package/scss/component/badge.scss +3 -0
  222. package/scss/component/breadcrumb.scss +3 -0
  223. package/scss/component/card.scss +1 -1
  224. package/scss/component/carousel.scss +1 -1
  225. package/scss/component/disclosure.scss +3 -0
  226. package/scss/component/input-group.scss +1 -1
  227. package/scss/component/list.scss +1 -1
  228. package/scss/component/menu.scss +1 -1
  229. package/scss/component/navigation.scss +1 -1
  230. package/scss/component/tabs.scss +3 -0
  231. package/scss/component.scss +1 -1
  232. package/scss/graupl.scss +1 -1
  233. package/scss/init.scss +1 -1
  234. package/scss/layout/columns.scss +1 -1
  235. package/scss/layout/container.scss +1 -1
  236. package/scss/layout/flex-columns.scss +1 -1
  237. package/scss/layout.scss +1 -1
  238. package/scss/normalize.scss +1 -1
  239. package/scss/state/focus.scss +1 -1
  240. package/scss/state.scss +1 -1
  241. package/scss/theme/color.scss +1 -1
  242. package/scss/theme/typography.scss +1 -1
  243. package/scss/theme.scss +1 -1
  244. package/scss/utilities/alignment.scss +1 -1
  245. package/scss/utilities/background.scss +1 -1
  246. package/scss/utilities/border.scss +1 -1
  247. package/scss/utilities/color.scss +1 -1
  248. package/scss/utilities/container.scss +3 -0
  249. package/scss/utilities/display.scss +1 -1
  250. package/scss/utilities/flex.scss +1 -1
  251. package/scss/utilities/gradient.scss +1 -1
  252. package/scss/utilities/height.scss +1 -1
  253. package/scss/utilities/inset.scss +1 -1
  254. package/scss/utilities/isolation.scss +3 -0
  255. package/scss/utilities/justification.scss +1 -1
  256. package/scss/utilities/list.scss +1 -1
  257. package/scss/utilities/object.scss +3 -0
  258. package/scss/utilities/order.scss +1 -1
  259. package/scss/utilities/position.scss +3 -0
  260. package/scss/utilities/ratio.scss +1 -1
  261. package/scss/utilities/spacing.scss +1 -1
  262. package/scss/utilities/typography.scss +1 -1
  263. package/scss/utilities/visibility.scss +1 -1
  264. package/scss/utilities/visually-hidden.scss +3 -0
  265. package/scss/utilities/width.scss +1 -1
  266. package/scss/utilities/z-index.scss +3 -0
  267. package/scss/utilities.scss +1 -1
  268. package/.browserslistrc +0 -3
  269. package/.czrc +0 -3
  270. package/.editorconfig +0 -13
  271. package/.github/CODE_OF_CONDUCT.md +0 -73
  272. package/.github/COMMIT_CONVENTION.md +0 -17
  273. package/.github/CONTRIBUTING.md +0 -86
  274. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  275. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  276. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  277. package/.github/SECURITY.md +0 -26
  278. package/.github/dependabot.yml +0 -17
  279. package/.github/pull_request_template.md +0 -5
  280. package/.github/workflows/codeql-analysis.yml +0 -71
  281. package/.github/workflows/docs.yml +0 -59
  282. package/.github/workflows/test.yml +0 -27
  283. package/.husky/commit-msg +0 -3
  284. package/.husky/pre-commit +0 -4
  285. package/.prettierignore +0 -12
  286. package/.stylelintignore +0 -9
  287. package/.versionrc.cjs +0 -61
  288. package/CHANGELOG.md +0 -430
  289. package/build.js +0 -7
  290. package/combine-at-rules.cjs +0 -61
  291. package/commitlint.config.js +0 -5
  292. package/dist/css/utilities/postion.css +0 -2
  293. package/dist/css/utilities/postion.css.map +0 -1
  294. package/dist/js/component/accordion.esm.js +0 -1289
  295. package/dist/js/component/alert.esm.js +0 -529
  296. package/dist/js/component/carousel.esm.js +0 -1110
  297. package/dist/js/graupl.cjs.js +0 -5
  298. package/dist/js/graupl.esm.js +0 -1462
  299. package/dist/js/graupl.iife.js +0 -5
  300. package/docs/.vitepress/config.js +0 -78
  301. package/docs/.vitepress/theme/custom.scss +0 -35
  302. package/docs/.vitepress/theme/index.js +0 -4
  303. package/docs/compiling-graupl.md +0 -56
  304. package/docs/components/alert.md +0 -130
  305. package/docs/components/button.md +0 -84
  306. package/docs/components/card.md +0 -369
  307. package/docs/components/index.md +0 -1
  308. package/docs/components/inputgroup.md +0 -159
  309. package/docs/components/menu.md +0 -326
  310. package/docs/components/navigation.md +0 -158
  311. package/docs/content.md +0 -237
  312. package/docs/defaults.md +0 -121
  313. package/docs/forms.md +0 -79
  314. package/docs/functions.md +0 -9
  315. package/docs/getting-started.md +0 -1
  316. package/docs/index.md +0 -1
  317. package/docs/introduction.md +0 -25
  318. package/docs/layout.md +0 -200
  319. package/docs/mixins.md +0 -47
  320. package/docs/state.md +0 -67
  321. package/docs/theme.md +0 -258
  322. package/docs/utilities.md +0 -357
  323. package/eslint.config.js +0 -74
  324. package/index.html +0 -923
  325. package/index.js +0 -12
  326. package/lint-staged.config.js +0 -6
  327. package/postcss.config.cjs +0 -11
  328. package/prettier.config.js +0 -16
  329. package/scss/utilities/postion.scss +0 -3
  330. package/src/js/accordion/Accordion.js +0 -1163
  331. package/src/js/accordion/AccordionItem.js +0 -496
  332. package/src/js/accordion/index.js +0 -10
  333. package/src/js/alert/Alert.js +0 -581
  334. package/src/js/alert/index.js +0 -11
  335. package/src/js/carousel/Carousel.js +0 -1427
  336. package/src/js/carousel/index.js +0 -10
  337. package/src/js/domHelpers.js +0 -37
  338. package/src/js/eventHandlers.js +0 -39
  339. package/src/js/navigation/index.js +0 -36
  340. package/src/js/storage.js +0 -106
  341. package/src/js/validate.js +0 -225
  342. package/src/scss/_defaults.scss +0 -152
  343. package/src/scss/_index.scss +0 -15
  344. package/src/scss/_init.scss +0 -6
  345. package/src/scss/_normalize.scss +0 -197
  346. package/src/scss/_variables.scss +0 -53
  347. package/src/scss/base/_index.scss +0 -6
  348. package/src/scss/base/button/_defaults.scss +0 -60
  349. package/src/scss/base/button/_index.scss +0 -107
  350. package/src/scss/base/button/_mixins.scss +0 -166
  351. package/src/scss/base/button/_variables.scss +0 -176
  352. package/src/scss/base/form/_defaults.scss +0 -17
  353. package/src/scss/base/form/_index.scss +0 -93
  354. package/src/scss/base/form/_variables.scss +0 -153
  355. package/src/scss/base/link/_defaults.scss +0 -50
  356. package/src/scss/base/link/_index.scss +0 -134
  357. package/src/scss/base/link/_variables.scss +0 -262
  358. package/src/scss/base/table/_defaults.scss +0 -53
  359. package/src/scss/base/table/_index.scss +0 -121
  360. package/src/scss/base/table/_variables.scss +0 -135
  361. package/src/scss/component/_index.scss +0 -10
  362. package/src/scss/component/accordion/_defaults.scss +0 -40
  363. package/src/scss/component/accordion/_index.scss +0 -180
  364. package/src/scss/component/accordion/_variables.scss +0 -316
  365. package/src/scss/component/alert/_defaults.scss +0 -49
  366. package/src/scss/component/alert/_index.scss +0 -118
  367. package/src/scss/component/alert/_variables.scss +0 -170
  368. package/src/scss/component/card/_defaults.scss +0 -32
  369. package/src/scss/component/card/_index.scss +0 -178
  370. package/src/scss/component/card/_variables.scss +0 -186
  371. package/src/scss/component/carousel/_defaults.scss +0 -43
  372. package/src/scss/component/carousel/_index.scss +0 -188
  373. package/src/scss/component/carousel/_variables.scss +0 -104
  374. package/src/scss/component/input-group/_defaults.scss +0 -30
  375. package/src/scss/component/input-group/_index.scss +0 -47
  376. package/src/scss/component/input-group/_variables.scss +0 -66
  377. package/src/scss/component/list/_defaults.scss +0 -15
  378. package/src/scss/component/list/_index.scss +0 -50
  379. package/src/scss/component/list/_variables.scss +0 -176
  380. package/src/scss/component/menu/_defaults.scss +0 -66
  381. package/src/scss/component/menu/_index.scss +0 -305
  382. package/src/scss/component/menu/_variables.scss +0 -500
  383. package/src/scss/component/navigation/_defaults.scss +0 -29
  384. package/src/scss/component/navigation/_index.scss +0 -189
  385. package/src/scss/component/navigation/_variables.scss +0 -237
  386. package/src/scss/functions/_important.scss +0 -13
  387. package/src/scss/functions/_screen.scss +0 -38
  388. package/src/scss/functions/_theme.scss +0 -39
  389. package/src/scss/functions/_utility.scss +0 -28
  390. package/src/scss/layout/_index.scss +0 -5
  391. package/src/scss/layout/columns/_defaults.scss +0 -24
  392. package/src/scss/layout/columns/_index.scss +0 -58
  393. package/src/scss/layout/columns/_variables.scss +0 -51
  394. package/src/scss/layout/container/_defaults.scss +0 -23
  395. package/src/scss/layout/container/_index.scss +0 -43
  396. package/src/scss/layout/container/_variables.scss +0 -50
  397. package/src/scss/layout/flex-columns/_defaults.scss +0 -24
  398. package/src/scss/layout/flex-columns/_index.scss +0 -78
  399. package/src/scss/layout/flex-columns/_variables.scss +0 -26
  400. package/src/scss/mixins/_animation.scss +0 -15
  401. package/src/scss/mixins/_layer.scss +0 -16
  402. package/src/scss/mixins/_screen.scss +0 -77
  403. package/src/scss/mixins/_state.scss +0 -18
  404. package/src/scss/mixins/_theme.scss +0 -15
  405. package/src/scss/mixins/_utility.scss +0 -138
  406. package/src/scss/mixins/_visually-hidden.scss +0 -20
  407. package/src/scss/state/_index.scss +0 -3
  408. package/src/scss/state/focus/_defaults.scss +0 -10
  409. package/src/scss/state/focus/_index.scss +0 -13
  410. package/src/scss/state/focus/_mixins.scss +0 -15
  411. package/src/scss/state/focus/_variables.scss +0 -44
  412. package/src/scss/theme/_index.scss +0 -4
  413. package/src/scss/theme/color/_defaults.scss +0 -143
  414. package/src/scss/theme/color/_index.scss +0 -42
  415. package/src/scss/theme/color/_variables.scss +0 -129
  416. package/src/scss/theme/typography/_defaults.scss +0 -54
  417. package/src/scss/theme/typography/_index.scss +0 -111
  418. package/src/scss/theme/typography/_variables.scss +0 -231
  419. package/src/scss/utilities/_index.scss +0 -20
  420. package/src/scss/utilities/alignment/_defaults.scss +0 -64
  421. package/src/scss/utilities/alignment/_index.scss +0 -168
  422. package/src/scss/utilities/alignment/_variables.scss +0 -6
  423. package/src/scss/utilities/background/_defaults.scss +0 -145
  424. package/src/scss/utilities/background/_index.scss +0 -340
  425. package/src/scss/utilities/background/_variables.scss +0 -6
  426. package/src/scss/utilities/border/_defaults.scss +0 -61
  427. package/src/scss/utilities/border/_index.scss +0 -269
  428. package/src/scss/utilities/border/_variables.scss +0 -6
  429. package/src/scss/utilities/color/_defaults.scss +0 -37
  430. package/src/scss/utilities/color/_index.scss +0 -202
  431. package/src/scss/utilities/color/_variables.scss +0 -6
  432. package/src/scss/utilities/display/_defaults.scss +0 -36
  433. package/src/scss/utilities/display/_index.scss +0 -134
  434. package/src/scss/utilities/display/_variables.scss +0 -6
  435. package/src/scss/utilities/flex/_defaults.scss +0 -87
  436. package/src/scss/utilities/flex/_index.scss +0 -255
  437. package/src/scss/utilities/flex/_variables.scss +0 -6
  438. package/src/scss/utilities/gradient/_defaults.scss +0 -58
  439. package/src/scss/utilities/gradient/_index.scss +0 -380
  440. package/src/scss/utilities/gradient/_variables.scss +0 -29
  441. package/src/scss/utilities/height/_defaults.scss +0 -43
  442. package/src/scss/utilities/height/_index.scss +0 -236
  443. package/src/scss/utilities/height/_variables.scss +0 -6
  444. package/src/scss/utilities/inset/_defaults.scss +0 -43
  445. package/src/scss/utilities/inset/_index.scss +0 -90
  446. package/src/scss/utilities/inset/_variables.scss +0 -6
  447. package/src/scss/utilities/justification/_defaults.scss +0 -61
  448. package/src/scss/utilities/justification/_index.scss +0 -168
  449. package/src/scss/utilities/justification/_variables.scss +0 -6
  450. package/src/scss/utilities/list/_defaults.scss +0 -41
  451. package/src/scss/utilities/list/_index.scss +0 -125
  452. package/src/scss/utilities/list/_variables.scss +0 -6
  453. package/src/scss/utilities/order/_defaults.scss +0 -24
  454. package/src/scss/utilities/order/_index.scss +0 -111
  455. package/src/scss/utilities/order/_variables.scss +0 -6
  456. package/src/scss/utilities/position/_defaults.scss +0 -28
  457. package/src/scss/utilities/position/_index.scss +0 -82
  458. package/src/scss/utilities/position/_variables.scss +0 -6
  459. package/src/scss/utilities/ratio/_defaults.scss +0 -30
  460. package/src/scss/utilities/ratio/_index.scss +0 -91
  461. package/src/scss/utilities/ratio/_variables.scss +0 -9
  462. package/src/scss/utilities/spacing/_defaults.scss +0 -51
  463. package/src/scss/utilities/spacing/_index.scss +0 -382
  464. package/src/scss/utilities/spacing/_variables.scss +0 -6
  465. package/src/scss/utilities/typography/_defaults.scss +0 -46
  466. package/src/scss/utilities/typography/_index.scss +0 -658
  467. package/src/scss/utilities/typography/_variables.scss +0 -6
  468. package/src/scss/utilities/visibility/_defaults.scss +0 -27
  469. package/src/scss/utilities/visibility/_index.scss +0 -82
  470. package/src/scss/utilities/visibility/_variables.scss +0 -6
  471. package/src/scss/utilities/width/_defaults.scss +0 -43
  472. package/src/scss/utilities/width/_index.scss +0 -236
  473. package/src/scss/utilities/width/_variables.scss +0 -6
  474. package/stylelint.config.js +0 -22
  475. package/vite.config.js +0 -57
package/dist/css/component/disclosure.css ADDED
@@ -0,0 +1,2 @@
1
+ @layer graupl.component{.disclosure{display:var(--graupl-disclosure-display,flex);block-size:var(--graupl-disclosure-block-size,0);transition:var(--graupl-disclosure-transition,opacity var(--graupl-disclosure-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-disclosure-transition-timing-function,var(--graupl-transition-timing-function,ease)), block-size var(--graupl-disclosure-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-disclosure-transition-timing-function,var(--graupl-transition-timing-function,ease)));opacity:var(--graupl-disclosure-opacity,var(--graupl-disclosure-hide-opacity,0));overflow:hidden}.disclosure.hide{--graupl-disclosure-display:var(--graupl-disclosure-hide-display,flex);--graupl-disclosure-block-size:var(--graupl-disclosure-hide-block-size,0);--graupl-disclosure-opacity:var(--graupl-disclosure-hide-opacity,0)}.disclosure.transitioning{--graupl-disclosure-display:var(--graupl-disclosure-transitioning-display,flex);--graupl-disclosure-block-size:var(--graupl-disclosure-transitioning-block-size,0);--graupl-disclosure-opacity:var(--graupl-disclosure-transitioning-opacity,0)}.disclosure.show{--graupl-disclosure-display:var(--graupl-disclosure-show-display,flex);--graupl-disclosure-block-size:var(--graupl-disclosure-show-block-size,100%);--graupl-disclosure-opacity:var(--graupl-disclosure-show-opacity,1)}.disclosure-content{padding:var(--graupl-disclosure-content-padding,var(--graupl-disclosure-content-padding-y,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) var(--graupl-disclosure-content-padding-x,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))));border-width:var(--graupl-disclosure-content-border-width,var(--graupl-disclosure-content-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-disclosure-content-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-disclosure-content-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-disclosure-content-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-disclosure-content-border-style,var(--graupl-disclosure-content-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-disclosure-content-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-disclosure-content-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-disclosure-content-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-disclosure-content-border-radius,var(--graupl-disclosure-content-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-disclosure-content-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-disclosure-content-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-disclosure-content-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));flex:auto}.disclosure-toggle{min-width:var(--graupl-button-min-width,44px);min-height:var(--graupl-button-min-height,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))) var(--graupl-button-padding-x,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))));transform:var(--graupl-button-transform,none);transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease), color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease), transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease));border-width:var(--graupl-button-border-width,var(--graupl-button-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-button-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-button-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-button-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-button-border-style,var(--graupl-button-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-button-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-button-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-button-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-button-border-radius,var(--graupl-button-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-button-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-button-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-button-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));font-size:var(--graupl-button-font-size,var(--graupl-font-base,calc(1 * var(--graupl-font-size-base,1rem))));cursor:pointer;justify-content:center;align-items:center;display:flex}.disclosure-toggle:visited,.disclosure-toggle.visited{transform:var(--graupl-button-visited-transform,var(--graupl-button-transform,none))}.disclosure-toggle:focus-visible,.disclosure-toggle.focus{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.disclosure-toggle:hover,.disclosure-toggle.hover{transform:var(--graupl-button-hover-transform,var(--graupl-button-transform,none))}.disclosure-toggle:active,.disclosure-toggle.active{transform:var(--graupl-button-active-transform,scale(.95))}.disclosure-toggle:disabled,.disclosure-toggle:disabled:visited,.disclosure-toggle:disabled.visited,.disclosure-toggle:disabled:focus-visible,.disclosure-toggle:disabled.focus,.disclosure-toggle:disabled:hover,.disclosure-toggle:disabled.hover,.disclosure-toggle:disabled:active,.disclosure-toggle:disabled.active,.disclosure-toggle:disabled[aria-selected=true],.disclosure-toggle:disabled.selected,.disclosure-toggle:disabled[aria-current=true],.disclosure-toggle:disabled.current,.disclosure-toggle[disabled],.disclosure-toggle[disabled]:visited,.disclosure-toggle[disabled].visited,.disclosure-toggle[disabled]:focus-visible,.disclosure-toggle[disabled].focus,.disclosure-toggle[disabled]:hover,.disclosure-toggle[disabled].hover,.disclosure-toggle[disabled]:active,.disclosure-toggle[disabled].active,.disclosure-toggle[disabled][aria-selected=true],.disclosure-toggle[disabled].selected,.disclosure-toggle[disabled][aria-current=true],.disclosure-toggle[disabled].current,.disclosure-toggle[aria-disabled=true],.disclosure-toggle[aria-disabled=true]:visited,.disclosure-toggle[aria-disabled=true].visited,.disclosure-toggle[aria-disabled=true]:focus-visible,.disclosure-toggle[aria-disabled=true].focus,.disclosure-toggle[aria-disabled=true]:hover,.disclosure-toggle[aria-disabled=true].hover,.disclosure-toggle[aria-disabled=true]:active,.disclosure-toggle[aria-disabled=true].active,.disclosure-toggle[aria-disabled=true][aria-selected=true],.disclosure-toggle[aria-disabled=true].selected,.disclosure-toggle[aria-disabled=true][aria-current=true],.disclosure-toggle[aria-disabled=true].current,.disclosure-toggle.disabled,.disclosure-toggle.disabled:visited,.disclosure-toggle.disabled.visited,.disclosure-toggle.disabled:focus-visible,.disclosure-toggle.disabled.focus,.disclosure-toggle.disabled:hover,.disclosure-toggle.disabled.hover,.disclosure-toggle.disabled:active,.disclosure-toggle.disabled.active,.disclosure-toggle.disabled[aria-selected=true],.disclosure-toggle.disabled.selected,.disclosure-toggle.disabled[aria-current=true],.disclosure-toggle.disabled.current{transform:var(--graupl-button-disabled-transform,none)}.disclosure-toggle:disabled,.disclosure-toggle[disabled],.disclosure-toggle[aria-disabled=true],.disclosure-toggle.disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.disclosure-toggle{--graupl-button-transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease), color var(--graupl-transition-timing-function,ease))}}.disclosure-toggle:after{content:var(--graupl-disclosure-toggle-content,"↓");transform:var(--graupl-disclosure-toggle-transform,rotate(0deg));transition:var(--graupl-disclosure-toggle-transition,transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease));display:block}.disclosure-toggle[aria-expanded=true]:after{--graupl-disclosure-toggle-transform:var(--graupl-disclosure-toggle-open-transform,rotate(-180deg))}@media (prefers-reduced-motion:reduce){.disclosure{--graupl-disclosure-transition:var(--graupl-disclosure-transition-reduced-motion,opacity var(--graupl-disclosure-transition-duration,var(--graupl-transition-duration-fast,.15s)) var(--graupl-disclosure-transition-timing-function,var(--graupl-transition-timing-function,ease)))}.disclosure-toggle{--graupl-disclosure-toggle-transition:var(--graupl-disclosure-toggle-transition-reduced-motion,none)}}}@layer graupl.theme{.disclosure{background:var(--graupl-disclosure-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-disclosure-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.disclosure-content{border-color:var(--graupl-disclosure-content-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.disclosure-toggle{border-color:var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.disclosure-toggle:visited,.disclosure-toggle.visited{border-color:var(--graupl-button-visited-border-color,var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-button-visited-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.disclosure-toggle:focus-visible,.disclosure-toggle.focus{border-color:var(--graupl-button-focus-border-color,var(--graupl-button-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-button-focus-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.disclosure-toggle:hover,.disclosure-toggle.hover{border-color:var(--graupl-button-hover-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-button-hover-background,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.disclosure-toggle:active,.disclosure-toggle.active{border-color:var(--graupl-button-active-border-color,var(--graupl-button-hover-border-color,var(--graupl-border-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-button-active-background,var(--graupl-button-hover-background,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.disclosure-toggle:disabled,.disclosure-toggle:disabled:visited,.disclosure-toggle:disabled.visited,.disclosure-toggle:disabled:focus-visible,.disclosure-toggle:disabled.focus,.disclosure-toggle:disabled:hover,.disclosure-toggle:disabled.hover,.disclosure-toggle:disabled:active,.disclosure-toggle:disabled.active,.disclosure-toggle:disabled[aria-selected=true],.disclosure-toggle:disabled.selected,.disclosure-toggle:disabled[aria-current=true],.disclosure-toggle:disabled.current,.disclosure-toggle[disabled],.disclosure-toggle[disabled]:visited,.disclosure-toggle[disabled].visited,.disclosure-toggle[disabled]:focus-visible,.disclosure-toggle[disabled].focus,.disclosure-toggle[disabled]:hover,.disclosure-toggle[disabled].hover,.disclosure-toggle[disabled]:active,.disclosure-toggle[disabled].active,.disclosure-toggle[disabled][aria-selected=true],.disclosure-toggle[disabled].selected,.disclosure-toggle[disabled][aria-current=true],.disclosure-toggle[disabled].current,.disclosure-toggle[aria-disabled=true],.disclosure-toggle[aria-disabled=true]:visited,.disclosure-toggle[aria-disabled=true].visited,.disclosure-toggle[aria-disabled=true]:focus-visible,.disclosure-toggle[aria-disabled=true].focus,.disclosure-toggle[aria-disabled=true]:hover,.disclosure-toggle[aria-disabled=true].hover,.disclosure-toggle[aria-disabled=true]:active,.disclosure-toggle[aria-disabled=true].active,.disclosure-toggle[aria-disabled=true][aria-selected=true],.disclosure-toggle[aria-disabled=true].selected,.disclosure-toggle[aria-disabled=true][aria-current=true],.disclosure-toggle[aria-disabled=true].current,.disclosure-toggle.disabled,.disclosure-toggle.disabled:visited,.disclosure-toggle.disabled.visited,.disclosure-toggle.disabled:focus-visible,.disclosure-toggle.disabled.focus,.disclosure-toggle.disabled:hover,.disclosure-toggle.disabled.hover,.disclosure-toggle.disabled:active,.disclosure-toggle.disabled.active,.disclosure-toggle.disabled[aria-selected=true],.disclosure-toggle.disabled.selected,.disclosure-toggle.disabled[aria-current=true],.disclosure-toggle.disabled.current{border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.disclosure-toggle.primary{--graupl-button-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.disclosure-toggle.secondary{--graupl-button-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.disclosure-toggle.tertiary{--graupl-button-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}}
2
+ /*# sourceMappingURL=disclosure.css.map */
package/dist/css/component/disclosure.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,wBC+HF,qoBAQE,sOAOA,0QAOA,yOAQF,k5DASA,q0EIhJI,2IAAA,6IAAA,qIAAA,+GAAA,2lEFIF,+IGxBF,uCLoKA,4MAGE,wTAOA,iJK9KF,uCLoLE,iSAIA,0HD1LA,oBCkMF,4aAMA,2QAKA,spBIvLI,8yBAAA,4yBAAA,usBAAA,2zBAAA,6kFESF,+hCAAA,2kCAAA","sources":["dist/css/component/disclosure.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/component/disclosure/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/component/disclosure/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/button/_mixins.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/base/button/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_state.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_animation.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":["@charset \"UTF-8\";\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.component {\n .disclosure {\n display: var(--graupl-disclosure-display, flex);\n block-size: var(--graupl-disclosure-block-size, 0);\n overflow: hidden;\n transition: var(--graupl-disclosure-transition, opacity var(--graupl-disclosure-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-disclosure-transition-timing-function, var(--graupl-transition-timing-function, ease)), block-size var(--graupl-disclosure-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-disclosure-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n opacity: var(--graupl-disclosure-opacity, var(--graupl-disclosure-hide-opacity, 0));\n }\n .disclosure.hide {\n --graupl-disclosure-display: var(--graupl-disclosure-hide-display, flex);\n --graupl-disclosure-block-size: var(--graupl-disclosure-hide-block-size, 0);\n --graupl-disclosure-opacity: var(--graupl-disclosure-hide-opacity, 0);\n }\n .disclosure.transitioning {\n --graupl-disclosure-display: var(--graupl-disclosure-transitioning-display, flex);\n --graupl-disclosure-block-size: var(--graupl-disclosure-transitioning-block-size, 0);\n --graupl-disclosure-opacity: var(--graupl-disclosure-transitioning-opacity, 0);\n }\n .disclosure.show {\n --graupl-disclosure-display: var(--graupl-disclosure-show-display, flex);\n --graupl-disclosure-block-size: var(--graupl-disclosure-show-block-size, 100%);\n --graupl-disclosure-opacity: var(--graupl-disclosure-show-opacity, 1);\n }\n .disclosure-content {\n flex: 1 1 auto;\n padding: var(--graupl-disclosure-content-padding, var(--graupl-disclosure-content-padding-y, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-disclosure-content-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-disclosure-content-border-width, var(--graupl-disclosure-content-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-disclosure-content-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-disclosure-content-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-disclosure-content-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-disclosure-content-border-style, var(--graupl-disclosure-content-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-disclosure-content-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-disclosure-content-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-disclosure-content-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-disclosure-content-border-radius, var(--graupl-disclosure-content-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-disclosure-content-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-disclosure-content-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-disclosure-content-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n .disclosure-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--graupl-button-min-width, 44px);\n min-height: var(--graupl-button-min-height, 44px);\n padding: var(--graupl-button-padding, var(--graupl-button-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-button-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-button-transform, none);\n transition: var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-button-border-width, var(--graupl-button-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-button-border-style, var(--graupl-button-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-button-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-button-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-button-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-button-border-radius, var(--graupl-button-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-button-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n cursor: pointer;\n }\n .disclosure-toggle:visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .disclosure-toggle.visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .disclosure-toggle:focus-visible {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .disclosure-toggle.focus {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .disclosure-toggle:hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .disclosure-toggle.hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .disclosure-toggle:active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .disclosure-toggle.active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .disclosure-toggle:disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[disabled].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle[aria-disabled=true].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle.disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .disclosure-toggle:disabled {\n cursor: not-allowed;\n }\n .disclosure-toggle[disabled] {\n cursor: not-allowed;\n }\n .disclosure-toggle[aria-disabled=true] {\n cursor: not-allowed;\n }\n .disclosure-toggle.disabled {\n cursor: not-allowed;\n }\n @media (prefers-reduced-motion: reduce) {\n .disclosure-toggle {\n --graupl-button-transition: var(--graupl-button-transition-reduced-motion, background var(--graupl-transition-timing-function, ease), color var(--graupl-transition-timing-function, ease));\n }\n }\n .disclosure-toggle::after {\n content: var(--graupl-disclosure-toggle-content, '↓');\n display: block;\n transform: var(--graupl-disclosure-toggle-transform, rotate(0deg));\n transition: var(--graupl-disclosure-toggle-transition, transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n }\n .disclosure-toggle[aria-expanded=true]::after {\n --graupl-disclosure-toggle-transform: var(--graupl-disclosure-toggle-open-transform, rotate(-180deg));\n }\n @media (prefers-reduced-motion: reduce) {\n .disclosure {\n --graupl-disclosure-transition: var(--graupl-disclosure-transition-reduced-motion, opacity var(--graupl-disclosure-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-disclosure-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n }\n .disclosure-toggle {\n --graupl-disclosure-toggle-transition: var(--graupl-disclosure-toggle-transition-reduced-motion, none);\n }\n }\n}\n@layer graupl.theme {\n .disclosure {\n background: var(--graupl-disclosure-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-disclosure-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n .disclosure-content {\n border-color: var(--graupl-disclosure-content-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .disclosure-toggle {\n border-color: var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n .disclosure-toggle:visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-visited-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .disclosure-toggle.visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-visited-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .disclosure-toggle:focus-visible {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-focus-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .disclosure-toggle.focus {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-focus-background, var(--graupl-button-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .disclosure-toggle:hover {\n border-color: var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n .disclosure-toggle.hover {\n border-color: var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n .disclosure-toggle:active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-active-background, var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .disclosure-toggle.active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-button-active-background, var(--graupl-button-hover-background, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .disclosure-toggle:disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle:disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[disabled].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle[aria-disabled=true].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .disclosure-toggle.primary {\n --graupl-button-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n .disclosure-toggle.secondary {\n --graupl-button-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n .disclosure-toggle.tertiary {\n --graupl-button-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-button-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: root-defaults.$root-selector-base !default;\n$root-selector: root-defaults.$root-selector !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$emphasis-selector-base: $selector-base !default;\n$emphasis-selector: \"em\" !default;\n$italic-selector-base: $selector-base !default;\n$italic-selector: \"i\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$root-line-height: 1.2em !default;\n$root-letter-spacing: normal !default;\n$root-word-spacing: normal !default;\n$root-font-style: normal !default;\n$root-font-variant: normal !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core disclosure component base styles.\n//\n// This module provides the disclosure component styles, wiring together the\n// container, content panel, and toggle control layers.\n//\n// The disclosure component exposes CSS custom properties for display, block\n// sizing, opacity, and transitions so that the open, closed, and transitioning\n// states can be themed without rewriting the core selectors. The toggle control\n// shares the base button styles to keep interactive affordances consistent.\n//\n// The following selectors are generated by default:\n// - `.disclosure`: The disclosure root container that manages layout, overflow, and transitions.\n// - `.disclosure.hide`: A modifier that forces the disclosure container into the closed state.\n// - `.disclosure.transitioning`: A modifier that applies the transitioning state to the container.\n// - `.disclosure.show`: A modifier that forces the disclosure container into the open state.\n// - `.disclosure-content`: The disclosure content wrapper that receives padding and border styles.\n// - `.disclosure-toggle`: The disclosure toggle control that inherits the button base styles.\n//\n// The following custom properties can be used to customize the disclosure component:\n// | Property | Description | Default Value |\n// | -------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-disclosure-color` | Value for color. | `var(--graupl-color)` |\n// | `--graupl-disclosure-background` | Value for background. | `var(--graupl-background)` |\n// | `--graupl-disclosure-content-border-color` | Value for content border color. | `var(--graupl-border-color)` |\n// | `--graupl-disclosure-content-padding-x` | Value for content padding (horizontal). | `var(--graupl-spacer-5)` |\n// | `--graupl-disclosure-content-padding-y` | Value for content padding (vertical). | `var(--graupl-spacer-5)` |\n// | `--graupl-disclosure-content-padding` | Value for content padding. | `var(--graupl-disclosure-content-padding-y) var(--graupl-disclosure-content-padding-x)` |\n// | `--graupl-disclosure-show-display` | Value for show display. | `flex` |\n// | `--graupl-disclosure-hide-display` | Value for hide display. | `flex` |\n// | `--graupl-disclosure-transitioning-display` | Value for transitioning display. | `flex` |\n// | `--graupl-disclosure-display` | Value for display. | `flex` |\n// | `--graupl-disclosure-show-block-size` | Value for show block size. | `100%` |\n// | `--graupl-disclosure-hide-block-size` | Value for hide block size. | `0` |\n// | `--graupl-disclosure-transitioning-block-size` | Value for transitioning block size. | `0` |\n// | `--graupl-disclosure-block-size` | Value for block size. | `0` |\n// | `--graupl-disclosure-show-opacity` | Value for show opacity. | `1` |\n// | `--graupl-disclosure-hide-opacity` | Value for hide opacity. | `0` |\n// | `--graupl-disclosure-transitioning-opacity` | Value for transitioning opacity. | `0` |\n// | `--graupl-disclosure-opacity` | Value for opacity. | `0` |\n// | `--graupl-disclosure-transition-duration` | Value for transition duration. | `var(--graupl-transition-duration-fast)` |\n// | `--graupl-disclosure-transition-timing-function` | Value for transition timing function. | `var(--graupl-transition-timing-function)` |\n// | `--graupl-disclosure-transition` | Value for transition. | `opacity var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function), block-size var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function)` |\n// | `--graupl-disclosure-transition-reduced-motion` | Value for transition reduced motion. | `opacity var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function)` |\n// | `--graupl-disclosure-content-border-top-width` | Value for content border top width. | `var(--graupl-border-top-width)` |\n// | `--graupl-disclosure-content-border-right-width` | Value for content border right width. | `var(--graupl-border-right-width)` |\n// | `--graupl-disclosure-content-border-bottom-width` | Value for content border bottom width. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-disclosure-content-border-left-width` | Value for content border left width. | `var(--graupl-border-left-width)` |\n// | `--graupl-disclosure-content-border-width` | Value for content border width. | `var(--graupl-disclosure-content-border-top-width) var(--graupl-disclosure-content-border-right-width) var(--graupl-disclosure-content-border-bottom-width) var(--graupl-disclosure-content-border-left-width)` |\n// | `--graupl-disclosure-content-border-top-style` | Value for content border top style. | `var(--graupl-border-top-style)` |\n// | `--graupl-disclosure-content-border-right-style` | Value for content border right style. | `var(--graupl-border-right-style)` |\n// | `--graupl-disclosure-content-border-bottom-style` | Value for content border bottom style. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-disclosure-content-border-left-style` | Value for content border left style. | `var(--graupl-border-left-style)` |\n// | `--graupl-disclosure-content-border-style` | Value for content border style. | `var(--graupl-disclosure-content-border-top-style) var(--graupl-disclosure-content-border-right-style) var(--graupl-disclosure-content-border-bottom-style) var(--graupl-disclosure-content-border-left-style)` |\n// | `--graupl-disclosure-content-border-top-left-radius` | Value for content border top left radius. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-disclosure-content-border-top-right-radius` | Value for content border top right radius. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-disclosure-content-border-bottom-right-radius` | Value for content border bottom right radius. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-disclosure-content-border-bottom-left-radius` | Value for content border bottom left radius. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-disclosure-content-border-radius` | Value for content border radius. | `var(--graupl-disclosure-content-border-top-left-radius) var(--graupl-disclosure-content-border-top-right-radius) var(--graupl-disclosure-content-border-bottom-right-radius) var(--graupl-disclosure-content-border-bottom-left-radius)` |\n// | `--graupl-disclosure-toggle-transform` | Value for toggle transform. | `rotate(0deg)` |\n// | `--graupl-disclosure-toggle-open-transform` | Value for toggle open transform. | `rotate(-180deg)` |\n// | `--graupl-disclosure-toggle-content` | Value for toggle content. | `\"'↓'\"` |\n// | `--graupl-disclosure-toggle-transition` | Value for toggle transition. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-disclosure-toggle-transition-reduced-motion` | Value for toggle transition reduced motion. | `none` |\n//\n// The following Sass variables can be used to customize selectors and defaults:\n// | Variable | Description | Default Value |\n// | ----------------------------------------- | --------------------------------------------------- | ---------------------------------------- |\n// | `$selector-base` | Default for selector base. | `\".\"` |\n// | `$modifier-selector-base` | Default for modifier selector base. | `\".\"` |\n// | `$disclosure-selector-base` | Default for disclosure selector base. | `\".\"` |\n// | `$disclosure-selector` | Default for disclosure selector. | `\"disclosure\"` |\n// | `$disclosure-content-selector-base` | Default for disclosure content selector base. | `\".\"` |\n// | `$disclosure-content-selector` | Default for disclosure content selector. | `\"disclosure-content\"` |\n// | `$disclosure-toggle-selector-base` | Default for disclosure toggle selector base. | `\".\"` |\n// | `$disclosure-toggle-selector` | Default for disclosure toggle selector. | `\"disclosure-toggle\"` |\n// | `$disclosure-open-selector-base` | Default for disclosure open selector base. | `\".\"` |\n// | `$disclosure-open-selector` | Default for disclosure open selector. | `\"show\"` |\n// | `$disclosure-closed-selector-base` | Default for disclosure closed selector base. | `\".\"` |\n// | `$disclosure-closed-selector` | Default for disclosure closed selector. | `\"hide\"` |\n// | `$disclosure-transitioning-selector-base` | Default for disclosure transitioning selector base. | `\".\"` |\n// | `$disclosure-transitioning-selector` | Default for disclosure transitioning selector. | `\"transitioning\"` |\n// | `$disclosure-show-display` | Default for disclosure show display. | `flex` |\n// | `$disclosure-hide-display` | Default for disclosure hide display. | `flex` |\n// | `$disclosure-transitioning-display` | Default for disclosure transitioning display. | `flex` |\n// | `$disclosure-show-block-size` | Default for disclosure show block size. | `100%` |\n// | `$disclosure-hide-block-size` | Default for disclosure hide block size. | `0` |\n// | `$disclosure-transitioning-block-size` | Default for disclosure transitioning block size. | `0` |\n// | `$disclosure-show-opacity` | Default for disclosure show opacity. | `1` |\n// | `$disclosure-hide-opacity` | Default for disclosure hide opacity. | `0` |\n// | `$disclosure-transitioning-opacity` | Default for disclosure transitioning opacity. | `0` |\n// | `$disclosure-toggle-content` | Default for disclosure toggle content. | `\"'↓'\"` |\n// | `$disclosure-toggle-transform` | Default for disclosure toggle transform. | `rotate(0deg)` |\n// | `$disclosure-toggle-open-transform` | Default for disclosure toggle open transform. | `rotate(-180deg)` |\n//\n// @example\n// <button\n// class=\"disclosure-toggle primary\"\n// type=\"button\"\n// aria-expanded=\"false\"\n// aria-controls=\"disclosure-example\"\n// data-graupl-disclosure-target=\"#disclosure-example\"\n// >\n// Toggle details\n// </button>\n// <div id=\"disclosure-example\" class=\"disclosure\">\n// <div class=\"disclosure-content\">\n// <p>This content is hidden until the disclosure is open.</p>\n// </div>\n// </div>\n//\n// @example\n// <button\n// class=\"disclosure-toggle primary\"\n// type=\"button\"\n// aria-expanded=\"true\"\n// aria-controls=\"disclosure-example-open\"\n// data-graupl-disclosure-target=\"#disclosure-example-open\"\n// >\n// Toggle details\n// </button>\n// <div id=\"disclosure-example-open\" class=\"disclosure show\">\n// <div class=\"disclosure-content\">\n// <p>This content is visible when the disclosure has the `.show` modifier.</p>\n// <p><a href=\"#\">Links and inline content</a> keep their default styling.</p>\n// </div>\n// </div>\n\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/animation\";\n@use \"../../defaults\" as root-defaults;\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"../../base/button/mixins\" as button-mixins;\n\n@include layer(component) {\n // .disclosure\n #{defaults.$disclosure-selector-base}#{defaults.$disclosure-selector} {\n display: $disclosure-display;\n block-size: $disclosure-block-size;\n overflow: hidden;\n transition: $disclosure-transition;\n opacity: $disclosure-opacity;\n\n // &.hide\n &#{defaults.$disclosure-closed-selector-base}#{defaults.$disclosure-closed-selector} {\n --#{root-defaults.$prefix}disclosure-display: #{$disclosure-hide-display};\n --#{root-defaults.$prefix}disclosure-block-size: #{$disclosure-hide-block-size};\n --#{root-defaults.$prefix}disclosure-opacity: #{$disclosure-hide-opacity};\n }\n\n // &.transitioning\n &#{defaults.$disclosure-transitioning-selector-base}#{defaults.$disclosure-transitioning-selector} {\n --#{root-defaults.$prefix}disclosure-display: #{$disclosure-transitioning-display};\n --#{root-defaults.$prefix}disclosure-block-size: #{$disclosure-transitioning-block-size};\n --#{root-defaults.$prefix}disclosure-opacity: #{$disclosure-transitioning-opacity};\n }\n\n // &.show\n &#{defaults.$disclosure-open-selector-base}#{defaults.$disclosure-open-selector} {\n --#{root-defaults.$prefix}disclosure-display: #{$disclosure-show-display};\n --#{root-defaults.$prefix}disclosure-block-size: #{$disclosure-show-block-size};\n --#{root-defaults.$prefix}disclosure-opacity: #{$disclosure-show-opacity};\n }\n }\n\n // .disclosure-content\n #{defaults.$disclosure-content-selector-base}#{defaults.$disclosure-content-selector} {\n flex: 1 1 auto;\n padding: $disclosure-content-padding;\n border-width: $disclosure-content-border-width;\n border-style: $disclosure-content-border-style;\n border-radius: $disclosure-content-border-radius;\n }\n\n // .disclosure-toggle.\n #{defaults.$disclosure-toggle-selector-base}#{defaults.$disclosure-toggle-selector} {\n @include button-mixins.apply-base;\n\n &::after {\n content: $disclosure-toggle-content;\n display: block;\n transform: $disclosure-toggle-transform;\n transition: $disclosure-toggle-transition;\n }\n\n &[aria-expanded=\"true\"]::after {\n --#{root-defaults.$prefix}disclosure-toggle-transform: #{$disclosure-toggle-open-transform};\n }\n }\n\n @include animation.off {\n #{defaults.$disclosure-selector-base}#{defaults.$disclosure-selector} {\n --#{root-defaults.$prefix}disclosure-transition: #{$disclosure-transition-reduced-motion};\n }\n\n #{defaults.$disclosure-toggle-selector-base}#{defaults.$disclosure-toggle-selector} {\n --#{root-defaults.$prefix}disclosure-toggle-transition: #{$disclosure-toggle-transition-reduced-motion};\n }\n }\n}\n\n@include layer(theme) {\n // .disclosure\n #{defaults.$disclosure-selector-base}#{defaults.$disclosure-selector} {\n background: $disclosure-background;\n color: $disclosure-color;\n }\n\n // .disclosure-content\n #{defaults.$disclosure-content-selector-base}#{defaults.$disclosure-content-selector} {\n border-color: $disclosure-content-border-color;\n }\n\n // .disclosure-toggle\n #{defaults.$disclosure-toggle-selector-base}#{defaults.$disclosure-toggle-selector} {\n @include button-mixins.apply-theme;\n }\n}\n","// @graupl/core disclosure component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-disclosure-color | var(--graupl-color) |\n// | --graupl-disclosure-background | var(--graupl-background) |\n// | --graupl-disclosure-content-border-color | var(--graupl-border-color) |\n// | --graupl-disclosure-content-padding-x | var(--graupl-spacer-5) |\n// | --graupl-disclosure-content-padding-y | var(--graupl-spacer-5) |\n// | --graupl-disclosure-content-padding | var(--graupl-disclosure-content-padding-y) var(--graupl-disclosure-content-padding-x) |\n// | --graupl-disclosure-show-display | flex |\n// | --graupl-disclosure-hide-display | flex |\n// | --graupl-disclosure-transitioning-display | flex |\n// | --graupl-disclosure-display | flex |\n// | --graupl-disclosure-show-block-size | 100% |\n// | --graupl-disclosure-hide-block-size | 0 |\n// | --graupl-disclosure-transitioning-block-size | 0 |\n// | --graupl-disclosure-block-size | 0 |\n// | --graupl-disclosure-show-opacity | 1 |\n// | --graupl-disclosure-hide-opacity | 0 |\n// | --graupl-disclosure-transitioning-opacity | 0 |\n// | --graupl-disclosure-opacity | 0 |\n// | --graupl-disclosure-transition-duration | var(--graupl-transition-duration-fast) |\n// | --graupl-disclosure-transition-timing-function | var(--graupl-transition-timing-function) |\n// | --graupl-disclosure-transition | opacity var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function), block-size var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function) |\n// | --graupl-disclosure-transition-reduced-motion | opacity var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function) |\n// | --graupl-disclosure-content-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-disclosure-content-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-disclosure-content-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-disclosure-content-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-disclosure-content-border-width | var(--graupl-disclosure-content-border-top-width) var(--graupl-disclosure-content-border-right-width) var(--graupl-disclosure-content-border-bottom-width) var(--graupl-disclosure-content-border-left-width) |\n// | --graupl-disclosure-content-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-disclosure-content-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-disclosure-content-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-disclosure-content-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-disclosure-content-border-style | var(--graupl-disclosure-content-border-top-style) var(--graupl-disclosure-content-border-right-style) var(--graupl-disclosure-content-border-bottom-style) var(--graupl-disclosure-content-border-left-style) |\n// | --graupl-disclosure-content-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-disclosure-content-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-disclosure-content-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-disclosure-content-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-disclosure-content-border-radius | var(--graupl-disclosure-content-border-top-left-radius) var(--graupl-disclosure-content-border-top-right-radius) var(--graupl-disclosure-content-border-bottom-right-radius) var(--graupl-disclosure-content-border-bottom-left-radius) |\n// | --graupl-disclosure-toggle-transform | rotate(0deg) |\n// | --graupl-disclosure-toggle-open-transform | rotate(-180deg) |\n// | --graupl-disclosure-toggle-content | \"'↓'\" |\n// | --graupl-disclosure-toggle-transition | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-disclosure-toggle-transition-reduced-motion | none |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"../../theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Color properties.\n// --graupl-disclosure-color\n$disclosure-color: var(\n --#{root-defaults.$prefix}disclosure-color,\n #{color.$color}\n);\n\n// --graupl-disclosure-background\n$disclosure-background: var(\n --#{root-defaults.$prefix}disclosure-background,\n #{color.$background}\n);\n\n// --graupl-disclosure-content-border-color\n$disclosure-content-border-color: var(\n --#{root-defaults.$prefix}disclosure-content-border-color,\n #{color.$border-color}\n);\n\n// Spacing properties.\n// --graupl-disclosure-content-padding-x\n$disclosure-content-padding-x: var(\n --#{root-defaults.$prefix}disclosure-content-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-disclosure-content-padding-y\n$disclosure-content-padding-y: var(\n --#{root-defaults.$prefix}disclosure-content-padding-y,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-disclosure-content-padding\n$disclosure-content-padding: var(\n --#{root-defaults.$prefix}disclosure-content-padding,\n #{$disclosure-content-padding-y} #{$disclosure-content-padding-x}\n);\n\n// Display properties.\n// --graupl-disclosure-show-display\n$disclosure-show-display: var(\n --#{root-defaults.$prefix}disclosure-show-display,\n #{defaults.$disclosure-show-display}\n);\n\n// --graupl-disclosure-hide-display\n$disclosure-hide-display: var(\n --#{root-defaults.$prefix}disclosure-hide-display,\n #{defaults.$disclosure-hide-display}\n);\n\n// --graupl-disclosure-transitioning-display\n$disclosure-transitioning-display: var(\n --#{root-defaults.$prefix}disclosure-transitioning-display,\n #{defaults.$disclosure-transitioning-display}\n);\n\n// --graupl-disclosure-display\n$disclosure-display: var(\n --#{root-defaults.$prefix}disclosure-display,\n #{defaults.$disclosure-hide-display}\n);\n\n// Block-size properties.\n// --graupl-disclosure-show-block-size\n$disclosure-show-block-size: var(\n --#{root-defaults.$prefix}disclosure-show-block-size,\n #{defaults.$disclosure-show-block-size}\n);\n\n// --graupl-disclosure-hide-block-size\n$disclosure-hide-block-size: var(\n --#{root-defaults.$prefix}disclosure-hide-block-size,\n #{defaults.$disclosure-hide-block-size}\n);\n\n// --graupl-disclosure-transitioning-block-size\n$disclosure-transitioning-block-size: var(\n --#{root-defaults.$prefix}disclosure-transitioning-block-size,\n #{defaults.$disclosure-transitioning-block-size}\n);\n\n// --graupl-disclosure-block-size\n$disclosure-block-size: var(\n --#{root-defaults.$prefix}disclosure-block-size,\n #{defaults.$disclosure-hide-block-size}\n);\n\n// Opacity properties.\n// --graupl-disclosure-show-opacity\n$disclosure-show-opacity: var(\n --#{root-defaults.$prefix}disclosure-show-opacity,\n #{defaults.$disclosure-show-opacity}\n);\n\n// --graupl-disclosure-hide-opacity\n$disclosure-hide-opacity: var(\n --#{root-defaults.$prefix}disclosure-hide-opacity,\n #{defaults.$disclosure-hide-opacity}\n);\n\n// --graupl-disclosure-transitioning-opacity\n$disclosure-transitioning-opacity: var(\n --#{root-defaults.$prefix}disclosure-transitioning-opacity,\n #{defaults.$disclosure-transitioning-opacity}\n);\n\n// --graupl-disclosure-opacity\n$disclosure-opacity: var(\n --#{root-defaults.$prefix}disclosure-opacity,\n #{$disclosure-hide-opacity}\n);\n\n// Transition properties.\n// --graupl-disclosure-transition-duration\n$disclosure-transition-duration: var(\n --#{root-defaults.$prefix}disclosure-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n\n// --graupl-disclosure-transition-timing-function\n$disclosure-transition-timing-function: var(\n --#{root-defaults.$prefix}disclosure-transition-timing-function,\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-disclosure-transition\n$disclosure-transition: var(\n --#{root-defaults.$prefix}disclosure-transition,\n opacity #{$disclosure-transition-duration}\n #{$disclosure-transition-timing-function},\n block-size #{$disclosure-transition-duration}\n #{$disclosure-transition-timing-function}\n);\n\n// --graupl-disclosure-transition-reduced-motion\n$disclosure-transition-reduced-motion: var(\n --#{root-defaults.$prefix}disclosure-transition-reduced-motion,\n opacity #{$disclosure-transition-duration}\n #{$disclosure-transition-timing-function}\n);\n\n// Border properties.\n// --graupl-disclosure-content-border-top-width\n$disclosure-content-border-top-width: var(\n --#{root-defaults.$prefix}disclosure-content-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-disclosure-content-border-right-width\n$disclosure-content-border-right-width: var(\n --#{root-defaults.$prefix}disclosure-content-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-disclosure-content-border-bottom-width\n$disclosure-content-border-bottom-width: var(\n --#{root-defaults.$prefix}disclosure-content-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-disclosure-content-border-left-width\n$disclosure-content-border-left-width: var(\n --#{root-defaults.$prefix}disclosure-content-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-disclosure-content-border-width\n$disclosure-content-border-width: var(\n --#{root-defaults.$prefix}disclosure-content-border-width,\n #{$disclosure-content-border-top-width}\n #{$disclosure-content-border-right-width}\n #{$disclosure-content-border-bottom-width}\n #{$disclosure-content-border-left-width}\n);\n\n// --graupl-disclosure-content-border-top-style\n$disclosure-content-border-top-style: var(\n --#{root-defaults.$prefix}disclosure-content-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-disclosure-content-border-right-style\n$disclosure-content-border-right-style: var(\n --#{root-defaults.$prefix}disclosure-content-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-disclosure-content-border-bottom-style\n$disclosure-content-border-bottom-style: var(\n --#{root-defaults.$prefix}disclosure-content-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-disclosure-content-border-left-style\n$disclosure-content-border-left-style: var(\n --#{root-defaults.$prefix}disclosure-content-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-disclosure-content-border-style\n$disclosure-content-border-style: var(\n --#{root-defaults.$prefix}disclosure-content-border-style,\n #{$disclosure-content-border-top-style}\n #{$disclosure-content-border-right-style}\n #{$disclosure-content-border-bottom-style}\n #{$disclosure-content-border-left-style}\n);\n\n// --graupl-disclosure-content-border-top-left-radius\n$disclosure-content-border-top-left-radius: var(\n --#{root-defaults.$prefix}disclosure-content-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-disclosure-content-border-top-right-radius\n$disclosure-content-border-top-right-radius: var(\n --#{root-defaults.$prefix}disclosure-content-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-disclosure-content-border-bottom-right-radius\n$disclosure-content-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}disclosure-content-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-disclosure-content-border-bottom-left-radius\n$disclosure-content-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}disclosure-content-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-disclosure-content-border-radius\n$disclosure-content-border-radius: var(\n --#{root-defaults.$prefix}disclosure-content-border-radius,\n #{$disclosure-content-border-top-left-radius}\n #{$disclosure-content-border-top-right-radius}\n #{$disclosure-content-border-bottom-right-radius}\n #{$disclosure-content-border-bottom-left-radius}\n);\n\n// Disclosure toggle properties.\n// --graupl-disclosure-toggle-transform\n$disclosure-toggle-transform: var(\n --#{root-defaults.$prefix}disclosure-toggle-transform,\n #{defaults.$disclosure-toggle-transform}\n);\n\n// --graupl-disclosure-toggle-open-transform\n$disclosure-toggle-open-transform: var(\n --#{root-defaults.$prefix}disclosure-toggle-open-transform,\n #{defaults.$disclosure-toggle-open-transform}\n);\n\n// --graupl-disclosure-toggle-content\n$disclosure-toggle-content: var(\n --#{root-defaults.$prefix}disclosure-toggle-content,\n #{defaults.$disclosure-toggle-content}\n);\n\n// --graupl-disclosure-toggle-transition\n$disclosure-toggle-transition: var(\n --#{root-defaults.$prefix}disclosure-toggle-transition,\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-disclosure-toggle-transition-reduced-motion\n$disclosure-toggle-transition-reduced-motion: var(\n --#{root-defaults.$prefix}disclosure-toggle-transition-reduced-motion,\n none\n);\n","// @graupl/core button base mixins.\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/animation\";\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n@use \"sass:map\";\n\n/// Mixin to apply base styles for buttons.\n@mixin apply-base() {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: $button-min-width;\n min-height: $button-min-height;\n padding: $button-padding;\n transform: $button-transform;\n transition: $button-transition;\n border-width: $button-border-width;\n border-style: $button-border-style;\n border-radius: $button-border-radius;\n font-size: $button-font-size;\n cursor: pointer;\n\n @include state.generate-modifiers(\n (\n transform: $button-transform-states,\n )\n );\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n &#{$selector} {\n cursor: not-allowed;\n }\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}button-transition: #{$button-transition-reduced-motion};\n }\n}\n\n/// Mixin to apply theme styles for buttons.\n@mixin apply-theme() {\n border-color: $button-border-color;\n background: $button-background;\n color: $button-color;\n\n @include state.generate-modifiers(\n (\n border-color: $button-border-color-states,\n background: $button-background-states,\n color: $button-color-states,\n )\n );\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$button-theme-map,\n defaults.$button-theme-selector-base,\n defaults.$button-theme-selector-prefix,\n \"button-\"\n );\n }\n}\n\n@mixin apply() {\n @include apply-base;\n @include apply-theme;\n}\n","// @graupl/core button base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-button-min-width | 44px |\n// | --graupl-button-min-height | 44px |\n// | --graupl-button-padding-x | var(--graupl-spacer-5) |\n// | --graupl-button-padding-y | var(--graupl-spacer-3) |\n// | --graupl-button-padding | var(--graupl-button-padding-y) var(--graupl-button-padding-x) |\n// | --graupl-button-font-size | var(--graupl-font-base) |\n// | --graupl-button-transition | background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-button-transition-reduced-motion | background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function) |\n// | --graupl-button-transform | none |\n// | --graupl-button-visited-transform | var(--graupl-button-transform) |\n// | --graupl-button-focus-transform | var(--graupl-button-transform) |\n// | --graupl-button-hover-transform | var(--graupl-button-transform) |\n// | --graupl-button-active-transform | scale(0.95) |\n// | --graupl-button-disabled-transform | none |\n// | --graupl-button-background | var(--graupl-background) |\n// | --graupl-button-visited-background | var(--graupl-button-background) |\n// | --graupl-button-focus-background | var(--graupl-button-background) |\n// | --graupl-button-hover-background | var(--graupl-color) |\n// | --graupl-button-active-background | var(--graupl-button-hover-background) |\n// | --graupl-button-disabled-background | var(--graupl-background) |\n// | --graupl-button-color | var(--graupl-color) |\n// | --graupl-button-visited-color | var(--graupl-button-color) |\n// | --graupl-button-focus-color | var(--graupl-button-color) |\n// | --graupl-button-hover-color | var(--graupl-background) |\n// | --graupl-button-active-color | var(--graupl-button-hover-color) |\n// | --graupl-button-disabled-color | var(--graupl-theme-active--primary--200) |\n// | --graupl-button-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-button-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-button-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-button-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-button-border-width | var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width) |\n// | --graupl-button-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-button-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-button-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-button-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-button-border-style | var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style) |\n// | --graupl-button-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-button-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-button-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-button-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-button-border-radius | var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius) |\n// | --graupl-button-border-color | var(--graupl-border-color) |\n// | --graupl-button-visited-border-color | var(--graupl-button-border-color) |\n// | --graupl-button-focus-border-color | var(--graupl-button-border-color) |\n// | --graupl-button-hover-border-color | var(--graupl-border-color) |\n// | --graupl-button-active-border-color | var(--graupl-button-hover-border-color) |\n// | --graupl-button-disabled-border-color | var(--graupl-theme-active--primary--200) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Button properties.\n// --graupl-button-min-width\n$button-min-width: var(\n --#{root-defaults.$prefix}button-min-width,\n #{root-defaults.$interactive-min-width}\n);\n\n// --graupl-button-min-height\n$button-min-height: var(\n --#{root-defaults.$prefix}button-min-height,\n #{root-defaults.$interactive-min-height}\n);\n\n// --graupl-button-padding-x\n$button-padding-x: var(\n --#{root-defaults.$prefix}button-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-button-padding-y\n$button-padding-y: var(\n --#{root-defaults.$prefix}button-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-button-padding\n$button-padding: var(\n --#{root-defaults.$prefix}button-padding,\n #{$button-padding-y} #{$button-padding-x}\n);\n\n// --graupl-button-font-size\n$button-font-size: var(\n --#{root-defaults.$prefix}button-font-size,\n #{map.get(typography.$font-sizes, base)}\n);\n\n// --graupl-button-transition\n$button-transition: var(\n --#{root-defaults.$prefix}button-transition,\n background #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-button-transition-reduced-motion\n$button-transition-reduced-motion: var(\n --#{root-defaults.$prefix}button-transition-reduced-motion,\n background #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function}\n);\n\n// Transform properties.\n// --graupl-button-transform\n$button-transform: var(\n --#{root-defaults.$prefix}button-transform,\n #{defaults.$button-initial-transform}\n);\n\n// --graupl-button-visited-transform\n$button-visited-transform: var(\n --#{root-defaults.$prefix}button-visited-transform,\n #{$button-transform}\n);\n\n// --graupl-button-focus-transform\n$button-focus-transform: var(\n --#{root-defaults.$prefix}button-focus-transform,\n #{$button-transform}\n);\n\n// --graupl-button-hover-transform\n$button-hover-transform: var(\n --#{root-defaults.$prefix}button-hover-transform,\n #{$button-transform}\n);\n\n// --graupl-button-active-transform\n$button-active-transform: var(\n --#{root-defaults.$prefix}button-active-transform,\n #{defaults.$button-final-transform}\n);\n\n// --graupl-button-disabled-transform\n$button-disabled-transform: var(\n --#{root-defaults.$prefix}button-disabled-transform,\n #{defaults.$button-disabled-transform}\n);\n$button-transform-states: (\n default: $button-transform,\n visited: $button-visited-transform,\n focus: $button-focus-transform,\n hover: $button-hover-transform,\n active: $button-active-transform,\n disabled: $button-disabled-transform,\n);\n\n// Background properties.\n// --graupl-button-background\n$button-background: var(\n --#{root-defaults.$prefix}button-background,\n #{color.$background}\n);\n\n// --graupl-button-visited-background\n$button-visited-background: var(\n --#{root-defaults.$prefix}button-visited-background,\n #{$button-background}\n);\n\n// --graupl-button-focus-background\n$button-focus-background: var(\n --#{root-defaults.$prefix}button-focus-background,\n #{$button-background}\n);\n\n// --graupl-button-hover-background\n$button-hover-background: var(\n --#{root-defaults.$prefix}button-hover-background,\n #{color.$color}\n);\n\n// --graupl-button-active-background\n$button-active-background: var(\n --#{root-defaults.$prefix}button-active-background,\n #{$button-hover-background}\n);\n\n// --graupl-button-disabled-background\n$button-disabled-background: var(\n --#{root-defaults.$prefix}button-disabled-background,\n #{color.$background}\n);\n$button-background-states: (\n default: $button-background,\n visited: $button-visited-background,\n focus: $button-focus-background,\n hover: $button-hover-background,\n active: $button-active-background,\n disabled: $button-disabled-background,\n);\n\n// Text properties.\n// --graupl-button-color\n$button-color: var(--#{root-defaults.$prefix}button-color, #{color.$color});\n\n// --graupl-button-visited-color\n$button-visited-color: var(\n --#{root-defaults.$prefix}button-visited-color,\n #{$button-color}\n);\n\n// --graupl-button-focus-color\n$button-focus-color: var(\n --#{root-defaults.$prefix}button-focus-color,\n #{$button-color}\n);\n\n// --graupl-button-hover-color\n$button-hover-color: var(\n --#{root-defaults.$prefix}button-hover-color,\n #{color.$background}\n);\n\n// --graupl-button-active-color\n$button-active-color: var(\n --#{root-defaults.$prefix}button-active-color,\n #{$button-hover-color}\n);\n\n// --graupl-button-disabled-color\n$button-disabled-color: var(\n --#{root-defaults.$prefix}button-disabled-color,\n #{theme.get(primary, 200)}\n);\n$button-color-states: (\n default: $button-color,\n visited: $button-visited-color,\n focus: $button-focus-color,\n hover: $button-hover-color,\n active: $button-active-color,\n disabled: $button-disabled-color,\n);\n\n// Border properties.\n// --graupl-button-border-top-width\n$button-border-top-width: var(\n --#{root-defaults.$prefix}button-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-button-border-right-width\n$button-border-right-width: var(\n --#{root-defaults.$prefix}button-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-button-border-bottom-width\n$button-border-bottom-width: var(\n --#{root-defaults.$prefix}button-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-button-border-left-width\n$button-border-left-width: var(\n --#{root-defaults.$prefix}button-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-button-border-width\n$button-border-width: var(\n --#{root-defaults.$prefix}button-border-width,\n #{$button-border-top-width} #{$button-border-right-width}\n #{$button-border-bottom-width} #{$button-border-left-width}\n);\n\n// --graupl-button-border-top-style\n$button-border-top-style: var(\n --#{root-defaults.$prefix}button-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-button-border-right-style\n$button-border-right-style: var(\n --#{root-defaults.$prefix}button-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-button-border-bottom-style\n$button-border-bottom-style: var(\n --#{root-defaults.$prefix}button-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-button-border-left-style\n$button-border-left-style: var(\n --#{root-defaults.$prefix}button-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-button-border-style\n$button-border-style: var(\n --#{root-defaults.$prefix}button-border-style,\n #{$button-border-top-style} #{$button-border-right-style}\n #{$button-border-bottom-style} #{$button-border-left-style}\n);\n\n// --graupl-button-border-top-left-radius\n$button-border-top-left-radius: var(\n --#{root-defaults.$prefix}button-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-button-border-top-right-radius\n$button-border-top-right-radius: var(\n --#{root-defaults.$prefix}button-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-button-border-bottom-right-radius\n$button-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}button-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-button-border-bottom-left-radius\n$button-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}button-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-button-border-radius\n$button-border-radius: var(\n --#{root-defaults.$prefix}button-border-radius,\n #{$button-border-top-left-radius} #{$button-border-top-right-radius}\n #{$button-border-bottom-right-radius} #{$button-border-bottom-left-radius}\n);\n\n// Border colour properties.\n// --graupl-button-border-color\n$button-border-color: var(\n --#{root-defaults.$prefix}button-border-color,\n #{color.$border-color}\n);\n\n// --graupl-button-visited-border-color\n$button-visited-border-color: var(\n --#{root-defaults.$prefix}button-visited-border-color,\n #{$button-border-color}\n);\n\n// --graupl-button-focus-border-color\n$button-focus-border-color: var(\n --#{root-defaults.$prefix}button-focus-border-color,\n #{$button-border-color}\n);\n\n// --graupl-button-hover-border-color\n$button-hover-border-color: var(\n --#{root-defaults.$prefix}button-hover-border-color,\n #{color.$border-color}\n);\n\n// --graupl-button-active-border-color\n$button-active-border-color: var(\n --#{root-defaults.$prefix}button-active-border-color,\n #{$button-hover-border-color}\n);\n\n// --graupl-button-disabled-border-color\n$button-disabled-border-color: var(\n --#{root-defaults.$prefix}button-disabled-border-color,\n #{theme.get(primary, 200)}\n);\n$button-border-color-states: (\n default: $button-border-color,\n visited: $button-visited-border-color,\n focus: $button-focus-border-color,\n hover: $button-hover-border-color,\n active: $button-active-border-color,\n disabled: $button-disabled-border-color,\n);\n","// @graupl/core state mixins.\n//\n// A series of mixins to tie styles to a state.\n\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific state.\n///\n/// @param {string} $state\n/// The name of the state to apply the styles to.\n@mixin state($state) {\n @each $selector in map.get(root-defaults.$state-selectors, $state) {\n &#{$selector} {\n @content;\n }\n }\n}\n\n/// Generates state modifiers with properties.\n///\n/// @param {map} $state-map\n/// The map of props and states.\n/// @param {string} $selector-base\n/// The selector base for the state modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the state modifer.\n@mixin generate-modifiers($state-map) {\n @each $state, $selectors in root-defaults.$state-selectors {\n @each $selector in $selectors {\n // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled\n &#{$selector} {\n @each $prop, $map in $state-map {\n #{$prop}: map.get($map, $state);\n }\n\n // If the state is disabled, we want that to supersede all other states.\n @if $state == \"disabled\" {\n @each $sub-state, $sub-selectors in root-defaults.$state-selectors {\n @if $sub-state != $state {\n @each $sub-selector in $sub-selectors {\n // e.g &:visited, &:focus-visible, &:hover, &:active\n &#{$sub-selector} {\n @each $prop, $map in $state-map {\n #{$prop}: map.get($map, $state);\n }\n }\n }\n }\n }\n }\n }\n }\n }\n}\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n"],"names":[]}
package/dist/css/component/input-group.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.component{.input-group{align-items:center;display:grid;gap:var(--graupl-input-group-gap,var(--graupl-input-group-row-gap,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-input-group-column-gap,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))));grid-template-areas:var(--graupl-input-group-grid-template-areas,"label" "input" "help");grid-template-columns:var(--graupl-input-group-grid-template-columns,100%);grid-template-rows:var(--graupl-input-group-grid-template-rows,auto auto auto)}.input-group label{grid-area:var(--graupl-input-group-label-grid-area,label)}.input-group input,.input-group select,.input-group textarea{grid-area:var(--graupl-input-group-input-grid-area,input)}.input-group .help-text{grid-area:var(--graupl-input-group-help-grid-area,help)}.input-group.inline{grid-template-areas:var(--graupl-input-group-inline-grid-template-areas,"label input" "- help");grid-template-columns:var(--graupl-input-group-inline-grid-template-columns,auto 1fr);grid-template-rows:var(--graupl-input-group-inline-grid-template-rows,auto auto)}@media screen and (width <= 47ch){.input-group.inline{grid-template-areas:var(--graupl-input-group-grid-template-areas,"label" "input" "help");grid-template-columns:var(--graupl-input-group-grid-template-columns,100%);grid-template-rows:var(--graupl-input-group-grid-template-rows,auto auto auto)}}}
2
- /*# sourceMappingURL=input-group.css.map */
1
+ @layer graupl.component{.input-group{grid-template-areas:var(--graupl-input-group-grid-template-areas,"label" "input" "help");grid-template-columns:var(--graupl-input-group-grid-template-columns,100%);grid-template-rows:var(--graupl-input-group-grid-template-rows,auto auto auto);align-items:center;gap:var(--graupl-input-group-gap,var(--graupl-input-group-row-gap,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))) var(--graupl-input-group-column-gap,var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))));display:grid}.input-group label{grid-area:var(--graupl-input-group-label-grid-area,label)}.input-group input,.input-group textarea,.input-group select{grid-area:var(--graupl-input-group-input-grid-area,input)}.input-group .help-text{grid-area:var(--graupl-input-group-help-grid-area,help)}.input-group.inline{grid-template-areas:var(--graupl-input-group-inline-grid-template-areas,"label input" "- help");grid-template-columns:var(--graupl-input-group-inline-grid-template-columns,auto 1fr);grid-template-rows:var(--graupl-input-group-inline-grid-template-rows,auto auto)}@media screen and (width<=575px){.input-group.inline{grid-template-areas:var(--graupl-input-group-grid-template-areas,"label" "input" "help");grid-template-columns:var(--graupl-input-group-grid-template-columns,100%);grid-template-rows:var(--graupl-input-group-grid-template-rows,auto auto auto)}}}
2
+ /*# sourceMappingURL=input-group.css.map */
package/dist/css/component/input-group.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/component/input-group/_index.scss","../../../src/scss/component/input-group/_variables.scss","input-group.css","../../../src/scss/mixins/_screen.scss"],"names":[],"mappings":"AASI,wBCCF,aAKE,kBAAA,CAJA,YAAA,CAKA,+NCiBc,CDrBd,wFCD8B,CDE9B,0ECIgC,CDHhC,8EENF,CFUE,mBACE,yDERJ,CFWE,6DAGE,yDETJ,CFYE,wBACE,uDEVJ,CFaE,oBACE,+FCMmC,CDLnC,qFCUqC,CDTrC,gFEXJ,CCDA,kCHiBE,oBACE,wFC9B4B,CD+B5B,0ECzB8B,CD0B9B,8EEbF,CACF,CACF","file":"input-group.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"ACSI,wBCgEF,kgBASE,6EAKA,uHAOA,gFAKA,2RE5EF,iCFqFE","sources":["dist/css/component/input-group.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/component/input-group/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/component/input-group/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_screen.scss"],"sourcesContent":["@layer graupl.component {\n .input-group {\n display: grid;\n grid-template-areas: var(--graupl-input-group-grid-template-areas, \"label\" \"input\" \"help\");\n grid-template-columns: var(--graupl-input-group-grid-template-columns, 100%);\n grid-template-rows: var(--graupl-input-group-grid-template-rows, auto auto auto);\n align-items: center;\n gap: var(--graupl-input-group-gap, var(--graupl-input-group-row-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))) var(--graupl-input-group-column-gap, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n }\n .input-group label {\n grid-area: var(--graupl-input-group-label-grid-area, label);\n }\n .input-group input,\n .input-group textarea,\n .input-group select {\n grid-area: var(--graupl-input-group-input-grid-area, input);\n }\n .input-group .help-text {\n grid-area: var(--graupl-input-group-help-grid-area, help);\n }\n .input-group.inline {\n grid-template-areas: var(--graupl-input-group-inline-grid-template-areas, \"label input\" \"- help\");\n grid-template-columns: var(--graupl-input-group-inline-grid-template-columns, auto 1fr);\n grid-template-rows: var(--graupl-input-group-inline-grid-template-rows, auto auto);\n }\n @media screen and (width <= 575px) {\n .input-group.inline {\n grid-template-areas: var(--graupl-input-group-grid-template-areas, \"label\" \"input\" \"help\");\n grid-template-columns: var(--graupl-input-group-grid-template-columns, 100%);\n grid-template-rows: var(--graupl-input-group-grid-template-rows, auto auto auto);\n }\n }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core input group component styles.\n//\n// This module provides grid-based alignment for labels, inputs, and help text.\n//\n// The following selectors are generated by default:\n// - `.input-group`: The input group container.\n// - `.help-text`: Inline help text element.\n// - `.inline`: Modifier to lay out label/input/help in a single row (when allowed).\n//\n// The following custom properties can be used to customize the input group component:\n// | Property | Description | Default Value |\n// | --------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------ |\n// | `--graupl-input-group-grid-template-areas` | Grid template areas for the default layout. | `\"label\" \"input\" \"help\"` |\n// | `--graupl-input-group-grid-template-columns` | Grid template columns for the default layout. | `100%` |\n// | `--graupl-input-group-grid-template-rows` | Grid template rows for the default layout. | `auto auto auto` |\n// | `--graupl-input-group-row-gap` | Row gap between label/input/help. | `var(--graupl-spacer-2)` |\n// | `--graupl-input-group-column-gap` | Column gap between label/input/help. | `var(--graupl-spacer-3)` |\n// | `--graupl-input-group-gap` | Shorthand gap (row/column) for the group. | `var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap)` |\n// | `--graupl-input-group-inline-grid-template-areas` | Grid template areas for the inline layout. | `\"label input\" \"- help\"` |\n// | `--graupl-input-group-inline-grid-template-columns` | Grid template columns for the inline layout. | `auto 1fr` |\n// | `--graupl-input-group-inline-grid-template-rows` | Grid template rows for the inline layout. | `auto auto` |\n// | `--graupl-input-group-label-grid-area` | Grid area name used by the label. | `label` |\n// | `--graupl-input-group-input-grid-area` | Grid area name used by form controls. | `input` |\n// | `--graupl-input-group-help-grid-area` | Grid area name used by help text. | `help` |\n//\n// The following sass variables can be used to customize the generation of the input group component:\n// | Variable | Description | Default Value |\n// | ------------------------------------------- | -------------------------------------------- | ---------------- |\n// | `$selector-base` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$input-group-selector-base` | Selector base for the input group container. | `\".\"` |\n// | `$input-group-selector` | Selector for the input group container. | `\"input-group\"` |\n// | `$input-group-inline-selector-base` | Selector base for the inline modifier. | `\".\"` |\n// | `$input-group-inline-selector` | Selector for the inline modifier. | `\"inline\"` |\n// | `$input-group-help-text-selector-base` | Selector base for the help text. | `\".\"` |\n// | `$input-group-help-text-selector` | Selector for the help text. | `\"help-text\"` |\n// | `$input-group-grid-label-name` | Grid area name for labels. | `label` |\n// | `$input-group-grid-input-name` | Grid area name for inputs. | `input` |\n// | `$input-group-grid-help-name` | Grid area name for help text. | `help` |\n// | `$input-group-grid-template-columns` | Default grid columns. | `100%` |\n// | `$input-group-grid-template-rows` | Default grid rows. | `auto auto auto` |\n// | `$input-group-inline-grid-template-columns` | Inline layout grid columns. | `auto 1fr` |\n// | `$input-group-inline-grid-template-rows` | Inline layout grid rows. | `auto auto` |\n// | `$input-group-label-grid-area` | Grid area value for labels. | `label` |\n// | `$input-group-input-grid-area` | Grid area value for inputs. | `input` |\n// | `$input-group-help-grid-area` | Grid area value for help text. | `help` |\n//\n// @example\n// <div class=\"input-group\">\n// <label for=\"input-default\">Label</label>\n// <input id=\"input-default\" type=\"text\" placeholder=\"Enter text\" />\n// <span class=\"help-text\">Helpful hint</span>\n// </div>\n//\n// @example\n// <div class=\"input-group inline\">\n// <label for=\"select-inline\">Label</label>\n// <select id=\"select-inline\">\n// <option value=\"1\">One</option>\n// <option value=\"2\">Two</option>\n// </select>\n// <span class=\"help-text\">Inline help</span>\n// </div>\n\n@use \"defaults\";\n@use \"../../base/form/defaults\" as form-defaults;\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n\n// stylelint-disable declaration-block-no-redundant-longhand-properties\n@include layer(component) {\n // .input-group\n #{defaults.$input-group-selector-base}#{defaults.$input-group-selector} {\n display: grid;\n grid-template-areas: $input-group-grid-template-areas;\n grid-template-columns: $input-group-grid-template-columns;\n grid-template-rows: $input-group-grid-template-rows;\n align-items: center;\n gap: $input-group-gap;\n\n // label\n #{form-defaults.$label-selector} {\n grid-area: $input-group-label-grid-area;\n }\n\n // input, textarea, select\n #{form-defaults.$input-selector},\n #{form-defaults.$textarea-selector},\n #{form-defaults.$select-selector} {\n grid-area: $input-group-input-grid-area;\n }\n\n // .help-text\n #{defaults.$input-group-help-text-selector-base}#{defaults.$input-group-help-text-selector} {\n grid-area: $input-group-help-grid-area;\n }\n\n // &.inline\n &#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {\n grid-template-areas: $input-group-inline-grid-template-areas;\n grid-template-columns: $input-group-inline-grid-template-columns;\n grid-template-rows: $input-group-inline-grid-template-rows;\n }\n }\n\n @include screen.down(xs) {\n // .input-group.inline\n #{defaults.$input-group-selector-base}#{defaults.$input-group-selector}#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {\n grid-template-areas: $input-group-grid-template-areas;\n grid-template-columns: $input-group-grid-template-columns;\n grid-template-rows: $input-group-grid-template-rows;\n }\n }\n}\n","// @graupl/core input group component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ------------------------------------------------- | ---------------------------------------------------------------------- |\n// | --graupl-input-group-grid-template-areas | \"label\" \"input\" \"help\" |\n// | --graupl-input-group-grid-template-columns | 100% |\n// | --graupl-input-group-grid-template-rows | auto auto auto |\n// | --graupl-input-group-row-gap | var(--graupl-spacer-2) |\n// | --graupl-input-group-column-gap | var(--graupl-spacer-3) |\n// | --graupl-input-group-gap | var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap) |\n// | --graupl-input-group-inline-grid-template-areas | \"label input\" \"- help\" |\n// | --graupl-input-group-inline-grid-template-columns | auto 1fr |\n// | --graupl-input-group-inline-grid-template-rows | auto auto |\n// | --graupl-input-group-label-grid-area | label |\n// | --graupl-input-group-input-grid-area | input |\n// | --graupl-input-group-help-grid-area | help |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"sass:map\";\n\n// Input group properties.\n// --graupl-input-group-grid-template-areas\n$input-group-grid-template-areas: var(\n --#{root-defaults.$prefix}input-group-grid-template-areas,\n \"#{defaults.$input-group-grid-label-name}\"\n \"#{defaults.$input-group-grid-input-name}\"\n \"#{defaults.$input-group-grid-help-name}\"\n);\n\n// --graupl-input-group-grid-template-columns\n$input-group-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-grid-template-columns,\n #{defaults.$input-group-grid-template-columns}\n);\n\n// --graupl-input-group-grid-template-rows\n$input-group-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-grid-template-rows,\n #{defaults.$input-group-grid-template-rows}\n);\n\n// --graupl-input-group-row-gap\n$input-group-row-gap: var(\n --#{root-defaults.$prefix}input-group-row-gap,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-input-group-column-gap\n$input-group-column-gap: var(\n --#{root-defaults.$prefix}input-group-column-gap,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-input-group-gap\n$input-group-gap: var(\n --#{root-defaults.$prefix}input-group-gap,\n #{$input-group-row-gap} #{$input-group-column-gap}\n);\n\n// Inline input group properties.\n// --graupl-input-group-inline-grid-template-areas\n$input-group-inline-grid-template-areas: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-areas,\n \"#{defaults.$input-group-grid-label-name} #{defaults.$input-group-grid-input-name}\"\n \"- #{defaults.$input-group-grid-help-name}\"\n);\n\n// --graupl-input-group-inline-grid-template-columns\n$input-group-inline-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-columns,\n #{defaults.$input-group-inline-grid-template-columns}\n);\n\n// --graupl-input-group-inline-grid-template-rows\n$input-group-inline-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-rows,\n #{defaults.$input-group-inline-grid-template-rows}\n);\n\n// Inner element properties.\n// --graupl-input-group-label-grid-area\n$input-group-label-grid-area: var(\n --#{root-defaults.$prefix}input-group-label-grid-area,\n #{defaults.$input-group-label-grid-area}\n);\n\n// --graupl-input-group-input-grid-area\n$input-group-input-grid-area: var(\n --#{root-defaults.$prefix}input-group-input-grid-area,\n #{defaults.$input-group-input-grid-area}\n);\n\n// --graupl-input-group-help-grid-area\n$input-group-help-grid-area: var(\n --#{root-defaults.$prefix}input-group-help-grid-area,\n #{defaults.$input-group-help-grid-area}\n);\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($screen-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n // Validate that the mixin exists.\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n // Include the mixin with the provided arguments and content.\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n }\n}\n"],"names":[]}
package/dist/css/component/list.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.component{.list{border:var(--graupl-list-border,var(--graupl-list-border-width,0) var(--graupl-list-border-style,var(--graupl-border-style,solid)));border-radius:var(--graupl-list-border-radius,var(--graupl-list-top-left-border-radius,var(--graupl-border-radius,.125rem)) var(--graupl-list-top-right-border-radius,var(--graupl-border-radius,.125rem)) var(--graupl-list-bottom-right-border-radius,var(--graupl-border-radius,.125rem)) var(--graupl-list-bottom-left-border-radius,var(--graupl-border-radius,.125rem)));display:grid;gap:var(--graupl-list-gap,var(--graupl-list-column-gap,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-list-row-gap,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))));list-style:none;margin:var(--graupl-list-margin,var(--graupl-list-margin-y,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-list-margin-x,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))));padding:var(--graupl-list-padding,var(--graupl-list-padding-y,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-list-padding-x,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))))}.list,.list-item{position:relative}.list-item{border:var(--graupl-list-item-border,var(--graupl-list-item-border-width,var(--graupl-border-width,.125rem)) var(--graupl-list-item-border-style,var(--graupl-border-style,solid)));border-radius:var(--graupl-list-item-border-radius,var(--graupl-list-item-top-left-border-radius,var(--graupl-border-radius,.125rem)) var(--graupl-list-item-top-right-border-radius,var(--graupl-border-radius,.125rem)) var(--graupl-list-item-bottom-right-border-radius,var(--graupl-border-radius,.125rem)) var(--graupl-list-item-bottom-left-border-radius,var(--graupl-border-radius,.125rem)));padding:var(--graupl-list-item-padding,var(--graupl-list-item-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))) var(--graupl-list-item-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))));transform:var(--graupl-list-item-transform,none);transition:var(--graupl-list-item-transition,transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.list-item.hover,.list-item:hover{--graupl-list-item-transform:$list-item-hover-transform}}@layer graupl.theme{.list{background:var(--graupl-list-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-list-border-color,var(--graupl-list-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));color:var(--graupl-list-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}.list-item{background:var(--graupl-list-item-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-list-item-border-color,var(--graupl-list-item-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));color:var(--graupl-list-item-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}}
2
- /*# sourceMappingURL=list.css.map */
1
+ @layer graupl.component{.list{margin:var(--graupl-list-margin,var(--graupl-list-margin-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-list-margin-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));padding:var(--graupl-list-padding,var(--graupl-list-padding-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-list-padding-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));border-width:var(--graupl-list-border-width,var(--graupl-list-border-top-width,0) var(--graupl-list-border-right-width,0) var(--graupl-list-border-bottom-width,0) var(--graupl-list-border-left-width,0));border-style:var(--graupl-list-border-style,var(--graupl-list-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-list-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-list-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-list-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-list-border-radius,var(--graupl-list-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-list-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-list-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-list-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-list-gap,var(--graupl-list-column-gap,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))) var(--graupl-list-row-gap,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))));list-style:none;display:grid;position:relative}.list-item{padding:var(--graupl-list-item-padding,var(--graupl-list-item-padding-y,var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))) var(--graupl-list-item-padding-x,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))));transform:var(--graupl-list-item-transform,none);transition:var(--graupl-list-item-transition,transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease));border-width:var(--graupl-list-item-border-width,var(--graupl-list-item-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-list-item-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-list-item-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-list-item-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-list-item-border-style,var(--graupl-list-item-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-list-item-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-list-item-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-list-item-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-list-item-border-radius,var(--graupl-list-item-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-list-item-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-list-item-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-list-item-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));position:relative}.list-item:hover,.list-item.hover{--graupl-list-item-transform:var(--graupl-list-item-hover-transform,none)}}@layer graupl.theme{.list{border-color:var(--graupl-list-border-color,var(--graupl-list-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-list-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-list-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.list-item{border-color:var(--graupl-list-item-border-color,var(--graupl-list-item-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-list-item-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-list-item-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}}
2
+ /*# sourceMappingURL=list.css.map */