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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components.css +32 -26
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +39 -27
  4. package/dist/form-elements/form-field/form-field.css +32 -26
  5. package/dist/form-elements/form-field/form-field.min.css +1 -1
  6. package/dist/form-elements/form-field/form-field.plugin.js +39 -27
  7. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -3572,6 +3572,12 @@
3572
3572
  background-color: transparent;
3573
3573
  flex: 1 0 0;
3574
3574
  padding: 0;
3575
+ font-family: inherit;
3576
+ font-size: inherit;
3577
+ font-style: normal;
3578
+ font-weight: inherit;
3579
+ letter-spacing: inherit;
3580
+ line-height: inherit;
3575
3581
  }
3576
3582
  .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input:focus-visible,
3577
3583
  .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea:focus-visible {
@@ -3865,7 +3871,7 @@
3865
3871
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3866
3872
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3867
3873
  }
3868
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3874
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
3869
3875
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3870
3876
  }
3871
3877
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -3891,7 +3897,7 @@
3891
3897
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3892
3898
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3893
3899
  }
3894
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3900
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
3895
3901
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3896
3902
  }
3897
3903
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -3918,7 +3924,7 @@
3918
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__prefix {
3919
3925
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3920
3926
  }
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
+ .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 .ids-form-field-control {
3922
3928
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3923
3929
  }
3924
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__infix ::placeholder {
@@ -3944,7 +3950,7 @@
3944
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__prefix {
3945
3951
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3946
3952
  }
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 {
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__infix .ids-form-field-control {
3948
3954
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3949
3955
  }
3950
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__infix ::placeholder {
@@ -3973,7 +3979,7 @@
3973
3979
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3974
3980
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3975
3981
  }
3976
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3982
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
3977
3983
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3978
3984
  }
3979
3985
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -3999,7 +4005,7 @@
3999
4005
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4000
4006
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
4001
4007
  }
4002
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4008
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4003
4009
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
4004
4010
  }
4005
4011
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4026,7 +4032,7 @@
4026
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__prefix {
4027
4033
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
4028
4034
  }
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 {
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__infix .ids-form-field-control {
4030
4036
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
4031
4037
  }
4032
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__infix ::placeholder {
@@ -4052,7 +4058,7 @@
4052
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__prefix {
4053
4059
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
4054
4060
  }
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 {
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__infix .ids-form-field-control {
4056
4062
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
4057
4063
  }
4058
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__infix ::placeholder {
@@ -4081,7 +4087,7 @@
4081
4087
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4082
4088
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
4083
4089
  }
4084
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4090
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4085
4091
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
4086
4092
  }
4087
4093
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4107,7 +4113,7 @@
4107
4113
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4108
4114
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
4109
4115
  }
4110
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4116
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4111
4117
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
4112
4118
  }
4113
4119
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4134,7 +4140,7 @@
4134
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__prefix {
4135
4141
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
4136
4142
  }
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 {
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__infix .ids-form-field-control {
4138
4144
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
4139
4145
  }
4140
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__infix ::placeholder {
@@ -4160,7 +4166,7 @@
4160
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__prefix {
4161
4167
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
4162
4168
  }
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 {
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__infix .ids-form-field-control {
4164
4170
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
4165
4171
  }
4166
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__infix ::placeholder {
@@ -4189,7 +4195,7 @@
4189
4195
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4190
4196
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-disabled);
4191
4197
  }
4192
- .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4198
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4193
4199
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-disabled);
4194
4200
  }
4195
4201
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4218,7 +4224,7 @@
4218
4224
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4219
4225
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4220
4226
  }
4221
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4227
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4222
4228
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4223
4229
  }
4224
4230
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4244,7 +4250,7 @@
4244
4250
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4245
4251
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4246
4252
  }
4247
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4253
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4248
4254
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4249
4255
  }
4250
4256
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4271,7 +4277,7 @@
4271
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__prefix {
4272
4278
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4273
4279
  }
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 {
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__infix .ids-form-field-control {
4275
4281
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4276
4282
  }
4277
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__infix ::placeholder {
@@ -4297,7 +4303,7 @@
4297
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__prefix {
4298
4304
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4299
4305
  }
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 {
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__infix .ids-form-field-control {
4301
4307
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4302
4308
  }
4303
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__infix ::placeholder {
@@ -4326,7 +4332,7 @@
4326
4332
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4327
4333
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4328
4334
  }
4329
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4335
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4330
4336
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4331
4337
  }
4332
4338
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4352,7 +4358,7 @@
4352
4358
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4353
4359
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4354
4360
  }
4355
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4361
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4356
4362
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4357
4363
  }
4358
4364
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4379,7 +4385,7 @@
4379
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__prefix {
4380
4386
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4381
4387
  }
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 {
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__infix .ids-form-field-control {
4383
4389
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4384
4390
  }
4385
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__infix ::placeholder {
@@ -4405,7 +4411,7 @@
4405
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__prefix {
4406
4412
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4407
4413
  }
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 {
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__infix .ids-form-field-control {
4409
4415
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4410
4416
  }
4411
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__infix ::placeholder {
@@ -4434,7 +4440,7 @@
4434
4440
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4435
4441
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4436
4442
  }
4437
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4443
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4438
4444
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4439
4445
  }
4440
4446
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4460,7 +4466,7 @@
4460
4466
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4461
4467
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4462
4468
  }
4463
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4469
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4464
4470
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4465
4471
  }
4466
4472
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
@@ -4487,7 +4493,7 @@
4487
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__prefix {
4488
4494
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4489
4495
  }
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 {
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__infix .ids-form-field-control {
4491
4497
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4492
4498
  }
4493
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__infix ::placeholder {
@@ -4513,7 +4519,7 @@
4513
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__prefix {
4514
4520
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4515
4521
  }
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 {
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__infix .ids-form-field-control {
4517
4523
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4518
4524
  }
4519
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__infix ::placeholder {
@@ -4542,7 +4548,7 @@
4542
4548
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4543
4549
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-disabled);
4544
4550
  }
4545
- .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4551
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
4546
4552
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-disabled);
4547
4553
  }
4548
4554
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {