@i-cell/ids-styles 0.0.69 → 0.0.70

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 (19) hide show
  1. package/dist/autocomplete/autocomplete.css +4 -2
  2. package/dist/autocomplete/autocomplete.min.css +1 -1
  3. package/dist/autocomplete/autocomplete.plugin.js +8 -1
  4. package/dist/checkbox/checkbox.css +111 -99
  5. package/dist/checkbox/checkbox.min.css +1 -1
  6. package/dist/checkbox/checkbox.plugin.js +130 -123
  7. package/dist/components.css +454 -317
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +569 -447
  10. package/dist/dialog/dialog.css +2 -0
  11. package/dist/dialog/dialog.min.css +1 -1
  12. package/dist/dialog/dialog.plugin.js +8 -2
  13. package/dist/option/option.css +1 -0
  14. package/dist/option/option.min.css +1 -1
  15. package/dist/option/option.plugin.js +8 -1
  16. package/dist/radio/radio.css +336 -216
  17. package/dist/radio/radio.min.css +1 -1
  18. package/dist/radio/radio.plugin.js +415 -320
  19. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -335,9 +335,11 @@
335
335
  border-color: transparent;
336
336
  }
337
337
  .ids-autocomplete-panel {
338
- display: grid;
339
- overflow: auto;
338
+ display: flex;
339
+ flex-direction: column;
340
+ align-items: flex-start;
340
341
  width: 100%;
342
+ overflow-y: auto;
341
343
  scrollbar-width: thin;
342
344
  }
343
345
  .ids-autocomplete-overlay-panel {
@@ -3903,83 +3905,83 @@ input[autocomplete] {
3903
3905
  font-size: var(--ids-comp-checkbox-label-typography-font-size-dense);
3904
3906
  line-height: var(--ids-comp-checkbox-label-typography-line-height-dense);
3905
3907
  }
3906
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
3908
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
3907
3909
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
3908
3910
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
3909
3911
  }
3910
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
3912
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
3911
3913
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
3912
3914
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
3913
3915
  }
3914
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
3916
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
3915
3917
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
3916
3918
  }
3917
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
3919
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
3918
3920
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
3919
3921
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
3920
3922
  }
3921
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
3923
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
3922
3924
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
3923
3925
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
3924
3926
  }
3925
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
3927
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
3926
3928
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
3927
3929
  }
3928
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
3930
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
3929
3931
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-default);
3930
3932
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
3931
3933
  }
3932
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
3934
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
3933
3935
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
3934
3936
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
3935
3937
  }
3936
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
3938
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
3937
3939
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
3938
3940
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
3939
3941
  }
3940
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
3942
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
3941
3943
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-focused);
3942
3944
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
3943
3945
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
3944
3946
  }
3945
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
3947
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
3946
3948
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-disabled);
3947
3949
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled);
3948
3950
  }
3949
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
3951
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
3950
3952
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-default);
3951
3953
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
3952
3954
  }
3953
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
3955
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
3954
3956
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
3955
3957
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
3956
3958
  }
3957
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
3959
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
3958
3960
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
3959
3961
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
3960
3962
  }
3961
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
3963
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
3962
3964
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-focused);
3963
3965
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
3964
3966
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
3965
3967
  }
3966
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
3968
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
3967
3969
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-disabled);
3968
3970
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-disabled);
3969
3971
  }
3970
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
3972
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
3971
3973
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default);
3972
3974
  }
3973
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
3975
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
3974
3976
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
3975
3977
  }
3976
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
3978
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
3977
3979
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
3978
3980
  }
3979
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
3981
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
3980
3982
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused);
3981
3983
  }
3982
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
3984
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
3983
3985
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled);
3984
3986
  }
3985
3987
  .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -3997,83 +3999,83 @@ input[autocomplete] {
3997
3999
  .ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
3998
4000
  color: var(--ids-comp-checkbox-label-color-fg-light-disabled);
3999
4001
  }
4000
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4002
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
4001
4003
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
4002
4004
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4003
4005
  }
4004
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4006
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
4005
4007
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
4006
4008
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4007
4009
  }
4008
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4010
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4009
4011
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
4010
4012
  }
4011
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4013
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
4012
4014
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
4013
4015
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4014
4016
  }
4015
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4017
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
4016
4018
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
4017
4019
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4018
4020
  }
4019
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4021
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4020
4022
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
4021
4023
  }
4022
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4024
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
4023
4025
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-default);
4024
4026
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
4025
4027
  }
4026
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4028
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
4027
4029
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
4028
4030
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4029
4031
  }
4030
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4032
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
4031
4033
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
4032
4034
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4033
4035
  }
4034
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4036
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
4035
4037
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-focused);
4036
4038
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
4037
4039
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
4038
4040
  }
4039
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
4041
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
4040
4042
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled);
4041
4043
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled);
4042
4044
  }
4043
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4045
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
4044
4046
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-default);
4045
4047
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
4046
4048
  }
4047
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4049
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
4048
4050
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
4049
4051
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4050
4052
  }
4051
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4053
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
4052
4054
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
4053
4055
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4054
4056
  }
4055
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4057
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
4056
4058
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-focused);
4057
4059
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
4058
4060
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
4059
4061
  }
4060
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
4062
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
4061
4063
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-disabled);
4062
4064
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled);
4063
4065
  }
4064
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4066
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4065
4067
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default);
4066
4068
  }
4067
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4069
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
4068
4070
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
4069
4071
  }
4070
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4072
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
4071
4073
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
4072
4074
  }
4073
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4075
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
4074
4076
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused);
4075
4077
  }
4076
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
4078
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
4077
4079
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled);
4078
4080
  }
4079
4081
  .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -4091,83 +4093,83 @@ input[autocomplete] {
4091
4093
  .ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4092
4094
  color: var(--ids-comp-checkbox-label-color-fg-dark-disabled);
4093
4095
  }
4094
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4096
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
4095
4097
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
4096
4098
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4097
4099
  }
4098
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4100
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
4099
4101
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
4100
4102
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4101
4103
  }
4102
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4104
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4103
4105
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
4104
4106
  }
4105
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4107
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
4106
4108
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
4107
4109
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4108
4110
  }
4109
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4111
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
4110
4112
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
4111
4113
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4112
4114
  }
4113
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4115
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4114
4116
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
4115
4117
  }
4116
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4118
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
4117
4119
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-default);
4118
4120
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
4119
4121
  }
4120
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4122
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
4121
4123
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
4122
4124
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4123
4125
  }
4124
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4126
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
4125
4127
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
4126
4128
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4127
4129
  }
4128
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4130
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
4129
4131
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-focused);
4130
4132
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
4131
4133
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
4132
4134
  }
4133
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
4135
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
4134
4136
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled);
4135
4137
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled);
4136
4138
  }
4137
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4139
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
4138
4140
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-default);
4139
4141
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
4140
4142
  }
4141
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4143
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
4142
4144
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
4143
4145
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4144
4146
  }
4145
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4147
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
4146
4148
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
4147
4149
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4148
4150
  }
4149
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4151
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
4150
4152
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-focused);
4151
4153
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
4152
4154
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
4153
4155
  }
4154
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
4156
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
4155
4157
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-disabled);
4156
4158
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled);
4157
4159
  }
4158
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4160
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4159
4161
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default);
4160
4162
  }
4161
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4163
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
4162
4164
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
4163
4165
  }
4164
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4166
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
4165
4167
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
4166
4168
  }
4167
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4169
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
4168
4170
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused);
4169
4171
  }
4170
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
4172
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
4171
4173
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled);
4172
4174
  }
4173
4175
  .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -4185,6 +4187,9 @@ input[autocomplete] {
4185
4187
  .ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4186
4188
  color: var(--ids-comp-checkbox-label-color-fg-surface-disabled);
4187
4189
  }
4190
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper {
4191
+ cursor: not-allowed;
4192
+ }
4188
4193
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
4189
4194
  cursor: not-allowed;
4190
4195
  }
@@ -4194,9 +4199,15 @@ input[autocomplete] {
4194
4199
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
4195
4200
  cursor: not-allowed;
4196
4201
  }
4202
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper {
4203
+ cursor: not-allowed;
4204
+ }
4197
4205
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4198
4206
  cursor: not-allowed;
4199
4207
  }
4208
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper {
4209
+ cursor: pointer;
4210
+ }
4200
4211
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
4201
4212
  cursor: pointer;
4202
4213
  }
@@ -4206,139 +4217,142 @@ input[autocomplete] {
4206
4217
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
4207
4218
  cursor: pointer;
4208
4219
  }
4220
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper {
4221
+ cursor: pointer;
4222
+ }
4209
4223
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4210
4224
  cursor: pointer;
4211
4225
  }
4212
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4226
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
4213
4227
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
4214
4228
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
4215
4229
  }
4216
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4230
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
4217
4231
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
4218
4232
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
4219
4233
  }
4220
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4234
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
4221
4235
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
4222
4236
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
4223
4237
  }
4224
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4238
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
4225
4239
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
4226
4240
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
4227
4241
  }
4228
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4242
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
4229
4243
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
4230
4244
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
4231
4245
  }
4232
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4246
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
4233
4247
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
4234
4248
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
4235
4249
  }
4236
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4250
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
4237
4251
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
4238
4252
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
4239
4253
  }
4240
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4254
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
4241
4255
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
4242
4256
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
4243
4257
  }
4244
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4258
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4245
4259
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
4246
4260
  }
4247
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4261
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
4248
4262
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
4249
4263
  }
4250
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4264
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
4251
4265
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
4252
4266
  }
4253
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4267
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
4254
4268
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
4255
4269
  }
4256
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4270
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
4257
4271
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
4258
4272
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
4259
4273
  }
4260
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4274
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
4261
4275
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
4262
4276
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4263
4277
  }
4264
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4278
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
4265
4279
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
4266
4280
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4267
4281
  }
4268
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4282
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
4269
4283
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
4270
4284
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
4271
4285
  }
4272
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4286
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
4273
4287
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
4274
4288
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
4275
4289
  }
4276
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4290
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
4277
4291
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
4278
4292
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4279
4293
  }
4280
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4294
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
4281
4295
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
4282
4296
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4283
4297
  }
4284
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4298
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
4285
4299
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
4286
4300
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
4287
4301
  }
4288
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4302
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4289
4303
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
4290
4304
  }
4291
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4305
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
4292
4306
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
4293
4307
  }
4294
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4308
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
4295
4309
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
4296
4310
  }
4297
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4311
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
4298
4312
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
4299
4313
  }
4300
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4314
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
4301
4315
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
4302
4316
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
4303
4317
  }
4304
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4318
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
4305
4319
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
4306
4320
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4307
4321
  }
4308
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4322
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
4309
4323
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
4310
4324
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4311
4325
  }
4312
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4326
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
4313
4327
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
4314
4328
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
4315
4329
  }
4316
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4330
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
4317
4331
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
4318
4332
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
4319
4333
  }
4320
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4334
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
4321
4335
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
4322
4336
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4323
4337
  }
4324
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4338
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
4325
4339
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
4326
4340
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4327
4341
  }
4328
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4342
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
4329
4343
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
4330
4344
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
4331
4345
  }
4332
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4346
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4333
4347
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
4334
4348
  }
4335
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4349
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
4336
4350
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
4337
4351
  }
4338
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4352
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
4339
4353
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
4340
4354
  }
4341
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4355
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
4342
4356
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
4343
4357
  }
4344
4358
 
@@ -5829,12 +5843,14 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5829
5843
  }
5830
5844
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title {
5831
5845
  font-style: normal;
5846
+ color: var(--ids-comp-dialog-header-color-fg-title-default);
5832
5847
  }
5833
5848
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden {
5834
5849
  display: none;
5835
5850
  }
5836
5851
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
5837
5852
  font-style: normal;
5853
+ color: var(--ids-comp-dialog-header-color-fg-subtitle-default);
5838
5854
  }
5839
5855
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
5840
5856
  display: grid;
@@ -9744,6 +9760,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9744
9760
  align-self: stretch;
9745
9761
  box-sizing: border-box;
9746
9762
  user-select: none;
9763
+ flex-shrink: 0;
9747
9764
  }
9748
9765
  .ids-option > .ids-option__text {
9749
9766
  overflow-wrap: anywhere;
@@ -10673,6 +10690,10 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10673
10690
  border-style: none;
10674
10691
  border-color: transparent;
10675
10692
  line-height: 1.5;
10693
+ display: flex;
10694
+ flex-direction: column;
10695
+ justify-content: center;
10696
+ align-items: flex-start;
10676
10697
  }
10677
10698
  .ids-radio-group::before, .ids-radio-group::after, .ids-radio-group *, .ids-radio-group ::before, .ids-radio-group ::after {
10678
10699
  box-sizing: border-box;
@@ -10680,140 +10701,142 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10680
10701
  border-style: none;
10681
10702
  border-color: transparent;
10682
10703
  }
10683
-
10684
- .ids-radio-group {
10685
- display: inline-flex;
10686
- align-items: flex-start;
10687
- justify-content: start;
10688
- }
10689
- .ids-radio-group.ids-radio-group-horizontal {
10690
- flex-direction: row;
10691
- }
10692
- .ids-radio-group.ids-radio-group-vertical {
10693
- flex-direction: column;
10694
- }
10695
10704
  .ids-radio-group.ids-radio-group-left {
10696
10705
  align-items: flex-end;
10697
10706
  }
10698
10707
  .ids-radio-group.ids-radio-group-right {
10699
10708
  align-items: flex-start;
10700
10709
  }
10701
- .ids-radio-group .ids-radio {
10710
+ .ids-radio-group > .ids-radio-group__legend {
10702
10711
  display: flex;
10703
- align-items: center;
10712
+ flex-direction: column;
10704
10713
  }
10705
- .ids-radio-group .ids-radio.ids-radio-left {
10706
- flex-direction: row-reverse;
10707
- justify-content: start;
10714
+ .ids-radio-group > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10715
+ font-style: normal;
10708
10716
  }
10709
- .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper {
10717
+ .ids-radio-group > .ids-radio-group__list {
10710
10718
  display: flex;
10719
+ }
10720
+ .ids-radio-group.ids-radio-group-horizontal > .ids-radio-group__list {
10721
+ flex-direction: row;
10722
+ align-items: center;
10723
+ }
10724
+ .ids-radio-group.ids-radio-group-vertical > .ids-radio-group__list {
10711
10725
  flex-direction: column;
10712
10726
  align-items: flex-start;
10713
10727
  }
10714
- .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper .ids-radio__label {
10728
+ .ids-radio-group .ids-radio {
10729
+ display: flex;
10730
+ align-items: center;
10731
+ }
10732
+ .ids-radio-group .ids-radio.ids-radio-left {
10733
+ flex-direction: row-reverse;
10715
10734
  justify-content: start;
10716
10735
  }
10717
10736
  .ids-radio-group .ids-radio.ids-radio-right {
10718
10737
  flex-direction: row;
10719
10738
  justify-content: start;
10720
10739
  }
10721
- .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
10722
- display: flex;
10723
- flex-direction: column;
10724
- align-items: flex-start;
10725
- }
10726
- .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper .ids-radio__label {
10727
- justify-content: start;
10728
- }
10729
10740
  .ids-radio-group .ids-radio.ids-radio-top {
10730
10741
  flex-direction: column-reverse;
10731
- align-items: center;
10732
10742
  justify-content: center;
10733
- }
10734
- .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper {
10735
- display: flex;
10736
- flex-direction: column;
10737
10743
  align-items: center;
10738
10744
  }
10739
- .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper .ids-radio__label {
10740
- justify-content: center;
10741
- }
10742
10745
  .ids-radio-group .ids-radio.ids-radio-bottom {
10743
10746
  flex-direction: column;
10744
10747
  align-items: center;
10745
10748
  }
10746
- .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper {
10747
- display: flex;
10748
- flex-direction: column;
10749
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper {
10749
10750
  align-items: center;
10750
10751
  }
10751
- .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper .ids-radio__label {
10752
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label {
10752
10753
  justify-content: center;
10753
10754
  }
10755
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
10756
+ align-items: flex-start;
10757
+ }
10758
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label {
10759
+ justify-content: start;
10760
+ }
10754
10761
  .ids-radio-group .ids-radio .ids-radio__input-wrapper {
10755
10762
  position: relative;
10756
10763
  display: flex;
10757
10764
  align-items: center;
10758
10765
  justify-content: center;
10759
10766
  }
10760
- .ids-radio-group .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10767
+ .ids-radio-group .ids-radio .ids-radio__touch-target {
10761
10768
  position: absolute;
10762
10769
  cursor: pointer;
10763
10770
  }
10764
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] {
10771
+ .ids-radio-group .ids-radio input[type=radio] {
10765
10772
  appearance: none;
10766
10773
  -webkit-appearance: none;
10767
- flex-shrink: 0;
10768
- border-style: solid;
10769
- margin: 0;
10770
10774
  display: flex;
10771
- justify-content: center;
10772
10775
  align-items: center;
10776
+ justify-content: center;
10773
10777
  flex-shrink: 0;
10778
+ margin: 0;
10779
+ border-style: solid;
10774
10780
  cursor: pointer;
10775
10781
  }
10776
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
10782
+ .ids-radio-group .ids-radio input[type=radio]:focus, .ids-radio-group .ids-radio input[type=radio]:focus-visible {
10783
+ outline-offset: 2px;
10784
+ outline-style: solid;
10785
+ }
10786
+ .ids-radio-group .ids-radio input[type=radio] + .ids-radio__inner-circle {
10777
10787
  position: absolute;
10778
10788
  flex-shrink: 0;
10779
- border-style: solid;
10780
- height: 0;
10781
10789
  width: 0;
10790
+ height: 0;
10782
10791
  border-width: 0;
10792
+ border-style: solid;
10783
10793
  cursor: pointer;
10784
10794
  }
10785
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10786
- outline-offset: 2px;
10787
- outline-style: solid;
10795
+ .ids-radio-group .ids-radio .ids-radio__label-wrapper {
10796
+ display: flex;
10797
+ flex-direction: column;
10798
+ cursor: pointer;
10788
10799
  }
10789
10800
  .ids-radio-group .ids-radio .ids-radio__label {
10801
+ display: flex;
10802
+ align-items: center;
10803
+ flex: 1 0 0;
10804
+ font-style: normal;
10790
10805
  cursor: pointer;
10791
10806
  }
10792
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper .ids-radio__touch-target {
10807
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__touch-target,
10808
+ .ids-radio-group .ids-radio.ids-radio-disabled input[type=radio],
10809
+ .ids-radio-group .ids-radio.ids-radio-disabled input[type=radio] + .ids-radio__inner-circle,
10810
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label-wrapper,
10811
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
10793
10812
  cursor: not-allowed;
10794
10813
  }
10795
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] {
10796
- cursor: not-allowed;
10814
+ .ids-radio-group.ids-radio-group-compact {
10815
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-compact);
10816
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-compact);
10797
10817
  }
10798
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
10799
- cursor: not-allowed;
10818
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-group__legend {
10819
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-compact);
10800
10820
  }
10801
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
10802
- cursor: not-allowed;
10821
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10822
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-compact);
10823
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-compact);
10824
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-compact);
10825
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-compact);
10826
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-compact);
10803
10827
  }
10804
- .ids-radio-group .ids-radio .ids-radio__label {
10805
- display: flex;
10806
- align-items: center;
10807
- flex: 1 0 0;
10808
- font-style: normal;
10828
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal > .ids-radio-group__list {
10829
+ gap: var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-x-compact);
10809
10830
  }
10810
- .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal {
10811
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-compact) var(--ids-comp-radio-group-horizontal-container-size-padding-x-compact);
10812
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-compact);
10831
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10832
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-compact);
10833
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-compact);
10834
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-compact);
10835
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-compact);
10836
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-compact);
10813
10837
  }
10814
- .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical {
10815
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact);
10816
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-compact);
10838
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical > .ids-radio-group__list {
10839
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-compact);
10817
10840
  }
10818
10841
  .ids-radio-group.ids-radio-group-compact .ids-radio {
10819
10842
  padding: var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact);
@@ -10822,8 +10845,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10822
10845
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10823
10846
  top: calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact)) / 2);
10824
10847
  left: calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact)) / 2);
10825
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
10826
10848
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-compact);
10849
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
10827
10850
  }
10828
10851
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio] {
10829
10852
  width: var(--ids-comp-radio-button-input-size-width-compact);
@@ -10840,21 +10863,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10840
10863
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10841
10864
  outline-width: var(--ids-comp-radio-focused-outline-outline-compact);
10842
10865
  }
10866
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label-wrapper {
10867
+ gap: var(--ids-comp-radio-button-label-group-size-gap-compact);
10868
+ }
10843
10869
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label {
10844
- padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0px;
10870
+ padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0;
10845
10871
  font-family: var(--ids-comp-radio-button-label-typography-font-family-compact);
10846
10872
  font-size: var(--ids-comp-radio-button-label-typography-font-size-compact);
10847
10873
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-compact);
10848
10874
  line-height: var(--ids-comp-radio-button-label-typography-line-height-compact);
10849
10875
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-compact);
10850
10876
  }
10851
- .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal {
10852
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-comfortable) var(--ids-comp-radio-group-horizontal-container-size-padding-x-comfortable);
10853
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-comfortable);
10877
+ .ids-radio-group.ids-radio-group-comfortable {
10878
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-comfortable);
10879
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-comfortable);
10880
+ }
10881
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-group__legend {
10882
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-comfortable);
10883
+ }
10884
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10885
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-comfortable);
10886
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-comfortable);
10887
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-comfortable);
10888
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-comfortable);
10889
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-comfortable);
10890
+ }
10891
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal > .ids-radio-group__list {
10892
+ gap: var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-x-comfortable);
10893
+ }
10894
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10895
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-comfortable);
10896
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-comfortable);
10897
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-comfortable);
10898
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-comfortable);
10899
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-comfortable);
10854
10900
  }
10855
- .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical {
10856
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable);
10857
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-comfortable);
10901
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical > .ids-radio-group__list {
10902
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-comfortable);
10858
10903
  }
10859
10904
  .ids-radio-group.ids-radio-group-comfortable .ids-radio {
10860
10905
  padding: var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable);
@@ -10863,8 +10908,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10863
10908
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10864
10909
  top: calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)) / 2);
10865
10910
  left: calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)) / 2);
10866
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
10867
10911
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable);
10912
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
10868
10913
  }
10869
10914
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio] {
10870
10915
  width: var(--ids-comp-radio-button-input-size-width-comfortable);
@@ -10881,21 +10926,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10881
10926
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10882
10927
  outline-width: var(--ids-comp-radio-focused-outline-outline-comfortable);
10883
10928
  }
10929
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label-wrapper {
10930
+ gap: var(--ids-comp-radio-button-label-group-size-gap-comfortable);
10931
+ }
10884
10932
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label {
10885
- padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px;
10933
+ padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0;
10886
10934
  font-family: var(--ids-comp-radio-button-label-typography-font-family-comfortable);
10887
10935
  font-size: var(--ids-comp-radio-button-label-typography-font-size-comfortable);
10888
10936
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-comfortable);
10889
10937
  line-height: var(--ids-comp-radio-button-label-typography-line-height-comfortable);
10890
10938
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-comfortable);
10891
10939
  }
10892
- .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal {
10893
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-spacious) var(--ids-comp-radio-group-horizontal-container-size-padding-x-spacious);
10894
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-spacious);
10940
+ .ids-radio-group.ids-radio-group-spacious {
10941
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-spacious);
10942
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-spacious);
10943
+ }
10944
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-group__legend {
10945
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-spacious);
10946
+ }
10947
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10948
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-spacious);
10949
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-spacious);
10950
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-spacious);
10951
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-spacious);
10952
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-spacious);
10953
+ }
10954
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal > .ids-radio-group__list {
10955
+ gap: var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-x-spacious);
10895
10956
  }
10896
- .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical {
10897
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious);
10898
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-spacious);
10957
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10958
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-spacious);
10959
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-spacious);
10960
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-spacious);
10961
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-spacious);
10962
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-spacious);
10963
+ }
10964
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical > .ids-radio-group__list {
10965
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-spacious);
10899
10966
  }
10900
10967
  .ids-radio-group.ids-radio-group-spacious .ids-radio {
10901
10968
  padding: var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious);
@@ -10904,8 +10971,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10904
10971
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10905
10972
  top: calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)) / 2);
10906
10973
  left: calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)) / 2);
10907
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
10908
10974
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-spacious);
10975
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
10909
10976
  }
10910
10977
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio] {
10911
10978
  width: var(--ids-comp-radio-button-input-size-width-spacious);
@@ -10922,21 +10989,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10922
10989
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10923
10990
  outline-width: var(--ids-comp-radio-focused-outline-outline-spacious);
10924
10991
  }
10992
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label-wrapper {
10993
+ gap: var(--ids-comp-radio-button-label-group-size-gap-spacious);
10994
+ }
10925
10995
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label {
10926
- padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px;
10996
+ padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0;
10927
10997
  font-family: var(--ids-comp-radio-button-label-typography-font-family-spacious);
10928
10998
  font-size: var(--ids-comp-radio-button-label-typography-font-size-spacious);
10929
10999
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-spacious);
10930
11000
  line-height: var(--ids-comp-radio-button-label-typography-line-height-spacious);
10931
11001
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-spacious);
10932
11002
  }
10933
- .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal {
10934
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-dense) var(--ids-comp-radio-group-horizontal-container-size-padding-x-dense);
10935
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-dense);
11003
+ .ids-radio-group.ids-radio-group-dense {
11004
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-dense);
11005
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-dense);
11006
+ }
11007
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-group__legend {
11008
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-dense);
10936
11009
  }
10937
- .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical {
10938
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense);
10939
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-dense);
11010
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
11011
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-dense);
11012
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-dense);
11013
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-dense);
11014
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-dense);
11015
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-dense);
11016
+ }
11017
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal > .ids-radio-group__list {
11018
+ gap: var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-x-dense);
11019
+ }
11020
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
11021
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-dense);
11022
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-dense);
11023
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-dense);
11024
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-dense);
11025
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-dense);
11026
+ }
11027
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical > .ids-radio-group__list {
11028
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-dense);
10940
11029
  }
10941
11030
  .ids-radio-group.ids-radio-group-dense .ids-radio {
10942
11031
  padding: var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense);
@@ -10945,8 +11034,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10945
11034
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10946
11035
  top: calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense)) / 2);
10947
11036
  left: calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense)) / 2);
10948
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
10949
11037
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-dense);
11038
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
10950
11039
  }
10951
11040
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio] {
10952
11041
  width: var(--ids-comp-radio-button-input-size-width-dense);
@@ -10963,94 +11052,106 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10963
11052
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10964
11053
  outline-width: var(--ids-comp-radio-focused-outline-outline-dense);
10965
11054
  }
11055
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label-wrapper {
11056
+ gap: var(--ids-comp-radio-button-label-group-size-gap-dense);
11057
+ }
10966
11058
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label {
10967
- padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0px;
11059
+ padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0;
10968
11060
  font-family: var(--ids-comp-radio-button-label-typography-font-family-dense);
10969
11061
  font-size: var(--ids-comp-radio-button-label-typography-font-size-dense);
10970
11062
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-dense);
10971
11063
  line-height: var(--ids-comp-radio-button-label-typography-line-height-dense);
10972
11064
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-dense);
10973
11065
  }
10974
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
10975
- border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
10976
- background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11066
+ .ids-radio-group.ids-radio-group-surface .ids-radio-group__legend-label {
11067
+ color: var(--ids-comp-radio-group-legend-color-fg-surface-default);
11068
+ }
11069
+ .ids-radio-group.ids-radio-group-surface.ids-radio-group-disabled .ids-radio-group__legend-label {
11070
+ color: var(--ids-comp-radio-group-legend-color-fg-surface-disabled);
10977
11071
  }
10978
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11072
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled) {
10979
11073
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
10980
11074
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
10981
11075
  }
10982
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11076
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):hover {
10983
11077
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
10984
11078
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
10985
11079
  }
10986
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11080
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):active {
10987
11081
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-pressed);
10988
11082
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
10989
11083
  }
10990
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11084
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):focus-visible {
10991
11085
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
10992
11086
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
10993
11087
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-surface-focused);
10994
11088
  }
10995
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:disabled {
11089
+ .ids-radio-group .ids-radio-surface input[type=radio]:disabled {
10996
11090
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-disabled);
10997
11091
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-disabled);
10998
11092
  }
10999
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11093
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled) {
11000
11094
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
11001
11095
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11002
11096
  }
11003
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11097
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11004
11098
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
11005
11099
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
11006
11100
  }
11007
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11101
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):hover {
11008
11102
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
11009
11103
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11010
11104
  }
11011
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11105
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11012
11106
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
11013
11107
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
11014
11108
  }
11015
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11109
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):active {
11016
11110
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-pressed);
11017
11111
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
11018
11112
  }
11019
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11113
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11020
11114
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-pressed);
11021
11115
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-pressed);
11022
11116
  }
11023
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11117
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):focus-visible {
11024
11118
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
11025
11119
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11026
11120
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-surface-focused);
11027
11121
  }
11028
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11122
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11029
11123
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
11030
11124
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
11031
11125
  }
11032
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11126
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:disabled {
11033
11127
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-disabled);
11034
11128
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-disabled);
11035
11129
  }
11036
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11130
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11037
11131
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-disabled);
11038
11132
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-disabled);
11039
11133
  }
11040
- .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11134
+ .ids-radio-group .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11135
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
11136
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11137
+ }
11138
+ .ids-radio-group .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11139
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11140
+ }
11141
+ .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11041
11142
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
11042
11143
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11043
11144
  }
11044
- .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11145
+ .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11045
11146
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
11046
11147
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
11047
11148
  }
11149
+ .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11150
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11151
+ }
11048
11152
  .ids-radio-group .ids-radio-surface .ids-radio__label {
11049
11153
  color: var(--ids-comp-radio-label-color-fg-surface-default);
11050
11154
  }
11051
- .ids-radio-group .ids-radio-surface .ids-radio__label:hover {
11052
- color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11053
- }
11054
11155
  .ids-radio-group .ids-radio-surface .ids-radio__label:active {
11055
11156
  color: var(--ids-comp-radio-label-color-fg-surface-pressed);
11056
11157
  }
@@ -11060,86 +11161,95 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11060
11161
  .ids-radio-group .ids-radio-surface.ids-radio-disabled .ids-radio__label {
11061
11162
  color: var(--ids-comp-radio-label-color-fg-surface-disabled);
11062
11163
  }
11063
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11064
- border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
11065
- background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11164
+ .ids-radio-group.ids-radio-group-light .ids-radio-group__legend-label {
11165
+ color: var(--ids-comp-radio-group-legend-color-fg-light-default);
11166
+ }
11167
+ .ids-radio-group.ids-radio-group-light.ids-radio-group-disabled .ids-radio-group__legend-label {
11168
+ color: var(--ids-comp-radio-group-legend-color-fg-light-disabled);
11066
11169
  }
11067
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11170
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled) {
11068
11171
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
11069
11172
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11070
11173
  }
11071
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11174
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):hover {
11072
11175
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
11073
11176
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11074
11177
  }
11075
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11178
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):active {
11076
11179
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-pressed);
11077
11180
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
11078
11181
  }
11079
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11182
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):focus-visible {
11080
11183
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
11081
11184
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11082
11185
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-light-focused);
11083
11186
  }
11084
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:disabled {
11187
+ .ids-radio-group .ids-radio-light input[type=radio]:disabled {
11085
11188
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-disabled);
11086
11189
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-disabled);
11087
11190
  }
11088
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11191
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled) {
11089
11192
  border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
11090
11193
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11091
11194
  }
11092
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11195
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11093
11196
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
11094
11197
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
11095
11198
  }
11096
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11199
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):hover {
11097
11200
  border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
11098
11201
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11099
11202
  }
11100
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11203
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11101
11204
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
11102
11205
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
11103
11206
  }
11104
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11207
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):active {
11105
11208
  border-color: var(--ids-comp-radio-input-selected-color-border-light-pressed);
11106
11209
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
11107
11210
  }
11108
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11211
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11109
11212
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-pressed);
11110
11213
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-pressed);
11111
11214
  }
11112
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11215
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):focus-visible {
11113
11216
  border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
11114
11217
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11115
11218
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-light-focused);
11116
11219
  }
11117
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11220
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11118
11221
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
11119
11222
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
11120
11223
  }
11121
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11224
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:disabled {
11122
11225
  border-color: var(--ids-comp-radio-input-selected-color-border-light-disabled);
11123
11226
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-disabled);
11124
11227
  }
11125
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11228
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11126
11229
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-disabled);
11127
11230
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-disabled);
11128
11231
  }
11129
- .ids-radio-group .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11232
+ .ids-radio-group .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11233
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
11234
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11235
+ }
11236
+ .ids-radio-group .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11237
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11238
+ }
11239
+ .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11130
11240
  border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
11131
11241
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11132
11242
  }
11133
- .ids-radio-group .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11243
+ .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11134
11244
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
11135
11245
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
11136
11246
  }
11247
+ .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11248
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11249
+ }
11137
11250
  .ids-radio-group .ids-radio-light .ids-radio__label {
11138
11251
  color: var(--ids-comp-radio-label-color-fg-light-default);
11139
11252
  }
11140
- .ids-radio-group .ids-radio-light .ids-radio__label:hover {
11141
- color: var(--ids-comp-radio-label-color-fg-light-hovered);
11142
- }
11143
11253
  .ids-radio-group .ids-radio-light .ids-radio__label:active {
11144
11254
  color: var(--ids-comp-radio-label-color-fg-light-pressed);
11145
11255
  }
@@ -11149,86 +11259,95 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11149
11259
  .ids-radio-group .ids-radio-light.ids-radio-disabled .ids-radio__label {
11150
11260
  color: var(--ids-comp-radio-label-color-fg-light-disabled);
11151
11261
  }
11152
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11153
- border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11154
- background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11262
+ .ids-radio-group.ids-radio-group-dark .ids-radio-group__legend-label {
11263
+ color: var(--ids-comp-radio-group-legend-color-fg-dark-default);
11155
11264
  }
11156
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11265
+ .ids-radio-group.ids-radio-group-dark.ids-radio-group-disabled .ids-radio-group__legend-label {
11266
+ color: var(--ids-comp-radio-group-legend-color-fg-dark-disabled);
11267
+ }
11268
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled) {
11157
11269
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
11158
11270
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11159
11271
  }
11160
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11272
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):hover {
11161
11273
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11162
11274
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11163
11275
  }
11164
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11276
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):active {
11165
11277
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-pressed);
11166
11278
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
11167
11279
  }
11168
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11280
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):focus-visible {
11169
11281
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
11170
11282
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11171
11283
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-dark-focused);
11172
11284
  }
11173
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:disabled {
11285
+ .ids-radio-group .ids-radio-dark input[type=radio]:disabled {
11174
11286
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-disabled);
11175
11287
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-disabled);
11176
11288
  }
11177
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11289
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled) {
11178
11290
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
11179
11291
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11180
11292
  }
11181
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11293
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11182
11294
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
11183
11295
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
11184
11296
  }
11185
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11297
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):hover {
11186
11298
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
11187
11299
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11188
11300
  }
11189
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11301
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11190
11302
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
11191
11303
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
11192
11304
  }
11193
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11305
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):active {
11194
11306
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-pressed);
11195
11307
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
11196
11308
  }
11197
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11309
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11198
11310
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-pressed);
11199
11311
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-pressed);
11200
11312
  }
11201
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11313
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):focus-visible {
11202
11314
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
11203
11315
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11204
11316
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-dark-focused);
11205
11317
  }
11206
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11318
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11207
11319
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
11208
11320
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
11209
11321
  }
11210
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11322
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:disabled {
11211
11323
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-disabled);
11212
11324
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-disabled);
11213
11325
  }
11214
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11326
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11215
11327
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-disabled);
11216
11328
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-disabled);
11217
11329
  }
11218
- .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11330
+ .ids-radio-group .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11331
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11332
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11333
+ }
11334
+ .ids-radio-group .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11335
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11336
+ }
11337
+ .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11219
11338
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
11220
11339
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11221
11340
  }
11222
- .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11341
+ .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11223
11342
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
11224
11343
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
11225
11344
  }
11345
+ .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11346
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11347
+ }
11226
11348
  .ids-radio-group .ids-radio-dark .ids-radio__label {
11227
11349
  color: var(--ids-comp-radio-label-color-fg-dark-default);
11228
11350
  }
11229
- .ids-radio-group .ids-radio-dark .ids-radio__label:hover {
11230
- color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11231
- }
11232
11351
  .ids-radio-group .ids-radio-dark .ids-radio__label:active {
11233
11352
  color: var(--ids-comp-radio-label-color-fg-dark-pressed);
11234
11353
  }
@@ -11238,186 +11357,204 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11238
11357
  .ids-radio-group .ids-radio-dark.ids-radio-disabled .ids-radio__label {
11239
11358
  color: var(--ids-comp-radio-label-color-fg-dark-disabled);
11240
11359
  }
11241
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11242
- border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11243
- background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11244
- }
11245
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11360
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled) {
11246
11361
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
11247
11362
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
11248
11363
  }
11249
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11364
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):hover {
11250
11365
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11251
11366
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11252
11367
  }
11253
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11368
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):active {
11254
11369
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-pressed);
11255
11370
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
11256
11371
  }
11257
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11372
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):focus-visible {
11258
11373
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
11259
11374
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
11260
11375
  }
11261
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11376
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled) {
11262
11377
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
11263
11378
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11264
11379
  }
11265
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11380
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11266
11381
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
11267
11382
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
11268
11383
  }
11269
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11384
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):hover {
11270
11385
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
11271
11386
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11272
11387
  }
11273
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11388
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11274
11389
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
11275
11390
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
11276
11391
  }
11277
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11392
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):active {
11278
11393
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-pressed);
11279
11394
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
11280
11395
  }
11281
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11396
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11282
11397
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-pressed);
11283
11398
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-pressed);
11284
11399
  }
11285
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11400
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):focus-visible {
11286
11401
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
11287
11402
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11288
11403
  }
11289
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11404
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11290
11405
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
11291
11406
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
11292
11407
  }
11293
- .ids-radio-group.ng-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11408
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11409
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11410
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11411
+ }
11412
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11413
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11414
+ }
11415
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11294
11416
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
11295
11417
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11296
11418
  }
11297
- .ids-radio-group.ng-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11419
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11298
11420
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
11299
11421
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
11300
11422
  }
11301
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11302
- border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11303
- background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11423
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11424
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11304
11425
  }
11305
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11426
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled) {
11306
11427
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
11307
11428
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11308
11429
  }
11309
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11430
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):hover {
11310
11431
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11311
11432
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11312
11433
  }
11313
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11434
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):active {
11314
11435
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-pressed);
11315
11436
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
11316
11437
  }
11317
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11438
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):focus-visible {
11318
11439
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
11319
11440
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11320
11441
  }
11321
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11442
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled) {
11322
11443
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
11323
11444
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11324
11445
  }
11325
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11446
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11326
11447
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
11327
11448
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
11328
11449
  }
11329
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11450
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):hover {
11330
11451
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
11331
11452
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11332
11453
  }
11333
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11454
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11334
11455
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
11335
11456
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
11336
11457
  }
11337
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11458
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):active {
11338
11459
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-pressed);
11339
11460
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
11340
11461
  }
11341
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11462
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11342
11463
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-pressed);
11343
11464
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-pressed);
11344
11465
  }
11345
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11466
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):focus-visible {
11346
11467
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
11347
11468
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11348
11469
  }
11349
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11470
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11350
11471
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
11351
11472
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
11352
11473
  }
11353
- .ids-radio-group.ng-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11474
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11475
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11476
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11477
+ }
11478
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11479
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11480
+ }
11481
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11354
11482
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
11355
11483
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11356
11484
  }
11357
- .ids-radio-group.ng-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11485
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11358
11486
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
11359
11487
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
11360
11488
  }
11361
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11362
- border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11363
- background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11489
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11490
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11364
11491
  }
11365
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11492
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled) {
11366
11493
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
11367
11494
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11368
11495
  }
11369
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11496
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):hover {
11370
11497
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11371
11498
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11372
11499
  }
11373
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11500
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):active {
11374
11501
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-pressed);
11375
11502
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
11376
11503
  }
11377
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11504
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):focus-visible {
11378
11505
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
11379
11506
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11380
11507
  }
11381
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11508
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled) {
11382
11509
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
11383
11510
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11384
11511
  }
11385
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11512
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11386
11513
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
11387
11514
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
11388
11515
  }
11389
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11516
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):hover {
11390
11517
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
11391
11518
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11392
11519
  }
11393
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11520
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11394
11521
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
11395
11522
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
11396
11523
  }
11397
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11524
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):active {
11398
11525
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-pressed);
11399
11526
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
11400
11527
  }
11401
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11528
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11402
11529
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-pressed);
11403
11530
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-pressed);
11404
11531
  }
11405
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11532
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):focus-visible {
11406
11533
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
11407
11534
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11408
11535
  }
11409
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11536
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11410
11537
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
11411
11538
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
11412
11539
  }
11413
- .ids-radio-group.ng-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11540
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11541
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11542
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11543
+ }
11544
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11545
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11546
+ }
11547
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11414
11548
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
11415
11549
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11416
11550
  }
11417
- .ids-radio-group.ng-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11551
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11418
11552
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
11419
11553
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
11420
11554
  }
11555
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11556
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11557
+ }
11421
11558
 
11422
11559
  .ids-segmented-control {
11423
11560
  box-sizing: border-box;