@medyll/idae-slotui-svelte 0.64.0 → 0.65.0

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/index.d.ts +5 -5
  2. package/dist/index.js +5 -5
  3. package/dist/slotui-css/menu-list.css +58 -58
  4. package/dist/slotui-css/menu-list.min.css +58 -58
  5. package/dist/slotui-css/slotui-css.css +88 -88
  6. package/dist/slotui-css/slotui-min-css.css +88 -88
  7. package/dist/ui/menuList/MenuList.svelte +61 -61
  8. package/dist/ui/menuList/MenuListItem.svelte +63 -63
  9. package/dist/ui/menuList/MenuListTitle.svelte +59 -59
  10. package/dist/ui/menuList/menu-list.scss +21 -21
  11. package/package.json +3 -3
package/dist/slotui-css/slotui-min-css.css CHANGED
@@ -471,6 +471,36 @@ dialog.window .ctrlZone {
471
471
  display: flex;
472
472
  }
473
473
 
474
+ /** toolbar.scss ----------------*/
475
+ :root {
476
+ --toolbar-padding: var(--sld-toolbar-padding, var(--box-density-1, var(--sld-pad-tiny)));
477
+ --toolbar-gap: var(--sld-pad-tiny);
478
+ --toolbar-divider-border: 1px solid red;
479
+ --toolbar-divider-height: 1rem;
480
+ --toolbar-vertical-divider-border: 1px solid green;
481
+ --toolbar-vertical-divider-width: 1rem;
482
+ }
483
+
484
+ .toolbar {
485
+ display: flex;
486
+ flex-direction: row;
487
+ align-items: center;
488
+ padding: var(--toolbar-padding);
489
+ gap: var(--toolbar-gap);
490
+ }
491
+ .toolbar divider {
492
+ border: var(--toolbar-divider-border);
493
+ height: var(--toolbar-divider-height);
494
+ }
495
+
496
+ .toolbar.vertical {
497
+ flex-direction: column;
498
+ }
499
+ .toolbar.vertical divider {
500
+ border: var(--toolbar-vertical-divider-border);
501
+ width: var(--toolbar-vertical-divider-width);
502
+ }
503
+
474
504
  /** tree.scss ----------------*/
475
505
  :root {
476
506
  --tree-cell-border: 1px solid transparent;
@@ -523,36 +553,6 @@ dialog.window .ctrlZone {
523
553
  border: 1px solid var(--sld-color-primary-alpha-mid);
524
554
  }
525
555
 
526
- /** toolbar.scss ----------------*/
527
- :root {
528
- --toolbar-padding: var(--sld-toolbar-padding, var(--box-density-1, var(--sld-pad-tiny)));
529
- --toolbar-gap: var(--sld-pad-tiny);
530
- --toolbar-divider-border: 1px solid red;
531
- --toolbar-divider-height: 1rem;
532
- --toolbar-vertical-divider-border: 1px solid green;
533
- --toolbar-vertical-divider-width: 1rem;
534
- }
535
-
536
- .toolbar {
537
- display: flex;
538
- flex-direction: row;
539
- align-items: center;
540
- padding: var(--toolbar-padding);
541
- gap: var(--toolbar-gap);
542
- }
543
- .toolbar divider {
544
- border: var(--toolbar-divider-border);
545
- height: var(--toolbar-divider-height);
546
- }
547
-
548
- .toolbar.vertical {
549
- flex-direction: column;
550
- }
551
- .toolbar.vertical divider {
552
- border: var(--toolbar-vertical-divider-border);
553
- width: var(--toolbar-vertical-divider-width);
554
- }
555
-
556
556
  /** toggle-bar.scss ----------------*/
557
557
  :root {
558
558
  --toggle-bar-padding: var(--sld-commandbar-padding, var(--box-density-1));
@@ -818,149 +818,149 @@ dialog.window .ctrlZone {
818
818
 
819
819
  /** menu-list.scss ----------------*/
820
820
  :root {
821
- --menu-list-padding: var(--sld-pad-tiny);
822
- --menu-list-item-padding: 0;
823
- --menu-list-item-radius: var(--sld-radius-small);
824
- --menu-list-item-selected-background: var(--sld-selected-background-color);
825
- --menu-list-item-action-display: flex;
826
- --menu-list-item-action-justify-content: center;
827
- --menu-list-grid-items-count: 0;
821
+ --menulist-padding: var(--sld-pad-tiny);
822
+ --menulist-item-padding: 0;
823
+ --menulist-item-radius: var(--sld-radius-small);
824
+ --menulist-item-selected-background: var(--sld-selected-background-color);
825
+ --menulist-item-action-display: flex;
826
+ --menulist-item-action-justify-content: center;
827
+ --menulist-grid-items-count: 0;
828
828
  }
829
829
 
830
- .menu-list {
830
+ .slotui-menulist {
831
831
  margin: 0;
832
832
  cursor: pointer;
833
833
  display: flex;
834
834
  flex-direction: column;
835
835
  align-items: end;
836
- padding: var(--menu-list-padding);
836
+ padding: var(--menulist-padding);
837
837
  }
838
- .menu-list.grid {
838
+ .slotui-menulist.grid {
839
839
  display: grid;
840
840
  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr));
841
841
  }
842
- .menu-list li.menu-list-title,
843
- .menu-list a.menu-list-title {
842
+ .slotui-menulist li.menulist-title,
843
+ .slotui-menulist a.menulist-title {
844
844
  font-weight: bold;
845
845
  }
846
- .menu-list .menu-list-item[variant*=square] {
846
+ .slotui-menulist .menulist-item[variant*=square] {
847
847
  aspect-ratio: 1/1 !important;
848
848
  height: auto;
849
849
  }
850
- .menu-list .menu-list-item[variant*=rounded] {
850
+ .slotui-menulist .menulist-item[variant*=rounded] {
851
851
  border-radius: 50%;
852
852
  }
853
- .menu-list .menu-list-item {
853
+ .slotui-menulist .menulist-item {
854
854
  width: var(--sld-width-small);
855
855
  }
856
- .menu-list .menu-list-item {
856
+ .slotui-menulist .menulist-item {
857
857
  --preset-width: var(--sld-width-small);
858
858
  }
859
- .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
859
+ .slotui-menulist .menulist-item[width=tiny], .slotui-menulist .menulist-item.width-tiny {
860
860
  --preset-width: var(--sld-width-tiny);
861
861
  width: var(--sld-width-tiny) !important;
862
862
  }
863
- .menu-list .menu-list-item[width=mini], .menu-list .menu-list-item.width-mini {
863
+ .slotui-menulist .menulist-item[width=mini], .slotui-menulist .menulist-item.width-mini {
864
864
  --preset-width: var(--sld-width-mini);
865
865
  width: var(--sld-width-mini) !important;
866
866
  }
867
- .menu-list .menu-list-item[width=small], .menu-list .menu-list-item.width-small {
867
+ .slotui-menulist .menulist-item[width=small], .slotui-menulist .menulist-item.width-small {
868
868
  --preset-width: var(--sld-width-small);
869
869
  width: var(--sld-width-small) !important;
870
870
  }
871
- .menu-list .menu-list-item[width=med], .menu-list .menu-list-item.width-med {
871
+ .slotui-menulist .menulist-item[width=med], .slotui-menulist .menulist-item.width-med {
872
872
  --preset-width: var(--sld-width-med);
873
873
  width: var(--sld-width-med) !important;
874
874
  }
875
- .menu-list .menu-list-item[width=kind], .menu-list .menu-list-item.width-kind {
875
+ .slotui-menulist .menulist-item[width=kind], .slotui-menulist .menulist-item.width-kind {
876
876
  --preset-width: var(--sld-width-kind);
877
877
  width: var(--sld-width-kind) !important;
878
878
  }
879
- .menu-list .menu-list-item[width=full], .menu-list .menu-list-item.width-full {
879
+ .slotui-menulist .menulist-item[width=full], .slotui-menulist .menulist-item.width-full {
880
880
  --preset-width: var(--sld-width-full);
881
881
  width: var(--sld-width-full) !important;
882
882
  }
883
- .menu-list .menu-list-item[width=auto], .menu-list .menu-list-item.width-auto {
883
+ .slotui-menulist .menulist-item[width=auto], .slotui-menulist .menulist-item.width-auto {
884
884
  --preset-width: var(--sld-width-auto);
885
885
  width: var(--sld-width-auto) !important;
886
886
  }
887
- .menu-list .menu-list-item[width=default], .menu-list .menu-list-item.width-default {
887
+ .slotui-menulist .menulist-item[width=default], .slotui-menulist .menulist-item.width-default {
888
888
  --preset-width: var(--sld-width-default);
889
889
  width: var(--sld-width-default) !important;
890
890
  }
891
- .menu-list .menu-list-item {
891
+ .slotui-menulist .menulist-item {
892
892
  min-height: var(--preset-tall-small);
893
893
  height: var(--preset-tall-small);
894
894
  }
895
- .menu-list .menu-list-item {
895
+ .slotui-menulist .menulist-item {
896
896
  --preset-tall: var(--sld-tall-small);
897
897
  }
898
- .menu-list .menu-list-item[tall=tiny], .menu-list .menu-list-item.tall-tiny {
898
+ .slotui-menulist .menulist-item[tall=tiny], .slotui-menulist .menulist-item.tall-tiny {
899
899
  min-height: var(--sld-tall-tiny) !important;
900
900
  }
901
- .menu-list .menu-list-item[tall=mini], .menu-list .menu-list-item.tall-mini {
901
+ .slotui-menulist .menulist-item[tall=mini], .slotui-menulist .menulist-item.tall-mini {
902
902
  min-height: var(--sld-tall-mini) !important;
903
903
  }
904
- .menu-list .menu-list-item[tall=small], .menu-list .menu-list-item.tall-small {
904
+ .slotui-menulist .menulist-item[tall=small], .slotui-menulist .menulist-item.tall-small {
905
905
  min-height: var(--sld-tall-small) !important;
906
906
  }
907
- .menu-list .menu-list-item[tall=med], .menu-list .menu-list-item.tall-med {
907
+ .slotui-menulist .menulist-item[tall=med], .slotui-menulist .menulist-item.tall-med {
908
908
  min-height: var(--sld-tall-med) !important;
909
909
  }
910
- .menu-list .menu-list-item[tall=kind], .menu-list .menu-list-item.tall-kind {
910
+ .slotui-menulist .menulist-item[tall=kind], .slotui-menulist .menulist-item.tall-kind {
911
911
  min-height: var(--sld-tall-kind) !important;
912
912
  }
913
- .menu-list .menu-list-item[tall=auto], .menu-list .menu-list-item.tall-auto {
913
+ .slotui-menulist .menulist-item[tall=auto], .slotui-menulist .menulist-item.tall-auto {
914
914
  min-height: var(--sld-tall-auto) !important;
915
915
  }
916
- .menu-list .menu-list-item[tall=default], .menu-list .menu-list-item.tall-default {
916
+ .slotui-menulist .menulist-item[tall=default], .slotui-menulist .menulist-item.tall-default {
917
917
  min-height: var(--sld-tall-default) !important;
918
918
  }
919
- .menu-list .menu-list-item {
919
+ .slotui-menulist .menulist-item {
920
920
  --preset-gutter: var(--sld-gutter-default);
921
921
  }
922
- .menu-list .menu-list-item [gutter=tiny], .menu-list .menu-list-item .gutter-tiny {
922
+ .slotui-menulist .menulist-item [gutter=tiny], .slotui-menulist .menulist-item .gutter-tiny {
923
923
  padding: var(--sld-gutter-tiny);
924
924
  gap: var(--sld-gutter-tiny);
925
925
  --preset-gutter: var(--sld-gutter-tiny);
926
926
  }
927
- .menu-list .menu-list-item [gutter=mini], .menu-list .menu-list-item .gutter-mini {
927
+ .slotui-menulist .menulist-item [gutter=mini], .slotui-menulist .menulist-item .gutter-mini {
928
928
  padding: var(--sld-gutter-mini);
929
929
  gap: var(--sld-gutter-mini);
930
930
  --preset-gutter: var(--sld-gutter-mini);
931
931
  }
932
- .menu-list .menu-list-item [gutter=small], .menu-list .menu-list-item .gutter-small {
932
+ .slotui-menulist .menulist-item [gutter=small], .slotui-menulist .menulist-item .gutter-small {
933
933
  padding: var(--sld-gutter-small);
934
934
  gap: var(--sld-gutter-small);
935
935
  --preset-gutter: var(--sld-gutter-small);
936
936
  }
937
- .menu-list .menu-list-item [gutter=med], .menu-list .menu-list-item .gutter-med {
937
+ .slotui-menulist .menulist-item [gutter=med], .slotui-menulist .menulist-item .gutter-med {
938
938
  padding: var(--sld-gutter-med);
939
939
  gap: var(--sld-gutter-med);
940
940
  --preset-gutter: var(--sld-gutter-med);
941
941
  }
942
- .menu-list .menu-list-item [gutter=kind], .menu-list .menu-list-item .gutter-kind {
942
+ .slotui-menulist .menulist-item [gutter=kind], .slotui-menulist .menulist-item .gutter-kind {
943
943
  padding: var(--sld-gutter-kind);
944
944
  gap: var(--sld-gutter-kind);
945
945
  --preset-gutter: var(--sld-gutter-kind);
946
946
  }
947
- .menu-list .menu-list-item [gutter=default], .menu-list .menu-list-item .gutter-default {
947
+ .slotui-menulist .menulist-item [gutter=default], .slotui-menulist .menulist-item .gutter-default {
948
948
  padding: var(--sld-gutter-default);
949
949
  gap: var(--sld-gutter-default);
950
950
  --preset-gutter: var(--sld-gutter-default);
951
951
  }
952
- .menu-list .menu-list-item:hover {
952
+ .slotui-menulist .menulist-item:hover {
953
953
  border-color: var(--sld-hover-border-color);
954
954
  background-color: var(--sld-background-disabled);
955
955
  }
956
- .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true] {
956
+ .slotui-menulist .menulist-item.selected, .slotui-menulist .menulist-item[aria-selected=true] {
957
957
  border-color: none;
958
958
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
959
959
  box-shadow: var(--sld-selected-shadow);
960
960
  }
961
- .menu-list .menu-list-item.selected .chip,
962
- .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .chip,
963
- .menu-list .menu-list-item[aria-selected=true] .menuItemChip {
961
+ .slotui-menulist .menulist-item.selected .chip,
962
+ .slotui-menulist .menulist-item.selected .menuItemChip, .slotui-menulist .menulist-item[aria-selected=true] .chip,
963
+ .slotui-menulist .menulist-item[aria-selected=true] .menuItemChip {
964
964
  position: absolute;
965
965
  min-height: 16px;
966
966
  height: 50%;
@@ -970,7 +970,7 @@ dialog.window .ctrlZone {
970
970
  left: 0;
971
971
  border: 1px solid var(--sld-color-primary-alpha-mid);
972
972
  }
973
- .menu-list .menu-list-item {
973
+ .slotui-menulist .menulist-item {
974
974
  text-decoration: none;
975
975
  overflow: hidden;
976
976
  display: flex;
@@ -979,10 +979,10 @@ dialog.window .ctrlZone {
979
979
  width: 100%;
980
980
  max-width: 100%;
981
981
  border: 1px solid transparent;
982
- border-radius: var(--menu-list-item-radius);
982
+ border-radius: var(--menulist-item-radius);
983
983
  align-self: flex-start;
984
984
  }
985
- .menu-list .menu-list-item::before {
985
+ .slotui-menulist .menulist-item::before {
986
986
  position: absolute;
987
987
  min-height: 16px;
988
988
  height: 45%;
@@ -995,7 +995,7 @@ dialog.window .ctrlZone {
995
995
  border: 1px solid transparent;
996
996
  content: " ";
997
997
  }
998
- .menu-list .menu-list-item .menu-list-item-icon {
998
+ .slotui-menulist .menulist-item .menulist-item-icon {
999
999
  width: 16px;
1000
1000
  max-width: 16px;
1001
1001
  text-align: center;
@@ -1005,29 +1005,29 @@ dialog.window .ctrlZone {
1005
1005
  justify-content: center;
1006
1006
  padding: 0 0.2rem;
1007
1007
  }
1008
- .menu-list .menu-list-item .menu-list-item-text {
1008
+ .slotui-menulist .menulist-item .menulist-item-text {
1009
1009
  flex: 1;
1010
1010
  }
1011
- .menu-list .menu-list-item .menu-list-item-text.wrap {
1011
+ .slotui-menulist .menulist-item .menulist-item-text.wrap {
1012
1012
  text-wrap: ellipsis;
1013
1013
  white-space: normal;
1014
1014
  overflow: hidden;
1015
1015
  }
1016
- .menu-list .menu-list-item .menu-list-item-action {
1017
- display: var(--menu-list-item-action-display);
1018
- justify-content: var(--menu-list-item-action-justify-content);
1016
+ .slotui-menulist .menulist-item .menulist-item-action {
1017
+ display: var(--menulist-item-action-display);
1018
+ justify-content: var(--menulist-item-action-justify-content);
1019
1019
  }
1020
1020
 
1021
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[aria-selected="true"] .menu-list-item-action) {
1021
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
1022
1022
  visibility: visible;
1023
1023
  }
1024
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[aria-selected="true"] .menu-list-item-action) {
1024
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
1025
1025
  visibility: visible;
1026
1026
  }
1027
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
1027
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item .menulist-item-action) {
1028
1028
  visibility: hidden;
1029
1029
  }
1030
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item .menu-list-item-action) {
1030
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
1031
1031
  visibility: hidden;
1032
1032
  }
1033
1033
 
package/dist/ui/menuList/MenuList.svelte CHANGED
@@ -100,11 +100,11 @@ function scrollToElement(target) {
100
100
  <ul
101
101
  bind:this={element}
102
102
  class:showLastOnSelected
103
- class="menu-list {className} {grid ? 'grid' : ''}"
103
+ class="slotui-menulist {className} {grid ? 'grid' : ''}"
104
104
  tabindex="0"
105
- style={`${style};var(--menu-list-grid-items-count):${grid ? grid : '0'}`}
105
+ style={`${style};var(--menulist-grid-items-count):${grid ? grid : '0'}`}
106
106
  {role}
107
- use:navigation={{ className: 'menu-list-item', selectedIndex: -1 }}
107
+ use:navigation={{ className: 'menulist-item', selectedIndex: -1 }}
108
108
  {...rest}
109
109
  >
110
110
  {#if menuListItems}
@@ -128,149 +128,149 @@ function scrollToElement(target) {
128
128
  </ul>
129
129
 
130
130
  <style >:root {
131
- --menu-list-padding: var(--sld-pad-tiny);
132
- --menu-list-item-padding: 0;
133
- --menu-list-item-radius: var(--sld-radius-small);
134
- --menu-list-item-selected-background: var(--sld-selected-background-color);
135
- --menu-list-item-action-display: flex;
136
- --menu-list-item-action-justify-content: center;
137
- --menu-list-grid-items-count: 0;
131
+ --menulist-padding: var(--sld-pad-tiny);
132
+ --menulist-item-padding: 0;
133
+ --menulist-item-radius: var(--sld-radius-small);
134
+ --menulist-item-selected-background: var(--sld-selected-background-color);
135
+ --menulist-item-action-display: flex;
136
+ --menulist-item-action-justify-content: center;
137
+ --menulist-grid-items-count: 0;
138
138
  }
139
139
 
140
- .menu-list {
140
+ .slotui-menulist {
141
141
  margin: 0;
142
142
  cursor: pointer;
143
143
  display: flex;
144
144
  flex-direction: column;
145
145
  align-items: end;
146
- padding: var(--menu-list-padding);
146
+ padding: var(--menulist-padding);
147
147
  }
148
- .menu-list.grid {
148
+ .slotui-menulist.grid {
149
149
  display: grid;
150
150
  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr));
151
151
  }
152
- .menu-list li.menu-list-title,
153
- .menu-list a.menu-list-title {
152
+ .slotui-menulist li.menulist-title,
153
+ .slotui-menulist a.menulist-title {
154
154
  font-weight: bold;
155
155
  }
156
- .menu-list .menu-list-item[variant*=square] {
156
+ .slotui-menulist .menulist-item[variant*=square] {
157
157
  aspect-ratio: 1/1 !important;
158
158
  height: auto;
159
159
  }
160
- .menu-list .menu-list-item[variant*=rounded] {
160
+ .slotui-menulist .menulist-item[variant*=rounded] {
161
161
  border-radius: 50%;
162
162
  }
163
- .menu-list .menu-list-item {
163
+ .slotui-menulist .menulist-item {
164
164
  width: var(--sld-width-small);
165
165
  }
166
- .menu-list .menu-list-item {
166
+ .slotui-menulist .menulist-item {
167
167
  --preset-width: var(--sld-width-small);
168
168
  }
169
- .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
169
+ .slotui-menulist .menulist-item[width=tiny], .slotui-menulist .menulist-item.width-tiny {
170
170
  --preset-width: var(--sld-width-tiny);
171
171
  width: var(--sld-width-tiny) !important;
172
172
  }
173
- .menu-list .menu-list-item[width=mini], .menu-list .menu-list-item.width-mini {
173
+ .slotui-menulist .menulist-item[width=mini], .slotui-menulist .menulist-item.width-mini {
174
174
  --preset-width: var(--sld-width-mini);
175
175
  width: var(--sld-width-mini) !important;
176
176
  }
177
- .menu-list .menu-list-item[width=small], .menu-list .menu-list-item.width-small {
177
+ .slotui-menulist .menulist-item[width=small], .slotui-menulist .menulist-item.width-small {
178
178
  --preset-width: var(--sld-width-small);
179
179
  width: var(--sld-width-small) !important;
180
180
  }
181
- .menu-list .menu-list-item[width=med], .menu-list .menu-list-item.width-med {
181
+ .slotui-menulist .menulist-item[width=med], .slotui-menulist .menulist-item.width-med {
182
182
  --preset-width: var(--sld-width-med);
183
183
  width: var(--sld-width-med) !important;
184
184
  }
185
- .menu-list .menu-list-item[width=kind], .menu-list .menu-list-item.width-kind {
185
+ .slotui-menulist .menulist-item[width=kind], .slotui-menulist .menulist-item.width-kind {
186
186
  --preset-width: var(--sld-width-kind);
187
187
  width: var(--sld-width-kind) !important;
188
188
  }
189
- .menu-list .menu-list-item[width=full], .menu-list .menu-list-item.width-full {
189
+ .slotui-menulist .menulist-item[width=full], .slotui-menulist .menulist-item.width-full {
190
190
  --preset-width: var(--sld-width-full);
191
191
  width: var(--sld-width-full) !important;
192
192
  }
193
- .menu-list .menu-list-item[width=auto], .menu-list .menu-list-item.width-auto {
193
+ .slotui-menulist .menulist-item[width=auto], .slotui-menulist .menulist-item.width-auto {
194
194
  --preset-width: var(--sld-width-auto);
195
195
  width: var(--sld-width-auto) !important;
196
196
  }
197
- .menu-list .menu-list-item[width=default], .menu-list .menu-list-item.width-default {
197
+ .slotui-menulist .menulist-item[width=default], .slotui-menulist .menulist-item.width-default {
198
198
  --preset-width: var(--sld-width-default);
199
199
  width: var(--sld-width-default) !important;
200
200
  }
201
- .menu-list .menu-list-item {
201
+ .slotui-menulist .menulist-item {
202
202
  min-height: var(--preset-tall-small);
203
203
  height: var(--preset-tall-small);
204
204
  }
205
- .menu-list .menu-list-item {
205
+ .slotui-menulist .menulist-item {
206
206
  --preset-tall: var(--sld-tall-small);
207
207
  }
208
- .menu-list .menu-list-item[tall=tiny], .menu-list .menu-list-item.tall-tiny {
208
+ .slotui-menulist .menulist-item[tall=tiny], .slotui-menulist .menulist-item.tall-tiny {
209
209
  min-height: var(--sld-tall-tiny) !important;
210
210
  }
211
- .menu-list .menu-list-item[tall=mini], .menu-list .menu-list-item.tall-mini {
211
+ .slotui-menulist .menulist-item[tall=mini], .slotui-menulist .menulist-item.tall-mini {
212
212
  min-height: var(--sld-tall-mini) !important;
213
213
  }
214
- .menu-list .menu-list-item[tall=small], .menu-list .menu-list-item.tall-small {
214
+ .slotui-menulist .menulist-item[tall=small], .slotui-menulist .menulist-item.tall-small {
215
215
  min-height: var(--sld-tall-small) !important;
216
216
  }
217
- .menu-list .menu-list-item[tall=med], .menu-list .menu-list-item.tall-med {
217
+ .slotui-menulist .menulist-item[tall=med], .slotui-menulist .menulist-item.tall-med {
218
218
  min-height: var(--sld-tall-med) !important;
219
219
  }
220
- .menu-list .menu-list-item[tall=kind], .menu-list .menu-list-item.tall-kind {
220
+ .slotui-menulist .menulist-item[tall=kind], .slotui-menulist .menulist-item.tall-kind {
221
221
  min-height: var(--sld-tall-kind) !important;
222
222
  }
223
- .menu-list .menu-list-item[tall=auto], .menu-list .menu-list-item.tall-auto {
223
+ .slotui-menulist .menulist-item[tall=auto], .slotui-menulist .menulist-item.tall-auto {
224
224
  min-height: var(--sld-tall-auto) !important;
225
225
  }
226
- .menu-list .menu-list-item[tall=default], .menu-list .menu-list-item.tall-default {
226
+ .slotui-menulist .menulist-item[tall=default], .slotui-menulist .menulist-item.tall-default {
227
227
  min-height: var(--sld-tall-default) !important;
228
228
  }
229
- .menu-list .menu-list-item {
229
+ .slotui-menulist .menulist-item {
230
230
  --preset-gutter: var(--sld-gutter-default);
231
231
  }
232
- .menu-list .menu-list-item [gutter=tiny], .menu-list .menu-list-item .gutter-tiny {
232
+ .slotui-menulist .menulist-item [gutter=tiny], .slotui-menulist .menulist-item .gutter-tiny {
233
233
  padding: var(--sld-gutter-tiny);
234
234
  gap: var(--sld-gutter-tiny);
235
235
  --preset-gutter: var(--sld-gutter-tiny);
236
236
  }
237
- .menu-list .menu-list-item [gutter=mini], .menu-list .menu-list-item .gutter-mini {
237
+ .slotui-menulist .menulist-item [gutter=mini], .slotui-menulist .menulist-item .gutter-mini {
238
238
  padding: var(--sld-gutter-mini);
239
239
  gap: var(--sld-gutter-mini);
240
240
  --preset-gutter: var(--sld-gutter-mini);
241
241
  }
242
- .menu-list .menu-list-item [gutter=small], .menu-list .menu-list-item .gutter-small {
242
+ .slotui-menulist .menulist-item [gutter=small], .slotui-menulist .menulist-item .gutter-small {
243
243
  padding: var(--sld-gutter-small);
244
244
  gap: var(--sld-gutter-small);
245
245
  --preset-gutter: var(--sld-gutter-small);
246
246
  }
247
- .menu-list .menu-list-item [gutter=med], .menu-list .menu-list-item .gutter-med {
247
+ .slotui-menulist .menulist-item [gutter=med], .slotui-menulist .menulist-item .gutter-med {
248
248
  padding: var(--sld-gutter-med);
249
249
  gap: var(--sld-gutter-med);
250
250
  --preset-gutter: var(--sld-gutter-med);
251
251
  }
252
- .menu-list .menu-list-item [gutter=kind], .menu-list .menu-list-item .gutter-kind {
252
+ .slotui-menulist .menulist-item [gutter=kind], .slotui-menulist .menulist-item .gutter-kind {
253
253
  padding: var(--sld-gutter-kind);
254
254
  gap: var(--sld-gutter-kind);
255
255
  --preset-gutter: var(--sld-gutter-kind);
256
256
  }
257
- .menu-list .menu-list-item [gutter=default], .menu-list .menu-list-item .gutter-default {
257
+ .slotui-menulist .menulist-item [gutter=default], .slotui-menulist .menulist-item .gutter-default {
258
258
  padding: var(--sld-gutter-default);
259
259
  gap: var(--sld-gutter-default);
260
260
  --preset-gutter: var(--sld-gutter-default);
261
261
  }
262
- .menu-list .menu-list-item:hover {
262
+ .slotui-menulist .menulist-item:hover {
263
263
  border-color: var(--sld-hover-border-color);
264
264
  background-color: var(--sld-background-disabled);
265
265
  }
266
- .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true] {
266
+ .slotui-menulist .menulist-item.selected, .slotui-menulist .menulist-item[aria-selected=true] {
267
267
  border-color: none;
268
268
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
269
269
  box-shadow: var(--sld-selected-shadow);
270
270
  }
271
- .menu-list .menu-list-item.selected .chip,
272
- .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .chip,
273
- .menu-list .menu-list-item[aria-selected=true] .menuItemChip {
271
+ .slotui-menulist .menulist-item.selected .chip,
272
+ .slotui-menulist .menulist-item.selected .menuItemChip, .slotui-menulist .menulist-item[aria-selected=true] .chip,
273
+ .slotui-menulist .menulist-item[aria-selected=true] .menuItemChip {
274
274
  position: absolute;
275
275
  min-height: 16px;
276
276
  height: 50%;
@@ -280,7 +280,7 @@ function scrollToElement(target) {
280
280
  left: 0;
281
281
  border: 1px solid var(--sld-color-primary-alpha-mid);
282
282
  }
283
- .menu-list .menu-list-item {
283
+ .slotui-menulist .menulist-item {
284
284
  text-decoration: none;
285
285
  overflow: hidden;
286
286
  display: flex;
@@ -289,10 +289,10 @@ function scrollToElement(target) {
289
289
  width: 100%;
290
290
  max-width: 100%;
291
291
  border: 1px solid transparent;
292
- border-radius: var(--menu-list-item-radius);
292
+ border-radius: var(--menulist-item-radius);
293
293
  align-self: flex-start;
294
294
  }
295
- .menu-list .menu-list-item::before {
295
+ .slotui-menulist .menulist-item::before {
296
296
  position: absolute;
297
297
  min-height: 16px;
298
298
  height: 45%;
@@ -305,7 +305,7 @@ function scrollToElement(target) {
305
305
  border: 1px solid transparent;
306
306
  content: " ";
307
307
  }
308
- .menu-list .menu-list-item .menu-list-item-icon {
308
+ .slotui-menulist .menulist-item .menulist-item-icon {
309
309
  width: 16px;
310
310
  max-width: 16px;
311
311
  text-align: center;
@@ -315,28 +315,28 @@ function scrollToElement(target) {
315
315
  justify-content: center;
316
316
  padding: 0 0.2rem;
317
317
  }
318
- .menu-list .menu-list-item .menu-list-item-text {
318
+ .slotui-menulist .menulist-item .menulist-item-text {
319
319
  flex: 1;
320
320
  }
321
- .menu-list .menu-list-item .menu-list-item-text.wrap {
321
+ .slotui-menulist .menulist-item .menulist-item-text.wrap {
322
322
  text-wrap: ellipsis;
323
323
  white-space: normal;
324
324
  overflow: hidden;
325
325
  }
326
- .menu-list .menu-list-item .menu-list-item-action {
327
- display: var(--menu-list-item-action-display);
328
- justify-content: var(--menu-list-item-action-justify-content);
326
+ .slotui-menulist .menulist-item .menulist-item-action {
327
+ display: var(--menulist-item-action-display);
328
+ justify-content: var(--menulist-item-action-justify-content);
329
329
  }
330
330
 
331
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[aria-selected="true"] .menu-list-item-action) {
331
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
332
332
  visibility: visible;
333
333
  }
334
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[aria-selected="true"] .menu-list-item-action) {
334
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
335
335
  visibility: visible;
336
336
  }
337
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
337
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item .menulist-item-action) {
338
338
  visibility: hidden;
339
339
  }
340
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item .menu-list-item-action) {
340
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
341
341
  visibility: hidden;
342
342
  }</style>