@knime/kds-components 0.16.0 → 0.16.1

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 (35) hide show
  1. package/dist/buttons/KdsMenuButton/KdsMenuButton.vue.d.ts +3 -0
  2. package/dist/buttons/KdsMenuButton/KdsMenuButton.vue.d.ts.map +1 -0
  3. package/dist/buttons/KdsMenuButton/index.d.ts +3 -0
  4. package/dist/buttons/KdsMenuButton/index.d.ts.map +1 -0
  5. package/dist/buttons/KdsMenuButton/types.d.ts +30 -0
  6. package/dist/buttons/KdsMenuButton/types.d.ts.map +1 -0
  7. package/dist/buttons/index.d.ts +2 -0
  8. package/dist/buttons/index.d.ts.map +1 -1
  9. package/dist/forms/_helper/InfoPopover/KdsInfoToggleButton.vue.d.ts +2 -6
  10. package/dist/forms/_helper/InfoPopover/KdsInfoToggleButton.vue.d.ts.map +1 -1
  11. package/dist/forms/_helper/List/KdsListItem/KdsListItem.vue.d.ts +4 -3
  12. package/dist/forms/_helper/List/KdsListItem/KdsListItem.vue.d.ts.map +1 -1
  13. package/dist/forms/_helper/List/KdsListItem/enums.d.ts +5 -0
  14. package/dist/forms/_helper/List/KdsListItem/enums.d.ts.map +1 -1
  15. package/dist/forms/_helper/List/KdsListItem/types.d.ts +4 -1
  16. package/dist/forms/_helper/List/KdsListItem/types.d.ts.map +1 -1
  17. package/dist/forms/_helper/List/ListContainer/KdsListContainer.vue.d.ts +1 -0
  18. package/dist/forms/_helper/List/ListContainer/KdsListContainer.vue.d.ts.map +1 -1
  19. package/dist/forms/_helper/List/ListContainer/enums.d.ts +6 -0
  20. package/dist/forms/_helper/List/ListContainer/enums.d.ts.map +1 -0
  21. package/dist/forms/_helper/List/ListContainer/types.d.ts +5 -1
  22. package/dist/forms/_helper/List/ListContainer/types.d.ts.map +1 -1
  23. package/dist/forms/_helper/VariablePopover/KdsVariableToggleButton.vue.d.ts +2 -6
  24. package/dist/forms/_helper/VariablePopover/KdsVariableToggleButton.vue.d.ts.map +1 -1
  25. package/dist/forms/inputs/ColorInput/KdsColorInput.vue.d.ts.map +1 -1
  26. package/dist/forms/selects/Dropdown/BaseDropdown.vue.d.ts +2 -2
  27. package/dist/forms/selects/Dropdown/DropdownContainer.vue.d.ts +3 -3
  28. package/dist/forms/selects/Dropdown/DropdownContainer.vue.d.ts.map +1 -1
  29. package/dist/index.css +377 -368
  30. package/dist/index.js +2727 -2604
  31. package/dist/index.js.map +1 -1
  32. package/dist/overlays/Modal/KdsModal.vue.d.ts +1 -1
  33. package/dist/overlays/Popover/KdsPopover.vue.d.ts.map +1 -1
  34. package/dist/overlays/Popover/types.d.ts +1 -1
  35. package/package.json +6 -6
package/dist/index.css CHANGED
@@ -729,6 +729,329 @@ html.kds-legacy {
729
729
  opacity: 1;
730
730
  }
731
731
 
732
+ .kds-empty-state[data-v-02149081] {
733
+ display: flex;
734
+ flex-direction: column;
735
+ gap: var(--kds-spacing-container-0-5x);
736
+ align-items: center;
737
+ max-width: 280px;
738
+ padding: var(--kds-spacing-container-0-5x);
739
+ }
740
+ .kds-empty-state-headline[data-v-02149081] {
741
+ margin: 0;
742
+ font: var(--kds-font-base-title-small);
743
+ color: var(--kds-color-text-and-icon-muted);
744
+ text-align: center;
745
+ }
746
+ .kds-empty-state-description[data-v-02149081] {
747
+ margin: 0;
748
+ font: var(--kds-font-base-body-small);
749
+ color: var(--kds-color-text-and-icon-muted);
750
+ text-align: center;
751
+ }
752
+ .kds-empty-state-action[data-v-02149081] {
753
+ margin-top: var(--kds-spacing-container-0-12x);
754
+ }
755
+
756
+ .kds-list-item {
757
+ &[data-v-1d081212] {
758
+ position: relative;
759
+ display: flex;
760
+ gap: var(--kds-spacing-container-0-5x);
761
+ align-items: center;
762
+ width: 100%;
763
+ min-width: var(--kds-dimension-component-width-12x);
764
+ padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
765
+ color: var(--kds-color-text-and-icon-neutral);
766
+ cursor: pointer;
767
+ user-select: none;
768
+ background: var(--kds-color-background-neutral-initial);
769
+ border: none;
770
+ border-radius: var(--kds-border-radius-container-0-31x);
771
+ }
772
+ &.small {
773
+ &[data-v-1d081212] {
774
+ gap: var(--kds-spacing-container-0-25x);
775
+ align-items: flex-start;
776
+ padding: var(--kds-spacing-container-0-25x)
777
+ var(--kds-spacing-container-0-5x);
778
+ font: var(--kds-font-base-interactive-small);
779
+ }
780
+ .accessory[data-v-1d081212] {
781
+ display: flex;
782
+ padding: var(--kds-spacing-container-0-12x) 0;
783
+ }
784
+ }
785
+ &.large {
786
+ &[data-v-1d081212] {
787
+ min-height: var(--kds-dimension-component-height-2-5x);
788
+ font: var(--kds-font-base-interactive-small-strong);
789
+ }
790
+ .accessory[data-v-1d081212] {
791
+ display: flex;
792
+ align-items: center;
793
+ }
794
+ }
795
+ .content {
796
+ &[data-v-1d081212] {
797
+ display: flex;
798
+ flex: 1 1 auto;
799
+ flex-direction: column;
800
+ min-width: 0;
801
+ }
802
+ .label {
803
+ &[data-v-1d081212] {
804
+ overflow: hidden;
805
+ text-overflow: ellipsis;
806
+ font: inherit;
807
+ white-space: nowrap;
808
+ }
809
+ .prefix[data-v-1d081212] {
810
+ flex-shrink: 0;
811
+ }
812
+ .special[data-v-1d081212] {
813
+ font: var(--kds-font-base-interactive-small-italic);
814
+ }
815
+ }
816
+ .subtext[data-v-1d081212] {
817
+ display: -webkit-box;
818
+ overflow: hidden;
819
+ -webkit-line-clamp: 2;
820
+ line-clamp: 2;
821
+ font: var(--kds-font-base-subtext-small);
822
+ color: var(--kds-color-text-and-icon-muted);
823
+ -webkit-box-orient: vertical;
824
+ }
825
+ }
826
+ .trailing-item {
827
+ &[data-v-1d081212] {
828
+ display: flex;
829
+ flex-shrink: 0;
830
+ gap: var(--kds-spacing-container-0-12x);
831
+ align-items: center;
832
+ align-self: center;
833
+ justify-content: flex-end;
834
+ }
835
+ .shortcut[data-v-1d081212] {
836
+ flex-shrink: 0;
837
+ font: var(--kds-font-base-interactive-xsmall-strong);
838
+ color: var(--kds-color-text-and-icon-muted);
839
+ text-align: right;
840
+ white-space: nowrap;
841
+ }
842
+ }
843
+ &[data-v-1d081212]:hover:not(.disabled),
844
+ &.active[data-v-1d081212]:not(.disabled) {
845
+ background: var(--kds-color-background-neutral-hover);
846
+ }
847
+ &[data-v-1d081212]:active:not(.disabled) {
848
+ background: var(--kds-color-background-neutral-active);
849
+ }
850
+ &.selected {
851
+ &[data-v-1d081212] {
852
+ color: var(--kds-color-text-and-icon-selected);
853
+ background: var(--kds-color-background-selected-initial);
854
+ }
855
+ .subtext[data-v-1d081212] {
856
+ color: var(--kds-color-text-and-icon-selected);
857
+ }
858
+ &[data-v-1d081212]:hover,
859
+ &.active[data-v-1d081212] {
860
+ background: var(--kds-color-background-selected-hover);
861
+ }
862
+ &[data-v-1d081212]:active {
863
+ background: var(--kds-color-background-selected-active);
864
+ }
865
+ &.disabled[data-v-1d081212] {
866
+ background: var(--kds-color-background-selected-initial);
867
+ }
868
+ }
869
+ &.missing {
870
+ &[data-v-1d081212] {
871
+ color: var(--kds-color-text-and-icon-danger);
872
+ background: var(--kds-color-background-danger-initial);
873
+ }
874
+ .subtext[data-v-1d081212] {
875
+ color: var(--kds-color-text-and-icon-danger);
876
+ }
877
+ &[data-v-1d081212]:hover,
878
+ &.active[data-v-1d081212] {
879
+ background: var(--kds-color-background-danger-hover);
880
+ }
881
+ &[data-v-1d081212]:active {
882
+ background: var(--kds-color-background-danger-active);
883
+ }
884
+ &.disabled[data-v-1d081212] {
885
+ background: var(--kds-color-background-danger-initial);
886
+ }
887
+ }
888
+ &.disabled {
889
+ &[data-v-1d081212] {
890
+ color: var(--kds-color-text-and-icon-disabled);
891
+ cursor: default;
892
+ }
893
+ .shortcut[data-v-1d081212],
894
+ .subtext[data-v-1d081212] {
895
+ color: var(--kds-color-text-and-icon-disabled);
896
+ }
897
+ }
898
+ }
899
+
900
+ .kds-list-item-divider[data-v-3ee92695] {
901
+ width: 100%;
902
+ padding: 0;
903
+ margin: 0 0 var(--kds-spacing-container-0-12x);
904
+ border: none;
905
+ border-bottom: var(--kds-border-base-subtle);
906
+ }
907
+
908
+ .kds-list-item-section-title {
909
+ &[data-v-53382531] {
910
+ display: flex;
911
+ gap: var(--kds-spacing-container-0-25x);
912
+ align-items: center;
913
+ width: 100%;
914
+ min-height: var(--kds-dimension-component-height-1-5x);
915
+ padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
916
+ color: var(--kds-color-text-and-icon-muted);
917
+ }
918
+ .icon[data-v-53382531] {
919
+ display: flex;
920
+ flex-shrink: 0;
921
+ align-items: center;
922
+ }
923
+ .label[data-v-53382531] {
924
+ flex: 1 1 auto;
925
+ min-width: 0;
926
+ overflow: hidden;
927
+ text-overflow: ellipsis;
928
+ font: var(--kds-font-base-title-xsmall);
929
+ white-space: nowrap;
930
+ }
931
+ }
932
+
933
+ .kds-list-container {
934
+ &[data-v-1178b83b] {
935
+ display: flex;
936
+ flex-direction: column;
937
+ gap: var(--kds-spacing-container-0-10x);
938
+ min-width: var(--kds-dimension-component-width-12x);
939
+ padding: var(--kds-spacing-container-0-25x);
940
+ overflow-y: auto;
941
+ }
942
+ &[data-v-1178b83b]:focus-visible {
943
+ outline: var(--kds-border-action-focused);
944
+ outline-offset: var(--kds-spacing-offset-focus);
945
+ border-radius: var(--kds-border-radius-container-0-31x);
946
+ }
947
+ }
948
+ .kds-list-container-empty[data-v-1178b83b] {
949
+ display: flex;
950
+ justify-content: center;
951
+ }
952
+
953
+ .kds-popover {
954
+ &[data-v-09124386] {
955
+ padding: 0;
956
+ margin: 0;
957
+ overflow: visible;
958
+ font: inherit;
959
+ color: inherit;
960
+ background-color: transparent;
961
+ border: none;
962
+ border-radius: 0;
963
+ box-shadow: none;
964
+
965
+ /* noinspection CssInvalidFunction */
966
+
967
+ /* noinspection CssInvalidFunction,CssInvalidAtRule */
968
+
969
+ /* noinspection CssInvalidFunction,CssInvalidAtRule */
970
+
971
+ /* noinspection CssInvalidFunction,CssInvalidAtRule */
972
+
973
+ /* noinspection CssInvalidFunction,CssInvalidAtRule */
974
+ }
975
+ &.full-width[data-v-09124386] {
976
+ min-inline-size: anchor-size(width);
977
+ }
978
+ &.floating.top-right[data-v-09124386] {
979
+ inset: auto anchor(right) anchor(top) auto;
980
+ margin: var(--kds-spacing-container-0-25x) 0
981
+ var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
982
+ position-try-fallbacks:
983
+ --kds-popover-try-top-left, --kds-popover-try-bottom-right,
984
+ --kds-popover-try-bottom-left, --kds-popover-try-top-right;
985
+ }
986
+ &.floating.top-left[data-v-09124386] {
987
+ inset: auto auto anchor(top) anchor(left);
988
+ margin: var(--kds-spacing-container-0-25x)
989
+ var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
990
+ position-try-fallbacks:
991
+ --kds-popover-try-top-right, --kds-popover-try-bottom-left,
992
+ --kds-popover-try-bottom-right, --kds-popover-try-top-left;
993
+ }
994
+ &.floating.bottom-right[data-v-09124386] {
995
+ inset: anchor(bottom) anchor(right) auto auto;
996
+ margin: var(--kds-spacing-container-0-25x) 0
997
+ var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
998
+ position-try-fallbacks:
999
+ --kds-popover-try-bottom-left, --kds-popover-try-top-right,
1000
+ --kds-popover-try-top-left, --kds-popover-try-bottom-right;
1001
+ }
1002
+ &.floating.bottom-left[data-v-09124386] {
1003
+ inset: anchor(bottom) auto auto anchor(left);
1004
+ margin: var(--kds-spacing-container-0-25x)
1005
+ var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
1006
+ position-try-fallbacks:
1007
+ --kds-popover-try-bottom-right, --kds-popover-try-top-left,
1008
+ --kds-popover-try-top-right, --kds-popover-try-bottom-left;
1009
+ }
1010
+ }
1011
+
1012
+ /* noinspection CssInvalidFunction,CssInvalidAtRule */
1013
+ @position-try --kds-popover-try-top-right {
1014
+ inset: auto anchor(right) anchor(top) auto;
1015
+ margin: var(--kds-spacing-container-0-25x) 0
1016
+ var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
1017
+ }
1018
+
1019
+ /* noinspection CssInvalidFunction,CssInvalidAtRule */
1020
+ @position-try --kds-popover-try-top-left {
1021
+ inset: auto auto anchor(top) anchor(left);
1022
+ margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
1023
+ var(--kds-spacing-container-0-25x) 0;
1024
+ }
1025
+
1026
+ /* noinspection CssInvalidFunction,CssInvalidAtRule */
1027
+ @position-try --kds-popover-try-bottom-right {
1028
+ inset: anchor(bottom) anchor(right) auto auto;
1029
+ margin: var(--kds-spacing-container-0-25x) 0
1030
+ var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
1031
+ }
1032
+
1033
+ /* noinspection CssInvalidFunction,CssInvalidAtRule */
1034
+ @position-try --kds-popover-try-bottom-left {
1035
+ inset: anchor(bottom) auto auto anchor(left);
1036
+ margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
1037
+ var(--kds-spacing-container-0-25x) 0;
1038
+ }
1039
+ .kds-popover-default-content[data-v-09124386] {
1040
+ padding: var(--kds-spacing-container-0-75x);
1041
+ font: var(--kds-font-base-body-small);
1042
+ color: var(--kds-color-text-and-icon-neutral);
1043
+ background-color: var(--kds-color-surface-default);
1044
+ border-radius: var(--kds-border-radius-container-0-37x);
1045
+ box-shadow: var(--kds-elevation-level-3);
1046
+ }
1047
+
1048
+ .kds-menu-container[data-v-23e9404d] {
1049
+ max-width: var(--kds-dimension-component-width-20x);
1050
+ background-color: var(--kds-color-surface-default);
1051
+ border-radius: var(--kds-border-radius-container-0-50x);
1052
+ box-shadow: var(--kds-elevation-level-3);
1053
+ }
1054
+
732
1055
  .kds-label-wrapper[data-v-1a5dc1ba] {
733
1056
  display: flex;
734
1057
  gap: var(--kds-spacing-container-0-12x);
@@ -1057,149 +1380,54 @@ html.kds-legacy {
1057
1380
  cursor: default;
1058
1381
  }
1059
1382
  &.disabled.selected[data-v-93f3f577] {
1060
- color: var(--kds-color-text-and-icon-disabled);
1061
- border: var(--kds-border-action-disabled);
1062
- }
1063
- }
1064
- .option-label[data-v-93f3f577] {
1065
- min-width: 0;
1066
- padding: 0 var(--kds-spacing-container-0-12x);
1067
- overflow: hidden;
1068
- text-overflow: ellipsis;
1069
- font: inherit;
1070
- white-space: nowrap;
1071
- }
1072
-
1073
- .value-switch[data-v-666d4c10] {
1074
- display: flex;
1075
- flex-direction: column;
1076
- align-items: flex-start;
1077
- padding: 0;
1078
- margin: 0;
1079
- border: none;
1080
- }
1081
- .options {
1082
- &[data-v-666d4c10] {
1083
- display: flex;
1084
- flex-flow: row nowrap;
1085
- gap: var(--kds-spacing-container-none);
1086
- align-items: flex-start;
1087
- width: fit-content;
1088
- min-width: 0;
1089
- max-width: 100%;
1090
- padding: calc(
1091
- var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
1092
- );
1093
- overflow: hidden;
1094
- background: var(--kds-color-surface-muted);
1095
- border: var(--kds-border-action-transparent);
1096
- border-radius: var(--kds-border-radius-container-0-37x);
1097
- box-shadow: var(--kds-fake-border-xs-muted);
1098
- }
1099
- &[data-v-666d4c10]:has(:focus-visible) {
1100
- outline: var(--kds-border-action-focused);
1101
- outline-offset: var(--kds-spacing-offset-focus);
1102
- border-radius: var(--kds-border-radius-container-0-44x);
1103
- }
1104
- &.error[data-v-666d4c10] {
1105
- border: var(--kds-border-action-error);
1106
- box-shadow: none;
1107
- }
1108
- }
1109
-
1110
- .kds-popover {
1111
- &[data-v-9125d023] {
1112
- padding: 0;
1113
- margin: 0;
1114
- overflow: visible;
1115
- font: inherit;
1116
- color: inherit;
1117
- background-color: transparent;
1118
- border: none;
1119
- border-radius: 0;
1120
- box-shadow: none;
1121
-
1122
- /* noinspection CssInvalidFunction */
1123
-
1124
- /* noinspection CssInvalidFunction,CssInvalidAtRule */
1125
-
1126
- /* noinspection CssInvalidFunction,CssInvalidAtRule */
1127
-
1128
- /* noinspection CssInvalidFunction,CssInvalidAtRule */
1129
-
1130
- /* noinspection CssInvalidFunction,CssInvalidAtRule */
1131
- }
1132
- &.full-width[data-v-9125d023] {
1133
- min-inline-size: anchor-size(width);
1134
- }
1135
- &.floating.top-right[data-v-9125d023] {
1136
- inset: auto anchor(right) anchor(top) auto;
1137
- margin: var(--kds-spacing-container-0-25x) 0
1138
- var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
1139
- position-try-fallbacks:
1140
- --kds-popover-try-top-left, --kds-popover-try-bottom-right,
1141
- --kds-popover-try-bottom-left, --kds-popover-try-top-right;
1142
- }
1143
- &.floating.top-left[data-v-9125d023] {
1144
- inset: auto auto anchor(top) anchor(left);
1145
- margin: var(--kds-spacing-container-0-25x)
1146
- var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
1147
- position-try-fallbacks:
1148
- --kds-popover-try-top-right, --kds-popover-try-bottom-left,
1149
- --kds-popover-try-bottom-right, --kds-popover-try-top-left;
1150
- }
1151
- &.floating.bottom-right[data-v-9125d023] {
1152
- inset: anchor(bottom) anchor(right) auto auto;
1153
- margin: var(--kds-spacing-container-0-25x) 0
1154
- var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
1155
- position-try-fallbacks:
1156
- --kds-popover-try-bottom-left, --kds-popover-try-top-right,
1157
- --kds-popover-try-top-left, --kds-popover-try-bottom-right;
1158
- }
1159
- &.floating.bottom-left[data-v-9125d023] {
1160
- inset: anchor(bottom) auto auto anchor(left);
1161
- margin: var(--kds-spacing-container-0-25x)
1162
- var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
1163
- position-try-fallbacks:
1164
- --kds-popover-try-bottom-right, --kds-popover-try-top-left,
1165
- --kds-popover-try-top-right, --kds-popover-try-bottom-left;
1383
+ color: var(--kds-color-text-and-icon-disabled);
1384
+ border: var(--kds-border-action-disabled);
1166
1385
  }
1167
1386
  }
1168
-
1169
- /* noinspection CssInvalidFunction,CssInvalidAtRule */
1170
- @position-try --kds-popover-try-top-right {
1171
- inset: auto anchor(right) anchor(top) auto;
1172
- margin: var(--kds-spacing-container-0-25x) 0
1173
- var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
1387
+ .option-label[data-v-93f3f577] {
1388
+ min-width: 0;
1389
+ padding: 0 var(--kds-spacing-container-0-12x);
1390
+ overflow: hidden;
1391
+ text-overflow: ellipsis;
1392
+ font: inherit;
1393
+ white-space: nowrap;
1174
1394
  }
1175
1395
 
1176
- /* noinspection CssInvalidFunction,CssInvalidAtRule */
1177
- @position-try --kds-popover-try-top-left {
1178
- inset: auto auto anchor(top) anchor(left);
1179
- margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
1180
- var(--kds-spacing-container-0-25x) 0;
1396
+ .value-switch[data-v-666d4c10] {
1397
+ display: flex;
1398
+ flex-direction: column;
1399
+ align-items: flex-start;
1400
+ padding: 0;
1401
+ margin: 0;
1402
+ border: none;
1181
1403
  }
1182
-
1183
- /* noinspection CssInvalidFunction,CssInvalidAtRule */
1184
- @position-try --kds-popover-try-bottom-right {
1185
- inset: anchor(bottom) anchor(right) auto auto;
1186
- margin: var(--kds-spacing-container-0-25x) 0
1187
- var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
1404
+ .options {
1405
+ &[data-v-666d4c10] {
1406
+ display: flex;
1407
+ flex-flow: row nowrap;
1408
+ gap: var(--kds-spacing-container-none);
1409
+ align-items: flex-start;
1410
+ width: fit-content;
1411
+ min-width: 0;
1412
+ max-width: 100%;
1413
+ padding: calc(
1414
+ var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
1415
+ );
1416
+ overflow: hidden;
1417
+ background: var(--kds-color-surface-muted);
1418
+ border: var(--kds-border-action-transparent);
1419
+ border-radius: var(--kds-border-radius-container-0-37x);
1420
+ box-shadow: var(--kds-fake-border-xs-muted);
1421
+ }
1422
+ &[data-v-666d4c10]:has(:focus-visible) {
1423
+ outline: var(--kds-border-action-focused);
1424
+ outline-offset: var(--kds-spacing-offset-focus);
1425
+ border-radius: var(--kds-border-radius-container-0-44x);
1188
1426
  }
1189
-
1190
- /* noinspection CssInvalidFunction,CssInvalidAtRule */
1191
- @position-try --kds-popover-try-bottom-left {
1192
- inset: anchor(bottom) auto auto anchor(left);
1193
- margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
1194
- var(--kds-spacing-container-0-25x) 0;
1427
+ &.error[data-v-666d4c10] {
1428
+ border: var(--kds-border-action-error);
1429
+ box-shadow: none;
1195
1430
  }
1196
- .kds-popover-default-content[data-v-9125d023] {
1197
- padding: var(--kds-spacing-container-0-75x);
1198
- font: var(--kds-font-base-body-small);
1199
- color: var(--kds-color-text-and-icon-neutral);
1200
- background-color: var(--kds-color-surface-default);
1201
- border-radius: var(--kds-border-radius-container-0-37x);
1202
- box-shadow: var(--kds-elevation-level-3);
1203
1431
  }
1204
1432
 
1205
1433
  .kds-form-field[data-v-5d99c134] {
@@ -1513,225 +1741,6 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
1513
1741
  padding-right: var(--kds-spacing-container-0-12x);
1514
1742
  }
1515
1743
 
1516
- .kds-empty-state[data-v-02149081] {
1517
- display: flex;
1518
- flex-direction: column;
1519
- gap: var(--kds-spacing-container-0-5x);
1520
- align-items: center;
1521
- max-width: 280px;
1522
- padding: var(--kds-spacing-container-0-5x);
1523
- }
1524
- .kds-empty-state-headline[data-v-02149081] {
1525
- margin: 0;
1526
- font: var(--kds-font-base-title-small);
1527
- color: var(--kds-color-text-and-icon-muted);
1528
- text-align: center;
1529
- }
1530
- .kds-empty-state-description[data-v-02149081] {
1531
- margin: 0;
1532
- font: var(--kds-font-base-body-small);
1533
- color: var(--kds-color-text-and-icon-muted);
1534
- text-align: center;
1535
- }
1536
- .kds-empty-state-action[data-v-02149081] {
1537
- margin-top: var(--kds-spacing-container-0-12x);
1538
- }
1539
-
1540
- .kds-list-item {
1541
- &[data-v-fca25fc2] {
1542
- position: relative;
1543
- display: flex;
1544
- gap: var(--kds-spacing-container-0-5x);
1545
- align-items: center;
1546
- width: 100%;
1547
- padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
1548
- color: var(--kds-color-text-and-icon-neutral);
1549
- cursor: pointer;
1550
- user-select: none;
1551
- background: var(--kds-color-background-neutral-initial);
1552
- border: none;
1553
- border-radius: var(--kds-border-radius-container-0-31x);
1554
- }
1555
- &.small {
1556
- &[data-v-fca25fc2] {
1557
- gap: var(--kds-spacing-container-0-25x);
1558
- align-items: flex-start;
1559
- padding: var(--kds-spacing-container-0-25x)
1560
- var(--kds-spacing-container-0-5x);
1561
- font: var(--kds-font-base-interactive-small);
1562
- }
1563
- .accessory[data-v-fca25fc2] {
1564
- display: flex;
1565
- padding: var(--kds-spacing-container-0-12x) 0;
1566
- }
1567
- }
1568
- &.large {
1569
- &[data-v-fca25fc2] {
1570
- min-height: var(--kds-dimension-component-height-2-5x);
1571
- font: var(--kds-font-base-interactive-small-strong);
1572
- }
1573
- .accessory[data-v-fca25fc2] {
1574
- display: flex;
1575
- align-items: center;
1576
- }
1577
- }
1578
- .content {
1579
- &[data-v-fca25fc2] {
1580
- display: flex;
1581
- flex: 1 1 auto;
1582
- flex-direction: column;
1583
- min-width: 0;
1584
- }
1585
- .label {
1586
- &[data-v-fca25fc2] {
1587
- overflow: hidden;
1588
- text-overflow: ellipsis;
1589
- font: inherit;
1590
- white-space: nowrap;
1591
- }
1592
- .prefix[data-v-fca25fc2] {
1593
- flex-shrink: 0;
1594
- }
1595
- .special[data-v-fca25fc2] {
1596
- font: var(--kds-font-base-interactive-small-italic);
1597
- }
1598
- }
1599
- .subtext[data-v-fca25fc2] {
1600
- display: -webkit-box;
1601
- overflow: hidden;
1602
- -webkit-line-clamp: 2;
1603
- line-clamp: 2;
1604
- font: var(--kds-font-base-subtext-small);
1605
- color: var(--kds-color-text-and-icon-muted);
1606
- -webkit-box-orient: vertical;
1607
- }
1608
- }
1609
- .trailing-item {
1610
- &[data-v-fca25fc2] {
1611
- display: flex;
1612
- flex-shrink: 0;
1613
- gap: var(--kds-spacing-container-0-12x);
1614
- align-items: center;
1615
- align-self: center;
1616
- justify-content: flex-end;
1617
- }
1618
- .shortcut[data-v-fca25fc2] {
1619
- flex-shrink: 0;
1620
- font: var(--kds-font-base-interactive-xsmall-strong);
1621
- color: var(--kds-color-text-and-icon-muted);
1622
- text-align: right;
1623
- white-space: nowrap;
1624
- }
1625
- }
1626
- &[data-v-fca25fc2]:hover:not(.disabled),
1627
- &.active[data-v-fca25fc2]:not(.disabled) {
1628
- background: var(--kds-color-background-neutral-hover);
1629
- }
1630
- &[data-v-fca25fc2]:active:not(.disabled) {
1631
- background: var(--kds-color-background-neutral-active);
1632
- }
1633
- &.selected {
1634
- &[data-v-fca25fc2] {
1635
- color: var(--kds-color-text-and-icon-selected);
1636
- background: var(--kds-color-background-selected-initial);
1637
- }
1638
- .subtext[data-v-fca25fc2] {
1639
- color: var(--kds-color-text-and-icon-selected);
1640
- }
1641
- &[data-v-fca25fc2]:hover,
1642
- &.active[data-v-fca25fc2] {
1643
- background: var(--kds-color-background-selected-hover);
1644
- }
1645
- &[data-v-fca25fc2]:active {
1646
- background: var(--kds-color-background-selected-active);
1647
- }
1648
- &.disabled[data-v-fca25fc2] {
1649
- background: var(--kds-color-background-selected-initial);
1650
- }
1651
- }
1652
- &.missing {
1653
- &[data-v-fca25fc2] {
1654
- color: var(--kds-color-text-and-icon-danger);
1655
- background: var(--kds-color-background-danger-initial);
1656
- }
1657
- .subtext[data-v-fca25fc2] {
1658
- color: var(--kds-color-text-and-icon-danger);
1659
- }
1660
- &[data-v-fca25fc2]:hover,
1661
- &.active[data-v-fca25fc2] {
1662
- background: var(--kds-color-background-danger-hover);
1663
- }
1664
- &[data-v-fca25fc2]:active {
1665
- background: var(--kds-color-background-danger-active);
1666
- }
1667
- &.disabled[data-v-fca25fc2] {
1668
- background: var(--kds-color-background-danger-initial);
1669
- }
1670
- }
1671
- &.disabled {
1672
- &[data-v-fca25fc2] {
1673
- color: var(--kds-color-text-and-icon-disabled);
1674
- cursor: default;
1675
- }
1676
- .shortcut[data-v-fca25fc2],
1677
- .subtext[data-v-fca25fc2] {
1678
- color: var(--kds-color-text-and-icon-disabled);
1679
- }
1680
- }
1681
- }
1682
-
1683
- .kds-list-item-divider[data-v-3ee92695] {
1684
- width: 100%;
1685
- padding: 0;
1686
- margin: 0 0 var(--kds-spacing-container-0-12x);
1687
- border: none;
1688
- border-bottom: var(--kds-border-base-subtle);
1689
- }
1690
-
1691
- .kds-list-item-section-title {
1692
- &[data-v-53382531] {
1693
- display: flex;
1694
- gap: var(--kds-spacing-container-0-25x);
1695
- align-items: center;
1696
- width: 100%;
1697
- min-height: var(--kds-dimension-component-height-1-5x);
1698
- padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
1699
- color: var(--kds-color-text-and-icon-muted);
1700
- }
1701
- .icon[data-v-53382531] {
1702
- display: flex;
1703
- flex-shrink: 0;
1704
- align-items: center;
1705
- }
1706
- .label[data-v-53382531] {
1707
- flex: 1 1 auto;
1708
- min-width: 0;
1709
- overflow: hidden;
1710
- text-overflow: ellipsis;
1711
- font: var(--kds-font-base-title-xsmall);
1712
- white-space: nowrap;
1713
- }
1714
- }
1715
-
1716
- .kds-list-container {
1717
- &[data-v-276a6202] {
1718
- display: flex;
1719
- flex-direction: column;
1720
- gap: var(--kds-spacing-container-0-10x);
1721
- padding: var(--kds-spacing-container-0-25x);
1722
- overflow-y: auto;
1723
- }
1724
- &[data-v-276a6202]:focus-visible {
1725
- outline: var(--kds-border-action-focused);
1726
- outline-offset: var(--kds-spacing-offset-focus);
1727
- border-radius: var(--kds-border-radius-container-0-31x);
1728
- }
1729
- }
1730
- .kds-list-container-empty[data-v-276a6202] {
1731
- display: flex;
1732
- justify-content: center;
1733
- }
1734
-
1735
1744
  .kds-dropdown-container[data-v-15e753c9] {
1736
1745
  display: flex;
1737
1746
  flex-direction: column;
@@ -1764,7 +1773,7 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
1764
1773
  }
1765
1774
 
1766
1775
  .info-toggle-button {
1767
- &[data-v-f98c9924] {
1776
+ &[data-v-d865cc89] {
1768
1777
  --bg-initial: transparent;
1769
1778
  --bg-hover: var(--kds-color-background-neutral-hover);
1770
1779
  --bg-active: var(--kds-color-background-neutral-active);
@@ -1785,20 +1794,20 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
1785
1794
  border-radius: var(--kds-border-radius-container-0-12x);
1786
1795
  opacity: 1;
1787
1796
  }
1788
- &.hidden[data-v-f98c9924] {
1797
+ &.hidden[data-v-d865cc89] {
1789
1798
  opacity: 0;
1790
1799
  }
1791
- &[data-v-f98c9924]:focus-visible {
1800
+ &[data-v-d865cc89]:focus-visible {
1792
1801
  outline: var(--kds-border-action-focused);
1793
1802
  outline-offset: var(--kds-spacing-offset-focus);
1794
1803
  }
1795
- &[data-v-f98c9924]:hover {
1804
+ &[data-v-d865cc89]:hover {
1796
1805
  background-color: var(--bg-hover);
1797
1806
  }
1798
- &[data-v-f98c9924]:active {
1807
+ &[data-v-d865cc89]:active {
1799
1808
  background-color: var(--bg-active);
1800
1809
  }
1801
- &.selected[data-v-f98c9924] {
1810
+ &.selected[data-v-d865cc89] {
1802
1811
  --bg-initial: var(--kds-color-background-selected-initial);
1803
1812
  --bg-hover: var(--kds-color-background-selected-hover);
1804
1813
  --bg-active: var(--kds-color-background-selected-active);
@@ -1820,7 +1829,7 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
1820
1829
  }
1821
1830
 
1822
1831
  .variable-toggle-button {
1823
- &[data-v-1541cbb3] {
1832
+ &[data-v-f362911c] {
1824
1833
  --bg-initial: var(--kds-color-background-neutral-initial);
1825
1834
  --bg-hover: var(--kds-color-background-neutral-hover);
1826
1835
  --bg-active: var(--kds-color-background-neutral-active);
@@ -1841,27 +1850,27 @@ textarea[data-v-a2df5fed]::-webkit-scrollbar {
1841
1850
  border-radius: var(--kds-border-radius-container-0-12x);
1842
1851
  opacity: 1;
1843
1852
  }
1844
- &.hidden[data-v-1541cbb3] {
1853
+ &.hidden[data-v-f362911c] {
1845
1854
  opacity: 0;
1846
1855
  }
1847
- &[data-v-1541cbb3]:focus-visible {
1856
+ &[data-v-f362911c]:focus-visible {
1848
1857
  outline: var(--kds-border-action-focused);
1849
1858
  outline-offset: var(--kds-spacing-offset-focus);
1850
1859
  }
1851
- &[data-v-1541cbb3]:hover {
1860
+ &[data-v-f362911c]:hover {
1852
1861
  background-color: var(--bg-hover);
1853
1862
  }
1854
- &[data-v-1541cbb3]:active {
1863
+ &[data-v-f362911c]:active {
1855
1864
  background-color: var(--bg-active);
1856
1865
  }
1857
- &.pressed-or-set[data-v-1541cbb3] {
1866
+ &.pressed-or-set[data-v-f362911c] {
1858
1867
  --bg-initial: var(--kds-color-background-selected-initial);
1859
1868
  --bg-hover: var(--kds-color-background-selected-hover);
1860
1869
  --bg-active: var(--kds-color-background-selected-active);
1861
1870
  --border: var(--kds-border-action-selected);
1862
1871
  --icon-color: var(--kds-color-text-and-icon-success);
1863
1872
  }
1864
- &.error[data-v-1541cbb3] {
1873
+ &.error[data-v-f362911c] {
1865
1874
  --bg-initial: var(--kds-color-background-danger-initial);
1866
1875
  --bg-hover: var(--kds-color-background-danger-hover);
1867
1876
  --bg-active: var(--kds-color-background-danger-active);