@i-cell/ids-styles 0.0.29 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components.css +78 -0
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +52 -0
  4. package/dist/form-elements/form-field/form-field.css +78 -0
  5. package/dist/form-elements/form-field/form-field.min.css +1 -1
  6. package/dist/form-elements/form-field/form-field.plugin.js +52 -0
  7. package/package.json +2 -2
package/dist/components.css CHANGED
@@ -5287,6 +5287,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5287
5287
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5288
5288
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
5289
5289
  }
5290
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5291
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-default);
5292
+ }
5290
5293
  .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 {
5291
5294
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
5292
5295
  }
@@ -5313,6 +5316,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5313
5316
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5314
5317
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
5315
5318
  }
5319
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5320
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-hovered);
5321
+ }
5316
5322
  .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 {
5317
5323
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
5318
5324
  }
@@ -5340,6 +5346,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5340
5346
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5341
5347
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
5342
5348
  }
5349
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5350
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-focused);
5351
+ }
5343
5352
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5344
5353
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
5345
5354
  }
@@ -5366,6 +5375,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5366
5375
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5367
5376
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
5368
5377
  }
5378
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5379
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-pressed);
5380
+ }
5369
5381
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5370
5382
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
5371
5383
  }
@@ -5395,6 +5407,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5395
5407
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5396
5408
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
5397
5409
  }
5410
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5411
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-default);
5412
+ }
5398
5413
  .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 {
5399
5414
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
5400
5415
  }
@@ -5421,6 +5436,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5421
5436
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5422
5437
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
5423
5438
  }
5439
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5440
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-hovered);
5441
+ }
5424
5442
  .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 {
5425
5443
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
5426
5444
  }
@@ -5448,6 +5466,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5448
5466
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5449
5467
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
5450
5468
  }
5469
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5470
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-focused);
5471
+ }
5451
5472
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5452
5473
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
5453
5474
  }
@@ -5474,6 +5495,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5474
5495
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5475
5496
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
5476
5497
  }
5498
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5499
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-pressed);
5500
+ }
5477
5501
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5478
5502
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
5479
5503
  }
@@ -5503,6 +5527,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5503
5527
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5504
5528
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
5505
5529
  }
5530
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5531
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-default);
5532
+ }
5506
5533
  .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 {
5507
5534
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
5508
5535
  }
@@ -5529,6 +5556,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5529
5556
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5530
5557
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
5531
5558
  }
5559
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5560
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-hovered);
5561
+ }
5532
5562
  .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 {
5533
5563
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
5534
5564
  }
@@ -5556,6 +5586,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5556
5586
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5557
5587
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
5558
5588
  }
5589
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5590
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-focused);
5591
+ }
5559
5592
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5560
5593
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
5561
5594
  }
@@ -5582,6 +5615,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5582
5615
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5583
5616
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
5584
5617
  }
5618
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5619
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-pressed);
5620
+ }
5585
5621
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5586
5622
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
5587
5623
  }
@@ -5611,6 +5647,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5611
5647
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5612
5648
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-disabled);
5613
5649
  }
5650
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5651
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-disabled);
5652
+ }
5614
5653
  .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 {
5615
5654
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-disabled);
5616
5655
  }
@@ -5640,6 +5679,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5640
5679
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5641
5680
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
5642
5681
  }
5682
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5683
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-default);
5684
+ }
5643
5685
  .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 {
5644
5686
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
5645
5687
  }
@@ -5666,6 +5708,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5666
5708
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5667
5709
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
5668
5710
  }
5711
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5712
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-hovered);
5713
+ }
5669
5714
  .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 {
5670
5715
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
5671
5716
  }
@@ -5693,6 +5738,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5693
5738
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5694
5739
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
5695
5740
  }
5741
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5742
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-focused);
5743
+ }
5696
5744
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5697
5745
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
5698
5746
  }
@@ -5719,6 +5767,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5719
5767
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5720
5768
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
5721
5769
  }
5770
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5771
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-pressed);
5772
+ }
5722
5773
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5723
5774
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
5724
5775
  }
@@ -5748,6 +5799,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5748
5799
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5749
5800
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
5750
5801
  }
5802
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5803
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-default);
5804
+ }
5751
5805
  .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 {
5752
5806
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
5753
5807
  }
@@ -5774,6 +5828,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5774
5828
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5775
5829
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
5776
5830
  }
5831
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5832
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-hovered);
5833
+ }
5777
5834
  .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 {
5778
5835
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
5779
5836
  }
@@ -5801,6 +5858,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5801
5858
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5802
5859
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
5803
5860
  }
5861
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5862
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-focused);
5863
+ }
5804
5864
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5805
5865
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
5806
5866
  }
@@ -5827,6 +5887,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5827
5887
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5828
5888
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
5829
5889
  }
5890
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5891
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-pressed);
5892
+ }
5830
5893
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5831
5894
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
5832
5895
  }
@@ -5856,6 +5919,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5856
5919
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5857
5920
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
5858
5921
  }
5922
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5923
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-default);
5924
+ }
5859
5925
  .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 {
5860
5926
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
5861
5927
  }
@@ -5882,6 +5948,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5882
5948
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5883
5949
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
5884
5950
  }
5951
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5952
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-hovered);
5953
+ }
5885
5954
  .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 {
5886
5955
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
5887
5956
  }
@@ -5909,6 +5978,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5909
5978
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5910
5979
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
5911
5980
  }
5981
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
5982
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-focused);
5983
+ }
5912
5984
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5913
5985
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
5914
5986
  }
@@ -5935,6 +6007,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5935
6007
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5936
6008
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
5937
6009
  }
6010
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
6011
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-pressed);
6012
+ }
5938
6013
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
5939
6014
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
5940
6015
  }
@@ -5964,6 +6039,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5964
6039
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
5965
6040
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-disabled);
5966
6041
  }
6042
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
6043
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-disabled);
6044
+ }
5967
6045
  .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 {
5968
6046
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-disabled);
5969
6047
  }