@medyll/idae-slotui-svelte 0.63.0 → 0.64.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 +3 -4
  18. package/dist/index.js +3 -4
  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 +16 -17
  38. package/dist/slotui-css/menu-list.min.css +16 -17
  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 +554 -597
  44. package/dist/slotui-css/slotui-min-css.css +554 -597
  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 +16 -17
  56. package/dist/ui/menuList/MenuListItem.svelte +17 -19
  57. package/dist/ui/menuList/MenuListTitle.svelte +16 -17
  58. package/dist/ui/menuList/menu-list.scss +2 -2
  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/controls/button/ButtonAction.svelte CHANGED
@@ -65,256 +65,218 @@ let chevron = "fluent:chevron-down-20-regular";
65
65
  background-color: rgba(255, 255, 255, 0.5);
66
66
  }
67
67
 
68
- :global(button),
69
- :global(.button),
70
- :global(input[type="button"]),
71
- :global(input[type="submit"]) {
72
- /* :focus {
73
- outline: 1px solid var(--sld-button-focus-border-color);
74
- outline-offset: 2px;
75
- box-shadow: var(--sld-button-focus-shadow);
76
- }
77
- :focus-visible {
78
- outline: 1px solid var(--sld-button-focus-border-color);
79
- outline-offset: -2px;
80
- box-shadow: var(--sld-button-focus-shadow);
81
- }
82
- :hover {
83
- background-color: var(--sld-button-hover-background);
84
- box-shadow: var(--sld-button-hover-shadow);
85
- }
86
- :active {
87
- transform: translateY(1px);
88
- box-shadow: var(--sld-button-active-shadow);
89
- }
90
- :focus:not(:focus-visible) {
91
- box-shadow: var(--sld-button-focus-shadow);
92
- } */
93
- }
94
- :global(button),
95
- :global(.button),
96
- :global(input[type="button"]),
97
- :global(input[type="submit"]) {
98
- --preset-width: var(--sld-width-small);
99
- }
100
- :global(button),
101
- :global(.button),
102
- :global(input[type="button"]),
103
- :global(input[type="submit"]) {
68
+ .slotui-button,
69
+ button.slotui-button,
70
+ input[type=button].slotui-button,
71
+ input[type=submit].slotui-button {
104
72
  width: var(--sld-width-small);
105
73
  }
106
- :global(button)[width=tiny], :global(button).width-tiny,
107
- :global(.button)[width=tiny],
108
- :global(.button).width-tiny,
109
- :global(input[type="button"])[width=tiny],
110
- :global(input[type="button"]).width-tiny,
111
- :global(input[type="submit"])[width=tiny],
112
- :global(input[type="submit"]).width-tiny {
74
+ .slotui-button,
75
+ button.slotui-button,
76
+ input[type=button].slotui-button,
77
+ input[type=submit].slotui-button {
78
+ --preset-width: var(--sld-width-small);
79
+ }
80
+ .slotui-button[width=tiny], .slotui-button.width-tiny,
81
+ button.slotui-button[width=tiny],
82
+ button.slotui-button.width-tiny,
83
+ input[type=button].slotui-button[width=tiny],
84
+ input[type=button].slotui-button.width-tiny,
85
+ input[type=submit].slotui-button[width=tiny],
86
+ input[type=submit].slotui-button.width-tiny {
113
87
  --preset-width: var(--sld-width-tiny);
114
88
  width: var(--sld-width-tiny) !important;
115
89
  }
116
- :global(button)[width=mini], :global(button).width-mini,
117
- :global(.button)[width=mini],
118
- :global(.button).width-mini,
119
- :global(input[type="button"])[width=mini],
120
- :global(input[type="button"]).width-mini,
121
- :global(input[type="submit"])[width=mini],
122
- :global(input[type="submit"]).width-mini {
90
+ .slotui-button[width=mini], .slotui-button.width-mini,
91
+ button.slotui-button[width=mini],
92
+ button.slotui-button.width-mini,
93
+ input[type=button].slotui-button[width=mini],
94
+ input[type=button].slotui-button.width-mini,
95
+ input[type=submit].slotui-button[width=mini],
96
+ input[type=submit].slotui-button.width-mini {
123
97
  --preset-width: var(--sld-width-mini);
124
98
  width: var(--sld-width-mini) !important;
125
99
  }
126
- :global(button)[width=small], :global(button).width-small,
127
- :global(.button)[width=small],
128
- :global(.button).width-small,
129
- :global(input[type="button"])[width=small],
130
- :global(input[type="button"]).width-small,
131
- :global(input[type="submit"])[width=small],
132
- :global(input[type="submit"]).width-small {
100
+ .slotui-button[width=small], .slotui-button.width-small,
101
+ button.slotui-button[width=small],
102
+ button.slotui-button.width-small,
103
+ input[type=button].slotui-button[width=small],
104
+ input[type=button].slotui-button.width-small,
105
+ input[type=submit].slotui-button[width=small],
106
+ input[type=submit].slotui-button.width-small {
133
107
  --preset-width: var(--sld-width-small);
134
108
  width: var(--sld-width-small) !important;
135
109
  }
136
- :global(button)[width=med], :global(button).width-med,
137
- :global(.button)[width=med],
138
- :global(.button).width-med,
139
- :global(input[type="button"])[width=med],
140
- :global(input[type="button"]).width-med,
141
- :global(input[type="submit"])[width=med],
142
- :global(input[type="submit"]).width-med {
110
+ .slotui-button[width=med], .slotui-button.width-med,
111
+ button.slotui-button[width=med],
112
+ button.slotui-button.width-med,
113
+ input[type=button].slotui-button[width=med],
114
+ input[type=button].slotui-button.width-med,
115
+ input[type=submit].slotui-button[width=med],
116
+ input[type=submit].slotui-button.width-med {
143
117
  --preset-width: var(--sld-width-med);
144
118
  width: var(--sld-width-med) !important;
145
119
  }
146
- :global(button)[width=kind], :global(button).width-kind,
147
- :global(.button)[width=kind],
148
- :global(.button).width-kind,
149
- :global(input[type="button"])[width=kind],
150
- :global(input[type="button"]).width-kind,
151
- :global(input[type="submit"])[width=kind],
152
- :global(input[type="submit"]).width-kind {
120
+ .slotui-button[width=kind], .slotui-button.width-kind,
121
+ button.slotui-button[width=kind],
122
+ button.slotui-button.width-kind,
123
+ input[type=button].slotui-button[width=kind],
124
+ input[type=button].slotui-button.width-kind,
125
+ input[type=submit].slotui-button[width=kind],
126
+ input[type=submit].slotui-button.width-kind {
153
127
  --preset-width: var(--sld-width-kind);
154
128
  width: var(--sld-width-kind) !important;
155
129
  }
156
- :global(button)[width=full], :global(button).width-full,
157
- :global(.button)[width=full],
158
- :global(.button).width-full,
159
- :global(input[type="button"])[width=full],
160
- :global(input[type="button"]).width-full,
161
- :global(input[type="submit"])[width=full],
162
- :global(input[type="submit"]).width-full {
130
+ .slotui-button[width=full], .slotui-button.width-full,
131
+ button.slotui-button[width=full],
132
+ button.slotui-button.width-full,
133
+ input[type=button].slotui-button[width=full],
134
+ input[type=button].slotui-button.width-full,
135
+ input[type=submit].slotui-button[width=full],
136
+ input[type=submit].slotui-button.width-full {
163
137
  --preset-width: var(--sld-width-full);
164
138
  width: var(--sld-width-full) !important;
165
139
  }
166
- :global(button)[width=auto], :global(button).width-auto,
167
- :global(.button)[width=auto],
168
- :global(.button).width-auto,
169
- :global(input[type="button"])[width=auto],
170
- :global(input[type="button"]).width-auto,
171
- :global(input[type="submit"])[width=auto],
172
- :global(input[type="submit"]).width-auto {
140
+ .slotui-button[width=auto], .slotui-button.width-auto,
141
+ button.slotui-button[width=auto],
142
+ button.slotui-button.width-auto,
143
+ input[type=button].slotui-button[width=auto],
144
+ input[type=button].slotui-button.width-auto,
145
+ input[type=submit].slotui-button[width=auto],
146
+ input[type=submit].slotui-button.width-auto {
173
147
  --preset-width: var(--sld-width-auto);
174
148
  width: var(--sld-width-auto) !important;
175
149
  }
176
- :global(button)[width=default], :global(button).width-default,
177
- :global(.button)[width=default],
178
- :global(.button).width-default,
179
- :global(input[type="button"])[width=default],
180
- :global(input[type="button"]).width-default,
181
- :global(input[type="submit"])[width=default],
182
- :global(input[type="submit"]).width-default {
150
+ .slotui-button[width=default], .slotui-button.width-default,
151
+ button.slotui-button[width=default],
152
+ button.slotui-button.width-default,
153
+ input[type=button].slotui-button[width=default],
154
+ input[type=button].slotui-button.width-default,
155
+ input[type=submit].slotui-button[width=default],
156
+ input[type=submit].slotui-button.width-default {
183
157
  --preset-width: var(--sld-width-default);
184
158
  width: var(--sld-width-default) !important;
185
159
  }
186
- :global(button),
187
- :global(.button),
188
- :global(input[type="button"]),
189
- :global(input[type="submit"]) {
160
+ .slotui-button,
161
+ button.slotui-button,
162
+ input[type=button].slotui-button,
163
+ input[type=submit].slotui-button {
190
164
  min-height: var(--preset-tall-small);
191
165
  height: var(--preset-tall-small);
192
166
  }
193
- :global(button),
194
- :global(.button),
195
- :global(input[type="button"]),
196
- :global(input[type="submit"]) {
167
+ .slotui-button,
168
+ button.slotui-button,
169
+ input[type=button].slotui-button,
170
+ input[type=submit].slotui-button {
197
171
  --preset-tall: var(--sld-tall-small);
198
172
  }
199
- :global(button)[tall=tiny], :global(button).tall-tiny,
200
- :global(.button)[tall=tiny],
201
- :global(.button).tall-tiny,
202
- :global(input[type="button"])[tall=tiny],
203
- :global(input[type="button"]).tall-tiny,
204
- :global(input[type="submit"])[tall=tiny],
205
- :global(input[type="submit"]).tall-tiny {
173
+ .slotui-button[tall=tiny], .slotui-button.tall-tiny,
174
+ button.slotui-button[tall=tiny],
175
+ button.slotui-button.tall-tiny,
176
+ input[type=button].slotui-button[tall=tiny],
177
+ input[type=button].slotui-button.tall-tiny,
178
+ input[type=submit].slotui-button[tall=tiny],
179
+ input[type=submit].slotui-button.tall-tiny {
206
180
  min-height: var(--sld-tall-tiny) !important;
207
181
  }
208
- :global(button)[tall=mini], :global(button).tall-mini,
209
- :global(.button)[tall=mini],
210
- :global(.button).tall-mini,
211
- :global(input[type="button"])[tall=mini],
212
- :global(input[type="button"]).tall-mini,
213
- :global(input[type="submit"])[tall=mini],
214
- :global(input[type="submit"]).tall-mini {
182
+ .slotui-button[tall=mini], .slotui-button.tall-mini,
183
+ button.slotui-button[tall=mini],
184
+ button.slotui-button.tall-mini,
185
+ input[type=button].slotui-button[tall=mini],
186
+ input[type=button].slotui-button.tall-mini,
187
+ input[type=submit].slotui-button[tall=mini],
188
+ input[type=submit].slotui-button.tall-mini {
215
189
  min-height: var(--sld-tall-mini) !important;
216
190
  }
217
- :global(button)[tall=small], :global(button).tall-small,
218
- :global(.button)[tall=small],
219
- :global(.button).tall-small,
220
- :global(input[type="button"])[tall=small],
221
- :global(input[type="button"]).tall-small,
222
- :global(input[type="submit"])[tall=small],
223
- :global(input[type="submit"]).tall-small {
191
+ .slotui-button[tall=small], .slotui-button.tall-small,
192
+ button.slotui-button[tall=small],
193
+ button.slotui-button.tall-small,
194
+ input[type=button].slotui-button[tall=small],
195
+ input[type=button].slotui-button.tall-small,
196
+ input[type=submit].slotui-button[tall=small],
197
+ input[type=submit].slotui-button.tall-small {
224
198
  min-height: var(--sld-tall-small) !important;
225
199
  }
226
- :global(button)[tall=med], :global(button).tall-med,
227
- :global(.button)[tall=med],
228
- :global(.button).tall-med,
229
- :global(input[type="button"])[tall=med],
230
- :global(input[type="button"]).tall-med,
231
- :global(input[type="submit"])[tall=med],
232
- :global(input[type="submit"]).tall-med {
200
+ .slotui-button[tall=med], .slotui-button.tall-med,
201
+ button.slotui-button[tall=med],
202
+ button.slotui-button.tall-med,
203
+ input[type=button].slotui-button[tall=med],
204
+ input[type=button].slotui-button.tall-med,
205
+ input[type=submit].slotui-button[tall=med],
206
+ input[type=submit].slotui-button.tall-med {
233
207
  min-height: var(--sld-tall-med) !important;
234
208
  }
235
- :global(button)[tall=kind], :global(button).tall-kind,
236
- :global(.button)[tall=kind],
237
- :global(.button).tall-kind,
238
- :global(input[type="button"])[tall=kind],
239
- :global(input[type="button"]).tall-kind,
240
- :global(input[type="submit"])[tall=kind],
241
- :global(input[type="submit"]).tall-kind {
209
+ .slotui-button[tall=kind], .slotui-button.tall-kind,
210
+ button.slotui-button[tall=kind],
211
+ button.slotui-button.tall-kind,
212
+ input[type=button].slotui-button[tall=kind],
213
+ input[type=button].slotui-button.tall-kind,
214
+ input[type=submit].slotui-button[tall=kind],
215
+ input[type=submit].slotui-button.tall-kind {
242
216
  min-height: var(--sld-tall-kind) !important;
243
217
  }
244
- :global(button)[tall=auto], :global(button).tall-auto,
245
- :global(.button)[tall=auto],
246
- :global(.button).tall-auto,
247
- :global(input[type="button"])[tall=auto],
248
- :global(input[type="button"]).tall-auto,
249
- :global(input[type="submit"])[tall=auto],
250
- :global(input[type="submit"]).tall-auto {
218
+ .slotui-button[tall=auto], .slotui-button.tall-auto,
219
+ button.slotui-button[tall=auto],
220
+ button.slotui-button.tall-auto,
221
+ input[type=button].slotui-button[tall=auto],
222
+ input[type=button].slotui-button.tall-auto,
223
+ input[type=submit].slotui-button[tall=auto],
224
+ input[type=submit].slotui-button.tall-auto {
251
225
  min-height: var(--sld-tall-auto) !important;
252
226
  }
253
- :global(button)[tall=default], :global(button).tall-default,
254
- :global(.button)[tall=default],
255
- :global(.button).tall-default,
256
- :global(input[type="button"])[tall=default],
257
- :global(input[type="button"]).tall-default,
258
- :global(input[type="submit"])[tall=default],
259
- :global(input[type="submit"]).tall-default {
227
+ .slotui-button[tall=default], .slotui-button.tall-default,
228
+ button.slotui-button[tall=default],
229
+ button.slotui-button.tall-default,
230
+ input[type=button].slotui-button[tall=default],
231
+ input[type=button].slotui-button.tall-default,
232
+ input[type=submit].slotui-button[tall=default],
233
+ input[type=submit].slotui-button.tall-default {
260
234
  min-height: var(--sld-tall-default) !important;
261
235
  }
262
- :global(button)[variant*=square], :global(button)[square=true], :global(button).square,
263
- :global(.button)[variant*=square],
264
- :global(.button)[square=true],
265
- :global(.button).square,
266
- :global(input[type="button"])[variant*=square],
267
- :global(input[type="button"])[square=true],
268
- :global(input[type="button"]).square,
269
- :global(input[type="submit"])[variant*=square],
270
- :global(input[type="submit"])[square=true],
271
- :global(input[type="submit"]).square {
236
+ .slotui-button[variant*=square],
237
+ button.slotui-button[variant*=square],
238
+ input[type=button].slotui-button[variant*=square],
239
+ input[type=submit].slotui-button[variant*=square] {
272
240
  aspect-ratio: 1/1 !important;
273
241
  height: auto;
274
242
  }
275
- :global(button)[variant*=rounded], :global(button)[rounded=true], :global(button).rounded,
276
- :global(.button)[variant*=rounded],
277
- :global(.button)[rounded=true],
278
- :global(.button).rounded,
279
- :global(input[type="button"])[variant*=rounded],
280
- :global(input[type="button"])[rounded=true],
281
- :global(input[type="button"]).rounded,
282
- :global(input[type="submit"])[variant*=rounded],
283
- :global(input[type="submit"])[rounded=true],
284
- :global(input[type="submit"]).rounded {
243
+ .slotui-button[variant*=rounded],
244
+ button.slotui-button[variant*=rounded],
245
+ input[type=button].slotui-button[variant*=rounded],
246
+ input[type=submit].slotui-button[variant*=rounded] {
285
247
  border-radius: 50%;
286
248
  }
287
- :global(button).elevation-0, :global(button)[elevation-0],
288
- :global(.button).elevation-0,
289
- :global(.button)[elevation-0],
290
- :global(input[type="button"]).elevation-0,
291
- :global(input[type="button"])[elevation-0],
292
- :global(input[type="submit"]).elevation-0,
293
- :global(input[type="submit"])[elevation-0] {
249
+ .slotui-button.elevation-0, .slotui-button[elevation-0],
250
+ button.slotui-button.elevation-0,
251
+ button.slotui-button[elevation-0],
252
+ input[type=button].slotui-button.elevation-0,
253
+ input[type=button].slotui-button[elevation-0],
254
+ input[type=submit].slotui-button.elevation-0,
255
+ input[type=submit].slotui-button[elevation-0] {
294
256
  box-shadow: var(--sld-elevation-0);
295
257
  }
296
- :global(button).elevation-through, :global(button)[elevation-through],
297
- :global(.button).elevation-through,
298
- :global(.button)[elevation-through],
299
- :global(input[type="button"]).elevation-through,
300
- :global(input[type="button"])[elevation-through],
301
- :global(input[type="submit"]).elevation-through,
302
- :global(input[type="submit"])[elevation-through] {
258
+ .slotui-button.elevation-through, .slotui-button[elevation-through],
259
+ button.slotui-button.elevation-through,
260
+ button.slotui-button[elevation-through],
261
+ input[type=button].slotui-button.elevation-through,
262
+ input[type=button].slotui-button[elevation-through],
263
+ input[type=submit].slotui-button.elevation-through,
264
+ input[type=submit].slotui-button[elevation-through] {
303
265
  box-shadow: var(--sld-elevation-through);
304
266
  }
305
- :global(button).elevation-5, :global(button)[elevation-5],
306
- :global(.button).elevation-5,
307
- :global(.button)[elevation-5],
308
- :global(input[type="button"]).elevation-5,
309
- :global(input[type="button"])[elevation-5],
310
- :global(input[type="submit"]).elevation-5,
311
- :global(input[type="submit"])[elevation-5] {
267
+ .slotui-button.elevation-5, .slotui-button[elevation-5],
268
+ button.slotui-button.elevation-5,
269
+ button.slotui-button[elevation-5],
270
+ input[type=button].slotui-button.elevation-5,
271
+ input[type=button].slotui-button[elevation-5],
272
+ input[type=submit].slotui-button.elevation-5,
273
+ input[type=submit].slotui-button[elevation-5] {
312
274
  box-shadow: var(--sld-elevation-5);
313
275
  }
314
- :global(button),
315
- :global(.button),
316
- :global(input[type="button"]),
317
- :global(input[type="submit"]) {
276
+ .slotui-button,
277
+ button.slotui-button,
278
+ input[type=button].slotui-button,
279
+ input[type=submit].slotui-button {
318
280
  border: none;
319
281
  border-radius: 0;
320
282
  margin: 0;
@@ -332,10 +294,10 @@ let chevron = "fluent:chevron-down-20-regular";
332
294
  align-items: center;
333
295
  background: var(--sld-button-background);
334
296
  }
335
- :global(button) .button-start,
336
- :global(.button) .button-start,
337
- :global(input[type="button"]) .button-start,
338
- :global(input[type="submit"]) .button-start {
297
+ .slotui-button .start,
298
+ button.slotui-button .start,
299
+ input[type=button].slotui-button .start,
300
+ input[type=submit].slotui-button .start {
339
301
  position: relative;
340
302
  top: 0;
341
303
  left: 0;
@@ -345,33 +307,33 @@ let chevron = "fluent:chevron-down-20-regular";
345
307
  padding: 0 0.5rem;
346
308
  display: block;
347
309
  }
348
- :global(button) .button-start:empty,
349
- :global(.button) .button-start:empty,
350
- :global(input[type="button"]) .button-start:empty,
351
- :global(input[type="submit"]) .button-start:empty {
310
+ .slotui-button .start:empty,
311
+ button.slotui-button .start:empty,
312
+ input[type=button].slotui-button .start:empty,
313
+ input[type=submit].slotui-button .start:empty {
352
314
  display: none;
353
315
  }
354
- :global(button) .button-central,
355
- :global(.button) .button-central,
356
- :global(input[type="button"]) .button-central,
357
- :global(input[type="submit"]) .button-central {
316
+ .slotui-button .central,
317
+ button.slotui-button .central,
318
+ input[type=button].slotui-button .central,
319
+ input[type=submit].slotui-button .central {
358
320
  --preset-ellipsis-line: 1;
359
321
  }
360
- :global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,
361
- :global(.button) .button-central[ellipsis],
362
- :global(.button) .button-central.ellipsis,
363
- :global(input[type="button"]) .button-central[ellipsis],
364
- :global(input[type="button"]) .button-central.ellipsis,
365
- :global(input[type="submit"]) .button-central[ellipsis],
366
- :global(input[type="submit"]) .button-central.ellipsis {
322
+ .slotui-button .central[ellipsis], .slotui-button .central.ellipsis,
323
+ button.slotui-button .central[ellipsis],
324
+ button.slotui-button .central.ellipsis,
325
+ input[type=button].slotui-button .central[ellipsis],
326
+ input[type=button].slotui-button .central.ellipsis,
327
+ input[type=submit].slotui-button .central[ellipsis],
328
+ input[type=submit].slotui-button .central.ellipsis {
367
329
  white-space: nowrap;
368
330
  overflow: hidden;
369
331
  text-overflow: ellipsis;
370
332
  }
371
- :global(button) .button-central.ellipsis-line-1,
372
- :global(.button) .button-central.ellipsis-line-1,
373
- :global(input[type="button"]) .button-central.ellipsis-line-1,
374
- :global(input[type="submit"]) .button-central.ellipsis-line-1 {
333
+ .slotui-button .central.ellipsis-line-1,
334
+ button.slotui-button .central.ellipsis-line-1,
335
+ input[type=button].slotui-button .central.ellipsis-line-1,
336
+ input[type=submit].slotui-button .central.ellipsis-line-1 {
375
337
  display: -webkit-box;
376
338
  -webkit-line-clamp: 1;
377
339
  -webkit-box-orient: vertical;
@@ -380,10 +342,10 @@ let chevron = "fluent:chevron-down-20-regular";
380
342
  white-space: normal;
381
343
  --preset-ellipsis-line: 1;
382
344
  }
383
- :global(button) .button-central.ellipsis-line-2,
384
- :global(.button) .button-central.ellipsis-line-2,
385
- :global(input[type="button"]) .button-central.ellipsis-line-2,
386
- :global(input[type="submit"]) .button-central.ellipsis-line-2 {
345
+ .slotui-button .central.ellipsis-line-2,
346
+ button.slotui-button .central.ellipsis-line-2,
347
+ input[type=button].slotui-button .central.ellipsis-line-2,
348
+ input[type=submit].slotui-button .central.ellipsis-line-2 {
387
349
  display: -webkit-box;
388
350
  -webkit-line-clamp: 2;
389
351
  -webkit-box-orient: vertical;
@@ -392,10 +354,10 @@ let chevron = "fluent:chevron-down-20-regular";
392
354
  white-space: normal;
393
355
  --preset-ellipsis-line: 2;
394
356
  }
395
- :global(button) .button-central.ellipsis-line-3,
396
- :global(.button) .button-central.ellipsis-line-3,
397
- :global(input[type="button"]) .button-central.ellipsis-line-3,
398
- :global(input[type="submit"]) .button-central.ellipsis-line-3 {
357
+ .slotui-button .central.ellipsis-line-3,
358
+ button.slotui-button .central.ellipsis-line-3,
359
+ input[type=button].slotui-button .central.ellipsis-line-3,
360
+ input[type=submit].slotui-button .central.ellipsis-line-3 {
399
361
  display: -webkit-box;
400
362
  -webkit-line-clamp: 3;
401
363
  -webkit-box-orient: vertical;
@@ -404,10 +366,10 @@ let chevron = "fluent:chevron-down-20-regular";
404
366
  white-space: normal;
405
367
  --preset-ellipsis-line: 3;
406
368
  }
407
- :global(button) .button-central.ellipsis-line-4,
408
- :global(.button) .button-central.ellipsis-line-4,
409
- :global(input[type="button"]) .button-central.ellipsis-line-4,
410
- :global(input[type="submit"]) .button-central.ellipsis-line-4 {
369
+ .slotui-button .central.ellipsis-line-4,
370
+ button.slotui-button .central.ellipsis-line-4,
371
+ input[type=button].slotui-button .central.ellipsis-line-4,
372
+ input[type=submit].slotui-button .central.ellipsis-line-4 {
411
373
  display: -webkit-box;
412
374
  -webkit-line-clamp: 4;
413
375
  -webkit-box-orient: vertical;
@@ -416,10 +378,10 @@ let chevron = "fluent:chevron-down-20-regular";
416
378
  white-space: normal;
417
379
  --preset-ellipsis-line: 4;
418
380
  }
419
- :global(button) .button-central.ellipsis-line-5,
420
- :global(.button) .button-central.ellipsis-line-5,
421
- :global(input[type="button"]) .button-central.ellipsis-line-5,
422
- :global(input[type="submit"]) .button-central.ellipsis-line-5 {
381
+ .slotui-button .central.ellipsis-line-5,
382
+ button.slotui-button .central.ellipsis-line-5,
383
+ input[type=button].slotui-button .central.ellipsis-line-5,
384
+ input[type=submit].slotui-button .central.ellipsis-line-5 {
423
385
  display: -webkit-box;
424
386
  -webkit-line-clamp: 5;
425
387
  -webkit-box-orient: vertical;
@@ -428,10 +390,10 @@ let chevron = "fluent:chevron-down-20-regular";
428
390
  white-space: normal;
429
391
  --preset-ellipsis-line: 5;
430
392
  }
431
- :global(button) .button-central,
432
- :global(.button) .button-central,
433
- :global(input[type="button"]) .button-central,
434
- :global(input[type="submit"]) .button-central {
393
+ .slotui-button .central,
394
+ button.slotui-button .central,
395
+ input[type=button].slotui-button .central,
396
+ input[type=submit].slotui-button .central {
435
397
  display: block;
436
398
  max-width: 100%;
437
399
  max-height: 100%;
@@ -445,16 +407,16 @@ let chevron = "fluent:chevron-down-20-regular";
445
407
  text-align: var(--sld-button-text-align, center);
446
408
  overflow: hidden;
447
409
  }
448
- :global(button) .button-central:empty,
449
- :global(.button) .button-central:empty,
450
- :global(input[type="button"]) .button-central:empty,
451
- :global(input[type="submit"]) .button-central:empty {
410
+ .slotui-button .central:empty,
411
+ button.slotui-button .central:empty,
412
+ input[type=button].slotui-button .central:empty,
413
+ input[type=submit].slotui-button .central:empty {
452
414
  display: none;
453
415
  }
454
- :global(button) .button-end,
455
- :global(.button) .button-end,
456
- :global(input[type="button"]) .button-end,
457
- :global(input[type="submit"]) .button-end {
416
+ .slotui-button .end,
417
+ button.slotui-button .end,
418
+ input[type=button].slotui-button .end,
419
+ input[type=submit].slotui-button .end {
458
420
  position: relative;
459
421
  align-items: center;
460
422
  align-content: center;
@@ -462,36 +424,36 @@ let chevron = "fluent:chevron-down-20-regular";
462
424
  text-align: center;
463
425
  cursor: pointer;
464
426
  }
465
- :global(button) .button-end:empty,
466
- :global(.button) .button-end:empty,
467
- :global(input[type="button"]) .button-end:empty,
468
- :global(input[type="submit"]) .button-end:empty {
427
+ .slotui-button .end:empty,
428
+ button.slotui-button .end:empty,
429
+ input[type=button].slotui-button .end:empty,
430
+ input[type=submit].slotui-button .end:empty {
469
431
  display: none;
470
432
  }
471
- :global(button) .button-end:hover,
472
- :global(.button) .button-end:hover,
473
- :global(input[type="button"]) .button-end:hover,
474
- :global(input[type="submit"]) .button-end:hover {
433
+ .slotui-button .end:hover,
434
+ button.slotui-button .end:hover,
435
+ input[type=button].slotui-button .end:hover,
436
+ input[type=submit].slotui-button .end:hover {
475
437
  background-color: var(--sld-button-action-hover-background);
476
438
  }
477
- :global(button).loading, :global(button)[aria-busy=true],
478
- :global(.button).loading,
479
- :global(.button)[aria-busy=true],
480
- :global(input[type="button"]).loading,
481
- :global(input[type="button"])[aria-busy=true],
482
- :global(input[type="submit"]).loading,
483
- :global(input[type="submit"])[aria-busy=true] {
439
+ .slotui-button.loading, .slotui-button[aria-busy=true],
440
+ button.slotui-button.loading,
441
+ button.slotui-button[aria-busy=true],
442
+ input[type=button].slotui-button.loading,
443
+ input[type=button].slotui-button[aria-busy=true],
444
+ input[type=submit].slotui-button.loading,
445
+ input[type=submit].slotui-button[aria-busy=true] {
484
446
  position: relative;
485
447
  color: transparent;
486
448
  pointer-events: none;
487
449
  }
488
- :global(button).loading::after, :global(button)[aria-busy=true]::after,
489
- :global(.button).loading::after,
490
- :global(.button)[aria-busy=true]::after,
491
- :global(input[type="button"]).loading::after,
492
- :global(input[type="button"])[aria-busy=true]::after,
493
- :global(input[type="submit"]).loading::after,
494
- :global(input[type="submit"])[aria-busy=true]::after {
450
+ .slotui-button.loading::after, .slotui-button[aria-busy=true]::after,
451
+ button.slotui-button.loading::after,
452
+ button.slotui-button[aria-busy=true]::after,
453
+ input[type=button].slotui-button.loading::after,
454
+ input[type=button].slotui-button[aria-busy=true]::after,
455
+ input[type=submit].slotui-button.loading::after,
456
+ input[type=submit].slotui-button[aria-busy=true]::after {
495
457
  content: " ";
496
458
  position: absolute;
497
459
  width: 16px;
@@ -506,16 +468,16 @@ let chevron = "fluent:chevron-down-20-regular";
506
468
  border-radius: 50%;
507
469
  animation: button-spinner 0.6s linear infinite;
508
470
  }
509
- :global(button)[disabled], :global(button).disabled, :global(button)[aria-disabled=true],
510
- :global(.button)[disabled],
511
- :global(.button).disabled,
512
- :global(.button)[aria-disabled=true],
513
- :global(input[type="button"])[disabled],
514
- :global(input[type="button"]).disabled,
515
- :global(input[type="button"])[aria-disabled=true],
516
- :global(input[type="submit"])[disabled],
517
- :global(input[type="submit"]).disabled,
518
- :global(input[type="submit"])[aria-disabled=true] {
471
+ .slotui-button[disabled], .slotui-button.disabled, .slotui-button[aria-disabled=true],
472
+ button.slotui-button[disabled],
473
+ button.slotui-button.disabled,
474
+ button.slotui-button[aria-disabled=true],
475
+ input[type=button].slotui-button[disabled],
476
+ input[type=button].slotui-button.disabled,
477
+ input[type=button].slotui-button[aria-disabled=true],
478
+ input[type=submit].slotui-button[disabled],
479
+ input[type=submit].slotui-button.disabled,
480
+ input[type=submit].slotui-button[aria-disabled=true] {
519
481
  color: var(--color-gray-800);
520
482
  border-color: var(--color-gray-400);
521
483
  opacity: 0.6;
@@ -523,21 +485,21 @@ let chevron = "fluent:chevron-down-20-regular";
523
485
  box-shadow: none;
524
486
  pointer-events: none;
525
487
  }
526
- :global(button)[aria-pressed=true], :global(button).selected,
527
- :global(.button)[aria-pressed=true],
528
- :global(.button).selected,
529
- :global(input[type="button"])[aria-pressed=true],
530
- :global(input[type="button"]).selected,
531
- :global(input[type="submit"])[aria-pressed=true],
532
- :global(input[type="submit"]).selected {
488
+ .slotui-button[aria-pressed=true], .slotui-button.selected,
489
+ button.slotui-button[aria-pressed=true],
490
+ button.slotui-button.selected,
491
+ input[type=button].slotui-button[aria-pressed=true],
492
+ input[type=button].slotui-button.selected,
493
+ input[type=submit].slotui-button[aria-pressed=true],
494
+ input[type=submit].slotui-button.selected {
533
495
  box-shadow: var(--sld-elevation-3);
534
496
  background-color: var(--sld-color-secondary);
535
497
  font-weight: bold;
536
498
  }
537
- :global(button) .chip,
538
- :global(.button) .chip,
539
- :global(input[type="button"]) .chip,
540
- :global(input[type="submit"]) .chip {
499
+ .slotui-button .chip,
500
+ button.slotui-button .chip,
501
+ input[type=button].slotui-button .chip,
502
+ input[type=submit].slotui-button .chip {
541
503
  position: absolute;
542
504
  z-index: 2;
543
505
  height: 3px;
@@ -548,10 +510,10 @@ let chevron = "fluent:chevron-down-20-regular";
548
510
  border-radius: var(--sld-radius-large);
549
511
  bottom: 2px;
550
512
  }
551
- :global(button) .loadingButtonZone,
552
- :global(.button) .loadingButtonZone,
553
- :global(input[type="button"]) .loadingButtonZone,
554
- :global(input[type="submit"]) .loadingButtonZone {
513
+ .slotui-button .loadingButtonZone,
514
+ button.slotui-button .loadingButtonZone,
515
+ input[type=button].slotui-button .loadingButtonZone,
516
+ input[type=submit].slotui-button .loadingButtonZone {
555
517
  z-index: 10;
556
518
  position: absolute;
557
519
  top: 0;
@@ -563,121 +525,118 @@ let chevron = "fluent:chevron-down-20-regular";
563
525
  align-content: center;
564
526
  justify-content: space-around;
565
527
  }
566
- :global(button)[variant*=bordered], :global(button)[bordered=true], :global(button).bordered,
567
- :global(.button)[variant*=bordered],
568
- :global(.button)[bordered=true],
569
- :global(.button).bordered,
570
- :global(input[type="button"])[variant*=bordered],
571
- :global(input[type="button"])[bordered=true],
572
- :global(input[type="button"]).bordered,
573
- :global(input[type="submit"])[variant*=bordered],
574
- :global(input[type="submit"])[bordered=true],
575
- :global(input[type="submit"]).bordered {
528
+ .slotui-button[variant*=bordered], .slotui-button[bordered=true], .slotui-button.bordered,
529
+ button.slotui-button[variant*=bordered],
530
+ button.slotui-button[bordered=true],
531
+ button.slotui-button.bordered,
532
+ input[type=button].slotui-button[variant*=bordered],
533
+ input[type=button].slotui-button[bordered=true],
534
+ input[type=button].slotui-button.bordered,
535
+ input[type=submit].slotui-button[variant*=bordered],
536
+ input[type=submit].slotui-button[bordered=true],
537
+ input[type=submit].slotui-button.bordered {
576
538
  color: var(--sld-color-foreground);
577
539
  border: var(--sld-button-border-width) solid var(--sld-button-border-color);
578
540
  box-shadow: var(--sld-elevation-1);
579
541
  background-color: var(--sld-button-background);
580
542
  }
581
- :global(button)[variant*=bordered]:hover, :global(button)[bordered=true]:hover, :global(button).bordered:hover,
582
- :global(.button)[variant*=bordered]:hover,
583
- :global(.button)[bordered=true]:hover,
584
- :global(.button).bordered:hover,
585
- :global(input[type="button"])[variant*=bordered]:hover,
586
- :global(input[type="button"])[bordered=true]:hover,
587
- :global(input[type="button"]).bordered:hover,
588
- :global(input[type="submit"])[variant*=bordered]:hover,
589
- :global(input[type="submit"])[bordered=true]:hover,
590
- :global(input[type="submit"]).bordered:hover {
543
+ .slotui-button[variant*=bordered]:hover, .slotui-button[bordered=true]:hover, .slotui-button.bordered:hover,
544
+ button.slotui-button[variant*=bordered]:hover,
545
+ button.slotui-button[bordered=true]:hover,
546
+ button.slotui-button.bordered:hover,
547
+ input[type=button].slotui-button[variant*=bordered]:hover,
548
+ input[type=button].slotui-button[bordered=true]:hover,
549
+ input[type=button].slotui-button.bordered:hover,
550
+ input[type=submit].slotui-button[variant*=bordered]:hover,
551
+ input[type=submit].slotui-button[bordered=true]:hover,
552
+ input[type=submit].slotui-button.bordered:hover {
591
553
  border-color: var(--sld-color-primary);
592
554
  box-shadow: var(--sld-button-hover-shadow);
593
555
  }
594
- :global(button)[variant*=bordered]:focus, :global(button)[variant*=bordered]:active, :global(button)[bordered=true]:focus, :global(button)[bordered=true]:active, :global(button).bordered:focus, :global(button).bordered:active,
595
- :global(.button)[variant*=bordered]:focus,
596
- :global(.button)[variant*=bordered]:active,
597
- :global(.button)[bordered=true]:focus,
598
- :global(.button)[bordered=true]:active,
599
- :global(.button).bordered:focus,
600
- :global(.button).bordered:active,
601
- :global(input[type="button"])[variant*=bordered]:focus,
602
- :global(input[type="button"])[variant*=bordered]:active,
603
- :global(input[type="button"])[bordered=true]:focus,
604
- :global(input[type="button"])[bordered=true]:active,
605
- :global(input[type="button"]).bordered:focus,
606
- :global(input[type="button"]).bordered:active,
607
- :global(input[type="submit"])[variant*=bordered]:focus,
608
- :global(input[type="submit"])[variant*=bordered]:active,
609
- :global(input[type="submit"])[bordered=true]:focus,
610
- :global(input[type="submit"])[bordered=true]:active,
611
- :global(input[type="submit"]).bordered:focus,
612
- :global(input[type="submit"]).bordered:active {
556
+ .slotui-button[variant*=bordered]:focus, .slotui-button[variant*=bordered]:active, .slotui-button[bordered=true]:focus, .slotui-button[bordered=true]:active, .slotui-button.bordered:focus, .slotui-button.bordered:active,
557
+ button.slotui-button[variant*=bordered]:focus,
558
+ button.slotui-button[variant*=bordered]:active,
559
+ button.slotui-button[bordered=true]:focus,
560
+ button.slotui-button[bordered=true]:active,
561
+ button.slotui-button.bordered:focus,
562
+ button.slotui-button.bordered:active,
563
+ input[type=button].slotui-button[variant*=bordered]:focus,
564
+ input[type=button].slotui-button[variant*=bordered]:active,
565
+ input[type=button].slotui-button[bordered=true]:focus,
566
+ input[type=button].slotui-button[bordered=true]:active,
567
+ input[type=button].slotui-button.bordered:focus,
568
+ input[type=button].slotui-button.bordered:active,
569
+ input[type=submit].slotui-button[variant*=bordered]:focus,
570
+ input[type=submit].slotui-button[variant*=bordered]:active,
571
+ input[type=submit].slotui-button[bordered=true]:focus,
572
+ input[type=submit].slotui-button[bordered=true]:active,
573
+ input[type=submit].slotui-button.bordered:focus,
574
+ input[type=submit].slotui-button.bordered:active {
613
575
  border-color: var(--sld-button-active-border-color);
614
576
  box-shadow: var(--sld-button-active-shadow);
615
577
  }
616
- :global(button)[variant*=contained], :global(button)[contained=true], :global(button).contained,
617
- :global(.button)[variant*=contained],
618
- :global(.button)[contained=true],
619
- :global(.button).contained,
620
- :global(input[type="button"])[variant*=contained],
621
- :global(input[type="button"])[contained=true],
622
- :global(input[type="button"]).contained,
623
- :global(input[type="submit"])[variant*=contained],
624
- :global(input[type="submit"])[contained=true],
625
- :global(input[type="submit"]).contained {
578
+ .slotui-button[variant*=contained], .slotui-button[contained=true], .slotui-button.contained,
579
+ button.slotui-button[variant*=contained],
580
+ button.slotui-button[contained=true],
581
+ button.slotui-button.contained,
582
+ input[type=button].slotui-button[variant*=contained],
583
+ input[type=button].slotui-button[contained=true],
584
+ input[type=button].slotui-button.contained,
585
+ input[type=submit].slotui-button[variant*=contained],
586
+ input[type=submit].slotui-button[contained=true],
587
+ input[type=submit].slotui-button.contained {
626
588
  border: var(--sld-button-border-width) solid var(--sld-button-border-color);
627
589
  color: var(--sld-color-on-primary);
628
590
  background-color: var(--sld-button-contained-background);
629
591
  background-clip: padding-box;
630
592
  box-shadow: var(--sld-elevation-1);
631
593
  }
632
- :global(button)[variant*=contained]:hover, :global(button)[contained=true]:hover, :global(button).contained:hover,
633
- :global(.button)[variant*=contained]:hover,
634
- :global(.button)[contained=true]:hover,
635
- :global(.button).contained:hover,
636
- :global(input[type="button"])[variant*=contained]:hover,
637
- :global(input[type="button"])[contained=true]:hover,
638
- :global(input[type="button"]).contained:hover,
639
- :global(input[type="submit"])[variant*=contained]:hover,
640
- :global(input[type="submit"])[contained=true]:hover,
641
- :global(input[type="submit"]).contained:hover {
594
+ .slotui-button[variant*=contained]:hover, .slotui-button[contained=true]:hover, .slotui-button.contained:hover,
595
+ button.slotui-button[variant*=contained]:hover,
596
+ button.slotui-button[contained=true]:hover,
597
+ button.slotui-button.contained:hover,
598
+ input[type=button].slotui-button[variant*=contained]:hover,
599
+ input[type=button].slotui-button[contained=true]:hover,
600
+ input[type=button].slotui-button.contained:hover,
601
+ input[type=submit].slotui-button[variant*=contained]:hover,
602
+ input[type=submit].slotui-button[contained=true]:hover,
603
+ input[type=submit].slotui-button.contained:hover {
642
604
  background-color: var(--sld-color-secondary);
643
605
  color: var(--sld-color-on-secondary);
644
606
  }
645
- :global(button)[variant*=contained]:focus, :global(button)[variant*=contained]:active, :global(button)[contained=true]:focus, :global(button)[contained=true]:active, :global(button).contained:focus, :global(button).contained:active,
646
- :global(.button)[variant*=contained]:focus,
647
- :global(.button)[variant*=contained]:active,
648
- :global(.button)[contained=true]:focus,
649
- :global(.button)[contained=true]:active,
650
- :global(.button).contained:focus,
651
- :global(.button).contained:active,
652
- :global(input[type="button"])[variant*=contained]:focus,
653
- :global(input[type="button"])[variant*=contained]:active,
654
- :global(input[type="button"])[contained=true]:focus,
655
- :global(input[type="button"])[contained=true]:active,
656
- :global(input[type="button"]).contained:focus,
657
- :global(input[type="button"]).contained:active,
658
- :global(input[type="submit"])[variant*=contained]:focus,
659
- :global(input[type="submit"])[variant*=contained]:active,
660
- :global(input[type="submit"])[contained=true]:focus,
661
- :global(input[type="submit"])[contained=true]:active,
662
- :global(input[type="submit"]).contained:focus,
663
- :global(input[type="submit"]).contained:active {
607
+ .slotui-button[variant*=contained]:focus, .slotui-button[variant*=contained]:active, .slotui-button[contained=true]:focus, .slotui-button[contained=true]:active, .slotui-button.contained:focus, .slotui-button.contained:active,
608
+ button.slotui-button[variant*=contained]:focus,
609
+ button.slotui-button[variant*=contained]:active,
610
+ button.slotui-button[contained=true]:focus,
611
+ button.slotui-button[contained=true]:active,
612
+ button.slotui-button.contained:focus,
613
+ button.slotui-button.contained:active,
614
+ input[type=button].slotui-button[variant*=contained]:focus,
615
+ input[type=button].slotui-button[variant*=contained]:active,
616
+ input[type=button].slotui-button[contained=true]:focus,
617
+ input[type=button].slotui-button[contained=true]:active,
618
+ input[type=button].slotui-button.contained:focus,
619
+ input[type=button].slotui-button.contained:active,
620
+ input[type=submit].slotui-button[variant*=contained]:focus,
621
+ input[type=submit].slotui-button[variant*=contained]:active,
622
+ input[type=submit].slotui-button[contained=true]:focus,
623
+ input[type=submit].slotui-button[contained=true]:active,
624
+ input[type=submit].slotui-button.contained:focus,
625
+ input[type=submit].slotui-button.contained:active {
664
626
  background-color: var(--sld-color-tertiary);
665
627
  color: var(--sld-color-on-tertiary);
666
628
  box-shadow: var(--sld-button-active-shadow);
667
629
  }
668
- :global(button)[variant*=link], :global(button)[link=true], :global(button).link, :global(button)[role=link],
669
- :global(.button)[variant*=link],
670
- :global(.button)[link=true],
671
- :global(.button).link,
672
- :global(.button)[role=link],
673
- :global(input[type="button"])[variant*=link],
674
- :global(input[type="button"])[link=true],
675
- :global(input[type="button"]).link,
676
- :global(input[type="button"])[role=link],
677
- :global(input[type="submit"])[variant*=link],
678
- :global(input[type="submit"])[link=true],
679
- :global(input[type="submit"]).link,
680
- :global(input[type="submit"])[role=link] {
630
+ .slotui-button[variant*=link], .slotui-button.link, .slotui-button[role=link],
631
+ button.slotui-button[variant*=link],
632
+ button.slotui-button.link,
633
+ button.slotui-button[role=link],
634
+ input[type=button].slotui-button[variant*=link],
635
+ input[type=button].slotui-button.link,
636
+ input[type=button].slotui-button[role=link],
637
+ input[type=submit].slotui-button[variant*=link],
638
+ input[type=submit].slotui-button.link,
639
+ input[type=submit].slotui-button[role=link] {
681
640
  color: var(--sld-color-primary);
682
641
  text-decoration: underline;
683
642
  text-underline-offset: 0.35rem;
@@ -685,160 +644,151 @@ let chevron = "fluent:chevron-down-20-regular";
685
644
  cursor: pointer;
686
645
  border: none;
687
646
  }
688
- :global(button)[variant*=link]:hover, :global(button)[link=true]:hover, :global(button).link:hover, :global(button)[role=link]:hover,
689
- :global(.button)[variant*=link]:hover,
690
- :global(.button)[link=true]:hover,
691
- :global(.button).link:hover,
692
- :global(.button)[role=link]:hover,
693
- :global(input[type="button"])[variant*=link]:hover,
694
- :global(input[type="button"])[link=true]:hover,
695
- :global(input[type="button"]).link:hover,
696
- :global(input[type="button"])[role=link]:hover,
697
- :global(input[type="submit"])[variant*=link]:hover,
698
- :global(input[type="submit"])[link=true]:hover,
699
- :global(input[type="submit"]).link:hover,
700
- :global(input[type="submit"])[role=link]:hover {
647
+ .slotui-button[variant*=link]:hover, .slotui-button.link:hover, .slotui-button[role=link]:hover,
648
+ button.slotui-button[variant*=link]:hover,
649
+ button.slotui-button.link:hover,
650
+ button.slotui-button[role=link]:hover,
651
+ input[type=button].slotui-button[variant*=link]:hover,
652
+ input[type=button].slotui-button.link:hover,
653
+ input[type=button].slotui-button[role=link]:hover,
654
+ input[type=submit].slotui-button[variant*=link]:hover,
655
+ input[type=submit].slotui-button.link:hover,
656
+ input[type=submit].slotui-button[role=link]:hover {
701
657
  text-decoration: underline;
702
658
  }
703
- :global(button)[variant*=link]:focus, :global(button)[variant*=link]:active, :global(button)[link=true]:focus, :global(button)[link=true]:active, :global(button).link:focus, :global(button).link:active, :global(button)[role=link]:focus, :global(button)[role=link]:active,
704
- :global(.button)[variant*=link]:focus,
705
- :global(.button)[variant*=link]:active,
706
- :global(.button)[link=true]:focus,
707
- :global(.button)[link=true]:active,
708
- :global(.button).link:focus,
709
- :global(.button).link:active,
710
- :global(.button)[role=link]:focus,
711
- :global(.button)[role=link]:active,
712
- :global(input[type="button"])[variant*=link]:focus,
713
- :global(input[type="button"])[variant*=link]:active,
714
- :global(input[type="button"])[link=true]:focus,
715
- :global(input[type="button"])[link=true]:active,
716
- :global(input[type="button"]).link:focus,
717
- :global(input[type="button"]).link:active,
718
- :global(input[type="button"])[role=link]:focus,
719
- :global(input[type="button"])[role=link]:active,
720
- :global(input[type="submit"])[variant*=link]:focus,
721
- :global(input[type="submit"])[variant*=link]:active,
722
- :global(input[type="submit"])[link=true]:focus,
723
- :global(input[type="submit"])[link=true]:active,
724
- :global(input[type="submit"]).link:focus,
725
- :global(input[type="submit"]).link:active,
726
- :global(input[type="submit"])[role=link]:focus,
727
- :global(input[type="submit"])[role=link]:active {
659
+ .slotui-button[variant*=link]:focus, .slotui-button[variant*=link]:active, .slotui-button.link:focus, .slotui-button.link:active, .slotui-button[role=link]:focus, .slotui-button[role=link]:active,
660
+ button.slotui-button[variant*=link]:focus,
661
+ button.slotui-button[variant*=link]:active,
662
+ button.slotui-button.link:focus,
663
+ button.slotui-button.link:active,
664
+ button.slotui-button[role=link]:focus,
665
+ button.slotui-button[role=link]:active,
666
+ input[type=button].slotui-button[variant*=link]:focus,
667
+ input[type=button].slotui-button[variant*=link]:active,
668
+ input[type=button].slotui-button.link:focus,
669
+ input[type=button].slotui-button.link:active,
670
+ input[type=button].slotui-button[role=link]:focus,
671
+ input[type=button].slotui-button[role=link]:active,
672
+ input[type=submit].slotui-button[variant*=link]:focus,
673
+ input[type=submit].slotui-button[variant*=link]:active,
674
+ input[type=submit].slotui-button.link:focus,
675
+ input[type=submit].slotui-button.link:active,
676
+ input[type=submit].slotui-button[role=link]:focus,
677
+ input[type=submit].slotui-button[role=link]:active {
728
678
  text-decoration: underline;
729
679
  outline: none;
730
680
  box-shadow: none;
731
681
  }
732
- :global(button)[variant*=naked], :global(button)[naked=true], :global(button).naked,
733
- :global(.button)[variant*=naked],
734
- :global(.button)[naked=true],
735
- :global(.button).naked,
736
- :global(input[type="button"])[variant*=naked],
737
- :global(input[type="button"])[naked=true],
738
- :global(input[type="button"]).naked,
739
- :global(input[type="submit"])[variant*=naked],
740
- :global(input[type="submit"])[naked=true],
741
- :global(input[type="submit"]).naked {
682
+ .slotui-button[variant*=naked]:hover, .slotui-button[naked=true]:hover, .slotui-button.naked:hover,
683
+ button.slotui-button[variant*=naked]:hover,
684
+ button.slotui-button[naked=true]:hover,
685
+ button.slotui-button.naked:hover,
686
+ input[type=button].slotui-button[variant*=naked]:hover,
687
+ input[type=button].slotui-button[naked=true]:hover,
688
+ input[type=button].slotui-button.naked:hover,
689
+ input[type=submit].slotui-button[variant*=naked]:hover,
690
+ input[type=submit].slotui-button[naked=true]:hover,
691
+ input[type=submit].slotui-button.naked:hover {
692
+ border-color: var(--sld-hover-border-color);
693
+ background-color: var(--sld-background-disabled);
694
+ }
695
+ .slotui-button[variant*=naked], .slotui-button[naked=true], .slotui-button.naked,
696
+ button.slotui-button[variant*=naked],
697
+ button.slotui-button[naked=true],
698
+ button.slotui-button.naked,
699
+ input[type=button].slotui-button[variant*=naked],
700
+ input[type=button].slotui-button[naked=true],
701
+ input[type=button].slotui-button.naked,
702
+ input[type=submit].slotui-button[variant*=naked],
703
+ input[type=submit].slotui-button[naked=true],
704
+ input[type=submit].slotui-button.naked {
742
705
  color: inherit;
743
706
  background-color: transparent;
744
707
  border: 0px solid transparent;
745
708
  cursor: pointer;
746
709
  }
747
- :global(button)[variant*=naked]:hover, :global(button)[naked=true]:hover, :global(button).naked:hover,
748
- :global(.button)[variant*=naked]:hover,
749
- :global(.button)[naked=true]:hover,
750
- :global(.button).naked:hover,
751
- :global(input[type="button"])[variant*=naked]:hover,
752
- :global(input[type="button"])[naked=true]:hover,
753
- :global(input[type="button"]).naked:hover,
754
- :global(input[type="submit"])[variant*=naked]:hover,
755
- :global(input[type="submit"])[naked=true]:hover,
756
- :global(input[type="submit"]).naked:hover {
757
- border-color: var(--sld-hover-border-color);
758
- background-color: var(--sld-background-disabled);
759
- }
760
- :global(button)[variant*=naked]:hover, :global(button)[naked=true]:hover, :global(button).naked:hover,
761
- :global(.button)[variant*=naked]:hover,
762
- :global(.button)[naked=true]:hover,
763
- :global(.button).naked:hover,
764
- :global(input[type="button"])[variant*=naked]:hover,
765
- :global(input[type="button"])[naked=true]:hover,
766
- :global(input[type="button"]).naked:hover,
767
- :global(input[type="submit"])[variant*=naked]:hover,
768
- :global(input[type="submit"])[naked=true]:hover,
769
- :global(input[type="submit"]).naked:hover {
710
+ .slotui-button[variant*=naked]:hover, .slotui-button[naked=true]:hover, .slotui-button.naked:hover,
711
+ button.slotui-button[variant*=naked]:hover,
712
+ button.slotui-button[naked=true]:hover,
713
+ button.slotui-button.naked:hover,
714
+ input[type=button].slotui-button[variant*=naked]:hover,
715
+ input[type=button].slotui-button[naked=true]:hover,
716
+ input[type=button].slotui-button.naked:hover,
717
+ input[type=submit].slotui-button[variant*=naked]:hover,
718
+ input[type=submit].slotui-button[naked=true]:hover,
719
+ input[type=submit].slotui-button.naked:hover {
770
720
  background-color: var(--sld-button-hover-background);
771
721
  }
772
- :global(button)[variant*=naked]:active, :global(button)[variant*=naked]:focus, :global(button)[naked=true]:active, :global(button)[naked=true]:focus, :global(button).naked:active, :global(button).naked:focus,
773
- :global(.button)[variant*=naked]:active,
774
- :global(.button)[variant*=naked]:focus,
775
- :global(.button)[naked=true]:active,
776
- :global(.button)[naked=true]:focus,
777
- :global(.button).naked:active,
778
- :global(.button).naked:focus,
779
- :global(input[type="button"])[variant*=naked]:active,
780
- :global(input[type="button"])[variant*=naked]:focus,
781
- :global(input[type="button"])[naked=true]:active,
782
- :global(input[type="button"])[naked=true]:focus,
783
- :global(input[type="button"]).naked:active,
784
- :global(input[type="button"]).naked:focus,
785
- :global(input[type="submit"])[variant*=naked]:active,
786
- :global(input[type="submit"])[variant*=naked]:focus,
787
- :global(input[type="submit"])[naked=true]:active,
788
- :global(input[type="submit"])[naked=true]:focus,
789
- :global(input[type="submit"]).naked:active,
790
- :global(input[type="submit"]).naked:focus {
722
+ .slotui-button[variant*=naked]:active, .slotui-button[variant*=naked]:focus, .slotui-button[naked=true]:active, .slotui-button[naked=true]:focus, .slotui-button.naked:active, .slotui-button.naked:focus,
723
+ button.slotui-button[variant*=naked]:active,
724
+ button.slotui-button[variant*=naked]:focus,
725
+ button.slotui-button[naked=true]:active,
726
+ button.slotui-button[naked=true]:focus,
727
+ button.slotui-button.naked:active,
728
+ button.slotui-button.naked:focus,
729
+ input[type=button].slotui-button[variant*=naked]:active,
730
+ input[type=button].slotui-button[variant*=naked]:focus,
731
+ input[type=button].slotui-button[naked=true]:active,
732
+ input[type=button].slotui-button[naked=true]:focus,
733
+ input[type=button].slotui-button.naked:active,
734
+ input[type=button].slotui-button.naked:focus,
735
+ input[type=submit].slotui-button[variant*=naked]:active,
736
+ input[type=submit].slotui-button[variant*=naked]:focus,
737
+ input[type=submit].slotui-button[naked=true]:active,
738
+ input[type=submit].slotui-button[naked=true]:focus,
739
+ input[type=submit].slotui-button.naked:active,
740
+ input[type=submit].slotui-button.naked:focus {
791
741
  background-color: transparent;
792
742
  border: 0.5px solid transparent;
793
743
  color: inherit;
794
744
  }
795
- :global(button)[variant*=flat], :global(button)[flat=true], :global(button).flat,
796
- :global(.button)[variant*=flat],
797
- :global(.button)[flat=true],
798
- :global(.button).flat,
799
- :global(input[type="button"])[variant*=flat],
800
- :global(input[type="button"])[flat=true],
801
- :global(input[type="button"]).flat,
802
- :global(input[type="submit"])[variant*=flat],
803
- :global(input[type="submit"])[flat=true],
804
- :global(input[type="submit"]).flat {
745
+ .slotui-button[variant*=flat], .slotui-button[flat=true], .slotui-button.flat,
746
+ button.slotui-button[variant*=flat],
747
+ button.slotui-button[flat=true],
748
+ button.slotui-button.flat,
749
+ input[type=button].slotui-button[variant*=flat],
750
+ input[type=button].slotui-button[flat=true],
751
+ input[type=button].slotui-button.flat,
752
+ input[type=submit].slotui-button[variant*=flat],
753
+ input[type=submit].slotui-button[flat=true],
754
+ input[type=submit].slotui-button.flat {
805
755
  color: inherit;
806
756
  background-color: transparent;
807
757
  border: none;
808
758
  border-radius: 0;
809
759
  cursor: pointer;
810
760
  }
811
- :global(button)[variant*=flat]:hover, :global(button)[flat=true]:hover, :global(button).flat:hover,
812
- :global(.button)[variant*=flat]:hover,
813
- :global(.button)[flat=true]:hover,
814
- :global(.button).flat:hover,
815
- :global(input[type="button"])[variant*=flat]:hover,
816
- :global(input[type="button"])[flat=true]:hover,
817
- :global(input[type="button"]).flat:hover,
818
- :global(input[type="submit"])[variant*=flat]:hover,
819
- :global(input[type="submit"])[flat=true]:hover,
820
- :global(input[type="submit"]).flat:hover {
761
+ .slotui-button[variant*=flat]:hover, .slotui-button[flat=true]:hover, .slotui-button.flat:hover,
762
+ button.slotui-button[variant*=flat]:hover,
763
+ button.slotui-button[flat=true]:hover,
764
+ button.slotui-button.flat:hover,
765
+ input[type=button].slotui-button[variant*=flat]:hover,
766
+ input[type=button].slotui-button[flat=true]:hover,
767
+ input[type=button].slotui-button.flat:hover,
768
+ input[type=submit].slotui-button[variant*=flat]:hover,
769
+ input[type=submit].slotui-button[flat=true]:hover,
770
+ input[type=submit].slotui-button.flat:hover {
821
771
  background-color: var(--sld-button-hover-background);
822
772
  }
823
- :global(button)[variant*=flat]:active, :global(button)[variant*=flat]:focus, :global(button)[flat=true]:active, :global(button)[flat=true]:focus, :global(button).flat:active, :global(button).flat:focus,
824
- :global(.button)[variant*=flat]:active,
825
- :global(.button)[variant*=flat]:focus,
826
- :global(.button)[flat=true]:active,
827
- :global(.button)[flat=true]:focus,
828
- :global(.button).flat:active,
829
- :global(.button).flat:focus,
830
- :global(input[type="button"])[variant*=flat]:active,
831
- :global(input[type="button"])[variant*=flat]:focus,
832
- :global(input[type="button"])[flat=true]:active,
833
- :global(input[type="button"])[flat=true]:focus,
834
- :global(input[type="button"]).flat:active,
835
- :global(input[type="button"]).flat:focus,
836
- :global(input[type="submit"])[variant*=flat]:active,
837
- :global(input[type="submit"])[variant*=flat]:focus,
838
- :global(input[type="submit"])[flat=true]:active,
839
- :global(input[type="submit"])[flat=true]:focus,
840
- :global(input[type="submit"]).flat:active,
841
- :global(input[type="submit"]).flat:focus {
773
+ .slotui-button[variant*=flat]:active, .slotui-button[variant*=flat]:focus, .slotui-button[flat=true]:active, .slotui-button[flat=true]:focus, .slotui-button.flat:active, .slotui-button.flat:focus,
774
+ button.slotui-button[variant*=flat]:active,
775
+ button.slotui-button[variant*=flat]:focus,
776
+ button.slotui-button[flat=true]:active,
777
+ button.slotui-button[flat=true]:focus,
778
+ button.slotui-button.flat:active,
779
+ button.slotui-button.flat:focus,
780
+ input[type=button].slotui-button[variant*=flat]:active,
781
+ input[type=button].slotui-button[variant*=flat]:focus,
782
+ input[type=button].slotui-button[flat=true]:active,
783
+ input[type=button].slotui-button[flat=true]:focus,
784
+ input[type=button].slotui-button.flat:active,
785
+ input[type=button].slotui-button.flat:focus,
786
+ input[type=submit].slotui-button[variant*=flat]:active,
787
+ input[type=submit].slotui-button[variant*=flat]:focus,
788
+ input[type=submit].slotui-button[flat=true]:active,
789
+ input[type=submit].slotui-button[flat=true]:focus,
790
+ input[type=submit].slotui-button.flat:active,
791
+ input[type=submit].slotui-button.flat:focus {
842
792
  background-color: transparent;
843
793
  border: none;
844
794
  border-radius: 0;