@medyll/idae-slotui-svelte 0.60.0 → 0.63.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 (120) hide show
  1. package/dist/base/alert/Alert.svelte +0 -8
  2. package/dist/base/alert/alert.scss +1 -1
  3. package/dist/base/avatar/avatar.scss +1 -1
  4. package/dist/base/backdrop/Backdrop.svelte +0 -3
  5. package/dist/base/backdrop/backdrop.scss +1 -1
  6. package/dist/base/badge/Badge.svelte +0 -1
  7. package/dist/base/badge/badge.scss +1 -1
  8. package/dist/base/box/Box.svelte +0 -2
  9. package/dist/base/box/box.scss +1 -1
  10. package/dist/base/breadCrumb/breadcrumb.scss +1 -1
  11. package/dist/base/cartouche/Cartouche.svelte +3 -23
  12. package/dist/base/cartouche/cartouche.scss +4 -4
  13. package/dist/base/chipper/Chipper.svelte +0 -7
  14. package/dist/base/chipper/chipper.scss +1 -1
  15. package/dist/base/contentSwitcher/ContentSwitcher.svelte +0 -1
  16. package/dist/base/contentSwitcher/content-switcher.scss +1 -1
  17. package/dist/base/divider/Divider.svelte +0 -1
  18. package/dist/base/divider/divider.scss +1 -1
  19. package/dist/base/icon/icon.scss +1 -1
  20. package/dist/base/paper/Paper.svelte +0 -3
  21. package/dist/base/paper/paper.scss +2 -2
  22. package/dist/base/titleBar/TitleBar.svelte +0 -3
  23. package/dist/base/titleBar/title-bar.scss +3 -3
  24. package/dist/controls/autocomplete/auto-complete.scss +2 -2
  25. package/dist/controls/button/Button.svelte +52 -473
  26. package/dist/controls/button/ButtonAction.svelte +51 -474
  27. package/dist/controls/button/ButtonMenu.svelte +0 -2
  28. package/dist/controls/button/button.scss +40 -42
  29. package/dist/controls/checkbox/Checkbox.svelte +3 -25
  30. package/dist/controls/checkbox/checkbox.scss +4 -4
  31. package/dist/controls/confirm/confirm.scss +1 -1
  32. package/dist/controls/progress/Progress.svelte +0 -1
  33. package/dist/controls/progress/progress.scss +1 -1
  34. package/dist/controls/rating/rating.scss +1 -1
  35. package/dist/controls/select/select.scss +1 -1
  36. package/dist/controls/slider/Slider.svelte +3 -13
  37. package/dist/controls/slider/slider.scss +2 -2
  38. package/dist/controls/stepper/Stepper.svelte +0 -3
  39. package/dist/controls/stepper/stepper.scss +1 -1
  40. package/dist/controls/switch/Switch.svelte +0 -6
  41. package/dist/controls/switch/switch.scss +1 -1
  42. package/dist/controls/textfield/TextField.svelte +6 -28
  43. package/dist/controls/textfield/textfield.scss +4 -4
  44. package/dist/csss/csss.scss +2 -2
  45. package/dist/data/dataList/DataList.svelte +0 -22
  46. package/dist/data/dataList/datalist.scss +4 -4
  47. package/dist/data/finder/Finder.svelte +6 -22
  48. package/dist/data/finder/finder.scss +3 -3
  49. package/dist/data/loader/Loader.svelte +0 -2
  50. package/dist/data/loader/loader.scss +1 -1
  51. package/dist/data/sorter/sorterer.scss +2 -2
  52. package/dist/index.d.ts +4 -4
  53. package/dist/index.js +4 -4
  54. package/dist/navigation/drawer/Drawer.svelte +3 -15
  55. package/dist/navigation/drawer/drawer.scss +3 -3
  56. package/dist/navigation/tabs/Tabs.svelte +0 -12
  57. package/dist/navigation/tabs/tabs.scss +1 -1
  58. package/dist/slotui-css/button.css +51 -395
  59. package/dist/slotui-css/button.min.css +51 -395
  60. package/dist/slotui-css/cartouche.css +3 -1
  61. package/dist/slotui-css/cartouche.min.css +3 -1
  62. package/dist/slotui-css/checkbox.css +3 -1
  63. package/dist/slotui-css/checkbox.min.css +3 -1
  64. package/dist/slotui-css/drawer.css +3 -1
  65. package/dist/slotui-css/drawer.min.css +3 -1
  66. package/dist/slotui-css/finder.css +6 -5
  67. package/dist/slotui-css/finder.min.css +6 -5
  68. package/dist/slotui-css/marquee.css +2 -0
  69. package/dist/slotui-css/marquee.min.css +2 -0
  70. package/dist/slotui-css/menu-list.css +62 -191
  71. package/dist/slotui-css/menu-list.min.css +62 -191
  72. package/dist/slotui-css/menu.css +10 -8
  73. package/dist/slotui-css/menu.min.css +10 -8
  74. package/dist/slotui-css/slider.css +3 -1
  75. package/dist/slotui-css/slider.min.css +3 -1
  76. package/dist/slotui-css/slotui-css.css +149 -608
  77. package/dist/slotui-css/slotui-min-css.css +149 -608
  78. package/dist/slotui-css/textfield.css +6 -5
  79. package/dist/slotui-css/textfield.min.css +6 -5
  80. package/dist/styles/slotui-mixins.scss +28 -20
  81. package/dist/styles/slotuisheet/SlotuiSheet.svelte +4 -699
  82. package/dist/styles/slotuisheet/slotui-sheet.scss +68 -68
  83. package/dist/styles/slotuisheet/stylesheet-container.scss +9 -9
  84. package/dist/styles/slotuisheet/stylesheet.scss +10 -10
  85. package/dist/ui/chromeFrame/ChromeFrame.svelte +0 -2
  86. package/dist/ui/chromeFrame/chrome-frame.scss +3 -3
  87. package/dist/ui/frame/Frame.svelte +0 -4
  88. package/dist/ui/frame/frame.scss +8 -8
  89. package/dist/ui/login/Login.svelte +0 -3
  90. package/dist/ui/marquee/Marquee.svelte +2 -0
  91. package/dist/ui/marquee/marquee.scss +2 -2
  92. package/dist/ui/menu/MenuTitle.svelte +10 -23
  93. package/dist/ui/menu/menu.scss +19 -15
  94. package/dist/ui/menuList/MenuList.svelte +63 -231
  95. package/dist/ui/menuList/MenuListItem.svelte +61 -229
  96. package/dist/ui/menuList/MenuListTitle.svelte +61 -229
  97. package/dist/ui/menuList/menu-list.scss +21 -21
  98. package/dist/ui/panel/Panel.svelte +0 -2
  99. package/dist/ui/panel/PanelGrid.svelte +1 -0
  100. package/dist/ui/panel/PanelSlide.svelte +0 -3
  101. package/dist/ui/panel/panel.scss +1 -1
  102. package/dist/ui/popper/Popper.svelte +0 -6
  103. package/dist/ui/popper/popper.scss +1 -1
  104. package/dist/ui/serviceBox/ServiceBox.svelte +0 -2
  105. package/dist/ui/startMenu/BootMenu.svelte +0 -7
  106. package/dist/ui/startMenu/boot-menu.scss +1 -1
  107. package/dist/ui/taskbar/Taskbar.svelte +0 -1
  108. package/dist/ui/taskbar/taskbar.scss +1 -1
  109. package/dist/ui/toggleBar/ToggleBar.svelte +0 -4
  110. package/dist/ui/toggleBar/toggle-bar.scss +1 -1
  111. package/dist/ui/toolBar/ToolBar.svelte +0 -2
  112. package/dist/ui/toolBar/toolbar.scss +1 -1
  113. package/dist/ui/tree/Tree.svelte +0 -5
  114. package/dist/ui/tree/tree.scss +3 -3
  115. package/dist/ui/window/Window.svelte +0 -6
  116. package/dist/ui/window/window.scss +1 -1
  117. package/dist/utils/content/Content.svelte +7 -6
  118. package/dist/utils/stylesheet/StyleSheet.svelte +0 -31
  119. package/dist/utils/stylesheet/stylesheet.scss +10 -10
  120. package/package.json +3 -3
@@ -1,4 +1,4 @@
1
- :global(:root) {
1
+ :root {
2
2
  --sld-button-font-size: inherit;
3
3
  --sld-button-radius: var(--sld-radius-small);
4
4
  --sld-button-border-color: var(--sld-color-primary);
@@ -26,27 +26,8 @@
26
26
 
27
27
  :global(button),
28
28
  :global(.button),
29
- :global(button.button),
30
29
  :global(input[type="button"]),
31
30
  :global(input[type="submit"]) {
32
- --preset-width: var(--sld-width-small);
33
- width: var(--preset-width-small);
34
- border: none;
35
- border-radius: 0;
36
- margin: 0;
37
- text-align: var(--sld-button-text-align);
38
- font-size: var(--sld-button-font-size);
39
- border-radius: var(--sld-button-radius);
40
- color: var(--sld-color-foreground);
41
- padding: var(--sld-button-padding);
42
- position: relative;
43
- display: inline-flex;
44
- transition: all 0.2s ease-in-out;
45
- overflow: hidden;
46
- cursor: pointer;
47
- align-content: center;
48
- align-items: center;
49
- background: var(--sld-button-background);
50
31
  /* :focus {
51
32
  outline: 1px solid var(--sld-button-focus-border-color);
52
33
  outline-offset: 2px;
@@ -68,23 +49,22 @@
68
49
  :focus:not(:focus-visible) {
69
50
  box-shadow: var(--sld-button-focus-shadow);
70
51
  } */
71
- --preset-width: var(--sld-width-small);
72
- width: var(--preset-width-small);
73
52
  }
74
53
  :global(button),
75
54
  :global(.button),
76
- :global(button.button),
77
55
  :global(input[type="button"]),
78
56
  :global(input[type="submit"]) {
79
57
  --preset-width: var(--sld-width-small);
80
- width: var(--preset-width-small);
81
- min-width: var(--preset-width-small);
58
+ }
59
+ :global(button),
60
+ :global(.button),
61
+ :global(input[type="button"]),
62
+ :global(input[type="submit"]) {
63
+ width: var(--sld-width-small);
82
64
  }
83
65
  :global(button)[width=tiny], :global(button).width-tiny,
84
66
  :global(.button)[width=tiny],
85
67
  :global(.button).width-tiny,
86
- :global(button.button)[width=tiny],
87
- :global(button.button).width-tiny,
88
68
  :global(input[type="button"])[width=tiny],
89
69
  :global(input[type="button"]).width-tiny,
90
70
  :global(input[type="submit"])[width=tiny],
@@ -95,8 +75,6 @@
95
75
  :global(button)[width=mini], :global(button).width-mini,
96
76
  :global(.button)[width=mini],
97
77
  :global(.button).width-mini,
98
- :global(button.button)[width=mini],
99
- :global(button.button).width-mini,
100
78
  :global(input[type="button"])[width=mini],
101
79
  :global(input[type="button"]).width-mini,
102
80
  :global(input[type="submit"])[width=mini],
@@ -107,8 +85,6 @@
107
85
  :global(button)[width=small], :global(button).width-small,
108
86
  :global(.button)[width=small],
109
87
  :global(.button).width-small,
110
- :global(button.button)[width=small],
111
- :global(button.button).width-small,
112
88
  :global(input[type="button"])[width=small],
113
89
  :global(input[type="button"]).width-small,
114
90
  :global(input[type="submit"])[width=small],
@@ -119,8 +95,6 @@
119
95
  :global(button)[width=med], :global(button).width-med,
120
96
  :global(.button)[width=med],
121
97
  :global(.button).width-med,
122
- :global(button.button)[width=med],
123
- :global(button.button).width-med,
124
98
  :global(input[type="button"])[width=med],
125
99
  :global(input[type="button"]).width-med,
126
100
  :global(input[type="submit"])[width=med],
@@ -131,8 +105,6 @@
131
105
  :global(button)[width=kind], :global(button).width-kind,
132
106
  :global(.button)[width=kind],
133
107
  :global(.button).width-kind,
134
- :global(button.button)[width=kind],
135
- :global(button.button).width-kind,
136
108
  :global(input[type="button"])[width=kind],
137
109
  :global(input[type="button"]).width-kind,
138
110
  :global(input[type="submit"])[width=kind],
@@ -143,8 +115,6 @@
143
115
  :global(button)[width=full], :global(button).width-full,
144
116
  :global(.button)[width=full],
145
117
  :global(.button).width-full,
146
- :global(button.button)[width=full],
147
- :global(button.button).width-full,
148
118
  :global(input[type="button"])[width=full],
149
119
  :global(input[type="button"]).width-full,
150
120
  :global(input[type="submit"])[width=full],
@@ -155,8 +125,6 @@
155
125
  :global(button)[width=auto], :global(button).width-auto,
156
126
  :global(.button)[width=auto],
157
127
  :global(.button).width-auto,
158
- :global(button.button)[width=auto],
159
- :global(button.button).width-auto,
160
128
  :global(input[type="button"])[width=auto],
161
129
  :global(input[type="button"]).width-auto,
162
130
  :global(input[type="submit"])[width=auto],
@@ -167,8 +135,6 @@
167
135
  :global(button)[width=default], :global(button).width-default,
168
136
  :global(.button)[width=default],
169
137
  :global(.button).width-default,
170
- :global(button.button)[width=default],
171
- :global(button.button).width-default,
172
138
  :global(input[type="button"])[width=default],
173
139
  :global(input[type="button"]).width-default,
174
140
  :global(input[type="submit"])[width=default],
@@ -178,18 +144,20 @@
178
144
  }
179
145
  :global(button),
180
146
  :global(.button),
181
- :global(button.button),
182
147
  :global(input[type="button"]),
183
148
  :global(input[type="submit"]) {
184
- --preset-tall: var(--sld-tall-small);
185
149
  min-height: var(--preset-tall-small);
186
150
  height: var(--preset-tall-small);
187
151
  }
152
+ :global(button),
153
+ :global(.button),
154
+ :global(input[type="button"]),
155
+ :global(input[type="submit"]) {
156
+ --preset-tall: var(--sld-tall-small);
157
+ }
188
158
  :global(button)[tall=tiny], :global(button).tall-tiny,
189
159
  :global(.button)[tall=tiny],
190
160
  :global(.button).tall-tiny,
191
- :global(button.button)[tall=tiny],
192
- :global(button.button).tall-tiny,
193
161
  :global(input[type="button"])[tall=tiny],
194
162
  :global(input[type="button"]).tall-tiny,
195
163
  :global(input[type="submit"])[tall=tiny],
@@ -199,8 +167,6 @@
199
167
  :global(button)[tall=mini], :global(button).tall-mini,
200
168
  :global(.button)[tall=mini],
201
169
  :global(.button).tall-mini,
202
- :global(button.button)[tall=mini],
203
- :global(button.button).tall-mini,
204
170
  :global(input[type="button"])[tall=mini],
205
171
  :global(input[type="button"]).tall-mini,
206
172
  :global(input[type="submit"])[tall=mini],
@@ -210,8 +176,6 @@
210
176
  :global(button)[tall=small], :global(button).tall-small,
211
177
  :global(.button)[tall=small],
212
178
  :global(.button).tall-small,
213
- :global(button.button)[tall=small],
214
- :global(button.button).tall-small,
215
179
  :global(input[type="button"])[tall=small],
216
180
  :global(input[type="button"]).tall-small,
217
181
  :global(input[type="submit"])[tall=small],
@@ -221,8 +185,6 @@
221
185
  :global(button)[tall=med], :global(button).tall-med,
222
186
  :global(.button)[tall=med],
223
187
  :global(.button).tall-med,
224
- :global(button.button)[tall=med],
225
- :global(button.button).tall-med,
226
188
  :global(input[type="button"])[tall=med],
227
189
  :global(input[type="button"]).tall-med,
228
190
  :global(input[type="submit"])[tall=med],
@@ -232,8 +194,6 @@
232
194
  :global(button)[tall=kind], :global(button).tall-kind,
233
195
  :global(.button)[tall=kind],
234
196
  :global(.button).tall-kind,
235
- :global(button.button)[tall=kind],
236
- :global(button.button).tall-kind,
237
197
  :global(input[type="button"])[tall=kind],
238
198
  :global(input[type="button"]).tall-kind,
239
199
  :global(input[type="submit"])[tall=kind],
@@ -243,8 +203,6 @@
243
203
  :global(button)[tall=auto], :global(button).tall-auto,
244
204
  :global(.button)[tall=auto],
245
205
  :global(.button).tall-auto,
246
- :global(button.button)[tall=auto],
247
- :global(button.button).tall-auto,
248
206
  :global(input[type="button"])[tall=auto],
249
207
  :global(input[type="button"]).tall-auto,
250
208
  :global(input[type="submit"])[tall=auto],
@@ -254,8 +212,6 @@
254
212
  :global(button)[tall=default], :global(button).tall-default,
255
213
  :global(.button)[tall=default],
256
214
  :global(.button).tall-default,
257
- :global(button.button)[tall=default],
258
- :global(button.button).tall-default,
259
215
  :global(input[type="button"])[tall=default],
260
216
  :global(input[type="button"]).tall-default,
261
217
  :global(input[type="submit"])[tall=default],
@@ -266,9 +222,6 @@
266
222
  :global(.button)[variant*=square],
267
223
  :global(.button)[square=true],
268
224
  :global(.button).square,
269
- :global(button.button)[variant*=square],
270
- :global(button.button)[square=true],
271
- :global(button.button).square,
272
225
  :global(input[type="button"])[variant*=square],
273
226
  :global(input[type="button"])[square=true],
274
227
  :global(input[type="button"]).square,
@@ -282,9 +235,6 @@
282
235
  :global(.button)[variant*=rounded],
283
236
  :global(.button)[rounded=true],
284
237
  :global(.button).rounded,
285
- :global(button.button)[variant*=rounded],
286
- :global(button.button)[rounded=true],
287
- :global(button.button).rounded,
288
238
  :global(input[type="button"])[variant*=rounded],
289
239
  :global(input[type="button"])[rounded=true],
290
240
  :global(input[type="button"]).rounded,
@@ -296,8 +246,6 @@
296
246
  :global(button).elevation-0, :global(button)[elevation-0],
297
247
  :global(.button).elevation-0,
298
248
  :global(.button)[elevation-0],
299
- :global(button.button).elevation-0,
300
- :global(button.button)[elevation-0],
301
249
  :global(input[type="button"]).elevation-0,
302
250
  :global(input[type="button"])[elevation-0],
303
251
  :global(input[type="submit"]).elevation-0,
@@ -307,8 +255,6 @@
307
255
  :global(button).elevation-through, :global(button)[elevation-through],
308
256
  :global(.button).elevation-through,
309
257
  :global(.button)[elevation-through],
310
- :global(button.button).elevation-through,
311
- :global(button.button)[elevation-through],
312
258
  :global(input[type="button"]).elevation-through,
313
259
  :global(input[type="button"])[elevation-through],
314
260
  :global(input[type="submit"]).elevation-through,
@@ -318,17 +264,35 @@
318
264
  :global(button).elevation-5, :global(button)[elevation-5],
319
265
  :global(.button).elevation-5,
320
266
  :global(.button)[elevation-5],
321
- :global(button.button).elevation-5,
322
- :global(button.button)[elevation-5],
323
267
  :global(input[type="button"]).elevation-5,
324
268
  :global(input[type="button"])[elevation-5],
325
269
  :global(input[type="submit"]).elevation-5,
326
270
  :global(input[type="submit"])[elevation-5] {
327
271
  box-shadow: var(--sld-elevation-5);
328
272
  }
273
+ :global(button),
274
+ :global(.button),
275
+ :global(input[type="button"]),
276
+ :global(input[type="submit"]) {
277
+ border: none;
278
+ border-radius: 0;
279
+ margin: 0;
280
+ text-align: var(--sld-button-text-align);
281
+ font-size: var(--sld-button-font-size);
282
+ border-radius: var(--sld-button-radius);
283
+ color: var(--sld-color-foreground);
284
+ padding: var(--sld-button-padding);
285
+ position: relative;
286
+ display: inline-flex;
287
+ transition: all 0.2s ease-in-out;
288
+ overflow: hidden;
289
+ cursor: pointer;
290
+ align-content: center;
291
+ align-items: center;
292
+ background: var(--sld-button-background);
293
+ }
329
294
  :global(button) .button-start,
330
295
  :global(.button) .button-start,
331
- :global(button.button) .button-start,
332
296
  :global(input[type="button"]) .button-start,
333
297
  :global(input[type="submit"]) .button-start {
334
298
  position: relative;
@@ -342,35 +306,19 @@
342
306
  }
343
307
  :global(button) .button-start:empty,
344
308
  :global(.button) .button-start:empty,
345
- :global(button.button) .button-start:empty,
346
309
  :global(input[type="button"]) .button-start:empty,
347
310
  :global(input[type="submit"]) .button-start:empty {
348
311
  display: none;
349
312
  }
350
313
  :global(button) .button-central,
351
314
  :global(.button) .button-central,
352
- :global(button.button) .button-central,
353
315
  :global(input[type="button"]) .button-central,
354
316
  :global(input[type="submit"]) .button-central {
355
317
  --preset-ellipsis-line: 1;
356
- display: block;
357
- max-width: 100%;
358
- max-height: 100%;
359
- flex: 1;
360
- align-items: center;
361
- align-content: center;
362
- justify-content: center;
363
- justify-items: center;
364
- padding-left: 0.25rem;
365
- padding-right: 0.25rem;
366
- text-align: var(--sld-button-text-align, center);
367
- overflow: hidden;
368
318
  }
369
319
  :global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,
370
320
  :global(.button) .button-central[ellipsis],
371
321
  :global(.button) .button-central.ellipsis,
372
- :global(button.button) .button-central[ellipsis],
373
- :global(button.button) .button-central.ellipsis,
374
322
  :global(input[type="button"]) .button-central[ellipsis],
375
323
  :global(input[type="button"]) .button-central.ellipsis,
376
324
  :global(input[type="submit"]) .button-central[ellipsis],
@@ -381,7 +329,6 @@
381
329
  }
382
330
  :global(button) .button-central.ellipsis-line-1,
383
331
  :global(.button) .button-central.ellipsis-line-1,
384
- :global(button.button) .button-central.ellipsis-line-1,
385
332
  :global(input[type="button"]) .button-central.ellipsis-line-1,
386
333
  :global(input[type="submit"]) .button-central.ellipsis-line-1 {
387
334
  display: -webkit-box;
@@ -394,7 +341,6 @@
394
341
  }
395
342
  :global(button) .button-central.ellipsis-line-2,
396
343
  :global(.button) .button-central.ellipsis-line-2,
397
- :global(button.button) .button-central.ellipsis-line-2,
398
344
  :global(input[type="button"]) .button-central.ellipsis-line-2,
399
345
  :global(input[type="submit"]) .button-central.ellipsis-line-2 {
400
346
  display: -webkit-box;
@@ -407,7 +353,6 @@
407
353
  }
408
354
  :global(button) .button-central.ellipsis-line-3,
409
355
  :global(.button) .button-central.ellipsis-line-3,
410
- :global(button.button) .button-central.ellipsis-line-3,
411
356
  :global(input[type="button"]) .button-central.ellipsis-line-3,
412
357
  :global(input[type="submit"]) .button-central.ellipsis-line-3 {
413
358
  display: -webkit-box;
@@ -420,7 +365,6 @@
420
365
  }
421
366
  :global(button) .button-central.ellipsis-line-4,
422
367
  :global(.button) .button-central.ellipsis-line-4,
423
- :global(button.button) .button-central.ellipsis-line-4,
424
368
  :global(input[type="button"]) .button-central.ellipsis-line-4,
425
369
  :global(input[type="submit"]) .button-central.ellipsis-line-4 {
426
370
  display: -webkit-box;
@@ -433,7 +377,6 @@
433
377
  }
434
378
  :global(button) .button-central.ellipsis-line-5,
435
379
  :global(.button) .button-central.ellipsis-line-5,
436
- :global(button.button) .button-central.ellipsis-line-5,
437
380
  :global(input[type="button"]) .button-central.ellipsis-line-5,
438
381
  :global(input[type="submit"]) .button-central.ellipsis-line-5 {
439
382
  display: -webkit-box;
@@ -444,16 +387,31 @@
444
387
  white-space: normal;
445
388
  --preset-ellipsis-line: 5;
446
389
  }
390
+ :global(button) .button-central,
391
+ :global(.button) .button-central,
392
+ :global(input[type="button"]) .button-central,
393
+ :global(input[type="submit"]) .button-central {
394
+ display: block;
395
+ max-width: 100%;
396
+ max-height: 100%;
397
+ flex: 1;
398
+ align-items: center;
399
+ align-content: center;
400
+ justify-content: center;
401
+ justify-items: center;
402
+ padding-left: 0.25rem;
403
+ padding-right: 0.25rem;
404
+ text-align: var(--sld-button-text-align, center);
405
+ overflow: hidden;
406
+ }
447
407
  :global(button) .button-central:empty,
448
408
  :global(.button) .button-central:empty,
449
- :global(button.button) .button-central:empty,
450
409
  :global(input[type="button"]) .button-central:empty,
451
410
  :global(input[type="submit"]) .button-central:empty {
452
411
  display: none;
453
412
  }
454
413
  :global(button) .button-end,
455
414
  :global(.button) .button-end,
456
- :global(button.button) .button-end,
457
415
  :global(input[type="button"]) .button-end,
458
416
  :global(input[type="submit"]) .button-end {
459
417
  position: relative;
@@ -465,14 +423,12 @@
465
423
  }
466
424
  :global(button) .button-end:empty,
467
425
  :global(.button) .button-end:empty,
468
- :global(button.button) .button-end:empty,
469
426
  :global(input[type="button"]) .button-end:empty,
470
427
  :global(input[type="submit"]) .button-end:empty {
471
428
  display: none;
472
429
  }
473
430
  :global(button) .button-end:hover,
474
431
  :global(.button) .button-end:hover,
475
- :global(button.button) .button-end:hover,
476
432
  :global(input[type="button"]) .button-end:hover,
477
433
  :global(input[type="submit"]) .button-end:hover {
478
434
  background-color: var(--sld-button-action-hover-background);
@@ -480,8 +436,6 @@
480
436
  :global(button).loading, :global(button)[aria-busy=true],
481
437
  :global(.button).loading,
482
438
  :global(.button)[aria-busy=true],
483
- :global(button.button).loading,
484
- :global(button.button)[aria-busy=true],
485
439
  :global(input[type="button"]).loading,
486
440
  :global(input[type="button"])[aria-busy=true],
487
441
  :global(input[type="submit"]).loading,
@@ -493,8 +447,6 @@
493
447
  :global(button).loading::after, :global(button)[aria-busy=true]::after,
494
448
  :global(.button).loading::after,
495
449
  :global(.button)[aria-busy=true]::after,
496
- :global(button.button).loading::after,
497
- :global(button.button)[aria-busy=true]::after,
498
450
  :global(input[type="button"]).loading::after,
499
451
  :global(input[type="button"])[aria-busy=true]::after,
500
452
  :global(input[type="submit"]).loading::after,
@@ -517,9 +469,6 @@
517
469
  :global(.button)[disabled],
518
470
  :global(.button).disabled,
519
471
  :global(.button)[aria-disabled=true],
520
- :global(button.button)[disabled],
521
- :global(button.button).disabled,
522
- :global(button.button)[aria-disabled=true],
523
472
  :global(input[type="button"])[disabled],
524
473
  :global(input[type="button"]).disabled,
525
474
  :global(input[type="button"])[aria-disabled=true],
@@ -536,8 +485,6 @@
536
485
  :global(button)[aria-pressed=true], :global(button).selected,
537
486
  :global(.button)[aria-pressed=true],
538
487
  :global(.button).selected,
539
- :global(button.button)[aria-pressed=true],
540
- :global(button.button).selected,
541
488
  :global(input[type="button"])[aria-pressed=true],
542
489
  :global(input[type="button"]).selected,
543
490
  :global(input[type="submit"])[aria-pressed=true],
@@ -548,7 +495,6 @@
548
495
  }
549
496
  :global(button) .chip,
550
497
  :global(.button) .chip,
551
- :global(button.button) .chip,
552
498
  :global(input[type="button"]) .chip,
553
499
  :global(input[type="submit"]) .chip {
554
500
  position: absolute;
@@ -563,7 +509,6 @@
563
509
  }
564
510
  :global(button) .loadingButtonZone,
565
511
  :global(.button) .loadingButtonZone,
566
- :global(button.button) .loadingButtonZone,
567
512
  :global(input[type="button"]) .loadingButtonZone,
568
513
  :global(input[type="submit"]) .loadingButtonZone {
569
514
  z-index: 10;
@@ -577,235 +522,10 @@
577
522
  align-content: center;
578
523
  justify-content: space-around;
579
524
  }
580
- :global(button),
581
- :global(.button),
582
- :global(button.button),
583
- :global(input[type="button"]),
584
- :global(input[type="submit"]) {
585
- --preset-width: var(--sld-width-small);
586
- width: var(--preset-width-small);
587
- min-width: var(--preset-width-small);
588
- }
589
- :global(button)[width=tiny], :global(button).width-tiny,
590
- :global(.button)[width=tiny],
591
- :global(.button).width-tiny,
592
- :global(button.button)[width=tiny],
593
- :global(button.button).width-tiny,
594
- :global(input[type="button"])[width=tiny],
595
- :global(input[type="button"]).width-tiny,
596
- :global(input[type="submit"])[width=tiny],
597
- :global(input[type="submit"]).width-tiny {
598
- --preset-width: var(--sld-width-tiny);
599
- width: var(--sld-width-tiny) !important;
600
- }
601
- :global(button)[width=mini], :global(button).width-mini,
602
- :global(.button)[width=mini],
603
- :global(.button).width-mini,
604
- :global(button.button)[width=mini],
605
- :global(button.button).width-mini,
606
- :global(input[type="button"])[width=mini],
607
- :global(input[type="button"]).width-mini,
608
- :global(input[type="submit"])[width=mini],
609
- :global(input[type="submit"]).width-mini {
610
- --preset-width: var(--sld-width-mini);
611
- width: var(--sld-width-mini) !important;
612
- }
613
- :global(button)[width=small], :global(button).width-small,
614
- :global(.button)[width=small],
615
- :global(.button).width-small,
616
- :global(button.button)[width=small],
617
- :global(button.button).width-small,
618
- :global(input[type="button"])[width=small],
619
- :global(input[type="button"]).width-small,
620
- :global(input[type="submit"])[width=small],
621
- :global(input[type="submit"]).width-small {
622
- --preset-width: var(--sld-width-small);
623
- width: var(--sld-width-small) !important;
624
- }
625
- :global(button)[width=med], :global(button).width-med,
626
- :global(.button)[width=med],
627
- :global(.button).width-med,
628
- :global(button.button)[width=med],
629
- :global(button.button).width-med,
630
- :global(input[type="button"])[width=med],
631
- :global(input[type="button"]).width-med,
632
- :global(input[type="submit"])[width=med],
633
- :global(input[type="submit"]).width-med {
634
- --preset-width: var(--sld-width-med);
635
- width: var(--sld-width-med) !important;
636
- }
637
- :global(button)[width=kind], :global(button).width-kind,
638
- :global(.button)[width=kind],
639
- :global(.button).width-kind,
640
- :global(button.button)[width=kind],
641
- :global(button.button).width-kind,
642
- :global(input[type="button"])[width=kind],
643
- :global(input[type="button"]).width-kind,
644
- :global(input[type="submit"])[width=kind],
645
- :global(input[type="submit"]).width-kind {
646
- --preset-width: var(--sld-width-kind);
647
- width: var(--sld-width-kind) !important;
648
- }
649
- :global(button)[width=full], :global(button).width-full,
650
- :global(.button)[width=full],
651
- :global(.button).width-full,
652
- :global(button.button)[width=full],
653
- :global(button.button).width-full,
654
- :global(input[type="button"])[width=full],
655
- :global(input[type="button"]).width-full,
656
- :global(input[type="submit"])[width=full],
657
- :global(input[type="submit"]).width-full {
658
- --preset-width: var(--sld-width-full);
659
- width: var(--sld-width-full) !important;
660
- }
661
- :global(button)[width=auto], :global(button).width-auto,
662
- :global(.button)[width=auto],
663
- :global(.button).width-auto,
664
- :global(button.button)[width=auto],
665
- :global(button.button).width-auto,
666
- :global(input[type="button"])[width=auto],
667
- :global(input[type="button"]).width-auto,
668
- :global(input[type="submit"])[width=auto],
669
- :global(input[type="submit"]).width-auto {
670
- --preset-width: var(--sld-width-auto);
671
- width: var(--sld-width-auto) !important;
672
- }
673
- :global(button)[width=default], :global(button).width-default,
674
- :global(.button)[width=default],
675
- :global(.button).width-default,
676
- :global(button.button)[width=default],
677
- :global(button.button).width-default,
678
- :global(input[type="button"])[width=default],
679
- :global(input[type="button"]).width-default,
680
- :global(input[type="submit"])[width=default],
681
- :global(input[type="submit"]).width-default {
682
- --preset-width: var(--sld-width-default);
683
- width: var(--sld-width-default) !important;
684
- }
685
- :global(button),
686
- :global(.button),
687
- :global(button.button),
688
- :global(input[type="button"]),
689
- :global(input[type="submit"]) {
690
- --preset-tall: var(--sld-tall-small);
691
- min-height: var(--preset-tall-small);
692
- height: var(--preset-tall-small);
693
- }
694
- :global(button)[tall=tiny], :global(button).tall-tiny,
695
- :global(.button)[tall=tiny],
696
- :global(.button).tall-tiny,
697
- :global(button.button)[tall=tiny],
698
- :global(button.button).tall-tiny,
699
- :global(input[type="button"])[tall=tiny],
700
- :global(input[type="button"]).tall-tiny,
701
- :global(input[type="submit"])[tall=tiny],
702
- :global(input[type="submit"]).tall-tiny {
703
- min-height: var(--sld-tall-tiny) !important;
704
- }
705
- :global(button)[tall=mini], :global(button).tall-mini,
706
- :global(.button)[tall=mini],
707
- :global(.button).tall-mini,
708
- :global(button.button)[tall=mini],
709
- :global(button.button).tall-mini,
710
- :global(input[type="button"])[tall=mini],
711
- :global(input[type="button"]).tall-mini,
712
- :global(input[type="submit"])[tall=mini],
713
- :global(input[type="submit"]).tall-mini {
714
- min-height: var(--sld-tall-mini) !important;
715
- }
716
- :global(button)[tall=small], :global(button).tall-small,
717
- :global(.button)[tall=small],
718
- :global(.button).tall-small,
719
- :global(button.button)[tall=small],
720
- :global(button.button).tall-small,
721
- :global(input[type="button"])[tall=small],
722
- :global(input[type="button"]).tall-small,
723
- :global(input[type="submit"])[tall=small],
724
- :global(input[type="submit"]).tall-small {
725
- min-height: var(--sld-tall-small) !important;
726
- }
727
- :global(button)[tall=med], :global(button).tall-med,
728
- :global(.button)[tall=med],
729
- :global(.button).tall-med,
730
- :global(button.button)[tall=med],
731
- :global(button.button).tall-med,
732
- :global(input[type="button"])[tall=med],
733
- :global(input[type="button"]).tall-med,
734
- :global(input[type="submit"])[tall=med],
735
- :global(input[type="submit"]).tall-med {
736
- min-height: var(--sld-tall-med) !important;
737
- }
738
- :global(button)[tall=kind], :global(button).tall-kind,
739
- :global(.button)[tall=kind],
740
- :global(.button).tall-kind,
741
- :global(button.button)[tall=kind],
742
- :global(button.button).tall-kind,
743
- :global(input[type="button"])[tall=kind],
744
- :global(input[type="button"]).tall-kind,
745
- :global(input[type="submit"])[tall=kind],
746
- :global(input[type="submit"]).tall-kind {
747
- min-height: var(--sld-tall-kind) !important;
748
- }
749
- :global(button)[tall=auto], :global(button).tall-auto,
750
- :global(.button)[tall=auto],
751
- :global(.button).tall-auto,
752
- :global(button.button)[tall=auto],
753
- :global(button.button).tall-auto,
754
- :global(input[type="button"])[tall=auto],
755
- :global(input[type="button"]).tall-auto,
756
- :global(input[type="submit"])[tall=auto],
757
- :global(input[type="submit"]).tall-auto {
758
- min-height: var(--sld-tall-auto) !important;
759
- }
760
- :global(button)[tall=default], :global(button).tall-default,
761
- :global(.button)[tall=default],
762
- :global(.button).tall-default,
763
- :global(button.button)[tall=default],
764
- :global(button.button).tall-default,
765
- :global(input[type="button"])[tall=default],
766
- :global(input[type="button"]).tall-default,
767
- :global(input[type="submit"])[tall=default],
768
- :global(input[type="submit"]).tall-default {
769
- min-height: var(--sld-tall-default) !important;
770
- }
771
- :global(button)[variant*=square], :global(button)[square=true], :global(button).square,
772
- :global(.button)[variant*=square],
773
- :global(.button)[square=true],
774
- :global(.button).square,
775
- :global(button.button)[variant*=square],
776
- :global(button.button)[square=true],
777
- :global(button.button).square,
778
- :global(input[type="button"])[variant*=square],
779
- :global(input[type="button"])[square=true],
780
- :global(input[type="button"]).square,
781
- :global(input[type="submit"])[variant*=square],
782
- :global(input[type="submit"])[square=true],
783
- :global(input[type="submit"]).square {
784
- aspect-ratio: 1/1 !important;
785
- height: auto;
786
- }
787
- :global(button)[variant*=rounded], :global(button)[rounded=true], :global(button).rounded,
788
- :global(.button)[variant*=rounded],
789
- :global(.button)[rounded=true],
790
- :global(.button).rounded,
791
- :global(button.button)[variant*=rounded],
792
- :global(button.button)[rounded=true],
793
- :global(button.button).rounded,
794
- :global(input[type="button"])[variant*=rounded],
795
- :global(input[type="button"])[rounded=true],
796
- :global(input[type="button"]).rounded,
797
- :global(input[type="submit"])[variant*=rounded],
798
- :global(input[type="submit"])[rounded=true],
799
- :global(input[type="submit"]).rounded {
800
- border-radius: 50%;
801
- }
802
525
  :global(button)[variant*=bordered], :global(button)[bordered=true], :global(button).bordered,
803
526
  :global(.button)[variant*=bordered],
804
527
  :global(.button)[bordered=true],
805
528
  :global(.button).bordered,
806
- :global(button.button)[variant*=bordered],
807
- :global(button.button)[bordered=true],
808
- :global(button.button).bordered,
809
529
  :global(input[type="button"])[variant*=bordered],
810
530
  :global(input[type="button"])[bordered=true],
811
531
  :global(input[type="button"]).bordered,
@@ -821,9 +541,6 @@
821
541
  :global(.button)[variant*=bordered]:hover,
822
542
  :global(.button)[bordered=true]:hover,
823
543
  :global(.button).bordered:hover,
824
- :global(button.button)[variant*=bordered]:hover,
825
- :global(button.button)[bordered=true]:hover,
826
- :global(button.button).bordered:hover,
827
544
  :global(input[type="button"])[variant*=bordered]:hover,
828
545
  :global(input[type="button"])[bordered=true]:hover,
829
546
  :global(input[type="button"]).bordered:hover,
@@ -840,12 +557,6 @@
840
557
  :global(.button)[bordered=true]:active,
841
558
  :global(.button).bordered:focus,
842
559
  :global(.button).bordered:active,
843
- :global(button.button)[variant*=bordered]:focus,
844
- :global(button.button)[variant*=bordered]:active,
845
- :global(button.button)[bordered=true]:focus,
846
- :global(button.button)[bordered=true]:active,
847
- :global(button.button).bordered:focus,
848
- :global(button.button).bordered:active,
849
560
  :global(input[type="button"])[variant*=bordered]:focus,
850
561
  :global(input[type="button"])[variant*=bordered]:active,
851
562
  :global(input[type="button"])[bordered=true]:focus,
@@ -865,9 +576,6 @@
865
576
  :global(.button)[variant*=contained],
866
577
  :global(.button)[contained=true],
867
578
  :global(.button).contained,
868
- :global(button.button)[variant*=contained],
869
- :global(button.button)[contained=true],
870
- :global(button.button).contained,
871
579
  :global(input[type="button"])[variant*=contained],
872
580
  :global(input[type="button"])[contained=true],
873
581
  :global(input[type="button"]).contained,
@@ -884,9 +592,6 @@
884
592
  :global(.button)[variant*=contained]:hover,
885
593
  :global(.button)[contained=true]:hover,
886
594
  :global(.button).contained:hover,
887
- :global(button.button)[variant*=contained]:hover,
888
- :global(button.button)[contained=true]:hover,
889
- :global(button.button).contained:hover,
890
595
  :global(input[type="button"])[variant*=contained]:hover,
891
596
  :global(input[type="button"])[contained=true]:hover,
892
597
  :global(input[type="button"]).contained:hover,
@@ -903,12 +608,6 @@
903
608
  :global(.button)[contained=true]:active,
904
609
  :global(.button).contained:focus,
905
610
  :global(.button).contained:active,
906
- :global(button.button)[variant*=contained]:focus,
907
- :global(button.button)[variant*=contained]:active,
908
- :global(button.button)[contained=true]:focus,
909
- :global(button.button)[contained=true]:active,
910
- :global(button.button).contained:focus,
911
- :global(button.button).contained:active,
912
611
  :global(input[type="button"])[variant*=contained]:focus,
913
612
  :global(input[type="button"])[variant*=contained]:active,
914
613
  :global(input[type="button"])[contained=true]:focus,
@@ -930,10 +629,6 @@
930
629
  :global(.button)[link=true],
931
630
  :global(.button).link,
932
631
  :global(.button)[role=link],
933
- :global(button.button)[variant*=link],
934
- :global(button.button)[link=true],
935
- :global(button.button).link,
936
- :global(button.button)[role=link],
937
632
  :global(input[type="button"])[variant*=link],
938
633
  :global(input[type="button"])[link=true],
939
634
  :global(input[type="button"]).link,
@@ -954,10 +649,6 @@
954
649
  :global(.button)[link=true]:hover,
955
650
  :global(.button).link:hover,
956
651
  :global(.button)[role=link]:hover,
957
- :global(button.button)[variant*=link]:hover,
958
- :global(button.button)[link=true]:hover,
959
- :global(button.button).link:hover,
960
- :global(button.button)[role=link]:hover,
961
652
  :global(input[type="button"])[variant*=link]:hover,
962
653
  :global(input[type="button"])[link=true]:hover,
963
654
  :global(input[type="button"]).link:hover,
@@ -977,14 +668,6 @@
977
668
  :global(.button).link:active,
978
669
  :global(.button)[role=link]:focus,
979
670
  :global(.button)[role=link]:active,
980
- :global(button.button)[variant*=link]:focus,
981
- :global(button.button)[variant*=link]:active,
982
- :global(button.button)[link=true]:focus,
983
- :global(button.button)[link=true]:active,
984
- :global(button.button).link:focus,
985
- :global(button.button).link:active,
986
- :global(button.button)[role=link]:focus,
987
- :global(button.button)[role=link]:active,
988
671
  :global(input[type="button"])[variant*=link]:focus,
989
672
  :global(input[type="button"])[variant*=link]:active,
990
673
  :global(input[type="button"])[link=true]:focus,
@@ -1009,9 +692,6 @@
1009
692
  :global(.button)[variant*=naked],
1010
693
  :global(.button)[naked=true],
1011
694
  :global(.button).naked,
1012
- :global(button.button)[variant*=naked],
1013
- :global(button.button)[naked=true],
1014
- :global(button.button).naked,
1015
695
  :global(input[type="button"])[variant*=naked],
1016
696
  :global(input[type="button"])[naked=true],
1017
697
  :global(input[type="button"]).naked,
@@ -1027,9 +707,6 @@
1027
707
  :global(.button)[variant*=naked]:hover,
1028
708
  :global(.button)[naked=true]:hover,
1029
709
  :global(.button).naked:hover,
1030
- :global(button.button)[variant*=naked]:hover,
1031
- :global(button.button)[naked=true]:hover,
1032
- :global(button.button).naked:hover,
1033
710
  :global(input[type="button"])[variant*=naked]:hover,
1034
711
  :global(input[type="button"])[naked=true]:hover,
1035
712
  :global(input[type="button"]).naked:hover,
@@ -1043,9 +720,6 @@
1043
720
  :global(.button)[variant*=naked]:hover,
1044
721
  :global(.button)[naked=true]:hover,
1045
722
  :global(.button).naked:hover,
1046
- :global(button.button)[variant*=naked]:hover,
1047
- :global(button.button)[naked=true]:hover,
1048
- :global(button.button).naked:hover,
1049
723
  :global(input[type="button"])[variant*=naked]:hover,
1050
724
  :global(input[type="button"])[naked=true]:hover,
1051
725
  :global(input[type="button"]).naked:hover,
@@ -1061,12 +735,6 @@
1061
735
  :global(.button)[naked=true]:focus,
1062
736
  :global(.button).naked:active,
1063
737
  :global(.button).naked:focus,
1064
- :global(button.button)[variant*=naked]:active,
1065
- :global(button.button)[variant*=naked]:focus,
1066
- :global(button.button)[naked=true]:active,
1067
- :global(button.button)[naked=true]:focus,
1068
- :global(button.button).naked:active,
1069
- :global(button.button).naked:focus,
1070
738
  :global(input[type="button"])[variant*=naked]:active,
1071
739
  :global(input[type="button"])[variant*=naked]:focus,
1072
740
  :global(input[type="button"])[naked=true]:active,
@@ -1087,9 +755,6 @@
1087
755
  :global(.button)[variant*=flat],
1088
756
  :global(.button)[flat=true],
1089
757
  :global(.button).flat,
1090
- :global(button.button)[variant*=flat],
1091
- :global(button.button)[flat=true],
1092
- :global(button.button).flat,
1093
758
  :global(input[type="button"])[variant*=flat],
1094
759
  :global(input[type="button"])[flat=true],
1095
760
  :global(input[type="button"]).flat,
@@ -1106,9 +771,6 @@
1106
771
  :global(.button)[variant*=flat]:hover,
1107
772
  :global(.button)[flat=true]:hover,
1108
773
  :global(.button).flat:hover,
1109
- :global(button.button)[variant*=flat]:hover,
1110
- :global(button.button)[flat=true]:hover,
1111
- :global(button.button).flat:hover,
1112
774
  :global(input[type="button"])[variant*=flat]:hover,
1113
775
  :global(input[type="button"])[flat=true]:hover,
1114
776
  :global(input[type="button"]).flat:hover,
@@ -1124,12 +786,6 @@
1124
786
  :global(.button)[flat=true]:focus,
1125
787
  :global(.button).flat:active,
1126
788
  :global(.button).flat:focus,
1127
- :global(button.button)[variant*=flat]:active,
1128
- :global(button.button)[variant*=flat]:focus,
1129
- :global(button.button)[flat=true]:active,
1130
- :global(button.button)[flat=true]:focus,
1131
- :global(button.button).flat:active,
1132
- :global(button.button).flat:focus,
1133
789
  :global(input[type="button"])[variant*=flat]:active,
1134
790
  :global(input[type="button"])[variant*=flat]:focus,
1135
791
  :global(input[type="button"])[flat=true]:active,