@entur/dropdown 5.3.3 → 5.3.5

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 (11) hide show
  1. package/dist/Dropdown.d.ts +3 -1
  2. package/dist/MultiSelect.d.ts +3 -1
  3. package/dist/SearchableDropdown.d.ts +3 -1
  4. package/dist/dropdown.cjs.development.js +19 -6
  5. package/dist/dropdown.cjs.development.js.map +1 -1
  6. package/dist/dropdown.cjs.production.min.js +1 -1
  7. package/dist/dropdown.cjs.production.min.js.map +1 -1
  8. package/dist/dropdown.esm.js +19 -6
  9. package/dist/dropdown.esm.js.map +1 -1
  10. package/dist/styles.css +145 -541
  11. package/package.json +11 -11
package/dist/styles.css CHANGED
@@ -1,37 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-dropdown__searchable-selected-item {
4
- display: block;
5
- font-size: 1rem;
6
- line-height: 1rem;
7
- margin-right: -1rem;
8
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
9
- font-family: inherit;
10
- overflow-x: hidden;
11
- text-overflow: ellipsis;
12
- white-space: nowrap;
13
- }
14
- .eds-dropdown__searchable-selected-item__wrapper {
15
- max-width: 65%;
16
- }
17
-
18
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
19
- -moz-transition: none;
20
- transition: none;
21
- }
22
-
23
- .eds-form-control.eds-dropdown__input::placeholder {
24
- transition: none;
25
- }
26
- .eds-inline-spinner {
27
- align-items: center;
28
- display: flex;
29
- justify-content: center;
30
- height: 100%;
31
- width: 100%;
32
- }
33
- /* DO NOT CHANGE!*/
34
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
35
3
  .eds-dropdown-list {
36
4
  border-radius: 0.25rem;
37
5
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
@@ -152,6 +120,38 @@
152
120
  .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
153
121
  background-color: #8285a8;
154
122
  }
123
+ .eds-inline-spinner {
124
+ align-items: center;
125
+ display: flex;
126
+ justify-content: center;
127
+ height: 100%;
128
+ width: 100%;
129
+ }
130
+ /* DO NOT CHANGE!*/
131
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
132
+ .eds-dropdown__searchable-selected-item {
133
+ display: block;
134
+ font-size: 1rem;
135
+ line-height: 1rem;
136
+ margin-right: -1rem;
137
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
138
+ font-family: inherit;
139
+ overflow-x: hidden;
140
+ text-overflow: ellipsis;
141
+ white-space: nowrap;
142
+ }
143
+ .eds-dropdown__searchable-selected-item__wrapper {
144
+ max-width: 65%;
145
+ }
146
+
147
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
148
+ -moz-transition: none;
149
+ transition: none;
150
+ }
151
+
152
+ .eds-form-control.eds-dropdown__input::placeholder {
153
+ transition: none;
154
+ }
155
155
  /* DO NOT CHANGE!*/
156
156
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
157
157
  .eds-dropdown__toggle-button {
@@ -356,144 +356,18 @@
356
356
  }
357
357
  /* DO NOT CHANGE!*/
358
358
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
359
- .eds-dropdown__selected-item-tag {
360
- height: 1.5rem;
361
- max-width: 10rem;
362
- padding: 0;
363
- }
364
- .eds-dropdown__selected-item-tag > span {
365
- overflow: hidden;
366
- text-overflow: ellipsis;
367
- white-space: nowrap;
368
- margin-left: 0.5rem;
369
- }
370
- .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
371
- margin-right: 0.125rem;
372
- }
373
- .eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
374
- font-size: 0.6rem;
375
- }
376
- .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus {
377
- outline-color: var(--basecolors-stroke-focus-standard);
378
- }
379
- .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
380
- border-color: var(--components-chip-standard-border);
381
- background-color: var(--components-chip-standard-hover);
382
- }
383
- .eds-contrast .eds-dropdown__selected-item-tag {
384
- background: var(--components-chip-standard-default);
385
- border: 0.0625rem solid var(--components-chip-standard-border);
386
- color: var(--components-chip-standard-text-unselected);
387
- }
388
- .eds-contrast .eds-dropdown__selected-item-tag:hover {
389
- border-color: var(--components-chip-standard-border);
390
- background-color: var(--components-chip-standard-hover);
391
- }
392
- .eds-contrast .eds-dropdown__selected-item-tag:active {
393
- background-color: var(--components-chip-standard-active);
394
- border-color: transparent;
395
- }
396
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
397
- color: var(--components-chip-standard-text-unselected);
398
- }
399
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
400
- background-color: var(--components-chip-standard-hover);
401
- }
402
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus {
403
- outline-color: var(--basecolors-stroke-focus-standard);
404
- }
405
- .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
406
- padding-right: 0.5rem;
407
- }
408
- .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
409
- display: none;
410
- }
411
- .eds-contrast .eds-dropdown__selected-item-tag--readonly {
412
- background-color: var(--components-dropdown-dropdown-standard-fill-readonly);
413
- border-color: transparent;
414
- color: var(--components-dropdown-dropdown-standard-text-readonly);
415
- }
416
- .eds-contrast .eds-dropdown__selected-item-tag--disabled {
417
- background-color: var(--components-dropdown-dropdown-standard-fill-disabled);
418
- border-color: transparent;
419
- color: var(--components-dropdown-dropdown-standard-text-disabled);
420
- }
421
- .eds-dropdown .eds-icon-button {
422
- color: var(--components-button-iconbutton-standard-text);
423
- }
424
- .eds-dropdown .eds-icon-button:hover {
425
- background-color: var(--components-button-iconbutton-standard-hover);
426
- }
427
- .eds-dropdown .eds-icon-button:focus {
428
- outline: 2px solid #181c56;
429
- outline-color: var(--basecolors-stroke-focus-standard);
430
- outline-offset: 0.125rem;
431
- }
432
- .eds-dropdown .eds-icon-button:active {
433
- background-color: var(--components-button-iconbutton-standard-active);
434
- }
435
- .eds-dropdown__appendix {
436
- display: flex;
437
- align-items: center;
438
- }
439
- .eds-dropdown__appendix__clear-button {
440
- padding: 0.5rem;
441
- margin-right: 0.25rem;
442
- }
443
- .eds-contrast .eds-dropdown__appendix__clear-button:hover {
444
- background-color: var(--components-button-iconbutton-standard-hover);
445
- }
446
- .eds-contrast .eds-dropdown__appendix__clear-button:focus {
447
- outline-color: var(--basecolors-stroke-focus-standard);
448
- }
449
- .eds-dropdown__appendix__clear-button__tooltip {
450
- white-space: nowrap;
451
- }
452
- .eds-dropdown__appendix__divider {
453
- content: "";
454
- display: block;
455
- background-color: var(--components-dropdown-dropdown-standard-text-content);
456
- height: 1.5rem;
457
- width: 1px;
458
- }
459
- .eds-dropdown__appendix__toggle-button {
460
- margin-right: -0.75rem;
461
- margin-left: 0.25rem;
462
- }
463
- .eds-dropdown__appendix__toggle-button--open svg {
464
- transform: rotate(180deg);
465
- }
466
- .eds-dropdown__appendix__toggle-button svg {
467
- transition: transform ease-in-out 0.1s;
468
- }
469
- .eds-dropdown__appendix__toggle-button--loading-dots {
470
- align-items: center;
471
- display: flex;
472
- justify-content: center;
473
- height: 100%;
474
- width: 1rem;
475
- margin-left: calc(0.5rem + 2px);
476
- }
477
- .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
478
- background-color: var(--components-loader-loader-standard-text);
479
- }
480
- .eds-contrast .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
481
- background-color: var(--components-loader-loader-standard-text);
482
- }
483
- .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
484
- background-color: var(--components-button-iconbutton-standard-hover);
485
- }
486
- .eds-contrast .eds-dropdown__appendix__toggle-button:focus {
487
- outline-color: var(--basecolors-stroke-focus-standard);
488
- }
489
- /* DO NOT CHANGE!*/
490
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
491
359
  .eds-dropdown__wrapper {
492
360
  position: relative;
493
361
  width: 100%;
494
362
  min-width: 6rem;
495
363
  max-width: 100%;
496
364
  }
365
+ .eds-dropdown__wrapper--has-tooltip {
366
+ padding-right: 2rem;
367
+ }
368
+ .eds-dropdown__wrapper--has-tooltip .eds-dropdown__list {
369
+ width: calc(100% - 2rem);
370
+ }
497
371
  .eds-dropdown__input {
498
372
  flex: 1;
499
373
  width: 0;
@@ -588,6 +462,12 @@
588
462
  .eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
589
463
  top: 0.25rem;
590
464
  }
465
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__append.eds-form-control__append--tooltip {
466
+ color: var(--primary-text-color);
467
+ position: absolute;
468
+ top: 0.75rem;
469
+ right: -3rem;
470
+ }
591
471
  .eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
592
472
  height: 2rem;
593
473
  }
@@ -602,390 +482,114 @@
602
482
  .eds-contrast .eds-dropdown--native option {
603
483
  color: var(--components-form-basemenu-text);
604
484
  }
605
- @import "~@entur/tokens/dist/primitive.css";
606
- @import "~@entur/tokens/dist/semantic.css";
607
485
  /* DO NOT CHANGE!*/
608
486
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
609
- :root {
610
- --fill-background-contrast-dark: var(--ebony-90);
611
- --fill-background-contrast-light: var(--lavender-90);
612
- --fill-background-contrast-lightalt: var(--blue-90);
613
- --fill-background-contrast-lightalt-2: var(--blue-100);
614
- --fill-background-overlay-solid: var(--ebony-80);
615
- --fill-background-overlay-solidalt: var(--ebony-75);
616
- --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
617
- --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
618
- --fill-background-standard-colorless: var(--white-alpha-0);
619
- --fill-background-standard-dark: var(--ebony-100);
620
- --fill-background-standard-light: var(--white-alpha-100);
621
- --fill-background-subdued-dark: var(--ebony-85);
622
- --fill-background-subdued-light: var(--blue-30);
623
- --fill-background-tint-dark: var(--ebony-95);
624
- --fill-background-tint-light: var(--blue-10);
625
- --fill-background-tint-neutral: var(--grey-10);
626
- --fill-background-tint-transparent: var(--transparent-blue-alpha10);
627
- --fill-boolean-false-contrast: var(--blue-50);
628
- --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
629
- --fill-boolean-false-light: var(--grey-60);
630
- --fill-boolean-true-contrast: var(--mint-40);
631
- --fill-boolean-true-dark: var(--mint-40);
632
- --fill-boolean-true-light: var(--mint-60);
633
- --fill-disabled-light: var(--grey-40);
634
- --fill-disabled-transparent: var(--transparent-neutral-alpha15);
635
- --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
636
- --fill-information-contrast: var(--sky-30);
637
- --fill-information-deep: var(--sky-50);
638
- --fill-information-muted: var(--sky-10);
639
- --fill-information-tint: var(--sky-20);
640
- --fill-negative-contrast: var(--coral-40);
641
- --fill-negative-dark: var(--coral-90);
642
- --fill-negative-deep: var(--coral-60);
643
- --fill-negative-muted: var(--coral-20);
644
- --fill-negative-tint: var(--coral-30);
645
- --fill-negative-transparent: var(--transparent-coral-alpha20);
646
- --fill-primary-active-contrast: var(--lavender-50);
647
- --fill-primary-active-light: var(--lavender-100);
648
- --fill-primary-default-contrast: var(--lavender-40);
649
- --fill-primary-default-light: var(--lavender-90);
650
- --fill-primary-hover-contrast: var(--lavender-30);
651
- --fill-primary-hover-light: var(--blue-90);
652
- --fill-secondary-active-contrast: var(--lavender-50);
653
- --fill-secondary-active-light: var(--lavender-40);
654
- --fill-secondary-default-colorless: var(--white-alpha-0);
655
- --fill-secondary-hover-contrast: var(--blue-70);
656
- --fill-secondary-hover-light: var(--lavender-20);
657
- --fill-selected-default-contrast: var(--blue-90);
658
- --fill-selected-default-dark: var(--ebony-10);
659
- --fill-selected-default-darkalt: var(--ebony-50);
660
- --fill-selected-default-light: var(--blue-10);
661
- --fill-selected-default-neutral: var(--grey-30);
662
- --fill-selected-hover-contrast: var(--blue-80);
663
- --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
664
- --fill-selected-hover-light: var(--blue-20);
665
- --fill-selected-hover-neutral: var(--grey-20);
666
- --fill-success-contrast: var(--mint-40);
667
- --fill-success-deep: var(--mint-60);
668
- --fill-success-muted: var(--mint-20);
669
- --fill-success-subdued: var(--mint-50);
670
- --fill-success-tint: var(--mint-30);
671
- --fill-warning-contrast: var(--canary-40);
672
- --fill-warning-deep: var(--canary-60);
673
- --fill-warning-muted: var(--canary-20);
674
- --fill-warning-tint: var(--canary-30);
675
- --shape-accent: var(--lavender-90);
676
- --shape-contrast: var(--lavender-40);
677
- --shape-dark: var(--ebony-100);
678
- --shape-darkalt: var(--ebony-30);
679
- --shape-disabled: var(--grey-80);
680
- --shape-highlight: var(--coral-40);
681
- --shape-highlightalt: var(--coral-30);
682
- --shape-inactive: var(--blue-40);
683
- --shape-information: var(--sky-50);
684
- --shape-informationalt: var(--sky-30);
685
- --shape-light: var(--white-alpha-100);
686
- --shape-lightalt: var(--ebony-10);
687
- --shape-negative: var(--coral-60);
688
- --shape-negativealt: var(--coral-30);
689
- --shape-neutral: var(--grey-70);
690
- --shape-neutralalt: var(--grey-50);
691
- --shape-neutralalt2: var(--grey-60);
692
- --shape-subdued: var(--blue-70);
693
- --shape-subduedalt: var(--blue-30);
694
- --shape-success: var(--mint-60);
695
- --shape-successalt: var(--mint-40);
696
- --shape-warning: var(--canary-60);
697
- --shape-warningalt: var(--canary-40);
698
- --stroke-accent: var(--lavender-90);
699
- --stroke-colorless: var(--white-alpha-0);
700
- --stroke-contrast: var(--lavender-40);
701
- --stroke-contrastalt: var(--blue-80);
702
- --stroke-dark: var(--ebony-30);
703
- --stroke-darkalt: var(--ebony-50);
704
- --stroke-darkalt-2: var(--ebony-100);
705
- --stroke-highlight: var(--coral-40);
706
- --stroke-highlightalt: var(--coral-30);
707
- --stroke-information: var(--sky-50);
708
- --stroke-light: var(--white-alpha-100);
709
- --stroke-lightalt: var(--ebony-10);
710
- --stroke-negative: var(--coral-60);
711
- --stroke-negativealt: var(--coral-30);
712
- --stroke-neutral: var(--grey-30);
713
- --stroke-neutralalt: var(--grey-60);
714
- --stroke-subdued: var(--blue-60);
715
- --stroke-success: var(--mint-60);
716
- --stroke-successalt: var(--mint-40);
717
- --stroke-transparent: var(--transparent-blue-alpha40);
718
- --stroke-transparentalt: var(--transparent-lavender-alpha70);
719
- --stroke-warning: var(--canary-70);
720
- --text-accent: var(--lavender-90);
721
- --text-dark: var(--ebony-100);
722
- --text-darkalt: var(--ebony-30);
723
- --text-disabled: var(--grey-80);
724
- --text-highlight: var(--lavender-40);
725
- --text-highlightalt: var(--peach-40);
726
- --text-light: var(--white-alpha-100);
727
- --text-lightalt: var(--ebony-10);
728
- --text-negative: var(--coral-60);
729
- --text-negativealt: var(--coral-30);
730
- --text-neutral: var(--grey-70);
731
- --text-neutralalt: var(--grey-50);
732
- --text-neutralalt2: var(--grey-60);
733
- --text-subdued: var(--blue-70);
734
- --text-subduedalt: var(--blue-30);
735
- --text-success: var(--mint-60);
736
- --text-successalt: var(--mint-40);
487
+ .eds-contrast .eds-dropdown__selected-item-tag {
488
+ background: var(--components-chip-standard-default);
489
+ border: 0.0625rem solid var(--components-chip-standard-border);
490
+ color: var(--components-chip-standard-text-unselected);
737
491
  }
738
-
739
- /* DO NOT CHANGE!*/
740
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
741
- [data-color-mode=light],
742
- :root {
743
- --components-dropdown-dropdown-contrast-border-active: var(--stroke-accent);
744
- --components-dropdown-dropdown-contrast-border-default: var(--stroke-subdued);
745
- --components-dropdown-dropdown-contrast-border-hover: var(--stroke-contrast);
746
- --components-dropdown-dropdown-contrast-border-negative: var(--stroke-negativealt);
747
- --components-dropdown-dropdown-contrast-border-success: var(--stroke-successalt);
748
- --components-dropdown-dropdown-contrast-fill-default: var(--fill-background-standard-light);
749
- --components-dropdown-dropdown-contrast-fill-disabled: var(--fill-disabled-transparent);
750
- --components-dropdown-dropdown-contrast-fill-readonly: var(--fill-background-standard-colorless);
751
- --components-dropdown-dropdown-contrast-icon: var(--shape-accent);
752
- --components-dropdown-dropdown-contrast-icon-disabled: var(--shape-neutral);
753
- --components-dropdown-dropdown-contrast-text-content: var(--text-accent);
754
- --components-dropdown-dropdown-contrast-text-description: var(--text-light);
755
- --components-dropdown-dropdown-contrast-text-label: var(--text-subdued);
756
- --components-dropdown-dropdown-contrast-text-disabled: var(--text-neutral);
757
- --components-dropdown-dropdown-standard-border-active: var(--stroke-accent);
758
- --components-dropdown-dropdown-standard-border-default: var(--stroke-subdued);
759
- --components-dropdown-dropdown-standard-border-hover: var(--stroke-accent);
760
- --components-dropdown-dropdown-standard-border-negative: var(--stroke-negative);
761
- --components-dropdown-dropdown-standard-border-success: var(--stroke-success);
762
- --components-dropdown-dropdown-standard-fill-default: var(--fill-background-standard-light);
763
- --components-dropdown-dropdown-standard-fill-disabled: var(--fill-disabled-light);
764
- --components-dropdown-dropdown-standard-fill-readonly: var(--fill-background-standard-colorless);
765
- --components-dropdown-dropdown-standard-icon: var(--shape-accent);
766
- --components-dropdown-dropdown-standard-icon-disabled: var(--shape-neutral);
767
- --components-dropdown-dropdown-standard-text-content: var(--text-accent);
768
- --components-dropdown-dropdown-standard-text-description: var(--text-accent);
769
- --components-dropdown-dropdown-standard-text-label: var(--text-subdued);
770
- --components-dropdown-dropdown-standard-text-disabled: var(--text-neutral);
771
- --components-dropdown-multiselect-contrast-border-danger: var(--stroke-negativealt);
772
- --components-dropdown-multiselect-contrast-border-default: var(--stroke-subdued);
773
- --components-dropdown-multiselect-contrast-border-interactive: var(--stroke-contrast);
774
- --components-dropdown-multiselect-contrast-border-success: var(--stroke-successalt);
775
- --components-dropdown-multiselect-contrast-fill-default: var(--fill-background-standard-light);
776
- --components-dropdown-multiselect-contrast-fill-disabled: var(--fill-disabled-transparent);
777
- --components-dropdown-multiselect-contrast-fill-readonly: var(--fill-background-standard-colorless);
778
- --components-dropdown-multiselect-contrast-icon: var(--shape-accent);
779
- --components-dropdown-multiselect-contrast-icon-disabled: var(--shape-neutral);
780
- --components-dropdown-multiselect-contrast-text-content: var(--text-accent);
781
- --components-dropdown-multiselect-contrast-text-description: var(--text-light);
782
- --components-dropdown-multiselect-contrast-text-label: var(--text-subdued);
783
- --components-dropdown-multiselect-contrast-text-disabled: var(--text-neutral);
784
- --components-dropdown-multiselect-standard-border-default: var(--stroke-subdued);
785
- --components-dropdown-multiselect-standard-border-interactive: var(--stroke-accent);
786
- --components-dropdown-multiselect-standard-border-negative: var(--stroke-negative);
787
- --components-dropdown-multiselect-standard-border-success: var(--stroke-success);
788
- --components-dropdown-multiselect-standard-fill-default: var(--fill-background-standard-light);
789
- --components-dropdown-multiselect-standard-fill-disabled: var(--fill-disabled-light);
790
- --components-dropdown-multiselect-standard-fill-readonly: var(--fill-background-standard-colorless);
791
- --components-dropdown-multiselect-standard-icon: var(--shape-accent);
792
- --components-dropdown-multiselect-standard-icon-disabled: var(--shape-neutral);
793
- --components-dropdown-multiselect-standard-text-content: var(--text-accent);
794
- --components-dropdown-multiselect-standard-text-description: var(--text-accent);
795
- --components-dropdown-multiselect-standard-text-label: var(--text-subdued);
796
- --components-dropdown-multiselect-standard-text-disabled: var(--text-neutral);
492
+ .eds-contrast .eds-dropdown__selected-item-tag:hover {
493
+ border-color: var(--components-chip-standard-border);
494
+ background-color: var(--components-chip-standard-hover);
797
495
  }
798
-
799
- [data-color-mode=dark] {
800
- --components-dropdown-dropdown-contrast-border-active: var(--stroke-contrast);
801
- --components-dropdown-dropdown-contrast-border-default: var(--stroke-subdued);
802
- --components-dropdown-dropdown-contrast-border-hover: var(--stroke-contrast);
803
- --components-dropdown-dropdown-contrast-border-negative: var(--stroke-negativealt);
804
- --components-dropdown-dropdown-contrast-border-success: var(--stroke-successalt);
805
- --components-dropdown-dropdown-contrast-fill-default: var(--fill-background-standard-colorless);
806
- --components-dropdown-dropdown-contrast-fill-disabled: var(--fill-disabled-transparent);
807
- --components-dropdown-dropdown-contrast-fill-readonly: var(--fill-background-standard-colorless);
808
- --components-dropdown-dropdown-contrast-icon: var(--shape-lightalt);
809
- --components-dropdown-dropdown-contrast-icon-disabled: var(--shape-neutral);
810
- --components-dropdown-dropdown-contrast-text-content: var(--text-lightalt);
811
- --components-dropdown-dropdown-contrast-text-description: var(--text-lightalt);
812
- --components-dropdown-dropdown-contrast-text-label: var(--text-darkalt);
813
- --components-dropdown-dropdown-contrast-text-disabled: var(--text-neutral);
814
- --components-dropdown-dropdown-standard-border-active: var(--stroke-contrast);
815
- --components-dropdown-dropdown-standard-border-default: var(--stroke-subdued);
816
- --components-dropdown-dropdown-standard-border-hover: var(--stroke-contrast);
817
- --components-dropdown-dropdown-standard-border-negative: var(--stroke-highlightalt);
818
- --components-dropdown-dropdown-standard-border-success: var(--stroke-successalt);
819
- --components-dropdown-dropdown-standard-fill-default: var(--fill-background-standard-colorless);
820
- --components-dropdown-dropdown-standard-fill-disabled: var(--fill-disabled-transparent);
821
- --components-dropdown-dropdown-standard-fill-readonly: var(--fill-background-standard-colorless);
822
- --components-dropdown-dropdown-standard-icon: var(--shape-lightalt);
823
- --components-dropdown-dropdown-standard-icon-disabled: var(--shape-neutral);
824
- --components-dropdown-dropdown-standard-text-content: var(--text-lightalt);
825
- --components-dropdown-dropdown-standard-text-description: var(--text-lightalt);
826
- --components-dropdown-dropdown-standard-text-label: var(--text-darkalt);
827
- --components-dropdown-dropdown-standard-text-disabled: var(--text-neutral);
828
- --components-dropdown-multiselect-contrast-border-danger: var(--stroke-negativealt);
829
- --components-dropdown-multiselect-contrast-border-default: var(--stroke-subdued);
830
- --components-dropdown-multiselect-contrast-border-interactive: var(--stroke-contrast);
831
- --components-dropdown-multiselect-contrast-border-success: var(--stroke-successalt);
832
- --components-dropdown-multiselect-contrast-fill-default: var(--fill-background-standard-colorless);
833
- --components-dropdown-multiselect-contrast-fill-disabled: var(--fill-disabled-transparent);
834
- --components-dropdown-multiselect-contrast-fill-readonly: var(--fill-background-standard-colorless);
835
- --components-dropdown-multiselect-contrast-icon: var(--shape-lightalt);
836
- --components-dropdown-multiselect-contrast-icon-disabled: var(--shape-neutral);
837
- --components-dropdown-multiselect-contrast-text-content: var(--text-lightalt);
838
- --components-dropdown-multiselect-contrast-text-description: var(--text-lightalt);
839
- --components-dropdown-multiselect-contrast-text-label: var(--text-darkalt);
840
- --components-dropdown-multiselect-contrast-text-disabled: var(--text-neutral);
841
- --components-dropdown-multiselect-standard-border-default: var(--stroke-subdued);
842
- --components-dropdown-multiselect-standard-border-interactive: var(--stroke-contrast);
843
- --components-dropdown-multiselect-standard-border-negative: var(--stroke-negativealt);
844
- --components-dropdown-multiselect-standard-border-success: var(--stroke-successalt);
845
- --components-dropdown-multiselect-standard-fill-default: var(--fill-background-standard-colorless);
846
- --components-dropdown-multiselect-standard-fill-disabled: var(--fill-disabled-transparent);
847
- --components-dropdown-multiselect-standard-fill-readonly: var(--fill-background-standard-colorless);
848
- --components-dropdown-multiselect-standard-icon: var(--shape-lightalt);
849
- --components-dropdown-multiselect-standard-icon-disabled: var(--shape-neutral);
850
- --components-dropdown-multiselect-standard-text-content: var(--text-lightalt);
851
- --components-dropdown-multiselect-standard-text-description: var(--text-lightalt);
852
- --components-dropdown-multiselect-standard-text-label: var(--text-darkalt);
853
- --components-dropdown-multiselect-standard-text-disabled: var(--text-neutral);
496
+ .eds-contrast .eds-dropdown__selected-item-tag:active {
497
+ background-color: var(--components-chip-standard-active);
498
+ border-color: transparent;
854
499
  }
855
-
856
- /* DO NOT CHANGE!*/
857
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
858
- [data-color-mode=light],
859
- :root {
860
- --basecolors-frame-contrast: var(--fill-background-contrast-light);
861
- --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
862
- --basecolors-frame-default: var(--fill-background-standard-light);
863
- --basecolors-frame-elevated: var(--fill-background-standard-light);
864
- --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
865
- --basecolors-frame-subdued: var(--fill-background-subdued-light);
866
- --basecolors-frame-tint: var(--fill-background-tint-light);
867
- --basecolors-shape-accent: var(--shape-accent);
868
- --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
869
- --basecolors-shape-bicycle-default: var(--standard-bicycle);
870
- --basecolors-shape-bus-contrast: var(--contrast-bus);
871
- --basecolors-shape-bus-default: var(--standard-bus);
872
- --basecolors-shape-cableway-contrast: var(--contrast-cableway);
873
- --basecolors-shape-cableway-default: var(--standard-cableway);
874
- --basecolors-shape-disabled: var(--shape-neutral);
875
- --basecolors-shape-disabledalt: var(--shape-neutralalt);
876
- --basecolors-shape-ferry-contrast: var(--contrast-ferry);
877
- --basecolors-shape-ferry-default: var(--standard-ferry);
878
- --basecolors-shape-funicular-contrast: var(--contrast-funicular);
879
- --basecolors-shape-funicular-default: var(--standard-funicular);
880
- --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
881
- --basecolors-shape-helicopter-default: var(--standard-helicopter);
882
- --basecolors-shape-highlight: var(--stroke-highlight);
883
- --basecolors-shape-light: var(--shape-light);
884
- --basecolors-shape-mask: var(--shape-light);
885
- --basecolors-shape-maskalt: var(--shape-light);
886
- --basecolors-shape-metro-contrast: var(--contrast-metro);
887
- --basecolors-shape-metro-default: var(--standard-metro);
888
- --basecolors-shape-mobility-contrast: var(--contrast-mobility);
889
- --basecolors-shape-mobility-default: var(--standard-mobility);
890
- --basecolors-shape-plane-contrast: var(--contrast-plane);
891
- --basecolors-shape-plane-default: var(--standard-plane);
892
- --basecolors-shape-subdued: var(--shape-subdued);
893
- --basecolors-shape-subduedalt: var(--shape-subduedalt);
894
- --basecolors-shape-taxi-contrast: var(--contrast-taxi);
895
- --basecolors-shape-taxi-default: var(--standard-taxi);
896
- --basecolors-shape-train-contrast: var(--contrast-train);
897
- --basecolors-shape-train-default: var(--standard-train);
898
- --basecolors-shape-tram-contrast: var(--contrast-tram);
899
- --basecolors-shape-tram-default: var(--standard-tram);
900
- --basecolors-shape-walk-contrast: var(--contrast-walk);
901
- --basecolors-shape-walk-default: var(--standard-walk);
902
- --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
903
- --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
904
- --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
905
- --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
906
- --basecolors-stroke-contrast: var(--stroke-contrast);
907
- --basecolors-stroke-default: var(--stroke-accent);
908
- --basecolors-stroke-disabled: var(--stroke-neutralalt);
909
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
910
- --basecolors-stroke-focus-standard: var(--stroke-accent);
911
- --basecolors-stroke-highlight: var(--stroke-highlight);
912
- --basecolors-stroke-light: var(--stroke-light);
913
- --basecolors-stroke-subdued: var(--stroke-subdued);
914
- --basecolors-stroke-subduedalt: var(--stroke-neutral);
915
- --basecolors-text-accent: var(--text-accent);
916
- --basecolors-text-disabled: var(--text-neutral);
917
- --basecolors-text-disabledalt: var(--text-neutralalt);
918
- --basecolors-text-highlight: var(--stroke-highlight);
919
- --basecolors-text-light: var(--text-light);
920
- --basecolors-text-subdued: var(--text-subdued);
921
- --basecolors-text-subduedalt: var(--text-subduedalt);
500
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
501
+ color: var(--components-chip-standard-text-unselected);
922
502
  }
923
-
924
- [data-color-mode=dark] {
925
- --basecolors-frame-contrast: var(--fill-background-contrast-dark);
926
- --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
927
- --basecolors-frame-default: var(--fill-background-standard-dark);
928
- --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
929
- --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
930
- --basecolors-frame-subdued: var(--fill-background-subdued-dark);
931
- --basecolors-frame-tint: var(--fill-background-tint-dark);
932
- --basecolors-shape-accent: var(--shape-lightalt);
933
- --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
934
- --basecolors-shape-bicycle-default: var(--dark-bicycle);
935
- --basecolors-shape-bus-contrast: var(--dark-bus);
936
- --basecolors-shape-bus-default: var(--dark-bus);
937
- --basecolors-shape-cableway-contrast: var(--dark-cableway);
938
- --basecolors-shape-cableway-default: var(--dark-cableway);
939
- --basecolors-shape-disabled: var(--shape-neutralalt);
940
- --basecolors-shape-disabledalt: var(--shape-darkalt);
941
- --basecolors-shape-ferry-contrast: var(--dark-ferry);
942
- --basecolors-shape-ferry-default: var(--dark-ferry);
943
- --basecolors-shape-funicular-contrast: var(--dark-funicular);
944
- --basecolors-shape-funicular-default: var(--dark-funicular);
945
- --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
946
- --basecolors-shape-helicopter-default: var(--dark-helicopter);
947
- --basecolors-shape-highlight: var(--stroke-highlightalt);
948
- --basecolors-shape-light: var(--shape-lightalt);
949
- --basecolors-shape-mask: var(--fill-background-subdued-dark);
950
- --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
951
- --basecolors-shape-metro-contrast: var(--dark-metro);
952
- --basecolors-shape-metro-default: var(--dark-metro);
953
- --basecolors-shape-mobility-contrast: var(--dark-mobility);
954
- --basecolors-shape-mobility-default: var(--dark-mobility);
955
- --basecolors-shape-plane-contrast: var(--dark-plane);
956
- --basecolors-shape-plane-default: var(--dark-plane);
957
- --basecolors-shape-subdued: var(--shape-darkalt);
958
- --basecolors-shape-subduedalt: var(--shape-darkalt);
959
- --basecolors-shape-taxi-contrast: var(--dark-taxi);
960
- --basecolors-shape-taxi-default: var(--dark-taxi);
961
- --basecolors-shape-train-contrast: var(--dark-train);
962
- --basecolors-shape-train-default: var(--dark-train);
963
- --basecolors-shape-tram-contrast: var(--dark-tram);
964
- --basecolors-shape-tram-default: var(--dark-tram);
965
- --basecolors-shape-walk-contrast: var(--dark-walk);
966
- --basecolors-shape-walk-default: var(--dark-walk);
967
- --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
968
- --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
969
- --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
970
- --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
971
- --basecolors-stroke-contrast: var(--stroke-contrast);
972
- --basecolors-stroke-default: var(--stroke-dark);
973
- --basecolors-stroke-disabled: var(--stroke-neutral);
974
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
975
- --basecolors-stroke-focus-standard: var(--stroke-contrast);
976
- --basecolors-stroke-highlight: var(--stroke-highlightalt);
977
- --basecolors-stroke-light: var(--stroke-dark);
978
- --basecolors-stroke-subdued: var(--stroke-darkalt);
979
- --basecolors-stroke-subduedalt: var(--stroke-darkalt);
980
- --basecolors-text-accent: var(--text-lightalt);
981
- --basecolors-text-disabled: var(--text-neutralalt);
982
- --basecolors-text-disabledalt: var(--text-neutralalt);
983
- --basecolors-text-highlight: var(--stroke-highlightalt);
984
- --basecolors-text-light: var(--text-lightalt);
985
- --basecolors-text-subdued: var(--text-darkalt);
986
- --basecolors-text-subduedalt: var(--text-darkalt);
503
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
504
+ background-color: var(--components-chip-standard-hover);
505
+ }
506
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus {
507
+ outline-color: var(--basecolors-stroke-focus-standard);
508
+ }
509
+ .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
510
+ padding-right: 0.5rem;
511
+ }
512
+ .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
513
+ display: none;
514
+ }
515
+ .eds-contrast .eds-dropdown__selected-item-tag--readonly {
516
+ background-color: var(--components-dropdown-dropdown-standard-fill-readonly);
517
+ border-color: transparent;
518
+ color: var(--components-dropdown-dropdown-standard-text-readonly);
519
+ }
520
+ .eds-contrast .eds-dropdown__selected-item-tag--disabled {
521
+ background-color: var(--components-dropdown-dropdown-standard-fill-disabled);
522
+ border-color: transparent;
523
+ color: var(--components-dropdown-dropdown-standard-text-disabled);
524
+ }
525
+ .eds-dropdown .eds-icon-button {
526
+ color: var(--components-button-iconbutton-standard-text);
527
+ }
528
+ .eds-dropdown .eds-icon-button:hover {
529
+ background-color: var(--components-button-iconbutton-standard-hover);
530
+ }
531
+ .eds-dropdown .eds-icon-button:focus {
532
+ outline: 2px solid #181c56;
533
+ outline-color: var(--basecolors-stroke-focus-standard);
534
+ outline-offset: 0.125rem;
535
+ }
536
+ .eds-dropdown .eds-icon-button:active {
537
+ background-color: var(--components-button-iconbutton-standard-active);
538
+ }
539
+ .eds-dropdown__appendix {
540
+ display: flex;
541
+ align-items: center;
542
+ }
543
+ .eds-dropdown__appendix__clear-button {
544
+ padding: 0.5rem;
545
+ margin-right: 0.25rem;
546
+ }
547
+ .eds-contrast .eds-dropdown__appendix__clear-button:hover {
548
+ background-color: var(--components-button-iconbutton-standard-hover);
549
+ }
550
+ .eds-contrast .eds-dropdown__appendix__clear-button:focus {
551
+ outline-color: var(--basecolors-stroke-focus-standard);
552
+ }
553
+ .eds-dropdown__appendix__clear-button__tooltip {
554
+ white-space: nowrap;
555
+ }
556
+ .eds-dropdown__appendix__divider {
557
+ content: "";
558
+ display: block;
559
+ background-color: var(--components-dropdown-dropdown-standard-text-content);
560
+ height: 1.5rem;
561
+ width: 1px;
562
+ }
563
+ .eds-dropdown__appendix__toggle-button {
564
+ margin-right: -0.75rem;
565
+ margin-left: 0.25rem;
566
+ }
567
+ .eds-dropdown__appendix__toggle-button--open svg {
568
+ transform: rotate(180deg);
569
+ }
570
+ .eds-dropdown__appendix__toggle-button svg {
571
+ transition: transform ease-in-out 0.1s;
572
+ }
573
+ .eds-dropdown__appendix__toggle-button--loading-dots {
574
+ align-items: center;
575
+ display: flex;
576
+ justify-content: center;
577
+ height: 100%;
578
+ width: 1rem;
579
+ margin-left: calc(0.5rem + 2px);
580
+ }
581
+ .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
582
+ background-color: var(--components-loader-loader-standard-text);
583
+ }
584
+ .eds-contrast .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
585
+ background-color: var(--components-loader-loader-standard-text);
586
+ }
587
+ .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
588
+ background-color: var(--components-button-iconbutton-standard-hover);
589
+ }
590
+ .eds-contrast .eds-dropdown__appendix__toggle-button:focus {
591
+ outline-color: var(--basecolors-stroke-focus-standard);
987
592
  }
988
-
989
593
  :root {
990
594
  --eds-dropdown: 1;
991
595
  }