@i-cell/ids-styles 0.0.38 → 0.0.39

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 (10) hide show
  1. package/dist/badge/badge.css +227 -0
  2. package/dist/badge/badge.min.css +1 -0
  3. package/dist/badge/badge.plugin.js +220 -0
  4. package/dist/components.css +246 -18
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +229 -18
  7. package/dist/form-elements/form-field/form-field.css +18 -18
  8. package/dist/form-elements/form-field/form-field.min.css +1 -1
  9. package/dist/form-elements/form-field/form-field.plugin.js +18 -18
  10. package/package.json +1 -1
package/dist/components.plugin.js CHANGED
@@ -519,6 +519,217 @@ module.exports = function ComponentsPlugin() {
519
519
  borderColor: 'var(--ids-comp-avatar-color-border-dark-default)',
520
520
  background: 'var(--ids-comp-avatar-color-bg-dark-default)',
521
521
  },
522
+ '.ids-badge': {
523
+ boxSizing: 'border-box',
524
+ borderWidth: '0',
525
+ borderStyle: 'none',
526
+ borderColor: 'rgba(0,0,0,0)',
527
+ lineHeight: 1.5,
528
+ display: 'inline-flex',
529
+ position: 'relative',
530
+ },
531
+ '.ids-badge::before,.ids-badge::after,.ids-badge *,.ids-badge ::before,.ids-badge ::after': {
532
+ boxSizing: 'border-box',
533
+ borderWidth: '0',
534
+ borderStyle: 'none',
535
+ borderColor: 'rgba(0,0,0,0)',
536
+ },
537
+ '.ids-badge .ids-badge__container,.ids-badge .ids-badge__container-no-element': {
538
+ whiteSpace: 'nowrap',
539
+ position: 'absolute',
540
+ top: '0',
541
+ left: '100%',
542
+ transform: 'translate(0, -50%)',
543
+ transformOrigin: 'top left',
544
+ textAlign: 'center',
545
+ display: 'flex',
546
+ alignItems: 'center',
547
+ zIndex: 1000,
548
+ },
549
+ '.ids-badge-primary>.ids-badge__container,.ids-badge-primary .ids-badge__container-no-element': {
550
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-primary-default)',
551
+ borderColor: 'var(--ids-comp-badge-filled-color-border-primary-default)',
552
+ color: 'var(--ids-comp-badge-filled-color-fg-label-primary-default)',
553
+ },
554
+ '.ids-badge-primary>.ids-badge__container>.ids-icon,.ids-badge-primary .ids-badge__container-no-element>.ids-icon': {
555
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-primary-default)',
556
+ },
557
+ '.ids-badge-secondary>.ids-badge__container,.ids-badge-secondary .ids-badge__container-no-element': {
558
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-secondary-default)',
559
+ borderColor: 'var(--ids-comp-badge-filled-color-border-secondary-default)',
560
+ color: 'var(--ids-comp-badge-filled-color-fg-label-secondary-default)',
561
+ },
562
+ '.ids-badge-secondary>.ids-badge__container>.ids-icon,.ids-badge-secondary .ids-badge__container-no-element>.ids-icon': {
563
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-secondary-default)',
564
+ },
565
+ '.ids-badge-brand>.ids-badge__container,.ids-badge-brand .ids-badge__container-no-element': {
566
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-brand-default)',
567
+ borderColor: 'var(--ids-comp-badge-filled-color-border-brand-default)',
568
+ color: 'var(--ids-comp-badge-filled-color-fg-label-brand-default)',
569
+ },
570
+ '.ids-badge-brand>.ids-badge__container>.ids-icon,.ids-badge-brand .ids-badge__container-no-element>.ids-icon': {
571
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-brand-default)',
572
+ },
573
+ '.ids-badge-error>.ids-badge__container,.ids-badge-error .ids-badge__container-no-element': {
574
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-error-default)',
575
+ borderColor: 'var(--ids-comp-badge-filled-color-border-error-default)',
576
+ color: 'var(--ids-comp-badge-filled-color-fg-label-error-default)',
577
+ },
578
+ '.ids-badge-error>.ids-badge__container>.ids-icon,.ids-badge-error .ids-badge__container-no-element>.ids-icon': {
579
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-error-default)',
580
+ },
581
+ '.ids-badge-success>.ids-badge__container,.ids-badge-success .ids-badge__container-no-element': {
582
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-success-default)',
583
+ borderColor: 'var(--ids-comp-badge-filled-color-border-success-default)',
584
+ color: 'var(--ids-comp-badge-filled-color-fg-label-success-default)',
585
+ },
586
+ '.ids-badge-success>.ids-badge__container>.ids-icon,.ids-badge-success .ids-badge__container-no-element>.ids-icon': {
587
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-success-default)',
588
+ },
589
+ '.ids-badge-warning>.ids-badge__container,.ids-badge-warning .ids-badge__container-no-element': {
590
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-warning-default)',
591
+ borderColor: 'var(--ids-comp-badge-filled-color-border-warning-default)',
592
+ color: 'var(--ids-comp-badge-filled-color-fg-label-warning-default)',
593
+ },
594
+ '.ids-badge-warning>.ids-badge__container>.ids-icon,.ids-badge-warning .ids-badge__container-no-element>.ids-icon': {
595
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-warning-default)',
596
+ },
597
+ '.ids-badge-light>.ids-badge__container,.ids-badge-light .ids-badge__container-no-element': {
598
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-light-default)',
599
+ borderColor: 'var(--ids-comp-badge-filled-color-border-light-default)',
600
+ color: 'var(--ids-comp-badge-filled-color-fg-label-light-default)',
601
+ },
602
+ '.ids-badge-light>.ids-badge__container>.ids-icon,.ids-badge-light .ids-badge__container-no-element>.ids-icon': {
603
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-light-default)',
604
+ },
605
+ '.ids-badge-dark>.ids-badge__container,.ids-badge-dark .ids-badge__container-no-element': {
606
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-dark-default)',
607
+ borderColor: 'var(--ids-comp-badge-filled-color-border-dark-default)',
608
+ color: 'var(--ids-comp-badge-filled-color-fg-label-dark-default)',
609
+ },
610
+ '.ids-badge-dark>.ids-badge__container>.ids-icon,.ids-badge-dark .ids-badge__container-no-element>.ids-icon': {
611
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-dark-default)',
612
+ },
613
+ '.ids-badge-surface>.ids-badge__container,.ids-badge-surface .ids-badge__container-no-element': {
614
+ backgroundColor: 'var(--ids-comp-badge-filled-color-bg-surface-default)',
615
+ borderColor: 'var(--ids-comp-badge-filled-color-border-surface-default)',
616
+ color: 'var(--ids-comp-badge-filled-color-fg-label-surface-default)',
617
+ },
618
+ '.ids-badge-surface>.ids-badge__container>.ids-icon,.ids-badge-surface .ids-badge__container-no-element>.ids-icon': {
619
+ color: 'var(--ids-comp-badge-filled-color-fg-icon-surface-default)',
620
+ },
621
+ '.ids-badge-compact>.ids-badge__container': {
622
+ borderRadius: 'var(--ids-comp-badge-size-border-radius-compact)',
623
+ borderWidth: 'var(--ids-comp-badge-size-border-width-compact)',
624
+ padding: 'var(--ids-comp-badge-size-padding-y-compact) var(--ids-comp-badge-size-padding-x-compact)',
625
+ height: 'var(--ids-comp-badge-size-height-compact)',
626
+ minWidth: 'var(--ids-comp-badge-size-min-width-compact)',
627
+ gap: 'var(--ids-comp-badge-size-gap-compact)',
628
+ },
629
+ '.ids-badge-compact>.ids-badge__container>.ids-badge__label': {
630
+ fontFamily: 'var(--ids-comp-badge-label-typography-font-family-compact)',
631
+ fontSize: 'var(--ids-comp-badge-label-typography-font-size-compact)',
632
+ fontWeight: 'var(--ids-comp-badge-label-typography-font-weight-compact)',
633
+ letterSpacing: 'var(--ids-comp-badge-label-typography-letter-spacing-compact)',
634
+ lineHeight: 'var(--ids-comp-badge-label-typography-line-height-compact)',
635
+ },
636
+ '.ids-badge-compact>.ids-badge__container>.ids-icon': {
637
+ fontSize: 'var(--ids-comp-badge-icon-typography-font-size-compact)',
638
+ fontWeight: 'var(--ids-comp-badge-icon-typography-font-weight-compact)',
639
+ lineHeight: 'var(--ids-comp-badge-icon-typography-line-height-compact)',
640
+ width: 'var(--ids-comp-badge-size-icon-compact)',
641
+ height: 'var(--ids-comp-badge-size-icon-compact)',
642
+ },
643
+ '.ids-badge-compact>.ids-badge__container-no-element': {
644
+ borderRadius: 'var(--ids-comp-badge-noelement-size-border-radius-compact)',
645
+ borderWidth: 'var(--ids-comp-badge-noelement-size-border-width-compact)',
646
+ minWidth: 'var(--ids-comp-badge-noelement-size-width-compact)',
647
+ height: 'var(--ids-comp-badge-noelement-size-height-compact)',
648
+ },
649
+ '.ids-badge-comfortable>.ids-badge__container': {
650
+ borderRadius: 'var(--ids-comp-badge-size-border-radius-comfortable)',
651
+ borderWidth: 'var(--ids-comp-badge-size-border-width-comfortable)',
652
+ padding: 'var(--ids-comp-badge-size-padding-y-comfortable) var(--ids-comp-badge-size-padding-x-comfortable)',
653
+ height: 'var(--ids-comp-badge-size-height-comfortable)',
654
+ minWidth: 'var(--ids-comp-badge-size-min-width-comfortable)',
655
+ gap: 'var(--ids-comp-badge-size-gap-comfortable)',
656
+ },
657
+ '.ids-badge-comfortable>.ids-badge__container>.ids-badge__label': {
658
+ fontFamily: 'var(--ids-comp-badge-label-typography-font-family-comfortable)',
659
+ fontSize: 'var(--ids-comp-badge-label-typography-font-size-comfortable)',
660
+ fontWeight: 'var(--ids-comp-badge-label-typography-font-weight-comfortable)',
661
+ letterSpacing: 'var(--ids-comp-badge-label-typography-letter-spacing-comfortable)',
662
+ lineHeight: 'var(--ids-comp-badge-label-typography-line-height-comfortable)',
663
+ },
664
+ '.ids-badge-comfortable>.ids-badge__container>.ids-icon': {
665
+ fontSize: 'var(--ids-comp-badge-icon-typography-font-size-comfortable)',
666
+ fontWeight: 'var(--ids-comp-badge-icon-typography-font-weight-comfortable)',
667
+ lineHeight: 'var(--ids-comp-badge-icon-typography-line-height-comfortable)',
668
+ width: 'var(--ids-comp-badge-size-icon-comfortable)',
669
+ height: 'var(--ids-comp-badge-size-icon-comfortable)',
670
+ },
671
+ '.ids-badge-comfortable>.ids-badge__container-no-element': {
672
+ borderRadius: 'var(--ids-comp-badge-noelement-size-border-radius-comfortable)',
673
+ borderWidth: 'var(--ids-comp-badge-noelement-size-border-width-comfortable)',
674
+ minWidth: 'var(--ids-comp-badge-noelement-size-width-comfortable)',
675
+ height: 'var(--ids-comp-badge-noelement-size-height-comfortable)',
676
+ },
677
+ '.ids-badge-spacious>.ids-badge__container': {
678
+ borderRadius: 'var(--ids-comp-badge-size-border-radius-spacious)',
679
+ borderWidth: 'var(--ids-comp-badge-size-border-width-spacious)',
680
+ padding: 'var(--ids-comp-badge-size-padding-y-spacious) var(--ids-comp-badge-size-padding-x-spacious)',
681
+ height: 'var(--ids-comp-badge-size-height-spacious)',
682
+ minWidth: 'var(--ids-comp-badge-size-min-width-spacious)',
683
+ gap: 'var(--ids-comp-badge-size-gap-spacious)',
684
+ },
685
+ '.ids-badge-spacious>.ids-badge__container>.ids-badge__label': {
686
+ fontFamily: 'var(--ids-comp-badge-label-typography-font-family-spacious)',
687
+ fontSize: 'var(--ids-comp-badge-label-typography-font-size-spacious)',
688
+ fontWeight: 'var(--ids-comp-badge-label-typography-font-weight-spacious)',
689
+ letterSpacing: 'var(--ids-comp-badge-label-typography-letter-spacing-spacious)',
690
+ lineHeight: 'var(--ids-comp-badge-label-typography-line-height-spacious)',
691
+ },
692
+ '.ids-badge-spacious>.ids-badge__container>.ids-icon': {
693
+ fontSize: 'var(--ids-comp-badge-icon-typography-font-size-spacious)',
694
+ fontWeight: 'var(--ids-comp-badge-icon-typography-font-weight-spacious)',
695
+ lineHeight: 'var(--ids-comp-badge-icon-typography-line-height-spacious)',
696
+ width: 'var(--ids-comp-badge-size-icon-spacious)',
697
+ height: 'var(--ids-comp-badge-size-icon-spacious)',
698
+ },
699
+ '.ids-badge-spacious>.ids-badge__container-no-element': {
700
+ borderRadius: 'var(--ids-comp-badge-noelement-size-border-radius-spacious)',
701
+ borderWidth: 'var(--ids-comp-badge-noelement-size-border-width-spacious)',
702
+ minWidth: 'var(--ids-comp-badge-noelement-size-width-spacious)',
703
+ height: 'var(--ids-comp-badge-noelement-size-height-spacious)',
704
+ },
705
+ '.ids-badge-dense>.ids-badge__container': {
706
+ borderRadius: 'var(--ids-comp-badge-size-border-radius-dense)',
707
+ borderWidth: 'var(--ids-comp-badge-size-border-width-dense)',
708
+ padding: 'var(--ids-comp-badge-size-padding-y-dense) var(--ids-comp-badge-size-padding-x-dense)',
709
+ height: 'var(--ids-comp-badge-size-height-dense)',
710
+ minWidth: 'var(--ids-comp-badge-size-min-width-dense)',
711
+ gap: 'var(--ids-comp-badge-size-gap-dense)',
712
+ },
713
+ '.ids-badge-dense>.ids-badge__container>.ids-badge__label': {
714
+ fontFamily: 'var(--ids-comp-badge-label-typography-font-family-dense)',
715
+ fontSize: 'var(--ids-comp-badge-label-typography-font-size-dense)',
716
+ fontWeight: 'var(--ids-comp-badge-label-typography-font-weight-dense)',
717
+ letterSpacing: 'var(--ids-comp-badge-label-typography-letter-spacing-dense)',
718
+ lineHeight: 'var(--ids-comp-badge-label-typography-line-height-dense)',
719
+ },
720
+ '.ids-badge-dense>.ids-badge__container>.ids-icon': {
721
+ fontSize: 'var(--ids-comp-badge-icon-typography-font-size-dense)',
722
+ fontWeight: 'var(--ids-comp-badge-icon-typography-font-weight-dense)',
723
+ lineHeight: 'var(--ids-comp-badge-icon-typography-line-height-dense)',
724
+ width: 'var(--ids-comp-badge-size-icon-dense)',
725
+ height: 'var(--ids-comp-badge-size-icon-dense)',
726
+ },
727
+ '.ids-badge-dense>.ids-badge__container-no-element': {
728
+ borderRadius: 'var(--ids-comp-badge-noelement-size-border-radius-dense)',
729
+ borderWidth: 'var(--ids-comp-badge-noelement-size-border-width-dense)',
730
+ minWidth: 'var(--ids-comp-badge-noelement-size-width-dense)',
731
+ height: 'var(--ids-comp-badge-noelement-size-height-dense)',
732
+ },
522
733
  '.ids-button-group': {
523
734
  boxSizing: 'border-box',
524
735
  borderWidth: '0',
@@ -5487,27 +5698,27 @@ module.exports = function ComponentsPlugin() {
5487
5698
  borderLeftColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default)',
5488
5699
  background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default)',
5489
5700
  },
5490
- '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)':
5701
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)':
5491
5702
  {
5492
5703
  borderColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-focused)',
5493
5704
  background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-focused)',
5494
5705
  outlineColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)',
5495
5706
  },
5496
- '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__leading-icon>.ids-icon':
5707
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__leading-icon>.ids-icon':
5497
5708
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused)' },
5498
- '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__prefix':
5709
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__prefix':
5499
5710
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused)' },
5500
- '.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':
5711
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.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':
5501
5712
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused)' },
5502
- '.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':
5713
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.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':
5503
5714
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-focused)' },
5504
- '.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':
5715
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix ::placeholder':
5505
5716
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused)' },
5506
- '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__suffix':
5717
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__suffix':
5507
5718
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused)' },
5508
- '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__trailing-icon>.ids-icon':
5719
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__trailing-icon>.ids-icon':
5509
5720
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused)' },
5510
- '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__action':
5721
+ '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__action':
5511
5722
  {
5512
5723
  borderLeftColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default)',
5513
5724
  background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default)',
@@ -5807,27 +6018,27 @@ module.exports = function ComponentsPlugin() {
5807
6018
  borderLeftColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default)',
5808
6019
  background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default)',
5809
6020
  },
5810
- '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)':
6021
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)':
5811
6022
  {
5812
6023
  borderColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-focused)',
5813
6024
  background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-focused)',
5814
6025
  outlineColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused)',
5815
6026
  },
5816
- '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__leading-icon>.ids-icon':
6027
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__leading-icon>.ids-icon':
5817
6028
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused)' },
5818
- '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__prefix':
6029
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__prefix':
5819
6030
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused)' },
5820
- '.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':
6031
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.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':
5821
6032
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused)' },
5822
- '.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':
6033
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.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':
5823
6034
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-focused)' },
5824
- '.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':
6035
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix ::placeholder':
5825
6036
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused)' },
5826
- '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__suffix':
6037
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__suffix':
5827
6038
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused)' },
5828
- '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__trailing-icon>.ids-icon':
6039
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__trailing-icon>.ids-icon':
5829
6040
  { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused)' },
5830
- '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__action':
6041
+ '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__action':
5831
6042
  {
5832
6043
  borderLeftColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default)',
5833
6044
  background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default)',
package/dist/form-elements/form-field/form-field.css CHANGED
@@ -422,33 +422,33 @@
422
422
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
423
423
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
424
424
  }
425
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) {
425
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
426
426
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-focused);
427
427
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-focused);
428
428
  outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
429
429
  }
430
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
430
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
431
431
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
432
432
  }
433
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
433
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
434
434
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
435
435
  }
436
- .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 {
436
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .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 {
437
437
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
438
438
  }
439
- .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 {
439
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .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 {
440
440
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-focused);
441
441
  }
442
- .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 {
442
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
443
443
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
444
444
  }
445
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
445
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
446
446
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
447
447
  }
448
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
448
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
449
449
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
450
450
  }
451
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
451
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
452
452
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
453
453
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
454
454
  }
@@ -814,33 +814,33 @@
814
814
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
815
815
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
816
816
  }
817
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) {
817
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
818
818
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-focused);
819
819
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-focused);
820
820
  outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
821
821
  }
822
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
822
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
823
823
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
824
824
  }
825
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
825
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
826
826
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
827
827
  }
828
- .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 {
828
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .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 {
829
829
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
830
830
  }
831
- .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 {
831
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .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 {
832
832
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-focused);
833
833
  }
834
- .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 {
834
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
835
835
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
836
836
  }
837
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
837
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
838
838
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
839
839
  }
840
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
840
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
841
841
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
842
842
  }
843
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
843
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
844
844
  border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
845
845
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
846
846
  }