@medyll/idae-slotui-svelte 0.63.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 (62) hide show
  1. package/dist/base/cartouche/Cartouche.svelte +13 -9
  2. package/dist/base/cartouche/cartouche.scss +23 -23
  3. package/dist/base/titleBar/TitleBar.svelte +3 -1
  4. package/dist/base/titleBar/title-bar.scss +3 -1
  5. package/dist/controls/button/Button.svelte +466 -516
  6. package/dist/controls/button/ButtonAction.svelte +462 -512
  7. package/dist/controls/button/button.scss +20 -38
  8. package/dist/controls/checkbox/Checkbox.svelte +16 -14
  9. package/dist/controls/checkbox/checkbox.scss +14 -11
  10. package/dist/controls/slider/Slider.svelte +9 -9
  11. package/dist/controls/slider/slider.scss +9 -7
  12. package/dist/controls/textfield/TextField.svelte +2 -2
  13. package/dist/csss/csss.scss +3 -1
  14. package/dist/data/dataList/DataList.svelte +2 -2
  15. package/dist/data/dataList/datalist.scss +1 -1
  16. package/dist/data/finder/Finder.svelte +2 -2
  17. package/dist/index.d.ts +2 -3
  18. package/dist/index.js +2 -3
  19. package/dist/navigation/drawer/Drawer.svelte +10 -8
  20. package/dist/navigation/drawer/drawer.scss +17 -13
  21. package/dist/slotui-css/button.css +462 -512
  22. package/dist/slotui-css/button.min.css +462 -512
  23. package/dist/slotui-css/cartouche.css +13 -9
  24. package/dist/slotui-css/cartouche.min.css +13 -9
  25. package/dist/slotui-css/checkbox.css +16 -14
  26. package/dist/slotui-css/checkbox.min.css +16 -14
  27. package/dist/slotui-css/csss.css +5 -5
  28. package/dist/slotui-css/csss.min.css +5 -5
  29. package/dist/slotui-css/datalist.css +2 -2
  30. package/dist/slotui-css/datalist.min.css +2 -2
  31. package/dist/slotui-css/drawer.css +10 -8
  32. package/dist/slotui-css/drawer.min.css +10 -8
  33. package/dist/slotui-css/finder.css +2 -2
  34. package/dist/slotui-css/finder.min.css +2 -2
  35. package/dist/slotui-css/marquee.css +6 -6
  36. package/dist/slotui-css/marquee.min.css +6 -6
  37. package/dist/slotui-css/menu-list.css +60 -61
  38. package/dist/slotui-css/menu-list.min.css +60 -61
  39. package/dist/slotui-css/menu.css +4 -5
  40. package/dist/slotui-css/menu.min.css +4 -5
  41. package/dist/slotui-css/slider.css +9 -9
  42. package/dist/slotui-css/slider.min.css +9 -9
  43. package/dist/slotui-css/slotui-css.css +628 -671
  44. package/dist/slotui-css/slotui-min-css.css +628 -671
  45. package/dist/slotui-css/textfield.css +2 -2
  46. package/dist/slotui-css/textfield.min.css +2 -2
  47. package/dist/slotui-css/title-bar.css +3 -1
  48. package/dist/slotui-css/title-bar.min.css +3 -1
  49. package/dist/slotui-css/tree.css +4 -5
  50. package/dist/slotui-css/tree.min.css +4 -5
  51. package/dist/styles/slotui-mixins.scss +21 -22
  52. package/dist/ui/marquee/Marquee.svelte +6 -6
  53. package/dist/ui/menu/MenuTitle.svelte +4 -5
  54. package/dist/ui/menu/menu.scss +1 -0
  55. package/dist/ui/menuList/MenuList.svelte +63 -64
  56. package/dist/ui/menuList/MenuListItem.svelte +65 -67
  57. package/dist/ui/menuList/MenuListTitle.svelte +61 -62
  58. package/dist/ui/menuList/menu-list.scss +21 -21
  59. package/dist/ui/tree/Tree.svelte +5 -6
  60. package/dist/utils/content/Content.svelte +8 -8
  61. package/package.json +3 -3
  62. package/dist/slotui-css/slotui-combined.css +0 -5075
package/dist/slotui-css/menu-list.css CHANGED
@@ -1,148 +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], .menu-list .menu-list-item[square=true], .menu-list .menu-list-item.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], .menu-list .menu-list-item[rounded=true], .menu-list .menu-list-item.rounded {
31
+ .slotui-menulist .menulist-item[variant*=rounded] {
32
32
  border-radius: 50%;
33
33
  }
34
- .menu-list .menu-list-item {
35
- --preset-width: var(--sld-width-small);
36
- }
37
- .menu-list .menu-list-item {
34
+ .slotui-menulist .menulist-item {
38
35
  width: var(--sld-width-small);
39
36
  }
40
- .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
37
+ .slotui-menulist .menulist-item {
38
+ --preset-width: var(--sld-width-small);
39
+ }
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 :global([gutter="tiny"]), .menu-list .menu-list-item :global(.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 :global([gutter="mini"]), .menu-list .menu-list-item :global(.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 :global([gutter="small"]), .menu-list .menu-list-item :global(.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 :global([gutter="med"]), .menu-list .menu-list-item :global(.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 :global([gutter="kind"]), .menu-list .menu-list-item :global(.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 :global([gutter="default"]), .menu-list .menu-list-item :global(.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], .menu-list .menu-list-item[data-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 .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 {
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 {
146
145
  position: absolute;
147
146
  min-height: 16px;
148
147
  height: 50%;
@@ -152,7 +151,7 @@
152
151
  left: 0;
153
152
  border: 1px solid var(--sld-color-primary-alpha-mid);
154
153
  }
155
- .menu-list .menu-list-item {
154
+ .slotui-menulist .menulist-item {
156
155
  text-decoration: none;
157
156
  overflow: hidden;
158
157
  display: flex;
@@ -161,10 +160,10 @@
161
160
  width: 100%;
162
161
  max-width: 100%;
163
162
  border: 1px solid transparent;
164
- border-radius: var(--menu-list-item-radius);
163
+ border-radius: var(--menulist-item-radius);
165
164
  align-self: flex-start;
166
165
  }
167
- .menu-list .menu-list-item::before {
166
+ .slotui-menulist .menulist-item::before {
168
167
  position: absolute;
169
168
  min-height: 16px;
170
169
  height: 45%;
@@ -177,7 +176,7 @@
177
176
  border: 1px solid transparent;
178
177
  content: " ";
179
178
  }
180
- .menu-list .menu-list-item .menu-list-item-icon {
179
+ .slotui-menulist .menulist-item .menulist-item-icon {
181
180
  width: 16px;
182
181
  max-width: 16px;
183
182
  text-align: center;
@@ -187,28 +186,28 @@
187
186
  justify-content: center;
188
187
  padding: 0 0.2rem;
189
188
  }
190
- .menu-list .menu-list-item .menu-list-item-text {
189
+ .slotui-menulist .menulist-item .menulist-item-text {
191
190
  flex: 1;
192
191
  }
193
- .menu-list .menu-list-item .menu-list-item-text.wrap {
192
+ .slotui-menulist .menulist-item .menulist-item-text.wrap {
194
193
  text-wrap: ellipsis;
195
194
  white-space: normal;
196
195
  overflow: hidden;
197
196
  }
198
- .menu-list .menu-list-item .menu-list-item-action {
199
- display: var(--menu-list-item-action-display);
200
- 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);
201
200
  }
202
201
 
203
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[data-selected="true"] .menu-list-item-action) {
202
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
204
203
  visibility: visible;
205
204
  }
206
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[data-selected="true"] .menu-list-item-action) {
205
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
207
206
  visibility: visible;
208
207
  }
209
- :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) {
210
209
  visibility: hidden;
211
210
  }
212
- :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) {
213
212
  visibility: hidden;
214
213
  }
package/dist/slotui-css/menu-list.min.css CHANGED
@@ -1,148 +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], .menu-list .menu-list-item[square=true], .menu-list .menu-list-item.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], .menu-list .menu-list-item[rounded=true], .menu-list .menu-list-item.rounded {
31
+ .slotui-menulist .menulist-item[variant*=rounded] {
32
32
  border-radius: 50%;
33
33
  }
34
- .menu-list .menu-list-item {
35
- --preset-width: var(--sld-width-small);
36
- }
37
- .menu-list .menu-list-item {
34
+ .slotui-menulist .menulist-item {
38
35
  width: var(--sld-width-small);
39
36
  }
40
- .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
37
+ .slotui-menulist .menulist-item {
38
+ --preset-width: var(--sld-width-small);
39
+ }
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 :global([gutter="tiny"]), .menu-list .menu-list-item :global(.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 :global([gutter="mini"]), .menu-list .menu-list-item :global(.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 :global([gutter="small"]), .menu-list .menu-list-item :global(.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 :global([gutter="med"]), .menu-list .menu-list-item :global(.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 :global([gutter="kind"]), .menu-list .menu-list-item :global(.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 :global([gutter="default"]), .menu-list .menu-list-item :global(.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], .menu-list .menu-list-item[data-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 .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 {
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 {
146
145
  position: absolute;
147
146
  min-height: 16px;
148
147
  height: 50%;
@@ -152,7 +151,7 @@
152
151
  left: 0;
153
152
  border: 1px solid var(--sld-color-primary-alpha-mid);
154
153
  }
155
- .menu-list .menu-list-item {
154
+ .slotui-menulist .menulist-item {
156
155
  text-decoration: none;
157
156
  overflow: hidden;
158
157
  display: flex;
@@ -161,10 +160,10 @@
161
160
  width: 100%;
162
161
  max-width: 100%;
163
162
  border: 1px solid transparent;
164
- border-radius: var(--menu-list-item-radius);
163
+ border-radius: var(--menulist-item-radius);
165
164
  align-self: flex-start;
166
165
  }
167
- .menu-list .menu-list-item::before {
166
+ .slotui-menulist .menulist-item::before {
168
167
  position: absolute;
169
168
  min-height: 16px;
170
169
  height: 45%;
@@ -177,7 +176,7 @@
177
176
  border: 1px solid transparent;
178
177
  content: " ";
179
178
  }
180
- .menu-list .menu-list-item .menu-list-item-icon {
179
+ .slotui-menulist .menulist-item .menulist-item-icon {
181
180
  width: 16px;
182
181
  max-width: 16px;
183
182
  text-align: center;
@@ -187,28 +186,28 @@
187
186
  justify-content: center;
188
187
  padding: 0 0.2rem;
189
188
  }
190
- .menu-list .menu-list-item .menu-list-item-text {
189
+ .slotui-menulist .menulist-item .menulist-item-text {
191
190
  flex: 1;
192
191
  }
193
- .menu-list .menu-list-item .menu-list-item-text.wrap {
192
+ .slotui-menulist .menulist-item .menulist-item-text.wrap {
194
193
  text-wrap: ellipsis;
195
194
  white-space: normal;
196
195
  overflow: hidden;
197
196
  }
198
- .menu-list .menu-list-item .menu-list-item-action {
199
- display: var(--menu-list-item-action-display);
200
- 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);
201
200
  }
202
201
 
203
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[data-selected="true"] .menu-list-item-action) {
202
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
204
203
  visibility: visible;
205
204
  }
206
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[data-selected="true"] .menu-list-item-action) {
205
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
207
206
  visibility: visible;
208
207
  }
209
- :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) {
210
209
  visibility: hidden;
211
210
  }
212
- :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) {
213
212
  visibility: hidden;
214
213
  }
package/dist/slotui-css/menu.css CHANGED
@@ -26,15 +26,14 @@ li.menuItem:hover {
26
26
  border-color: var(--sld-hover-border-color);
27
27
  background-color: var(--sld-background-disabled);
28
28
  }
29
- li.menuItem.selected, li.menuItem[aria-selected=true], li.menuItem[data-selected=true] {
29
+ li.menuItem.selected, li.menuItem[aria-selected=true] {
30
30
  border-color: none;
31
31
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
32
32
  box-shadow: var(--sld-selected-shadow);
33
33
  }
34
- li.menuItem.selected .listItemChip,
35
- li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .listItemChip,
36
- li.menuItem[aria-selected=true] .menuItemChip, li.menuItem[data-selected=true] .listItemChip,
37
- li.menuItem[data-selected=true] .menuItemChip {
34
+ li.menuItem.selected .chip,
35
+ li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .chip,
36
+ li.menuItem[aria-selected=true] .menuItemChip {
38
37
  position: absolute;
39
38
  min-height: 16px;
40
39
  height: 50%;
package/dist/slotui-css/menu.min.css CHANGED
@@ -26,15 +26,14 @@ li.menuItem:hover {
26
26
  border-color: var(--sld-hover-border-color);
27
27
  background-color: var(--sld-background-disabled);
28
28
  }
29
- li.menuItem.selected, li.menuItem[aria-selected=true], li.menuItem[data-selected=true] {
29
+ li.menuItem.selected, li.menuItem[aria-selected=true] {
30
30
  border-color: none;
31
31
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
32
32
  box-shadow: var(--sld-selected-shadow);
33
33
  }
34
- li.menuItem.selected .listItemChip,
35
- li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .listItemChip,
36
- li.menuItem[aria-selected=true] .menuItemChip, li.menuItem[data-selected=true] .listItemChip,
37
- li.menuItem[data-selected=true] .menuItemChip {
34
+ li.menuItem.selected .chip,
35
+ li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .chip,
36
+ li.menuItem[aria-selected=true] .menuItemChip {
38
37
  position: absolute;
39
38
  min-height: 16px;
40
39
  height: 50%;
package/dist/slotui-css/slider.css CHANGED
@@ -8,15 +8,6 @@
8
8
  --slider-thumb-hover-box-shadow: var(--sld-elevation-3);
9
9
  }
10
10
 
11
- .slider {
12
- background-color: var(--slider-background-color);
13
- position: relative;
14
- display: inline-flex;
15
- flex-direction: row;
16
- align-items: center;
17
- width: 168px;
18
- --height: calc(var(--preset-density) / 6);
19
- }
20
11
  .slider {
21
12
  min-height: var(--preset-tall-small);
22
13
  height: var(--preset-tall-small);
@@ -45,6 +36,15 @@
45
36
  .slider[tall=default], .slider.tall-default {
46
37
  min-height: var(--sld-tall-default) !important;
47
38
  }
39
+ .slider {
40
+ --height: calc(var(--preset-density) / 6);
41
+ background-color: var(--slider-background-color);
42
+ position: relative;
43
+ display: inline-flex;
44
+ flex-direction: row;
45
+ align-items: center;
46
+ width: 168px;
47
+ }
48
48
  .slider .slider-gouge {
49
49
  height: var(--height);
50
50
  width: 100%;
package/dist/slotui-css/slider.min.css CHANGED
@@ -8,15 +8,6 @@
8
8
  --slider-thumb-hover-box-shadow: var(--sld-elevation-3);
9
9
  }
10
10
 
11
- .slider {
12
- background-color: var(--slider-background-color);
13
- position: relative;
14
- display: inline-flex;
15
- flex-direction: row;
16
- align-items: center;
17
- width: 168px;
18
- --height: calc(var(--preset-density) / 6);
19
- }
20
11
  .slider {
21
12
  min-height: var(--preset-tall-small);
22
13
  height: var(--preset-tall-small);
@@ -45,6 +36,15 @@
45
36
  .slider[tall=default], .slider.tall-default {
46
37
  min-height: var(--sld-tall-default) !important;
47
38
  }
39
+ .slider {
40
+ --height: calc(var(--preset-density) / 6);
41
+ background-color: var(--slider-background-color);
42
+ position: relative;
43
+ display: inline-flex;
44
+ flex-direction: row;
45
+ align-items: center;
46
+ width: 168px;
47
+ }
48
48
  .slider .slider-gouge {
49
49
  height: var(--height);
50
50
  width: 100%;