@i-cell/ids-styles 0.0.69 → 0.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/autocomplete/autocomplete.css +4 -2
  2. package/dist/autocomplete/autocomplete.min.css +1 -1
  3. package/dist/autocomplete/autocomplete.plugin.js +8 -1
  4. package/dist/checkbox/checkbox-group.css +40 -12
  5. package/dist/checkbox/checkbox-group.min.css +1 -1
  6. package/dist/checkbox/checkbox-group.plugin.js +40 -12
  7. package/dist/checkbox/checkbox.css +117 -99
  8. package/dist/checkbox/checkbox.min.css +1 -1
  9. package/dist/checkbox/checkbox.plugin.js +139 -124
  10. package/dist/components.css +519 -333
  11. package/dist/components.min.css +1 -1
  12. package/dist/components.plugin.js +634 -464
  13. package/dist/dialog/dialog.css +10 -6
  14. package/dist/dialog/dialog.min.css +1 -1
  15. package/dist/dialog/dialog.plugin.js +10 -4
  16. package/dist/option/option.css +1 -0
  17. package/dist/option/option.min.css +1 -1
  18. package/dist/option/option.plugin.js +8 -1
  19. package/dist/radio/radio.css +346 -213
  20. package/dist/radio/radio.min.css +1 -1
  21. package/dist/radio/radio.plugin.js +421 -321
  22. package/dist/side-sheet/side-sheet.css +1 -1
  23. package/dist/side-sheet/side-sheet.min.css +1 -1
  24. package/dist/side-sheet/side-sheet.plugin.js +8 -1
  25. package/package.json +1 -1
package/dist/checkbox/checkbox.css CHANGED
@@ -49,6 +49,8 @@
49
49
  }
50
50
  .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container {
51
51
  text-align: start;
52
+ display: flex;
53
+ flex-direction: row;
52
54
  }
53
55
  .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
54
56
  font-style: normal;
@@ -97,6 +99,7 @@
97
99
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-compact);
98
100
  font-size: var(--ids-comp-checkbox-label-typography-font-size-compact);
99
101
  line-height: var(--ids-comp-checkbox-label-typography-line-height-compact);
102
+ gap: var(--ids-comp-checkbox-label-size-gap-compact);
100
103
  }
101
104
  .ids-checkbox.ids-checkbox-comfortable {
102
105
  padding: var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable);
@@ -139,6 +142,7 @@
139
142
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-comfortable);
140
143
  font-size: var(--ids-comp-checkbox-label-typography-font-size-comfortable);
141
144
  line-height: var(--ids-comp-checkbox-label-typography-line-height-comfortable);
145
+ gap: var(--ids-comp-checkbox-label-size-gap-comfortable);
142
146
  }
143
147
  .ids-checkbox.ids-checkbox-spacious {
144
148
  padding: var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious);
@@ -181,6 +185,7 @@
181
185
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-spacious);
182
186
  font-size: var(--ids-comp-checkbox-label-typography-font-size-spacious);
183
187
  line-height: var(--ids-comp-checkbox-label-typography-line-height-spacious);
188
+ gap: var(--ids-comp-checkbox-label-size-gap-spacious);
184
189
  }
185
190
  .ids-checkbox.ids-checkbox-dense {
186
191
  padding: var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense);
@@ -223,84 +228,85 @@
223
228
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-dense);
224
229
  font-size: var(--ids-comp-checkbox-label-typography-font-size-dense);
225
230
  line-height: var(--ids-comp-checkbox-label-typography-line-height-dense);
231
+ gap: var(--ids-comp-checkbox-label-size-gap-dense);
226
232
  }
227
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
233
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
228
234
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
229
235
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
230
236
  }
231
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
237
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
232
238
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
233
239
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
234
240
  }
235
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
241
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
236
242
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
237
243
  }
238
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
244
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
239
245
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
240
246
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
241
247
  }
242
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
248
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
243
249
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
244
250
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
245
251
  }
246
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
252
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
247
253
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
248
254
  }
249
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
255
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
250
256
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-default);
251
257
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
252
258
  }
253
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
259
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
254
260
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
255
261
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
256
262
  }
257
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
263
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
258
264
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
259
265
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
260
266
  }
261
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
267
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
262
268
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-focused);
263
269
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
264
270
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
265
271
  }
266
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
272
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
267
273
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-disabled);
268
274
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled);
269
275
  }
270
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
276
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
271
277
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-default);
272
278
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
273
279
  }
274
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
280
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
275
281
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
276
282
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
277
283
  }
278
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
284
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
279
285
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
280
286
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
281
287
  }
282
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
288
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
283
289
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-focused);
284
290
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
285
291
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
286
292
  }
287
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
293
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
288
294
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-disabled);
289
295
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-disabled);
290
296
  }
291
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
297
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
292
298
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default);
293
299
  }
294
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
300
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
295
301
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
296
302
  }
297
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
303
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
298
304
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
299
305
  }
300
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
306
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
301
307
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused);
302
308
  }
303
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
309
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
304
310
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled);
305
311
  }
306
312
  .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -318,83 +324,83 @@
318
324
  .ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
319
325
  color: var(--ids-comp-checkbox-label-color-fg-light-disabled);
320
326
  }
321
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
327
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
322
328
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
323
329
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
324
330
  }
325
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
331
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
326
332
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
327
333
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
328
334
  }
329
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
335
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
330
336
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
331
337
  }
332
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
338
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
333
339
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
334
340
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
335
341
  }
336
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
342
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
337
343
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
338
344
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
339
345
  }
340
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
346
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
341
347
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
342
348
  }
343
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
349
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
344
350
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-default);
345
351
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
346
352
  }
347
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
353
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
348
354
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
349
355
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
350
356
  }
351
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
357
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
352
358
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
353
359
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
354
360
  }
355
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
361
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
356
362
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-focused);
357
363
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
358
364
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
359
365
  }
360
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
366
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
361
367
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled);
362
368
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled);
363
369
  }
364
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
370
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
365
371
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-default);
366
372
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
367
373
  }
368
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
374
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
369
375
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
370
376
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
371
377
  }
372
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
378
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
373
379
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
374
380
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
375
381
  }
376
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
382
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
377
383
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-focused);
378
384
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
379
385
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
380
386
  }
381
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
387
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
382
388
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-disabled);
383
389
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled);
384
390
  }
385
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
391
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
386
392
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default);
387
393
  }
388
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
394
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
389
395
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
390
396
  }
391
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
397
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
392
398
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
393
399
  }
394
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
400
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
395
401
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused);
396
402
  }
397
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
403
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
398
404
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled);
399
405
  }
400
406
  .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -412,83 +418,83 @@
412
418
  .ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
413
419
  color: var(--ids-comp-checkbox-label-color-fg-dark-disabled);
414
420
  }
415
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
421
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
416
422
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
417
423
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
418
424
  }
419
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
425
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
420
426
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
421
427
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
422
428
  }
423
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
429
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
424
430
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
425
431
  }
426
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
432
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
427
433
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
428
434
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
429
435
  }
430
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
436
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
431
437
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
432
438
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
433
439
  }
434
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
440
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
435
441
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
436
442
  }
437
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
443
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
438
444
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-default);
439
445
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
440
446
  }
441
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
447
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
442
448
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
443
449
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
444
450
  }
445
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
451
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
446
452
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
447
453
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
448
454
  }
449
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
455
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
450
456
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-focused);
451
457
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
452
458
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
453
459
  }
454
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
460
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
455
461
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled);
456
462
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled);
457
463
  }
458
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
464
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
459
465
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-default);
460
466
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
461
467
  }
462
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
468
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
463
469
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
464
470
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
465
471
  }
466
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
472
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
467
473
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
468
474
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
469
475
  }
470
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
476
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
471
477
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-focused);
472
478
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
473
479
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
474
480
  }
475
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
481
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
476
482
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-disabled);
477
483
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled);
478
484
  }
479
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
485
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
480
486
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default);
481
487
  }
482
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
488
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
483
489
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
484
490
  }
485
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
491
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
486
492
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
487
493
  }
488
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
494
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
489
495
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused);
490
496
  }
491
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
497
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
492
498
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled);
493
499
  }
494
500
  .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -506,6 +512,9 @@
506
512
  .ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
507
513
  color: var(--ids-comp-checkbox-label-color-fg-surface-disabled);
508
514
  }
515
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper {
516
+ cursor: not-allowed;
517
+ }
509
518
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
510
519
  cursor: not-allowed;
511
520
  }
@@ -515,9 +524,15 @@
515
524
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
516
525
  cursor: not-allowed;
517
526
  }
527
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper {
528
+ cursor: not-allowed;
529
+ }
518
530
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
519
531
  cursor: not-allowed;
520
532
  }
533
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper {
534
+ cursor: pointer;
535
+ }
521
536
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
522
537
  cursor: pointer;
523
538
  }
@@ -527,138 +542,141 @@
527
542
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
528
543
  cursor: pointer;
529
544
  }
545
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper {
546
+ cursor: pointer;
547
+ }
530
548
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
531
549
  cursor: pointer;
532
550
  }
533
- .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) {
551
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
534
552
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
535
553
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
536
554
  }
537
- .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 {
555
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
538
556
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
539
557
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
540
558
  }
541
- .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 {
559
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
542
560
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
543
561
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
544
562
  }
545
- .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 {
563
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
546
564
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
547
565
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
548
566
  }
549
- .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) {
567
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
550
568
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
551
569
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
552
570
  }
553
- .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 {
571
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
554
572
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
555
573
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
556
574
  }
557
- .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 {
575
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
558
576
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
559
577
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
560
578
  }
561
- .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 {
579
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
562
580
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
563
581
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
564
582
  }
565
- .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 {
583
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
566
584
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
567
585
  }
568
- .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 {
586
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
569
587
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
570
588
  }
571
- .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 {
589
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
572
590
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
573
591
  }
574
- .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 {
592
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):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):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):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):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
575
593
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
576
594
  }
577
- .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) {
595
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
578
596
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
579
597
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
580
598
  }
581
- .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 {
599
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
582
600
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
583
601
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
584
602
  }
585
- .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 {
603
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
586
604
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
587
605
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
588
606
  }
589
- .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 {
607
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
590
608
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
591
609
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
592
610
  }
593
- .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) {
611
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
594
612
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
595
613
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
596
614
  }
597
- .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 {
615
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
598
616
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
599
617
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
600
618
  }
601
- .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 {
619
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
602
620
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
603
621
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
604
622
  }
605
- .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 {
623
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
606
624
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
607
625
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
608
626
  }
609
- .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 {
627
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
610
628
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
611
629
  }
612
- .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 {
630
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
613
631
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
614
632
  }
615
- .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 {
633
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
616
634
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
617
635
  }
618
- .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 {
636
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):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):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):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):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
619
637
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
620
638
  }
621
- .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) {
639
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
622
640
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
623
641
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
624
642
  }
625
- .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 {
643
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
626
644
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
627
645
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
628
646
  }
629
- .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 {
647
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
630
648
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
631
649
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
632
650
  }
633
- .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 {
651
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
634
652
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
635
653
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
636
654
  }
637
- .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) {
655
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
638
656
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
639
657
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
640
658
  }
641
- .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 {
659
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
642
660
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
643
661
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
644
662
  }
645
- .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 {
663
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
646
664
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
647
665
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
648
666
  }
649
- .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 {
667
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
650
668
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
651
669
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
652
670
  }
653
- .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 {
671
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
654
672
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
655
673
  }
656
- .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 {
674
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
657
675
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
658
676
  }
659
- .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 {
677
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
660
678
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
661
679
  }
662
- .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 {
680
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):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):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):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):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
663
681
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
664
682
  }