@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/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './componentCite.js';
2
+ export * from './csss/csss.js';
2
3
  export * as windowMinCss from './slotui-css/window.min.css';
3
4
  export * as windowCss from './slotui-css/window.css';
4
5
  export * as treeMinCss from './slotui-css/tree.min.css';
@@ -107,7 +108,6 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
107
108
  export * as autoCompleteCss from './slotui-css/auto-complete.css';
108
109
  export * as alertMinCss from './slotui-css/alert.min.css';
109
110
  export * as alertCss from './slotui-css/alert.css';
110
- export * from './csss/csss.js';
111
111
  export * from './utils/uses/toggler.js';
112
112
  export * from './utils/uses/positioner.js';
113
113
  export * from './utils/uses/navigation.js';
@@ -120,7 +120,6 @@ export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
120
120
  export { default as Slotted } from './utils/slotted/Slotted.svelte';
121
121
  export * from './utils/looper/types.js';
122
122
  export { default as Looper } from './utils/looper/Looper.svelte';
123
- export * from './utils/effects/transitions.js';
124
123
  export * from './utils/engine/wactions.utils.js';
125
124
  export * from './utils/engine/utils.js';
126
125
  export * from './utils/engine/stator.js';
@@ -128,6 +127,7 @@ export * from './utils/engine/site.utils.js';
128
127
  export * from './utils/engine/presets.js';
129
128
  export * from './utils/engine/engine.js';
130
129
  export * from './utils/engine/elem.js';
130
+ export * from './utils/effects/transitions.js';
131
131
  export { default as Css } from './utils/css/Css.svelte';
132
132
  export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
133
133
  export * from './utils/content/types.js';
@@ -214,10 +214,10 @@ export { default as DataListCell } from './data/dataList/DataListCell.svelte';
214
214
  export { default as DataList } from './data/dataList/DataList.svelte';
215
215
  export * from './controls/textfield/types.js';
216
216
  export { default as TextField } from './controls/textfield/TextField.svelte';
217
- export * from './controls/switch/types.js';
218
- export { default as Switch } from './controls/switch/Switch.svelte';
219
217
  export * from './controls/stepper/types.js';
220
218
  export { default as Stepper } from './controls/stepper/Stepper.svelte';
219
+ export * from './controls/switch/types.js';
220
+ export { default as Switch } from './controls/switch/Switch.svelte';
221
221
  export * from './controls/slider/types.js';
222
222
  export { default as Slider } from './controls/slider/Slider.svelte';
223
223
  export { default as Select } from './controls/select/Select.svelte';
@@ -276,9 +276,9 @@ export * from './base/avatar/types.js';
276
276
  export { default as Avatar } from './base/avatar/Avatar.svelte';
277
277
  export * from './base/alert/types.js';
278
278
  export { default as Alert } from './base/alert/Alert.svelte';
279
+ export * from './utils/uses/stickTo/stickTo.js';
279
280
  export * from './utils/uses/sx4u/sx4uPreprocess.js';
280
281
  export * from './utils/uses/sx4u/sx4u.js';
281
- export * from './utils/uses/stickTo/stickTo.js';
282
282
  export * from './utils/uses/resizer/resizer.js';
283
283
  export * from './utils/uses/clickAway/clickAway.js';
284
284
  export * from './utils/uses/autofocus/autofocus.js';
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  // auto exports of entry components
2
2
  export * from './componentCite.js';
3
+ export * from './csss/csss.js';
3
4
  export * as windowMinCss from './slotui-css/window.min.css';
4
5
  export * as windowCss from './slotui-css/window.css';
5
6
  export * as treeMinCss from './slotui-css/tree.min.css';
@@ -108,7 +109,6 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
108
109
  export * as autoCompleteCss from './slotui-css/auto-complete.css';
109
110
  export * as alertMinCss from './slotui-css/alert.min.css';
110
111
  export * as alertCss from './slotui-css/alert.css';
111
- export * from './csss/csss.js';
112
112
  export * from './utils/uses/toggler.js';
113
113
  export * from './utils/uses/positioner.js';
114
114
  export * from './utils/uses/navigation.js';
@@ -121,7 +121,6 @@ export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
121
121
  export { default as Slotted } from './utils/slotted/Slotted.svelte';
122
122
  export * from './utils/looper/types.js';
123
123
  export { default as Looper } from './utils/looper/Looper.svelte';
124
- export * from './utils/effects/transitions.js';
125
124
  export * from './utils/engine/wactions.utils.js';
126
125
  export * from './utils/engine/utils.js';
127
126
  export * from './utils/engine/stator.js';
@@ -129,6 +128,7 @@ export * from './utils/engine/site.utils.js';
129
128
  export * from './utils/engine/presets.js';
130
129
  export * from './utils/engine/engine.js';
131
130
  export * from './utils/engine/elem.js';
131
+ export * from './utils/effects/transitions.js';
132
132
  export { default as Css } from './utils/css/Css.svelte';
133
133
  export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
134
134
  export * from './utils/content/types.js';
@@ -215,10 +215,10 @@ export { default as DataListCell } from './data/dataList/DataListCell.svelte';
215
215
  export { default as DataList } from './data/dataList/DataList.svelte';
216
216
  export * from './controls/textfield/types.js';
217
217
  export { default as TextField } from './controls/textfield/TextField.svelte';
218
- export * from './controls/switch/types.js';
219
- export { default as Switch } from './controls/switch/Switch.svelte';
220
218
  export * from './controls/stepper/types.js';
221
219
  export { default as Stepper } from './controls/stepper/Stepper.svelte';
220
+ export * from './controls/switch/types.js';
221
+ export { default as Switch } from './controls/switch/Switch.svelte';
222
222
  export * from './controls/slider/types.js';
223
223
  export { default as Slider } from './controls/slider/Slider.svelte';
224
224
  export { default as Select } from './controls/select/Select.svelte';
@@ -277,9 +277,9 @@ export * from './base/avatar/types.js';
277
277
  export { default as Avatar } from './base/avatar/Avatar.svelte';
278
278
  export * from './base/alert/types.js';
279
279
  export { default as Alert } from './base/alert/Alert.svelte';
280
+ export * from './utils/uses/stickTo/stickTo.js';
280
281
  export * from './utils/uses/sx4u/sx4uPreprocess.js';
281
282
  export * from './utils/uses/sx4u/sx4u.js';
282
- export * from './utils/uses/stickTo/stickTo.js';
283
283
  export * from './utils/uses/resizer/resizer.js';
284
284
  export * from './utils/uses/clickAway/clickAway.js';
285
285
  export * from './utils/uses/autofocus/autofocus.js';
package/dist/slotui-css/menu-list.css CHANGED
@@ -1,147 +1,147 @@
1
1
  :root {
2
- --menu-list-padding: var(--sld-pad-tiny);
3
- --menu-list-item-padding: 0;
4
- --menu-list-item-radius: var(--sld-radius-small);
5
- --menu-list-item-selected-background: var(--sld-selected-background-color);
6
- --menu-list-item-action-display: flex;
7
- --menu-list-item-action-justify-content: center;
8
- --menu-list-grid-items-count: 0;
2
+ --menulist-padding: var(--sld-pad-tiny);
3
+ --menulist-item-padding: 0;
4
+ --menulist-item-radius: var(--sld-radius-small);
5
+ --menulist-item-selected-background: var(--sld-selected-background-color);
6
+ --menulist-item-action-display: flex;
7
+ --menulist-item-action-justify-content: center;
8
+ --menulist-grid-items-count: 0;
9
9
  }
10
10
 
11
- .menu-list {
11
+ .slotui-menulist {
12
12
  margin: 0;
13
13
  cursor: pointer;
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
  align-items: end;
17
- padding: var(--menu-list-padding);
17
+ padding: var(--menulist-padding);
18
18
  }
19
- .menu-list.grid {
19
+ .slotui-menulist.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
- .menu-list li.menu-list-title,
24
- .menu-list a.menu-list-title {
23
+ .slotui-menulist li.menulist-title,
24
+ .slotui-menulist a.menulist-title {
25
25
  font-weight: bold;
26
26
  }
27
- .menu-list .menu-list-item[variant*=square] {
27
+ .slotui-menulist .menulist-item[variant*=square] {
28
28
  aspect-ratio: 1/1 !important;
29
29
  height: auto;
30
30
  }
31
- .menu-list .menu-list-item[variant*=rounded] {
31
+ .slotui-menulist .menulist-item[variant*=rounded] {
32
32
  border-radius: 50%;
33
33
  }
34
- .menu-list .menu-list-item {
34
+ .slotui-menulist .menulist-item {
35
35
  width: var(--sld-width-small);
36
36
  }
37
- .menu-list .menu-list-item {
37
+ .slotui-menulist .menulist-item {
38
38
  --preset-width: var(--sld-width-small);
39
39
  }
40
- .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
40
+ .slotui-menulist .menulist-item[width=tiny], .slotui-menulist .menulist-item.width-tiny {
41
41
  --preset-width: var(--sld-width-tiny);
42
42
  width: var(--sld-width-tiny) !important;
43
43
  }
44
- .menu-list .menu-list-item[width=mini], .menu-list .menu-list-item.width-mini {
44
+ .slotui-menulist .menulist-item[width=mini], .slotui-menulist .menulist-item.width-mini {
45
45
  --preset-width: var(--sld-width-mini);
46
46
  width: var(--sld-width-mini) !important;
47
47
  }
48
- .menu-list .menu-list-item[width=small], .menu-list .menu-list-item.width-small {
48
+ .slotui-menulist .menulist-item[width=small], .slotui-menulist .menulist-item.width-small {
49
49
  --preset-width: var(--sld-width-small);
50
50
  width: var(--sld-width-small) !important;
51
51
  }
52
- .menu-list .menu-list-item[width=med], .menu-list .menu-list-item.width-med {
52
+ .slotui-menulist .menulist-item[width=med], .slotui-menulist .menulist-item.width-med {
53
53
  --preset-width: var(--sld-width-med);
54
54
  width: var(--sld-width-med) !important;
55
55
  }
56
- .menu-list .menu-list-item[width=kind], .menu-list .menu-list-item.width-kind {
56
+ .slotui-menulist .menulist-item[width=kind], .slotui-menulist .menulist-item.width-kind {
57
57
  --preset-width: var(--sld-width-kind);
58
58
  width: var(--sld-width-kind) !important;
59
59
  }
60
- .menu-list .menu-list-item[width=full], .menu-list .menu-list-item.width-full {
60
+ .slotui-menulist .menulist-item[width=full], .slotui-menulist .menulist-item.width-full {
61
61
  --preset-width: var(--sld-width-full);
62
62
  width: var(--sld-width-full) !important;
63
63
  }
64
- .menu-list .menu-list-item[width=auto], .menu-list .menu-list-item.width-auto {
64
+ .slotui-menulist .menulist-item[width=auto], .slotui-menulist .menulist-item.width-auto {
65
65
  --preset-width: var(--sld-width-auto);
66
66
  width: var(--sld-width-auto) !important;
67
67
  }
68
- .menu-list .menu-list-item[width=default], .menu-list .menu-list-item.width-default {
68
+ .slotui-menulist .menulist-item[width=default], .slotui-menulist .menulist-item.width-default {
69
69
  --preset-width: var(--sld-width-default);
70
70
  width: var(--sld-width-default) !important;
71
71
  }
72
- .menu-list .menu-list-item {
72
+ .slotui-menulist .menulist-item {
73
73
  min-height: var(--preset-tall-small);
74
74
  height: var(--preset-tall-small);
75
75
  }
76
- .menu-list .menu-list-item {
76
+ .slotui-menulist .menulist-item {
77
77
  --preset-tall: var(--sld-tall-small);
78
78
  }
79
- .menu-list .menu-list-item[tall=tiny], .menu-list .menu-list-item.tall-tiny {
79
+ .slotui-menulist .menulist-item[tall=tiny], .slotui-menulist .menulist-item.tall-tiny {
80
80
  min-height: var(--sld-tall-tiny) !important;
81
81
  }
82
- .menu-list .menu-list-item[tall=mini], .menu-list .menu-list-item.tall-mini {
82
+ .slotui-menulist .menulist-item[tall=mini], .slotui-menulist .menulist-item.tall-mini {
83
83
  min-height: var(--sld-tall-mini) !important;
84
84
  }
85
- .menu-list .menu-list-item[tall=small], .menu-list .menu-list-item.tall-small {
85
+ .slotui-menulist .menulist-item[tall=small], .slotui-menulist .menulist-item.tall-small {
86
86
  min-height: var(--sld-tall-small) !important;
87
87
  }
88
- .menu-list .menu-list-item[tall=med], .menu-list .menu-list-item.tall-med {
88
+ .slotui-menulist .menulist-item[tall=med], .slotui-menulist .menulist-item.tall-med {
89
89
  min-height: var(--sld-tall-med) !important;
90
90
  }
91
- .menu-list .menu-list-item[tall=kind], .menu-list .menu-list-item.tall-kind {
91
+ .slotui-menulist .menulist-item[tall=kind], .slotui-menulist .menulist-item.tall-kind {
92
92
  min-height: var(--sld-tall-kind) !important;
93
93
  }
94
- .menu-list .menu-list-item[tall=auto], .menu-list .menu-list-item.tall-auto {
94
+ .slotui-menulist .menulist-item[tall=auto], .slotui-menulist .menulist-item.tall-auto {
95
95
  min-height: var(--sld-tall-auto) !important;
96
96
  }
97
- .menu-list .menu-list-item[tall=default], .menu-list .menu-list-item.tall-default {
97
+ .slotui-menulist .menulist-item[tall=default], .slotui-menulist .menulist-item.tall-default {
98
98
  min-height: var(--sld-tall-default) !important;
99
99
  }
100
- .menu-list .menu-list-item {
100
+ .slotui-menulist .menulist-item {
101
101
  --preset-gutter: var(--sld-gutter-default);
102
102
  }
103
- .menu-list .menu-list-item [gutter=tiny], .menu-list .menu-list-item .gutter-tiny {
103
+ .slotui-menulist .menulist-item [gutter=tiny], .slotui-menulist .menulist-item .gutter-tiny {
104
104
  padding: var(--sld-gutter-tiny);
105
105
  gap: var(--sld-gutter-tiny);
106
106
  --preset-gutter: var(--sld-gutter-tiny);
107
107
  }
108
- .menu-list .menu-list-item [gutter=mini], .menu-list .menu-list-item .gutter-mini {
108
+ .slotui-menulist .menulist-item [gutter=mini], .slotui-menulist .menulist-item .gutter-mini {
109
109
  padding: var(--sld-gutter-mini);
110
110
  gap: var(--sld-gutter-mini);
111
111
  --preset-gutter: var(--sld-gutter-mini);
112
112
  }
113
- .menu-list .menu-list-item [gutter=small], .menu-list .menu-list-item .gutter-small {
113
+ .slotui-menulist .menulist-item [gutter=small], .slotui-menulist .menulist-item .gutter-small {
114
114
  padding: var(--sld-gutter-small);
115
115
  gap: var(--sld-gutter-small);
116
116
  --preset-gutter: var(--sld-gutter-small);
117
117
  }
118
- .menu-list .menu-list-item [gutter=med], .menu-list .menu-list-item .gutter-med {
118
+ .slotui-menulist .menulist-item [gutter=med], .slotui-menulist .menulist-item .gutter-med {
119
119
  padding: var(--sld-gutter-med);
120
120
  gap: var(--sld-gutter-med);
121
121
  --preset-gutter: var(--sld-gutter-med);
122
122
  }
123
- .menu-list .menu-list-item [gutter=kind], .menu-list .menu-list-item .gutter-kind {
123
+ .slotui-menulist .menulist-item [gutter=kind], .slotui-menulist .menulist-item .gutter-kind {
124
124
  padding: var(--sld-gutter-kind);
125
125
  gap: var(--sld-gutter-kind);
126
126
  --preset-gutter: var(--sld-gutter-kind);
127
127
  }
128
- .menu-list .menu-list-item [gutter=default], .menu-list .menu-list-item .gutter-default {
128
+ .slotui-menulist .menulist-item [gutter=default], .slotui-menulist .menulist-item .gutter-default {
129
129
  padding: var(--sld-gutter-default);
130
130
  gap: var(--sld-gutter-default);
131
131
  --preset-gutter: var(--sld-gutter-default);
132
132
  }
133
- .menu-list .menu-list-item:hover {
133
+ .slotui-menulist .menulist-item:hover {
134
134
  border-color: var(--sld-hover-border-color);
135
135
  background-color: var(--sld-background-disabled);
136
136
  }
137
- .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true] {
137
+ .slotui-menulist .menulist-item.selected, .slotui-menulist .menulist-item[aria-selected=true] {
138
138
  border-color: none;
139
139
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
140
140
  box-shadow: var(--sld-selected-shadow);
141
141
  }
142
- .menu-list .menu-list-item.selected .chip,
143
- .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .chip,
144
- .menu-list .menu-list-item[aria-selected=true] .menuItemChip {
142
+ .slotui-menulist .menulist-item.selected .chip,
143
+ .slotui-menulist .menulist-item.selected .menuItemChip, .slotui-menulist .menulist-item[aria-selected=true] .chip,
144
+ .slotui-menulist .menulist-item[aria-selected=true] .menuItemChip {
145
145
  position: absolute;
146
146
  min-height: 16px;
147
147
  height: 50%;
@@ -151,7 +151,7 @@
151
151
  left: 0;
152
152
  border: 1px solid var(--sld-color-primary-alpha-mid);
153
153
  }
154
- .menu-list .menu-list-item {
154
+ .slotui-menulist .menulist-item {
155
155
  text-decoration: none;
156
156
  overflow: hidden;
157
157
  display: flex;
@@ -160,10 +160,10 @@
160
160
  width: 100%;
161
161
  max-width: 100%;
162
162
  border: 1px solid transparent;
163
- border-radius: var(--menu-list-item-radius);
163
+ border-radius: var(--menulist-item-radius);
164
164
  align-self: flex-start;
165
165
  }
166
- .menu-list .menu-list-item::before {
166
+ .slotui-menulist .menulist-item::before {
167
167
  position: absolute;
168
168
  min-height: 16px;
169
169
  height: 45%;
@@ -176,7 +176,7 @@
176
176
  border: 1px solid transparent;
177
177
  content: " ";
178
178
  }
179
- .menu-list .menu-list-item .menu-list-item-icon {
179
+ .slotui-menulist .menulist-item .menulist-item-icon {
180
180
  width: 16px;
181
181
  max-width: 16px;
182
182
  text-align: center;
@@ -186,28 +186,28 @@
186
186
  justify-content: center;
187
187
  padding: 0 0.2rem;
188
188
  }
189
- .menu-list .menu-list-item .menu-list-item-text {
189
+ .slotui-menulist .menulist-item .menulist-item-text {
190
190
  flex: 1;
191
191
  }
192
- .menu-list .menu-list-item .menu-list-item-text.wrap {
192
+ .slotui-menulist .menulist-item .menulist-item-text.wrap {
193
193
  text-wrap: ellipsis;
194
194
  white-space: normal;
195
195
  overflow: hidden;
196
196
  }
197
- .menu-list .menu-list-item .menu-list-item-action {
198
- display: var(--menu-list-item-action-display);
199
- justify-content: var(--menu-list-item-action-justify-content);
197
+ .slotui-menulist .menulist-item .menulist-item-action {
198
+ display: var(--menulist-item-action-display);
199
+ justify-content: var(--menulist-item-action-justify-content);
200
200
  }
201
201
 
202
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[aria-selected="true"] .menu-list-item-action) {
202
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
203
203
  visibility: visible;
204
204
  }
205
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[aria-selected="true"] .menu-list-item-action) {
205
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
206
206
  visibility: visible;
207
207
  }
208
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
208
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item .menulist-item-action) {
209
209
  visibility: hidden;
210
210
  }
211
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item .menu-list-item-action) {
211
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
212
212
  visibility: hidden;
213
213
  }
package/dist/slotui-css/menu-list.min.css CHANGED
@@ -1,147 +1,147 @@
1
1
  :root {
2
- --menu-list-padding: var(--sld-pad-tiny);
3
- --menu-list-item-padding: 0;
4
- --menu-list-item-radius: var(--sld-radius-small);
5
- --menu-list-item-selected-background: var(--sld-selected-background-color);
6
- --menu-list-item-action-display: flex;
7
- --menu-list-item-action-justify-content: center;
8
- --menu-list-grid-items-count: 0;
2
+ --menulist-padding: var(--sld-pad-tiny);
3
+ --menulist-item-padding: 0;
4
+ --menulist-item-radius: var(--sld-radius-small);
5
+ --menulist-item-selected-background: var(--sld-selected-background-color);
6
+ --menulist-item-action-display: flex;
7
+ --menulist-item-action-justify-content: center;
8
+ --menulist-grid-items-count: 0;
9
9
  }
10
10
 
11
- .menu-list {
11
+ .slotui-menulist {
12
12
  margin: 0;
13
13
  cursor: pointer;
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
  align-items: end;
17
- padding: var(--menu-list-padding);
17
+ padding: var(--menulist-padding);
18
18
  }
19
- .menu-list.grid {
19
+ .slotui-menulist.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
- .menu-list li.menu-list-title,
24
- .menu-list a.menu-list-title {
23
+ .slotui-menulist li.menulist-title,
24
+ .slotui-menulist a.menulist-title {
25
25
  font-weight: bold;
26
26
  }
27
- .menu-list .menu-list-item[variant*=square] {
27
+ .slotui-menulist .menulist-item[variant*=square] {
28
28
  aspect-ratio: 1/1 !important;
29
29
  height: auto;
30
30
  }
31
- .menu-list .menu-list-item[variant*=rounded] {
31
+ .slotui-menulist .menulist-item[variant*=rounded] {
32
32
  border-radius: 50%;
33
33
  }
34
- .menu-list .menu-list-item {
34
+ .slotui-menulist .menulist-item {
35
35
  width: var(--sld-width-small);
36
36
  }
37
- .menu-list .menu-list-item {
37
+ .slotui-menulist .menulist-item {
38
38
  --preset-width: var(--sld-width-small);
39
39
  }
40
- .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
40
+ .slotui-menulist .menulist-item[width=tiny], .slotui-menulist .menulist-item.width-tiny {
41
41
  --preset-width: var(--sld-width-tiny);
42
42
  width: var(--sld-width-tiny) !important;
43
43
  }
44
- .menu-list .menu-list-item[width=mini], .menu-list .menu-list-item.width-mini {
44
+ .slotui-menulist .menulist-item[width=mini], .slotui-menulist .menulist-item.width-mini {
45
45
  --preset-width: var(--sld-width-mini);
46
46
  width: var(--sld-width-mini) !important;
47
47
  }
48
- .menu-list .menu-list-item[width=small], .menu-list .menu-list-item.width-small {
48
+ .slotui-menulist .menulist-item[width=small], .slotui-menulist .menulist-item.width-small {
49
49
  --preset-width: var(--sld-width-small);
50
50
  width: var(--sld-width-small) !important;
51
51
  }
52
- .menu-list .menu-list-item[width=med], .menu-list .menu-list-item.width-med {
52
+ .slotui-menulist .menulist-item[width=med], .slotui-menulist .menulist-item.width-med {
53
53
  --preset-width: var(--sld-width-med);
54
54
  width: var(--sld-width-med) !important;
55
55
  }
56
- .menu-list .menu-list-item[width=kind], .menu-list .menu-list-item.width-kind {
56
+ .slotui-menulist .menulist-item[width=kind], .slotui-menulist .menulist-item.width-kind {
57
57
  --preset-width: var(--sld-width-kind);
58
58
  width: var(--sld-width-kind) !important;
59
59
  }
60
- .menu-list .menu-list-item[width=full], .menu-list .menu-list-item.width-full {
60
+ .slotui-menulist .menulist-item[width=full], .slotui-menulist .menulist-item.width-full {
61
61
  --preset-width: var(--sld-width-full);
62
62
  width: var(--sld-width-full) !important;
63
63
  }
64
- .menu-list .menu-list-item[width=auto], .menu-list .menu-list-item.width-auto {
64
+ .slotui-menulist .menulist-item[width=auto], .slotui-menulist .menulist-item.width-auto {
65
65
  --preset-width: var(--sld-width-auto);
66
66
  width: var(--sld-width-auto) !important;
67
67
  }
68
- .menu-list .menu-list-item[width=default], .menu-list .menu-list-item.width-default {
68
+ .slotui-menulist .menulist-item[width=default], .slotui-menulist .menulist-item.width-default {
69
69
  --preset-width: var(--sld-width-default);
70
70
  width: var(--sld-width-default) !important;
71
71
  }
72
- .menu-list .menu-list-item {
72
+ .slotui-menulist .menulist-item {
73
73
  min-height: var(--preset-tall-small);
74
74
  height: var(--preset-tall-small);
75
75
  }
76
- .menu-list .menu-list-item {
76
+ .slotui-menulist .menulist-item {
77
77
  --preset-tall: var(--sld-tall-small);
78
78
  }
79
- .menu-list .menu-list-item[tall=tiny], .menu-list .menu-list-item.tall-tiny {
79
+ .slotui-menulist .menulist-item[tall=tiny], .slotui-menulist .menulist-item.tall-tiny {
80
80
  min-height: var(--sld-tall-tiny) !important;
81
81
  }
82
- .menu-list .menu-list-item[tall=mini], .menu-list .menu-list-item.tall-mini {
82
+ .slotui-menulist .menulist-item[tall=mini], .slotui-menulist .menulist-item.tall-mini {
83
83
  min-height: var(--sld-tall-mini) !important;
84
84
  }
85
- .menu-list .menu-list-item[tall=small], .menu-list .menu-list-item.tall-small {
85
+ .slotui-menulist .menulist-item[tall=small], .slotui-menulist .menulist-item.tall-small {
86
86
  min-height: var(--sld-tall-small) !important;
87
87
  }
88
- .menu-list .menu-list-item[tall=med], .menu-list .menu-list-item.tall-med {
88
+ .slotui-menulist .menulist-item[tall=med], .slotui-menulist .menulist-item.tall-med {
89
89
  min-height: var(--sld-tall-med) !important;
90
90
  }
91
- .menu-list .menu-list-item[tall=kind], .menu-list .menu-list-item.tall-kind {
91
+ .slotui-menulist .menulist-item[tall=kind], .slotui-menulist .menulist-item.tall-kind {
92
92
  min-height: var(--sld-tall-kind) !important;
93
93
  }
94
- .menu-list .menu-list-item[tall=auto], .menu-list .menu-list-item.tall-auto {
94
+ .slotui-menulist .menulist-item[tall=auto], .slotui-menulist .menulist-item.tall-auto {
95
95
  min-height: var(--sld-tall-auto) !important;
96
96
  }
97
- .menu-list .menu-list-item[tall=default], .menu-list .menu-list-item.tall-default {
97
+ .slotui-menulist .menulist-item[tall=default], .slotui-menulist .menulist-item.tall-default {
98
98
  min-height: var(--sld-tall-default) !important;
99
99
  }
100
- .menu-list .menu-list-item {
100
+ .slotui-menulist .menulist-item {
101
101
  --preset-gutter: var(--sld-gutter-default);
102
102
  }
103
- .menu-list .menu-list-item [gutter=tiny], .menu-list .menu-list-item .gutter-tiny {
103
+ .slotui-menulist .menulist-item [gutter=tiny], .slotui-menulist .menulist-item .gutter-tiny {
104
104
  padding: var(--sld-gutter-tiny);
105
105
  gap: var(--sld-gutter-tiny);
106
106
  --preset-gutter: var(--sld-gutter-tiny);
107
107
  }
108
- .menu-list .menu-list-item [gutter=mini], .menu-list .menu-list-item .gutter-mini {
108
+ .slotui-menulist .menulist-item [gutter=mini], .slotui-menulist .menulist-item .gutter-mini {
109
109
  padding: var(--sld-gutter-mini);
110
110
  gap: var(--sld-gutter-mini);
111
111
  --preset-gutter: var(--sld-gutter-mini);
112
112
  }
113
- .menu-list .menu-list-item [gutter=small], .menu-list .menu-list-item .gutter-small {
113
+ .slotui-menulist .menulist-item [gutter=small], .slotui-menulist .menulist-item .gutter-small {
114
114
  padding: var(--sld-gutter-small);
115
115
  gap: var(--sld-gutter-small);
116
116
  --preset-gutter: var(--sld-gutter-small);
117
117
  }
118
- .menu-list .menu-list-item [gutter=med], .menu-list .menu-list-item .gutter-med {
118
+ .slotui-menulist .menulist-item [gutter=med], .slotui-menulist .menulist-item .gutter-med {
119
119
  padding: var(--sld-gutter-med);
120
120
  gap: var(--sld-gutter-med);
121
121
  --preset-gutter: var(--sld-gutter-med);
122
122
  }
123
- .menu-list .menu-list-item [gutter=kind], .menu-list .menu-list-item .gutter-kind {
123
+ .slotui-menulist .menulist-item [gutter=kind], .slotui-menulist .menulist-item .gutter-kind {
124
124
  padding: var(--sld-gutter-kind);
125
125
  gap: var(--sld-gutter-kind);
126
126
  --preset-gutter: var(--sld-gutter-kind);
127
127
  }
128
- .menu-list .menu-list-item [gutter=default], .menu-list .menu-list-item .gutter-default {
128
+ .slotui-menulist .menulist-item [gutter=default], .slotui-menulist .menulist-item .gutter-default {
129
129
  padding: var(--sld-gutter-default);
130
130
  gap: var(--sld-gutter-default);
131
131
  --preset-gutter: var(--sld-gutter-default);
132
132
  }
133
- .menu-list .menu-list-item:hover {
133
+ .slotui-menulist .menulist-item:hover {
134
134
  border-color: var(--sld-hover-border-color);
135
135
  background-color: var(--sld-background-disabled);
136
136
  }
137
- .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true] {
137
+ .slotui-menulist .menulist-item.selected, .slotui-menulist .menulist-item[aria-selected=true] {
138
138
  border-color: none;
139
139
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
140
140
  box-shadow: var(--sld-selected-shadow);
141
141
  }
142
- .menu-list .menu-list-item.selected .chip,
143
- .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .chip,
144
- .menu-list .menu-list-item[aria-selected=true] .menuItemChip {
142
+ .slotui-menulist .menulist-item.selected .chip,
143
+ .slotui-menulist .menulist-item.selected .menuItemChip, .slotui-menulist .menulist-item[aria-selected=true] .chip,
144
+ .slotui-menulist .menulist-item[aria-selected=true] .menuItemChip {
145
145
  position: absolute;
146
146
  min-height: 16px;
147
147
  height: 50%;
@@ -151,7 +151,7 @@
151
151
  left: 0;
152
152
  border: 1px solid var(--sld-color-primary-alpha-mid);
153
153
  }
154
- .menu-list .menu-list-item {
154
+ .slotui-menulist .menulist-item {
155
155
  text-decoration: none;
156
156
  overflow: hidden;
157
157
  display: flex;
@@ -160,10 +160,10 @@
160
160
  width: 100%;
161
161
  max-width: 100%;
162
162
  border: 1px solid transparent;
163
- border-radius: var(--menu-list-item-radius);
163
+ border-radius: var(--menulist-item-radius);
164
164
  align-self: flex-start;
165
165
  }
166
- .menu-list .menu-list-item::before {
166
+ .slotui-menulist .menulist-item::before {
167
167
  position: absolute;
168
168
  min-height: 16px;
169
169
  height: 45%;
@@ -176,7 +176,7 @@
176
176
  border: 1px solid transparent;
177
177
  content: " ";
178
178
  }
179
- .menu-list .menu-list-item .menu-list-item-icon {
179
+ .slotui-menulist .menulist-item .menulist-item-icon {
180
180
  width: 16px;
181
181
  max-width: 16px;
182
182
  text-align: center;
@@ -186,28 +186,28 @@
186
186
  justify-content: center;
187
187
  padding: 0 0.2rem;
188
188
  }
189
- .menu-list .menu-list-item .menu-list-item-text {
189
+ .slotui-menulist .menulist-item .menulist-item-text {
190
190
  flex: 1;
191
191
  }
192
- .menu-list .menu-list-item .menu-list-item-text.wrap {
192
+ .slotui-menulist .menulist-item .menulist-item-text.wrap {
193
193
  text-wrap: ellipsis;
194
194
  white-space: normal;
195
195
  overflow: hidden;
196
196
  }
197
- .menu-list .menu-list-item .menu-list-item-action {
198
- display: var(--menu-list-item-action-display);
199
- justify-content: var(--menu-list-item-action-justify-content);
197
+ .slotui-menulist .menulist-item .menulist-item-action {
198
+ display: var(--menulist-item-action-display);
199
+ justify-content: var(--menulist-item-action-justify-content);
200
200
  }
201
201
 
202
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[aria-selected="true"] .menu-list-item-action) {
202
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
203
203
  visibility: visible;
204
204
  }
205
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[aria-selected="true"] .menu-list-item-action) {
205
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
206
206
  visibility: visible;
207
207
  }
208
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
208
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item .menulist-item-action) {
209
209
  visibility: hidden;
210
210
  }
211
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item .menu-list-item-action) {
211
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
212
212
  visibility: hidden;
213
213
  }