@i-cell/ids-styles 0.0.14 → 0.0.15-beta.0

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 (16) hide show
  1. package/dist/components.css +473 -160
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +408 -82
  4. package/dist/form-elements/form-field/form-field.css +58 -148
  5. package/dist/form-elements/form-field/form-field.min.css +1 -1
  6. package/dist/form-elements/form-field/form-field.plugin.js +62 -64
  7. package/dist/option/option.css +273 -0
  8. package/dist/option/option.min.css +1 -0
  9. package/dist/option/option.plugin.js +252 -0
  10. package/dist/select/select.css +131 -0
  11. package/dist/select/select.min.css +1 -0
  12. package/dist/select/select.plugin.js +103 -0
  13. package/dist/switch/switch.css +9 -12
  14. package/dist/switch/switch.min.css +1 -1
  15. package/dist/switch/switch.plugin.js +9 -18
  16. package/package.json +2 -2
package/dist/components.css CHANGED
@@ -3136,6 +3136,7 @@
3136
3136
  display: flex;
3137
3137
  align-items: center;
3138
3138
  flex: 1 0 0;
3139
+ overflow-x: hidden;
3139
3140
  }
3140
3141
  .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__duffix, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon {
3141
3142
  display: flex;
@@ -3145,6 +3146,7 @@
3145
3146
  display: flex;
3146
3147
  align-items: center;
3147
3148
  flex: 1 0 0;
3149
+ overflow-x: hidden;
3148
3150
  }
3149
3151
  .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3150
3152
  .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
@@ -3207,17 +3209,13 @@
3207
3209
  }
3208
3210
  .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3209
3211
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-compact) 0;
3210
- }
3211
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3212
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3213
3212
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-compact);
3214
3213
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-compact);
3215
3214
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-compact);
3216
3215
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-compact);
3217
3216
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-compact);
3218
3217
  }
3219
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3220
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3218
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3221
3219
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact);
3222
3220
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-compact);
3223
3221
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-compact);
@@ -3277,17 +3275,13 @@
3277
3275
  }
3278
3276
  .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3279
3277
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-comfortable) 0;
3280
- }
3281
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3282
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3283
3278
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-comfortable);
3284
3279
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-comfortable);
3285
3280
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-comfortable);
3286
3281
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-comfortable);
3287
3282
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-comfortable);
3288
3283
  }
3289
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3290
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3284
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3291
3285
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-comfortable);
3292
3286
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-comfortable);
3293
3287
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-comfortable);
@@ -3347,17 +3341,13 @@
3347
3341
  }
3348
3342
  .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3349
3343
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-spacious) 0;
3350
- }
3351
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3352
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3353
3344
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-spacious);
3354
3345
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-spacious);
3355
3346
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-spacious);
3356
3347
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-spacious);
3357
3348
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-spacious);
3358
3349
  }
3359
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3360
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3350
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3361
3351
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-spacious);
3362
3352
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-spacious);
3363
3353
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-spacious);
@@ -3417,17 +3407,13 @@
3417
3407
  }
3418
3408
  .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3419
3409
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-dense) 0;
3420
- }
3421
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3422
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3423
3410
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-dense);
3424
3411
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-dense);
3425
3412
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-dense);
3426
3413
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-dense);
3427
3414
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-dense);
3428
3415
  }
3429
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3430
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3416
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3431
3417
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-dense);
3432
3418
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-dense);
3433
3419
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-dense);
@@ -3462,12 +3448,10 @@
3462
3448
  .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 {
3463
3449
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3464
3450
  }
3465
- .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 input,
3466
- .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 textarea {
3451
+ .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 {
3467
3452
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3468
3453
  }
3469
- .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 input::placeholder,
3470
- .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 textarea::placeholder {
3454
+ .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 {
3471
3455
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3472
3456
  }
3473
3457
  .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__suffix {
@@ -3493,12 +3477,10 @@
3493
3477
  .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 {
3494
3478
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3495
3479
  }
3496
- .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 input,
3497
- .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 textarea {
3480
+ .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 {
3498
3481
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3499
3482
  }
3500
- .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 input::placeholder,
3501
- .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 textarea::placeholder {
3483
+ .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 {
3502
3484
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3503
3485
  }
3504
3486
  .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__suffix {
@@ -3524,14 +3506,10 @@
3524
3506
  .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 {
3525
3507
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3526
3508
  }
3527
- .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 input,
3528
- .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 textarea, .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 input,
3529
- .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 textarea {
3509
+ .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 {
3530
3510
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3531
3511
  }
3532
- .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 input::placeholder,
3533
- .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 textarea::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 input::placeholder,
3534
- .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 textarea::placeholder {
3512
+ .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 {
3535
3513
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3536
3514
  }
3537
3515
  .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 {
@@ -3557,14 +3535,10 @@
3557
3535
  .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 {
3558
3536
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3559
3537
  }
3560
- .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 input,
3561
- .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 textarea, .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 input,
3562
- .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 textarea {
3538
+ .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 {
3563
3539
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3564
3540
  }
3565
- .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 input::placeholder,
3566
- .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 textarea::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 input::placeholder,
3567
- .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 textarea::placeholder {
3541
+ .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 {
3568
3542
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3569
3543
  }
3570
3544
  .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 {
@@ -3593,12 +3567,10 @@
3593
3567
  .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 {
3594
3568
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3595
3569
  }
3596
- .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 input,
3597
- .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 textarea {
3570
+ .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 {
3598
3571
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3599
3572
  }
3600
- .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 input::placeholder,
3601
- .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 textarea::placeholder {
3573
+ .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 {
3602
3574
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3603
3575
  }
3604
3576
  .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__suffix {
@@ -3624,12 +3596,10 @@
3624
3596
  .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 {
3625
3597
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3626
3598
  }
3627
- .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 input,
3628
- .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 textarea {
3599
+ .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 {
3629
3600
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3630
3601
  }
3631
- .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 input::placeholder,
3632
- .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 textarea::placeholder {
3602
+ .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 {
3633
3603
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3634
3604
  }
3635
3605
  .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__suffix {
@@ -3655,14 +3625,10 @@
3655
3625
  .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 {
3656
3626
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3657
3627
  }
3658
- .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 input,
3659
- .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 textarea, .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 input,
3660
- .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 textarea {
3628
+ .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 {
3661
3629
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3662
3630
  }
3663
- .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 input::placeholder,
3664
- .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 textarea::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 input::placeholder,
3665
- .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 textarea::placeholder {
3631
+ .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 {
3666
3632
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3667
3633
  }
3668
3634
  .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 {
@@ -3688,14 +3654,10 @@
3688
3654
  .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 {
3689
3655
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3690
3656
  }
3691
- .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 input,
3692
- .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 textarea, .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 input,
3693
- .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 textarea {
3657
+ .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 {
3694
3658
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3695
3659
  }
3696
- .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 input::placeholder,
3697
- .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 textarea::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 input::placeholder,
3698
- .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 textarea::placeholder {
3660
+ .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 {
3699
3661
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3700
3662
  }
3701
3663
  .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 {
@@ -3724,12 +3686,10 @@
3724
3686
  .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 {
3725
3687
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3726
3688
  }
3727
- .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 input,
3728
- .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 textarea {
3689
+ .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 {
3729
3690
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3730
3691
  }
3731
- .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 input::placeholder,
3732
- .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 textarea::placeholder {
3692
+ .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 {
3733
3693
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3734
3694
  }
3735
3695
  .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__suffix {
@@ -3755,12 +3715,10 @@
3755
3715
  .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 {
3756
3716
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3757
3717
  }
3758
- .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 input,
3759
- .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 textarea {
3718
+ .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 {
3760
3719
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3761
3720
  }
3762
- .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 input::placeholder,
3763
- .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 textarea::placeholder {
3721
+ .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 {
3764
3722
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3765
3723
  }
3766
3724
  .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__suffix {
@@ -3786,14 +3744,10 @@
3786
3744
  .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 {
3787
3745
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3788
3746
  }
3789
- .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 input,
3790
- .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 textarea, .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 input,
3791
- .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 textarea {
3747
+ .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 {
3792
3748
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3793
3749
  }
3794
- .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 input::placeholder,
3795
- .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 textarea::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 input::placeholder,
3796
- .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 textarea::placeholder {
3750
+ .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 {
3797
3751
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3798
3752
  }
3799
3753
  .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 {
@@ -3819,14 +3773,10 @@
3819
3773
  .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 {
3820
3774
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3821
3775
  }
3822
- .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 input,
3823
- .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 textarea, .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 input,
3824
- .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 textarea {
3776
+ .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 {
3825
3777
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3826
3778
  }
3827
- .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 input::placeholder,
3828
- .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 textarea::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 input::placeholder,
3829
- .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 textarea::placeholder {
3779
+ .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 {
3830
3780
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3831
3781
  }
3832
3782
  .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 {
@@ -3855,12 +3805,10 @@
3855
3805
  .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 {
3856
3806
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-disabled);
3857
3807
  }
3858
- .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 input,
3859
- .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 textarea {
3808
+ .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 {
3860
3809
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-disabled);
3861
3810
  }
3862
- .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 input::placeholder,
3863
- .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 textarea::placeholder {
3811
+ .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 {
3864
3812
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-disabled);
3865
3813
  }
3866
3814
  .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__suffix {
@@ -3889,12 +3837,10 @@
3889
3837
  .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 {
3890
3838
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
3891
3839
  }
3892
- .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 input,
3893
- .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 textarea {
3840
+ .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 {
3894
3841
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
3895
3842
  }
3896
- .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 input::placeholder,
3897
- .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 textarea::placeholder {
3843
+ .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 {
3898
3844
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
3899
3845
  }
3900
3846
  .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__suffix {
@@ -3920,12 +3866,10 @@
3920
3866
  .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 {
3921
3867
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
3922
3868
  }
3923
- .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 input,
3924
- .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 textarea {
3869
+ .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 {
3925
3870
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
3926
3871
  }
3927
- .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 input::placeholder,
3928
- .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 textarea::placeholder {
3872
+ .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 {
3929
3873
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
3930
3874
  }
3931
3875
  .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__suffix {
@@ -3951,14 +3895,10 @@
3951
3895
  .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 {
3952
3896
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
3953
3897
  }
3954
- .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 input,
3955
- .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 textarea, .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 input,
3956
- .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 textarea {
3898
+ .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 {
3957
3899
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
3958
3900
  }
3959
- .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 input::placeholder,
3960
- .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 textarea::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 input::placeholder,
3961
- .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 textarea::placeholder {
3901
+ .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 {
3962
3902
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
3963
3903
  }
3964
3904
  .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 {
@@ -3984,14 +3924,10 @@
3984
3924
  .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 {
3985
3925
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
3986
3926
  }
3987
- .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 input,
3988
- .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 textarea, .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 input,
3989
- .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 textarea {
3927
+ .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 {
3990
3928
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
3991
3929
  }
3992
- .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 input::placeholder,
3993
- .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 textarea::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 input::placeholder,
3994
- .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 textarea::placeholder {
3930
+ .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 {
3995
3931
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
3996
3932
  }
3997
3933
  .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 {
@@ -4020,12 +3956,10 @@
4020
3956
  .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 {
4021
3957
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4022
3958
  }
4023
- .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 input,
4024
- .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 textarea {
3959
+ .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 {
4025
3960
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4026
3961
  }
4027
- .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 input::placeholder,
4028
- .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 textarea::placeholder {
3962
+ .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 {
4029
3963
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
4030
3964
  }
4031
3965
  .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__suffix {
@@ -4051,12 +3985,10 @@
4051
3985
  .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 {
4052
3986
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4053
3987
  }
4054
- .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 input,
4055
- .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 textarea {
3988
+ .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 {
4056
3989
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4057
3990
  }
4058
- .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 input::placeholder,
4059
- .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 textarea::placeholder {
3991
+ .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 {
4060
3992
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
4061
3993
  }
4062
3994
  .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__suffix {
@@ -4082,14 +4014,10 @@
4082
4014
  .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 {
4083
4015
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4084
4016
  }
4085
- .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 input,
4086
- .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 textarea, .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 input,
4087
- .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 textarea {
4017
+ .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 {
4088
4018
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4089
4019
  }
4090
- .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 input::placeholder,
4091
- .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 textarea::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 input::placeholder,
4092
- .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 textarea::placeholder {
4020
+ .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 {
4093
4021
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4094
4022
  }
4095
4023
  .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 {
@@ -4115,14 +4043,10 @@
4115
4043
  .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 {
4116
4044
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4117
4045
  }
4118
- .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 input,
4119
- .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 textarea, .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 input,
4120
- .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 textarea {
4046
+ .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 {
4121
4047
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4122
4048
  }
4123
- .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 input::placeholder,
4124
- .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 textarea::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 input::placeholder,
4125
- .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 textarea::placeholder {
4049
+ .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 {
4126
4050
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4127
4051
  }
4128
4052
  .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 {
@@ -4151,12 +4075,10 @@
4151
4075
  .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 {
4152
4076
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4153
4077
  }
4154
- .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 input,
4155
- .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 textarea {
4078
+ .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 {
4156
4079
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4157
4080
  }
4158
- .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 input::placeholder,
4159
- .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 textarea::placeholder {
4081
+ .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 {
4160
4082
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
4161
4083
  }
4162
4084
  .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__suffix {
@@ -4182,12 +4104,10 @@
4182
4104
  .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 {
4183
4105
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4184
4106
  }
4185
- .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 input,
4186
- .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 textarea {
4107
+ .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 {
4187
4108
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4188
4109
  }
4189
- .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 input::placeholder,
4190
- .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 textarea::placeholder {
4110
+ .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 {
4191
4111
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
4192
4112
  }
4193
4113
  .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__suffix {
@@ -4213,14 +4133,10 @@
4213
4133
  .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 {
4214
4134
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4215
4135
  }
4216
- .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 input,
4217
- .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 textarea, .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 input,
4218
- .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 textarea {
4136
+ .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 {
4219
4137
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4220
4138
  }
4221
- .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 input::placeholder,
4222
- .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 textarea::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 input::placeholder,
4223
- .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 textarea::placeholder {
4139
+ .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 {
4224
4140
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4225
4141
  }
4226
4142
  .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 {
@@ -4246,14 +4162,10 @@
4246
4162
  .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 {
4247
4163
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4248
4164
  }
4249
- .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 input,
4250
- .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 textarea, .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 input,
4251
- .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 textarea {
4165
+ .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 {
4252
4166
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4253
4167
  }
4254
- .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 input::placeholder,
4255
- .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 textarea::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 input::placeholder,
4256
- .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 textarea::placeholder {
4168
+ .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 {
4257
4169
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4258
4170
  }
4259
4171
  .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 {
@@ -4282,12 +4194,10 @@
4282
4194
  .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 {
4283
4195
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-disabled);
4284
4196
  }
4285
- .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 input,
4286
- .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 textarea {
4197
+ .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 {
4287
4198
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-disabled);
4288
4199
  }
4289
- .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 input::placeholder,
4290
- .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 textarea::placeholder {
4200
+ .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 {
4291
4201
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-disabled);
4292
4202
  }
4293
4203
  .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__suffix {
@@ -5142,6 +5052,280 @@
5142
5052
  color: var(--ids-comp-icon-button-standard-color-fg-surface-disabled);
5143
5053
  }
5144
5054
 
5055
+ .ids-option {
5056
+ display: flex;
5057
+ align-items: center;
5058
+ align-self: stretch;
5059
+ user-select: none;
5060
+ }
5061
+ .ids-option > .ids-option__text {
5062
+ overflow: hidden;
5063
+ text-overflow: ellipsis;
5064
+ font-style: normal;
5065
+ }
5066
+ .ids-option:not(.ids-option-disabled) {
5067
+ cursor: pointer;
5068
+ }
5069
+ .ids-option.ids-option-disabled {
5070
+ cursor: not-allowed;
5071
+ }
5072
+ .ids-option:not(.ids-option-multiselect) {
5073
+ justify-content: space-between;
5074
+ }
5075
+ .ids-option.ids-option-active {
5076
+ outline-style: solid;
5077
+ }
5078
+ .ids-option .ids-option-compact {
5079
+ height: var(--ids-comp-forms-option-item-size-min-height-compact);
5080
+ padding: var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);
5081
+ gap: var(--ids-comp-forms-option-container-size-gap-compact);
5082
+ border-radius: var(--ids-comp-forms-option-item-size-border-radius-compact);
5083
+ }
5084
+ .ids-option .ids-option-compact > .ids-option__text {
5085
+ font-family: var(--ids-comp-forms-option-item-typography-font-family-compact);
5086
+ font-size: var(--ids-comp-forms-option-item-typography-font-size-compact);
5087
+ font-weight: var(--ids-comp-forms-option-item-typography-font-weight-compact);
5088
+ line-height: var(--ids-comp-forms-option-item-typography-line-height-compact);
5089
+ letter-spacing: var(--ids-comp-forms-option-item-typography-letter-spacing-compact);
5090
+ }
5091
+ .ids-option .ids-option-compact > .ids-icon {
5092
+ height: var(--ids-comp-forms-option-item-icon-size-height-compact);
5093
+ width: var(--ids-comp-forms-option-item-icon-size-width-compact);
5094
+ }
5095
+ .ids-option .ids-option-compact.ids-option-active {
5096
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
5097
+ }
5098
+ .ids-option .ids-option-comfortable {
5099
+ height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
5100
+ padding: var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);
5101
+ gap: var(--ids-comp-forms-option-container-size-gap-comfortable);
5102
+ border-radius: var(--ids-comp-forms-option-item-size-border-radius-comfortable);
5103
+ }
5104
+ .ids-option .ids-option-comfortable > .ids-option__text {
5105
+ font-family: var(--ids-comp-forms-option-item-typography-font-family-comfortable);
5106
+ font-size: var(--ids-comp-forms-option-item-typography-font-size-comfortable);
5107
+ font-weight: var(--ids-comp-forms-option-item-typography-font-weight-comfortable);
5108
+ line-height: var(--ids-comp-forms-option-item-typography-line-height-comfortable);
5109
+ letter-spacing: var(--ids-comp-forms-option-item-typography-letter-spacing-comfortable);
5110
+ }
5111
+ .ids-option .ids-option-comfortable > .ids-icon {
5112
+ height: var(--ids-comp-forms-option-item-icon-size-height-comfortable);
5113
+ width: var(--ids-comp-forms-option-item-icon-size-width-comfortable);
5114
+ }
5115
+ .ids-option .ids-option-comfortable.ids-option-active {
5116
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
5117
+ }
5118
+ .ids-option .ids-option-spacious {
5119
+ height: var(--ids-comp-forms-option-item-size-min-height-spacious);
5120
+ padding: var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);
5121
+ gap: var(--ids-comp-forms-option-container-size-gap-spacious);
5122
+ border-radius: var(--ids-comp-forms-option-item-size-border-radius-spacious);
5123
+ }
5124
+ .ids-option .ids-option-spacious > .ids-option__text {
5125
+ font-family: var(--ids-comp-forms-option-item-typography-font-family-spacious);
5126
+ font-size: var(--ids-comp-forms-option-item-typography-font-size-spacious);
5127
+ font-weight: var(--ids-comp-forms-option-item-typography-font-weight-spacious);
5128
+ line-height: var(--ids-comp-forms-option-item-typography-line-height-spacious);
5129
+ letter-spacing: var(--ids-comp-forms-option-item-typography-letter-spacing-spacious);
5130
+ }
5131
+ .ids-option .ids-option-spacious > .ids-icon {
5132
+ height: var(--ids-comp-forms-option-item-icon-size-height-spacious);
5133
+ width: var(--ids-comp-forms-option-item-icon-size-width-spacious);
5134
+ }
5135
+ .ids-option .ids-option-spacious.ids-option-active {
5136
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
5137
+ }
5138
+ .ids-option .ids-option-dense {
5139
+ height: var(--ids-comp-forms-option-item-size-min-height-dense);
5140
+ padding: var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);
5141
+ gap: var(--ids-comp-forms-option-container-size-gap-dense);
5142
+ border-radius: var(--ids-comp-forms-option-item-size-border-radius-dense);
5143
+ }
5144
+ .ids-option .ids-option-dense > .ids-option__text {
5145
+ font-family: var(--ids-comp-forms-option-item-typography-font-family-dense);
5146
+ font-size: var(--ids-comp-forms-option-item-typography-font-size-dense);
5147
+ font-weight: var(--ids-comp-forms-option-item-typography-font-weight-dense);
5148
+ line-height: var(--ids-comp-forms-option-item-typography-line-height-dense);
5149
+ letter-spacing: var(--ids-comp-forms-option-item-typography-letter-spacing-dense);
5150
+ }
5151
+ .ids-option .ids-option-dense > .ids-icon {
5152
+ height: var(--ids-comp-forms-option-item-icon-size-height-dense);
5153
+ width: var(--ids-comp-forms-option-item-icon-size-width-dense);
5154
+ }
5155
+ .ids-option .ids-option-dense.ids-option-active {
5156
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense);
5157
+ }
5158
+ .ids-option.ids-option-surface:not(.ids-option-disabled) {
5159
+ background: var(--ids-comp-forms-option-color-bg-surface-default);
5160
+ }
5161
+ .ids-option.ids-option-surface:not(.ids-option-disabled) > .ids-option__text {
5162
+ color: var(--ids-comp-forms-option-color-fg-text-surface-default);
5163
+ }
5164
+ .ids-option.ids-option-surface:not(.ids-option-disabled) > .ids-icon {
5165
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-default);
5166
+ }
5167
+ .ids-option.ids-option-surface:not(.ids-option-disabled):hover {
5168
+ background: var(--ids-comp-forms-option-color-bg-surface-hovered);
5169
+ }
5170
+ .ids-option.ids-option-surface:not(.ids-option-disabled):hover > .ids-option__text {
5171
+ color: var(--ids-comp-forms-option-color-fg-text-surface-hovered);
5172
+ }
5173
+ .ids-option.ids-option-surface:not(.ids-option-disabled):hover > .ids-icon {
5174
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-hovered);
5175
+ }
5176
+ .ids-option.ids-option-surface:not(.ids-option-disabled):active {
5177
+ background: var(--ids-comp-forms-option-color-bg-surface-pressed);
5178
+ }
5179
+ .ids-option.ids-option-surface:not(.ids-option-disabled):active > .ids-option__text {
5180
+ color: var(--ids-comp-forms-option-color-fg-text-surface-pressed);
5181
+ }
5182
+ .ids-option.ids-option-surface:not(.ids-option-disabled):active > .ids-icon {
5183
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-pressed);
5184
+ }
5185
+ .ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active {
5186
+ background: var(--ids-comp-forms-option-color-bg-surface-active);
5187
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
5188
+ }
5189
+ .ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active > .ids-option__text {
5190
+ color: var(--ids-comp-forms-option-color-fg-text-surface-active);
5191
+ }
5192
+ .ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active > .ids-icon {
5193
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-active);
5194
+ }
5195
+ .ids-option.ids-option-surface.ids-option-disabled {
5196
+ background: var(--ids-comp-forms-option-color-bg-surface-disabled);
5197
+ }
5198
+ .ids-option.ids-option-surface.ids-option-disabled > .ids-option__text {
5199
+ color: var(--ids-comp-forms-option-color-fg-text-surface-disabled);
5200
+ }
5201
+ .ids-option.ids-option-surface.ids-option-disabled > .ids-icon {
5202
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-disabled);
5203
+ }
5204
+ .ids-option.ids-option-light:not(.ids-option-disabled) {
5205
+ background: var(--ids-comp-forms-option-color-bg-light-default);
5206
+ }
5207
+ .ids-option.ids-option-light:not(.ids-option-disabled) > .ids-option__text {
5208
+ color: var(--ids-comp-forms-option-color-fg-text-light-default);
5209
+ }
5210
+ .ids-option.ids-option-light:not(.ids-option-disabled) > .ids-icon {
5211
+ color: var(--ids-comp-forms-option-color-fg-icon-light-default);
5212
+ }
5213
+ .ids-option.ids-option-light:not(.ids-option-disabled):hover {
5214
+ background: var(--ids-comp-forms-option-color-bg-light-hovered);
5215
+ }
5216
+ .ids-option.ids-option-light:not(.ids-option-disabled):hover > .ids-option__text {
5217
+ color: var(--ids-comp-forms-option-color-fg-text-light-hovered);
5218
+ }
5219
+ .ids-option.ids-option-light:not(.ids-option-disabled):hover > .ids-icon {
5220
+ color: var(--ids-comp-forms-option-color-fg-icon-light-hovered);
5221
+ }
5222
+ .ids-option.ids-option-light:not(.ids-option-disabled):active {
5223
+ background: var(--ids-comp-forms-option-color-bg-light-pressed);
5224
+ }
5225
+ .ids-option.ids-option-light:not(.ids-option-disabled):active > .ids-option__text {
5226
+ color: var(--ids-comp-forms-option-color-fg-text-light-pressed);
5227
+ }
5228
+ .ids-option.ids-option-light:not(.ids-option-disabled):active > .ids-icon {
5229
+ color: var(--ids-comp-forms-option-color-fg-icon-light-pressed);
5230
+ }
5231
+ .ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active {
5232
+ background: var(--ids-comp-forms-option-color-bg-light-active);
5233
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
5234
+ }
5235
+ .ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active > .ids-option__text {
5236
+ color: var(--ids-comp-forms-option-color-fg-text-light-active);
5237
+ }
5238
+ .ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active > .ids-icon {
5239
+ color: var(--ids-comp-forms-option-color-fg-icon-light-active);
5240
+ }
5241
+ .ids-option.ids-option-light.ids-option-disabled {
5242
+ background: var(--ids-comp-forms-option-color-bg-light-disabled);
5243
+ }
5244
+ .ids-option.ids-option-light.ids-option-disabled > .ids-option__text {
5245
+ color: var(--ids-comp-forms-option-color-fg-text-light-disabled);
5246
+ }
5247
+ .ids-option.ids-option-light.ids-option-disabled > .ids-icon {
5248
+ color: var(--ids-comp-forms-option-color-fg-icon-light-disabled);
5249
+ }
5250
+
5251
+ .ids-option-group {
5252
+ width: 100%;
5253
+ }
5254
+ .ids-option-group > .ids-option-group__label {
5255
+ display: flex;
5256
+ flex-direction: column;
5257
+ align-items: flex-start;
5258
+ width: 100%;
5259
+ }
5260
+ .ids-option-group > .ids-option-group__label > .ids-option-group__text {
5261
+ display: flex;
5262
+ align-items: center;
5263
+ align-self: stretch;
5264
+ font-style: normal;
5265
+ }
5266
+ .ids-option-group.ids-option-group-compact > .ids-option-group__label {
5267
+ gap: var(--ids-comp-forms-option-container-size-gap-compact);
5268
+ }
5269
+ .ids-option-group.ids-option-group-compact > .ids-option-group__label > .ids-option-group__text {
5270
+ padding: var(--ids-comp-forms-option-group-title-size-padding-y-compact) var(--ids-comp-forms-option-group-title-size-padding-x-compact);
5271
+ font-family: var(--ids-comp-forms-option-group-title-typography-font-family-compact);
5272
+ font-size: var(--ids-comp-forms-option-group-title-typography-font-size-compact);
5273
+ font-weight: var(--ids-comp-forms-option-group-title-typography-font-weight-compact);
5274
+ line-height: var(--ids-comp-forms-option-group-title-typography-line-height-compact);
5275
+ letter-spacing: var(--ids-comp-forms-option-group-title-typography-letter-spacing-compact);
5276
+ }
5277
+ .ids-option-group.ids-option-group-compact > .ids-option {
5278
+ padding: var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-right-compact) var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-left-compact);
5279
+ }
5280
+ .ids-option-group.ids-option-group-comfortable > .ids-option-group__label {
5281
+ gap: var(--ids-comp-forms-option-container-size-gap-comfortable);
5282
+ }
5283
+ .ids-option-group.ids-option-group-comfortable > .ids-option-group__label > .ids-option-group__text {
5284
+ padding: var(--ids-comp-forms-option-group-title-size-padding-y-comfortable) var(--ids-comp-forms-option-group-title-size-padding-x-comfortable);
5285
+ font-family: var(--ids-comp-forms-option-group-title-typography-font-family-comfortable);
5286
+ font-size: var(--ids-comp-forms-option-group-title-typography-font-size-comfortable);
5287
+ font-weight: var(--ids-comp-forms-option-group-title-typography-font-weight-comfortable);
5288
+ line-height: var(--ids-comp-forms-option-group-title-typography-line-height-comfortable);
5289
+ letter-spacing: var(--ids-comp-forms-option-group-title-typography-letter-spacing-comfortable);
5290
+ }
5291
+ .ids-option-group.ids-option-group-comfortable > .ids-option {
5292
+ padding: var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-right-comfortable) var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-left-comfortable);
5293
+ }
5294
+ .ids-option-group.ids-option-group-spacious > .ids-option-group__label {
5295
+ gap: var(--ids-comp-forms-option-container-size-gap-spacious);
5296
+ }
5297
+ .ids-option-group.ids-option-group-spacious > .ids-option-group__label > .ids-option-group__text {
5298
+ padding: var(--ids-comp-forms-option-group-title-size-padding-y-spacious) var(--ids-comp-forms-option-group-title-size-padding-x-spacious);
5299
+ font-family: var(--ids-comp-forms-option-group-title-typography-font-family-spacious);
5300
+ font-size: var(--ids-comp-forms-option-group-title-typography-font-size-spacious);
5301
+ font-weight: var(--ids-comp-forms-option-group-title-typography-font-weight-spacious);
5302
+ line-height: var(--ids-comp-forms-option-group-title-typography-line-height-spacious);
5303
+ letter-spacing: var(--ids-comp-forms-option-group-title-typography-letter-spacing-spacious);
5304
+ }
5305
+ .ids-option-group.ids-option-group-spacious > .ids-option {
5306
+ padding: var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-right-spacious) var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-left-spacious);
5307
+ }
5308
+ .ids-option-group.ids-option-group-dense > .ids-option-group__label {
5309
+ gap: var(--ids-comp-forms-option-container-size-gap-dense);
5310
+ }
5311
+ .ids-option-group.ids-option-group-dense > .ids-option-group__label > .ids-option-group__text {
5312
+ padding: var(--ids-comp-forms-option-group-title-size-padding-y-dense) var(--ids-comp-forms-option-group-title-size-padding-x-dense);
5313
+ font-family: var(--ids-comp-forms-option-group-title-typography-font-family-dense);
5314
+ font-size: var(--ids-comp-forms-option-group-title-typography-font-size-dense);
5315
+ font-weight: var(--ids-comp-forms-option-group-title-typography-font-weight-dense);
5316
+ line-height: var(--ids-comp-forms-option-group-title-typography-line-height-dense);
5317
+ letter-spacing: var(--ids-comp-forms-option-group-title-typography-letter-spacing-dense);
5318
+ }
5319
+ .ids-option-group.ids-option-group-dense > .ids-option {
5320
+ padding: var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-right-dense) var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-left-dense);
5321
+ }
5322
+ .ids-option-group .ids-option-groupsurface > .ids-option-group__label > .ids-option-group__text {
5323
+ color: var(--ids-comp-forms-option-color-group-title-color-fg-text-default);
5324
+ }
5325
+ .ids-option-group .ids-option-grouplight > .ids-option-group__label > .ids-option-group__text {
5326
+ color: var(--ids-comp-forms-option-color-group-title-color-fg-text-default);
5327
+ }
5328
+
5145
5329
  .ids-paginator {
5146
5330
  display: inline-flex;
5147
5331
  }
@@ -7357,6 +7541,138 @@
7357
7541
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-disabled);
7358
7542
  }
7359
7543
 
7544
+ .ids-select {
7545
+ width: 100%;
7546
+ }
7547
+ .ids-select > .ids-select__trigger {
7548
+ display: flex;
7549
+ justify-content: space-between;
7550
+ align-items: center;
7551
+ }
7552
+ .ids-select > .ids-select__trigger > .ids-select__value {
7553
+ flex-grow: 1;
7554
+ overflow: hidden;
7555
+ }
7556
+ .ids-select > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7557
+ user-select: none;
7558
+ }
7559
+ .ids-select > .ids-select__trigger > .ids-select__value > .ids-select__value-text {
7560
+ text-overflow: ellipsis;
7561
+ overflow: hidden;
7562
+ white-space: nowrap;
7563
+ display: block;
7564
+ }
7565
+ .ids-select > .ids-select__trigger > .ids-select__arrow {
7566
+ flex-shrink: 0;
7567
+ }
7568
+ .ids-select.ids-select-compact > .ids-select__trigger {
7569
+ gap: var(--ids-comp-forms-select-size-gap-compact);
7570
+ }
7571
+ .ids-select.ids-select-compact > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7572
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact);
7573
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-compact);
7574
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-compact);
7575
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-compact);
7576
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-compact);
7577
+ }
7578
+ .ids-select.ids-select-comfortable > .ids-select__trigger {
7579
+ gap: var(--ids-comp-forms-select-size-gap-comfortable);
7580
+ }
7581
+ .ids-select.ids-select-comfortable > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7582
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-comfortable);
7583
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-comfortable);
7584
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-comfortable);
7585
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-comfortable);
7586
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-comfortable);
7587
+ }
7588
+ .ids-select.ids-select-spacious > .ids-select__trigger {
7589
+ gap: var(--ids-comp-forms-select-size-gap-spacious);
7590
+ }
7591
+ .ids-select.ids-select-spacious > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7592
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-spacious);
7593
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-spacious);
7594
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-spacious);
7595
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-spacious);
7596
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-spacious);
7597
+ }
7598
+ .ids-select.ids-select-dense > .ids-select__trigger {
7599
+ gap: var(--ids-comp-forms-select-size-gap-dense);
7600
+ }
7601
+ .ids-select.ids-select-dense > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7602
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-dense);
7603
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-dense);
7604
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-dense);
7605
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-dense);
7606
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-dense);
7607
+ }
7608
+
7609
+ .ids-select-panel {
7610
+ display: flex;
7611
+ flex-direction: column;
7612
+ align-items: flex-start;
7613
+ flex-shrink: 0;
7614
+ width: 100%;
7615
+ box-sizing: border-box;
7616
+ overflow-y: auto;
7617
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
7618
+ }
7619
+ .ids-select-panel.ids-select-panel-compact {
7620
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-compact) var(--ids-comp-forms-select-panel-size-padding-x-compact);
7621
+ gap: var(--ids-comp-forms-select-panel-size-gap-compact);
7622
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-compact);
7623
+ }
7624
+ .ids-select-panel.ids-select-panel-comfortable {
7625
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-comfortable) var(--ids-comp-forms-select-panel-size-padding-x-comfortable);
7626
+ gap: var(--ids-comp-forms-select-panel-size-gap-comfortable);
7627
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-comfortable);
7628
+ }
7629
+ .ids-select-panel.ids-select-panel-spacious {
7630
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-spacious) var(--ids-comp-forms-select-panel-size-padding-x-spacious);
7631
+ gap: var(--ids-comp-forms-select-panel-size-gap-spacious);
7632
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-spacious);
7633
+ }
7634
+ .ids-select-panel.ids-select-panel-dense {
7635
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-dense) var(--ids-comp-forms-select-panel-size-padding-x-dense);
7636
+ gap: var(--ids-comp-forms-select-panel-size-gap-dense);
7637
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-dense);
7638
+ }
7639
+ .ids-select-panel.ids-select-panel-surface {
7640
+ background: var(--ids-comp-forms-select-panel-color-bg-surface-default);
7641
+ }
7642
+ .ids-select-panel.ids-select-panel-light {
7643
+ background: var(--ids-comp-forms-select-panel-color-bg-light-default);
7644
+ }
7645
+
7646
+ .ids-form-field > .ids-form-field__field-wrapper:has(.ids-select) {
7647
+ cursor: pointer;
7648
+ }
7649
+
7650
+ .ids-form-field > .ids-form-field__field-wrapper .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7651
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
7652
+ }
7653
+ .ids-form-field > .ids-form-field__field-wrapper:hover .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7654
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
7655
+ }
7656
+ .ids-form-field > .ids-form-field__field-wrapper:focus .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder, .ids-form-field > .ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7657
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
7658
+ }
7659
+ .ids-form-field > .ids-form-field__field-wrapper:active .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7660
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
7661
+ }
7662
+
7663
+ .ids-form-field > .ids-form-field__field-wrapper .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7664
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
7665
+ }
7666
+ .ids-form-field > .ids-form-field__field-wrapper:hover .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7667
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
7668
+ }
7669
+ .ids-form-field > .ids-form-field__field-wrapper:focus .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder, .ids-form-field > .ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7670
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
7671
+ }
7672
+ .ids-form-field > .ids-form-field__field-wrapper:active .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7673
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
7674
+ }
7675
+
7360
7676
  .ids-snackbar-group {
7361
7677
  display: flex;
7362
7678
  }
@@ -7722,11 +8038,8 @@
7722
8038
  top: auto;
7723
8039
  bottom: auto;
7724
8040
  }
7725
- .ids-switch > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
7726
- position: absolute;
7727
- }
7728
8041
  .ids-switch > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7729
- position: absolute;
8042
+ position: relative;
7730
8043
  display: flex;
7731
8044
  justify-content: center;
7732
8045
  align-items: center;
@@ -7786,10 +8099,10 @@
7786
8099
  letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-compact);
7787
8100
  }
7788
8101
  .ids-switch.ids-switch-compact:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7789
- left: var(--ids-comp-switch-track-size-padding-x-compact);
8102
+ left: 0;
7790
8103
  }
7791
8104
  .ids-switch.ids-switch-compact.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7792
- left: calc(100% - var(--ids-comp-switch-track-size-padding-x-compact) - var(--ids-comp-switch-handle-size-width-compact));
8105
+ left: calc(var(--ids-comp-switch-track-size-width-compact) - var(--ids-comp-switch-handle-size-width-compact));
7793
8106
  }
7794
8107
  .ids-switch.ids-switch-comfortable {
7795
8108
  gap: var(--ids-comp-switch-container-size-gap-comfortable);
@@ -7839,10 +8152,10 @@
7839
8152
  letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-comfortable);
7840
8153
  }
7841
8154
  .ids-switch.ids-switch-comfortable:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7842
- left: var(--ids-comp-switch-track-size-padding-x-comfortable);
8155
+ left: 0;
7843
8156
  }
7844
8157
  .ids-switch.ids-switch-comfortable.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7845
- left: calc(100% - var(--ids-comp-switch-track-size-padding-x-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable));
8158
+ left: calc(var(--ids-comp-switch-track-size-width-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable));
7846
8159
  }
7847
8160
  .ids-switch.ids-switch-spacious {
7848
8161
  gap: var(--ids-comp-switch-container-size-gap-spacious);
@@ -7892,10 +8205,10 @@
7892
8205
  letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-spacious);
7893
8206
  }
7894
8207
  .ids-switch.ids-switch-spacious:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7895
- left: var(--ids-comp-switch-track-size-padding-x-spacious);
8208
+ left: 0;
7896
8209
  }
7897
8210
  .ids-switch.ids-switch-spacious.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7898
- left: calc(100% - var(--ids-comp-switch-track-size-padding-x-spacious) - var(--ids-comp-switch-handle-size-width-spacious));
8211
+ left: calc(var(--ids-comp-switch-track-size-width-spacious) - var(--ids-comp-switch-handle-size-width-spacious));
7899
8212
  }
7900
8213
  .ids-switch.ids-switch-dense {
7901
8214
  gap: var(--ids-comp-switch-container-size-gap-dense);
@@ -7945,10 +8258,10 @@
7945
8258
  letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-dense);
7946
8259
  }
7947
8260
  .ids-switch.ids-switch-dense:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7948
- left: var(--ids-comp-switch-track-size-padding-x-dense);
8261
+ left: 0;
7949
8262
  }
7950
8263
  .ids-switch.ids-switch-dense.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
7951
- left: calc(100% - var(--ids-comp-switch-track-size-padding-x-dense) - var(--ids-comp-switch-handle-size-width-dense));
8264
+ left: calc(var(--ids-comp-switch-track-size-width-dense) - var(--ids-comp-switch-handle-size-width-dense));
7952
8265
  }
7953
8266
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track {
7954
8267
  background-color: var(--ids-comp-switch-track-off-color-bg-surface-default);