@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/ui/menuList/MenuListItem.svelte CHANGED
@@ -47,7 +47,7 @@ $effect(() => {
47
47
  $effect(() => {
48
48
  if (itemIndex === void 0 && element?.parentElement) {
49
49
  itemIndex = [
50
- ...element?.parentElement?.querySelectorAll(".menu-list-item:not(.menu-list-title)")
50
+ ...element?.parentElement?.querySelectorAll(".menulist-item:not(.menulist-title)")
51
51
  ].indexOf(element);
52
52
  }
53
53
  });
@@ -79,7 +79,7 @@ const setSelected = () => {
79
79
  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
80
80
  <svelte:element
81
81
  this={href ? 'a' : tag}
82
- class="menu-list-item {className}"
82
+ class="menulist-item {className}"
83
83
  aria-selected={selectable ? menuStateContext?.selectedIndex === itemIndex : false}
84
84
  bind:this={element}
85
85
  tabindex="-1"
@@ -90,19 +90,19 @@ const setSelected = () => {
90
90
  {href}
91
91
  >{menuStateContext.hasIcon}
92
92
  {#if icon && iconFirst && menuStateContext?.hasIcon}
93
- <div class="menu-list-item-icon">
93
+ <div class="menulist-item-icon">
94
94
  <Slotted child={menuItemFirst}>
95
95
  <Icon {icon} ico={iconFirst} color={iconColor} {iconSize} />
96
96
  </Slotted>
97
97
  </div>
98
98
  {/if}
99
- <div class="menu-list-item-text" class:wrap>
99
+ <div class="menulist-item-text" class:wrap>
100
100
  <Slotted child={children} slotArgs={data}>
101
101
  {data?.[presentationField] ?? text}
102
102
  </Slotted>
103
103
  </div>
104
104
  {#if menuItemLast || action || iconLast}
105
- <div class="menu-list-item-action">
105
+ <div class="menulist-item-action">
106
106
  <Slotted child={menuItemLast}>
107
107
  <Icon ico={iconLast} />
108
108
  {action}
@@ -117,149 +117,149 @@ const setSelected = () => {
117
117
  {/if}
118
118
 
119
119
  <style global>:root {
120
- --menu-list-padding: var(--sld-pad-tiny);
121
- --menu-list-item-padding: 0;
122
- --menu-list-item-radius: var(--sld-radius-small);
123
- --menu-list-item-selected-background: var(--sld-selected-background-color);
124
- --menu-list-item-action-display: flex;
125
- --menu-list-item-action-justify-content: center;
126
- --menu-list-grid-items-count: 0;
120
+ --menulist-padding: var(--sld-pad-tiny);
121
+ --menulist-item-padding: 0;
122
+ --menulist-item-radius: var(--sld-radius-small);
123
+ --menulist-item-selected-background: var(--sld-selected-background-color);
124
+ --menulist-item-action-display: flex;
125
+ --menulist-item-action-justify-content: center;
126
+ --menulist-grid-items-count: 0;
127
127
  }
128
128
 
129
- .menu-list {
129
+ .slotui-menulist {
130
130
  margin: 0;
131
131
  cursor: pointer;
132
132
  display: flex;
133
133
  flex-direction: column;
134
134
  align-items: end;
135
- padding: var(--menu-list-padding);
135
+ padding: var(--menulist-padding);
136
136
  }
137
- .menu-list.grid {
137
+ .slotui-menulist.grid {
138
138
  display: grid;
139
139
  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr));
140
140
  }
141
- .menu-list li.menu-list-title,
142
- .menu-list a.menu-list-title {
141
+ .slotui-menulist li.menulist-title,
142
+ .slotui-menulist a.menulist-title {
143
143
  font-weight: bold;
144
144
  }
145
- .menu-list .menu-list-item[variant*=square] {
145
+ .slotui-menulist .menulist-item[variant*=square] {
146
146
  aspect-ratio: 1/1 !important;
147
147
  height: auto;
148
148
  }
149
- .menu-list .menu-list-item[variant*=rounded] {
149
+ .slotui-menulist .menulist-item[variant*=rounded] {
150
150
  border-radius: 50%;
151
151
  }
152
- .menu-list .menu-list-item {
152
+ .slotui-menulist .menulist-item {
153
153
  width: var(--sld-width-small);
154
154
  }
155
- .menu-list .menu-list-item {
155
+ .slotui-menulist .menulist-item {
156
156
  --preset-width: var(--sld-width-small);
157
157
  }
158
- .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
158
+ .slotui-menulist .menulist-item[width=tiny], .slotui-menulist .menulist-item.width-tiny {
159
159
  --preset-width: var(--sld-width-tiny);
160
160
  width: var(--sld-width-tiny) !important;
161
161
  }
162
- .menu-list .menu-list-item[width=mini], .menu-list .menu-list-item.width-mini {
162
+ .slotui-menulist .menulist-item[width=mini], .slotui-menulist .menulist-item.width-mini {
163
163
  --preset-width: var(--sld-width-mini);
164
164
  width: var(--sld-width-mini) !important;
165
165
  }
166
- .menu-list .menu-list-item[width=small], .menu-list .menu-list-item.width-small {
166
+ .slotui-menulist .menulist-item[width=small], .slotui-menulist .menulist-item.width-small {
167
167
  --preset-width: var(--sld-width-small);
168
168
  width: var(--sld-width-small) !important;
169
169
  }
170
- .menu-list .menu-list-item[width=med], .menu-list .menu-list-item.width-med {
170
+ .slotui-menulist .menulist-item[width=med], .slotui-menulist .menulist-item.width-med {
171
171
  --preset-width: var(--sld-width-med);
172
172
  width: var(--sld-width-med) !important;
173
173
  }
174
- .menu-list .menu-list-item[width=kind], .menu-list .menu-list-item.width-kind {
174
+ .slotui-menulist .menulist-item[width=kind], .slotui-menulist .menulist-item.width-kind {
175
175
  --preset-width: var(--sld-width-kind);
176
176
  width: var(--sld-width-kind) !important;
177
177
  }
178
- .menu-list .menu-list-item[width=full], .menu-list .menu-list-item.width-full {
178
+ .slotui-menulist .menulist-item[width=full], .slotui-menulist .menulist-item.width-full {
179
179
  --preset-width: var(--sld-width-full);
180
180
  width: var(--sld-width-full) !important;
181
181
  }
182
- .menu-list .menu-list-item[width=auto], .menu-list .menu-list-item.width-auto {
182
+ .slotui-menulist .menulist-item[width=auto], .slotui-menulist .menulist-item.width-auto {
183
183
  --preset-width: var(--sld-width-auto);
184
184
  width: var(--sld-width-auto) !important;
185
185
  }
186
- .menu-list .menu-list-item[width=default], .menu-list .menu-list-item.width-default {
186
+ .slotui-menulist .menulist-item[width=default], .slotui-menulist .menulist-item.width-default {
187
187
  --preset-width: var(--sld-width-default);
188
188
  width: var(--sld-width-default) !important;
189
189
  }
190
- .menu-list .menu-list-item {
190
+ .slotui-menulist .menulist-item {
191
191
  min-height: var(--preset-tall-small);
192
192
  height: var(--preset-tall-small);
193
193
  }
194
- .menu-list .menu-list-item {
194
+ .slotui-menulist .menulist-item {
195
195
  --preset-tall: var(--sld-tall-small);
196
196
  }
197
- .menu-list .menu-list-item[tall=tiny], .menu-list .menu-list-item.tall-tiny {
197
+ .slotui-menulist .menulist-item[tall=tiny], .slotui-menulist .menulist-item.tall-tiny {
198
198
  min-height: var(--sld-tall-tiny) !important;
199
199
  }
200
- .menu-list .menu-list-item[tall=mini], .menu-list .menu-list-item.tall-mini {
200
+ .slotui-menulist .menulist-item[tall=mini], .slotui-menulist .menulist-item.tall-mini {
201
201
  min-height: var(--sld-tall-mini) !important;
202
202
  }
203
- .menu-list .menu-list-item[tall=small], .menu-list .menu-list-item.tall-small {
203
+ .slotui-menulist .menulist-item[tall=small], .slotui-menulist .menulist-item.tall-small {
204
204
  min-height: var(--sld-tall-small) !important;
205
205
  }
206
- .menu-list .menu-list-item[tall=med], .menu-list .menu-list-item.tall-med {
206
+ .slotui-menulist .menulist-item[tall=med], .slotui-menulist .menulist-item.tall-med {
207
207
  min-height: var(--sld-tall-med) !important;
208
208
  }
209
- .menu-list .menu-list-item[tall=kind], .menu-list .menu-list-item.tall-kind {
209
+ .slotui-menulist .menulist-item[tall=kind], .slotui-menulist .menulist-item.tall-kind {
210
210
  min-height: var(--sld-tall-kind) !important;
211
211
  }
212
- .menu-list .menu-list-item[tall=auto], .menu-list .menu-list-item.tall-auto {
212
+ .slotui-menulist .menulist-item[tall=auto], .slotui-menulist .menulist-item.tall-auto {
213
213
  min-height: var(--sld-tall-auto) !important;
214
214
  }
215
- .menu-list .menu-list-item[tall=default], .menu-list .menu-list-item.tall-default {
215
+ .slotui-menulist .menulist-item[tall=default], .slotui-menulist .menulist-item.tall-default {
216
216
  min-height: var(--sld-tall-default) !important;
217
217
  }
218
- .menu-list .menu-list-item {
218
+ .slotui-menulist .menulist-item {
219
219
  --preset-gutter: var(--sld-gutter-default);
220
220
  }
221
- .menu-list .menu-list-item [gutter=tiny], .menu-list .menu-list-item .gutter-tiny {
221
+ .slotui-menulist .menulist-item [gutter=tiny], .slotui-menulist .menulist-item .gutter-tiny {
222
222
  padding: var(--sld-gutter-tiny);
223
223
  gap: var(--sld-gutter-tiny);
224
224
  --preset-gutter: var(--sld-gutter-tiny);
225
225
  }
226
- .menu-list .menu-list-item [gutter=mini], .menu-list .menu-list-item .gutter-mini {
226
+ .slotui-menulist .menulist-item [gutter=mini], .slotui-menulist .menulist-item .gutter-mini {
227
227
  padding: var(--sld-gutter-mini);
228
228
  gap: var(--sld-gutter-mini);
229
229
  --preset-gutter: var(--sld-gutter-mini);
230
230
  }
231
- .menu-list .menu-list-item [gutter=small], .menu-list .menu-list-item .gutter-small {
231
+ .slotui-menulist .menulist-item [gutter=small], .slotui-menulist .menulist-item .gutter-small {
232
232
  padding: var(--sld-gutter-small);
233
233
  gap: var(--sld-gutter-small);
234
234
  --preset-gutter: var(--sld-gutter-small);
235
235
  }
236
- .menu-list .menu-list-item [gutter=med], .menu-list .menu-list-item .gutter-med {
236
+ .slotui-menulist .menulist-item [gutter=med], .slotui-menulist .menulist-item .gutter-med {
237
237
  padding: var(--sld-gutter-med);
238
238
  gap: var(--sld-gutter-med);
239
239
  --preset-gutter: var(--sld-gutter-med);
240
240
  }
241
- .menu-list .menu-list-item [gutter=kind], .menu-list .menu-list-item .gutter-kind {
241
+ .slotui-menulist .menulist-item [gutter=kind], .slotui-menulist .menulist-item .gutter-kind {
242
242
  padding: var(--sld-gutter-kind);
243
243
  gap: var(--sld-gutter-kind);
244
244
  --preset-gutter: var(--sld-gutter-kind);
245
245
  }
246
- .menu-list .menu-list-item [gutter=default], .menu-list .menu-list-item .gutter-default {
246
+ .slotui-menulist .menulist-item [gutter=default], .slotui-menulist .menulist-item .gutter-default {
247
247
  padding: var(--sld-gutter-default);
248
248
  gap: var(--sld-gutter-default);
249
249
  --preset-gutter: var(--sld-gutter-default);
250
250
  }
251
- .menu-list .menu-list-item:hover {
251
+ .slotui-menulist .menulist-item:hover {
252
252
  border-color: var(--sld-hover-border-color);
253
253
  background-color: var(--sld-background-disabled);
254
254
  }
255
- .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true] {
255
+ .slotui-menulist .menulist-item.selected, .slotui-menulist .menulist-item[aria-selected=true] {
256
256
  border-color: none;
257
257
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
258
258
  box-shadow: var(--sld-selected-shadow);
259
259
  }
260
- .menu-list .menu-list-item.selected .chip,
261
- .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .chip,
262
- .menu-list .menu-list-item[aria-selected=true] .menuItemChip {
260
+ .slotui-menulist .menulist-item.selected .chip,
261
+ .slotui-menulist .menulist-item.selected .menuItemChip, .slotui-menulist .menulist-item[aria-selected=true] .chip,
262
+ .slotui-menulist .menulist-item[aria-selected=true] .menuItemChip {
263
263
  position: absolute;
264
264
  min-height: 16px;
265
265
  height: 50%;
@@ -269,7 +269,7 @@ const setSelected = () => {
269
269
  left: 0;
270
270
  border: 1px solid var(--sld-color-primary-alpha-mid);
271
271
  }
272
- .menu-list .menu-list-item {
272
+ .slotui-menulist .menulist-item {
273
273
  text-decoration: none;
274
274
  overflow: hidden;
275
275
  display: flex;
@@ -278,10 +278,10 @@ const setSelected = () => {
278
278
  width: 100%;
279
279
  max-width: 100%;
280
280
  border: 1px solid transparent;
281
- border-radius: var(--menu-list-item-radius);
281
+ border-radius: var(--menulist-item-radius);
282
282
  align-self: flex-start;
283
283
  }
284
- .menu-list .menu-list-item::before {
284
+ .slotui-menulist .menulist-item::before {
285
285
  position: absolute;
286
286
  min-height: 16px;
287
287
  height: 45%;
@@ -294,7 +294,7 @@ const setSelected = () => {
294
294
  border: 1px solid transparent;
295
295
  content: " ";
296
296
  }
297
- .menu-list .menu-list-item .menu-list-item-icon {
297
+ .slotui-menulist .menulist-item .menulist-item-icon {
298
298
  width: 16px;
299
299
  max-width: 16px;
300
300
  text-align: center;
@@ -304,28 +304,28 @@ const setSelected = () => {
304
304
  justify-content: center;
305
305
  padding: 0 0.2rem;
306
306
  }
307
- .menu-list .menu-list-item .menu-list-item-text {
307
+ .slotui-menulist .menulist-item .menulist-item-text {
308
308
  flex: 1;
309
309
  }
310
- .menu-list .menu-list-item .menu-list-item-text.wrap {
310
+ .slotui-menulist .menulist-item .menulist-item-text.wrap {
311
311
  text-wrap: ellipsis;
312
312
  white-space: normal;
313
313
  overflow: hidden;
314
314
  }
315
- .menu-list .menu-list-item .menu-list-item-action {
316
- display: var(--menu-list-item-action-display);
317
- justify-content: var(--menu-list-item-action-justify-content);
315
+ .slotui-menulist .menulist-item .menulist-item-action {
316
+ display: var(--menulist-item-action-display);
317
+ justify-content: var(--menulist-item-action-justify-content);
318
318
  }
319
319
 
320
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[aria-selected="true"] .menu-list-item-action) {
320
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
321
321
  visibility: visible;
322
322
  }
323
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[aria-selected="true"] .menu-list-item-action) {
323
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
324
324
  visibility: visible;
325
325
  }
326
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
326
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item .menulist-item-action) {
327
327
  visibility: hidden;
328
328
  }
329
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item .menu-list-item-action) {
329
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
330
330
  visibility: hidden;
331
331
  }</style>
package/dist/ui/menuList/MenuListTitle.svelte CHANGED
@@ -2,152 +2,152 @@
2
2
  let { class: className, ...rest } = $props();
3
3
  </script>
4
4
 
5
- <MenuListItem {...rest} selectable={false} class="menu-list-title {className}" />
5
+ <MenuListItem {...rest} selectable={false} class="slotui-menulist-title {className}" />
6
6
 
7
7
  <style>:root {
8
- --menu-list-padding: var(--sld-pad-tiny);
9
- --menu-list-item-padding: 0;
10
- --menu-list-item-radius: var(--sld-radius-small);
11
- --menu-list-item-selected-background: var(--sld-selected-background-color);
12
- --menu-list-item-action-display: flex;
13
- --menu-list-item-action-justify-content: center;
14
- --menu-list-grid-items-count: 0;
8
+ --menulist-padding: var(--sld-pad-tiny);
9
+ --menulist-item-padding: 0;
10
+ --menulist-item-radius: var(--sld-radius-small);
11
+ --menulist-item-selected-background: var(--sld-selected-background-color);
12
+ --menulist-item-action-display: flex;
13
+ --menulist-item-action-justify-content: center;
14
+ --menulist-grid-items-count: 0;
15
15
  }
16
16
 
17
- .menu-list {
17
+ .slotui-menulist {
18
18
  margin: 0;
19
19
  cursor: pointer;
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
  align-items: end;
23
- padding: var(--menu-list-padding);
23
+ padding: var(--menulist-padding);
24
24
  }
25
- .menu-list.grid {
25
+ .slotui-menulist.grid {
26
26
  display: grid;
27
27
  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr));
28
28
  }
29
- .menu-list li.menu-list-title,
30
- .menu-list a.menu-list-title {
29
+ .slotui-menulist li.menulist-title,
30
+ .slotui-menulist a.menulist-title {
31
31
  font-weight: bold;
32
32
  }
33
- .menu-list .menu-list-item[variant*=square] {
33
+ .slotui-menulist .menulist-item[variant*=square] {
34
34
  aspect-ratio: 1/1 !important;
35
35
  height: auto;
36
36
  }
37
- .menu-list .menu-list-item[variant*=rounded] {
37
+ .slotui-menulist .menulist-item[variant*=rounded] {
38
38
  border-radius: 50%;
39
39
  }
40
- .menu-list .menu-list-item {
40
+ .slotui-menulist .menulist-item {
41
41
  width: var(--sld-width-small);
42
42
  }
43
- .menu-list .menu-list-item {
43
+ .slotui-menulist .menulist-item {
44
44
  --preset-width: var(--sld-width-small);
45
45
  }
46
- .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
46
+ .slotui-menulist .menulist-item[width=tiny], .slotui-menulist .menulist-item.width-tiny {
47
47
  --preset-width: var(--sld-width-tiny);
48
48
  width: var(--sld-width-tiny) !important;
49
49
  }
50
- .menu-list .menu-list-item[width=mini], .menu-list .menu-list-item.width-mini {
50
+ .slotui-menulist .menulist-item[width=mini], .slotui-menulist .menulist-item.width-mini {
51
51
  --preset-width: var(--sld-width-mini);
52
52
  width: var(--sld-width-mini) !important;
53
53
  }
54
- .menu-list .menu-list-item[width=small], .menu-list .menu-list-item.width-small {
54
+ .slotui-menulist .menulist-item[width=small], .slotui-menulist .menulist-item.width-small {
55
55
  --preset-width: var(--sld-width-small);
56
56
  width: var(--sld-width-small) !important;
57
57
  }
58
- .menu-list .menu-list-item[width=med], .menu-list .menu-list-item.width-med {
58
+ .slotui-menulist .menulist-item[width=med], .slotui-menulist .menulist-item.width-med {
59
59
  --preset-width: var(--sld-width-med);
60
60
  width: var(--sld-width-med) !important;
61
61
  }
62
- .menu-list .menu-list-item[width=kind], .menu-list .menu-list-item.width-kind {
62
+ .slotui-menulist .menulist-item[width=kind], .slotui-menulist .menulist-item.width-kind {
63
63
  --preset-width: var(--sld-width-kind);
64
64
  width: var(--sld-width-kind) !important;
65
65
  }
66
- .menu-list .menu-list-item[width=full], .menu-list .menu-list-item.width-full {
66
+ .slotui-menulist .menulist-item[width=full], .slotui-menulist .menulist-item.width-full {
67
67
  --preset-width: var(--sld-width-full);
68
68
  width: var(--sld-width-full) !important;
69
69
  }
70
- .menu-list .menu-list-item[width=auto], .menu-list .menu-list-item.width-auto {
70
+ .slotui-menulist .menulist-item[width=auto], .slotui-menulist .menulist-item.width-auto {
71
71
  --preset-width: var(--sld-width-auto);
72
72
  width: var(--sld-width-auto) !important;
73
73
  }
74
- .menu-list .menu-list-item[width=default], .menu-list .menu-list-item.width-default {
74
+ .slotui-menulist .menulist-item[width=default], .slotui-menulist .menulist-item.width-default {
75
75
  --preset-width: var(--sld-width-default);
76
76
  width: var(--sld-width-default) !important;
77
77
  }
78
- .menu-list .menu-list-item {
78
+ .slotui-menulist .menulist-item {
79
79
  min-height: var(--preset-tall-small);
80
80
  height: var(--preset-tall-small);
81
81
  }
82
- .menu-list .menu-list-item {
82
+ .slotui-menulist .menulist-item {
83
83
  --preset-tall: var(--sld-tall-small);
84
84
  }
85
- .menu-list .menu-list-item[tall=tiny], .menu-list .menu-list-item.tall-tiny {
85
+ .slotui-menulist .menulist-item[tall=tiny], .slotui-menulist .menulist-item.tall-tiny {
86
86
  min-height: var(--sld-tall-tiny) !important;
87
87
  }
88
- .menu-list .menu-list-item[tall=mini], .menu-list .menu-list-item.tall-mini {
88
+ .slotui-menulist .menulist-item[tall=mini], .slotui-menulist .menulist-item.tall-mini {
89
89
  min-height: var(--sld-tall-mini) !important;
90
90
  }
91
- .menu-list .menu-list-item[tall=small], .menu-list .menu-list-item.tall-small {
91
+ .slotui-menulist .menulist-item[tall=small], .slotui-menulist .menulist-item.tall-small {
92
92
  min-height: var(--sld-tall-small) !important;
93
93
  }
94
- .menu-list .menu-list-item[tall=med], .menu-list .menu-list-item.tall-med {
94
+ .slotui-menulist .menulist-item[tall=med], .slotui-menulist .menulist-item.tall-med {
95
95
  min-height: var(--sld-tall-med) !important;
96
96
  }
97
- .menu-list .menu-list-item[tall=kind], .menu-list .menu-list-item.tall-kind {
97
+ .slotui-menulist .menulist-item[tall=kind], .slotui-menulist .menulist-item.tall-kind {
98
98
  min-height: var(--sld-tall-kind) !important;
99
99
  }
100
- .menu-list .menu-list-item[tall=auto], .menu-list .menu-list-item.tall-auto {
100
+ .slotui-menulist .menulist-item[tall=auto], .slotui-menulist .menulist-item.tall-auto {
101
101
  min-height: var(--sld-tall-auto) !important;
102
102
  }
103
- .menu-list .menu-list-item[tall=default], .menu-list .menu-list-item.tall-default {
103
+ .slotui-menulist .menulist-item[tall=default], .slotui-menulist .menulist-item.tall-default {
104
104
  min-height: var(--sld-tall-default) !important;
105
105
  }
106
- .menu-list .menu-list-item {
106
+ .slotui-menulist .menulist-item {
107
107
  --preset-gutter: var(--sld-gutter-default);
108
108
  }
109
- .menu-list .menu-list-item [gutter=tiny], .menu-list .menu-list-item .gutter-tiny {
109
+ .slotui-menulist .menulist-item [gutter=tiny], .slotui-menulist .menulist-item .gutter-tiny {
110
110
  padding: var(--sld-gutter-tiny);
111
111
  gap: var(--sld-gutter-tiny);
112
112
  --preset-gutter: var(--sld-gutter-tiny);
113
113
  }
114
- .menu-list .menu-list-item [gutter=mini], .menu-list .menu-list-item .gutter-mini {
114
+ .slotui-menulist .menulist-item [gutter=mini], .slotui-menulist .menulist-item .gutter-mini {
115
115
  padding: var(--sld-gutter-mini);
116
116
  gap: var(--sld-gutter-mini);
117
117
  --preset-gutter: var(--sld-gutter-mini);
118
118
  }
119
- .menu-list .menu-list-item [gutter=small], .menu-list .menu-list-item .gutter-small {
119
+ .slotui-menulist .menulist-item [gutter=small], .slotui-menulist .menulist-item .gutter-small {
120
120
  padding: var(--sld-gutter-small);
121
121
  gap: var(--sld-gutter-small);
122
122
  --preset-gutter: var(--sld-gutter-small);
123
123
  }
124
- .menu-list .menu-list-item [gutter=med], .menu-list .menu-list-item .gutter-med {
124
+ .slotui-menulist .menulist-item [gutter=med], .slotui-menulist .menulist-item .gutter-med {
125
125
  padding: var(--sld-gutter-med);
126
126
  gap: var(--sld-gutter-med);
127
127
  --preset-gutter: var(--sld-gutter-med);
128
128
  }
129
- .menu-list .menu-list-item [gutter=kind], .menu-list .menu-list-item .gutter-kind {
129
+ .slotui-menulist .menulist-item [gutter=kind], .slotui-menulist .menulist-item .gutter-kind {
130
130
  padding: var(--sld-gutter-kind);
131
131
  gap: var(--sld-gutter-kind);
132
132
  --preset-gutter: var(--sld-gutter-kind);
133
133
  }
134
- .menu-list .menu-list-item [gutter=default], .menu-list .menu-list-item .gutter-default {
134
+ .slotui-menulist .menulist-item [gutter=default], .slotui-menulist .menulist-item .gutter-default {
135
135
  padding: var(--sld-gutter-default);
136
136
  gap: var(--sld-gutter-default);
137
137
  --preset-gutter: var(--sld-gutter-default);
138
138
  }
139
- .menu-list .menu-list-item:hover {
139
+ .slotui-menulist .menulist-item:hover {
140
140
  border-color: var(--sld-hover-border-color);
141
141
  background-color: var(--sld-background-disabled);
142
142
  }
143
- .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true] {
143
+ .slotui-menulist .menulist-item.selected, .slotui-menulist .menulist-item[aria-selected=true] {
144
144
  border-color: none;
145
145
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
146
146
  box-shadow: var(--sld-selected-shadow);
147
147
  }
148
- .menu-list .menu-list-item.selected .chip,
149
- .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .chip,
150
- .menu-list .menu-list-item[aria-selected=true] .menuItemChip {
148
+ .slotui-menulist .menulist-item.selected .chip,
149
+ .slotui-menulist .menulist-item.selected .menuItemChip, .slotui-menulist .menulist-item[aria-selected=true] .chip,
150
+ .slotui-menulist .menulist-item[aria-selected=true] .menuItemChip {
151
151
  position: absolute;
152
152
  min-height: 16px;
153
153
  height: 50%;
@@ -157,7 +157,7 @@ let { class: className, ...rest } = $props();
157
157
  left: 0;
158
158
  border: 1px solid var(--sld-color-primary-alpha-mid);
159
159
  }
160
- .menu-list .menu-list-item {
160
+ .slotui-menulist .menulist-item {
161
161
  text-decoration: none;
162
162
  overflow: hidden;
163
163
  display: flex;
@@ -166,10 +166,10 @@ let { class: className, ...rest } = $props();
166
166
  width: 100%;
167
167
  max-width: 100%;
168
168
  border: 1px solid transparent;
169
- border-radius: var(--menu-list-item-radius);
169
+ border-radius: var(--menulist-item-radius);
170
170
  align-self: flex-start;
171
171
  }
172
- .menu-list .menu-list-item::before {
172
+ .slotui-menulist .menulist-item::before {
173
173
  position: absolute;
174
174
  min-height: 16px;
175
175
  height: 45%;
@@ -182,7 +182,7 @@ let { class: className, ...rest } = $props();
182
182
  border: 1px solid transparent;
183
183
  content: " ";
184
184
  }
185
- .menu-list .menu-list-item .menu-list-item-icon {
185
+ .slotui-menulist .menulist-item .menulist-item-icon {
186
186
  width: 16px;
187
187
  max-width: 16px;
188
188
  text-align: center;
@@ -192,28 +192,28 @@ let { class: className, ...rest } = $props();
192
192
  justify-content: center;
193
193
  padding: 0 0.2rem;
194
194
  }
195
- .menu-list .menu-list-item .menu-list-item-text {
195
+ .slotui-menulist .menulist-item .menulist-item-text {
196
196
  flex: 1;
197
197
  }
198
- .menu-list .menu-list-item .menu-list-item-text.wrap {
198
+ .slotui-menulist .menulist-item .menulist-item-text.wrap {
199
199
  text-wrap: ellipsis;
200
200
  white-space: normal;
201
201
  overflow: hidden;
202
202
  }
203
- .menu-list .menu-list-item .menu-list-item-action {
204
- display: var(--menu-list-item-action-display);
205
- justify-content: var(--menu-list-item-action-justify-content);
203
+ .slotui-menulist .menulist-item .menulist-item-action {
204
+ display: var(--menulist-item-action-display);
205
+ justify-content: var(--menulist-item-action-justify-content);
206
206
  }
207
207
 
208
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[aria-selected="true"] .menu-list-item-action) {
208
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
209
209
  visibility: visible;
210
210
  }
211
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[aria-selected="true"] .menu-list-item-action) {
211
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
212
212
  visibility: visible;
213
213
  }
214
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
214
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item .menulist-item-action) {
215
215
  visibility: hidden;
216
216
  }
217
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item .menu-list-item-action) {
217
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
218
218
  visibility: hidden;
219
219
  }</style>