@medyll/idae-slotui-svelte 0.60.0 → 0.63.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 (120) hide show
  1. package/dist/base/alert/Alert.svelte +0 -8
  2. package/dist/base/alert/alert.scss +1 -1
  3. package/dist/base/avatar/avatar.scss +1 -1
  4. package/dist/base/backdrop/Backdrop.svelte +0 -3
  5. package/dist/base/backdrop/backdrop.scss +1 -1
  6. package/dist/base/badge/Badge.svelte +0 -1
  7. package/dist/base/badge/badge.scss +1 -1
  8. package/dist/base/box/Box.svelte +0 -2
  9. package/dist/base/box/box.scss +1 -1
  10. package/dist/base/breadCrumb/breadcrumb.scss +1 -1
  11. package/dist/base/cartouche/Cartouche.svelte +3 -23
  12. package/dist/base/cartouche/cartouche.scss +4 -4
  13. package/dist/base/chipper/Chipper.svelte +0 -7
  14. package/dist/base/chipper/chipper.scss +1 -1
  15. package/dist/base/contentSwitcher/ContentSwitcher.svelte +0 -1
  16. package/dist/base/contentSwitcher/content-switcher.scss +1 -1
  17. package/dist/base/divider/Divider.svelte +0 -1
  18. package/dist/base/divider/divider.scss +1 -1
  19. package/dist/base/icon/icon.scss +1 -1
  20. package/dist/base/paper/Paper.svelte +0 -3
  21. package/dist/base/paper/paper.scss +2 -2
  22. package/dist/base/titleBar/TitleBar.svelte +0 -3
  23. package/dist/base/titleBar/title-bar.scss +3 -3
  24. package/dist/controls/autocomplete/auto-complete.scss +2 -2
  25. package/dist/controls/button/Button.svelte +52 -473
  26. package/dist/controls/button/ButtonAction.svelte +51 -474
  27. package/dist/controls/button/ButtonMenu.svelte +0 -2
  28. package/dist/controls/button/button.scss +40 -42
  29. package/dist/controls/checkbox/Checkbox.svelte +3 -25
  30. package/dist/controls/checkbox/checkbox.scss +4 -4
  31. package/dist/controls/confirm/confirm.scss +1 -1
  32. package/dist/controls/progress/Progress.svelte +0 -1
  33. package/dist/controls/progress/progress.scss +1 -1
  34. package/dist/controls/rating/rating.scss +1 -1
  35. package/dist/controls/select/select.scss +1 -1
  36. package/dist/controls/slider/Slider.svelte +3 -13
  37. package/dist/controls/slider/slider.scss +2 -2
  38. package/dist/controls/stepper/Stepper.svelte +0 -3
  39. package/dist/controls/stepper/stepper.scss +1 -1
  40. package/dist/controls/switch/Switch.svelte +0 -6
  41. package/dist/controls/switch/switch.scss +1 -1
  42. package/dist/controls/textfield/TextField.svelte +6 -28
  43. package/dist/controls/textfield/textfield.scss +4 -4
  44. package/dist/csss/csss.scss +2 -2
  45. package/dist/data/dataList/DataList.svelte +0 -22
  46. package/dist/data/dataList/datalist.scss +4 -4
  47. package/dist/data/finder/Finder.svelte +6 -22
  48. package/dist/data/finder/finder.scss +3 -3
  49. package/dist/data/loader/Loader.svelte +0 -2
  50. package/dist/data/loader/loader.scss +1 -1
  51. package/dist/data/sorter/sorterer.scss +2 -2
  52. package/dist/index.d.ts +4 -4
  53. package/dist/index.js +4 -4
  54. package/dist/navigation/drawer/Drawer.svelte +3 -15
  55. package/dist/navigation/drawer/drawer.scss +3 -3
  56. package/dist/navigation/tabs/Tabs.svelte +0 -12
  57. package/dist/navigation/tabs/tabs.scss +1 -1
  58. package/dist/slotui-css/button.css +51 -395
  59. package/dist/slotui-css/button.min.css +51 -395
  60. package/dist/slotui-css/cartouche.css +3 -1
  61. package/dist/slotui-css/cartouche.min.css +3 -1
  62. package/dist/slotui-css/checkbox.css +3 -1
  63. package/dist/slotui-css/checkbox.min.css +3 -1
  64. package/dist/slotui-css/drawer.css +3 -1
  65. package/dist/slotui-css/drawer.min.css +3 -1
  66. package/dist/slotui-css/finder.css +6 -5
  67. package/dist/slotui-css/finder.min.css +6 -5
  68. package/dist/slotui-css/marquee.css +2 -0
  69. package/dist/slotui-css/marquee.min.css +2 -0
  70. package/dist/slotui-css/menu-list.css +62 -191
  71. package/dist/slotui-css/menu-list.min.css +62 -191
  72. package/dist/slotui-css/menu.css +10 -8
  73. package/dist/slotui-css/menu.min.css +10 -8
  74. package/dist/slotui-css/slider.css +3 -1
  75. package/dist/slotui-css/slider.min.css +3 -1
  76. package/dist/slotui-css/slotui-css.css +149 -608
  77. package/dist/slotui-css/slotui-min-css.css +149 -608
  78. package/dist/slotui-css/textfield.css +6 -5
  79. package/dist/slotui-css/textfield.min.css +6 -5
  80. package/dist/styles/slotui-mixins.scss +28 -20
  81. package/dist/styles/slotuisheet/SlotuiSheet.svelte +4 -699
  82. package/dist/styles/slotuisheet/slotui-sheet.scss +68 -68
  83. package/dist/styles/slotuisheet/stylesheet-container.scss +9 -9
  84. package/dist/styles/slotuisheet/stylesheet.scss +10 -10
  85. package/dist/ui/chromeFrame/ChromeFrame.svelte +0 -2
  86. package/dist/ui/chromeFrame/chrome-frame.scss +3 -3
  87. package/dist/ui/frame/Frame.svelte +0 -4
  88. package/dist/ui/frame/frame.scss +8 -8
  89. package/dist/ui/login/Login.svelte +0 -3
  90. package/dist/ui/marquee/Marquee.svelte +2 -0
  91. package/dist/ui/marquee/marquee.scss +2 -2
  92. package/dist/ui/menu/MenuTitle.svelte +10 -23
  93. package/dist/ui/menu/menu.scss +19 -15
  94. package/dist/ui/menuList/MenuList.svelte +63 -231
  95. package/dist/ui/menuList/MenuListItem.svelte +61 -229
  96. package/dist/ui/menuList/MenuListTitle.svelte +61 -229
  97. package/dist/ui/menuList/menu-list.scss +21 -21
  98. package/dist/ui/panel/Panel.svelte +0 -2
  99. package/dist/ui/panel/PanelGrid.svelte +1 -0
  100. package/dist/ui/panel/PanelSlide.svelte +0 -3
  101. package/dist/ui/panel/panel.scss +1 -1
  102. package/dist/ui/popper/Popper.svelte +0 -6
  103. package/dist/ui/popper/popper.scss +1 -1
  104. package/dist/ui/serviceBox/ServiceBox.svelte +0 -2
  105. package/dist/ui/startMenu/BootMenu.svelte +0 -7
  106. package/dist/ui/startMenu/boot-menu.scss +1 -1
  107. package/dist/ui/taskbar/Taskbar.svelte +0 -1
  108. package/dist/ui/taskbar/taskbar.scss +1 -1
  109. package/dist/ui/toggleBar/ToggleBar.svelte +0 -4
  110. package/dist/ui/toggleBar/toggle-bar.scss +1 -1
  111. package/dist/ui/toolBar/ToolBar.svelte +0 -2
  112. package/dist/ui/toolBar/toolbar.scss +1 -1
  113. package/dist/ui/tree/Tree.svelte +0 -5
  114. package/dist/ui/tree/tree.scss +3 -3
  115. package/dist/ui/window/Window.svelte +0 -6
  116. package/dist/ui/window/window.scss +1 -1
  117. package/dist/utils/content/Content.svelte +7 -6
  118. package/dist/utils/stylesheet/StyleSheet.svelte +0 -31
  119. package/dist/utils/stylesheet/stylesheet.scss +10 -10
  120. package/package.json +3 -3
package/dist/slotui-css/cartouche.css CHANGED
@@ -37,10 +37,12 @@
37
37
  cursor: pointer;
38
38
  }
39
39
  .cartouche .control {
40
- --preset-tall: var(--sld-tall-small);
41
40
  min-height: var(--preset-tall-small);
42
41
  height: var(--preset-tall-small);
43
42
  }
43
+ .cartouche .control {
44
+ --preset-tall: var(--sld-tall-small);
45
+ }
44
46
  .cartouche .control[tall=tiny], .cartouche .control.tall-tiny {
45
47
  min-height: var(--sld-tall-tiny) !important;
46
48
  }
package/dist/slotui-css/cartouche.min.css CHANGED
@@ -37,10 +37,12 @@
37
37
  cursor: pointer;
38
38
  }
39
39
  .cartouche .control {
40
- --preset-tall: var(--sld-tall-small);
41
40
  min-height: var(--preset-tall-small);
42
41
  height: var(--preset-tall-small);
43
42
  }
43
+ .cartouche .control {
44
+ --preset-tall: var(--sld-tall-small);
45
+ }
44
46
  .cartouche .control[tall=tiny], .cartouche .control.tall-tiny {
45
47
  min-height: var(--sld-tall-tiny) !important;
46
48
  }
package/dist/slotui-css/checkbox.css CHANGED
@@ -31,10 +31,12 @@
31
31
  background-color: var(--sld-background-disabled);
32
32
  }
33
33
  .checkbox {
34
- --preset-tall: var(--sld-tall-small);
35
34
  min-height: var(--preset-tall-small);
36
35
  height: var(--preset-tall-small);
37
36
  }
37
+ .checkbox {
38
+ --preset-tall: var(--sld-tall-small);
39
+ }
38
40
  .checkbox[tall=tiny], .checkbox.tall-tiny {
39
41
  min-height: var(--sld-tall-tiny) !important;
40
42
  }
package/dist/slotui-css/checkbox.min.css CHANGED
@@ -31,10 +31,12 @@
31
31
  background-color: var(--sld-background-disabled);
32
32
  }
33
33
  .checkbox {
34
- --preset-tall: var(--sld-tall-small);
35
34
  min-height: var(--preset-tall-small);
36
35
  height: var(--preset-tall-small);
37
36
  }
37
+ .checkbox {
38
+ --preset-tall: var(--sld-tall-small);
39
+ }
38
40
  .checkbox[tall=tiny], .checkbox.tall-tiny {
39
41
  min-height: var(--sld-tall-tiny) !important;
40
42
  }
package/dist/slotui-css/drawer.css CHANGED
@@ -40,10 +40,12 @@
40
40
  width: 100%;
41
41
  }
42
42
  .drawer header, .drawer-header {
43
- --preset-tall: var(--sld-tall-small);
44
43
  min-height: var(--preset-tall-small);
45
44
  height: var(--preset-tall-small);
46
45
  }
46
+ .drawer header, .drawer-header {
47
+ --preset-tall: var(--sld-tall-small);
48
+ }
47
49
  .drawer header[tall=tiny], .drawer header.tall-tiny, .drawer-header[tall=tiny], .drawer-header.tall-tiny {
48
50
  min-height: var(--sld-tall-tiny) !important;
49
51
  }
package/dist/slotui-css/drawer.min.css CHANGED
@@ -40,10 +40,12 @@
40
40
  width: 100%;
41
41
  }
42
42
  .drawer header, .drawer-header {
43
- --preset-tall: var(--sld-tall-small);
44
43
  min-height: var(--preset-tall-small);
45
44
  height: var(--preset-tall-small);
46
45
  }
46
+ .drawer header, .drawer-header {
47
+ --preset-tall: var(--sld-tall-small);
48
+ }
47
49
  .drawer header[tall=tiny], .drawer header.tall-tiny, .drawer-header[tall=tiny], .drawer-header.tall-tiny {
48
50
  min-height: var(--sld-tall-tiny) !important;
49
51
  }
package/dist/slotui-css/finder.css CHANGED
@@ -5,13 +5,12 @@
5
5
  .finder-container {
6
6
  display: inline-flex;
7
7
  gap: var(--finder-gap);
8
- --preset-width: var(--sld-width-small);
9
- width: var(--preset-width-small);
10
8
  }
11
9
  .finder-container {
12
10
  --preset-width: var(--sld-width-small);
13
- width: var(--preset-width-small);
14
- min-width: var(--preset-width-small);
11
+ }
12
+ .finder-container {
13
+ width: var(--sld-width-small);
15
14
  }
16
15
  .finder-container[width=tiny], .finder-container.width-tiny {
17
16
  --preset-width: var(--sld-width-tiny);
@@ -46,10 +45,12 @@
46
45
  width: var(--sld-width-default) !important;
47
46
  }
48
47
  .finder-container {
49
- --preset-tall: var(--sld-tall-small);
50
48
  min-height: var(--preset-tall-small);
51
49
  height: var(--preset-tall-small);
52
50
  }
51
+ .finder-container {
52
+ --preset-tall: var(--sld-tall-small);
53
+ }
53
54
  .finder-container[tall=tiny], .finder-container.tall-tiny {
54
55
  min-height: var(--sld-tall-tiny) !important;
55
56
  }
package/dist/slotui-css/finder.min.css CHANGED
@@ -5,13 +5,12 @@
5
5
  .finder-container {
6
6
  display: inline-flex;
7
7
  gap: var(--finder-gap);
8
- --preset-width: var(--sld-width-small);
9
- width: var(--preset-width-small);
10
8
  }
11
9
  .finder-container {
12
10
  --preset-width: var(--sld-width-small);
13
- width: var(--preset-width-small);
14
- min-width: var(--preset-width-small);
11
+ }
12
+ .finder-container {
13
+ width: var(--sld-width-small);
15
14
  }
16
15
  .finder-container[width=tiny], .finder-container.width-tiny {
17
16
  --preset-width: var(--sld-width-tiny);
@@ -46,10 +45,12 @@
46
45
  width: var(--sld-width-default) !important;
47
46
  }
48
47
  .finder-container {
49
- --preset-tall: var(--sld-tall-small);
50
48
  min-height: var(--preset-tall-small);
51
49
  height: var(--preset-tall-small);
52
50
  }
51
+ .finder-container {
52
+ --preset-tall: var(--sld-tall-small);
53
+ }
53
54
  .finder-container[tall=tiny], .finder-container.tall-tiny {
54
55
  min-height: var(--sld-tall-tiny) !important;
55
56
  }
package/dist/slotui-css/marquee.css CHANGED
@@ -8,6 +8,8 @@
8
8
  .marquee :global(-container) {
9
9
  display: flex;
10
10
  align-items: center;
11
+ }
12
+ .marquee :global(-container) {
11
13
  --preset-gutter: var(--sld-gutter-default);
12
14
  }
13
15
  .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
package/dist/slotui-css/marquee.min.css CHANGED
@@ -8,6 +8,8 @@
8
8
  .marquee :global(-container) {
9
9
  display: flex;
10
10
  align-items: center;
11
+ }
12
+ .marquee :global(-container) {
11
13
  --preset-gutter: var(--sld-gutter-default);
12
14
  }
13
15
  .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
package/dist/slotui-css/menu-list.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --menu-list-grid-items-count: 0;
9
9
  }
10
10
 
11
- :global(.menu-list) {
11
+ .menu-list {
12
12
  margin: 0;
13
13
  cursor: pointer;
14
14
  display: flex;
@@ -16,264 +16,133 @@
16
16
  align-items: end;
17
17
  padding: var(--menu-list-padding);
18
18
  }
19
- :global(.menu-list).grid {
19
+ .menu-list.grid {
20
20
  display: grid;
21
21
  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr));
22
22
  }
23
- :global(.menu-list) li.menu-list-title,
24
- :global(.menu-list) a.menu-list-title {
23
+ .menu-list li.menu-list-title,
24
+ .menu-list a.menu-list-title {
25
25
  font-weight: bold;
26
26
  }
27
- :global(.menu-list) .menu-list-item,
28
- :global(.menu-list) a.menu-list-item,
29
- :global(.menu-list) li.menu-list-item {
30
- --preset-width: var(--sld-width-small);
31
- width: var(--preset-width-small);
32
- --preset-gutter: var(--sld-gutter-default);
33
- text-decoration: none;
34
- overflow: hidden;
35
- display: flex;
36
- align-items: center;
37
- position: relative;
38
- width: 100%;
39
- max-width: 100%;
40
- border: 1px solid transparent;
41
- border-radius: var(--menu-list-item-radius);
42
- align-self: flex-start;
43
- }
44
- :global(.menu-list) .menu-list-item[variant*=square], :global(.menu-list) .menu-list-item[square=true], :global(.menu-list) .menu-list-item.square,
45
- :global(.menu-list) a.menu-list-item[variant*=square],
46
- :global(.menu-list) a.menu-list-item[square=true],
47
- :global(.menu-list) a.menu-list-item.square,
48
- :global(.menu-list) li.menu-list-item[variant*=square],
49
- :global(.menu-list) li.menu-list-item[square=true],
50
- :global(.menu-list) li.menu-list-item.square {
27
+ .menu-list .menu-list-item[variant*=square], .menu-list .menu-list-item[square=true], .menu-list .menu-list-item.square {
51
28
  aspect-ratio: 1/1 !important;
52
29
  height: auto;
53
30
  }
54
- :global(.menu-list) .menu-list-item[variant*=rounded], :global(.menu-list) .menu-list-item[rounded=true], :global(.menu-list) .menu-list-item.rounded,
55
- :global(.menu-list) a.menu-list-item[variant*=rounded],
56
- :global(.menu-list) a.menu-list-item[rounded=true],
57
- :global(.menu-list) a.menu-list-item.rounded,
58
- :global(.menu-list) li.menu-list-item[variant*=rounded],
59
- :global(.menu-list) li.menu-list-item[rounded=true],
60
- :global(.menu-list) li.menu-list-item.rounded {
31
+ .menu-list .menu-list-item[variant*=rounded], .menu-list .menu-list-item[rounded=true], .menu-list .menu-list-item.rounded {
61
32
  border-radius: 50%;
62
33
  }
63
- :global(.menu-list) .menu-list-item,
64
- :global(.menu-list) a.menu-list-item,
65
- :global(.menu-list) li.menu-list-item {
34
+ .menu-list .menu-list-item {
66
35
  --preset-width: var(--sld-width-small);
67
- width: var(--preset-width-small);
68
- min-width: var(--preset-width-small);
69
- }
70
- :global(.menu-list) .menu-list-item[width=tiny], :global(.menu-list) .menu-list-item.width-tiny,
71
- :global(.menu-list) a.menu-list-item[width=tiny],
72
- :global(.menu-list) a.menu-list-item.width-tiny,
73
- :global(.menu-list) li.menu-list-item[width=tiny],
74
- :global(.menu-list) li.menu-list-item.width-tiny {
36
+ }
37
+ .menu-list .menu-list-item {
38
+ width: var(--sld-width-small);
39
+ }
40
+ .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
75
41
  --preset-width: var(--sld-width-tiny);
76
42
  width: var(--sld-width-tiny) !important;
77
43
  }
78
- :global(.menu-list) .menu-list-item[width=mini], :global(.menu-list) .menu-list-item.width-mini,
79
- :global(.menu-list) a.menu-list-item[width=mini],
80
- :global(.menu-list) a.menu-list-item.width-mini,
81
- :global(.menu-list) li.menu-list-item[width=mini],
82
- :global(.menu-list) li.menu-list-item.width-mini {
44
+ .menu-list .menu-list-item[width=mini], .menu-list .menu-list-item.width-mini {
83
45
  --preset-width: var(--sld-width-mini);
84
46
  width: var(--sld-width-mini) !important;
85
47
  }
86
- :global(.menu-list) .menu-list-item[width=small], :global(.menu-list) .menu-list-item.width-small,
87
- :global(.menu-list) a.menu-list-item[width=small],
88
- :global(.menu-list) a.menu-list-item.width-small,
89
- :global(.menu-list) li.menu-list-item[width=small],
90
- :global(.menu-list) li.menu-list-item.width-small {
48
+ .menu-list .menu-list-item[width=small], .menu-list .menu-list-item.width-small {
91
49
  --preset-width: var(--sld-width-small);
92
50
  width: var(--sld-width-small) !important;
93
51
  }
94
- :global(.menu-list) .menu-list-item[width=med], :global(.menu-list) .menu-list-item.width-med,
95
- :global(.menu-list) a.menu-list-item[width=med],
96
- :global(.menu-list) a.menu-list-item.width-med,
97
- :global(.menu-list) li.menu-list-item[width=med],
98
- :global(.menu-list) li.menu-list-item.width-med {
52
+ .menu-list .menu-list-item[width=med], .menu-list .menu-list-item.width-med {
99
53
  --preset-width: var(--sld-width-med);
100
54
  width: var(--sld-width-med) !important;
101
55
  }
102
- :global(.menu-list) .menu-list-item[width=kind], :global(.menu-list) .menu-list-item.width-kind,
103
- :global(.menu-list) a.menu-list-item[width=kind],
104
- :global(.menu-list) a.menu-list-item.width-kind,
105
- :global(.menu-list) li.menu-list-item[width=kind],
106
- :global(.menu-list) li.menu-list-item.width-kind {
56
+ .menu-list .menu-list-item[width=kind], .menu-list .menu-list-item.width-kind {
107
57
  --preset-width: var(--sld-width-kind);
108
58
  width: var(--sld-width-kind) !important;
109
59
  }
110
- :global(.menu-list) .menu-list-item[width=full], :global(.menu-list) .menu-list-item.width-full,
111
- :global(.menu-list) a.menu-list-item[width=full],
112
- :global(.menu-list) a.menu-list-item.width-full,
113
- :global(.menu-list) li.menu-list-item[width=full],
114
- :global(.menu-list) li.menu-list-item.width-full {
60
+ .menu-list .menu-list-item[width=full], .menu-list .menu-list-item.width-full {
115
61
  --preset-width: var(--sld-width-full);
116
62
  width: var(--sld-width-full) !important;
117
63
  }
118
- :global(.menu-list) .menu-list-item[width=auto], :global(.menu-list) .menu-list-item.width-auto,
119
- :global(.menu-list) a.menu-list-item[width=auto],
120
- :global(.menu-list) a.menu-list-item.width-auto,
121
- :global(.menu-list) li.menu-list-item[width=auto],
122
- :global(.menu-list) li.menu-list-item.width-auto {
64
+ .menu-list .menu-list-item[width=auto], .menu-list .menu-list-item.width-auto {
123
65
  --preset-width: var(--sld-width-auto);
124
66
  width: var(--sld-width-auto) !important;
125
67
  }
126
- :global(.menu-list) .menu-list-item[width=default], :global(.menu-list) .menu-list-item.width-default,
127
- :global(.menu-list) a.menu-list-item[width=default],
128
- :global(.menu-list) a.menu-list-item.width-default,
129
- :global(.menu-list) li.menu-list-item[width=default],
130
- :global(.menu-list) li.menu-list-item.width-default {
68
+ .menu-list .menu-list-item[width=default], .menu-list .menu-list-item.width-default {
131
69
  --preset-width: var(--sld-width-default);
132
70
  width: var(--sld-width-default) !important;
133
71
  }
134
- :global(.menu-list) .menu-list-item,
135
- :global(.menu-list) a.menu-list-item,
136
- :global(.menu-list) li.menu-list-item {
137
- --preset-tall: var(--sld-tall-small);
72
+ .menu-list .menu-list-item {
138
73
  min-height: var(--preset-tall-small);
139
74
  height: var(--preset-tall-small);
140
75
  }
141
- :global(.menu-list) .menu-list-item[tall=tiny], :global(.menu-list) .menu-list-item.tall-tiny,
142
- :global(.menu-list) a.menu-list-item[tall=tiny],
143
- :global(.menu-list) a.menu-list-item.tall-tiny,
144
- :global(.menu-list) li.menu-list-item[tall=tiny],
145
- :global(.menu-list) li.menu-list-item.tall-tiny {
76
+ .menu-list .menu-list-item {
77
+ --preset-tall: var(--sld-tall-small);
78
+ }
79
+ .menu-list .menu-list-item[tall=tiny], .menu-list .menu-list-item.tall-tiny {
146
80
  min-height: var(--sld-tall-tiny) !important;
147
81
  }
148
- :global(.menu-list) .menu-list-item[tall=mini], :global(.menu-list) .menu-list-item.tall-mini,
149
- :global(.menu-list) a.menu-list-item[tall=mini],
150
- :global(.menu-list) a.menu-list-item.tall-mini,
151
- :global(.menu-list) li.menu-list-item[tall=mini],
152
- :global(.menu-list) li.menu-list-item.tall-mini {
82
+ .menu-list .menu-list-item[tall=mini], .menu-list .menu-list-item.tall-mini {
153
83
  min-height: var(--sld-tall-mini) !important;
154
84
  }
155
- :global(.menu-list) .menu-list-item[tall=small], :global(.menu-list) .menu-list-item.tall-small,
156
- :global(.menu-list) a.menu-list-item[tall=small],
157
- :global(.menu-list) a.menu-list-item.tall-small,
158
- :global(.menu-list) li.menu-list-item[tall=small],
159
- :global(.menu-list) li.menu-list-item.tall-small {
85
+ .menu-list .menu-list-item[tall=small], .menu-list .menu-list-item.tall-small {
160
86
  min-height: var(--sld-tall-small) !important;
161
87
  }
162
- :global(.menu-list) .menu-list-item[tall=med], :global(.menu-list) .menu-list-item.tall-med,
163
- :global(.menu-list) a.menu-list-item[tall=med],
164
- :global(.menu-list) a.menu-list-item.tall-med,
165
- :global(.menu-list) li.menu-list-item[tall=med],
166
- :global(.menu-list) li.menu-list-item.tall-med {
88
+ .menu-list .menu-list-item[tall=med], .menu-list .menu-list-item.tall-med {
167
89
  min-height: var(--sld-tall-med) !important;
168
90
  }
169
- :global(.menu-list) .menu-list-item[tall=kind], :global(.menu-list) .menu-list-item.tall-kind,
170
- :global(.menu-list) a.menu-list-item[tall=kind],
171
- :global(.menu-list) a.menu-list-item.tall-kind,
172
- :global(.menu-list) li.menu-list-item[tall=kind],
173
- :global(.menu-list) li.menu-list-item.tall-kind {
91
+ .menu-list .menu-list-item[tall=kind], .menu-list .menu-list-item.tall-kind {
174
92
  min-height: var(--sld-tall-kind) !important;
175
93
  }
176
- :global(.menu-list) .menu-list-item[tall=auto], :global(.menu-list) .menu-list-item.tall-auto,
177
- :global(.menu-list) a.menu-list-item[tall=auto],
178
- :global(.menu-list) a.menu-list-item.tall-auto,
179
- :global(.menu-list) li.menu-list-item[tall=auto],
180
- :global(.menu-list) li.menu-list-item.tall-auto {
94
+ .menu-list .menu-list-item[tall=auto], .menu-list .menu-list-item.tall-auto {
181
95
  min-height: var(--sld-tall-auto) !important;
182
96
  }
183
- :global(.menu-list) .menu-list-item[tall=default], :global(.menu-list) .menu-list-item.tall-default,
184
- :global(.menu-list) a.menu-list-item[tall=default],
185
- :global(.menu-list) a.menu-list-item.tall-default,
186
- :global(.menu-list) li.menu-list-item[tall=default],
187
- :global(.menu-list) li.menu-list-item.tall-default {
97
+ .menu-list .menu-list-item[tall=default], .menu-list .menu-list-item.tall-default {
188
98
  min-height: var(--sld-tall-default) !important;
189
99
  }
190
- :global(.menu-list) .menu-list-item :global([gutter="tiny"]), :global(.menu-list) .menu-list-item :global(.gutter-tiny),
191
- :global(.menu-list) a.menu-list-item :global([gutter="tiny"]),
192
- :global(.menu-list) a.menu-list-item :global(.gutter-tiny),
193
- :global(.menu-list) li.menu-list-item :global([gutter="tiny"]),
194
- :global(.menu-list) li.menu-list-item :global(.gutter-tiny) {
100
+ .menu-list .menu-list-item {
101
+ --preset-gutter: var(--sld-gutter-default);
102
+ }
103
+ .menu-list .menu-list-item :global([gutter="tiny"]), .menu-list .menu-list-item :global(.gutter-tiny) {
195
104
  padding: var(--sld-gutter-tiny);
196
105
  gap: var(--sld-gutter-tiny);
197
106
  --preset-gutter: var(--sld-gutter-tiny);
198
107
  }
199
- :global(.menu-list) .menu-list-item :global([gutter="mini"]), :global(.menu-list) .menu-list-item :global(.gutter-mini),
200
- :global(.menu-list) a.menu-list-item :global([gutter="mini"]),
201
- :global(.menu-list) a.menu-list-item :global(.gutter-mini),
202
- :global(.menu-list) li.menu-list-item :global([gutter="mini"]),
203
- :global(.menu-list) li.menu-list-item :global(.gutter-mini) {
108
+ .menu-list .menu-list-item :global([gutter="mini"]), .menu-list .menu-list-item :global(.gutter-mini) {
204
109
  padding: var(--sld-gutter-mini);
205
110
  gap: var(--sld-gutter-mini);
206
111
  --preset-gutter: var(--sld-gutter-mini);
207
112
  }
208
- :global(.menu-list) .menu-list-item :global([gutter="small"]), :global(.menu-list) .menu-list-item :global(.gutter-small),
209
- :global(.menu-list) a.menu-list-item :global([gutter="small"]),
210
- :global(.menu-list) a.menu-list-item :global(.gutter-small),
211
- :global(.menu-list) li.menu-list-item :global([gutter="small"]),
212
- :global(.menu-list) li.menu-list-item :global(.gutter-small) {
113
+ .menu-list .menu-list-item :global([gutter="small"]), .menu-list .menu-list-item :global(.gutter-small) {
213
114
  padding: var(--sld-gutter-small);
214
115
  gap: var(--sld-gutter-small);
215
116
  --preset-gutter: var(--sld-gutter-small);
216
117
  }
217
- :global(.menu-list) .menu-list-item :global([gutter="med"]), :global(.menu-list) .menu-list-item :global(.gutter-med),
218
- :global(.menu-list) a.menu-list-item :global([gutter="med"]),
219
- :global(.menu-list) a.menu-list-item :global(.gutter-med),
220
- :global(.menu-list) li.menu-list-item :global([gutter="med"]),
221
- :global(.menu-list) li.menu-list-item :global(.gutter-med) {
118
+ .menu-list .menu-list-item :global([gutter="med"]), .menu-list .menu-list-item :global(.gutter-med) {
222
119
  padding: var(--sld-gutter-med);
223
120
  gap: var(--sld-gutter-med);
224
121
  --preset-gutter: var(--sld-gutter-med);
225
122
  }
226
- :global(.menu-list) .menu-list-item :global([gutter="kind"]), :global(.menu-list) .menu-list-item :global(.gutter-kind),
227
- :global(.menu-list) a.menu-list-item :global([gutter="kind"]),
228
- :global(.menu-list) a.menu-list-item :global(.gutter-kind),
229
- :global(.menu-list) li.menu-list-item :global([gutter="kind"]),
230
- :global(.menu-list) li.menu-list-item :global(.gutter-kind) {
123
+ .menu-list .menu-list-item :global([gutter="kind"]), .menu-list .menu-list-item :global(.gutter-kind) {
231
124
  padding: var(--sld-gutter-kind);
232
125
  gap: var(--sld-gutter-kind);
233
126
  --preset-gutter: var(--sld-gutter-kind);
234
127
  }
235
- :global(.menu-list) .menu-list-item :global([gutter="default"]), :global(.menu-list) .menu-list-item :global(.gutter-default),
236
- :global(.menu-list) a.menu-list-item :global([gutter="default"]),
237
- :global(.menu-list) a.menu-list-item :global(.gutter-default),
238
- :global(.menu-list) li.menu-list-item :global([gutter="default"]),
239
- :global(.menu-list) li.menu-list-item :global(.gutter-default) {
128
+ .menu-list .menu-list-item :global([gutter="default"]), .menu-list .menu-list-item :global(.gutter-default) {
240
129
  padding: var(--sld-gutter-default);
241
130
  gap: var(--sld-gutter-default);
242
131
  --preset-gutter: var(--sld-gutter-default);
243
132
  }
244
- :global(.menu-list) .menu-list-item:hover,
245
- :global(.menu-list) a.menu-list-item:hover,
246
- :global(.menu-list) li.menu-list-item:hover {
133
+ .menu-list .menu-list-item:hover {
247
134
  border-color: var(--sld-hover-border-color);
248
135
  background-color: var(--sld-background-disabled);
249
136
  }
250
- :global(.menu-list) .menu-list-item.selected, :global(.menu-list) .menu-list-item[aria-selected=true], :global(.menu-list) .menu-list-item[data-selected=true],
251
- :global(.menu-list) a.menu-list-item.selected,
252
- :global(.menu-list) a.menu-list-item[aria-selected=true],
253
- :global(.menu-list) a.menu-list-item[data-selected=true],
254
- :global(.menu-list) li.menu-list-item.selected,
255
- :global(.menu-list) li.menu-list-item[aria-selected=true],
256
- :global(.menu-list) li.menu-list-item[data-selected=true] {
137
+ .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true], .menu-list .menu-list-item[data-selected=true] {
257
138
  border-color: none;
258
139
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
259
140
  box-shadow: var(--sld-selected-shadow);
260
141
  }
261
- :global(.menu-list) .menu-list-item.selected .listItemChip,
262
- :global(.menu-list) .menu-list-item.selected .menuItemChip, :global(.menu-list) .menu-list-item[aria-selected=true] .listItemChip,
263
- :global(.menu-list) .menu-list-item[aria-selected=true] .menuItemChip, :global(.menu-list) .menu-list-item[data-selected=true] .listItemChip,
264
- :global(.menu-list) .menu-list-item[data-selected=true] .menuItemChip,
265
- :global(.menu-list) a.menu-list-item.selected .listItemChip,
266
- :global(.menu-list) a.menu-list-item.selected .menuItemChip,
267
- :global(.menu-list) a.menu-list-item[aria-selected=true] .listItemChip,
268
- :global(.menu-list) a.menu-list-item[aria-selected=true] .menuItemChip,
269
- :global(.menu-list) a.menu-list-item[data-selected=true] .listItemChip,
270
- :global(.menu-list) a.menu-list-item[data-selected=true] .menuItemChip,
271
- :global(.menu-list) li.menu-list-item.selected .listItemChip,
272
- :global(.menu-list) li.menu-list-item.selected .menuItemChip,
273
- :global(.menu-list) li.menu-list-item[aria-selected=true] .listItemChip,
274
- :global(.menu-list) li.menu-list-item[aria-selected=true] .menuItemChip,
275
- :global(.menu-list) li.menu-list-item[data-selected=true] .listItemChip,
276
- :global(.menu-list) li.menu-list-item[data-selected=true] .menuItemChip {
142
+ .menu-list .menu-list-item.selected .listItemChip,
143
+ .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .listItemChip,
144
+ .menu-list .menu-list-item[aria-selected=true] .menuItemChip, .menu-list .menu-list-item[data-selected=true] .listItemChip,
145
+ .menu-list .menu-list-item[data-selected=true] .menuItemChip {
277
146
  position: absolute;
278
147
  min-height: 16px;
279
148
  height: 50%;
@@ -283,9 +152,19 @@
283
152
  left: 0;
284
153
  border: 1px solid var(--sld-color-primary-alpha-mid);
285
154
  }
286
- :global(.menu-list) .menu-list-item::before,
287
- :global(.menu-list) a.menu-list-item::before,
288
- :global(.menu-list) li.menu-list-item::before {
155
+ .menu-list .menu-list-item {
156
+ text-decoration: none;
157
+ overflow: hidden;
158
+ display: flex;
159
+ align-items: center;
160
+ position: relative;
161
+ width: 100%;
162
+ max-width: 100%;
163
+ border: 1px solid transparent;
164
+ border-radius: var(--menu-list-item-radius);
165
+ align-self: flex-start;
166
+ }
167
+ .menu-list .menu-list-item::before {
289
168
  position: absolute;
290
169
  min-height: 16px;
291
170
  height: 45%;
@@ -298,9 +177,7 @@
298
177
  border: 1px solid transparent;
299
178
  content: " ";
300
179
  }
301
- :global(.menu-list) .menu-list-item .menu-list-item-icon,
302
- :global(.menu-list) a.menu-list-item .menu-list-item-icon,
303
- :global(.menu-list) li.menu-list-item .menu-list-item-icon {
180
+ .menu-list .menu-list-item .menu-list-item-icon {
304
181
  width: 16px;
305
182
  max-width: 16px;
306
183
  text-align: center;
@@ -310,21 +187,15 @@
310
187
  justify-content: center;
311
188
  padding: 0 0.2rem;
312
189
  }
313
- :global(.menu-list) .menu-list-item .menu-list-item-text,
314
- :global(.menu-list) a.menu-list-item .menu-list-item-text,
315
- :global(.menu-list) li.menu-list-item .menu-list-item-text {
190
+ .menu-list .menu-list-item .menu-list-item-text {
316
191
  flex: 1;
317
192
  }
318
- :global(.menu-list) .menu-list-item .menu-list-item-text.wrap,
319
- :global(.menu-list) a.menu-list-item .menu-list-item-text.wrap,
320
- :global(.menu-list) li.menu-list-item .menu-list-item-text.wrap {
193
+ .menu-list .menu-list-item .menu-list-item-text.wrap {
321
194
  text-wrap: ellipsis;
322
195
  white-space: normal;
323
196
  overflow: hidden;
324
197
  }
325
- :global(.menu-list) .menu-list-item .menu-list-item-action,
326
- :global(.menu-list) a.menu-list-item .menu-list-item-action,
327
- :global(.menu-list) li.menu-list-item .menu-list-item-action {
198
+ .menu-list .menu-list-item .menu-list-item-action {
328
199
  display: var(--menu-list-item-action-display);
329
200
  justify-content: var(--menu-list-item-action-justify-content);
330
201
  }