@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/init.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.normalize, graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;
2
- /*# sourceMappingURL=init.css.map */
1
+ @layer graupl.normalize,graupl.base,graupl.layout,graupl.component,graupl.theme,graupl.utilities,graupl.state;
2
+ /*# sourceMappingURL=init.css.map */
package/dist/css/init.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/scss/_init.scss"],"names":[],"mappings":"AAKA,mHAAA","file":"init.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"ACKA","sources":["dist/css/init.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/_init.scss"],"sourcesContent":["@layer graupl.normalize, graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;","// @graupl/core layer initialization styles.\n\n@use \"defaults\" as root-defaults;\n\n// Layer initialization.\n@layer #{root-defaults.$id}.normalize, #{root-defaults.$id}.base, #{root-defaults.$id}.layout, #{root-defaults.$id}.component, #{root-defaults.$id}.theme, #{root-defaults.$id}.utilities, #{root-defaults.$id}.state;\n"],"names":[]}
package/dist/css/layout/columns.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.layout{.columns{display:grid;gap:var(--graupl-columns-row-gap,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))) var(--graupl-columns-column-gap,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1)));grid-template-columns:var(--graupl-columns-grid-template-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))),var(--graupl-columns-max-width,1fr))))}.columns>*{grid-column:span var(--graupl-columns-span,1)}.count-1{--graupl-columns-count:1}.count-1 .span-2,.count-1 .span-3,.count-1 .span-4,.count-1 .span-5,.count-1 .span-6,.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.count-2 .span-3,.count-2 .span-4,.count-2 .span-5,.count-2 .span-6,.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.count-3 .span-4,.count-3 .span-5,.count-3 .span-6,.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.count-4 .span-5,.count-4 .span-6,.span-4{--graupl-columns-span:4}.count-5{--graupl-columns-count:5}.count-5 .span-6,.span-5{--graupl-columns-span:5}.count-6{--graupl-columns-count:6}.count-6 .span-6,.count-6 .span-7,.span-6{--graupl-columns-span:6}@media screen and (width <= 47ch){.columns{--graupl-columns-min-width:1fr}.columns .span-1,.columns .span-2,.columns .span-3,.columns .span-4,.columns .span-5,.columns .span-6,.columns>*{--graupl-columns-span:1}}}
2
- /*# sourceMappingURL=columns.css.map */
1
+ @layer graupl.layout{.columns{grid-template-columns:var(--graupl-columns-grid-template-columns,repeat(auto-fit, minmax(var(--graupl-columns-min-width,calc((var(--graupl-columns-content-max-width,var(--graupl-content-max-width,96ch)) - var(--graupl-columns-column-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * (var(--graupl-columns-count,3) - 1)) / var(--graupl-columns-count,3))), var(--graupl-columns-max-width,1fr))));gap:var(--graupl-columns-row-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) var(--graupl-columns-column-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem))));display:grid}.columns>*{grid-column:span var(--graupl-columns-span,1)}.columns .columns{grid-template-columns:subgrid}.count-1{--graupl-columns-count:1}.count-1 .span-2,.count-1 .span-3,.count-1 .span-4,.count-1 .span-5,.count-1 .span-6,.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.count-2 .span-3,.count-2 .span-4,.count-2 .span-5,.count-2 .span-6,.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.count-3 .span-4,.count-3 .span-5,.count-3 .span-6,.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.count-4 .span-5,.count-4 .span-6,.span-4{--graupl-columns-span:4}.count-5{--graupl-columns-count:5}.count-5 .span-6,.span-5{--graupl-columns-span:5}.count-6{--graupl-columns-count:6}.count-6 .span-7,.count-6 .span-6,.span-6{--graupl-columns-span:6}@container (width<=575px){.columns{--graupl-columns-min-width:1fr}.columns>*,.columns .span-1,.columns .span-2,.columns .span-3,.columns .span-4,.columns .span-5,.columns .span-6{--graupl-columns-span:1}}}@layer graupl.theme{.columns{background-color:var(--graupl-columns-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-columns-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=columns.css.map */
package/dist/css/layout/columns.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/layout/columns/_index.scss","columns.css","../../../src/scss/mixins/_screen.scss"],"names":[],"mappings":"AASI,qBCAF,SACE,YAAA,CAEA,sLAAA,CADA,qXCJF,CDOE,WACE,6CCLJ,CDUE,SACE,wBCRJ,CDmBE,6FACE,uBCFJ,CDXE,SACE,wBCaJ,CDFE,4EACE,uBCgBJ,CD7BE,SACE,wBC+BJ,CDpBE,2DACE,uBC+BJ,CD5CE,SACE,wBC8CJ,CDnCE,0CACE,uBC2CJ,CDxDE,SACE,wBC0DJ,CD/CE,yBACE,uBCoDJ,CDjEE,SACE,wBCmEJ,CDxDE,0CACE,uBCgEJ,CC1EA,kCFgBE,SACE,8BC6DF,CDlDI,iHACE,uBCsEN,CACF,CACF","file":"columns.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,qBCkFF,ymBAKE,yDAQA,gDAOA,kCAOI,qHAPJ,kCAOI,oGAPJ,kCAOI,mFAPJ,kCAOI,kEAPJ,kCAOI,iDAPJ,kCAOI,kEC/FN,0BD+GI,wCAGE,2IDhIJ,oBCqJF","sources":["dist/css/layout/columns.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/columns/_variables.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/layout/columns/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_container.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.layout {\n .columns {\n display: grid;\n grid-template-columns: var(--graupl-columns-grid-template-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-columns-content-max-width, var(--graupl-content-max-width, 96ch)) - var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));\n gap: var(--graupl-columns-row-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) var(--graupl-columns-column-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))));\n }\n .columns > * {\n grid-column: span var(--graupl-columns-span, 1);\n }\n .columns .columns {\n grid-template-columns: subgrid;\n }\n .count-1 {\n --graupl-columns-count: 1;\n }\n .count-1 .span-2 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-3 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-4 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-5 {\n --graupl-columns-span: 1;\n }\n .count-1 .span-6 {\n --graupl-columns-span: 1;\n }\n .span-1 {\n --graupl-columns-span: 1;\n }\n .count-2 {\n --graupl-columns-count: 2;\n }\n .count-2 .span-3 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-4 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-5 {\n --graupl-columns-span: 2;\n }\n .count-2 .span-6 {\n --graupl-columns-span: 2;\n }\n .span-2 {\n --graupl-columns-span: 2;\n }\n .count-3 {\n --graupl-columns-count: 3;\n }\n .count-3 .span-4 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-5 {\n --graupl-columns-span: 3;\n }\n .count-3 .span-6 {\n --graupl-columns-span: 3;\n }\n .span-3 {\n --graupl-columns-span: 3;\n }\n .count-4 {\n --graupl-columns-count: 4;\n }\n .count-4 .span-5 {\n --graupl-columns-span: 4;\n }\n .count-4 .span-6 {\n --graupl-columns-span: 4;\n }\n .span-4 {\n --graupl-columns-span: 4;\n }\n .count-5 {\n --graupl-columns-count: 5;\n }\n .count-5 .span-6 {\n --graupl-columns-span: 5;\n }\n .span-5 {\n --graupl-columns-span: 5;\n }\n .count-6 {\n --graupl-columns-count: 6;\n }\n .count-6 .span-7 {\n --graupl-columns-span: 6;\n }\n .count-6 .span-6 {\n --graupl-columns-span: 6;\n }\n .span-6 {\n --graupl-columns-span: 6;\n }\n @container (width <= 575px) {\n .columns {\n --graupl-columns-min-width: 1fr;\n }\n .columns > * {\n --graupl-columns-span: 1;\n }\n .columns .span-1 {\n --graupl-columns-span: 1;\n }\n .columns .span-2 {\n --graupl-columns-span: 1;\n }\n .columns .span-3 {\n --graupl-columns-span: 1;\n }\n .columns .span-4 {\n --graupl-columns-span: 1;\n }\n .columns .span-5 {\n --graupl-columns-span: 1;\n }\n .columns .span-6 {\n --graupl-columns-span: 1;\n }\n }\n}\n@layer graupl.theme {\n .columns {\n background-color: var(--graupl-columns-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-columns-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}","// @graupl/core columns layout 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-columns-row-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-column-gap | var(--graupl-spacer-5) |\n// | --graupl-columns-count | 3 |\n// | --graupl-columns-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-columns-min-width | calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count)) |\n// | --graupl-columns-max-width | 1fr |\n// | --graupl-columns-grid-template-columns | repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) |\n// | --graupl-columns-span | 1 |\n// | --graupl-columns-background | var(--graupl-background) |\n// | --graupl-columns-color | var(--graupl-color) |\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 \"sass:map\";\n\n// --graupl-columns-row-gap\n$columns-row-gap: var(\n --#{root-defaults.$prefix}columns-row-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-column-gap\n$columns-column-gap: var(\n --#{root-defaults.$prefix}columns-column-gap,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-columns-count\n$columns-count: var(\n --#{root-defaults.$prefix}columns-count,\n #{defaults.$columns-count}\n);\n\n// --graupl-columns-content-max-width\n$columns-content-max-width: var(\n --#{root-defaults.$prefix}columns-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// Calculate the min-width of each column based on the content-max-width and column-gap.\n// We take the maximum width of the page and subtract the gap width multiplied by the number of\n// columns minus one (to account for the gaps between columns).\n// We then divide this by the number of columns to get the min-width of each column.\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-columns-min-width\n$columns-min-width: var(\n --#{root-defaults.$prefix}columns-min-width,\n calc(\n (\n #{$columns-content-max-width} - #{$columns-column-gap} *\n (#{$columns-count} - 1)\n ) /\n #{$columns-count}\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-columns-max-width\n$columns-max-width: var(\n --#{root-defaults.$prefix}columns-max-width,\n #{defaults.$columns-max-width}\n);\n\n// --graupl-columns-grid-template-columns\n$columns-grid-template-columns: var(\n --#{root-defaults.$prefix}columns-grid-template-columns,\n repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))\n);\n\n// --graupl-columns-span\n$columns-span: var(\n --#{root-defaults.$prefix}columns-span,\n #{defaults.$columns-span}\n);\n\n// --graupl-columns-background\n$columns-background: var(\n --#{root-defaults.$prefix}columns-background,\n #{color.$background}\n);\n\n// --graupl-columns-color\n$columns-color: var(--#{root-defaults.$prefix}columns-color, #{color.$color});\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 columns layout styles.\n//\n// This module provides the layout styles for the columns component.\n//\n// The columns component is a grid container that provides a responsive grid layout for content.\n// The columns will automatically adjust their size and number of columns based on the available space.\n//\n// Nesting a columns component directly inside of another columns component will implement a subgrid\n// area. In standard usage, this effectively locks the child columns to be a single column layout.\n// This happens because the maximum width allowed for columns uses `--graupl-content-max-width` to calculate\n// the columns widths, not the columns' parent width. This works as designed.\n//\n// At a certain breakpoint, columns will be forced to be a single column layout to avoid horizontal bleeding.\n// This is controlled by the `force-single-column` screen trigger.\n//\n// The following classes are generated by default:\n// - `.columns`: The main columns component.\n// - `.count-1`: Sets the number of columns in the columns component to 1.\n// - `.count-2`: Sets the number of columns in the columns component to 2.\n// - `.count-3`: Sets the number of columns in the columns component to 3.\n// - `.count-4`: Sets the number of columns in the columns component to 4.\n// - `.count-5`: Sets the number of columns in the columns component to 5.\n// - `.count-6`: Sets the number of columns in the columns component to 6.\n// - `.span-1`: Sets the span of a column in the columns component to 1.\n// - `.span-2`: Sets the span of a column in the columns component to 2.\n// - `.span-3`: Sets the span of a column in the columns component to 3.\n// - `.span-4`: Sets the span of a column in the columns component to 4.\n// - `.span-5`: Sets the span of a column in the columns component to 5.\n// - `.span-6`: Sets the span of a column in the columns component to 6.\n//\n// The following custom properties can be used to customize the columns component:\n// | Property | Description | Default Value |\n// | ---------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n// | `--graupl-columns-row-gap` | The gap between the rows of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-column-gap` | The gap between the columns of the columns. | `var(--graupl-spacer-5)` |\n// | `--graupl-columns-count` | The maximum number of columns. | `3` |\n// | `--graupl-columns-content-max-width` | The maximum width of the content inside the columns. | `var(--graupl-content-max-width)` |\n// | `--graupl-columns-min-width` | The minimum width of each column. | `calc((var(--graupl-columns-content-max-width) - var(--graupl-columns-column-gap) * (var(--graupl-columns-count) - 1)) / var(--graupl-columns-count))` |\n// | `--graupl-columns-max-width` | The maximum width of each column. | `1fr` |\n// | `--graupl-columns-grid-template-columns` | The grid template columns for the columns. | `repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width)))` |\n// | `--graupl-columns-span` | The span of each column. | `1` |\n// | `--graupl-columns-background` | The background of the columns component. | `var(--graupl-background)` |\n// | `--graupl-columns-color` | The text color of the columns component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the columns component:\n// | Variable | Description | Default Value |\n// | -------------------------------- | ------------------------------------------------------------------ | ---------------- |\n// | `$selector-base` | The base selector for the component. | `\".\"` |\n// | `$modifier-selector-base` | The base selector for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$force-single-columns` | Flag to enable forced single column layout on small screens. | `true` |\n// | `$columns-selector-base` | The base selector for the columns component. | `\".\"` |\n// | `$columns-selector` | The selector for the columns component. | `\"columns\"` |\n// | `$columns-theme-selector-base` | The selector base for columns theme modifiers. | `\".\"` |\n// | `$columns-theme-selector-prefix` | The columns theme modifier selector prefix. | `\"\"` |\n// | `$columns-count-selector-base` | The base selector for the count class. | `\".\"` |\n// | `$columns-count-selector-prefix` | The prefix for the count class. | `\"count-\"` |\n// | `$columns-span-selector-base` | The base selector for the span class. | `\".\"` |\n// | `$columns-span-selector-prefix` | The prefix for the span class. | `\"span-\"` |\n// | `$columns-max-width` | The maximum width of each column. | `1fr` |\n// | `$columns-count` | The default number of columns. | `3` |\n// | `$columns-min-count` | The minimum number of columns used to generate `.count-#` classes. | `1` |\n// | `$columns-max-count` | The maximum number of columns used to generate `.count-#` classes. | `6` |\n// | `$columns-span` | The default span of each column. | `1` |\n// | `$columns-theme-mappings` | Map of properties/shades for columns themes. | `()` |\n// | `$columns-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// @example\n// <div class=\"columns\">\n// <div>Column 1</div>\n// <div>Column 2</div>\n// <div>Column 3</div>\n// </div>\n//\n// @example\n// <div class=\"columns count-4\">\n// <div>Column 1</div>\n// <div class=\"span-2\">Column 2</div>\n// <div>Column 3</div>\n// </div>\n\n@use \"variables\" as *;\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/container\";\n@use \"../../mixins/theme\";\n\n@include layer(layout) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n display: grid;\n grid-template-columns: $columns-grid-template-columns;\n gap: $columns-row-gap $columns-column-gap;\n\n > * {\n grid-column: span $columns-span;\n }\n\n // Set any child columns to subgrid.\n // This is necessary to avoid breaking the layout.\n //\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n grid-template-columns: subgrid;\n }\n }\n\n @for $i from defaults.$columns-min-count through defaults.$columns-max-count {\n // .count-#{$i}\n #{defaults.$columns-count-selector-base}#{defaults.$columns-count-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-count: #{$i};\n\n // For span values bigger than the actual column count, set them to the\n // maximum column count so they don't break the layout.\n @for $j from $i + 1 through defaults.$columns-max-count {\n // .span-#{$j}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$j} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n }\n\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: #{$i};\n }\n }\n\n // Disable columns on small screens to avoid horizontal bleeding.\n @if defaults.$force-single-columns {\n @include container.trigger(force-single-column) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};\n\n > * {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n\n // All spans should be set to 1 to avoid adding columns.\n @for $i\n from defaults.$columns-min-count\n through defaults.$columns-max-count\n {\n // .span-#{$i}\n #{defaults.$columns-span-selector-base}#{defaults.$columns-span-selector-prefix}#{$i} {\n --#{root-defaults.$prefix}columns-span: 1;\n }\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .columns\n #{defaults.$columns-selector-base}#{defaults.$columns-selector} {\n background-color: $columns-background;\n color: $columns-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$columns-theme-map,\n defaults.$columns-theme-selector-base,\n defaults.$columns-theme-selector-prefix,\n \"columns-\"\n );\n }\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$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.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-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/layout/container.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.layout{.container,.container>.full-width{display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem)))),1fr)) [feature-start] var(--graupl-container-feature-section-width,minmax(0,var(--graupl-container-feature-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(0,var(--graupl-container-breakout-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width,min(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)),100% - var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem)))) * 2)) [content-end] var(--graupl-container-breakout-section-width,minmax(0,var(--graupl-container-breakout-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(0,var(--graupl-container-feature-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem)))),1fr)) [full-width-end]}.container>.full-width>:not(.breakout,.full-width,.feature),.container>:not(.breakout,.full-width,.feature){grid-column:content}.container .breakout,.container>.full-width .breakout{grid-column:breakout}.container .feature,.container>.full-width .feature{grid-column:feature}.container .full-width,.container>.full-width .full-width{grid-column:full-width}}
2
- /*# sourceMappingURL=container.css.map */
1
+ @layer graupl.layout{.container{grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width,min(var(--graupl-container-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) * 2)), var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))))) [content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end];overflow-wrap:break-word;display:grid;container-type:inline-size}.container>.container{grid-column:1/-1;grid-template-columns:subgrid;container-type:normal}.container>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .contain{grid-template-columns:subgrid;display:grid}.container .contain>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .breakout{grid-column:breakout}.container .feature{grid-column:feature}.container .full-width{grid-column:full-width}.container.sidebars .sidebar-left{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left){grid-column:content}.container.sidebars .sidebar-right{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars .content>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}.container.sidebars-left .sidebar{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-left .sidebar>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-left .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-left .content>:not(.container,.breakout,.full-width,.feature,.sidebar),.container.sidebars-left .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-right .sidebar{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-right .sidebar>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}.container.sidebars-right .content{grid-column:1/-1;grid-template-columns:subgrid;align-content:flex-start;display:grid}.container.sidebars-right .content>:not(.container,.breakout,.full-width,.feature,.sidebar),.container.sidebars-right .content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar){grid-column:content}@media screen and (width>=1024px){.container.sidebars{--graupl-columns-content-max-width:var(--graupl-container-sidebars-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width,min(var(--graupl-container-sidebars-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars>.sidebar-left{grid-row:1/-1;grid-template:subgrid}.container.sidebars>.sidebar-left:not(.container),.container.sidebars>.sidebar-left:not(.container) .container,.container.sidebars>.sidebar-left:not(.container) .breakout,.container.sidebars>.sidebar-left:not(.container) .full-width,.container.sidebars>.sidebar-left:not(.container) .feature{grid-column-end:content-start}.container.sidebars>.sidebar-left>:not(.container,.breakout,.full-width,.feature),.container.sidebars>.sidebar-left .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-left}.container.sidebars>.sidebar-right{grid-row:1/-1;grid-template:subgrid}.container.sidebars>.sidebar-right:not(.container),.container.sidebars>.sidebar-right:not(.container) .container,.container.sidebars>.sidebar-right:not(.container) .breakout,.container.sidebars>.sidebar-right:not(.container) .full-width,.container.sidebars>.sidebar-right:not(.container) .feature{grid-column-start:content-end}.container.sidebars>.sidebar-right>:not(.container,.breakout,.full-width,.feature),.container.sidebars>.sidebar-right .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-right}.container.sidebars>.content{grid-row:1}.container.sidebars-left{--graupl-columns-content-max-width:var(--graupl-container-sidebars-left-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width,min(var(--graupl-container-sidebars-left-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-left-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars-left>.sidebar{grid-row:1/-1;grid-template:subgrid}.container.sidebars-left>.sidebar:not(.container),.container.sidebars-left>.sidebar:not(.container) .container,.container.sidebars-left>.sidebar:not(.container) .breakout,.container.sidebars-left>.sidebar:not(.container) .full-width,.container.sidebars-left>.sidebar:not(.container) .feature{grid-column-end:content-start}.container.sidebars-left>.sidebar>:not(.container,.breakout,.full-width,.feature),.container.sidebars-left>.sidebar .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar}.container.sidebars-left>.content{grid-row:1}.container.sidebars-right{--graupl-columns-content-max-width:var(--graupl-container-sidebars-right-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))));grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0rem), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0rem), var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width,min(var(--graupl-container-sidebars-right-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))) * 2 - var(--graupl-container-feature-section-min-width,0rem) * 2 - var(--graupl-container-breakout-section-min-width,0rem) - var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width,calc(var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) - var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width,var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) - var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width,max(var(--graupl-container-sidebar-width,26ch), var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width,calc(var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch))) + var(--graupl-container-feature-width,10ch))) - var(--graupl-container-breakout-max-width,calc(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)) + var(--graupl-container-breakout-width,4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))), var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars-right>.sidebar{grid-row:1/-1;grid-template:subgrid}.container.sidebars-right>.sidebar:not(.container),.container.sidebars-right>.sidebar:not(.container) .container,.container.sidebars-right>.sidebar:not(.container) .breakout,.container.sidebars-right>.sidebar:not(.container) .full-width,.container.sidebars-right>.sidebar:not(.container) .feature{grid-column-start:content-end}.container.sidebars-right>.sidebar>:not(.container,.breakout,.full-width,.feature),.container.sidebars-right>.sidebar .contain>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar}.container.sidebars-right>.content{grid-row:1}}}@layer graupl.theme{.container{background-color:var(--graupl-container-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-container-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=container.css.map */
package/dist/css/layout/container.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI,qBCDA,kCAEE,YAAA,CACA,sqECNJ,CDgBI,4GAKE,mBCbN,CDgBI,sDACE,oBCbN,CDgBI,oDACE,mBCbN,CDgBI,0DACE,sBCbN,CACF","file":"container.css"}
1
+ {"version":3,"sourceRoot":null,"mappings":"AESI,qBCiNF,+qGAkBE,2FAUA,+EAoDA,+DAKE,wFAaF,0CAKA,wCAKA,8CAOE,uHAOE,oHAYF,wHAOE,sHAYF,kHAOE,iPAkCF,uHAOE,+GAYF,uHAOE,mNAgCF,wHAOE,gHAYF,wHAOE,qNCleN,kCDigBI,44SAcE,sEAWI,kUAYF,sMA2BF,uEAWI,uUAYF,yMA2BF,wCAMF,8nNAcE,sEAWI,kUAYF,iMA2BF,6CAMF,uoNAcE,uEAWI,uUAYF,mMA2BF,gDDpwBJ,oBC8wBF","sources":["dist/css/layout/container.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/layout/container/_variables.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/layout/container/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_screen.scss"],"sourcesContent":["/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.layout {\n .container {\n display: grid;\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width, min(var(--graupl-container-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)), var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n }\n .container > .container {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n .container > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .contain {\n display: grid;\n grid-template-columns: subgrid;\n }\n .container .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: content;\n }\n .container .breakout {\n grid-column: breakout;\n }\n .container .feature {\n grid-column: feature;\n }\n .container .full-width {\n grid-column: full-width;\n }\n .container.sidebars .sidebar-left {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left) {\n grid-column: content;\n }\n .container.sidebars .sidebar-right {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar-left,\n .sidebar-right) {\n grid-column: content;\n }\n .container.sidebars-left .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-left .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-left .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .sidebar {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n }\n .container.sidebars-right .content > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n .container.sidebars-right .content .contain > :not(.container,\n .breakout,\n .full-width,\n .feature,\n .sidebar) {\n grid-column: content;\n }\n @media screen and (1024px <= width) {\n .container.sidebars {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-left-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-left-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-content-section-width, min(var(--graupl-container-sidebars-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) * 2 - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-right-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars > .sidebar-left {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-left:not(.container),\n .container.sidebars > .sidebar-left:not(.container) .container,\n .container.sidebars > .sidebar-left:not(.container) .breakout,\n .container.sidebars > .sidebar-left:not(.container) .full-width,\n .container.sidebars > .sidebar-left:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars > .sidebar-left > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-left .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-left;\n }\n .container.sidebars > .sidebar-right {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars > .sidebar-right:not(.container),\n .container.sidebars > .sidebar-right:not(.container) .container,\n .container.sidebars > .sidebar-right:not(.container) .breakout,\n .container.sidebars > .sidebar-right:not(.container) .full-width,\n .container.sidebars > .sidebar-right:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars > .sidebar-right > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .sidebar-right .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar-right;\n }\n .container.sidebars > .content {\n grid-row: 1;\n }\n .container.sidebars-left {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [sidebar-start feature-start] var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [sidebar-end breakout-start] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [content-start] var(--graupl-container-sidebars-left-content-section-width, min(var(--graupl-container-sidebars-left-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-left-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-left-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-left > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-left > .sidebar:not(.container),\n .container.sidebars-left > .sidebar:not(.container) .container,\n .container.sidebars-left > .sidebar:not(.container) .breakout,\n .container.sidebars-left > .sidebar:not(.container) .full-width,\n .container.sidebars-left > .sidebar:not(.container) .feature {\n grid-column-end: content-start;\n }\n .container.sidebars-left > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-left > .content {\n grid-row: 1;\n }\n .container.sidebars-right {\n --graupl-columns-content-max-width: var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))));\n grid-template-columns: [full-width-start] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [feature-start] var(--graupl-container-feature-section-width, minmax(var(--graupl-container-feature-section-min-width, 0rem), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width, minmax(var(--graupl-container-breakout-section-min-width, 0rem), var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-sidebars-right-content-section-width, min(var(--graupl-container-sidebars-right-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) - var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))))), var(--graupl-container-sidebars-right-content-section-max-width, calc(var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) - var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) + min(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2))))))) [content-end] var(--graupl-container-sidebars-breakout-section-width, var(--graupl-container-breakout-section-max-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))) [breakout-end sidebar-start] var(--graupl-container-sidebar-right-section-width, max(var(--graupl-container-sidebar-width, 26ch), var(--graupl-container-feature-section-max-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch))) + var(--graupl-container-feature-width, 10ch))) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + var(--graupl-container-breakout-width, 4ch)))) / 2)))) [feature-end sidebar-end] var(--graupl-container-full-width-section-width, minmax(var(--graupl-container-full-width-section-min-width, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))), var(--graupl-container-full-width-section-max-width, 1fr))) [full-width-end];\n }\n .container.sidebars-right > .sidebar {\n grid-row: 1/-1;\n grid-template: subgrid;\n }\n .container.sidebars-right > .sidebar:not(.container),\n .container.sidebars-right > .sidebar:not(.container) .container,\n .container.sidebars-right > .sidebar:not(.container) .breakout,\n .container.sidebars-right > .sidebar:not(.container) .full-width,\n .container.sidebars-right > .sidebar:not(.container) .feature {\n grid-column-start: content-end;\n }\n .container.sidebars-right > .sidebar > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .sidebar .contain > :not(.container,\n .breakout,\n .full-width,\n .feature) {\n grid-column: sidebar;\n }\n .container.sidebars-right > .content {\n grid-row: 1;\n }\n }\n}\n@layer graupl.theme {\n .container {\n background-color: var(--graupl-container-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-container-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}","// @graupl/core container layout 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-container-sidebar-width | 26ch |\n// | --graupl-container-breakout-width | 4ch |\n// | --graupl-container-feature-width | 10ch |\n// | --graupl-container-content-max-width | var(--graupl-content-max-width) |\n// | --graupl-container-breakout-max-width | calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width)) |\n// | --graupl-container-feature-max-width | calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width)) |\n// | --graupl-container-full-width-section-min-width | var(--graupl-spacer-5) |\n// | --graupl-container-full-width-section-max-width | 1fr |\n// | --graupl-container-feature-section-min-width | 0rem |\n// | --graupl-container-feature-section-max-width | calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2) |\n// | --graupl-container-breakout-section-min-width | 0rem |\n// | --graupl-container-breakout-section-max-width | calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2) |\n// | --graupl-container-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2)) |\n// | --graupl-container-content-section-max-width | var(--graupl-container-content-max-width) |\n// | --graupl-container-full-width-section-width | minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width)) |\n// | --graupl-container-feature-section-width | minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-breakout-section-width | minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width)) |\n// | --graupl-container-content-section-width | min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width)) |\n// | --graupl-container-sidebar-left-section-width | max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-sidebar-right-section-width | max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) |\n// | --graupl-container-sidebars-breakout-section-width | var(--graupl-container-breakout-section-max-width) |\n// | --graupl-container-sidebars-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width)) |\n// | --graupl-container-sidebars-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-content-section-width | min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width)) |\n// | --graupl-container-sidebars-right-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width)) |\n// | --graupl-container-sidebars-right-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-right-content-section-width | min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width)) |\n// | --graupl-container-sidebars-left-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width)) |\n// | --graupl-container-sidebars-left-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |\n// | --graupl-container-sidebars-left-content-section-width | min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width)) |\n// | --graupl-container-background | var(--graupl-background) |\n// | --graupl-container-color | var(--graupl-color) |\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 \"sass:map\";\n\n// --graupl-container-sidebar-width\n$container-sidebar-width: var(\n --#{root-defaults.$prefix}container-sidebar-width,\n #{defaults.$container-sidebar-width}\n);\n\n// --graupl-container-breakout-width\n$container-breakout-width: var(\n --#{root-defaults.$prefix}container-breakout-width,\n #{defaults.$container-breakout-width}\n);\n\n// --graupl-container-feature-width\n$container-feature-width: var(\n --#{root-defaults.$prefix}container-feature-width,\n #{defaults.$container-feature-width}\n);\n\n// --graupl-container-content-max-width\n$container-content-max-width: var(\n --#{root-defaults.$prefix}container-content-max-width,\n #{root-variables.$content-max-width}\n);\n\n// --graupl-container-breakout-max-width\n$container-breakout-max-width: var(\n --#{root-defaults.$prefix}container-breakout-max-width,\n calc(#{$container-content-max-width} + #{$container-breakout-width})\n);\n\n// --graupl-container-feature-max-width\n$container-feature-max-width: var(\n --#{root-defaults.$prefix}container-feature-max-width,\n calc(#{$container-breakout-max-width} + #{$container-feature-width})\n);\n\n// --graupl-container-full-width-section-min-width\n$container-full-width-section-min-width: var(\n --#{root-defaults.$prefix}container-full-width-section-min-width,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-container-full-width-section-max-width\n$container-full-width-section-max-width: var(\n --#{root-defaults.$prefix}container-full-width-section-max-width,\n 1fr\n);\n\n// --graupl-container-feature-section-min-width\n$container-feature-section-min-width: var(\n --#{root-defaults.$prefix}container-feature-section-min-width,\n 0rem\n);\n\n// --graupl-container-feature-section-max-width\n$container-feature-section-max-width: var(\n --#{root-defaults.$prefix}container-feature-section-max-width,\n calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)\n);\n\n// --graupl-container-breakout-section-min-width\n$container-breakout-section-min-width: var(\n --#{root-defaults.$prefix}container-breakout-section-min-width,\n 0rem\n);\n\n// --graupl-container-breakout-section-max-width\n$container-breakout-section-max-width: var(\n --#{root-defaults.$prefix}container-breakout-section-max-width,\n calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-container-content-section-min-width\n$container-content-section-min-width: var(\n --#{root-defaults.$prefix}container-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-breakout-section-min-width} * 2)\n )\n);\n/* stylelint-enable scss/operator-no-newline-after */\n// --graupl-container-content-section-max-width\n$container-content-section-max-width: var(\n --#{root-defaults.$prefix}container-content-section-max-width,\n #{$container-content-max-width}\n);\n\n// --graupl-container-full-width-section-width\n$container-full-width-section-width: var(\n --#{root-defaults.$prefix}container-full-width-section-width,\n minmax(\n #{$container-full-width-section-min-width},\n #{$container-full-width-section-max-width}\n )\n);\n\n// --graupl-container-feature-section-width\n$container-feature-section-width: var(\n --#{root-defaults.$prefix}container-feature-section-width,\n minmax(\n #{$container-feature-section-min-width},\n #{$container-feature-section-max-width}\n )\n);\n\n// --graupl-container-breakout-section-width\n$container-breakout-section-width: var(\n --#{root-defaults.$prefix}container-breakout-section-width,\n minmax(\n #{$container-breakout-section-min-width},\n #{$container-breakout-section-max-width}\n )\n);\n\n// --graupl-container-content-section-width\n$container-content-section-width: var(\n --#{root-defaults.$prefix}container-content-section-width,\n min(\n #{$container-content-section-min-width},\n #{$container-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebar-left-section-width\n$container-sidebar-left-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-left-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebar-right-section-width\n$container-sidebar-right-section-width: var(\n --#{root-defaults.$prefix}container-sidebar-right-section-width,\n max($container-sidebar-width, $container-feature-section-max-width)\n);\n\n// --graupl-container-sidebars-breakout-section-width\n$container-sidebars-breakout-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-breakout-section-width,\n #{$container-breakout-section-max-width}\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-container-sidebars-content-section-min-width\n$container-sidebars-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n (#{$container-sidebars-breakout-section-width} * 2) -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-content-section-max-width\n$container-sidebars-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width) +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-content-section-width\n$container-sidebars-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-content-section-width,\n min(\n #{$container-sidebars-content-section-min-width},\n #{$container-sidebars-content-section-max-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-min-width\n$container-sidebars-right-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-right-section-width}\n )\n);\n\n// --graupl-container-sidebars-right-content-section-max-width\n$container-sidebars-right-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-right-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-right-content-section-width\n$container-sidebars-right-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-right-content-section-width,\n min(\n $container-sidebars-right-content-section-min-width,\n $container-sidebars-right-content-section-max-width\n )\n);\n\n// --graupl-container-sidebars-left-content-section-min-width\n$container-sidebars-left-content-section-min-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-min-width,\n calc(\n 100% - (#{$container-full-width-section-min-width} * 2) -\n (#{$container-feature-section-min-width} * 2) -\n #{$container-breakout-section-min-width} -\n #{$container-sidebars-breakout-section-width} -\n #{$container-sidebar-left-section-width}\n )\n);\n\n// --graupl-container-sidebars-left-content-section-max-width\n$container-sidebars-left-content-section-max-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-max-width,\n calc(\n #{$container-content-section-max-width} -\n #{$container-sidebar-left-section-width} +\n min($container-sidebar-width, $container-feature-section-max-width)\n )\n);\n\n// --graupl-container-sidebars-left-content-section-width\n$container-sidebars-left-content-section-width: var(\n --#{root-defaults.$prefix}container-sidebars-left-content-section-width,\n min(\n $container-sidebars-left-content-section-min-width,\n $container-sidebars-left-content-section-max-width\n )\n);\n\n// --graupl-container-background\n$container-background: var(\n --#{root-defaults.$prefix}container-background,\n #{color.$background}\n);\n\n// --graupl-container-color\n$container-color: var(\n --#{root-defaults.$prefix}container-color,\n #{color.$color}\n);\n/* stylelint-enable scss/operator-no-newline-after */\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 container layout styles.\n//\n// This module provides the layout styles for the container component.\n//\n// The container component is a grid container that provides a layout for the main content of a page.\n// It is divided into four sections:\n// - Full-width: A full-width section that spans the entire width of the container.\n// - Feature: A feature section that is used for feature content.\n// - Breakout: A breakout section that is used for breakout content.\n// - Content: The main content section that contains all other content.\n//\n// Optionally, the container component can have sidebars, which divides the content section into five sections:\n// - Sidebar-left: A left sidebar section that is used for sidebar content.\n// - Sidebar-right: A right sidebar section that is used for sidebar content.\n// - Inner-content: A section that contains the main content of the page.\n// - Content-left: A section that contains the sidebar-left and inner-content sections.\n// - Content-right: A section that contains the inner-content and sidebar-right sections.\n//\n// The container layout is as follows:\n// | full-width | feature | breakout | content | breakout | feature | full-width |\n//\n// Nesting a container directly inside of another container will cause the\n// nested container to inherit the grid columns of the parent container.\n//\n// The following classes are generated by default:\n// - `.container`: The main container component.\n// - `.full-width`: A full-width container component.\n// - `.feature`: A feature container component.\n// - `.breakout`: A breakout container component.\n// - `.contain`: A utility class to contain child elements to the content section of the container grid.\n// - `.sidebars`: A utility class to enable two sidebars in the container.\n// - `.sidebars-left`: A utility class to enable a left sidebar in the container.\n// - `.sidebars-right`: A utility class to enable a right sidebar in the container.\n// - `.sidebar-left`: A left sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar-right`: A right sidebar container component used directly inside of a container with sidebars.\n// - `.sidebar`: A sidebar container component used directly inside of a container with sidebars.\n// - `.content`: A content container component used directly inside of a container with sidebars.\n//\n// The following custom properties can be used to customize the container component:\n// | Property | Description | Default Value |\n// | ------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-container-sidebar-width` | The width of the sidebar sections. | `26ch` |\n// | `--graupl-container-breakout-width` | The width that the breakout section will extend beyond the content. | `4ch` |\n// | `--graupl-container-feature-width` | The width that the feature section will extend beyond the breakout. | `10ch` |\n// | `--graupl-container-content-max-width` | The maximum width of the content section. | `var(--graupl-content-max-width)` |\n// | `--graupl-container-breakout-max-width` | The maximum width of the breakout section. | `calc(var(--graupl-container-content-max-width) + var(--graupl-container-breakout-width))` |\n// | `--graupl-container-feature-max-width` | The maximum width of the feature section. | `calc(var(--graupl-container-breakout-max-width) + var(--graupl-container-feature-width))` |\n// | `--graupl-container-full-width-section-min-width` | The minimum width of one side of the full-width section. | `var(--graupl-spacer-5)` |\n// | `--graupl-container-full-width-section-max-width` | The maximum width of one side of the full-width section. | `1fr` |\n// | `--graupl-container-feature-section-min-width` | The minimum width of one side of the feature section. | `0rem` |\n// | `--graupl-container-feature-section-max-width` | The maximum width of one side of the feature section. | `calc((var(--graupl-container-feature-max-width) - var(--graupl-container-breakout-max-width)) / 2)` |\n// | `--graupl-container-breakout-section-min-width` | The minimum width of one side of the breakout section. | `0rem` |\n// | `--graupl-container-breakout-section-max-width` | The maximum width of one side of the breakout section. | `calc((var(--graupl-container-breakout-max-width) - var(--graupl-container-content-max-width)) / 2)` |\n// | `--graupl-container-content-section-min-width` | The minimum width of the content section. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-breakout-section-min-width) * 2))` |\n// | `--graupl-container-content-section-max-width` | The maximum width of the content section. | `var(--graupl-container-content-max-width)` |\n// | `--graupl-container-full-width-section-width` | The calculated minmax width of the full-width section. | `minmax(var(--graupl-container-full-width-section-min-width), var(--graupl-container-full-width-section-max-width))` |\n// | `--graupl-container-feature-section-width` | The calculated minmax width of the feature section. | `minmax(var(--graupl-container-feature-section-min-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-breakout-section-width` | The calculated minmax width of the breakout section. | `minmax(var(--graupl-container-breakout-section-min-width), var(--graupl-container-breakout-section-max-width))` |\n// | `--graupl-container-content-section-width` | The calculated width of the content section. | `min(var(--graupl-container-content-section-min-width), var(--graupl-container-content-section-max-width))` |\n// | `--graupl-container-sidebar-left-section-width` | The width of the left sidebar section. | `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-sidebar-right-section-width` | The width of the right sidebar section. | `max(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))` |\n// | `--graupl-container-sidebars-breakout-section-width` | The breakout width when both sidebars are enabled. | `var(--graupl-container-breakout-section-max-width)` |\n// | `--graupl-container-sidebars-content-section-min-width` | The minimum width of the content section when both sidebars are enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - (var(--graupl-container-sidebars-breakout-section-width) * 2) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width))` |\n// | `--graupl-container-sidebars-content-section-max-width` | The maximum width of the content section when both sidebars are enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-content-section-width` | The calculated width of the content section when both sidebars are enabled. | `min(var(--graupl-container-sidebars-content-section-min-width), var(--graupl-container-sidebars-content-section-max-width))` |\n// | `--graupl-container-sidebars-right-content-section-min-width` | The minimum width of the content section when only the right sidebar is enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-right-section-width))` |\n// | `--graupl-container-sidebars-right-content-section-max-width` | The maximum width of the content section when only the right sidebar is enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-right-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-right-content-section-width` | The calculated width of the content section when only the right sidebar is enabled. | `min(var(--graupl-container-sidebars-right-content-section-min-width), var(--graupl-container-sidebars-right-content-section-max-width))` |\n// | `--graupl-container-sidebars-left-content-section-min-width` | The minimum width of the content section when only the left sidebar is enabled. | `calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width))` |\n// | `--graupl-container-sidebars-left-content-section-max-width` | The maximum width of the content section when only the left sidebar is enabled. | `calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width)))` |\n// | `--graupl-container-sidebars-left-content-section-width` | The calculated width of the content section when only the left sidebar is enabled. | `min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width))` |\n// | `--graupl-container-background` | The background of the container component. | `var(--graupl-background)` |\n// | `--graupl-container-color` | The text color of the container component. | `var(--graupl-color)` |\n//\n// The following sass variables can be used to customize the generation of the container component:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | ---------------------------------------------------------------------------- | ------------------------- |\n// | `$selector-base` | The selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$force-container-chaining` | A flag to force container chaining in all containers. | `false` |\n// | `$generate-forced-container-selectors` | A flag to generate a set of default selectors for forced container chaining. | `true` |\n// | `$show-warnings` | A flag to show any built-in warnings that may be output during compiling. | `true` |\n// | `$container-selector-base` | The base selector for the container component. | `\".\"` |\n// | `$container-selector` | The selector for the container component. | `\"container\"` |\n// | `$container-theme-selector-base` | The selector base for container theme modifiers. | `\".\"` |\n// | `$container-theme-selector-prefix` | The container theme modifier selector prefix. | `\"\"` |\n// | `$container-breakout-selector-base` | The base selector for the breakout container component. | `\".\"` |\n// | `$container-breakout-selector` | The selector for the breakout container component. | `\"breakout\"` |\n// | `$container-feature-selector-base` | The base selector for the feature container component. | `\".\"` |\n// | `$container-feature-selector` | The selector for the feature container component. | `\"feature\"` |\n// | `$container-full-width-selector-base` | The base selector for the full-width container component. | `\".\"` |\n// | `$container-full-width-selector` | The selector for the full-width container component. | `\"full-width\"` |\n// | `$container-contain-selector-base` | The base selector for the contain utility class. | `\".\"` |\n// | `$container-contain-selector` | The selector for the contain utility class. | `\"contain\"` |\n// | `$container-sidebars-selector-base` | The base selector for the sidebars utility class. | `\".\"` |\n// | `$container-sidebars-selector` | The selector for the sidebars utility class. | `\"sidebars\"` |\n// | `$container-content-selector-base` | The base selector for the content container component. | `\".\"` |\n// | `$container-content-selector` | The selector for the content container component. | `\"content\"` |\n// | `$container-sidebar-selector-base` | The base selector for the sidebar container component. | `\".\"` |\n// | `$container-sidebar-selector` | The selector for the sidebar container component. | `\"sidebar\"` |\n// | `$container-left-selector-suffix` | The suffix for the left sidebar selector. | `\"-left\"` |\n// | `$container-right-selector-suffix` | The suffix for the right sidebar selector. | `\"-right\"` |\n// | `$container-inner-selector-prefix` | The prefix for the inner content selector. | `\"inner-\"` |\n// | `$container-breakout-width` | The width of the breakout section will extend from the content section. | `4ch` |\n// | `$container-feature-width` | The width of the feature section will extend from the breakout section. | `10ch` |\n// | `$container-sidebar-width` | The width of the sidebar sections. | `26ch` |\n// | `$forced-container-selectors` | Additional selectors included in forced container chaining. | `()` |\n// | `$container-theme-mappings` | Map of properties/shades for container themes. | `()` |\n// | `$container-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// ## What is container chaining?\n//\n// Container chaining is a structural setup in the DOM in which you make sure that if you have nested containers or container-level elements (breakouts, features, etc.), you never allow them to be contained in anything other than a container.\n//\n// What do I mean by this?\n//\n// If you have to following setup in your DOM:\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section>\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// To achieve a breakout of the content inside of the <section>, you need to make sure the section is also a container, otherwise the breakout class will have no effect.\n//\n// ```\n// <div class=\"container\">\n// <p>Some content here...</p>\n// <section class=\"container\">\n// <p>Some content here...</p>\n// <div class=\"breakout\">\n// <p>Some content here that I would like to breakout...</p>\n// </div>\n// <p>Some content here...</p>\n// </section>\n// </div>\n// ```\n//\n// There _is_ a feature flag (`$force-container-chaining`) which automatically set up container chaining for you.\n//\n// This works by selecting all elements between a parent and child container and making them inherit the parent's layout.\n//\n// Because you have control over how this is limited, it can result in using an unrestricted :has() selector, which can be slow.\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"full-width\">\n// Full-width content\n// </div>\n// <div class=\"feature\">\n// Feature content\n// </div>\n// <div class=\"breakout\">\n// Breakout content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container\">\n// Regular content\n// <div class=\"feature contain\">\n// Contained feature content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-left\">\n// <div class=\"sidebar\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Content right content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars-right\">\n// <div class=\"content\">\n// Content left content\n// </div>\n// <div class=\"sidebar\">\n// Right sidebar content\n// </div>\n// </div>\n//\n// @example\n// <div class=\"container sidebars\">\n// <div class=\"sidebar-left\">\n// Left sidebar content\n// </div>\n// <div class=\"content\">\n// Inner content content\n// </div>\n// <div class=\"sidebar-right\">\n// Right sidebar content\n// </div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"variables\" as *;\n\n@include layer(layout) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n display: grid;\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-content-section-width\n [content-end]\n $container-breakout-section-width [breakout-end]\n $container-feature-section-width [feature-end]\n $container-full-width-section-width [full-width-end];\n container-type: inline-size;\n overflow-wrap: break-word;\n\n // Container components should span the full width of their parent container\n // and inherit the grid columns.\n //\n // > .container\n > #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n }\n\n // Everything in the container that isn't a container component should\n // be in the content section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n\n // Handle force chaining.\n //\n // This works by selecting all elements between a parent and child container\n // and making them inherit the parent's layout.\n //\n // Because you have control over how this is limited, it can result in using\n // an unrestricted :has() selector, which can be slow.\n @if defaults.$force-container-chaining {\n @if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn (\"You have enabled automatic container chaining. This can result in an unrestricted :has() selector if you customize $forced-container-selectors to be too broad, which can be slow. Make sure you know what you're doing with this.\");\n }\n\n // .container :is(article,aside,div,section):not(.container):has(&)\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n :is(#{defaults.$forced-container-selectors}):not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ):has(&) {\n display: grid;\n grid-column: 1/-1;\n grid-template-columns: subgrid;\n container-type: normal;\n\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n grid-column: 1/-1;\n container-type: normal;\n\n // &:not(.sidebars, .sidebars-left, .sidebars-right)\n &:not(\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-template-columns: subgrid;\n }\n }\n }\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n display: grid;\n grid-template-columns: subgrid;\n\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: content;\n }\n }\n\n // Set up the container components to span the appropriate grid columns.\n //\n // .breakout\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {\n grid-column: breakout;\n }\n\n // .feature\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column: feature;\n }\n\n // .full-width\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {\n grid-column: full-width;\n }\n\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n // .sidebar-left\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .sidebar-right\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n // .sidebar\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n\n // .content\n #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-content: flex-start;\n\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the content section.\n //\n // .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width, .sidebar)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},\n #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}\n ) {\n grid-column: content;\n }\n }\n }\n }\n\n @include screen.trigger(allow-sidebars) {\n // &.sidebars\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-left-start feature-start] $container-sidebar-left-section-width\n [sidebar-left-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-right-start] $container-sidebar-right-section-width\n [feature-end sidebar-right-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar-left\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar-left section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-left section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-left;\n }\n }\n }\n\n // > .sidebar-right\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar-right section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar-right section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar-right;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-left\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-left-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-left-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [sidebar-start feature-start] $container-sidebar-left-section-width\n [sidebar-end breakout-start] $container-sidebars-breakout-section-width\n [content-start] $container-sidebars-left-content-section-width\n [content-end] $container-breakout-section-width\n [breakout-end] $container-feature-section-width\n [feature-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-end: content-start;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n\n // &.sidebars-right\n &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector}#{defaults.$container-right-selector-suffix} {\n --#{root-defaults.$prefix}columns-content-max-width: #{$container-sidebars-right-content-section-max-width};\n\n grid-template-columns:\n [full-width-start] $container-full-width-section-width\n [feature-start] $container-feature-section-width\n [breakout-start] $container-breakout-section-width\n [content-start] $container-sidebars-right-content-section-width\n [content-end] $container-sidebars-breakout-section-width\n [breakout-end sidebar-start] $container-sidebar-right-section-width\n [feature-end sidebar-end] $container-full-width-section-width\n [full-width-end];\n\n // > .sidebar\n > #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector} {\n grid-row: 1 / -1;\n grid-template: subgrid;\n\n // Make sure other container classes do not break the layout inside of the sidebar.\n //\n // &:not(.container)\n &:not(\n #{defaults.$container-selector-base}#{defaults.$container-selector}\n ) {\n // &, .container, .breakout, .feature, .full-width\n &,\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {\n grid-column-start: content-end;\n }\n }\n\n // Lock content to the sidebar section.\n //\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n\n // Contain components should inherit the container's grid columns and\n // force all children to be in the sidebar section.\n //\n // > .contain\n #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {\n // > :not(.container, .breakout, .feature, .full-width)\n > :not(\n #{defaults.$container-selector-base}#{defaults.$container-selector},\n #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},\n #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},\n #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}\n ) {\n grid-column: sidebar;\n }\n }\n }\n\n // > .content\n > #{defaults.$container-content-selector-base}#{defaults.$container-content-selector} {\n grid-row: 1;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // .container\n #{defaults.$container-selector-base}#{defaults.$container-selector} {\n background-color: $container-background;\n color: $container-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$container-theme-map,\n defaults.$container-theme-selector-base,\n defaults.$container-theme-selector-prefix,\n \"container-\"\n );\n }\n }\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":[]}