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