@festo-ui/web-essentials 9.0.1-dev.772 → 9.0.1-dev.775

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.
@@ -4608,11 +4608,15 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
4608
4608
  font-weight: var(--fwe-font-weight-bold);
4609
4609
  }
4610
4610
  .fwe-select-wrapper .fwe-select {
4611
+ text-align: left;
4612
+ overflow: hidden;
4613
+ white-space: nowrap;
4614
+ text-overflow: ellipsis;
4611
4615
  cursor: pointer;
4612
4616
  order: 2;
4613
4617
  height: 33px;
4614
- padding-bottom: 4px;
4615
- padding-top: 4px;
4618
+ padding-inline: unset;
4619
+ padding: 4px 24px 4px 0px;
4616
4620
  width: 100%;
4617
4621
  font-size: var(--fwe-font-size-base);
4618
4622
  -webkit-appearance: none;
@@ -4624,14 +4628,14 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
4624
4628
  border: none;
4625
4629
  border-bottom: 1px solid var(--fwe-control-border);
4626
4630
  }
4627
- .fwe-select-wrapper .fwe-select:hover:not(:disabled) {
4631
+ .fwe-select-wrapper .fwe-select:hover:not(:disabled), .fwe-select-wrapper .fwe-select:focus:not(:disabled) {
4628
4632
  color: var(--fwe-hero);
4629
4633
  border-color: var(--fwe-hero);
4630
4634
  }
4631
- .fwe-select-wrapper .fwe-select:hover:not(:disabled) option {
4635
+ .fwe-select-wrapper .fwe-select:hover:not(:disabled) option, .fwe-select-wrapper .fwe-select:focus:not(:disabled) option {
4632
4636
  color: var(--fwe-text);
4633
4637
  }
4634
- .fwe-select-wrapper .fwe-select:hover:user-invalid {
4638
+ .fwe-select-wrapper .fwe-select:hover.fwe-invalid, .fwe-select-wrapper .fwe-select:hover:user-invalid, .fwe-select-wrapper .fwe-select:focus.fwe-invalid, .fwe-select-wrapper .fwe-select:focus:user-invalid {
4635
4639
  border-color: var(--fwe-red);
4636
4640
  }
4637
4641
  .fwe-select-wrapper .fwe-select:disabled {
@@ -4644,14 +4648,14 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
4644
4648
  .fwe-select-wrapper .fwe-select::-ms-expand {
4645
4649
  display: none;
4646
4650
  }
4647
- .fwe-select-wrapper .fwe-select:user-invalid {
4651
+ .fwe-select-wrapper .fwe-select.fwe-invalid, .fwe-select-wrapper .fwe-select:user-invalid {
4648
4652
  box-shadow: none;
4649
4653
  border-color: var(--fwe-red);
4650
4654
  }
4651
- .fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-invalid {
4655
+ .fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-invalid, .fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-invalid {
4652
4656
  display: block;
4653
4657
  }
4654
- .fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-description {
4658
+ .fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-description, .fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-description {
4655
4659
  display: none;
4656
4660
  }
4657
4661
  .fwe-select-wrapper .fwe-select-invalid {
@@ -4659,6 +4663,54 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
4659
4663
  color: var(--fwe-red);
4660
4664
  }
4661
4665
 
4666
+ .fwe-options-container {
4667
+ max-width: 100%;
4668
+ background-color: var(--fwe-white);
4669
+ padding: 16px 0px;
4670
+ margin: 0;
4671
+ box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
4672
+ list-style: none;
4673
+ }
4674
+ .fwe-options-container:focus {
4675
+ outline: none;
4676
+ }
4677
+ .fwe-options-container--multi-select {
4678
+ display: flex;
4679
+ flex-direction: column;
4680
+ gap: 8px;
4681
+ padding: 24px 12px;
4682
+ }
4683
+
4684
+ .fwe-combobox-option {
4685
+ padding: 8px 16px;
4686
+ cursor: pointer;
4687
+ position: relative;
4688
+ }
4689
+ .fwe-combobox-option:hover, .fwe-combobox-option:focus, .fwe-combobox-option.fwe-focus {
4690
+ background-color: var(--fwe-background);
4691
+ color: var(--fwe-hero);
4692
+ }
4693
+ .fwe-combobox-option:active, .fwe-combobox-option.fwe-selected {
4694
+ color: var(--fwe-hero);
4695
+ }
4696
+ .fwe-combobox-option:active::before, .fwe-combobox-option.fwe-selected::before {
4697
+ content: "";
4698
+ width: 4px;
4699
+ height: 100%;
4700
+ background-color: var(--fwe-hero);
4701
+ position: absolute;
4702
+ left: 0;
4703
+ top: 0;
4704
+ }
4705
+ .fwe-combobox-option.fwe-disabled {
4706
+ color: var(--fwe-text-disabled);
4707
+ cursor: default;
4708
+ }
4709
+ .fwe-combobox-option.fwe-disabled:hover {
4710
+ background-color: transparent;
4711
+ color: var(--fwe-text-disabled);
4712
+ }
4713
+
4662
4714
  .fwe-badge {
4663
4715
  display: inline-block;
4664
4716
  border-radius: 2px;