@i-cell/ids-styles 0.0.15-beta.2 → 0.0.15-beta.3

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.
@@ -3587,7 +3587,7 @@
3587
3587
  align-self: stretch;
3588
3588
  border-left-style: solid;
3589
3589
  }
3590
- .ids-form-field > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field > .ids-form-field__field-wrapper:has(textarea:focus) {
3590
+ .ids-form-field > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
3591
3591
  outline-offset: 2px;
3592
3592
  outline-style: solid;
3593
3593
  }
@@ -3654,7 +3654,7 @@
3654
3654
  padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-compact) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-compact);
3655
3655
  border-left-width: var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-border-left-compact);
3656
3656
  }
3657
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper:has(textarea:focus) {
3657
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
3658
3658
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
3659
3659
  }
3660
3660
  .ids-form-field.ids-form-field-comfortable {
@@ -3720,7 +3720,7 @@
3720
3720
  padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-comfortable) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-comfortable);
3721
3721
  border-left-width: var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-border-left-comfortable);
3722
3722
  }
3723
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper:has(textarea:focus) {
3723
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
3724
3724
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
3725
3725
  }
3726
3726
  .ids-form-field.ids-form-field-spacious {
@@ -3786,7 +3786,7 @@
3786
3786
  padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-spacious) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-spacious);
3787
3787
  border-left-width: var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-border-left-spacious);
3788
3788
  }
3789
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper:has(textarea:focus) {
3789
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
3790
3790
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
3791
3791
  }
3792
3792
  .ids-form-field.ids-form-field-dense {
@@ -3852,7 +3852,7 @@
3852
3852
  padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-dense) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-dense);
3853
3853
  border-left-width: var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-border-left-dense);
3854
3854
  }
3855
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper:has(textarea:focus) {
3855
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
3856
3856
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense);
3857
3857
  }
3858
3858
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper {
@@ -3881,9 +3881,6 @@
3881
3881
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3882
3882
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3883
3883
  }
3884
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) {
3885
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3886
- }
3887
3884
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover {
3888
3885
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-hovered);
3889
3886
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-hovered);
@@ -3910,67 +3907,59 @@
3910
3907
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3911
3908
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3912
3909
  }
3913
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
3914
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3915
- }
3916
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) {
3910
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) {
3917
3911
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-focused);
3918
3912
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-focused);
3913
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3919
3914
  }
3920
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3915
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3921
3916
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
3922
3917
  }
3923
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3918
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3924
3919
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3925
3920
  }
3926
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3921
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3927
3922
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3928
3923
  }
3929
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3924
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3930
3925
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3931
3926
  }
3932
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3927
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3933
3928
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
3934
3929
  }
3935
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3930
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3936
3931
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
3937
3932
  }
3938
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
3933
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
3939
3934
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3940
3935
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3941
3936
  }
3942
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
3943
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3944
- }
3945
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) {
3937
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) {
3946
3938
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-pressed);
3947
3939
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-pressed);
3948
3940
  }
3949
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3941
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
3950
3942
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
3951
3943
  }
3952
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3944
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3953
3945
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3954
3946
  }
3955
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3947
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3956
3948
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3957
3949
  }
3958
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3950
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3959
3951
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3960
3952
  }
3961
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3953
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
3962
3954
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
3963
3955
  }
3964
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3956
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
3965
3957
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
3966
3958
  }
3967
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
3959
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
3968
3960
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
3969
3961
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
3970
3962
  }
3971
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
3972
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
3973
- }
3974
3963
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__label {
3975
3964
  color: var(--ids-comp-forms-form-field-standard-label-color-fg-surface-default);
3976
3965
  }
@@ -4000,9 +3989,6 @@
4000
3989
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-error-default);
4001
3990
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4002
3991
  }
4003
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) {
4004
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4005
- }
4006
3992
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover {
4007
3993
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-hovered);
4008
3994
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-hovered);
@@ -4029,67 +4015,59 @@
4029
4015
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-error-default);
4030
4016
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4031
4017
  }
4032
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
4033
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4034
- }
4035
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) {
4018
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
4036
4019
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-focused);
4037
4020
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-focused);
4021
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4038
4022
  }
4039
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4023
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4040
4024
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
4041
4025
  }
4042
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4026
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4043
4027
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
4044
4028
  }
4045
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4029
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4046
4030
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
4047
4031
  }
4048
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4032
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4049
4033
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
4050
4034
  }
4051
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4035
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4052
4036
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
4053
4037
  }
4054
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4038
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4055
4039
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
4056
4040
  }
4057
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
4041
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
4058
4042
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-error-default);
4059
4043
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4060
4044
  }
4061
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
4062
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4063
- }
4064
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) {
4045
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) {
4065
4046
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-pressed);
4066
4047
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-pressed);
4067
4048
  }
4068
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4049
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4069
4050
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
4070
4051
  }
4071
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4052
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4072
4053
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
4073
4054
  }
4074
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4055
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4075
4056
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
4076
4057
  }
4077
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4058
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4078
4059
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
4079
4060
  }
4080
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4061
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4081
4062
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
4082
4063
  }
4083
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4064
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4084
4065
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
4085
4066
  }
4086
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
4067
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
4087
4068
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-error-default);
4088
4069
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4089
4070
  }
4090
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
4091
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4092
- }
4093
4071
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__label {
4094
4072
  color: var(--ids-comp-forms-form-field-standard-label-color-fg-surface-error-default);
4095
4073
  }
@@ -4119,9 +4097,6 @@
4119
4097
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-success-default);
4120
4098
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4121
4099
  }
4122
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) {
4123
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4124
- }
4125
4100
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover {
4126
4101
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-hovered);
4127
4102
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-hovered);
@@ -4148,67 +4123,59 @@
4148
4123
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-success-default);
4149
4124
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4150
4125
  }
4151
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
4152
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4153
- }
4154
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) {
4126
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
4155
4127
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-focused);
4156
4128
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-focused);
4129
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4157
4130
  }
4158
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4131
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4159
4132
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
4160
4133
  }
4161
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4134
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4162
4135
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
4163
4136
  }
4164
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4137
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4165
4138
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
4166
4139
  }
4167
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4140
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4168
4141
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
4169
4142
  }
4170
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4143
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4171
4144
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
4172
4145
  }
4173
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4146
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4174
4147
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
4175
4148
  }
4176
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
4149
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
4177
4150
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-success-default);
4178
4151
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4179
4152
  }
4180
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
4181
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4182
- }
4183
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) {
4153
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) {
4184
4154
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-pressed);
4185
4155
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-pressed);
4186
4156
  }
4187
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4157
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4188
4158
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
4189
4159
  }
4190
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4160
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4191
4161
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
4192
4162
  }
4193
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4163
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4194
4164
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
4195
4165
  }
4196
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4166
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4197
4167
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
4198
4168
  }
4199
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4169
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4200
4170
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
4201
4171
  }
4202
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4172
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4203
4173
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
4204
4174
  }
4205
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
4175
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
4206
4176
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-success-default);
4207
4177
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4208
4178
  }
4209
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
4210
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4211
- }
4212
4179
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__label {
4213
4180
  color: var(--ids-comp-forms-form-field-standard-label-color-fg-surface-success-default);
4214
4181
  }
@@ -4238,9 +4205,6 @@
4238
4205
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
4239
4206
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
4240
4207
  }
4241
- .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper:has(textarea:focus) {
4242
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
4243
- }
4244
4208
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__label {
4245
4209
  color: var(--ids-comp-forms-form-field-standard-label-color-fg-surface-disabled);
4246
4210
  }
@@ -4270,9 +4234,6 @@
4270
4234
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
4271
4235
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4272
4236
  }
4273
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) {
4274
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4275
- }
4276
4237
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover {
4277
4238
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-hovered);
4278
4239
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-hovered);
@@ -4299,67 +4260,59 @@
4299
4260
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
4300
4261
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4301
4262
  }
4302
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
4303
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4304
- }
4305
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) {
4263
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) {
4306
4264
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-focused);
4307
4265
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-focused);
4266
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4308
4267
  }
4309
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4268
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4310
4269
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
4311
4270
  }
4312
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4271
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4313
4272
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4314
4273
  }
4315
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4274
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4316
4275
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4317
4276
  }
4318
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4277
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4319
4278
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4320
4279
  }
4321
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4280
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4322
4281
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
4323
4282
  }
4324
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4283
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4325
4284
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
4326
4285
  }
4327
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
4286
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
4328
4287
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
4329
4288
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4330
4289
  }
4331
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
4332
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4333
- }
4334
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) {
4290
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) {
4335
4291
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-pressed);
4336
4292
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-pressed);
4337
4293
  }
4338
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4294
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4339
4295
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
4340
4296
  }
4341
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4297
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4342
4298
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4343
4299
  }
4344
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4300
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4345
4301
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4346
4302
  }
4347
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4303
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4348
4304
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4349
4305
  }
4350
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4306
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4351
4307
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
4352
4308
  }
4353
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4309
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4354
4310
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
4355
4311
  }
4356
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
4312
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
4357
4313
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
4358
4314
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4359
4315
  }
4360
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
4361
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4362
- }
4363
4316
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__label {
4364
4317
  color: var(--ids-comp-forms-form-field-standard-label-color-fg-light-default);
4365
4318
  }
@@ -4389,9 +4342,6 @@
4389
4342
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-error-default);
4390
4343
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4391
4344
  }
4392
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) {
4393
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4394
- }
4395
4345
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover {
4396
4346
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-hovered);
4397
4347
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-hovered);
@@ -4418,67 +4368,59 @@
4418
4368
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-error-default);
4419
4369
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4420
4370
  }
4421
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
4422
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4423
- }
4424
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) {
4371
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
4425
4372
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-focused);
4426
4373
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-focused);
4374
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4427
4375
  }
4428
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4376
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4429
4377
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
4430
4378
  }
4431
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4379
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4432
4380
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4433
4381
  }
4434
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4382
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4435
4383
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4436
4384
  }
4437
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4385
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4438
4386
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4439
4387
  }
4440
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4388
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4441
4389
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
4442
4390
  }
4443
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4391
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4444
4392
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
4445
4393
  }
4446
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
4394
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
4447
4395
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-error-default);
4448
4396
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4449
4397
  }
4450
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
4451
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4452
- }
4453
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) {
4398
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) {
4454
4399
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-pressed);
4455
4400
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-pressed);
4456
4401
  }
4457
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4402
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4458
4403
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
4459
4404
  }
4460
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4405
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4461
4406
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4462
4407
  }
4463
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4408
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4464
4409
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4465
4410
  }
4466
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4411
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4467
4412
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4468
4413
  }
4469
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4414
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4470
4415
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
4471
4416
  }
4472
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4417
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4473
4418
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
4474
4419
  }
4475
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
4420
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
4476
4421
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-error-default);
4477
4422
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4478
4423
  }
4479
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
4480
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4481
- }
4482
4424
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__label {
4483
4425
  color: var(--ids-comp-forms-form-field-standard-label-color-fg-light-error-default);
4484
4426
  }
@@ -4508,9 +4450,6 @@
4508
4450
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-success-default);
4509
4451
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4510
4452
  }
4511
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) {
4512
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4513
- }
4514
4453
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover {
4515
4454
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-hovered);
4516
4455
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-hovered);
@@ -4537,67 +4476,59 @@
4537
4476
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-success-default);
4538
4477
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4539
4478
  }
4540
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover:has(textarea:focus) {
4541
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4542
- }
4543
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) {
4479
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
4544
4480
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-focused);
4545
4481
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-focused);
4482
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4546
4483
  }
4547
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4484
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4548
4485
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
4549
4486
  }
4550
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4487
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4551
4488
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4552
4489
  }
4553
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4490
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4554
4491
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4555
4492
  }
4556
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4493
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4557
4494
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4558
4495
  }
4559
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4496
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4560
4497
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
4561
4498
  }
4562
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4499
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4563
4500
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
4564
4501
  }
4565
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__action {
4502
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
4566
4503
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-success-default);
4567
4504
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4568
4505
  }
4569
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus):has(textarea:focus) {
4570
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4571
- }
4572
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) {
4506
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) {
4573
4507
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-pressed);
4574
4508
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-pressed);
4575
4509
  }
4576
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4510
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
4577
4511
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
4578
4512
  }
4579
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4513
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4580
4514
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4581
4515
  }
4582
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4516
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4583
4517
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4584
4518
  }
4585
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4519
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4586
4520
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4587
4521
  }
4588
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4522
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
4589
4523
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
4590
4524
  }
4591
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4525
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
4592
4526
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
4593
4527
  }
4594
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__action, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__action {
4528
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
4595
4529
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-success-default);
4596
4530
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4597
4531
  }
4598
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active):has(textarea:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active):has(input:focus), .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active):has(textarea:focus) {
4599
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4600
- }
4601
4532
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__label {
4602
4533
  color: var(--ids-comp-forms-form-field-standard-label-color-fg-light-success-default);
4603
4534
  }
@@ -4627,9 +4558,6 @@
4627
4558
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
4628
4559
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
4629
4560
  }
4630
- .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper:has(input:focus), .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper:has(textarea:focus) {
4631
- outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
4632
- }
4633
4561
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__label {
4634
4562
  color: var(--ids-comp-forms-form-field-standard-label-color-fg-light-disabled);
4635
4563
  }
@@ -8057,6 +7985,9 @@
8057
7985
  .ids-select {
8058
7986
  width: 100%;
8059
7987
  }
7988
+ .ids-select:focus, .ids-select:focus-visible {
7989
+ outline: none;
7990
+ }
8060
7991
  .ids-select > .ids-select__trigger {
8061
7992
  display: flex;
8062
7993
  justify-content: space-between;