@i-cell/ids-styles 0.0.66 → 0.0.69

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 (25) hide show
  1. package/dist/accordion/accordion.css +44 -43
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +84 -79
  4. package/dist/checkbox/checkbox-group.css +88 -28
  5. package/dist/checkbox/checkbox-group.min.css +1 -1
  6. package/dist/checkbox/checkbox-group.plugin.js +124 -36
  7. package/dist/checkbox/checkbox.css +36 -36
  8. package/dist/checkbox/checkbox.min.css +1 -1
  9. package/dist/checkbox/checkbox.plugin.js +36 -36
  10. package/dist/components.css +290 -173
  11. package/dist/components.min.css +1 -1
  12. package/dist/components.plugin.js +368 -219
  13. package/dist/notification/notification.css +11 -1
  14. package/dist/notification/notification.min.css +1 -1
  15. package/dist/notification/notification.plugin.js +30 -8
  16. package/dist/option/option.css +5 -6
  17. package/dist/option/option.min.css +1 -1
  18. package/dist/option/option.plugin.js +5 -5
  19. package/dist/radio/radio.css +34 -2
  20. package/dist/radio/radio.min.css +1 -1
  21. package/dist/radio/radio.plugin.js +26 -3
  22. package/dist/switch/switch.css +72 -57
  23. package/dist/switch/switch.min.css +1 -1
  24. package/dist/switch/switch.plugin.js +63 -52
  25. package/package.json +2 -2
package/dist/accordion/accordion.plugin.js CHANGED
@@ -20,30 +20,31 @@ module.exports = function AccordionPlugin() {
20
20
  borderColor: 'rgba(0,0,0,0)',
21
21
  },
22
22
  '.ids-accordion>.ids-accordion-controls': { display: 'flex', alignItems: 'flex-start', alignSelf: 'stretch' },
23
- '.ids-accordion>.ids-accordion-item': {
24
- display: 'flex',
23
+ '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)': {
25
24
  width: '100%',
25
+ display: 'flex',
26
26
  flexDirection: 'column',
27
27
  alignItems: 'flex-start',
28
- flexShrink: 0,
28
+ alignSelf: 'stretch',
29
29
  },
30
- '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary': {
30
+ '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
31
31
  display: 'flex',
32
32
  alignItems: 'center',
33
33
  width: '100%',
34
34
  flex: '1 0 0',
35
35
  borderStyle: 'solid',
36
36
  cursor: 'pointer',
37
+ textAlign: 'left',
37
38
  },
38
- '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
39
+ '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
39
40
  { outlineOffset: '2px', outlineStyle: 'solid', zIndex: 1 },
40
- '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
41
+ '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title': {
41
42
  flex: '1 0 0',
42
43
  whiteSpace: 'nowrap',
43
44
  overflow: 'hidden',
44
45
  textOverflow: 'ellipsis',
45
46
  },
46
- '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
47
+ '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
47
48
  pointerEvents: 'none',
48
49
  userSelect: 'none',
49
50
  },
@@ -67,26 +68,27 @@ module.exports = function AccordionPlugin() {
67
68
  padding: 'var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact)',
68
69
  gap: 'var(--ids-comp-accordion-item-size-gap-compact)',
69
70
  },
70
- '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary': {
71
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
71
72
  height: 'var(--ids-comp-accordion-summary-size-height-compact)',
72
73
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact)',
73
74
  gap: 'var(--ids-comp-accordion-summary-size-gap-compact)',
74
75
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-compact)',
75
76
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-compact)',
76
77
  },
77
- '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
78
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
78
79
  {
79
80
  outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-compact)',
80
81
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
81
82
  },
82
- '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
83
- fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
84
- fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
85
- fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
86
- letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
87
- lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
88
- },
89
- '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
83
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
84
+ {
85
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
86
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
87
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
88
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
89
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
90
+ },
91
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
90
92
  fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-compact)',
91
93
  fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-compact)',
92
94
  lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-compact)',
@@ -113,7 +115,7 @@ module.exports = function AccordionPlugin() {
113
115
  padding: 'var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable)',
114
116
  gap: 'var(--ids-comp-accordion-item-size-gap-comfortable)',
115
117
  },
116
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary': {
118
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
117
119
  height: 'var(--ids-comp-accordion-summary-size-height-comfortable)',
118
120
  padding:
119
121
  'var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable)',
@@ -121,19 +123,20 @@ module.exports = function AccordionPlugin() {
121
123
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-comfortable)',
122
124
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-comfortable)',
123
125
  },
124
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
126
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
125
127
  {
126
128
  outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable)',
127
129
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
128
130
  },
129
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
130
- fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
131
- fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
132
- fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
133
- letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
134
- lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
135
- },
136
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
131
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
132
+ {
133
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
134
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
135
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
136
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
137
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
138
+ },
139
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
137
140
  fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-comfortable)',
138
141
  fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-comfortable)',
139
142
  lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-comfortable)',
@@ -159,26 +162,27 @@ module.exports = function AccordionPlugin() {
159
162
  padding: 'var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious)',
160
163
  gap: 'var(--ids-comp-accordion-item-size-gap-spacious)',
161
164
  },
162
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary': {
165
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
163
166
  height: 'var(--ids-comp-accordion-summary-size-height-spacious)',
164
167
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious)',
165
168
  gap: 'var(--ids-comp-accordion-summary-size-gap-spacious)',
166
169
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-spacious)',
167
170
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-spacious)',
168
171
  },
169
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
172
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
170
173
  {
171
174
  outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious)',
172
175
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
173
176
  },
174
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
175
- fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
176
- fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
177
- fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
178
- letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
179
- lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
180
- },
181
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
177
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
178
+ {
179
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
180
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
181
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
182
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
183
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
184
+ },
185
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
182
186
  fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-spacious)',
183
187
  fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-spacious)',
184
188
  lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-spacious)',
@@ -203,26 +207,27 @@ module.exports = function AccordionPlugin() {
203
207
  padding: 'var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense)',
204
208
  gap: 'var(--ids-comp-accordion-item-size-gap-dense)',
205
209
  },
206
- '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary': {
210
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
207
211
  height: 'var(--ids-comp-accordion-summary-size-height-dense)',
208
212
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense)',
209
213
  gap: 'var(--ids-comp-accordion-summary-size-gap-dense)',
210
214
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-dense)',
211
215
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-dense)',
212
216
  },
213
- '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
217
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
214
218
  {
215
219
  outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-dense)',
216
220
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
217
221
  },
218
- '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
219
- fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
220
- fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
221
- fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
222
- letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
223
- lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
224
- },
225
- '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
222
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
223
+ {
224
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
225
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
226
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
227
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
228
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
229
+ },
230
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
226
231
  fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-dense)',
227
232
  fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-dense)',
228
233
  lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-dense)',
@@ -237,90 +242,90 @@ module.exports = function AccordionPlugin() {
237
242
  borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
238
243
  backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
239
244
  },
240
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary': {
245
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
241
246
  background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
242
247
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
243
248
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
244
249
  },
245
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
250
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
246
251
  color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-default)',
247
252
  },
248
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover': {
253
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover': {
249
254
  background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
250
255
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
251
256
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
252
257
  },
253
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
258
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover>.ids-icon': {
254
259
  color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-hovered)',
255
260
  },
256
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus-visible':
261
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
257
262
  {
258
263
  background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
259
264
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
260
265
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
261
266
  },
262
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus-visible>.ids-icon':
267
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible>.ids-icon':
263
268
  { color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-focused)' },
264
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active': {
269
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active': {
265
270
  background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
266
271
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
267
272
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
268
273
  },
269
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
274
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active>.ids-icon': {
270
275
  color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-pressed)',
271
276
  },
272
- '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
273
- background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
274
- borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
275
- color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
276
- },
277
- '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary>.ids-icon': {
278
- color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-disabled)',
279
- },
277
+ '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary':
278
+ {
279
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
280
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
281
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
282
+ },
283
+ '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon':
284
+ { color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-disabled)' },
280
285
  '.ids-accordion.ids-accordion-filled': {
281
286
  borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
282
287
  backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
283
288
  },
284
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary': {
289
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
285
290
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
286
291
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
287
292
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
288
293
  },
289
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
294
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
290
295
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-default)',
291
296
  },
292
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover': {
297
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover': {
293
298
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
294
299
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
295
300
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
296
301
  },
297
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
302
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover>.ids-icon': {
298
303
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-hovered)',
299
304
  },
300
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus-visible':
305
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
301
306
  {
302
307
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
303
308
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
304
309
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
305
310
  },
306
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus-visible>.ids-icon':
311
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible>.ids-icon':
307
312
  { color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-focused)' },
308
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active': {
313
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active': {
309
314
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
310
315
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
311
316
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
312
317
  },
313
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
318
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active>.ids-icon': {
314
319
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-pressed)',
315
320
  },
316
- '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
317
- background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
318
- borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
319
- color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
320
- },
321
- '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary>.ids-icon': {
322
- color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)',
323
- },
321
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary':
322
+ {
323
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
324
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
325
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
326
+ },
327
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon':
328
+ { color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)' },
324
329
  };
325
330
 
326
331
  addComponents(cssObj);
package/dist/checkbox/checkbox-group.css CHANGED
@@ -4,7 +4,7 @@
4
4
  justify-content: center;
5
5
  align-items: flex-start;
6
6
  }
7
- .ids-checkbox-group > .ids-checkbox-group__label {
7
+ .ids-checkbox-group > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
8
8
  font-style: normal;
9
9
  }
10
10
  .ids-checkbox-group > .ids-checkbox-group__list {
@@ -19,71 +19,131 @@
19
19
  align-items: flex-start;
20
20
  }
21
21
  .ids-checkbox-group.ids-checkbox-group-compact {
22
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);
23
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-compact);
22
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact);
23
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact);
24
24
  }
25
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
25
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend {
26
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact);
27
+ }
28
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
26
29
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
27
30
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
28
31
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
29
32
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
30
33
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
31
34
  }
32
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list {
33
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);
34
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact);
35
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
36
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact);
37
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact);
38
+ }
39
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
40
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact);
41
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact);
42
+ }
43
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
44
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact);
45
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
46
+ }
47
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
48
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact);
49
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
35
50
  }
36
51
  .ids-checkbox-group.ids-checkbox-group-comfortable {
37
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);
38
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable);
52
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);
53
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable);
39
54
  }
40
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
55
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend {
56
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable);
57
+ }
58
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
41
59
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
42
60
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
43
61
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
44
62
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
45
63
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
46
64
  }
47
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list {
48
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);
49
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable);
65
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
66
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable);
67
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable);
68
+ }
69
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
70
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable);
71
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable);
72
+ }
73
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
74
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable);
75
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
76
+ }
77
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
78
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable);
79
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
50
80
  }
51
81
  .ids-checkbox-group.ids-checkbox-group-spacious {
52
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);
53
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious);
82
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);
83
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious);
54
84
  }
55
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
85
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend {
86
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious);
87
+ }
88
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
56
89
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
57
90
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
58
91
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
59
92
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
60
93
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
61
94
  }
62
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list {
63
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);
64
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious);
95
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
96
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious);
97
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious);
98
+ }
99
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
100
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious);
101
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious);
102
+ }
103
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
104
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious);
105
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
106
+ }
107
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
108
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious);
109
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
65
110
  }
66
111
  .ids-checkbox-group.ids-checkbox-group-dense {
67
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);
68
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-dense);
112
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);
113
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense);
69
114
  }
70
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
115
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend {
116
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense);
117
+ }
118
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
71
119
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
72
120
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
73
121
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
74
122
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
75
123
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
76
124
  }
77
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list {
78
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);
79
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense);
125
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
126
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense);
127
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense);
128
+ }
129
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
130
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense);
131
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense);
132
+ }
133
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
134
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense);
135
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
136
+ }
137
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
138
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);
139
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
80
140
  }
81
- .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
141
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
82
142
  color: var(--ids-comp-checkbox-label-color-fg-light-default);
83
143
  }
84
- .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
144
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
85
145
  color: var(--ids-comp-checkbox-label-color-fg-dark-default);
86
146
  }
87
- .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
147
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
88
148
  color: var(--ids-comp-checkbox-label-color-fg-surface-default);
89
149
  }
package/dist/checkbox/checkbox-group.min.css CHANGED
@@ -1 +1 @@
1
- .ids-checkbox-group{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.ids-checkbox-group>.ids-checkbox-group__label{font-style:normal}.ids-checkbox-group>.ids-checkbox-group__list{display:flex}.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list{flex-direction:row;align-items:center}.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list{flex-direction:column;align-items:flex-start}.ids-checkbox-group.ids-checkbox-group-compact{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-compact);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-compact);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-compact);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-compact);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)}.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-comfortable{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-spacious{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-spacious);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-spacious);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-spacious);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-dense{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-dense);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-dense);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-dense);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-dense);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)}.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-light-default)}.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-dark-default)}.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-surface-default)}
1
+ .ids-checkbox-group{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.ids-checkbox-group>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-style:normal}.ids-checkbox-group>.ids-checkbox-group__list{display:flex}.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list{flex-direction:row;align-items:center}.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list{flex-direction:column;align-items:flex-start}.ids-checkbox-group.ids-checkbox-group-compact{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-compact);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-compact);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-compact);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-compact);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-comfortable{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-spacious{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-spacious);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-spacious);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-spacious);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-dense{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-dense);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-dense);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-dense);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-dense);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-light-default)}.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-dark-default)}.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-surface-default)}