@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/accordion/_index.scss CHANGED
@@ -1,27 +1,340 @@
1
1
  // @graupl/core accordion component styles.
2
+ //
3
+ // This module provides the accordion component styles, combining button-like toggles with collapsible content panels.
4
+ //
5
+ // The following selectors are generated by default:
6
+ // - `.accordion`: The accordion container.
7
+ // - `.accordion-item`: The accordion item wrapper.
8
+ // - `.accordion-item-header`: The accordion item header.
9
+ // - `.accordion-item-title`: The accordion item title row.
10
+ // - `.accordion-item-toggle`: The accordion item toggle control.
11
+ // - `.accordion-item-content`: The collapsible content wrapper.
12
+ // - `.accordion-item-body`: The main body region inside the content wrapper.
13
+ // - `.accordion-item-footer`: The footer region inside the content wrapper.
14
+ // - `.show`: Modifier applied to an item when open.
15
+ // - `.hide`: Modifier applied to an item when closed.
16
+ // - `.transitioning`: Modifier applied while an item is transitioning.
17
+ //
18
+ // The following custom properties can be used to customize the accordion component:
19
+ // | Property | Description | Default Value |
20
+ // | ----------------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
21
+ // | `--graupl-accordion-padding-x` | Horizontal padding on the accordion container. | `var(--graupl-spacer-0)` |
22
+ // | `--graupl-accordion-padding-y` | Vertical padding on the accordion container. | `var(--graupl-spacer-0)` |
23
+ // | `--graupl-accordion-padding` | Shorthand padding for the accordion container. | `var(--graupl-accordion-padding-y) var(--graupl-accordion-padding-x)` |
24
+ // | `--graupl-accordion-column-gap` | Column gap between accordion items. | `var(--graupl-spacer-0)` |
25
+ // | `--graupl-accordion-row-gap` | Row gap between accordion items. | `var(--graupl-spacer-0)` |
26
+ // | `--graupl-accordion-gap` | Gap between accordion items (column/row). | `var(--graupl-accordion-column-gap) var(--graupl-accordion-row-gap)` |
27
+ // | `--graupl-accordion-color` | Text colour of the accordion container. | `var(--graupl-color)` |
28
+ // | `--graupl-accordion-background` | Background colour of the accordion container. | `var(--graupl-background)` |
29
+ // | `--graupl-accordion-border-color` | Border colour of the accordion container. | `var(--graupl-accordion-color)` |
30
+ // | `--graupl-accordion-item-color` | Text colour of the accordion item. | `var(--graupl-accordion-color)` |
31
+ // | `--graupl-accordion-item-background` | Background colour of the accordion item. | `var(--graupl-accordion-background)` |
32
+ // | `--graupl-accordion-item-border-color` | Border colour of the accordion item. | `var(--graupl-accordion-border-color)` |
33
+ // | `--graupl-accordion-item-border-top-left-radius` | Top-left border radius of an accordion item. | `var(--graupl-border-top-left-radius)` |
34
+ // | `--graupl-accordion-item-border-top-right-radius` | Top-right border radius of an accordion item. | `var(--graupl-border-top-right-radius)` |
35
+ // | `--graupl-accordion-item-border-bottom-right-radius` | Bottom-right border radius of an accordion item. | `var(--graupl-border-bottom-right-radius)` |
36
+ // | `--graupl-accordion-item-border-bottom-left-radius` | Bottom-left border radius of an accordion item. | `var(--graupl-border-bottom-left-radius)` |
37
+ // | `--graupl-accordion-item-border-radius` | Border radius of an accordion item. | `var(--graupl-accordion-item-border-top-left-radius) var(--graupl-accordion-item-border-top-right-radius) var(--graupl-accordion-item-border-bottom-right-radius) var(--graupl-accordion-item-border-bottom-left-radius)` |
38
+ // | `--graupl-accordion-item-border-top-width` | Top border width of an accordion item. | `var(--graupl-border-top-width)` |
39
+ // | `--graupl-accordion-item-border-right-width` | Right border width of an accordion item. | `var(--graupl-border-right-width)` |
40
+ // | `--graupl-accordion-item-border-bottom-width` | Bottom border width of an accordion item. | `var(--graupl-border-bottom-width)` |
41
+ // | `--graupl-accordion-item-border-left-width` | Left border width of an accordion item. | `var(--graupl-border-left-width)` |
42
+ // | `--graupl-accordion-item-border-width` | Border width of an accordion item. | `var(--graupl-accordion-item-border-top-width) var(--graupl-accordion-item-border-right-width) var(--graupl-accordion-item-border-bottom-width) var(--graupl-accordion-item-border-left-width)` |
43
+ // | `--graupl-accordion-item-border-top-style` | Top border style of an accordion item. | `var(--graupl-border-top-style)` |
44
+ // | `--graupl-accordion-item-border-right-style` | Right border style of an accordion item. | `var(--graupl-border-right-style)` |
45
+ // | `--graupl-accordion-item-border-bottom-style` | Bottom border style of an accordion item. | `var(--graupl-border-bottom-style)` |
46
+ // | `--graupl-accordion-item-border-left-style` | Left border style of an accordion item. | `var(--graupl-border-left-style)` |
47
+ // | `--graupl-accordion-item-border-style` | Border style of an accordion item. | `var(--graupl-accordion-item-border-top-style) var(--graupl-accordion-item-border-right-style) var(--graupl-accordion-item-border-bottom-style) var(--graupl-accordion-item-border-left-style)` |
48
+ // | `--graupl-accordion-item-header-padding-x` | Horizontal padding for the accordion item header. | `var(--graupl-spacer-0)` |
49
+ // | `--graupl-accordion-item-header-padding-y` | Vertical padding for the accordion item header. | `var(--graupl-spacer-0)` |
50
+ // | `--graupl-accordion-item-header-padding` | Padding for the accordion item header. | `var(--graupl-accordion-item-header-padding-y) var(--graupl-accordion-item-header-padding-x)` |
51
+ // | `--graupl-accordion-item-header-margin` | Margin for the accordion item header (pulls content over borders). | `calc(-1 * min(var(--graupl-accordion-item-border-top-width), var(--graupl-accordion-item-border-bottom-width), var(--graupl-accordion-item-border-left-width), var(--graupl-accordion-item-border-right-width)))` |
52
+ // | `--graupl-accordion-item-title-padding-x` | Horizontal padding for the accordion item title row. | `var(--graupl-spacer-0)` |
53
+ // | `--graupl-accordion-item-title-padding-y` | Vertical padding for the accordion item title row. | `var(--graupl-spacer-0)` |
54
+ // | `--graupl-accordion-item-title-padding` | Padding for the accordion item title row. | `var(--graupl-accordion-item-title-padding-y) var(--graupl-accordion-item-title-padding-x)` |
55
+ // | `--graupl-accordion-item-title-margin-x` | Horizontal margin for the accordion item title row. | `var(--graupl-spacer-0)` |
56
+ // | `--graupl-accordion-item-title-margin-y` | Vertical margin for the accordion item title row. | `var(--graupl-spacer-0)` |
57
+ // | `--graupl-accordion-item-title-margin` | Margin for the accordion item title row. | `var(--graupl-accordion-item-title-margin-y) var(--graupl-accordion-item-title-margin-x)` |
58
+ // | `--graupl-accordion-item-title-color` | Text colour for accordion item titles. | `var(--graupl-accordion-item-color)` |
59
+ // | `--graupl-accordion-item-title-background` | Background colour for accordion item titles. | `var(--graupl-accordion-item-background)` |
60
+ // | `--graupl-accordion-item-title-border-color` | Border colour for accordion item titles. | `var(--graupl-accordion-item-border-color)` |
61
+ // | `--graupl-accordion-item-title-font-size` | Font size for accordion item titles. | `var(--graupl-h5-font-size)` |
62
+ // | `--graupl-accordion-item-title-font-weight` | Font weight for accordion item titles. | `var(--graupl-h5-font-weight)` |
63
+ // | `--graupl-accordion-item-title-font-family` | Font family for accordion item titles. | `var(--graupl-h5-font-family)` |
64
+ // | `--graupl-accordion-item-title-line-height` | Line height for accordion item titles. | `var(--graupl-h5-line-height)` |
65
+ // | `--graupl-accordion-item-content-color` | Text colour for accordion item content. | `var(--graupl-accordion-item-color)` |
66
+ // | `--graupl-accordion-item-content-background` | Background colour for accordion item content. | `var(--graupl-accordion-item-background)` |
67
+ // | `--graupl-accordion-item-content-padding-x` | Horizontal padding for the accordion item content area. | `var(--graupl-spacer-5)` |
68
+ // | `--graupl-accordion-item-content-padding-y` | Vertical padding for the accordion item content area. | `var(--graupl-spacer-5)` |
69
+ // | `--graupl-accordion-item-content-padding` | Padding for the accordion item content area. | `var(--graupl-accordion-item-content-padding-y) var(--graupl-accordion-item-content-padding-x)` |
70
+ // | `--graupl-accordion-item-content-column-gap` | Column gap inside the accordion content. | `var(--graupl-spacer-3)` |
71
+ // | `--graupl-accordion-item-content-row-gap` | Row gap inside the accordion content. | `var(--graupl-spacer-0)` |
72
+ // | `--graupl-accordion-item-content-gap` | Gap inside the accordion content (column/row). | `var(--graupl-accordion-item-content-column-gap) var(--graupl-accordion-item-content-row-gap)` |
73
+ // | `--graupl-accordion-item-body-padding-x` | Horizontal padding for the accordion item body. | `var(--graupl-spacer-0)` |
74
+ // | `--graupl-accordion-item-body-padding-y` | Vertical padding for the accordion item body. | `var(--graupl-spacer-0)` |
75
+ // | `--graupl-accordion-item-body-padding` | Padding for the accordion item body. | `var(--graupl-accordion-item-body-padding-y) var(--graupl-accordion-item-body-padding-x)` |
76
+ // | `--graupl-accordion-item-footer-padding-x` | Horizontal padding for the accordion item footer. | `var(--graupl-spacer-0)` |
77
+ // | `--graupl-accordion-item-footer-padding-y` | Vertical padding for the accordion item footer. | `var(--graupl-spacer-0)` |
78
+ // | `--graupl-accordion-item-footer-padding` | Padding for the accordion item footer. | `var(--graupl-accordion-item-footer-padding-y) var(--graupl-accordion-item-footer-padding-x)` |
79
+ // | `--graupl-accordion-item-content-transform` | Base transform for accordion content. | `translateY(-100%)` |
80
+ // | `--graupl-accordion-item-content-open-transform` | Transform when accordion content is open. | `translateY(0)` |
81
+ // | `--graupl-accordion-item-toggle-padding-x` | Horizontal padding applied to the toggle control. | `var(--graupl-button-padding-x)` |
82
+ // | `--graupl-accordion-item-toggle-padding-y` | Vertical padding applied to the toggle control. | `var(--graupl-button-padding-y)` |
83
+ // | `--graupl-accordion-item-toggle-padding` | Shorthand padding applied to the toggle control. | `var(--graupl-accordion-item-toggle-padding-y) var(--graupl-accordion-item-toggle-padding-x)` |
84
+ // | `--graupl-accordion-item-toggle-transform` | Base transform for the toggle control. | `none` |
85
+ // | `--graupl-accordion-item-toggle-visited-transform` | Transform for a visited toggle. | `var(--graupl-accordion-item-toggle-transform)` |
86
+ // | `--graupl-accordion-item-toggle-focus-transform` | Transform for a focused toggle. | `var(--graupl-accordion-item-toggle-transform)` |
87
+ // | `--graupl-accordion-item-toggle-hover-transform` | Transform for a hovered toggle. | `var(--graupl-accordion-item-toggle-transform)` |
88
+ // | `--graupl-accordion-item-toggle-active-transform` | Transform for an active toggle. | `var(--graupl-accordion-item-toggle-transform)` |
89
+ // | `--graupl-accordion-item-toggle-disabled-transform` | Transform for a disabled toggle. | `var(--graupl-accordion-item-toggle-transform)` |
90
+ // | `--graupl-accordion-item-toggle-pseudo-transform` | Transform for the toggle indicator pseudo-element. | `none` |
91
+ // | `--graupl-accordion-item-toggle-pseudo-open-transform` | Transform for the toggle indicator when open. | `rotate(-180deg)` |
92
+ // | `--graupl-accordion-transition-duration` | Duration used for accordion transitions. | `var(--graupl-transition-duration-slow)` |
93
+ // | `--graupl-accordion-transition-timing-function` | Timing function used for accordion transitions. | `var(--graupl-transition-timing-function)` |
94
+ // | `--graupl-accordion-item-transition` | Transition applied to accordion item height. | `height var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |
95
+ // | `--graupl-accordion-item-transition-reduced-motion` | Transition used when reduced motion is enabled. | `none` |
96
+ // | `--graupl-accordion-item-toggle-pseudo-transition` | Transition for the toggle indicator pseudo-element. | `transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |
97
+ // | `--graupl-accordion-item-toggle-pseudo-transition-reduced-motion` | Transition for the toggle indicator when reduced motion is enabled. | `none` |
98
+ // | `--graupl-accordion-item-content-transition` | Transition applied to accordion content. | `opacity var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |
99
+ // | `--graupl-accordion-item-content-transition-reduced-motion` | Transition for content when reduced motion is enabled. | `opacity var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |
100
+ // | `--graupl-accordion-item-toggle-transition` | Transition for toggle state changes. | `background var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), color var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |
101
+ // | `--graupl-accordion-item-toggle-transition-reduced-motion` | Transition used when reduced motion is enabled. | `background var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), color var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function)` |
102
+ // | `--graupl-accordion-item-toggle-color` | Text colour of the accordion item toggle. | `var(--graupl-accordion-color)` |
103
+ // | `--graupl-accordion-item-toggle-visited-color` | Text colour of a visited accordion item toggle. | `var(--graupl-accordion-item-toggle-color)` |
104
+ // | `--graupl-accordion-item-toggle-focus-color` | Text colour of a focused accordion item toggle. | `var(--graupl-accordion-item-toggle-color)` |
105
+ // | `--graupl-accordion-item-toggle-hover-color` | Text colour of a hovered accordion item toggle. | `var(--graupl-accordion-background)` |
106
+ // | `--graupl-accordion-item-toggle-active-color` | Text colour of an active accordion item toggle. | `var(--graupl-accordion-item-toggle-hover-color)` |
107
+ // | `--graupl-accordion-item-toggle-disabled-color` | Text colour of a disabled accordion item toggle. | `var(--graupl-theme-active--primary--200)` |
108
+ // | `--graupl-accordion-item-toggle-background` | Background colour of the accordion item toggle. | `var(--graupl-accordion-background)` |
109
+ // | `--graupl-accordion-item-toggle-visited-background` | Background colour of a visited accordion item toggle. | `var(--graupl-accordion-item-toggle-background)` |
110
+ // | `--graupl-accordion-item-toggle-focus-background` | Background colour of a focused accordion item toggle. | `var(--graupl-accordion-item-toggle-background)` |
111
+ // | `--graupl-accordion-item-toggle-hover-background` | Background colour of a hovered accordion item toggle. | `var(--graupl-accordion-color)` |
112
+ // | `--graupl-accordion-item-toggle-active-background` | Background colour of an active accordion item toggle. | `var(--graupl-accordion-item-toggle-hover-background)` |
113
+ // | `--graupl-accordion-item-toggle-disabled-background` | Background colour of a disabled accordion item toggle. | `var(--graupl-accordion-background)` |
114
+ // | `--graupl-accordion-item-toggle-border-color` | Border colour of the accordion item toggle. | `var(--graupl-accordion-item-border-color)` |
115
+ // | `--graupl-accordion-item-toggle-visited-border-color` | Border colour of a visited accordion item toggle. | `var(--graupl-accordion-item-toggle-border-color)` |
116
+ // | `--graupl-accordion-item-toggle-focus-border-color` | Border colour of a focused accordion item toggle. | `var(--graupl-accordion-item-toggle-border-color)` |
117
+ // | `--graupl-accordion-item-toggle-hover-border-color` | Border colour of a hovered accordion item toggle. | `var(--graupl-accordion-item-border-color)` |
118
+ // | `--graupl-accordion-item-toggle-active-border-color` | Border colour of an active accordion item toggle. | `var(--graupl-accordion-item-toggle-hover-border-color)` |
119
+ // | `--graupl-accordion-item-toggle-disabled-border-color` | Border colour of a disabled accordion item toggle. | `var(--graupl-theme-active--primary--200)` |
120
+ //
121
+ // The following sass variables can be used to customize the generation of the accordion component:
122
+ // | Variable | Description | Default Value |
123
+ // | ------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------ |
124
+ // | `$selector-base` | Selector base for the component. | `"."` |
125
+ // | `$modifier-selector-base` | Selector base for component modifiers. | `"."` |
126
+ // | `$generate-base-theme-map` | A flag to generate the base theme maps for accordion variants. | `true` |
127
+ // | `$themeable` | Flag to generate theme modifiers. | `false` |
128
+ // | `$accordion-selector-base` | Selector base for the accordion container. | `$selector-base` |
129
+ // | `$accordion-selector` | Selector for the accordion container. | `"accordion"` |
130
+ // | `$accordion-item-selector-base` | Selector base for items. | `$selector-base` |
131
+ // | `$accordion-item-selector` | Selector for items. | `"accordion-item"` |
132
+ // | `$accordion-item-header-selector-base` | Selector base for item headers. | `$selector-base` |
133
+ // | `$accordion-item-header-selector` | Selector for item headers. | `"accordion-item-header"` |
134
+ // | `$accordion-item-title-selector-base` | Selector base for item titles. | `$selector-base` |
135
+ // | `$accordion-item-title-selector` | Selector for item titles. | `"accordion-item-title"` |
136
+ // | `$accordion-item-toggle-selector-base` | Selector base for item toggles. | `$selector-base` |
137
+ // | `$accordion-item-toggle-selector` | Selector for item toggles. | `"accordion-item-toggle"` |
138
+ // | `$accordion-item-content-selector-base` | Selector base for item content. | `$selector-base` |
139
+ // | `$accordion-item-content-selector` | Selector for item content. | `"accordion-item-content"` |
140
+ // | `$accordion-item-body-selector-base` | Selector base for item bodies. | `$selector-base` |
141
+ // | `$accordion-item-body-selector` | Selector for item bodies. | `"accordion-item-body"` |
142
+ // | `$accordion-item-footer-selector-base` | Selector base for item footers. | `$selector-base` |
143
+ // | `$accordion-item-footer-selector` | Selector for item footers. | `"accordion-item-footer"` |
144
+ // | `$accordion-item-open-selector-base` | Selector base applied to the open modifier. | `"."` |
145
+ // | `$accordion-item-open-selector` | Selector applied to the open modifier. | `"show"` |
146
+ // | `$accordion-item-close-selector-base` | Selector base applied to the closed modifier. | `"."` |
147
+ // | `$accordion-item-close-selector` | Selector applied to the closed modifier. | `"hide"` |
148
+ // | `$accordion-item-transition-selector-base` | Selector base applied to the transitioning modifier. | `"."` |
149
+ // | `$accordion-item-transition-selector` | Selector applied to the transitioning modifier. | `"transitioning"` |
150
+ // | `$accordion-item-toggle-pseudo-selector` | Pseudo-element used for the toggle indicator. | `"after"` |
151
+ // | `$accordion-item-toggle-initial-transform` | The initial transform of the accordion item toggle. | `none` |
152
+ // | `$accordion-item-toggle-final-transform` | The final transform of the accordion item toggle. | `$accordion-item-toggle-initial-transform` |
153
+ // | `$accordion-item-toggle-disabled-transform` | The disabled transform of the accordion item toggle. | `$accordion-item-toggle-initial-transform` |
154
+ // | `$accordion-item-toggle-pseudo-initial-transform` | The initial transform of the accordion item toggle pseudo element. | `none` |
155
+ // | `$accordion-item-toggle-pseudo-final-transform` | The final transform of the accordion item toggle pseudo element. | `rotate(-180deg)` |
156
+ // | `$accordion-item-toggle-pseudo-content` | Content for the accordion item toggle pseudo element. | `"▼"` |
157
+ // | `$accordion-item-content-initial-transform` | The initial transform of the accordion item content. | `translateY(-100%)' |
158
+ // | `$accordion-item-content-final-transform` | The final transform of the accordion item content. | `translateY(0)` |
159
+ // | `$accordion-theme-mappings` | A map of properties and color shades used generate all accordion variants. | `()` |
160
+ // | `$accordion-theme-map` | A map of all properties, colors, and color shades used to generate all accordion variants. | `()` |
161
+ //
162
+ // ## Using `$accordion-theme-mappings`
163
+ //
164
+ // `$accordion-theme-mappings` is a 1-level map of properties and shade values.
165
+ //
166
+ // e.g.
167
+ // ```scss
168
+ // $accordion-theme-mappings: (
169
+ // border-color: 700,
170
+ // )
171
+ // ```
172
+ //
173
+ // This directly[1] maps to all accordion variants, telling them what shade to use for said property.
174
+ // All accordion variants will use the following based on the example above:
175
+ // - Primary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--primary--700`,
176
+ // - Secondary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`, and
177
+ // - Tertiary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--tertiary--700`.
178
+ //
179
+ // You can use this to customize _all_ accordions variants in the same way.
180
+ //
181
+ // For example, if you use the following map:
182
+ // ```scss
183
+ // $accordion-theme-mappings: (
184
+ // border-color: 500,
185
+ // )
186
+ // ```
187
+ //
188
+ // All accordion variants will use the following:
189
+ // - Primary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--primary--500`,
190
+ // - Secondary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--500`, and
191
+ // - Tertiary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--tertiary--500`.
192
+ //
193
+ // [1] `$accordion-theme-mappings` gets parsed into a larger, more explicit map: `$accordion-theme-map`.
194
+ //
195
+ // Using `$accordion-theme-map`
196
+ //
197
+ // `$accordion-theme-map` is a multi-level map of properties, colors, and shade values.
198
+ //
199
+ // e.g.
200
+ // ```scss
201
+ // $accordion-theme-map: (
202
+ // primary: (
203
+ // border-color: (
204
+ // color: primary,
205
+ // shade: 700
206
+ // ),
207
+ // ),
208
+ // secondary: (
209
+ // border-color: (
210
+ // color: secondary,
211
+ // shade: 700
212
+ // ),
213
+ // ),
214
+ // tertiary: (
215
+ // border-color: (
216
+ // color: tertiary,
217
+ // shade: 700
218
+ // ),
219
+ // ),
220
+ // )
221
+ // ```
222
+ //
223
+ // This directly maps to all accordion variants, telling them what shade to use for said property.
224
+ // The accordion variants will use the following based on the example above:
225
+ // - Primary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--primary--700`,
226
+ // - Secondary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`, and
227
+ // - Tertiary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--tertiary--700`.
228
+ //
229
+ // You can use this to customize accordion variants individually.
230
+ //
231
+ // For example, if you use the following map:
232
+ //
233
+ // ```scss
234
+ // $accordion-theme-map: (
235
+ // primary: (
236
+ // border-color: (
237
+ // color: secondary,
238
+ // shade: 700
239
+ // ),
240
+ // ),
241
+ // secondary: (
242
+ // border-color: (
243
+ // color: secondary,
244
+ // shade: 700
245
+ // ),
246
+ // ),
247
+ // tertiary: (
248
+ // border-color: (
249
+ // color: secondary,
250
+ // shade: 700
251
+ // ),
252
+ // ),
253
+ // )
254
+ // ```
255
+ //
256
+ // The accordion variants will use the following:
257
+ // - Primary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`,
258
+ // - Secondary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`, and
259
+ // - Tertiary accordions will have their `--graupl-accordion-border-color` property set to `--graupl-theme-active--secondary--700`.
260
+ //
261
+ // @example
262
+ // <div class="accordion">
263
+ // <div class="accordion-item show">
264
+ // <div class="accordion-item-header">
265
+ // <h3 class="accordion-item-title">
266
+ // <button aria-expanded="true" class="accordion-item-toggle">Accordion item 1</button>
267
+ // </h3>
268
+ // </div>
269
+ // <div class="accordion-item-content">
270
+ // <div class="accordion-item-body">
271
+ // // Content here.
272
+ // </div>
273
+ // <div class="accordion-item-footer">
274
+ // // Footer content here.
275
+ // </div>
276
+ // </div>
277
+ // </div>
278
+ // <div class="accordion-item hide">
279
+ // <div class="accordion-item-header">
280
+ // <h3 class="accordion-item-title">
281
+ // <button aria-expanded="false" class="accordion-item-toggle">Accordion item 2</button>
282
+ // </h3>
283
+ // </div>
284
+ // <div class="accordion-item-content">
285
+ // <div class="accordion-item-body">
286
+ // // Content here.
287
+ // </div>
288
+ // <div class="accordion-item-footer">
289
+ // // Footer content here.
290
+ // </div>
291
+ // </div>
292
+ // </div>
293
+ // <div class="accordion-item hide">
294
+ // <div class="accordion-item-header">
295
+ // <h3 class="accordion-item-title">
296
+ // <button aria-expanded="false" class="accordion-item-toggle">Accordion item 3</button>
297
+ // </h3>
298
+ // </div>
299
+ // <div class="accordion-item-content">
300
+ // <div class="accordion-item-body">
301
+ // // Content here.
302
+ // </div>
303
+ // <div class="accordion-item-footer">
304
+ // // Footer content here.
305
+ // </div>
306
+ // </div>
307
+ // </div>
308
+ // </div>
2
309
 
3
- @use "defaults";
4
- @use "variables" as *;
5
310
  @use "../../base/button/mixins" as button-mixins;
6
311
  @use "../../defaults" as root-defaults;
312
+ @use "../../mixins/animation";
7
313
  @use "../../mixins/layer" as *;
314
+ @use "../../mixins/state";
315
+ @use "../../mixins/theme";
8
316
  @use "../../state/focus/variables" as focus;
317
+ @use "defaults";
9
318
  @use "sass:map";
319
+ @use "variables" as *;
10
320
 
11
321
  @include layer(base) {
12
- #{defaults.$accordion-item-toggle-selector} {
322
+ // .accordion-item-toggle
323
+ #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {
13
324
  @include button-mixins.apply-base;
14
325
  }
15
326
  }
16
327
 
17
328
  @include layer(component) {
18
- #{defaults.$accordion-selector} {
329
+ // .accordion
330
+ #{defaults.$accordion-selector-base}#{defaults.$accordion-selector} {
19
331
  display: flex;
20
332
  flex-flow: column nowrap;
21
333
  padding: $accordion-padding;
22
334
  gap: $accordion-gap;
23
335
 
24
- > #{defaults.$accordion-item-selector} {
336
+ // > .accordion-item
337
+ > #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {
25
338
  &:not(:first-child) {
26
339
  /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
27
340
  margin-top: calc(
@@ -36,68 +349,47 @@
36
349
  }
37
350
  }
38
351
 
39
- #{defaults.$accordion-item-selector} {
352
+ // .accordion-item
353
+ #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {
40
354
  overflow: hidden;
41
- transition: $accordion-transition;
355
+ transition: $accordion-item-transition;
42
356
  border-width: $accordion-item-border-width;
43
357
  border-style: $accordion-item-border-style;
44
358
  border-radius: $accordion-item-border-radius;
45
359
  isolation: isolate;
46
360
 
47
- &#{defaults.$accordion-item-close-selector}
48
- #{defaults.$accordion-item-content-selector} {
361
+ &#{defaults.$accordion-item-close-selector-base}#{defaults.$accordion-item-close-selector}
362
+ #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {
49
363
  display: none;
50
364
  }
51
365
 
52
- &#{defaults.$accordion-item-open-selector}
53
- #{defaults.$accordion-item-content-selector} {
366
+ &#{defaults.$accordion-item-open-selector-base}#{defaults.$accordion-item-open-selector}
367
+ #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {
54
368
  transform: $accordion-item-content-open-transform;
55
369
  opacity: 1;
56
370
  }
57
371
 
58
- &#{defaults.$accordion-item-transition-selector}
59
- #{defaults.$accordion-item-content-selector} {
372
+ &#{defaults.$accordion-item-transition-selector-base}#{defaults.$accordion-item-transition-selector}
373
+ #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {
60
374
  display: flex;
61
375
  }
62
376
  }
63
377
 
64
- #{defaults.$accordion-item-toggle-selector} {
378
+ // .accordion-item-toggle
379
+ #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {
65
380
  z-index: 2;
66
381
  padding: $accordion-item-toggle-padding;
67
382
  transform: $accordion-item-toggle-transform;
68
383
  transition: $accordion-item-toggle-transition;
69
384
 
70
- @each $selector in map.get(root-defaults.$state-selectors, visited) {
71
- &#{$selector} {
72
- --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-visited-transform};
73
- }
74
- }
75
-
76
- @each $selector in map.get(root-defaults.$state-selectors, focus) {
77
- &#{$selector} {
78
- --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-focus-transform};
79
- }
80
- }
385
+ @include state.generate-modifiers(
386
+ (
387
+ transform: $accordion-item-toggle-transform-states,
388
+ )
389
+ );
81
390
 
82
- @each $selector in map.get(root-defaults.$state-selectors, hover) {
83
- &#{$selector} {
84
- --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-hover-transform};
85
- }
86
- }
87
-
88
- @each $selector in map.get(root-defaults.$state-selectors, active) {
89
- &#{$selector} {
90
- --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-active-transform};
91
- }
92
- }
93
-
94
- @each $selector in map.get(root-defaults.$state-selectors, disabled) {
95
- &#{$selector} {
96
- --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-disabled-transform};
97
- }
98
- }
99
-
100
- &#{defaults.$accordion-item-toggle-pseudo-selector} {
391
+ // ::after
392
+ &::#{defaults.$accordion-item-toggle-pseudo-selector} {
101
393
  content: defaults.$accordion-item-toggle-pseudo-content;
102
394
  display: flex;
103
395
  align-items: center;
@@ -108,23 +400,26 @@
108
400
  }
109
401
 
110
402
  &[aria-expanded="true"] {
111
- &::after {
403
+ // &::after
404
+ &::#{defaults.$accordion-item-toggle-pseudo-selector} {
112
405
  transform: $accordion-item-toggle-pseudo-open-transform;
113
406
  }
114
407
  }
115
408
  }
116
409
 
117
- #{defaults.$accordion-item-header-selector} {
410
+ // .accordion-item-header
411
+ #{defaults.$accordion-item-header-selector-base}#{defaults.$accordion-item-header-selector} {
118
412
  margin: $accordion-item-header-margin;
119
413
  padding: $accordion-item-header-padding;
120
414
  }
121
415
 
122
- #{defaults.$accordion-item-title-selector} {
416
+ // .accordion-item-title
417
+ #{defaults.$accordion-item-title-selector-base}#{defaults.$accordion-item-title-selector} {
123
418
  margin: $accordion-item-title-margin;
124
419
  padding: $accordion-item-title-padding;
125
420
 
126
421
  &,
127
- #{defaults.$accordion-item-toggle-selector} {
422
+ #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {
128
423
  display: flex;
129
424
  align-items: center;
130
425
  justify-content: flex-start;
@@ -132,7 +427,8 @@
132
427
  }
133
428
  }
134
429
 
135
- #{defaults.$accordion-item-content-selector} {
430
+ // .accordion-item-content
431
+ #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {
136
432
  display: flex;
137
433
  flex-flow: column nowrap;
138
434
  padding: $accordion-item-content-padding;
@@ -142,18 +438,44 @@
142
438
  gap: $accordion-item-content-gap;
143
439
  }
144
440
 
145
- #{defaults.$accordion-item-body-selector} {
441
+ // .accordion-item-body
442
+ #{defaults.$accordion-item-body-selector-base}#{defaults.$accordion-item-body-selector} {
146
443
  padding: $accordion-item-body-padding;
147
444
  }
148
445
 
149
- #{defaults.$accordion-item-footer-selector} {
446
+ // .accordion-item-footer
447
+ #{defaults.$accordion-item-footer-selector-base}#{defaults.$accordion-item-footer-selector} {
150
448
  padding: $accordion-item-footer-padding;
151
449
  }
450
+
451
+ @include animation.off {
452
+ // .accordion-item
453
+ #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {
454
+ transition: $accordion-item-transition-reduced-motion;
455
+ }
456
+
457
+ // .accordion-item-toggle
458
+ #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {
459
+ transition: $accordion-item-toggle-transition-reduced-motion;
460
+
461
+ // ::after
462
+ &::#{defaults.$accordion-item-toggle-pseudo-selector} {
463
+ transition: $accordion-item-toggle-pseudo-transition-reduced-motion;
464
+ }
465
+
466
+ // .accordion-item-content
467
+ #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {
468
+ transition: $accordion-item-content-transition-reduced-motion;
469
+ }
470
+ }
471
+ }
152
472
  }
153
473
 
154
474
  @include layer(state) {
155
- #{defaults.$accordion-item-selector} {
156
- #{defaults.$accordion-item-toggle-selector} {
475
+ // .accordion-item
476
+ #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {
477
+ // .accordion-item-toggle
478
+ #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {
157
479
  /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
158
480
  --#{root-defaults.$prefix}focus-outline-offset: calc(
159
481
  -1 *
@@ -173,26 +495,79 @@
173
495
  }
174
496
 
175
497
  @include layer(theme) {
176
- #{defaults.$accordion-selector} {
498
+ // .accordion
499
+ #{defaults.$accordion-selector-base}#{defaults.$accordion-selector} {
500
+ border-color: $accordion-border-color;
177
501
  background: $accordion-background;
178
502
  color: $accordion-color;
503
+
504
+ @if root-defaults.$themeable-components and defaults.$themeable {
505
+ @include theme.generate-modifiers(
506
+ defaults.$accordion-theme-map,
507
+ defaults.$accordion-theme-selector-base,
508
+ defaults.$accordion-theme-selector-prefix,
509
+ "accordion-"
510
+ );
511
+ }
512
+
513
+ @if root-defaults.$themeable-components and defaults.$themeable {
514
+ @include theme.generate-modifiers(
515
+ defaults.$accordion-theme-map,
516
+ defaults.$accordion-theme-selector-base,
517
+ defaults.$accordion-theme-selector-prefix,
518
+ "accordion-",
519
+ ""
520
+ );
521
+ }
179
522
  }
180
523
 
181
- #{defaults.$accordion-item-selector} {
524
+ // .accordion-item
525
+ #{defaults.$accordion-item-selector-base}#{defaults.$accordion-item-selector} {
182
526
  border-color: $accordion-item-border-color;
527
+ background: $accordion-item-background;
528
+ color: $accordion-item-color;
183
529
  }
184
530
 
185
- #{defaults.$accordion-item-toggle-selector} {
531
+ // .accordion-item-content
532
+ #{defaults.$accordion-item-content-selector-base}#{defaults.$accordion-item-content-selector} {
533
+ background: $accordion-item-content-background;
534
+ color: $accordion-item-content-color;
535
+ }
536
+
537
+ // .accordion-item-toggle
538
+ #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {
186
539
  @include button-mixins.apply-theme;
540
+
541
+ border-color: $accordion-item-toggle-border-color;
542
+ background: $accordion-item-toggle-background;
543
+ color: $accordion-item-toggle-color;
544
+
545
+ @include state.generate-modifiers(
546
+ (
547
+ border-color: $accordion-item-toggle-border-color-states,
548
+ color: $accordion-item-toggle-color-states,
549
+ background: $accordion-item-toggle-background-states,
550
+ )
551
+ );
187
552
  }
188
553
 
189
- #{defaults.$accordion-item-title-selector} {
554
+ // .accordion-item-title
555
+ #{defaults.$accordion-item-title-selector-base}#{defaults.$accordion-item-title-selector} {
556
+ --#{root-defaults.$prefix}accordion-item-toggle-color: #{$accordion-item-title-color};
557
+ --#{root-defaults.$prefix}accordion-item-toggle-background: #{$accordion-item-title-background};
558
+ --#{root-defaults.$prefix}accordion-item-toggle-border-color: #{$accordion-item-title-border-color};
559
+
560
+ // &,
561
+ // .accordion-item-toggle
190
562
  &,
191
- #{defaults.$accordion-item-toggle-selector} {
192
- font-family: $accordion-title-font-family;
193
- font-size: $accordion-title-font-size;
194
- font-weight: $accordion-title-font-weight;
195
- line-height: $accordion-title-line-height;
563
+ #{defaults.$accordion-item-toggle-selector-base}#{defaults.$accordion-item-toggle-selector} {
564
+ border-color: $accordion-item-title-border-color;
565
+ background: $accordion-item-title-background;
566
+ color: $accordion-item-title-color;
567
+ font-family: $accordion-item-title-font-family;
568
+ font-size: $accordion-item-title-font-size;
569
+ font-weight: $accordion-item-title-font-weight;
570
+ line-height: $accordion-item-title-line-height;
196
571
  }
197
572
  }
198
573
  }