@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.
@@ -21,33 +21,34 @@
21
21
  align-items: flex-start;
22
22
  align-self: stretch;
23
23
  }
24
- .ids-accordion > .ids-accordion-item {
25
- display: flex;
24
+ .ids-accordion > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) {
26
25
  width: 100%;
26
+ display: flex;
27
27
  flex-direction: column;
28
28
  align-items: flex-start;
29
- flex-shrink: 0;
29
+ align-self: stretch;
30
30
  }
31
- .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary {
31
+ .ids-accordion > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
32
32
  display: flex;
33
33
  align-items: center;
34
34
  width: 100%;
35
35
  flex: 1 0 0;
36
36
  border-style: solid;
37
37
  cursor: pointer;
38
+ text-align: left;
38
39
  }
39
- .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary:focus, .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary:focus-visible {
40
+ .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 {
40
41
  outline-offset: 2px;
41
42
  outline-style: solid;
42
43
  z-index: 1;
43
44
  }
44
- .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
45
+ .ids-accordion > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
45
46
  flex: 1 0 0;
46
47
  white-space: nowrap;
47
48
  overflow: hidden;
48
49
  text-overflow: ellipsis;
49
50
  }
50
- .ids-accordion > .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary {
51
+ .ids-accordion > .ids-accordion-item.ids-accordion-item-disabled > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
51
52
  pointer-events: none;
52
53
  user-select: none;
53
54
  }
@@ -71,25 +72,25 @@
71
72
  padding: var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact);
72
73
  gap: var(--ids-comp-accordion-item-size-gap-compact);
73
74
  }
74
- .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary {
75
+ .ids-accordion.ids-accordion-compact > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
75
76
  height: var(--ids-comp-accordion-summary-size-height-compact);
76
77
  padding: var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact);
77
78
  gap: var(--ids-comp-accordion-summary-size-gap-compact);
78
79
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-compact);
79
80
  border-width: var(--ids-comp-accordion-summary-size-border-width-compact);
80
81
  }
81
- .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 {
82
+ .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 {
82
83
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-compact);
83
84
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
84
85
  }
85
- .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
86
+ .ids-accordion.ids-accordion-compact > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
86
87
  font-family: var(--ids-comp-accordion-summary-typography-font-family-compact);
87
88
  font-size: var(--ids-comp-accordion-summary-typography-font-size-compact);
88
89
  font-weight: var(--ids-comp-accordion-summary-typography-font-weight-compact);
89
90
  letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-compact);
90
91
  line-height: var(--ids-comp-accordion-summary-typography-line-height-compact);
91
92
  }
92
- .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
93
+ .ids-accordion.ids-accordion-compact > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
93
94
  font-size: var(--ids-comp-accordion-summary-icon-typography-font-size-compact);
94
95
  font-weight: var(--ids-comp-accordion-summary-icon-typography-font-weight-compact);
95
96
  line-height: var(--ids-comp-accordion-summary-icon-typography-line-height-compact);
@@ -114,25 +115,25 @@
114
115
  padding: var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable);
115
116
  gap: var(--ids-comp-accordion-item-size-gap-comfortable);
116
117
  }
117
- .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 {
118
119
  height: var(--ids-comp-accordion-summary-size-height-comfortable);
119
120
  padding: var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable);
120
121
  gap: var(--ids-comp-accordion-summary-size-gap-comfortable);
121
122
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-comfortable);
122
123
  border-width: var(--ids-comp-accordion-summary-size-border-width-comfortable);
123
124
  }
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 {
125
+ .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
126
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable);
126
127
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
127
128
  }
128
- .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
129
+ .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
129
130
  font-family: var(--ids-comp-accordion-summary-typography-font-family-comfortable);
130
131
  font-size: var(--ids-comp-accordion-summary-typography-font-size-comfortable);
131
132
  font-weight: var(--ids-comp-accordion-summary-typography-font-weight-comfortable);
132
133
  letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable);
133
134
  line-height: var(--ids-comp-accordion-summary-typography-line-height-comfortable);
134
135
  }
135
- .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
136
+ .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
136
137
  font-size: var(--ids-comp-accordion-summary-icon-typography-font-size-comfortable);
137
138
  font-weight: var(--ids-comp-accordion-summary-icon-typography-font-weight-comfortable);
138
139
  line-height: var(--ids-comp-accordion-summary-icon-typography-line-height-comfortable);
@@ -157,25 +158,25 @@
157
158
  padding: var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious);
158
159
  gap: var(--ids-comp-accordion-item-size-gap-spacious);
159
160
  }
160
- .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary {
161
+ .ids-accordion.ids-accordion-spacious > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
161
162
  height: var(--ids-comp-accordion-summary-size-height-spacious);
162
163
  padding: var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious);
163
164
  gap: var(--ids-comp-accordion-summary-size-gap-spacious);
164
165
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-spacious);
165
166
  border-width: var(--ids-comp-accordion-summary-size-border-width-spacious);
166
167
  }
167
- .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 {
168
+ .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 {
168
169
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious);
169
170
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
170
171
  }
171
- .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
172
+ .ids-accordion.ids-accordion-spacious > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
172
173
  font-family: var(--ids-comp-accordion-summary-typography-font-family-spacious);
173
174
  font-size: var(--ids-comp-accordion-summary-typography-font-size-spacious);
174
175
  font-weight: var(--ids-comp-accordion-summary-typography-font-weight-spacious);
175
176
  letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-spacious);
176
177
  line-height: var(--ids-comp-accordion-summary-typography-line-height-spacious);
177
178
  }
178
- .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
179
+ .ids-accordion.ids-accordion-spacious > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
179
180
  font-size: var(--ids-comp-accordion-summary-icon-typography-font-size-spacious);
180
181
  font-weight: var(--ids-comp-accordion-summary-icon-typography-font-weight-spacious);
181
182
  line-height: var(--ids-comp-accordion-summary-icon-typography-line-height-spacious);
@@ -200,25 +201,25 @@
200
201
  padding: var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense);
201
202
  gap: var(--ids-comp-accordion-item-size-gap-dense);
202
203
  }
203
- .ids-accordion.ids-accordion-dense > .ids-accordion-item > .ids-accordion-item-summary {
204
+ .ids-accordion.ids-accordion-dense > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
204
205
  height: var(--ids-comp-accordion-summary-size-height-dense);
205
206
  padding: var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense);
206
207
  gap: var(--ids-comp-accordion-summary-size-gap-dense);
207
208
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-dense);
208
209
  border-width: var(--ids-comp-accordion-summary-size-border-width-dense);
209
210
  }
210
- .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 {
211
+ .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 {
211
212
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-dense);
212
213
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
213
214
  }
214
- .ids-accordion.ids-accordion-dense > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
215
+ .ids-accordion.ids-accordion-dense > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
215
216
  font-family: var(--ids-comp-accordion-summary-typography-font-family-dense);
216
217
  font-size: var(--ids-comp-accordion-summary-typography-font-size-dense);
217
218
  font-weight: var(--ids-comp-accordion-summary-typography-font-weight-dense);
218
219
  letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-dense);
219
220
  line-height: var(--ids-comp-accordion-summary-typography-line-height-dense);
220
221
  }
221
- .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-icon {
222
223
  font-size: var(--ids-comp-accordion-summary-icon-typography-font-size-dense);
223
224
  font-weight: var(--ids-comp-accordion-summary-icon-typography-font-weight-dense);
224
225
  line-height: var(--ids-comp-accordion-summary-icon-typography-line-height-dense);
@@ -233,88 +234,88 @@
233
234
  border-color: var(--ids-comp-accordion-container-color-border-default);
234
235
  background-color: var(--ids-comp-accordion-container-color-bg-default);
235
236
  }
236
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary {
237
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
237
238
  background: var(--ids-comp-accordion-summary-text-color-bg-default);
238
239
  border-color: var(--ids-comp-accordion-summary-text-color-border-default);
239
240
  color: var(--ids-comp-accordion-summary-text-color-fg-label-default);
240
241
  }
241
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
242
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
242
243
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-default);
243
244
  }
244
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary:hover {
245
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:hover {
245
246
  background: var(--ids-comp-accordion-summary-text-color-bg-hovered);
246
247
  border-color: var(--ids-comp-accordion-summary-text-color-border-hovered);
247
248
  color: var(--ids-comp-accordion-summary-text-color-fg-label-hovered);
248
249
  }
249
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary:hover > .ids-icon {
250
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:hover > .ids-icon {
250
251
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-hovered);
251
252
  }
252
- .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 {
253
+ .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 {
253
254
  background: var(--ids-comp-accordion-summary-text-color-bg-focused);
254
255
  border-color: var(--ids-comp-accordion-summary-text-color-border-focused);
255
256
  color: var(--ids-comp-accordion-summary-text-color-fg-label-focused);
256
257
  }
257
- .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 {
258
+ .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 {
258
259
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-focused);
259
260
  }
260
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary:active {
261
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:active {
261
262
  background: var(--ids-comp-accordion-summary-text-color-bg-pressed);
262
263
  border-color: var(--ids-comp-accordion-summary-text-color-border-pressed);
263
264
  color: var(--ids-comp-accordion-summary-text-color-fg-label-pressed);
264
265
  }
265
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary:active > .ids-icon {
266
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:active > .ids-icon {
266
267
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-pressed);
267
268
  }
268
- .ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary {
269
+ .ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
269
270
  background: var(--ids-comp-accordion-summary-text-color-bg-disabled);
270
271
  border-color: var(--ids-comp-accordion-summary-text-color-border-disabled);
271
272
  color: var(--ids-comp-accordion-summary-text-color-fg-label-disabled);
272
273
  }
273
- .ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary > .ids-icon {
274
+ .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 {
274
275
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-disabled);
275
276
  }
276
277
  .ids-accordion.ids-accordion-filled {
277
278
  border-color: var(--ids-comp-accordion-container-color-border-default);
278
279
  background-color: var(--ids-comp-accordion-container-color-bg-default);
279
280
  }
280
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary {
281
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
281
282
  background: var(--ids-comp-accordion-summary-filled-color-bg-default);
282
283
  border-color: var(--ids-comp-accordion-summary-filled-color-border-default);
283
284
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-default);
284
285
  }
285
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
286
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
286
287
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-default);
287
288
  }
288
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary:hover {
289
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:hover {
289
290
  background: var(--ids-comp-accordion-summary-filled-color-bg-hovered);
290
291
  border-color: var(--ids-comp-accordion-summary-filled-color-border-hovered);
291
292
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-hovered);
292
293
  }
293
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary:hover > .ids-icon {
294
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:hover > .ids-icon {
294
295
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-hovered);
295
296
  }
296
- .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 {
297
+ .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 {
297
298
  background: var(--ids-comp-accordion-summary-filled-color-bg-focused);
298
299
  border-color: var(--ids-comp-accordion-summary-filled-color-border-focused);
299
300
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-focused);
300
301
  }
301
- .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 {
302
+ .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 {
302
303
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-focused);
303
304
  }
304
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary:active {
305
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:active {
305
306
  background: var(--ids-comp-accordion-summary-filled-color-bg-pressed);
306
307
  border-color: var(--ids-comp-accordion-summary-filled-color-border-pressed);
307
308
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-pressed);
308
309
  }
309
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary:active > .ids-icon {
310
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:active > .ids-icon {
310
311
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-pressed);
311
312
  }
312
- .ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary {
313
+ .ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
313
314
  background: var(--ids-comp-accordion-summary-filled-color-bg-disabled);
314
315
  border-color: var(--ids-comp-accordion-summary-filled-color-border-disabled);
315
316
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-disabled);
316
317
  }
317
- .ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary > .ids-icon {
318
+ .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 {
318
319
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled);
319
320
  }
320
321
 
@@ -3532,7 +3533,7 @@ input[autocomplete] {
3532
3533
  justify-content: center;
3533
3534
  align-items: flex-start;
3534
3535
  }
3535
- .ids-checkbox-group > .ids-checkbox-group__label {
3536
+ .ids-checkbox-group > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3536
3537
  font-style: normal;
3537
3538
  }
3538
3539
  .ids-checkbox-group > .ids-checkbox-group__list {
@@ -3547,72 +3548,132 @@ input[autocomplete] {
3547
3548
  align-items: flex-start;
3548
3549
  }
3549
3550
  .ids-checkbox-group.ids-checkbox-group-compact {
3550
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);
3551
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-compact);
3551
+ 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);
3552
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact);
3553
+ }
3554
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend {
3555
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact);
3552
3556
  }
3553
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
3557
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3554
3558
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
3555
3559
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
3556
3560
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
3557
3561
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
3558
3562
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
3559
3563
  }
3560
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list {
3561
- 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);
3562
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact);
3564
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3565
+ 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);
3566
+ 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);
3567
+ }
3568
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3569
+ 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);
3570
+ 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);
3571
+ }
3572
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3573
+ 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);
3574
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
3575
+ }
3576
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3577
+ 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);
3578
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
3563
3579
  }
3564
3580
  .ids-checkbox-group.ids-checkbox-group-comfortable {
3565
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);
3566
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable);
3581
+ 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);
3582
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable);
3583
+ }
3584
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend {
3585
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable);
3567
3586
  }
3568
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
3587
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3569
3588
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
3570
3589
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
3571
3590
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
3572
3591
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
3573
3592
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
3574
3593
  }
3575
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list {
3576
- 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);
3577
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable);
3594
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3595
+ 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);
3596
+ 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);
3597
+ }
3598
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3599
+ 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);
3600
+ 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);
3601
+ }
3602
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3603
+ 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);
3604
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
3605
+ }
3606
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3607
+ 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);
3608
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
3578
3609
  }
3579
3610
  .ids-checkbox-group.ids-checkbox-group-spacious {
3580
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);
3581
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious);
3611
+ 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);
3612
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious);
3613
+ }
3614
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend {
3615
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious);
3582
3616
  }
3583
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
3617
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3584
3618
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
3585
3619
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
3586
3620
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
3587
3621
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
3588
3622
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
3589
3623
  }
3590
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list {
3591
- 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);
3592
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious);
3624
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3625
+ 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);
3626
+ 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);
3627
+ }
3628
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3629
+ 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);
3630
+ 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);
3631
+ }
3632
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3633
+ 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);
3634
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
3635
+ }
3636
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3637
+ 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);
3638
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
3593
3639
  }
3594
3640
  .ids-checkbox-group.ids-checkbox-group-dense {
3595
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);
3596
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-dense);
3641
+ 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);
3642
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense);
3643
+ }
3644
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend {
3645
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense);
3597
3646
  }
3598
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
3647
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3599
3648
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
3600
3649
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
3601
3650
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
3602
3651
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
3603
3652
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
3604
3653
  }
3605
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list {
3606
- 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);
3607
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense);
3654
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3655
+ 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);
3656
+ 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);
3657
+ }
3658
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3659
+ 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);
3660
+ 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);
3661
+ }
3662
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3663
+ 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);
3664
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
3608
3665
  }
3609
- .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
3666
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3667
+ 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);
3668
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
3669
+ }
3670
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3610
3671
  color: var(--ids-comp-checkbox-label-color-fg-light-default);
3611
3672
  }
3612
- .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
3673
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3613
3674
  color: var(--ids-comp-checkbox-label-color-fg-dark-default);
3614
3675
  }
3615
- .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
3676
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3616
3677
  color: var(--ids-comp-checkbox-label-color-fg-surface-default);
3617
3678
  }
3618
3679
 
@@ -4148,136 +4209,136 @@ input[autocomplete] {
4148
4209
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4149
4210
  cursor: pointer;
4150
4211
  }
4151
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4212
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4152
4213
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
4153
4214
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
4154
4215
  }
4155
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4216
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4156
4217
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
4157
4218
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
4158
4219
  }
4159
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4220
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4160
4221
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
4161
4222
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
4162
4223
  }
4163
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4224
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4164
4225
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
4165
4226
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
4166
4227
  }
4167
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4228
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4168
4229
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
4169
4230
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
4170
4231
  }
4171
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4232
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4172
4233
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
4173
4234
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
4174
4235
  }
4175
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4236
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4176
4237
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
4177
4238
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
4178
4239
  }
4179
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4240
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4180
4241
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
4181
4242
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
4182
4243
  }
4183
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4244
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4184
4245
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
4185
4246
  }
4186
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4247
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4187
4248
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
4188
4249
  }
4189
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4250
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4190
4251
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
4191
4252
  }
4192
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4253
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4193
4254
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
4194
4255
  }
4195
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4256
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4196
4257
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
4197
4258
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
4198
4259
  }
4199
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4260
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4200
4261
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
4201
4262
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4202
4263
  }
4203
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4264
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4204
4265
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
4205
4266
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4206
4267
  }
4207
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4268
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4208
4269
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
4209
4270
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
4210
4271
  }
4211
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4272
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4212
4273
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
4213
4274
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
4214
4275
  }
4215
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4276
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4216
4277
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
4217
4278
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4218
4279
  }
4219
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4280
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4220
4281
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
4221
4282
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4222
4283
  }
4223
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4284
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4224
4285
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
4225
4286
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
4226
4287
  }
4227
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4288
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4228
4289
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
4229
4290
  }
4230
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4291
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4231
4292
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
4232
4293
  }
4233
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4294
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4234
4295
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
4235
4296
  }
4236
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4297
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4237
4298
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
4238
4299
  }
4239
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4300
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4240
4301
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
4241
4302
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
4242
4303
  }
4243
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4304
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4244
4305
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
4245
4306
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4246
4307
  }
4247
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4308
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4248
4309
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
4249
4310
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4250
4311
  }
4251
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4312
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4252
4313
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
4253
4314
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
4254
4315
  }
4255
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4316
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4256
4317
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
4257
4318
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
4258
4319
  }
4259
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4320
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4260
4321
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
4261
4322
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4262
4323
  }
4263
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4324
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4264
4325
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
4265
4326
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4266
4327
  }
4267
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4328
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4268
4329
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
4269
4330
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
4270
4331
  }
4271
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4332
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4272
4333
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
4273
4334
  }
4274
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4335
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4275
4336
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
4276
4337
  }
4277
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4338
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4278
4339
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
4279
4340
  }
4280
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4341
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4281
4342
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
4282
4343
  }
4283
4344
 
@@ -9196,7 +9257,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9196
9257
  }
9197
9258
  .ids-notification > .ids-notification__content-wrapper {
9198
9259
  display: flex;
9199
- justify-content: space-between;
9200
9260
  align-items: flex-start;
9201
9261
  align-content: flex-start;
9202
9262
  flex-wrap: wrap;
@@ -9229,6 +9289,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9229
9289
  align-items: center;
9230
9290
  flex-shrink: 0;
9231
9291
  }
9292
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container {
9293
+ margin-left: auto;
9294
+ }
9232
9295
  .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container.ids-notification__label-button {
9233
9296
  display: flex;
9234
9297
  align-self: center;
@@ -9342,6 +9405,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9342
9405
  }
9343
9406
  .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
9344
9407
  min-width: var(--ids-comp-notification-filled-container-size-min-width-compact);
9408
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-compact);
9345
9409
  }
9346
9410
  .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper {
9347
9411
  gap: var(--ids-comp-notification-filled-container-size-gap-comfortable);
@@ -9354,6 +9418,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9354
9418
  }
9355
9419
  .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
9356
9420
  min-width: var(--ids-comp-notification-filled-container-size-min-width-comfortable);
9421
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-comfortable);
9357
9422
  }
9358
9423
  .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper {
9359
9424
  gap: var(--ids-comp-notification-filled-container-size-gap-spacious);
@@ -9366,6 +9431,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9366
9431
  }
9367
9432
  .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
9368
9433
  min-width: var(--ids-comp-notification-filled-container-size-min-width-spacious);
9434
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-spacious);
9369
9435
  }
9370
9436
  .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper {
9371
9437
  gap: var(--ids-comp-notification-filled-container-size-gap-dense);
@@ -9378,6 +9444,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9378
9444
  }
9379
9445
  .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
9380
9446
  min-width: var(--ids-comp-notification-filled-container-size-min-width-dense);
9447
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-dense);
9381
9448
  }
9382
9449
  .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper {
9383
9450
  border-color: var(--ids-comp-notification-outlined-color-border-error-default);
@@ -9481,6 +9548,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9481
9548
  }
9482
9549
  .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
9483
9550
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
9551
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-compact);
9484
9552
  }
9485
9553
  .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper {
9486
9554
  gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
@@ -9493,6 +9561,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9493
9561
  }
9494
9562
  .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
9495
9563
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
9564
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-comfortable);
9496
9565
  }
9497
9566
  .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper {
9498
9567
  gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
@@ -9505,6 +9574,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9505
9574
  }
9506
9575
  .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
9507
9576
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
9577
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-spacious);
9508
9578
  }
9509
9579
  .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper {
9510
9580
  gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
@@ -9517,6 +9587,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9517
9587
  }
9518
9588
  .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
9519
9589
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
9590
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-dense);
9520
9591
  }
9521
9592
  .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
9522
9593
  padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);
@@ -9675,8 +9746,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9675
9746
  user-select: none;
9676
9747
  }
9677
9748
  .ids-option > .ids-option__text {
9678
- overflow: hidden;
9679
- text-overflow: ellipsis;
9749
+ overflow-wrap: anywhere;
9680
9750
  font-style: normal;
9681
9751
  }
9682
9752
  .ids-option:not(.ids-option-disabled) {
@@ -9692,7 +9762,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9692
9762
  outline-style: solid;
9693
9763
  }
9694
9764
  .ids-option.ids-option-compact {
9695
- height: var(--ids-comp-forms-option-item-size-min-height-compact);
9765
+ min-height: var(--ids-comp-forms-option-item-size-min-height-compact);
9696
9766
  padding: var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);
9697
9767
  gap: var(--ids-comp-forms-option-container-size-gap-compact);
9698
9768
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-compact);
@@ -9715,7 +9785,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9715
9785
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
9716
9786
  }
9717
9787
  .ids-option.ids-option-comfortable {
9718
- height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
9788
+ min-height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
9719
9789
  padding: var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);
9720
9790
  gap: var(--ids-comp-forms-option-container-size-gap-comfortable);
9721
9791
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-comfortable);
@@ -9738,7 +9808,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9738
9808
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
9739
9809
  }
9740
9810
  .ids-option.ids-option-spacious {
9741
- height: var(--ids-comp-forms-option-item-size-min-height-spacious);
9811
+ min-height: var(--ids-comp-forms-option-item-size-min-height-spacious);
9742
9812
  padding: var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);
9743
9813
  gap: var(--ids-comp-forms-option-container-size-gap-spacious);
9744
9814
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-spacious);
@@ -9761,7 +9831,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9761
9831
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
9762
9832
  }
9763
9833
  .ids-option.ids-option-dense {
9764
- height: var(--ids-comp-forms-option-item-size-min-height-dense);
9834
+ min-height: var(--ids-comp-forms-option-item-size-min-height-dense);
9765
9835
  padding: var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);
9766
9836
  gap: var(--ids-comp-forms-option-container-size-gap-dense);
9767
9837
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-dense);
@@ -10636,18 +10706,51 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10636
10706
  flex-direction: row-reverse;
10637
10707
  justify-content: start;
10638
10708
  }
10639
- .ids-radio-group .ids-radio.ids-radio-righ {
10709
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper {
10710
+ display: flex;
10711
+ flex-direction: column;
10712
+ align-items: flex-start;
10713
+ }
10714
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper .ids-radio__label {
10715
+ justify-content: start;
10716
+ }
10717
+ .ids-radio-group .ids-radio.ids-radio-right {
10640
10718
  flex-direction: row;
10641
10719
  justify-content: start;
10642
10720
  }
10721
+ .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
10722
+ display: flex;
10723
+ flex-direction: column;
10724
+ align-items: flex-start;
10725
+ }
10726
+ .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper .ids-radio__label {
10727
+ justify-content: start;
10728
+ }
10643
10729
  .ids-radio-group .ids-radio.ids-radio-top {
10644
10730
  flex-direction: column-reverse;
10645
10731
  align-items: center;
10732
+ justify-content: center;
10733
+ }
10734
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper {
10735
+ display: flex;
10736
+ flex-direction: column;
10737
+ align-items: center;
10738
+ }
10739
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper .ids-radio__label {
10740
+ justify-content: center;
10646
10741
  }
10647
10742
  .ids-radio-group .ids-radio.ids-radio-bottom {
10648
10743
  flex-direction: column;
10649
10744
  align-items: center;
10650
10745
  }
10746
+ .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper {
10747
+ display: flex;
10748
+ flex-direction: column;
10749
+ align-items: center;
10750
+ }
10751
+ .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper .ids-radio__label {
10752
+ justify-content: center;
10753
+ }
10651
10754
  .ids-radio-group .ids-radio .ids-radio__input-wrapper {
10652
10755
  position: relative;
10653
10756
  display: flex;
@@ -10700,7 +10803,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10700
10803
  }
10701
10804
  .ids-radio-group .ids-radio .ids-radio__label {
10702
10805
  display: flex;
10703
- justify-content: center;
10704
10806
  align-items: center;
10705
10807
  flex: 1 0 0;
10706
10808
  font-style: normal;
@@ -13967,6 +14069,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
13967
14069
  font-style: normal;
13968
14070
  flex-grow: 1;
13969
14071
  }
14072
+ .ids-switch:not(.ids-switch-disabled) > .ids-switch__label {
14073
+ cursor: pointer;
14074
+ }
13970
14075
  .ids-switch.ids-switch-label-right {
13971
14076
  flex-direction: row;
13972
14077
  }
@@ -14188,21 +14293,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14188
14293
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14189
14294
  color: var(--ids-comp-switch-label-color-fg-surface-default);
14190
14295
  }
14191
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
14192
- background-color: var(--ids-comp-switch-track-off-color-bg-surface-hovered);
14193
- }
14194
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14195
- color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
14196
- }
14197
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14198
- background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
14199
- }
14200
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14201
- color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
14202
- }
14203
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
14204
- color: var(--ids-comp-switch-label-color-fg-surface-hovered);
14205
- }
14206
14296
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14207
14297
  background-color: var(--ids-comp-switch-track-off-color-bg-surface-pressed);
14208
14298
  }
@@ -14236,6 +14326,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14236
14326
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
14237
14327
  color: var(--ids-comp-switch-label-color-fg-surface-focused);
14238
14328
  }
14329
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14330
+ background-color: var(--ids-comp-switch-track-off-color-bg-surface-hovered);
14331
+ }
14332
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14333
+ color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
14334
+ }
14335
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14336
+ background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
14337
+ }
14338
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14339
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
14340
+ }
14341
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__label {
14342
+ color: var(--ids-comp-switch-label-color-fg-surface-hovered);
14343
+ }
14239
14344
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14240
14345
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-default);
14241
14346
  }
@@ -14248,18 +14353,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14248
14353
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14249
14354
  color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
14250
14355
  }
14251
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14356
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14252
14357
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-hovered);
14253
14358
  }
14254
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14359
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14255
14360
  color: var(--ids-comp-switch-track-on-color-fg-icon-surface-default);
14256
14361
  }
14257
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14362
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14258
14363
  background-color: var(--ids-comp-switch-handle-on-color-bg-surface-default);
14259
14364
  }
14260
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14365
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14261
14366
  color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
14262
14367
  }
14368
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14369
+ color: var(--ids-comp-switch-label-color-fg-surface-hovered);
14370
+ }
14263
14371
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14264
14372
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-pressed);
14265
14373
  }
@@ -14326,21 +14434,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14326
14434
  .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14327
14435
  color: var(--ids-comp-switch-label-color-fg-light-default);
14328
14436
  }
14329
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
14330
- background-color: var(--ids-comp-switch-track-off-color-bg-light-hovered);
14331
- }
14332
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14333
- color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
14334
- }
14335
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14336
- background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
14337
- }
14338
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14339
- color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
14340
- }
14341
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
14342
- color: var(--ids-comp-switch-label-color-fg-light-hovered);
14343
- }
14344
14437
  .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14345
14438
  background-color: var(--ids-comp-switch-track-off-color-bg-light-pressed);
14346
14439
  }
@@ -14374,6 +14467,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14374
14467
  .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
14375
14468
  color: var(--ids-comp-switch-label-color-fg-light-focused);
14376
14469
  }
14470
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14471
+ background-color: var(--ids-comp-switch-track-off-color-bg-light-hovered);
14472
+ }
14473
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14474
+ color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
14475
+ }
14476
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14477
+ background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
14478
+ }
14479
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14480
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
14481
+ }
14482
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__label {
14483
+ color: var(--ids-comp-switch-label-color-fg-light-hovered);
14484
+ }
14377
14485
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14378
14486
  background-color: var(--ids-comp-switch-track-on-color-bg-light-default);
14379
14487
  }
@@ -14386,18 +14494,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14386
14494
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14387
14495
  color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
14388
14496
  }
14389
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14497
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14390
14498
  background-color: var(--ids-comp-switch-track-on-color-bg-light-hovered);
14391
14499
  }
14392
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14500
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14393
14501
  color: var(--ids-comp-switch-track-on-color-fg-icon-light-default);
14394
14502
  }
14395
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14503
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14396
14504
  background-color: var(--ids-comp-switch-handle-on-color-bg-light-default);
14397
14505
  }
14398
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14506
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14399
14507
  color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
14400
14508
  }
14509
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14510
+ color: var(--ids-comp-switch-label-color-fg-light-hovered);
14511
+ }
14401
14512
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14402
14513
  background-color: var(--ids-comp-switch-track-on-color-bg-light-pressed);
14403
14514
  }
@@ -14464,21 +14575,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14464
14575
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14465
14576
  color: var(--ids-comp-switch-label-color-fg-primary-default);
14466
14577
  }
14467
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
14468
- background-color: var(--ids-comp-switch-track-off-color-bg-primary-hovered);
14469
- }
14470
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14471
- color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
14472
- }
14473
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14474
- background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
14475
- }
14476
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14477
- color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
14478
- }
14479
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
14480
- color: var(--ids-comp-switch-label-color-fg-primary-hovered);
14481
- }
14482
14578
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14483
14579
  background-color: var(--ids-comp-switch-track-off-color-bg-primary-pressed);
14484
14580
  }
@@ -14512,6 +14608,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14512
14608
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
14513
14609
  color: var(--ids-comp-switch-label-color-fg-primary-focused);
14514
14610
  }
14611
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14612
+ background-color: var(--ids-comp-switch-track-off-color-bg-primary-hovered);
14613
+ }
14614
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14615
+ color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
14616
+ }
14617
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14618
+ background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
14619
+ }
14620
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14621
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
14622
+ }
14623
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__label {
14624
+ color: var(--ids-comp-switch-label-color-fg-primary-hovered);
14625
+ }
14515
14626
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14516
14627
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-default);
14517
14628
  }
@@ -14524,18 +14635,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14524
14635
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14525
14636
  color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
14526
14637
  }
14527
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14638
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14528
14639
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-hovered);
14529
14640
  }
14530
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14641
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14531
14642
  color: var(--ids-comp-switch-track-on-color-fg-icon-primary-default);
14532
14643
  }
14533
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14644
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14534
14645
  background-color: var(--ids-comp-switch-handle-on-color-bg-primary-default);
14535
14646
  }
14536
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14647
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14537
14648
  color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
14538
14649
  }
14650
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14651
+ color: var(--ids-comp-switch-label-color-fg-primary-hovered);
14652
+ }
14539
14653
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14540
14654
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-pressed);
14541
14655
  }
@@ -14590,6 +14704,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14590
14704
  .ids-switch.ids-switch-disabled {
14591
14705
  cursor: not-allowed;
14592
14706
  }
14707
+ .ids-switch.ids-switch-disabled > .ids-switch__label {
14708
+ cursor: not-allowed;
14709
+ }
14593
14710
 
14594
14711
  .ids-tab-group {
14595
14712
  box-sizing: border-box;