@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/radio/radio.plugin.js CHANGED
@@ -95,9 +95,8 @@ module.exports = function RadioPlugin() {
95
95
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-compact)',
96
96
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-compact)',
97
97
  },
98
- '.ids-radio-group.ids-radio-group-compact>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus': {
99
- outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-compact)',
100
- },
98
+ '.ids-radio-group.ids-radio-group-compact>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-compact>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible':
99
+ { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-compact)' },
101
100
  '.ids-radio-group.ids-radio-group-compact>.ids-radio-item .ids-radio-item__label': {
102
101
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-compact) 0px',
103
102
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-compact)',
@@ -140,9 +139,8 @@ module.exports = function RadioPlugin() {
140
139
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-comfortable)',
141
140
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-comfortable)',
142
141
  },
143
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus': {
144
- outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-comfortable)',
145
- },
142
+ '.ids-radio-group.ids-radio-group-comfortable>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-comfortable>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible':
143
+ { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-comfortable)' },
146
144
  '.ids-radio-group.ids-radio-group-comfortable>.ids-radio-item .ids-radio-item__label': {
147
145
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px',
148
146
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-comfortable)',
@@ -185,9 +183,8 @@ module.exports = function RadioPlugin() {
185
183
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-spacious)',
186
184
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-spacious)',
187
185
  },
188
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus': {
189
- outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-spacious)',
190
- },
186
+ '.ids-radio-group.ids-radio-group-spacious>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-spacious>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible':
187
+ { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-spacious)' },
191
188
  '.ids-radio-group.ids-radio-group-spacious>.ids-radio-item .ids-radio-item__label': {
192
189
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px',
193
190
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-spacious)',
@@ -229,9 +226,8 @@ module.exports = function RadioPlugin() {
229
226
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-dense)',
230
227
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-dense)',
231
228
  },
232
- '.ids-radio-group.ids-radio-group-dense>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus': {
233
- outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-dense)',
234
- },
229
+ '.ids-radio-group.ids-radio-group-dense>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-dense>.ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible':
230
+ { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-dense)' },
235
231
  '.ids-radio-group.ids-radio-group-dense>.ids-radio-item .ids-radio-item__label': {
236
232
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-dense) 0px',
237
233
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-dense)',
@@ -259,12 +255,12 @@ module.exports = function RadioPlugin() {
259
255
  },
260
256
  '.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible':
261
257
  {
262
- borderColor: 'var(--ids-comp-radio-input-unselected-color-border-surface-focused)',
263
- backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-surface-focused)',
258
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-surface-default)',
259
+ backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-surface-default)',
264
260
  outlineColor: 'var(--ids-comp-radio-input-unselected-color-focused-outline-surface-focused)',
265
261
  },
266
262
  '.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:disabled': {
267
- borderColor: 'var(--ids-comp-forms-form-field-standard-container-color-border-surface-disabled)',
263
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-surface-disabled)',
268
264
  backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-surface-disabled)',
269
265
  },
270
266
  '.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled)': {
@@ -296,17 +292,17 @@ module.exports = function RadioPlugin() {
296
292
  },
297
293
  '.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible':
298
294
  {
299
- borderColor: 'var(--ids-comp-radio-input-selected-color-border-surface-focused)',
300
- backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-surface-focused)',
295
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-surface-default)',
296
+ backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-surface-default)',
301
297
  outlineColor: 'var(--ids-comp-radio-input-selected-color-focused-outline-surface-focused)',
302
298
  },
303
299
  '.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle':
304
300
  {
305
- borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-focused)',
306
- background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-focused)',
301
+ borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default)',
302
+ background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default)',
307
303
  },
308
304
  '.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:disabled': {
309
- borderColor: 'var(--ids-comp-forms-form-field-standard-container-color-border-surface-disabled)',
305
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-surface-disabled)',
310
306
  backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-surface-disabled)',
311
307
  },
312
308
  '.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:disabled+.ids-radio-item__inner-circle':
@@ -331,9 +327,8 @@ module.exports = function RadioPlugin() {
331
327
  '.ids-radio-group .ids-radio-item-surface .ids-radio-item__label:active': {
332
328
  color: 'var(--ids-comp-radio-label-color-fg-surface-pressed)',
333
329
  },
334
- '.ids-radio-group .ids-radio-item-surface .ids-radio-item__label:focus': {
335
- color: 'var(--ids-comp-radio-label-color-fg-surface-focused)',
336
- },
330
+ '.ids-radio-group .ids-radio-item-surface .ids-radio-item__label:focus,.ids-radio-group .ids-radio-item-surface .ids-radio-item__label:focus-visible':
331
+ { color: 'var(--ids-comp-radio-label-color-fg-surface-focused)' },
337
332
  '.ids-radio-group .ids-radio-item-surface.ids-radio-item-disabled .ids-radio-item__label': {
338
333
  color: 'var(--ids-comp-radio-label-color-fg-surface-disabled)',
339
334
  },
@@ -356,12 +351,12 @@ module.exports = function RadioPlugin() {
356
351
  },
357
352
  '.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible':
358
353
  {
359
- borderColor: 'var(--ids-comp-radio-input-unselected-color-border-light-focused)',
360
- backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-light-focused)',
354
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-light-default)',
355
+ backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-light-default)',
361
356
  outlineColor: 'var(--ids-comp-radio-input-unselected-color-focused-outline-light-focused)',
362
357
  },
363
358
  '.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:disabled': {
364
- borderColor: 'var(--ids-comp-forms-form-field-standard-container-color-border-light-disabled)',
359
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-light-disabled)',
365
360
  backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-light-disabled)',
366
361
  },
367
362
  '.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled)': {
@@ -393,17 +388,17 @@ module.exports = function RadioPlugin() {
393
388
  },
394
389
  '.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible':
395
390
  {
396
- borderColor: 'var(--ids-comp-radio-input-selected-color-border-light-focused)',
397
- backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-light-focused)',
391
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-light-default)',
392
+ backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-light-default)',
398
393
  outlineColor: 'var(--ids-comp-radio-input-selected-color-focused-outline-light-focused)',
399
394
  },
400
395
  '.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle':
401
396
  {
402
- borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-light-focused)',
403
- background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-focused)',
397
+ borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default)',
398
+ background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default)',
404
399
  },
405
400
  '.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:disabled': {
406
- borderColor: 'var(--ids-comp-forms-form-field-standard-container-color-border-light-disabled)',
401
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-light-disabled)',
407
402
  backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-light-disabled)',
408
403
  },
409
404
  '.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:disabled+.ids-radio-item__inner-circle':
@@ -428,9 +423,8 @@ module.exports = function RadioPlugin() {
428
423
  '.ids-radio-group .ids-radio-item-light .ids-radio-item__label:active': {
429
424
  color: 'var(--ids-comp-radio-label-color-fg-light-pressed)',
430
425
  },
431
- '.ids-radio-group .ids-radio-item-light .ids-radio-item__label:focus': {
432
- color: 'var(--ids-comp-radio-label-color-fg-light-focused)',
433
- },
426
+ '.ids-radio-group .ids-radio-item-light .ids-radio-item__label:focus,.ids-radio-group .ids-radio-item-light .ids-radio-item__label:focus-visible':
427
+ { color: 'var(--ids-comp-radio-label-color-fg-light-focused)' },
434
428
  '.ids-radio-group .ids-radio-item-light.ids-radio-item-disabled .ids-radio-item__label': {
435
429
  color: 'var(--ids-comp-radio-label-color-fg-light-disabled)',
436
430
  },
@@ -453,12 +447,12 @@ module.exports = function RadioPlugin() {
453
447
  },
454
448
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible':
455
449
  {
456
- borderColor: 'var(--ids-comp-radio-input-unselected-color-border-dark-focused)',
457
- backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-dark-focused)',
450
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-dark-default)',
451
+ backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-dark-default)',
458
452
  outlineColor: 'var(--ids-comp-radio-input-unselected-color-focused-outline-dark-focused)',
459
453
  },
460
454
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:disabled': {
461
- borderColor: 'var(--ids-comp-forms-form-field-standard-container-color-border-dark-disabled)',
455
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-dark-disabled)',
462
456
  backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-dark-disabled)',
463
457
  },
464
458
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled)': {
@@ -490,17 +484,17 @@ module.exports = function RadioPlugin() {
490
484
  },
491
485
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible':
492
486
  {
493
- borderColor: 'var(--ids-comp-radio-input-selected-color-border-dark-focused)',
494
- backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-dark-focused)',
487
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-dark-default)',
488
+ backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-dark-default)',
495
489
  outlineColor: 'var(--ids-comp-radio-input-selected-color-focused-outline-dark-focused)',
496
490
  },
497
491
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle':
498
492
  {
499
- borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-focused)',
500
- background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-focused)',
493
+ borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default)',
494
+ background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default)',
501
495
  },
502
496
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:disabled': {
503
- borderColor: 'var(--ids-comp-forms-form-field-standard-container-color-border-dark-disabled)',
497
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-dark-disabled)',
504
498
  backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-dark-disabled)',
505
499
  },
506
500
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:disabled+.ids-radio-item__inner-circle':
@@ -521,7 +515,8 @@ module.exports = function RadioPlugin() {
521
515
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__label': { color: 'var(--ids-comp-radio-label-color-fg-dark-default)' },
522
516
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__label:hover': { color: 'var(--ids-comp-radio-label-color-fg-dark-hovered)' },
523
517
  '.ids-radio-group .ids-radio-item-dark .ids-radio-item__label:active': { color: 'var(--ids-comp-radio-label-color-fg-dark-pressed)' },
524
- '.ids-radio-group .ids-radio-item-dark .ids-radio-item__label:focus': { color: 'var(--ids-comp-radio-label-color-fg-dark-focused)' },
518
+ '.ids-radio-group .ids-radio-item-dark .ids-radio-item__label:focus,.ids-radio-group .ids-radio-item-dark .ids-radio-item__label:focus-visible':
519
+ { color: 'var(--ids-comp-radio-label-color-fg-dark-focused)' },
525
520
  '.ids-radio-group .ids-radio-item-dark.ids-radio-item-disabled .ids-radio-item__label': {
526
521
  color: 'var(--ids-comp-radio-label-color-fg-dark-disabled)',
527
522
  },
@@ -547,8 +542,8 @@ module.exports = function RadioPlugin() {
547
542
  },
548
543
  '.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible':
549
544
  {
550
- borderColor: 'var(--ids-comp-radio-input-unselected-color-border-surface-error-focused)',
551
- backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-surface-focused)',
545
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-surface-error-default)',
546
+ backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-surface-default)',
552
547
  },
553
548
  '.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled),.ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled)':
554
549
  {
@@ -582,13 +577,13 @@ module.exports = function RadioPlugin() {
582
577
  },
583
578
  '.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible':
584
579
  {
585
- borderColor: 'var(--ids-comp-radio-input-selected-color-border-surface-error-focused)',
586
- backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-surface-focused)',
580
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-surface-error-default)',
581
+ backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-surface-default)',
587
582
  },
588
583
  '.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle':
589
584
  {
590
- borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-focused)',
591
- background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-focused)',
585
+ borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default)',
586
+ background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default)',
592
587
  },
593
588
  '.ids-radio-group.ng-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover+input[type=radio]:not(:disabled),.ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover+input[type=radio]:not(:disabled)':
594
589
  {
@@ -622,8 +617,8 @@ module.exports = function RadioPlugin() {
622
617
  },
623
618
  '.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible':
624
619
  {
625
- borderColor: 'var(--ids-comp-radio-input-unselected-color-border-light-error-focused)',
626
- backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-light-focused)',
620
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-light-error-default)',
621
+ backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-light-default)',
627
622
  },
628
623
  '.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled),.ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled)':
629
624
  {
@@ -657,13 +652,13 @@ module.exports = function RadioPlugin() {
657
652
  },
658
653
  '.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible':
659
654
  {
660
- borderColor: 'var(--ids-comp-radio-input-selected-color-border-light-error-focused)',
661
- backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-light-focused)',
655
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-light-error-default)',
656
+ backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-light-default)',
662
657
  },
663
658
  '.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle':
664
659
  {
665
- borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-focused)',
666
- background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-focused)',
660
+ borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default)',
661
+ background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default)',
667
662
  },
668
663
  '.ids-radio-group.ng-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover+input[type=radio]:not(:disabled),.ids-radio-group.ids-radio-group-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover+input[type=radio]:not(:disabled)':
669
664
  {
@@ -697,8 +692,8 @@ module.exports = function RadioPlugin() {
697
692
  },
698
693
  '.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible':
699
694
  {
700
- borderColor: 'var(--ids-comp-radio-input-unselected-color-border-dark-error-focused)',
701
- backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-dark-focused)',
695
+ borderColor: 'var(--ids-comp-radio-input-unselected-color-border-dark-error-default)',
696
+ backgroundColor: 'var(--ids-comp-radio-input-unselected-color-bg-dark-default)',
702
697
  },
703
698
  '.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled),.ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled)':
704
699
  {
@@ -732,13 +727,13 @@ module.exports = function RadioPlugin() {
732
727
  },
733
728
  '.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible':
734
729
  {
735
- borderColor: 'var(--ids-comp-radio-input-selected-color-border-dark-error-focused)',
736
- backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-dark-focused)',
730
+ borderColor: 'var(--ids-comp-radio-input-selected-color-border-dark-error-default)',
731
+ backgroundColor: 'var(--ids-comp-radio-input-selected-color-bg-dark-default)',
737
732
  },
738
733
  '.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus+.ids-radio-item__inner-circle,.ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible+.ids-radio-item__inner-circle':
739
734
  {
740
- borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-focused)',
741
- background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-focused)',
735
+ borderColor: 'var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default)',
736
+ background: 'var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default)',
742
737
  },
743
738
  '.ids-radio-group.ng-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover+input[type=radio]:not(:disabled),.ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover+input[type=radio]:not(:disabled)':
744
739
  {
package/dist/segmented-control/segmented-control-toggle.css CHANGED
@@ -11,7 +11,7 @@
11
11
  position: relative;
12
12
  text-wrap: nowrap;
13
13
  }
14
- .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus {
14
+ .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
15
15
  z-index: 1;
16
16
  outline-style: solid;
17
17
  outline-offset: 2px;
@@ -44,12 +44,15 @@
44
44
  letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-compact);
45
45
  line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-compact);
46
46
  }
47
- .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item > button:focus {
47
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item > button:focus-visible {
48
48
  outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-compact);
49
49
  }
50
50
  .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item .ids-icon {
51
51
  height: var(--ids-comp-segmented-control-toggle-button-size-icon-compact);
52
52
  width: var(--ids-comp-segmented-control-toggle-button-size-icon-compact);
53
+ font-size: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-compact);
54
+ font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-compact);
55
+ line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-compact);
53
56
  }
54
57
  .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable {
55
58
  padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-toggle-container-size-padding-x-comfortable);
@@ -70,12 +73,15 @@
70
73
  letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-comfortable);
71
74
  line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-comfortable);
72
75
  }
73
- .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item > button:focus {
76
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item > button:focus-visible {
74
77
  outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-comfortable);
75
78
  }
76
79
  .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item .ids-icon {
77
80
  height: var(--ids-comp-segmented-control-toggle-button-size-icon-comfortable);
78
81
  width: var(--ids-comp-segmented-control-toggle-button-size-icon-comfortable);
82
+ font-size: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-comfortable);
83
+ font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-comfortable);
84
+ line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-comfortable);
79
85
  }
80
86
  .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious {
81
87
  padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-spacious) var(--ids-comp-segmented-control-toggle-container-size-padding-x-spacious);
@@ -96,12 +102,15 @@
96
102
  letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-spacious);
97
103
  line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-spacious);
98
104
  }
99
- .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item > button:focus {
105
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item > button:focus-visible {
100
106
  outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-spacious);
101
107
  }
102
108
  .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item .ids-icon {
103
109
  height: var(--ids-comp-segmented-control-toggle-button-size-icon-spacious);
104
110
  width: var(--ids-comp-segmented-control-toggle-button-size-icon-spacious);
111
+ font-size: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-spacious);
112
+ font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-spacious);
113
+ line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-spacious);
105
114
  }
106
115
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dense {
107
116
  padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-dense) var(--ids-comp-segmented-control-toggle-container-size-padding-x-dense);
@@ -122,14 +131,17 @@
122
131
  letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-dense);
123
132
  line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-dense);
124
133
  }
125
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item > button:focus {
134
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item > button:focus-visible {
126
135
  outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-dense);
127
136
  }
128
137
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item .ids-icon {
129
138
  height: var(--ids-comp-segmented-control-toggle-button-size-icon-dense);
130
139
  width: var(--ids-comp-segmented-control-toggle-button-size-icon-dense);
140
+ font-size: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-dense);
141
+ font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-dense);
142
+ line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-dense);
131
143
  }
132
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item > button:focus {
144
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item > button:focus-visible {
133
145
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
134
146
  }
135
147
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled {
@@ -167,12 +179,12 @@
167
179
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
168
180
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed);
169
181
  }
170
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
182
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible {
171
183
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused);
172
184
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused);
173
185
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
174
186
  }
175
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
187
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
176
188
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused);
177
189
  }
178
190
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
@@ -218,12 +230,12 @@
218
230
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
219
231
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-pressed);
220
232
  }
221
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
233
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible {
222
234
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused);
223
235
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-focused);
224
236
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
225
237
  }
226
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
238
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
227
239
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-focused);
228
240
  }
229
241
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
@@ -234,7 +246,7 @@
234
246
  .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
235
247
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-disabled);
236
248
  }
237
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus {
249
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus-visible {
238
250
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
239
251
  }
240
252
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled {
@@ -272,12 +284,12 @@
272
284
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
273
285
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed);
274
286
  }
275
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
287
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible {
276
288
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused);
277
289
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused);
278
290
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
279
291
  }
280
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
292
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
281
293
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused);
282
294
  }
283
295
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
@@ -323,12 +335,12 @@
323
335
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
324
336
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-pressed);
325
337
  }
326
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
338
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible {
327
339
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused);
328
340
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-focused);
329
341
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
330
342
  }
331
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
343
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
332
344
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-focused);
333
345
  }
334
346
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
@@ -339,7 +351,7 @@
339
351
  .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
340
352
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-disabled);
341
353
  }
342
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus {
354
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus-visible {
343
355
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused);
344
356
  }
345
357
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled {
@@ -377,12 +389,12 @@
377
389
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
378
390
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed);
379
391
  }
380
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
392
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible {
381
393
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused);
382
394
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused);
383
395
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
384
396
  }
385
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
397
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
386
398
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused);
387
399
  }
388
400
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
@@ -428,12 +440,12 @@
428
440
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
429
441
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-pressed);
430
442
  }
431
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
443
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible {
432
444
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused);
433
445
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-focused);
434
446
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
435
447
  }
436
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
448
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
437
449
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-focused);
438
450
  }
439
451
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
@@ -444,7 +456,7 @@
444
456
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
445
457
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-disabled);
446
458
  }
447
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark .ids-segmented-control-toggle-item > button:focus {
459
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-dark .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark .ids-segmented-control-toggle-item > button:focus-visible {
448
460
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
449
461
  }
450
462
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled {
@@ -482,12 +494,12 @@
482
494
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
483
495
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-pressed);
484
496
  }
485
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus {
497
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible {
486
498
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-focused);
487
499
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-focused);
488
500
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
489
501
  }
490
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon {
502
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
491
503
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-focused);
492
504
  }
493
505
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
@@ -533,12 +545,12 @@
533
545
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
534
546
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-pressed);
535
547
  }
536
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus {
548
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible {
537
549
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-focused);
538
550
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-focused);
539
551
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
540
552
  }
541
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon {
553
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
542
554
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-focused);
543
555
  }
544
556
  .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {