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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (273) hide show
  1. package/dist/css/base/button.css +2 -2
  2. package/dist/css/base/button.css.map +1 -1
  3. package/dist/css/base/form.css +2 -2
  4. package/dist/css/base/form.css.map +1 -1
  5. package/dist/css/base/link.css +2 -2
  6. package/dist/css/base/link.css.map +1 -1
  7. package/dist/css/base/table.css +2 -2
  8. package/dist/css/base/table.css.map +1 -1
  9. package/dist/css/base.css +2 -2
  10. package/dist/css/base.css.map +1 -1
  11. package/dist/css/component/accordion.css +2 -5
  12. package/dist/css/component/accordion.css.map +1 -1
  13. package/dist/css/component/alert.css +2 -2
  14. package/dist/css/component/alert.css.map +1 -1
  15. package/dist/css/component/badge.css +2 -2
  16. package/dist/css/component/badge.css.map +1 -1
  17. package/dist/css/component/card.css +2 -2
  18. package/dist/css/component/card.css.map +1 -1
  19. package/dist/css/component/carousel.css +2 -2
  20. package/dist/css/component/carousel.css.map +1 -1
  21. package/dist/css/component/disclosure.css +2 -2
  22. package/dist/css/component/disclosure.css.map +1 -1
  23. package/dist/css/component/input-group.css +2 -2
  24. package/dist/css/component/input-group.css.map +1 -1
  25. package/dist/css/component/list.css +2 -2
  26. package/dist/css/component/list.css.map +1 -1
  27. package/dist/css/component/menu.css +2 -2
  28. package/dist/css/component/menu.css.map +1 -1
  29. package/dist/css/component/navigation.css +2 -2
  30. package/dist/css/component/navigation.css.map +1 -1
  31. package/dist/css/component.css +2 -5
  32. package/dist/css/component.css.map +1 -1
  33. package/dist/css/graupl.css +2 -5
  34. package/dist/css/graupl.css.map +1 -1
  35. package/dist/css/init.css +2 -2
  36. package/dist/css/init.css.map +1 -1
  37. package/dist/css/layout/columns.css +2 -2
  38. package/dist/css/layout/columns.css.map +1 -1
  39. package/dist/css/layout/container.css +2 -2
  40. package/dist/css/layout/container.css.map +1 -1
  41. package/dist/css/layout/flex-columns.css +2 -2
  42. package/dist/css/layout/flex-columns.css.map +1 -1
  43. package/dist/css/layout.css +2 -5
  44. package/dist/css/layout.css.map +1 -1
  45. package/dist/css/normalize.css +2 -2
  46. package/dist/css/normalize.css.map +1 -1
  47. package/dist/css/state/focus.css +2 -2
  48. package/dist/css/state/focus.css.map +1 -1
  49. package/dist/css/state.css +2 -2
  50. package/dist/css/state.css.map +1 -1
  51. package/dist/css/theme/color.css +2 -2
  52. package/dist/css/theme/color.css.map +1 -1
  53. package/dist/css/theme/typography.css +2 -2
  54. package/dist/css/theme/typography.css.map +1 -1
  55. package/dist/css/theme.css +2 -2
  56. package/dist/css/theme.css.map +1 -1
  57. package/dist/css/utilities/alignment.css +1 -1
  58. package/dist/css/utilities/alignment.css.map +1 -1
  59. package/dist/css/utilities/background.css +2 -2
  60. package/dist/css/utilities/background.css.map +1 -1
  61. package/dist/css/utilities/border.css +2 -2
  62. package/dist/css/utilities/border.css.map +1 -1
  63. package/dist/css/utilities/color.css +2 -2
  64. package/dist/css/utilities/color.css.map +1 -1
  65. package/dist/css/utilities/container.css +1 -1
  66. package/dist/css/utilities/container.css.map +1 -1
  67. package/dist/css/utilities/display.css +2 -2
  68. package/dist/css/utilities/display.css.map +1 -1
  69. package/dist/css/utilities/flex.css +2 -2
  70. package/dist/css/utilities/flex.css.map +1 -1
  71. package/dist/css/utilities/gradient.css +2 -2
  72. package/dist/css/utilities/gradient.css.map +1 -1
  73. package/dist/css/utilities/height.css +2 -2
  74. package/dist/css/utilities/height.css.map +1 -1
  75. package/dist/css/utilities/inset.css +2 -2
  76. package/dist/css/utilities/inset.css.map +1 -1
  77. package/dist/css/utilities/justification.css +1 -1
  78. package/dist/css/utilities/justification.css.map +1 -1
  79. package/dist/css/utilities/list.css +1 -1
  80. package/dist/css/utilities/list.css.map +1 -1
  81. package/dist/css/utilities/order.css +2 -2
  82. package/dist/css/utilities/order.css.map +1 -1
  83. package/dist/css/utilities/position.css +2 -2
  84. package/dist/css/utilities/position.css.map +1 -1
  85. package/dist/css/utilities/ratio.css +2 -2
  86. package/dist/css/utilities/ratio.css.map +1 -1
  87. package/dist/css/utilities/spacing.css +2 -2
  88. package/dist/css/utilities/spacing.css.map +1 -1
  89. package/dist/css/utilities/typography.css +2 -2
  90. package/dist/css/utilities/typography.css.map +1 -1
  91. package/dist/css/utilities/visibility.css +2 -2
  92. package/dist/css/utilities/visibility.css.map +1 -1
  93. package/dist/css/utilities/visually-hidden.css +2 -2
  94. package/dist/css/utilities/visually-hidden.css.map +1 -1
  95. package/dist/css/utilities/width.css +2 -2
  96. package/dist/css/utilities/width.css.map +1 -1
  97. package/dist/css/utilities/z-index.css +1 -1
  98. package/dist/css/utilities/z-index.css.map +1 -1
  99. package/dist/css/utilities.css +2 -2
  100. package/dist/css/utilities.css.map +1 -1
  101. package/dist/js/accordion.js.map +1 -1
  102. package/dist/js/alert.js.map +1 -1
  103. package/dist/js/carousel.js.map +1 -1
  104. package/dist/js/component/accordion.cjs.js.map +1 -1
  105. package/dist/js/component/accordion.es.js.map +1 -1
  106. package/dist/js/component/accordion.iife.js.map +1 -1
  107. package/dist/js/component/alert.cjs.js.map +1 -1
  108. package/dist/js/component/alert.es.js.map +1 -1
  109. package/dist/js/component/alert.iife.js.map +1 -1
  110. package/dist/js/component/carousel.cjs.js.map +1 -1
  111. package/dist/js/component/carousel.es.js.map +1 -1
  112. package/dist/js/component/carousel.iife.js.map +1 -1
  113. package/dist/js/component/disclosure.cjs.js +2 -2
  114. package/dist/js/component/disclosure.cjs.js.map +1 -1
  115. package/dist/js/component/disclosure.es.js +2 -2
  116. package/dist/js/component/disclosure.es.js.map +1 -1
  117. package/dist/js/component/disclosure.iife.js +2 -2
  118. package/dist/js/component/disclosure.iife.js.map +1 -1
  119. package/dist/js/component/tabs.cjs.js +5 -0
  120. package/dist/js/component/tabs.cjs.js.map +1 -0
  121. package/dist/js/component/tabs.es.js +5 -0
  122. package/dist/js/component/tabs.es.js.map +1 -0
  123. package/dist/js/component/tabs.iife.js +5 -0
  124. package/dist/js/component/tabs.iife.js.map +1 -0
  125. package/dist/js/disclosure.js +2 -2
  126. package/dist/js/disclosure.js.map +1 -1
  127. package/dist/js/generator/accordion.cjs.js.map +1 -1
  128. package/dist/js/generator/accordion.es.js.map +1 -1
  129. package/dist/js/generator/accordion.iife.js.map +1 -1
  130. package/dist/js/generator/alert.cjs.js.map +1 -1
  131. package/dist/js/generator/alert.es.js.map +1 -1
  132. package/dist/js/generator/alert.iife.js.map +1 -1
  133. package/dist/js/generator/carousel.cjs.js.map +1 -1
  134. package/dist/js/generator/carousel.es.js.map +1 -1
  135. package/dist/js/generator/carousel.iife.js.map +1 -1
  136. package/dist/js/generator/disclosure.cjs.js +2 -2
  137. package/dist/js/generator/disclosure.cjs.js.map +1 -1
  138. package/dist/js/generator/disclosure.es.js +2 -2
  139. package/dist/js/generator/disclosure.es.js.map +1 -1
  140. package/dist/js/generator/disclosure.iife.js +2 -2
  141. package/dist/js/generator/disclosure.iife.js.map +1 -1
  142. package/dist/js/generator/navigation.cjs.js.map +1 -1
  143. package/dist/js/generator/navigation.es.js.map +1 -1
  144. package/dist/js/generator/navigation.iife.js.map +1 -1
  145. package/dist/js/generator/tabs.cjs.js +5 -0
  146. package/dist/js/generator/tabs.cjs.js.map +1 -0
  147. package/dist/js/generator/tabs.es.js +5 -0
  148. package/dist/js/generator/tabs.es.js.map +1 -0
  149. package/dist/js/generator/tabs.iife.js +5 -0
  150. package/dist/js/generator/tabs.iife.js.map +1 -0
  151. package/dist/js/graupl.js +5 -5
  152. package/dist/js/graupl.js.map +1 -1
  153. package/dist/js/navigation.js.map +1 -1
  154. package/dist/js/tabs.js +5 -0
  155. package/dist/js/tabs.js.map +1 -0
  156. package/package.json +4 -3
  157. package/src/js/disclosure/Disclosure.js +25 -45
  158. package/src/js/domHelpers.js +39 -22
  159. package/src/js/tabs/TabToggle.js +378 -0
  160. package/src/js/tabs/Tabs.js +1091 -0
  161. package/src/js/tabs/generator.js +32 -0
  162. package/src/js/tabs/index.js +5 -0
  163. package/src/scss/_defaults.scss +21 -88
  164. package/src/scss/_variables.scss +70 -0
  165. package/src/scss/base/button/_defaults.scss +2 -24
  166. package/src/scss/base/button/_index.scss +53 -52
  167. package/src/scss/base/button/_mixins.scss +24 -58
  168. package/src/scss/base/button/_variables.scss +139 -0
  169. package/src/scss/base/form/_defaults.scss +72 -2
  170. package/src/scss/base/form/_index.scss +196 -70
  171. package/src/scss/base/form/_variables.scss +166 -0
  172. package/src/scss/base/link/_defaults.scss +31 -0
  173. package/src/scss/base/link/_index.scss +177 -172
  174. package/src/scss/base/link/_variables.scss +215 -0
  175. package/src/scss/base/table/_defaults.scss +1 -11
  176. package/src/scss/base/table/_index.scss +126 -117
  177. package/src/scss/base/table/_variables.scss +214 -3
  178. package/src/scss/component/_index.scss +1 -0
  179. package/src/scss/component/accordion/_defaults.scss +73 -22
  180. package/src/scss/component/accordion/_index.scss +437 -62
  181. package/src/scss/component/accordion/_variables.scss +527 -101
  182. package/src/scss/component/alert/_defaults.scss +23 -32
  183. package/src/scss/component/alert/_index.scss +236 -30
  184. package/src/scss/component/alert/_variables.scss +155 -6
  185. package/src/scss/component/badge/_defaults.scss +1 -0
  186. package/src/scss/component/badge/_index.scss +25 -28
  187. package/src/scss/component/badge/_variables.scss +66 -2
  188. package/src/scss/component/card/_defaults.scss +64 -13
  189. package/src/scss/component/card/_index.scss +276 -30
  190. package/src/scss/component/card/_variables.scss +132 -0
  191. package/src/scss/component/carousel/_defaults.scss +73 -15
  192. package/src/scss/component/carousel/_index.scss +357 -41
  193. package/src/scss/component/carousel/_variables.scss +391 -0
  194. package/src/scss/component/disclosure/_index.scss +4 -4
  195. package/src/scss/component/disclosure/_variables.scss +127 -2
  196. package/src/scss/component/input-group/_defaults.scss +10 -3
  197. package/src/scss/component/input-group/_index.scss +72 -4
  198. package/src/scss/component/input-group/_variables.scss +37 -0
  199. package/src/scss/component/list/_defaults.scss +35 -2
  200. package/src/scss/component/list/_index.scss +159 -5
  201. package/src/scss/component/list/_variables.scss +152 -0
  202. package/src/scss/component/menu/_defaults.scss +49 -7
  203. package/src/scss/component/menu/_index.scss +325 -99
  204. package/src/scss/component/menu/_variables.scss +484 -1
  205. package/src/scss/component/navigation/_defaults.scss +45 -3
  206. package/src/scss/component/navigation/_index.scss +249 -98
  207. package/src/scss/component/navigation/_variables.scss +334 -5
  208. package/src/scss/component/tabs/_defaults.scss +82 -0
  209. package/src/scss/component/tabs/_index.scss +497 -0
  210. package/src/scss/component/tabs/_variables.scss +974 -0
  211. package/src/scss/layout/columns/_defaults.scss +5 -3
  212. package/src/scss/layout/columns/_index.scss +27 -21
  213. package/src/scss/layout/columns/_variables.scss +13 -0
  214. package/src/scss/layout/container/_defaults.scss +28 -11
  215. package/src/scss/layout/container/_index.scss +305 -161
  216. package/src/scss/layout/container/_variables.scss +148 -15
  217. package/src/scss/layout/flex-columns/_defaults.scss +5 -3
  218. package/src/scss/layout/flex-columns/_index.scss +28 -20
  219. package/src/scss/layout/flex-columns/_variables.scss +9 -0
  220. package/src/scss/mixins/_state.scss +37 -0
  221. package/src/scss/mixins/_theme.scss +36 -1
  222. package/src/scss/state/focus/_index.scss +17 -12
  223. package/src/scss/state/focus/_variables.scss +30 -4
  224. package/src/scss/theme/color/_defaults.scss +6 -35
  225. package/src/scss/theme/color/_index.scss +167 -1
  226. package/src/scss/theme/color/_variables.scss +155 -0
  227. package/src/scss/theme/typography/_defaults.scss +26 -19
  228. package/src/scss/theme/typography/_index.scss +176 -20
  229. package/src/scss/theme/typography/_variables.scss +186 -0
  230. package/src/scss/utilities/_template/_index.scss +0 -1
  231. package/src/scss/utilities/alignment/_defaults.scss +0 -33
  232. package/src/scss/utilities/alignment/_index.scss +24 -25
  233. package/src/scss/utilities/background/_defaults.scss +0 -77
  234. package/src/scss/utilities/background/_index.scss +32 -37
  235. package/src/scss/utilities/border/_defaults.scss +0 -33
  236. package/src/scss/utilities/border/_index.scss +25 -26
  237. package/src/scss/utilities/color/_defaults.scss +0 -19
  238. package/src/scss/utilities/color/_index.scss +22 -22
  239. package/src/scss/utilities/container/_defaults.scss +0 -11
  240. package/src/scss/utilities/container/_index.scss +20 -19
  241. package/src/scss/utilities/display/_defaults.scss +0 -11
  242. package/src/scss/utilities/display/_index.scss +20 -19
  243. package/src/scss/utilities/flex/_defaults.scss +0 -55
  244. package/src/scss/utilities/flex/_index.scss +28 -31
  245. package/src/scss/utilities/gradient/_defaults.scss +0 -28
  246. package/src/scss/utilities/gradient/_index.scss +27 -28
  247. package/src/scss/utilities/gradient/_variables.scss +15 -0
  248. package/src/scss/utilities/height/_defaults.scss +0 -8
  249. package/src/scss/utilities/height/_index.scss +22 -21
  250. package/src/scss/utilities/inset/_defaults.scss +0 -16
  251. package/src/scss/utilities/inset/_index.scss +20 -20
  252. package/src/scss/utilities/justification/_defaults.scss +0 -33
  253. package/src/scss/utilities/justification/_index.scss +24 -25
  254. package/src/scss/utilities/list/_defaults.scss +0 -22
  255. package/src/scss/utilities/list/_index.scss +22 -22
  256. package/src/scss/utilities/order/_defaults.scss +0 -8
  257. package/src/scss/utilities/order/_index.scss +20 -19
  258. package/src/scss/utilities/position/_defaults.scss +0 -11
  259. package/src/scss/utilities/position/_index.scss +20 -19
  260. package/src/scss/utilities/ratio/_defaults.scss +0 -8
  261. package/src/scss/utilities/ratio/_index.scss +22 -21
  262. package/src/scss/utilities/ratio/_variables.scss +6 -0
  263. package/src/scss/utilities/spacing/_defaults.scss +0 -11
  264. package/src/scss/utilities/spacing/_index.scss +18 -17
  265. package/src/scss/utilities/typography/_defaults.scss +0 -22
  266. package/src/scss/utilities/typography/_index.scss +27 -26
  267. package/src/scss/utilities/visibility/_defaults.scss +0 -11
  268. package/src/scss/utilities/visibility/_index.scss +19 -18
  269. package/src/scss/utilities/visually-hidden/_index.scss +19 -17
  270. package/src/scss/utilities/width/_defaults.scss +0 -8
  271. package/src/scss/utilities/width/_index.scss +21 -20
  272. package/src/scss/utilities/z-index/_defaults.scss +0 -11
  273. package/src/scss/utilities/z-index/_index.scss +19 -18
package/src/scss/component/tabs/_index.scss ADDED
@@ -0,0 +1,497 @@
1
+ // @graupl/core tabs base styles.
2
+ //
3
+ // This module provides the base styles for the tabs component.
4
+ //
5
+ // The following selectors are generated by default:
6
+ // - `.tabs`: The tabs component.
7
+ // - `.tab-list`: The list of tabs in the tabs component.
8
+ // - `.tab-toggle`: The individual tab toggle component.
9
+ // - `.tab-content`: The individual tab content component.
10
+ // - `.primary`: A component modifier to use the primary colour for the tabs component.
11
+ // - `.secondary`: A component modifier to use the secondary colour for the tabs component.
12
+ // - `.tertiary`: A component modifier to use the tertiary colour for the tabs component.
13
+ //
14
+ // The following custom properties can be used to customize the tabs component:
15
+ // | Property | Description | Default Value |
16
+ // | --- | --- | --- |
17
+ // | `--graupl-tabs-padding-x` | The horizontal padding of the tabs component. | `var(--graupl-spacer-0)` |
18
+ // | `--graupl-tabs-padding-y` | The vertical padding of the tabs component. | `var(--graupl-spacer-0)` |
19
+ // | `--graupl-tabs-padding` | The padding of the tabs component (combines y and x padding). | `var(--graupl-tabs-padding-y) var(--graupl-tabs-padding-x)` |
20
+ // | `--graupl-tabs-color` | The text colour of the tabs component. | `var(--graupl-color)` |
21
+ // | `--graupl-tabs-background` | The background colour of the tabs component. | `var(--graupl-background)` |
22
+ // | `--graupl-tabs-border-color` | The border colour of the tabs component. | `var(--graupl-tabs-color)` |
23
+ // | `--graupl-tabs-border-top-left-radius` | The top left border radius of the tabs component. | `var(--graupl-border-top-left-radius)` |
24
+ // | `--graupl-tabs-border-top-right-radius` | The top right border radius of the tabs component. | `var(--graupl-border-top-right-radius)` |
25
+ // | `--graupl-tabs-border-bottom-right-radius` | The bottom right border radius of the tabs component. | `var(--graupl-border-bottom-right-radius)` |
26
+ // | `--graupl-tabs-border-bottom-left-radius` | The bottom left border radius of the tabs component. | `var(--graupl-border-bottom-left-radius)` |
27
+ // | `--graupl-tabs-border-radius` | The border radius of the tabs component (combines top-left, top-right, bottom-right, and bottom-left). | `var(--graupl-tabs-border-top-left-radius) var(--graupl-tabs-border-top-right-radius) var(--graupl-tabs-border-bottom-right-radius) var(--graupl-tabs-border-bottom-left-radius)` |
28
+ // | `--graupl-tabs-border-top-width` | The top border width of the tabs component. | `0rem` |
29
+ // | `--graupl-tabs-border-right-width` | The right border width of the tabs component. | `0rem` |
30
+ // | `--graupl-tabs-border-bottom-width` | The bottom border width of the tabs component. | `0rem` |
31
+ // | `--graupl-tabs-border-left-width` | The left border width of the tabs component. | `0rem` |
32
+ // | `--graupl-tabs-border-width` | The border width of the tabs component (combines top, right, bottom, and left widths). | `var(--graupl-tabs-border-top-width) var(--graupl-tabs-border-right-width) var(--graupl-tabs-border-bottom-width) var(--graupl-tabs-border-left-width)` |
33
+ // | `--graupl-tabs-border-top-style` | The top border style of the tabs component. | `var(--graupl-border-top-style)` |
34
+ // | `--graupl-tabs-border-right-style` | The right border style of the tabs component. | `var(--graupl-border-right-style)` |
35
+ // | `--graupl-tabs-border-bottom-style` | The bottom border style of the tabs component. | `var(--graupl-border-bottom-style)` |
36
+ // | `--graupl-tabs-border-left-style` | The left border style of the tabs component. | `var(--graupl-border-left-style)` |
37
+ // | `--graupl-tabs-border-style` | The border style of the tabs component (combines top, right, bottom, and left styles). | `var(--graupl-tabs-border-top-style) var(--graupl-tabs-border-right-style) var(--graupl-tabs-border-bottom-style) var(--graupl-tabs-border-left-style)` |
38
+ // | `--graupl-tabs-tab-list-column-gap` | The column gap between tab toggles. | `var(--graupl-spacer-0)` |
39
+ // | `--graupl-tabs-tab-list-row-gap` | The row gap between tab toggles. | `var(--graupl-spacer-2)` |
40
+ // | `--graupl-tabs-tab-list-gap` | The gap between tab toggles (combines column and row gaps). | `var(--graupl-tabs-tab-list-column-gap) var(--graupl-tabs-tab-list-row-gap)` |
41
+ // | `--graupl-tabs-tab-list-background` | The background colour of the tab list component. | `var(--graupl-tabs-background)` |
42
+ // | `--graupl-tabs-tab-list-color` | The text colour of the tab list component. | `var(--graupl-tabs-color)` |
43
+ // | `--graupl-tabs-tab-list-border-color` | The border colour of the tab list component. | `var(--graupl-tabs-border-color)` |
44
+ // | `--graupl-tabs-tab-list-border-top-left-radius` | The top left border radius of the tab list component. | `var(--graupl-border-top-left-radius)` |
45
+ // | `--graupl-tabs-tab-list-border-top-right-radius` | The top right border radius of the tab list component. | `var(--graupl-border-top-right-radius)` |
46
+ // | `--graupl-tabs-tab-list-border-bottom-right-radius` | The bottom right border radius of the tab list component. | `var(--graupl-border-bottom-right-radius)` |
47
+ // | `--graupl-tabs-tab-list-border-bottom-left-radius` | The bottom left border radius of the tab list component. | `var(--graupl-border-bottom-left-radius)` |
48
+ // | `--graupl-tabs-tab-list-border-radius` | The border radius of the tab list component. | `var(--graupl-tabs-tab-list-border-top-left-radius) var(--graupl-tabs-tab-list-border-top-right-radius) var(--graupl-tabs-tab-list-border-bottom-right-radius) var(--graupl-tabs-tab-list-border-bottom-left-radius)` |
49
+ // | `--graupl-tabs-tab-list-border-top-width` | The top border width of the tab list component. | `0rem` |
50
+ // | `--graupl-tabs-tab-list-border-right-width` | The right border width of the tab list component. | `0rem` |
51
+ // | `--graupl-tabs-tab-list-border-bottom-width` | The bottom border width of the tab list component. | `0rem` |
52
+ // | `--graupl-tabs-tab-list-border-left-width` | The left border width of the tab list component. | `0rem` |
53
+ // | `--graupl-tabs-tab-list-border-width` | The border width of the tab list component (combines top, right, bottom, and left widths). | `var(--graupl-tabs-tab-list-border-top-width) var(--graupl-tabs-tab-list-border-right-width) var(--graupl-tabs-tab-list-border-bottom-width) var(--graupl-tabs-tab-list-border-left-width)` |
54
+ // | `--graupl-tabs-tab-list-border-top-style` | The top border style of the tab list component. | `var(--graupl-border-top-style)` |
55
+ // | `--graupl-tabs-tab-list-border-right-style` | The right border style of the tab list component. | `var(--graupl-border-right-style)` |
56
+ // | `--graupl-tabs-tab-list-border-bottom-style` | The bottom border style of the tab list component. | `var(--graupl-border-bottom-style)` |
57
+ // | `--graupl-tabs-tab-list-border-left-style` | The left border style of the tab list component. | `var(--graupl-border-left-style)` |
58
+ // | `--graupl-tabs-tab-list-border-style` | The border style of the tab list component (combines top, right, bottom, and left styles). | `var(--graupl-tabs-tab-list-border-top-style) var(--graupl-tabs-tab-list-border-right-style) var(--graupl-tabs-tab-list-border-bottom-style) var(--graupl-tabs-tab-list-border-left-style)` |
59
+ // | `--graupl-tabs-tab-list-padding-x` | The horizontal padding of the tab list component. | `var(--graupl-spacer-0)` |
60
+ // | `--graupl-tabs-tab-list-padding-y` | The vertical padding of the tab list component. | `var(--graupl-spacer-0)` |
61
+ // | `--graupl-tabs-tab-list-padding` | The padding of the tab list component (combines y and x padding). | `var(--graupl-tabs-tab-list-padding-y) var(--graupl-tabs-tab-list-padding-x)` |
62
+ // | `--graupl-tabs-tab-list-margin` | The margin of the tab list component. | `0 0 calc(-1 * max(var(--graupl-tabs-tab-list-border-bottom-width), var(--graupl-tabs-tab-toggle-border-bottom-width))) 0` |
63
+ // | `--graupl-tabs-tab-toggle-padding-x` | The horizontal padding of the tab toggle component. | `var(--graupl-spacer-5)` |
64
+ // | `--graupl-tabs-tab-toggle-padding-y` | The vertical padding of the tab toggle component. | `var(--graupl-spacer-3)` |
65
+ // | `--graupl-tabs-tab-toggle-padding` | The padding of the tab toggle component (combines y and x padding). | `var(--graupl-tabs-tab-toggle-padding-y) var(--graupl-tabs-tab-toggle-padding-x)` |
66
+ // | `--graupl-tabs-tab-toggle-border-top-left-radius` | The top left border radius of the tab toggle component. | `var(--graupl-border-top-left-radius)` |
67
+ // | `--graupl-tabs-tab-toggle-border-top-right-radius` | The top right border radius of the tab toggle component. | `var(--graupl-border-top-right-radius)` |
68
+ // | `--graupl-tabs-tab-toggle-border-bottom-right-radius` | The bottom right border radius of the tab toggle component. | `var(--graupl-border-bottom-right-radius)` |
69
+ // | `--graupl-tabs-tab-toggle-border-bottom-left-radius` | The bottom left border radius of the tab toggle component. | `var(--graupl-border-bottom-left-radius)` |
70
+ // | `--graupl-tabs-tab-toggle-border-radius` | The border radius of the tab toggle component. | `var(--graupl-tabs-tab-toggle-border-top-left-radius) var(--graupl-tabs-tab-toggle-border-top-right-radius) var(--graupl-tabs-tab-toggle-border-bottom-right-radius) var(--graupl-tabs-tab-toggle-border-bottom-left-radius)` |
71
+ // | `--graupl-tabs-tab-toggle-border-top-width` | The top border width of the tab toggle component. | `var(--graupl-border-top-width)` |
72
+ // | `--graupl-tabs-tab-toggle-border-right-width` | The right border width of the tab toggle component. | `var(--graupl-border-right-width)` |
73
+ // | `--graupl-tabs-tab-toggle-border-bottom-width` | The bottom border width of the tab toggle component. | `var(--graupl-border-bottom-width)` |
74
+ // | `--graupl-tabs-tab-toggle-border-left-width` | The left border width of the tab toggle component. | `var(--graupl-border-left-width)` |
75
+ // | `--graupl-tabs-tab-toggle-border-width` | The border width of the tab toggle component (combines top, right, bottom, and left widths). | `var(--graupl-tabs-tab-toggle-border-top-width) var(--graupl-tabs-tab-toggle-border-right-width) var(--graupl-tabs-tab-toggle-border-bottom-width) var(--graupl-tabs-tab-toggle-border-left-width)` |
76
+ // | `--graupl-tabs-tab-toggle-border-top-style` | The top border style of the tab toggle component. | `var(--graupl-border-top-style)` |
77
+ // | `--graupl-tabs-tab-toggle-border-right-style` | The right border style of the tab toggle component. | `var(--graupl-border-right-style)` |
78
+ // | `--graupl-tabs-tab-toggle-border-bottom-style` | The bottom border style of the tab toggle component. | `var(--graupl-border-bottom-style)` |
79
+ // | `--graupl-tabs-tab-toggle-border-left-style` | The left border style of the tab toggle component. | `var(--graupl-border-left-style)` |
80
+ // | `--graupl-tabs-tab-toggle-border-style` | The border style of the tab toggle component (combines top, right, bottom, and left styles). | `var(--graupl-tabs-tab-toggle-border-top-style) var(--graupl-tabs-tab-toggle-border-right-style) var(--graupl-tabs-tab-toggle-border-bottom-style) var(--graupl-tabs-tab-toggle-border-left-style)` |
81
+ // | `--graupl-tabs-tab-toggle-background` | The background colour of the tab toggle component. | `var(--graupl-tabs-tab-list-background)` |
82
+ // | `--graupl-tabs-tab-toggle-visited-background` | The background colour of a visited tab toggle component. | `var(--graupl-tabs-tab-toggle-background)` |
83
+ // | `--graupl-tabs-tab-toggle-focus-background` | The background colour of a focused tab toggle component. | `var(--graupl-tabs-tab-toggle-background)` |
84
+ // | `--graupl-tabs-tab-toggle-hover-background` | The background colour of a hovered tab toggle component. | `var(--graupl-tabs-tab-list-color)` |
85
+ // | `--graupl-tabs-tab-toggle-active-background` | The background colour of an active tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-background)` |
86
+ // | `--graupl-tabs-tab-toggle-selected-background` | The background colour of a selected tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-background)` |
87
+ // | `--graupl-tabs-tab-toggle-disabled-background` | The background colour of a disabled tab toggle component. | `var(--graupl-tabs-tab-list-background)` |
88
+ // | `--graupl-tabs-tab-toggle-color` | The text colour of the tab toggle component. | `var(--graupl-tabs-tab-list-color)` |
89
+ // | `--graupl-tabs-tab-toggle-visited-color` | The text colour of a visited tab toggle component. | `var(--graupl-tabs-tab-toggle-color)` |
90
+ // | `--graupl-tabs-tab-toggle-focus-color` | The text colour of a focused tab toggle component. | `var(--graupl-tabs-tab-toggle-color)` |
91
+ // | `--graupl-tabs-tab-toggle-hover-color` | The text colour of a hovered tab toggle component. | `var(--graupl-tabs-tab-list-background)` |
92
+ // | `--graupl-tabs-tab-toggle-active-color` | The text colour of an active tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-color)` |
93
+ // | `--graupl-tabs-tab-toggle-selected-color` | The text colour of a selected tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-color)` |
94
+ // | `--graupl-tabs-tab-toggle-disabled-color` | The text colour of a disabled tab toggle component. | `var(--graupl-theme-active--primary--200)` |
95
+ // | `--graupl-tabs-tab-toggle-border-color` | The border colour of the tab toggle component. | `var(--graupl-tabs-tab-list-border-color)` |
96
+ // | `--graupl-tabs-tab-toggle-visited-border-color` | The border colour of a visited tab toggle component. | `var(--graupl-tabs-tab-toggle-border-color)` |
97
+ // | `--graupl-tabs-tab-toggle-focus-border-color` | The border colour of a focused tab toggle component. | `var(--graupl-tabs-tab-toggle-border-color)` |
98
+ // | `--graupl-tabs-tab-toggle-hover-border-color` | The border colour of a hovered tab toggle component. | `var(--graupl-tabs-tab-list-border-color)` |
99
+ // | `--graupl-tabs-tab-toggle-active-border-color` | The border colour of an active tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-border-color)` |
100
+ // | `--graupl-tabs-tab-toggle-selected-border-color` | The border colour of a selected tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-border-color)` |
101
+ // | `--graupl-tabs-tab-toggle-disabled-border-color` | The border colour of a disabled tab toggle component. | `var(--graupl-theme-active--primary--200)` |
102
+ // | `--graupl-tabs-tab-toggle-transform` | The transform applied to the tab toggle component. | `none` |
103
+ // | `--graupl-tabs-tab-toggle-visited-transform` | The transform applied to a visited tab toggle component. | `var(--graupl-tabs-tab-toggle-transform)` |
104
+ // | `--graupl-tabs-tab-toggle-focus-transform` | The transform applied to a focused tab toggle component. | `var(--graupl-tabs-tab-toggle-transform)` |
105
+ // | `--graupl-tabs-tab-toggle-hover-transform` | The transform applied to a hovered tab toggle component. | `var(--graupl-tabs-tab-toggle-transform)` |
106
+ // | `--graupl-tabs-tab-toggle-active-transform` | The transform applied to an active tab toggle component. | `none` |
107
+ // | `--graupl-tabs-tab-toggle-selected-transform` | The transform applied to a selected tab toggle component. | `none` |
108
+ // | `--graupl-tabs-tab-toggle-disabled-transform` | The transform applied to a disabled tab toggle component. | `none` |
109
+ // | `--graupl-tabs-tab-content-padding-x` | The horizontal padding of the tab content component. | `var(--graupl-spacer-3)` |
110
+ // | `--graupl-tabs-tab-content-padding-y` | The vertical padding of the tab content component. | `var(--graupl-spacer-3)` |
111
+ // | `--graupl-tabs-tab-content-padding` | The padding of the tab content component (combines y and x padding). | `var(--graupl-tabs-tab-content-padding-y) var(--graupl-tabs-tab-content-padding-x)` |
112
+ // | `--graupl-tabs-tab-content-background` | The background colour of the tab content component. | `var(--graupl-tabs-background)` |
113
+ // | `--graupl-tabs-tab-content-color` | The text colour of the tab content component. | `var(--graupl-tabs-color)` |
114
+ // | `--graupl-tabs-tab-content-border-color` | The border colour of the tab content component. | `var(--graupl-tabs-border-color)` |
115
+ // | `--graupl-tabs-tab-content-border-top-left-radius` | The top left border radius of the tab content component. | `var(--graupl-border-top-left-radius)` |
116
+ // | `--graupl-tabs-tab-content-border-top-right-radius` | The top right border radius of the tab content component. | `var(--graupl-border-top-right-radius)` |
117
+ // | `--graupl-tabs-tab-content-border-bottom-right-radius` | The bottom right border radius of the tab content component. | `var(--graupl-border-bottom-right-radius)` |
118
+ // | `--graupl-tabs-tab-content-border-bottom-left-radius` | The bottom left border radius of the tab content component. | `var(--graupl-border-bottom-left-radius)` |
119
+ // | `--graupl-tabs-tab-content-border-radius` | The border radius of the tab content component. | `var(--graupl-tabs-tab-content-border-top-left-radius) var(--graupl-tabs-tab-content-border-top-right-radius) var(--graupl-tabs-tab-content-border-bottom-right-radius) var(--graupl-tabs-tab-content-border-bottom-left-radius)` |
120
+ // | `--graupl-tabs-tab-content-border-top-width` | The top border width of the tab content component. | `var(--graupl-border-top-width)` |
121
+ // | `--graupl-tabs-tab-content-border-right-width` | The right border width of the tab content component. | `var(--graupl-border-right-width)` |
122
+ // | `--graupl-tabs-tab-content-border-bottom-width` | The bottom border width of the tab content component. | `var(--graupl-border-bottom-width)` |
123
+ // | `--graupl-tabs-tab-content-border-left-width` | The left border width of the tab content component. | `var(--graupl-border-left-width)` |
124
+ // | `--graupl-tabs-tab-content-border-width` | The border width of the tab content component (combines top, right, bottom, and left widths). | `var(--graupl-tabs-tab-content-border-top-width) var(--graupl-tabs-tab-content-border-right-width) var(--graupl-tabs-tab-content-border-bottom-width) var(--graupl-tabs-tab-content-border-left-width)` |
125
+ // | `--graupl-tabs-tab-content-border-top-style` | The top border style of the tab content component. | `var(--graupl-border-top-style)` |
126
+ // | `--graupl-tabs-tab-content-border-right-style` | The right border style of the tab content component. | `var(--graupl-border-right-style)` |
127
+ // | `--graupl-tabs-tab-content-border-bottom-style` | The bottom border style of the tab content component. | `var(--graupl-border-bottom-style)` |
128
+ // | `--graupl-tabs-tab-content-border-left-style` | The left border style of the tab content component. | `var(--graupl-border-left-style)` |
129
+ // | `--graupl-tabs-tab-content-border-style` | The border style of the tab content component (combines top, right, bottom, and left styles). | `var(--graupl-tabs-tab-content-border-top-style) var(--graupl-tabs-tab-content-border-right-style) var(--graupl-tabs-tab-content-border-bottom-style) var(--graupl-tabs-tab-content-border-left-style)` |
130
+ // | `--graupl-tabs-tab-content-show-display` | The display value for tab content when shown. | `block` |
131
+ // | `--graupl-tabs-tab-content-hide-display` | The display value for tab content when hidden. | `none` |
132
+ // | `--graupl-tabs-tab-content-transitioning-display` | The display value for tab content while transitioning. | `var(--graupl-tabs-tab-content-show-display)` |
133
+ // | `--graupl-tabs-tab-content-display` | The display value for tab content. | `var(--graupl-tabs-tab-content-hide-display)` |
134
+ // | `--graupl-tabs-tab-content-show-opacity` | The opacity value for tab content when shown. | `1` |
135
+ // | `--graupl-tabs-tab-content-hide-opacity` | The opacity value for tab content when hidden. | `0` |
136
+ // | `--graupl-tabs-tab-content-transitioning-opacity` | The opacity value for tab content while transitioning. | `var(--graupl-tabs-tab-content-hide-opacity)` |
137
+ // | `--graupl-tabs-tab-content-opacity` | The opacity value for tab content. | `var(--graupl-tabs-tab-content-hide-opacity)` |
138
+ // | `--graupl-tabs-tab-content-transition-duration` | The transition duration for tab content. | `var(--graupl-transition-duration-fast)` |
139
+ // | `--graupl-tabs-tab-content-transition-timing-function` | The transition timing function for tab content. | `var(--graupl-transition-timing-function)` |
140
+ // | `--graupl-tabs-tab-content-transition` | The transition for tab content changes. | `opacity var(--graupl-tabs-tab-content-transition-duration) var(--graupl-tabs-tab-content-transition-timing-function)` |
141
+ // | `--graupl-tabs-tab-content-transition-reduced-motion` | The transition for tab content changes when reduced motion is enabled. | `opacity var(--graupl-tabs-tab-content-transition-duration) var(--graupl-tabs-tab-content-transition-timing-function)` |
142
+ //
143
+ // The following sass variables can be used to customize the generation of the tabs component:
144
+ // | Variable | Description | Default Value |
145
+ // | --- | --- | --- |
146
+ // | `$selector-base` | The selector base for the component. | `.` |
147
+ // | `$modifier-selector-base` | The selector base for component modifiers. | `.` |
148
+ // | `$generate-base-theme-map` | A flag to generate the base theme maps for tabs variants. | `true` |
149
+ // | `$themeable` | A flag that determines whether theme modifiers are generated. | `false` |
150
+ // | `$tabs-selector-base` | The selector base for the tabs component. | `$selector-base` |
151
+ // | `$tabs-selector` | The tabs component selector. | `"tabs"` |
152
+ // | `$tabs-tab-list-selector-base` | The selector base for the tabs list component. | `$selector-base` |
153
+ // | `$tabs-tab-list-selector` | The tab list component selector. | `"tab-list"` |
154
+ // | `$tabs-tab-toggle-selector-base` | The selector base for the individual tab toggle component. | `$selector-base` |
155
+ // | `$tabs-tab-toggle-selector` | The individual tab toggle component selector. | `"tab-toggle"` |
156
+ // | `$tabs-tab-content-selector-base` | The selector base for the individual tab content component. | `$selector-base` |
157
+ // | `$tabs-tab-content-selector` | The individual tab content component selector. | `"tab-content"` |
158
+ // | `$tabs-theme-selector-base` | The selector base for the tabs theme component modifiers. | `$modifier-selector-base` |
159
+ // | `$tabs-theme-selector-prefix` | The tabs theme component modifier selector prefix. | `""` |
160
+ // | `$tabs-tab-content-open-selector-base` | The selector base applied to the open modifier. | `$modifier-selector-base` |
161
+ // | `$tabs-tab-content-open-selector` | The selector applied to the open modifier. | `"show"` |
162
+ // | `$tabs-tab-content-closed-selector-base` | The selector base applied to the closed modifier. | `$modifier-selector-base` |
163
+ // | `$tabs-tab-content-closed-selector` | The selector applied to the closed modifier. | `"hide"` |
164
+ // | `$tabs-tab-content-transitioning-selector-base` | The selector base applied to the transitioning modifier. | `$modifier-selector-base` |
165
+ // | `$tabs-tab-content-transitioning-selector` | The selector applied to the transitioning modifier. | `"transitioning"` |
166
+ // | `$tabs-tab-content-show-display` | The default display value for open tab contents. | `block` |
167
+ // | `$tabs-tab-content-hide-display` | The default display value for closed tab contents. | `none` |
168
+ // | `$tabs-tab-content-transitioning-display` | The default display value for transitioning tab contents. | `$tabs-tab-content-show-display` |
169
+ // | `$tabs-tab-content-show-opacity` | The default opacity value for open tab contents. | `1` |
170
+ // | `$tabs-tab-content-hide-opacity` | The default opacity value for closed tab contents. | `0` |
171
+ // | `$tabs-tab-content-transitioning-opacity` | The default opacity value for transitioning tab contents. | `$tabs-tab-content-hide-opacity` |
172
+ // | `$tabs-tab-toggle-initial-transform` | The initial transform of the tab toggle component. | `none` |
173
+ // | `$tabs-tab-toggle-final-transform` | The final transform of the tab toggle component. | `none` |
174
+ // | `$tabs-tab-toggle-disabled-transform` | The disabled transform of the tab toggle component. | `$tabs-tab-toggle-initial-transform` |
175
+ // | `$tabs-theme-mappings` | A map of properties and color shades used generate all tabs variants. | `()` |
176
+ // | `$tabs-theme-map` | A map of all properties, colors, and color shades used to generate all tabs variants. | `()` |
177
+ //
178
+ // The following javascript options can be used to customize the generation of the tabs component.
179
+ // | Variable | Description | Default Value |
180
+ // | --- | --- | --- |
181
+ // | `context` | The element that scopes the selector when locating tabs. | `document` |
182
+ // | `selector` | The selector used to find tabs in the DOM. | `.tabs` |
183
+ // | `options` | An object of options passed through to the `Tabs` constructor (see below). | `{}` |
184
+ // | `options.tabListSelector` | The selector for the tab list element. | `.tab-list` |
185
+ // | `options.tabToggleSelector` | The selector for tab toggle elements. | `.tab-toggle` |
186
+ // | `options.tabContentSelector` | The selector for tab content elements. | `.tab-content` |
187
+ // | `options.openClass` | The class(es) applied when a tab is open. | `show` |
188
+ // | `options.closeClass` | The class(es) applied when a tab is closed. | `hide` |
189
+ // | `options.transitionClass` | The class(es) applied while a tab is transitioning. | `null` |
190
+ // | `options.transitionDuration` | Duration (ms) for transitions between open/closed states. | `300` |
191
+ // | `options.openDuration` | Duration (ms) for closed → open; `-1` uses `transitionDuration`. | `-1` |
192
+ // | `options.closeDuration` | Duration (ms) for open → closed; `-1` uses `transitionDuration`. | `-1` |
193
+ // | `options.automaticActivation` | When `true`, focusing a tab toggle also activates it. | `false` |
194
+ // | `options.prefix` | Prefix for generated CSS custom properties. | `graupl-` |
195
+ // | `options.key` | Key used when generating IDs; `null` auto-generates a random key. | `null` |
196
+ // | `options.initializeClass` | The class applied while the tabs are initializing. | `initializing` |
197
+ // | `options.initialize` | When `true`, initializes the tabs immediately on creation. | `false` |
198
+ //
199
+ // ## Using `$tabs-theme-mappings`
200
+ //
201
+ // `$tabs-theme-mappings` is a 1-level map of properties and shade values.
202
+ //
203
+ // e.g.
204
+ // ```scss
205
+ // $tabs-theme-mappings: (
206
+ // border-color: 700,
207
+ // )
208
+ // ```
209
+ //
210
+ // This directly[1] maps to all tabs variants, telling them what shade to use for said property.
211
+ // All tabs variants will use the following based on the example above:
212
+ // - Primary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--primary--700`,
213
+ // - Secondary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`, and
214
+ // - Tertiary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--tertiary--700`.
215
+ //
216
+ // You can use this to customize _all_ tabs variants in the same way.
217
+ //
218
+ // For example, if you use the following map:
219
+ // ```scss
220
+ // $tabs-theme-mappings: (
221
+ // border-color: 500,
222
+ // )
223
+ // ```
224
+ //
225
+ // All tabs variants will use the following:
226
+ // - Primary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--primary--500`,
227
+ // - Secondary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--500`, and
228
+ // - Tertiary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--tertiary--500`.
229
+ //
230
+ // [1] `$tabs-theme-mappings` gets parsed into a larger, more explicit map: `$tabs-theme-map`.
231
+ //
232
+ // Using `$tabs-theme-map`
233
+ //
234
+ // `$tabs-theme-map` is a multi-level map of properties, colors, and shade values.
235
+ //
236
+ // e.g.
237
+ // ```scss
238
+ // $tabs-theme-map: (
239
+ // primary: (
240
+ // border-color: (
241
+ // color: primary,
242
+ // shade: 700
243
+ // ),
244
+ // ),
245
+ // secondary: (
246
+ // border-color: (
247
+ // color: secondary,
248
+ // shade: 700
249
+ // ),
250
+ // ),
251
+ // tertiary: (
252
+ // border-color: (
253
+ // color: tertiary,
254
+ // shade: 700
255
+ // ),
256
+ // ),
257
+ // )
258
+ // ```
259
+ //
260
+ // This directly maps to all tabs variants, telling them what shade to use for said property.
261
+ // The tabs variants will use the following based on the example above:
262
+ // - Primary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--primary--700`,
263
+ // - Secondary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`, and
264
+ // - Tertiary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--tertiary--700`.
265
+ //
266
+ // You can use this to customize tabs variants individually.
267
+ //
268
+ // For example, if you use the following map:
269
+ //
270
+ // ```scss
271
+ // $tabs-theme-map: (
272
+ // primary: (
273
+ // border-color: (
274
+ // color: secondary,
275
+ // shade: 700
276
+ // ),
277
+ // ),
278
+ // secondary: (
279
+ // border-color: (
280
+ // color: secondary,
281
+ // shade: 700
282
+ // ),
283
+ // ),
284
+ // tertiary: (
285
+ // border-color: (
286
+ // color: secondary,
287
+ // shade: 700
288
+ // ),
289
+ // ),
290
+ // )
291
+ // ```
292
+ //
293
+ // The tabs variants will use the following:
294
+ // - Primary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`,
295
+ // - Secondary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`, and
296
+ // - Tertiary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`.
297
+ //
298
+ // ## Customizing the javascript generation.
299
+ //
300
+ // The generator is a wrapper script around @drupal/once and the Tabs contructor class.
301
+ //
302
+ // You can pass options to the generator using a custom data attributes: `data-graupl-tabs-options` which much be a stringified object.
303
+ // Any option available to the component, can be passed through this object, as an example:
304
+ //
305
+ // ```html
306
+ // <div class="tabs" data-graupl-tabs-options="{'initialize': false }">
307
+ // ```
308
+ // Will ensure the the tabs element does not initialize itself automatically.
309
+ //
310
+ // @example
311
+ // <div class="tabs">
312
+ // <div class="tab-list">
313
+ // <button class="tab-toggle">Tab 1</button>
314
+ // <button class="tab-toggle">Tab 2</button>
315
+ // <button class="tab-toggle">Tab 3</button>
316
+ // </div>
317
+ // <div class="tab-content">
318
+ // // Your tab content.
319
+ // </div>
320
+ // <div class="tab-content">
321
+ // // Your tab content.
322
+ // </div>
323
+ // <div class="tab-content">
324
+ // // Your tab content.
325
+ // </div>
326
+ // </div>
327
+ //
328
+ // @example
329
+ // <div class="tabs" data-graupl-tabs-options="{'automaticActivation': true }">
330
+ // <div class="tab-list">
331
+ // <button class="tab-toggle">Tab 1</button>
332
+ // <button class="tab-toggle">Tab 2</button>
333
+ // <button class="tab-toggle">Tab 3</button>
334
+ // </div>
335
+ // <div class="tab-content">
336
+ // // Your tab content.
337
+ // </div>
338
+ // <div class="tab-content">
339
+ // // Your tab content.
340
+ // </div>
341
+ // <div class="tab-content">
342
+ // // Your tab content.
343
+ // </div>
344
+ // </div>
345
+
346
+ @use "../../defaults" as root-defaults;
347
+ @use "../../mixins/theme";
348
+ @use "../../mixins/state";
349
+ @use "../../mixins/animation";
350
+ @use "../../mixins/layer" as *;
351
+ @use "../../base/button/mixins" as button-mixins;
352
+ @use "defaults";
353
+ @use "sass:map";
354
+ @use "variables" as *;
355
+
356
+ @include layer(component) {
357
+ // .tabs
358
+ #{defaults.$tabs-selector-base}#{defaults.$tabs-selector} {
359
+ display: grid;
360
+ grid-template-columns: [list-start content-start] 1fr [content-end list-end];
361
+ grid-template-rows: [list-start] auto [content-start list-end] 1fr [content-end];
362
+ padding: $tabs-padding;
363
+ border-width: $tabs-border-width;
364
+ border-style: $tabs-border-style;
365
+ border-radius: $tabs-border-radius;
366
+ isolation: isolate;
367
+ }
368
+
369
+ // .tab-list
370
+ #{defaults.$tabs-tab-list-selector-base}#{defaults.$tabs-tab-list-selector} {
371
+ display: flex;
372
+ grid-area: list;
373
+ flex-wrap: wrap;
374
+ margin: $tabs-tab-list-margin;
375
+ padding: $tabs-tab-list-padding;
376
+ border-width: $tabs-tab-list-border-width;
377
+ border-style: $tabs-tab-list-border-style;
378
+ border-radius: $tabs-tab-list-border-radius;
379
+ gap: $tabs-tab-list-gap;
380
+ }
381
+
382
+ // .tab-toggle
383
+ #{defaults.$tabs-tab-toggle-selector-base}#{defaults.$tabs-tab-toggle-selector} {
384
+ @include button-mixins.apply-base;
385
+
386
+ z-index: 2;
387
+ flex: 1 1 auto;
388
+ padding: $tabs-tab-toggle-padding;
389
+ border-width: $tabs-tab-toggle-border-width;
390
+ border-style: $tabs-tab-toggle-border-style;
391
+ border-radius: $tabs-tab-toggle-border-radius;
392
+
393
+ @include state.generate-modifiers(
394
+ (
395
+ transform: $tabs-tab-toggle-transform-states,
396
+ )
397
+ );
398
+ }
399
+
400
+ // .tab-content
401
+ #{defaults.$tabs-tab-content-selector-base}#{defaults.$tabs-tab-content-selector} {
402
+ display: $tabs-tab-content-display;
403
+ z-index: 1;
404
+ grid-area: content;
405
+ padding: $tabs-tab-content-padding;
406
+ transition: $tabs-tab-content-transition;
407
+ border-width: $tabs-tab-content-border-width;
408
+ border-style: $tabs-tab-content-border-style;
409
+ border-radius: $tabs-tab-content-border-radius;
410
+ opacity: $tabs-tab-content-opacity;
411
+
412
+ // &.hide
413
+ &#{defaults.$tabs-tab-content-closed-selector-base}#{defaults.$tabs-tab-content-closed-selector} {
414
+ --#{root-defaults.$prefix}tabs-tab-content-display: #{$tabs-tab-content-hide-display};
415
+ --#{root-defaults.$prefix}tabs-tab-content-opacity: #{$tabs-tab-content-hide-opacity};
416
+ }
417
+
418
+ // &.transitioning
419
+ &#{defaults.$tabs-tab-content-transitioning-selector-base}#{defaults.$tabs-tab-content-transitioning-selector} {
420
+ --#{root-defaults.$prefix}tabs-tab-content-display: #{$tabs-tab-content-transitioning-display};
421
+ --#{root-defaults.$prefix}tabs-tab-content-opacity: #{$tabs-tab-content-transitioning-opacity};
422
+ }
423
+
424
+ // &.show
425
+ &#{defaults.$tabs-tab-content-open-selector-base}#{defaults.$tabs-tab-content-open-selector} {
426
+ --#{root-defaults.$prefix}tabs-tab-content-display: #{$tabs-tab-content-show-display};
427
+ --#{root-defaults.$prefix}tabs-tab-content-opacity: #{$tabs-tab-content-show-opacity};
428
+ }
429
+ }
430
+
431
+ @include animation.off {
432
+ #{defaults.$tabs-tab-content-selector-base}#{defaults.$tabs-tab-content-selector} {
433
+ --#{root-defaults.$prefix}tabs-tab-content-transition: #{$tabs-tab-content-transition-reduced-motion};
434
+ }
435
+ }
436
+ }
437
+
438
+ @include layer(theme) {
439
+ // .tabs
440
+ #{defaults.$tabs-selector-base}#{defaults.$tabs-selector} {
441
+ border-color: $tabs-border-color;
442
+ background: $tabs-background;
443
+ color: $tabs-color;
444
+
445
+ @if root-defaults.$themeable-components and defaults.$themeable {
446
+ @each $color, $map in defaults.$tabs-theme-map {
447
+ @include theme.generate-modifiers(
448
+ defaults.$tabs-theme-map,
449
+ defaults.$tabs-theme-selector-base,
450
+ defaults.$tabs-theme-selector-prefix,
451
+ "tabs-"
452
+ );
453
+ }
454
+
455
+ @each $color, $map in defaults.$tabs-theme-map {
456
+ @include theme.generate-modifiers(
457
+ defaults.$tabs-theme-map,
458
+ defaults.$tabs-theme-selector-base,
459
+ defaults.$tabs-theme-selector-prefix,
460
+ "tabs-",
461
+ ""
462
+ );
463
+ }
464
+ }
465
+ }
466
+
467
+ // .tab-list
468
+ #{defaults.$tabs-tab-list-selector-base}#{defaults.$tabs-tab-list-selector} {
469
+ border-color: $tabs-tab-list-border-color;
470
+ background: $tabs-tab-list-background;
471
+ color: $tabs-tab-list-color;
472
+ }
473
+
474
+ // .tab-toggle
475
+ #{defaults.$tabs-tab-toggle-selector-base}#{defaults.$tabs-tab-toggle-selector} {
476
+ @include button-mixins.apply-theme;
477
+
478
+ border-color: $tabs-tab-toggle-border-color;
479
+ background: $tabs-tab-toggle-background;
480
+ color: $tabs-tab-toggle-color;
481
+
482
+ @include state.generate-modifiers(
483
+ (
484
+ border-color: $tabs-tab-toggle-border-color-states,
485
+ background: $tabs-tab-toggle-background-states,
486
+ color: $tabs-tab-toggle-color-states,
487
+ )
488
+ );
489
+ }
490
+
491
+ // .tab-content
492
+ #{defaults.$tabs-tab-content-selector-base}#{defaults.$tabs-tab-content-selector} {
493
+ border-color: $tabs-tab-content-border-color;
494
+ background: $tabs-tab-content-background;
495
+ color: $tabs-tab-content-color;
496
+ }
497
+ }