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

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 +23 -11
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +23 -12
  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 +2284 -1615
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2619 -1969
  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/pseudo-checkbox.plugin.js CHANGED
@@ -17,6 +17,9 @@ module.exports = function PseudoCheckboxPlugin() {
17
17
  margin: '0',
18
18
  },
19
19
  '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon': { position: 'absolute' },
20
+ '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon>.ids-icon': {
21
+ color: 'inherit',
22
+ },
20
23
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact': {
21
24
  padding: 'var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact)',
22
25
  gap: 'var(--ids-comp-checkbox-container-size-gap-compact)',
@@ -27,14 +30,20 @@ module.exports = function PseudoCheckboxPlugin() {
27
30
  borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-compact)',
28
31
  borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-compact)',
29
32
  },
30
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus': {
31
- outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)',
32
- },
33
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
34
+ { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)' },
33
35
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
34
36
  height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
35
37
  width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
36
38
  lineHeight: 'var(--ids-comp-checkbox-input-size-icon-compact)',
37
39
  },
40
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
41
+ height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
42
+ width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
43
+ fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-compact)',
44
+ fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-compact)',
45
+ lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-compact)',
46
+ },
38
47
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable': {
39
48
  padding:
40
49
  'var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable)',
@@ -46,14 +55,20 @@ module.exports = function PseudoCheckboxPlugin() {
46
55
  borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-comfortable)',
47
56
  borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-comfortable)',
48
57
  },
49
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus': {
50
- outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)',
51
- },
58
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
59
+ { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)' },
52
60
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
53
61
  height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
54
62
  width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
55
63
  lineHeight: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
56
64
  },
65
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
66
+ height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
67
+ width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
68
+ fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-comfortable)',
69
+ fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-comfortable)',
70
+ lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-comfortable)',
71
+ },
57
72
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious': {
58
73
  padding: 'var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious)',
59
74
  gap: 'var(--ids-comp-checkbox-container-size-gap-spacious)',
@@ -64,14 +79,20 @@ module.exports = function PseudoCheckboxPlugin() {
64
79
  borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-spacious)',
65
80
  borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-spacious)',
66
81
  },
67
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus': {
68
- outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)',
69
- },
82
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
83
+ { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)' },
70
84
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
71
85
  height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
72
86
  width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
73
87
  lineHeight: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
74
88
  },
89
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
90
+ height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
91
+ width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
92
+ fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-spacious)',
93
+ fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-spacious)',
94
+ lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-spacious)',
95
+ },
75
96
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense': {
76
97
  padding: 'var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense)',
77
98
  gap: 'var(--ids-comp-checkbox-container-size-gap-dense)',
@@ -82,14 +103,20 @@ module.exports = function PseudoCheckboxPlugin() {
82
103
  borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-dense)',
83
104
  borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-dense)',
84
105
  },
85
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus': {
86
- outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)',
87
- },
106
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus-visible':
107
+ { outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)' },
88
108
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon': {
89
109
  height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
90
110
  width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
91
111
  lineHeight: 'var(--ids-comp-checkbox-input-size-icon-dense)',
92
112
  },
113
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon>.ids-icon': {
114
+ height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
115
+ width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
116
+ fontSize: 'var(--ids-comp-checkbox-input-icon-typography-font-size-dense)',
117
+ fontWeight: 'var(--ids-comp-checkbox-input-icon-typography-font-weight-dense)',
118
+ lineHeight: 'var(--ids-comp-checkbox-input-icon-typography-line-height-dense)',
119
+ },
93
120
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
94
121
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-default)',
95
122
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
@@ -102,11 +129,12 @@ module.exports = function PseudoCheckboxPlugin() {
102
129
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-pressed)',
103
130
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
104
131
  },
105
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
106
- borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-focused)',
107
- backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
108
- outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
109
- },
132
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
133
+ {
134
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-focused)',
135
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
136
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
137
+ },
110
138
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled': {
111
139
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-disabled)',
112
140
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled)',
@@ -126,7 +154,7 @@ module.exports = function PseudoCheckboxPlugin() {
126
154
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-pressed)',
127
155
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
128
156
  },
129
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
157
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
130
158
  {
131
159
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-focused)',
132
160
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
@@ -144,7 +172,7 @@ module.exports = function PseudoCheckboxPlugin() {
144
172
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)' },
145
173
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
146
174
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
147
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon':
175
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
148
176
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
149
177
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
150
178
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-default)',
@@ -158,11 +186,12 @@ module.exports = function PseudoCheckboxPlugin() {
158
186
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed)',
159
187
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
160
188
  },
161
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
162
- borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-focused)',
163
- backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
164
- outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
165
- },
189
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
190
+ {
191
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-focused)',
192
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
193
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
194
+ },
166
195
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled': {
167
196
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled)',
168
197
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled)',
@@ -182,7 +211,7 @@ module.exports = function PseudoCheckboxPlugin() {
182
211
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-pressed)',
183
212
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
184
213
  },
185
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
214
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
186
215
  {
187
216
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-focused)',
188
217
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
@@ -200,7 +229,7 @@ module.exports = function PseudoCheckboxPlugin() {
200
229
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)' },
201
230
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
202
231
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
203
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon':
232
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
204
233
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
205
234
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
206
235
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-default)',
@@ -214,11 +243,12 @@ module.exports = function PseudoCheckboxPlugin() {
214
243
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed)',
215
244
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
216
245
  },
217
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
218
- borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-focused)',
219
- backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
220
- outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
221
- },
246
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
247
+ {
248
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-focused)',
249
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
250
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
251
+ },
222
252
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled': {
223
253
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled)',
224
254
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled)',
@@ -238,7 +268,7 @@ module.exports = function PseudoCheckboxPlugin() {
238
268
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-pressed)',
239
269
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
240
270
  },
241
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
271
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
242
272
  {
243
273
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-focused)',
244
274
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
@@ -256,9 +286,8 @@ module.exports = function PseudoCheckboxPlugin() {
256
286
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)' },
257
287
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
258
288
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
259
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon':
289
+ '.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
260
290
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
261
- '.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled': { opacity: 'var(--ids-comp-checkbox-disabled)' },
262
291
  '.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target': {
263
292
  cursor: 'not-allowed',
264
293
  },
@@ -290,7 +319,7 @@ module.exports = function PseudoCheckboxPlugin() {
290
319
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed)',
291
320
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
292
321
  },
293
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
322
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
294
323
  {
295
324
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused)',
296
325
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
@@ -310,7 +339,7 @@ module.exports = function PseudoCheckboxPlugin() {
310
339
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed)',
311
340
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
312
341
  },
313
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
342
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
314
343
  {
315
344
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
316
345
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
@@ -321,7 +350,7 @@ module.exports = function PseudoCheckboxPlugin() {
321
350
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered)' },
322
351
  '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
323
352
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed)' },
324
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon':
353
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
325
354
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
326
355
  '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
327
356
  {
@@ -338,7 +367,7 @@ module.exports = function PseudoCheckboxPlugin() {
338
367
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed)',
339
368
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
340
369
  },
341
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
370
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
342
371
  {
343
372
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
344
373
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
@@ -358,7 +387,7 @@ module.exports = function PseudoCheckboxPlugin() {
358
387
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed)',
359
388
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
360
389
  },
361
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
390
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
362
391
  {
363
392
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused)',
364
393
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
@@ -369,7 +398,7 @@ module.exports = function PseudoCheckboxPlugin() {
369
398
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered)' },
370
399
  '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
371
400
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed)' },
372
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon':
401
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
373
402
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
374
403
  '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
375
404
  {
@@ -386,7 +415,7 @@ module.exports = function PseudoCheckboxPlugin() {
386
415
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed)',
387
416
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
388
417
  },
389
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
418
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
390
419
  {
391
420
  borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
392
421
  backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
@@ -406,7 +435,7 @@ module.exports = function PseudoCheckboxPlugin() {
406
435
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed)',
407
436
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
408
437
  },
409
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
438
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
410
439
  {
411
440
  borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
412
441
  backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
@@ -417,7 +446,7 @@ module.exports = function PseudoCheckboxPlugin() {
417
446
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered)' },
418
447
  '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon':
419
448
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed)' },
420
- '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon':
449
+ '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
421
450
  { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
422
451
  };
423
452