@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/switch/switch.plugin.js CHANGED
@@ -64,14 +64,6 @@ module.exports = function SwitchPlugin() {
64
64
  borderRadius: 'var(--ids-comp-switch-track-size-border-radius-compact)',
65
65
  boxSizing: 'border-box',
66
66
  },
67
- '.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon': {
68
- width: 'var(--ids-comp-switch-handle-size-width-compact)',
69
- height: 'var(--ids-comp-switch-handle-size-height-compact)',
70
- },
71
- '.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon': {
72
- width: 'var(--ids-comp-switch-icon-size-width-compact)',
73
- height: 'var(--ids-comp-switch-icon-size-height-compact)',
74
- },
75
67
  '.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1)': {
76
68
  left: 'var(--ids-comp-switch-track-size-padding-x-compact)',
77
69
  },
@@ -79,15 +71,19 @@ module.exports = function SwitchPlugin() {
79
71
  right: 'var(--ids-comp-switch-track-size-padding-x-compact)',
80
72
  },
81
73
  '.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
82
- width: 'var(--ids-comp-switch-handle-size-width-compact)',
83
- height: 'var(--ids-comp-switch-handle-size-height-compact)',
84
74
  borderRadius: 'var(--ids-comp-switch-handle-size-border-radius-compact)',
85
75
  transition: 'left 100ms ease-in-out',
86
76
  },
87
- '.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon': {
88
- width: 'var(--ids-comp-switch-icon-size-width-compact)',
89
- height: 'var(--ids-comp-switch-icon-size-height-compact)',
90
- },
77
+ '.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon,.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__handle':
78
+ { width: 'var(--ids-comp-switch-handle-size-width-compact)', height: 'var(--ids-comp-switch-handle-size-height-compact)' },
79
+ '.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-compact>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
80
+ {
81
+ width: 'var(--ids-comp-switch-icon-size-width-compact)',
82
+ height: 'var(--ids-comp-switch-icon-size-height-compact)',
83
+ fontSize: 'var(--ids-comp-switch-icon-typography-font-size-compact)',
84
+ fontWeight: 'var(--ids-comp-switch-icon-typography-font-weight-compact)',
85
+ lineHeight: 'var(--ids-comp-switch-icon-typography-line-height-compact)',
86
+ },
91
87
  '.ids-switch.ids-switch-compact>.ids-switch__label': {
92
88
  fontFamily: 'var(--ids-comp-switch-label-typography-font-family-compact)',
93
89
  fontSize: 'var(--ids-comp-switch-label-typography-font-size-compact)',
@@ -113,14 +109,6 @@ module.exports = function SwitchPlugin() {
113
109
  borderRadius: 'var(--ids-comp-switch-track-size-border-radius-comfortable)',
114
110
  boxSizing: 'border-box',
115
111
  },
116
- '.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon': {
117
- width: 'var(--ids-comp-switch-handle-size-width-comfortable)',
118
- height: 'var(--ids-comp-switch-handle-size-height-comfortable)',
119
- },
120
- '.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon': {
121
- width: 'var(--ids-comp-switch-icon-size-width-comfortable)',
122
- height: 'var(--ids-comp-switch-icon-size-height-comfortable)',
123
- },
124
112
  '.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1)': {
125
113
  left: 'var(--ids-comp-switch-track-size-padding-x-comfortable)',
126
114
  },
@@ -128,15 +116,19 @@ module.exports = function SwitchPlugin() {
128
116
  right: 'var(--ids-comp-switch-track-size-padding-x-comfortable)',
129
117
  },
130
118
  '.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
131
- width: 'var(--ids-comp-switch-handle-size-width-comfortable)',
132
- height: 'var(--ids-comp-switch-handle-size-height-comfortable)',
133
119
  borderRadius: 'var(--ids-comp-switch-handle-size-border-radius-comfortable)',
134
120
  transition: 'left 100ms ease-in-out',
135
121
  },
136
- '.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon': {
137
- width: 'var(--ids-comp-switch-icon-size-width-comfortable)',
138
- height: 'var(--ids-comp-switch-icon-size-height-comfortable)',
139
- },
122
+ '.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon,.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__handle':
123
+ { width: 'var(--ids-comp-switch-handle-size-width-comfortable)', height: 'var(--ids-comp-switch-handle-size-height-comfortable)' },
124
+ '.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-comfortable>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
125
+ {
126
+ width: 'var(--ids-comp-switch-icon-size-width-comfortable)',
127
+ height: 'var(--ids-comp-switch-icon-size-height-comfortable)',
128
+ fontSize: 'var(--ids-comp-switch-icon-typography-font-size-comfortable)',
129
+ fontWeight: 'var(--ids-comp-switch-icon-typography-font-weight-comfortable)',
130
+ lineHeight: 'var(--ids-comp-switch-icon-typography-line-height-comfortable)',
131
+ },
140
132
  '.ids-switch.ids-switch-comfortable>.ids-switch__label': {
141
133
  fontFamily: 'var(--ids-comp-switch-label-typography-font-family-comfortable)',
142
134
  fontSize: 'var(--ids-comp-switch-label-typography-font-size-comfortable)',
@@ -160,14 +152,6 @@ module.exports = function SwitchPlugin() {
160
152
  borderRadius: 'var(--ids-comp-switch-track-size-border-radius-spacious)',
161
153
  boxSizing: 'border-box',
162
154
  },
163
- '.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon': {
164
- width: 'var(--ids-comp-switch-handle-size-width-spacious)',
165
- height: 'var(--ids-comp-switch-handle-size-height-spacious)',
166
- },
167
- '.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon': {
168
- width: 'var(--ids-comp-switch-icon-size-width-spacious)',
169
- height: 'var(--ids-comp-switch-icon-size-height-spacious)',
170
- },
171
155
  '.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1)': {
172
156
  left: 'var(--ids-comp-switch-track-size-padding-x-spacious)',
173
157
  },
@@ -175,15 +159,19 @@ module.exports = function SwitchPlugin() {
175
159
  right: 'var(--ids-comp-switch-track-size-padding-x-spacious)',
176
160
  },
177
161
  '.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
178
- width: 'var(--ids-comp-switch-handle-size-width-spacious)',
179
- height: 'var(--ids-comp-switch-handle-size-height-spacious)',
180
162
  borderRadius: 'var(--ids-comp-switch-handle-size-border-radius-spacious)',
181
163
  transition: 'left 100ms ease-in-out',
182
164
  },
183
- '.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon': {
184
- width: 'var(--ids-comp-switch-icon-size-width-spacious)',
185
- height: 'var(--ids-comp-switch-icon-size-height-spacious)',
186
- },
165
+ '.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon,.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__handle':
166
+ { width: 'var(--ids-comp-switch-handle-size-width-spacious)', height: 'var(--ids-comp-switch-handle-size-height-spacious)' },
167
+ '.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-spacious>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
168
+ {
169
+ width: 'var(--ids-comp-switch-icon-size-width-spacious)',
170
+ height: 'var(--ids-comp-switch-icon-size-height-spacious)',
171
+ fontSize: 'var(--ids-comp-switch-icon-typography-font-size-spacious)',
172
+ fontWeight: 'var(--ids-comp-switch-icon-typography-font-weight-spacious)',
173
+ lineHeight: 'var(--ids-comp-switch-icon-typography-line-height-spacious)',
174
+ },
187
175
  '.ids-switch.ids-switch-spacious>.ids-switch__label': {
188
176
  fontFamily: 'var(--ids-comp-switch-label-typography-font-family-spacious)',
189
177
  fontSize: 'var(--ids-comp-switch-label-typography-font-size-spacious)',
@@ -207,14 +195,6 @@ module.exports = function SwitchPlugin() {
207
195
  borderRadius: 'var(--ids-comp-switch-track-size-border-radius-dense)',
208
196
  boxSizing: 'border-box',
209
197
  },
210
- '.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon': {
211
- width: 'var(--ids-comp-switch-handle-size-width-dense)',
212
- height: 'var(--ids-comp-switch-handle-size-height-dense)',
213
- },
214
- '.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon': {
215
- width: 'var(--ids-comp-switch-icon-size-width-dense)',
216
- height: 'var(--ids-comp-switch-icon-size-height-dense)',
217
- },
218
198
  '.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon:nth-child(1)': {
219
199
  left: 'var(--ids-comp-switch-track-size-padding-x-dense)',
220
200
  },
@@ -222,15 +202,19 @@ module.exports = function SwitchPlugin() {
222
202
  right: 'var(--ids-comp-switch-track-size-padding-x-dense)',
223
203
  },
224
204
  '.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
225
- width: 'var(--ids-comp-switch-handle-size-width-dense)',
226
- height: 'var(--ids-comp-switch-handle-size-height-dense)',
227
205
  borderRadius: 'var(--ids-comp-switch-handle-size-border-radius-dense)',
228
206
  transition: 'left 100ms ease-in-out',
229
207
  },
230
- '.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon': {
231
- width: 'var(--ids-comp-switch-icon-size-width-dense)',
232
- height: 'var(--ids-comp-switch-icon-size-height-dense)',
233
- },
208
+ '.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon,.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__handle':
209
+ { width: 'var(--ids-comp-switch-handle-size-width-dense)', height: 'var(--ids-comp-switch-handle-size-height-dense)' },
210
+ '.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-dense>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
211
+ {
212
+ width: 'var(--ids-comp-switch-icon-size-width-dense)',
213
+ height: 'var(--ids-comp-switch-icon-size-height-dense)',
214
+ fontSize: 'var(--ids-comp-switch-icon-typography-font-size-dense)',
215
+ fontWeight: 'var(--ids-comp-switch-icon-typography-font-weight-dense)',
216
+ lineHeight: 'var(--ids-comp-switch-icon-typography-line-height-dense)',
217
+ },
234
218
  '.ids-switch.ids-switch-dense>.ids-switch__label': {
235
219
  fontFamily: 'var(--ids-comp-switch-label-typography-font-family-dense)',
236
220
  fontSize: 'var(--ids-comp-switch-label-typography-font-size-dense)',
@@ -323,14 +307,13 @@ module.exports = function SwitchPlugin() {
323
307
  { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-surface-default)' },
324
308
  '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon':
325
309
  { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)' },
326
- '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track': {
327
- backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-surface-focused)',
328
- },
329
- '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
310
+ '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track':
311
+ { backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-surface-focused)' },
312
+ '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
330
313
  { color: 'var(--ids-comp-switch-track-on-color-fg-icon-surface-default)' },
331
- '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle':
314
+ '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle':
332
315
  { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-surface-default)' },
333
- '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon':
316
+ '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon':
334
317
  { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)' },
335
318
  '.ids-switch.ids-switch-surface.ids-switch-disabled>.ids-switch__button+.ids-switch__label': {
336
319
  color: 'var(--ids-comp-switch-label-color-fg-surface-disabled)',
@@ -437,14 +420,13 @@ module.exports = function SwitchPlugin() {
437
420
  { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-light-default)' },
438
421
  '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon':
439
422
  { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-light-default)' },
440
- '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track': {
441
- backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-light-focused)',
442
- },
443
- '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
423
+ '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track':
424
+ { backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-light-focused)' },
425
+ '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
444
426
  { color: 'var(--ids-comp-switch-track-on-color-fg-icon-light-default)' },
445
- '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle':
427
+ '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle':
446
428
  { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-light-default)' },
447
- '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon':
429
+ '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon':
448
430
  { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-light-default)' },
449
431
  '.ids-switch.ids-switch-light.ids-switch-disabled>.ids-switch__button+.ids-switch__label': {
450
432
  color: 'var(--ids-comp-switch-label-color-fg-light-disabled)',
@@ -550,14 +532,13 @@ module.exports = function SwitchPlugin() {
550
532
  { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-primary-default)' },
551
533
  '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track>.ids-switch__handle>.ids-icon':
552
534
  { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)' },
553
- '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track': {
554
- backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-primary-focused)',
555
- },
556
- '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
535
+ '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track,.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track':
536
+ { backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-primary-focused)' },
537
+ '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__track-icon>.ids-icon,.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
557
538
  { color: 'var(--ids-comp-switch-track-on-color-fg-icon-primary-default)' },
558
- '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle':
539
+ '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle,.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle':
559
540
  { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-primary-default)' },
560
- '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon':
541
+ '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus>.ids-switch__track>.ids-switch__handle>.ids-icon,.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:focus-visible>.ids-switch__track>.ids-switch__handle>.ids-icon':
561
542
  { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)' },
562
543
  '.ids-switch.ids-switch-primary.ids-switch-disabled>.ids-switch__button+.ids-switch__label': {
563
544
  color: 'var(--ids-comp-switch-label-color-fg-primary-disabled)',