@i-cell/ids-styles 0.0.15-beta.9 → 0.0.16

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 (76) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +176 -195
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +168 -170
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2434 -1796
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2763 -2126
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
package/dist/checkbox/checkbox.plugin.js CHANGED
@@ -17,8 +17,10 @@ module.exports = function CheckboxPlugin() {
17
17
  borderStyle: 'solid',
18
18
  margin: '0',
19
19
  },
20
- '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus': { outlineOffset: '2px', outlineStyle: 'solid' },
20
+ '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
21
+ { outlineOffset: '2px', outlineStyle: 'solid' },
21
22
  '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': { position: 'absolute' },
23
+ '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon>.ids-icon': { color: 'inherit' },
22
24
  '.ids-checkbox .ids-checkbox__label-wrapper': { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: '1 0 0' },
23
25
  '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container': { textAlign: 'start' },
24
26
  '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': { fontStyle: 'normal' },
@@ -39,14 +41,20 @@ module.exports = function CheckboxPlugin() {
39
41
  borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-compact)',
40
42
  borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-compact)',
41
43
  },
42
- '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
43
- outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)',
44
- },
44
+ '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
45
+ { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)' },
45
46
  '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon': {
46
47
  height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
47
48
  width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
48
49
  lineHeight: 'var(--ids-comp-checkbox-input-size-icon-compact)',
49
50
  },
51
+ '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
52
+ height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
53
+ width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
54
+ fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-compact)',
55
+ fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-compact)',
56
+ lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-compact)',
57
+ },
50
58
  '.ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper': {
51
59
  padding: 'var(--ids-comp-checkbox-label-group-size-padding-y-compact) var(--ids-comp-checkbox-label-group-size-padding-x-compact)',
52
60
  gap: 'var(--ids-comp-checkbox-label-group-size-gap-compact)',
@@ -75,14 +83,20 @@ module.exports = function CheckboxPlugin() {
75
83
  borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-comfortable)',
76
84
  borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-comfortable)',
77
85
  },
78
- '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
79
- outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)',
80
- },
86
+ '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
87
+ { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)' },
81
88
  '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon': {
82
89
  height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
83
90
  width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
84
91
  lineHeight: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
85
92
  },
93
+ '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
94
+ height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
95
+ width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
96
+ fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-comfortable)',
97
+ fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-comfortable)',
98
+ lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-comfortable)',
99
+ },
86
100
  '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper': {
87
101
  padding:
88
102
  'var(--ids-comp-checkbox-label-group-size-padding-y-comfortable) var(--ids-comp-checkbox-label-group-size-padding-x-comfortable)',
@@ -111,14 +125,20 @@ module.exports = function CheckboxPlugin() {
111
125
  borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-spacious)',
112
126
  borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-spacious)',
113
127
  },
114
- '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
115
- outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)',
116
- },
128
+ '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
129
+ { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)' },
117
130
  '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon': {
118
131
  height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
119
132
  width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
120
133
  lineHeight: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
121
134
  },
135
+ '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
136
+ height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
137
+ width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
138
+ fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-spacious)',
139
+ fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-spacious)',
140
+ lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-spacious)',
141
+ },
122
142
  '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper': {
123
143
  padding:
124
144
  'var(--ids-comp-checkbox-label-group-size-padding-y-spacious) var(--ids-comp-checkbox-label-group-size-padding-x-spacious)',
@@ -147,14 +167,20 @@ module.exports = function CheckboxPlugin() {
147
167
  borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-dense)',
148
168
  borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-dense)',
149
169
  },
150
- '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
151
- outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)',
152
- },
170
+ '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus,.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus-visible':
171
+ { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)' },
153
172
  '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon': {
154
173
  height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
155
174
  width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
156
175
  lineHeight: 'var(--ids-comp-checkbox-input-size-icon-dense)',
157
176
  },
177
+ '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon>.ids-icon': {
178
+ height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
179
+ width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
180
+ fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-dense)',
181
+ fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-dense)',
182
+ lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-dense)',
183
+ },
158
184
  '.ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper': {
159
185
  padding: 'var(--ids-comp-checkbox-label-group-size-padding-y-dense) var(--ids-comp-checkbox-label-group-size-padding-x-dense)',
160
186
  gap: 'var(--ids-comp-checkbox-label-group-size-gap-dense)',
@@ -178,11 +204,12 @@ module.exports = function CheckboxPlugin() {
178
204
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-pressed)',
179
205
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
180
206
  },
181
- '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
182
- borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-focused)',
183
- backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
184
- outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
185
- },
207
+ '.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':
208
+ {
209
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-focused)',
210
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
211
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
212
+ },
186
213
  '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
187
214
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-disabled)',
188
215
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled)',
@@ -202,7 +229,7 @@ module.exports = function CheckboxPlugin() {
202
229
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-pressed)',
203
230
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
204
231
  },
205
- '.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]:indeterminate:not(:disabled):focus':
232
+ '.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':
206
233
  {
207
234
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-focused)',
208
235
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
@@ -220,7 +247,7 @@ module.exports = function CheckboxPlugin() {
220
247
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)' },
221
248
  '.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':
222
249
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
223
- '.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]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
250
+ '.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':
224
251
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
225
252
  '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
226
253
  color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
@@ -231,9 +258,8 @@ module.exports = function CheckboxPlugin() {
231
258
  '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
232
259
  color: 'var(--ids-comp-checkbox-label-color-fg-light-pressed)',
233
260
  },
234
- '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
235
- color: 'var(--ids-comp-checkbox-label-color-fg-light-focused)',
236
- },
261
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus,.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
262
+ { color: 'var(--ids-comp-checkbox-label-color-fg-light-focused)' },
237
263
  '.ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
238
264
  { color: 'var(--ids-comp-checkbox-label-color-fg-light-disabled)' },
239
265
  '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
@@ -248,11 +274,12 @@ module.exports = function CheckboxPlugin() {
248
274
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed)',
249
275
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
250
276
  },
251
- '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
252
- borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-focused)',
253
- backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
254
- outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
255
- },
277
+ '.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':
278
+ {
279
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-focused)',
280
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
281
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
282
+ },
256
283
  '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
257
284
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled)',
258
285
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled)',
@@ -272,7 +299,7 @@ module.exports = function CheckboxPlugin() {
272
299
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-pressed)',
273
300
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
274
301
  },
275
- '.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]:indeterminate:not(:disabled):focus':
302
+ '.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':
276
303
  {
277
304
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-focused)',
278
305
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
@@ -290,7 +317,7 @@ module.exports = function CheckboxPlugin() {
290
317
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)' },
291
318
  '.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':
292
319
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
293
- '.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]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
320
+ '.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':
294
321
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
295
322
  '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
296
323
  color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
@@ -301,9 +328,8 @@ module.exports = function CheckboxPlugin() {
301
328
  '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
302
329
  color: 'var(--ids-comp-checkbox-label-color-fg-dark-pressed)',
303
330
  },
304
- '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
305
- color: 'var(--ids-comp-checkbox-label-color-fg-dark-focused)',
306
- },
331
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus,.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
332
+ { color: 'var(--ids-comp-checkbox-label-color-fg-dark-focused)' },
307
333
  '.ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
308
334
  { color: 'var(--ids-comp-checkbox-label-color-fg-dark-disabled)' },
309
335
  '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
@@ -318,11 +344,12 @@ module.exports = function CheckboxPlugin() {
318
344
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed)',
319
345
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
320
346
  },
321
- '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
322
- borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-focused)',
323
- backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
324
- outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
325
- },
347
+ '.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':
348
+ {
349
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-focused)',
350
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
351
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
352
+ },
326
353
  '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
327
354
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled)',
328
355
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled)',
@@ -342,7 +369,7 @@ module.exports = function CheckboxPlugin() {
342
369
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-pressed)',
343
370
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
344
371
  },
345
- '.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]:indeterminate:not(:disabled):focus':
372
+ '.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':
346
373
  {
347
374
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-focused)',
348
375
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
@@ -360,7 +387,7 @@ module.exports = function CheckboxPlugin() {
360
387
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)' },
361
388
  '.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':
362
389
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
363
- '.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]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
390
+ '.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':
364
391
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
365
392
  '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
366
393
  color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
@@ -371,12 +398,10 @@ module.exports = function CheckboxPlugin() {
371
398
  '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
372
399
  color: 'var(--ids-comp-checkbox-label-color-fg-surface-pressed)',
373
400
  },
374
- '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
375
- color: 'var(--ids-comp-checkbox-label-color-fg-surface-focused)',
376
- },
401
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus,.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus-visible':
402
+ { color: 'var(--ids-comp-checkbox-label-color-fg-surface-focused)' },
377
403
  '.ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
378
404
  { color: 'var(--ids-comp-checkbox-label-color-fg-surface-disabled)' },
379
- '.ids-checkbox.ids-checkbox-disabled': { opacity: 'var(--ids-comp-checkbox-disabled)' },
380
405
  '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { cursor: 'not-allowed' },
381
406
  '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox]': { cursor: 'not-allowed' },
382
407
  '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': {
@@ -408,7 +433,7 @@ module.exports = function CheckboxPlugin() {
408
433
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed)',
409
434
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
410
435
  },
411
- '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
436
+ '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
412
437
  {
413
438
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused)',
414
439
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
@@ -428,7 +453,7 @@ module.exports = function CheckboxPlugin() {
428
453
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed)',
429
454
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
430
455
  },
431
- '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
456
+ '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
432
457
  {
433
458
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
434
459
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
@@ -439,7 +464,7 @@ module.exports = function CheckboxPlugin() {
439
464
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered)' },
440
465
  '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
441
466
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed)' },
442
- '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
467
+ '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
443
468
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
444
469
  '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
445
470
  {
@@ -456,7 +481,7 @@ module.exports = function CheckboxPlugin() {
456
481
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed)',
457
482
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
458
483
  },
459
- '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
484
+ '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
460
485
  {
461
486
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
462
487
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
@@ -476,7 +501,7 @@ module.exports = function CheckboxPlugin() {
476
501
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed)',
477
502
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
478
503
  },
479
- '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
504
+ '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
480
505
  {
481
506
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused)',
482
507
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
@@ -487,7 +512,7 @@ module.exports = function CheckboxPlugin() {
487
512
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered)' },
488
513
  '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
489
514
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed)' },
490
- '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
515
+ '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
491
516
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
492
517
  '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
493
518
  {
@@ -504,7 +529,7 @@ module.exports = function CheckboxPlugin() {
504
529
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed)',
505
530
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
506
531
  },
507
- '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
532
+ '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
508
533
  {
509
534
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
510
535
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
@@ -524,7 +549,7 @@ module.exports = function CheckboxPlugin() {
524
549
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed)',
525
550
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
526
551
  },
527
- '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
552
+ '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
528
553
  {
529
554
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
530
555
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
@@ -535,7 +560,7 @@ module.exports = function CheckboxPlugin() {
535
560
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered)' },
536
561
  '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
537
562
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed)' },
538
- '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
563
+ '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
539
564
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
540
565
  };
541
566