@medyll/idae-slotui-svelte 0.64.0 → 0.66.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 +1 -1
  2. package/dist/index.js +1 -1
  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 +58 -58
  6. package/dist/slotui-css/slotui-min-css.css +58 -58
  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
@@ -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';
package/dist/index.js CHANGED
@@ -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';
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
  }