@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-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