nve-designsystem 3.1.0 → 3.3.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 (197) hide show
  1. package/chunks/chunk.2PCBEMQZ.js +163 -226
  2. package/chunks/chunk.36O46B5H.js +15 -15
  3. package/chunks/chunk.4TUIT776.js +78 -96
  4. package/chunks/chunk.5JY5FUCG.js +965 -1245
  5. package/chunks/chunk.5P45LHIX.js +668 -96
  6. package/chunks/chunk.6CTB5ZDJ.js +107 -100
  7. package/chunks/chunk.B4BZKR24.js +29 -39
  8. package/chunks/chunk.D5YQDJ7X.js +122 -166
  9. package/chunks/chunk.EA437WHD.js +5 -5
  10. package/chunks/chunk.GI7VDIWX.js +14 -15
  11. package/chunks/chunk.GMYPQTFK.js +18 -20
  12. package/chunks/chunk.HVTXQL7M.js +191 -215
  13. package/chunks/chunk.IKV4VH3T.js +18 -16
  14. package/chunks/chunk.IVVHNXMC.js +26 -27
  15. package/chunks/chunk.JHOXTQXA.js +65 -74
  16. package/chunks/chunk.JXOKFADN.js +63 -90
  17. package/chunks/chunk.K7JGTRV7.js +24 -23
  18. package/chunks/chunk.KPLQLAWP.js +132 -147
  19. package/chunks/chunk.LD4M4QGE.js +61 -74
  20. package/chunks/chunk.MSKEYBDI.js +53 -71
  21. package/chunks/chunk.NYIIDP5N.js +39 -45
  22. package/chunks/chunk.RWUUFNUL.js +91 -114
  23. package/chunks/chunk.SAPQLUO4.js +249 -228
  24. package/chunks/chunk.SI4ACBFK.js +139 -5
  25. package/chunks/chunk.TP2GB2HO.js +361 -460
  26. package/chunks/chunk.UDWRA64J.js +185 -223
  27. package/chunks/chunk.URTPIBTY.js +119 -151
  28. package/chunks/chunk.VESXC477.js +63 -66
  29. package/chunks/chunk.XA43ZQPC.js +198 -313
  30. package/chunks/chunk.XQ2OKYYA.js +25 -26
  31. package/chunks/chunk.XZNBUGX7.js +6 -6
  32. package/chunks/chunk.YHLNUJ7P.js +93 -116
  33. package/chunks/chunk.ZH2AND3P.js +340 -399
  34. package/chunks/chunk.ZL53POKZ.js +61 -156
  35. package/chunks/chunk.js +20 -0
  36. package/chunks/class-map.js +49 -45
  37. package/chunks/decorate.js +105 -0
  38. package/chunks/directive-helpers.js +5 -7
  39. package/chunks/if-defined.js +5 -5
  40. package/chunks/lit.js +525 -0
  41. package/chunks/live.js +24 -24
  42. package/chunks/nve-alert.component.js +163 -0
  43. package/chunks/nve-carousel-item.component.js +36 -0
  44. package/chunks/nve-carousel.component.js +41 -0
  45. package/chunks/nve-checkbox-group.component.js +114 -0
  46. package/chunks/nve-checkbox.component.js +28 -0
  47. package/chunks/nve-dialog.component.js +39 -0
  48. package/chunks/nve-divider.component.js +23 -0
  49. package/chunks/nve-drawer.component.js +40 -0
  50. package/chunks/nve-dropdown.component.js +83 -0
  51. package/chunks/nve-input.component.js +80 -0
  52. package/chunks/nve-label.component.js +89 -0
  53. package/chunks/nve-menu-item.component.js +35 -0
  54. package/chunks/nve-menu.component.js +17 -0
  55. package/chunks/nve-option.component.js +27 -0
  56. package/chunks/nve-popup.component.js +15 -0
  57. package/chunks/nve-radio-button.component.js +20 -0
  58. package/chunks/nve-radio-group.component.js +78 -0
  59. package/chunks/nve-radio.component.js +18 -0
  60. package/chunks/nve-select.component.js +58 -0
  61. package/chunks/nve-skeleton.component.js +20 -0
  62. package/chunks/nve-spinner.component.js +23 -0
  63. package/chunks/nve-tooltip.component.js +20 -0
  64. package/chunks/nve-warning-level.component.js +57 -0
  65. package/chunks/ref.js +75 -84
  66. package/chunks/shoelace.js +10006 -0
  67. package/chunks/static-html.js +27 -0
  68. package/chunks/unsafe-html.js +24 -20
  69. package/chunks/updateInvalidProperty.js +7 -7
  70. package/chunks/watch.js +20 -20
  71. package/components/nve-accordion/nve-accordion.component.js +24 -30
  72. package/components/nve-accordion-item/nve-accordion-item.component.js +30 -64
  73. package/components/nve-accordion-item/nve-accordion-item.styles.js +5 -5
  74. package/components/nve-alert/nve-alert.component.js +2 -227
  75. package/components/nve-alert/nve-alert.styles.js +45 -27
  76. package/components/nve-badge/nve-badge.component.js +41 -45
  77. package/components/nve-badge/nve-badge.styles.js +33 -31
  78. package/components/nve-button/nve-button.component.d.ts +110 -10
  79. package/components/nve-button/nve-button.component.js +146 -39
  80. package/components/nve-button/nve-button.styles.js +214 -157
  81. package/components/nve-carousel/nve-carousel.component.js +2 -47
  82. package/components/nve-carousel/nve-carousel.styles.js +6 -6
  83. package/components/nve-carousel-item/nve-carousel-item.component.js +2 -40
  84. package/components/nve-carousel-item/nve-carousel-item.styles.js +5 -5
  85. package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.component.js +44 -54
  86. package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.styles.js +5 -5
  87. package/components/nve-checkbox/nve-checkbox.component.js +2 -34
  88. package/components/nve-checkbox/nve-checkbox.styles.js +7 -7
  89. package/components/nve-checkbox-group/nve-checkbox-group.component.js +2 -152
  90. package/components/nve-checkbox-group/nve-checkbox-group.styles.js +5 -5
  91. package/components/nve-combobox/nve-combobox.component.js +222 -440
  92. package/components/nve-combobox/nve-combobox.styles.js +6 -6
  93. package/components/nve-darkmode-switch/nve-darkmode-switch.component.js +32 -38
  94. package/components/nve-dialog/nve-dialog-styles.js +6 -6
  95. package/components/nve-dialog/nve-dialog.component.js +2 -54
  96. package/components/nve-divider/nve-divider.component.js +2 -30
  97. package/components/nve-drawer/nve-drawer.component.js +2 -44
  98. package/components/nve-drawer/nve-drawer.styles.js +6 -6
  99. package/components/nve-dropdown/nve-dropdown.component.js +2 -79
  100. package/components/nve-dropdown/nve-dropdown.styles.js +5 -5
  101. package/components/nve-heading/nve-heading.component.d.ts +29 -0
  102. package/components/nve-heading/nve-heading.component.js +45 -0
  103. package/components/nve-heading/nve-heading.styles.d.ts +2 -0
  104. package/components/nve-heading/nve-heading.styles.js +41 -0
  105. package/components/nve-icon/nve-icon.component.js +145 -164
  106. package/components/nve-icon/nve-icon.styles.js +11 -6
  107. package/components/nve-icon/offline-icons.js +16 -13
  108. package/components/nve-input/nve-input.component.js +2 -100
  109. package/components/nve-input/nve-input.styles.js +5 -5
  110. package/components/nve-label/nve-label.component.js +2 -115
  111. package/components/nve-label/nve-label.styles.js +5 -5
  112. package/components/nve-link-card/nve-link-card.component.d.ts +5 -2
  113. package/components/nve-link-card/nve-link-card.component.js +44 -80
  114. package/components/nve-link-card/nve-link-card.styles.js +71 -66
  115. package/components/nve-menu/nve-menu.component.js +2 -22
  116. package/components/nve-menu/nve-menu.styles.js +5 -5
  117. package/components/nve-menu-item/nve-menu-item.component.js +2 -43
  118. package/components/nve-menu-item/nve-menu-item.styles.js +7 -7
  119. package/components/nve-message-card/nve-message-card.component.js +61 -91
  120. package/components/nve-message-card/nve-message-card.styles.js +24 -27
  121. package/components/nve-navigation-card/nve-navigation-card.component.d.ts +52 -0
  122. package/components/nve-navigation-card/nve-navigation-card.component.js +60 -0
  123. package/components/nve-navigation-card/nve-navigation-card.styles.d.ts +2 -0
  124. package/components/nve-navigation-card/nve-navigation-card.styles.js +112 -0
  125. package/components/nve-option/nve-option.component.js +2 -41
  126. package/components/nve-option/nve-option.styles.js +5 -5
  127. package/components/nve-paragraph/nve-paragraph.component.d.ts +26 -0
  128. package/components/nve-paragraph/nve-paragraph.component.js +26 -0
  129. package/components/nve-paragraph/nve-paragraph.styles.d.ts +2 -0
  130. package/components/nve-paragraph/nve-paragraph.styles.js +105 -0
  131. package/components/nve-popup/nve-popup.component.js +2 -22
  132. package/components/nve-radio/nve-radio.component.js +2 -23
  133. package/components/nve-radio/nve-radio.styles.js +5 -5
  134. package/components/nve-radio-button/nve-radio-button.component.js +2 -25
  135. package/components/nve-radio-button/nve-radio-button.styles.js +5 -5
  136. package/components/nve-radio-group/nve-radio-group.component.js +2 -119
  137. package/components/nve-radio-group/nve-radio-group.styles.js +5 -5
  138. package/components/nve-relative-time/nve-relative-time.component.js +21 -56
  139. package/components/nve-relative-time/nve-relative-time.styles.js +5 -5
  140. package/components/nve-select/nve-select.component.js +2 -80
  141. package/components/nve-select/nve-select.styles.js +6 -6
  142. package/components/nve-skeleton/nve-skeleton.component.js +2 -27
  143. package/components/nve-skeleton/nve-skeleton.styles.js +5 -5
  144. package/components/nve-spinner/nve-spinner.component.js +2 -31
  145. package/components/nve-stepper/nve-step/nve-step.component.js +113 -173
  146. package/components/nve-stepper/nve-step/nve-step.styles.js +12 -12
  147. package/components/nve-stepper/nve-stepper-mobile.component.js +37 -49
  148. package/components/nve-stepper/nve-stepper-mobile.styles.js +7 -7
  149. package/components/nve-stepper/nve-stepper.component.js +94 -139
  150. package/components/nve-stepper/nve-stepper.styles.js +5 -5
  151. package/components/nve-switch/nve-switch.component.js +75 -107
  152. package/components/nve-switch/nve-switch.styles.js +7 -7
  153. package/components/nve-tab/nve-tab.component.js +30 -42
  154. package/components/nve-tab/nve-tab.styles.js +7 -7
  155. package/components/nve-tab-group/nve-tab-group.component.js +180 -260
  156. package/components/nve-tab-group/nve-tab-group.styles.js +5 -5
  157. package/components/nve-tab-panel/nve-tab-panel.component.js +21 -31
  158. package/components/nve-tab-panel/nve-tab-panel.styles.js +5 -5
  159. package/components/nve-tag/nve-tag.component.d.ts +3 -3
  160. package/components/nve-tag/nve-tag.component.js +71 -72
  161. package/components/nve-tag/nve-tag.styles.js +23 -22
  162. package/components/nve-textarea/nve-textarea.component.d.ts +3 -1
  163. package/components/nve-textarea/nve-textarea.component.js +112 -173
  164. package/components/nve-textarea/nve-textarea.styles.js +10 -5
  165. package/components/nve-tooltip/nve-tooltip.component.js +2 -30
  166. package/components/nve-tooltip/nve-tooltip.styles.js +5 -5
  167. package/components/nve-warning-level/nve-warning-level.component.js +2 -78
  168. package/components/nve-warning-level/nve-warning-level.styles.js +7 -7
  169. package/css/global.css +13 -55
  170. package/css/nve.css +1048 -393
  171. package/css/nve_dark.css +406 -305
  172. package/css/rme.css +1050 -395
  173. package/css/rme_dark.css +408 -307
  174. package/css/shoelace-styles.css +539 -0
  175. package/css/varsom.css +1046 -391
  176. package/css/varsom_dark.css +404 -303
  177. package/custom-elements.json +2905 -12389
  178. package/fonts/LICENSE.txt +37 -0
  179. package/fonts/SourceSans3-VariableFont_wght.woff2 +0 -0
  180. package/interfaces/NveComponent.interface.js +0 -1
  181. package/nve-designsystem.d.ts +5 -0
  182. package/nve-designsystem.js +46 -86
  183. package/package.json +26 -8
  184. package/registerIcons/systemLibraryCustomization.js +23 -91
  185. package/vite-env.d.js +0 -1
  186. package/chunks/chunk.3RPBFEDE.js +0 -162
  187. package/chunks/chunk.JCXLDPQF.js +0 -225
  188. package/chunks/chunk.JQBT7BOV.js +0 -8446
  189. package/chunks/chunk.MAQXLKQ7.js +0 -598
  190. package/chunks/lit-element.js +0 -508
  191. package/chunks/property.js +0 -37
  192. package/chunks/query.js +0 -13
  193. package/chunks/state.js +0 -7
  194. package/chunks/static.js +0 -26
  195. package/nve-designsystem.css +0 -1
  196. package/vscode.css-custom-data.json +0 -621
  197. package/vscode.html-custom-data.json +0 -2354
@@ -1,598 +0,0 @@
1
- import { i as o } from "./lit-element.js";
2
- var r = o`
3
- :host {
4
- display: inline-block;
5
- position: relative;
6
- width: auto;
7
- cursor: pointer;
8
- }
9
-
10
- .button {
11
- display: inline-flex;
12
- align-items: stretch;
13
- justify-content: center;
14
- width: 100%;
15
- border-style: solid;
16
- border-width: var(--sl-input-border-width);
17
- font-family: var(--sl-input-font-family);
18
- font-weight: var(--sl-font-weight-semibold);
19
- text-decoration: none;
20
- user-select: none;
21
- -webkit-user-select: none;
22
- white-space: nowrap;
23
- vertical-align: middle;
24
- padding: 0;
25
- transition:
26
- var(--sl-transition-x-fast) background-color,
27
- var(--sl-transition-x-fast) color,
28
- var(--sl-transition-x-fast) border,
29
- var(--sl-transition-x-fast) box-shadow;
30
- cursor: inherit;
31
- }
32
-
33
- .button::-moz-focus-inner {
34
- border: 0;
35
- }
36
-
37
- .button:focus {
38
- outline: none;
39
- }
40
-
41
- .button:focus-visible {
42
- outline: var(--sl-focus-ring);
43
- outline-offset: var(--sl-focus-ring-offset);
44
- }
45
-
46
- .button--disabled {
47
- opacity: 0.5;
48
- cursor: not-allowed;
49
- }
50
-
51
- /* When disabled, prevent mouse events from bubbling up from children */
52
- .button--disabled * {
53
- pointer-events: none;
54
- }
55
-
56
- .button__prefix,
57
- .button__suffix {
58
- flex: 0 0 auto;
59
- display: flex;
60
- align-items: center;
61
- pointer-events: none;
62
- }
63
-
64
- .button__label {
65
- display: inline-block;
66
- }
67
-
68
- .button__label::slotted(sl-icon) {
69
- vertical-align: -2px;
70
- }
71
-
72
- /*
73
- * Standard buttons
74
- */
75
-
76
- /* Default */
77
- .button--standard.button--default {
78
- background-color: var(--sl-color-neutral-0);
79
- border-color: var(--sl-input-border-color);
80
- color: var(--sl-color-neutral-700);
81
- }
82
-
83
- .button--standard.button--default:hover:not(.button--disabled) {
84
- background-color: var(--sl-color-primary-50);
85
- border-color: var(--sl-color-primary-300);
86
- color: var(--sl-color-primary-700);
87
- }
88
-
89
- .button--standard.button--default:active:not(.button--disabled) {
90
- background-color: var(--sl-color-primary-100);
91
- border-color: var(--sl-color-primary-400);
92
- color: var(--sl-color-primary-700);
93
- }
94
-
95
- /* Primary */
96
- .button--standard.button--primary {
97
- background-color: var(--sl-color-primary-600);
98
- border-color: var(--sl-color-primary-600);
99
- color: var(--sl-color-neutral-0);
100
- }
101
-
102
- .button--standard.button--primary:hover:not(.button--disabled) {
103
- background-color: var(--sl-color-primary-500);
104
- border-color: var(--sl-color-primary-500);
105
- color: var(--sl-color-neutral-0);
106
- }
107
-
108
- .button--standard.button--primary:active:not(.button--disabled) {
109
- background-color: var(--sl-color-primary-600);
110
- border-color: var(--sl-color-primary-600);
111
- color: var(--sl-color-neutral-0);
112
- }
113
-
114
- /* Success */
115
- .button--standard.button--success {
116
- background-color: var(--sl-color-success-600);
117
- border-color: var(--sl-color-success-600);
118
- color: var(--sl-color-neutral-0);
119
- }
120
-
121
- .button--standard.button--success:hover:not(.button--disabled) {
122
- background-color: var(--sl-color-success-500);
123
- border-color: var(--sl-color-success-500);
124
- color: var(--sl-color-neutral-0);
125
- }
126
-
127
- .button--standard.button--success:active:not(.button--disabled) {
128
- background-color: var(--sl-color-success-600);
129
- border-color: var(--sl-color-success-600);
130
- color: var(--sl-color-neutral-0);
131
- }
132
-
133
- /* Neutral */
134
- .button--standard.button--neutral {
135
- background-color: var(--sl-color-neutral-600);
136
- border-color: var(--sl-color-neutral-600);
137
- color: var(--sl-color-neutral-0);
138
- }
139
-
140
- .button--standard.button--neutral:hover:not(.button--disabled) {
141
- background-color: var(--sl-color-neutral-500);
142
- border-color: var(--sl-color-neutral-500);
143
- color: var(--sl-color-neutral-0);
144
- }
145
-
146
- .button--standard.button--neutral:active:not(.button--disabled) {
147
- background-color: var(--sl-color-neutral-600);
148
- border-color: var(--sl-color-neutral-600);
149
- color: var(--sl-color-neutral-0);
150
- }
151
-
152
- /* Warning */
153
- .button--standard.button--warning {
154
- background-color: var(--sl-color-warning-600);
155
- border-color: var(--sl-color-warning-600);
156
- color: var(--sl-color-neutral-0);
157
- }
158
- .button--standard.button--warning:hover:not(.button--disabled) {
159
- background-color: var(--sl-color-warning-500);
160
- border-color: var(--sl-color-warning-500);
161
- color: var(--sl-color-neutral-0);
162
- }
163
-
164
- .button--standard.button--warning:active:not(.button--disabled) {
165
- background-color: var(--sl-color-warning-600);
166
- border-color: var(--sl-color-warning-600);
167
- color: var(--sl-color-neutral-0);
168
- }
169
-
170
- /* Danger */
171
- .button--standard.button--danger {
172
- background-color: var(--sl-color-danger-600);
173
- border-color: var(--sl-color-danger-600);
174
- color: var(--sl-color-neutral-0);
175
- }
176
-
177
- .button--standard.button--danger:hover:not(.button--disabled) {
178
- background-color: var(--sl-color-danger-500);
179
- border-color: var(--sl-color-danger-500);
180
- color: var(--sl-color-neutral-0);
181
- }
182
-
183
- .button--standard.button--danger:active:not(.button--disabled) {
184
- background-color: var(--sl-color-danger-600);
185
- border-color: var(--sl-color-danger-600);
186
- color: var(--sl-color-neutral-0);
187
- }
188
-
189
- /*
190
- * Outline buttons
191
- */
192
-
193
- .button--outline {
194
- background: none;
195
- border: solid 1px;
196
- }
197
-
198
- /* Default */
199
- .button--outline.button--default {
200
- border-color: var(--sl-input-border-color);
201
- color: var(--sl-color-neutral-700);
202
- }
203
-
204
- .button--outline.button--default:hover:not(.button--disabled),
205
- .button--outline.button--default.button--checked:not(.button--disabled) {
206
- border-color: var(--sl-color-primary-600);
207
- background-color: var(--sl-color-primary-600);
208
- color: var(--sl-color-neutral-0);
209
- }
210
-
211
- .button--outline.button--default:active:not(.button--disabled) {
212
- border-color: var(--sl-color-primary-700);
213
- background-color: var(--sl-color-primary-700);
214
- color: var(--sl-color-neutral-0);
215
- }
216
-
217
- /* Primary */
218
- .button--outline.button--primary {
219
- border-color: var(--sl-color-primary-600);
220
- color: var(--sl-color-primary-600);
221
- }
222
-
223
- .button--outline.button--primary:hover:not(.button--disabled),
224
- .button--outline.button--primary.button--checked:not(.button--disabled) {
225
- background-color: var(--sl-color-primary-600);
226
- color: var(--sl-color-neutral-0);
227
- }
228
-
229
- .button--outline.button--primary:active:not(.button--disabled) {
230
- border-color: var(--sl-color-primary-700);
231
- background-color: var(--sl-color-primary-700);
232
- color: var(--sl-color-neutral-0);
233
- }
234
-
235
- /* Success */
236
- .button--outline.button--success {
237
- border-color: var(--sl-color-success-600);
238
- color: var(--sl-color-success-600);
239
- }
240
-
241
- .button--outline.button--success:hover:not(.button--disabled),
242
- .button--outline.button--success.button--checked:not(.button--disabled) {
243
- background-color: var(--sl-color-success-600);
244
- color: var(--sl-color-neutral-0);
245
- }
246
-
247
- .button--outline.button--success:active:not(.button--disabled) {
248
- border-color: var(--sl-color-success-700);
249
- background-color: var(--sl-color-success-700);
250
- color: var(--sl-color-neutral-0);
251
- }
252
-
253
- /* Neutral */
254
- .button--outline.button--neutral {
255
- border-color: var(--sl-color-neutral-600);
256
- color: var(--sl-color-neutral-600);
257
- }
258
-
259
- .button--outline.button--neutral:hover:not(.button--disabled),
260
- .button--outline.button--neutral.button--checked:not(.button--disabled) {
261
- background-color: var(--sl-color-neutral-600);
262
- color: var(--sl-color-neutral-0);
263
- }
264
-
265
- .button--outline.button--neutral:active:not(.button--disabled) {
266
- border-color: var(--sl-color-neutral-700);
267
- background-color: var(--sl-color-neutral-700);
268
- color: var(--sl-color-neutral-0);
269
- }
270
-
271
- /* Warning */
272
- .button--outline.button--warning {
273
- border-color: var(--sl-color-warning-600);
274
- color: var(--sl-color-warning-600);
275
- }
276
-
277
- .button--outline.button--warning:hover:not(.button--disabled),
278
- .button--outline.button--warning.button--checked:not(.button--disabled) {
279
- background-color: var(--sl-color-warning-600);
280
- color: var(--sl-color-neutral-0);
281
- }
282
-
283
- .button--outline.button--warning:active:not(.button--disabled) {
284
- border-color: var(--sl-color-warning-700);
285
- background-color: var(--sl-color-warning-700);
286
- color: var(--sl-color-neutral-0);
287
- }
288
-
289
- /* Danger */
290
- .button--outline.button--danger {
291
- border-color: var(--sl-color-danger-600);
292
- color: var(--sl-color-danger-600);
293
- }
294
-
295
- .button--outline.button--danger:hover:not(.button--disabled),
296
- .button--outline.button--danger.button--checked:not(.button--disabled) {
297
- background-color: var(--sl-color-danger-600);
298
- color: var(--sl-color-neutral-0);
299
- }
300
-
301
- .button--outline.button--danger:active:not(.button--disabled) {
302
- border-color: var(--sl-color-danger-700);
303
- background-color: var(--sl-color-danger-700);
304
- color: var(--sl-color-neutral-0);
305
- }
306
-
307
- @media (forced-colors: active) {
308
- .button.button--outline.button--checked:not(.button--disabled) {
309
- outline: solid 2px transparent;
310
- }
311
- }
312
-
313
- /*
314
- * Text buttons
315
- */
316
-
317
- .button--text {
318
- background-color: transparent;
319
- border-color: transparent;
320
- color: var(--sl-color-primary-600);
321
- }
322
-
323
- .button--text:hover:not(.button--disabled) {
324
- background-color: transparent;
325
- border-color: transparent;
326
- color: var(--sl-color-primary-500);
327
- }
328
-
329
- .button--text:focus-visible:not(.button--disabled) {
330
- background-color: transparent;
331
- border-color: transparent;
332
- color: var(--sl-color-primary-500);
333
- }
334
-
335
- .button--text:active:not(.button--disabled) {
336
- background-color: transparent;
337
- border-color: transparent;
338
- color: var(--sl-color-primary-700);
339
- }
340
-
341
- /*
342
- * Size modifiers
343
- */
344
-
345
- .button--small {
346
- height: auto;
347
- min-height: var(--sl-input-height-small);
348
- font-size: var(--sl-button-font-size-small);
349
- line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
350
- border-radius: var(--sl-input-border-radius-small);
351
- }
352
-
353
- .button--medium {
354
- height: auto;
355
- min-height: var(--sl-input-height-medium);
356
- font-size: var(--sl-button-font-size-medium);
357
- line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
358
- border-radius: var(--sl-input-border-radius-medium);
359
- }
360
-
361
- .button--large {
362
- height: auto;
363
- min-height: var(--sl-input-height-large);
364
- font-size: var(--sl-button-font-size-large);
365
- line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
366
- border-radius: var(--sl-input-border-radius-large);
367
- }
368
-
369
- /*
370
- * Pill modifier
371
- */
372
-
373
- .button--pill.button--small {
374
- border-radius: var(--sl-input-height-small);
375
- }
376
-
377
- .button--pill.button--medium {
378
- border-radius: var(--sl-input-height-medium);
379
- }
380
-
381
- .button--pill.button--large {
382
- border-radius: var(--sl-input-height-large);
383
- }
384
-
385
- /*
386
- * Circle modifier
387
- */
388
-
389
- .button--circle {
390
- padding-left: 0;
391
- padding-right: 0;
392
- }
393
-
394
- .button--circle.button--small {
395
- width: var(--sl-input-height-small);
396
- border-radius: 50%;
397
- }
398
-
399
- .button--circle.button--medium {
400
- width: var(--sl-input-height-medium);
401
- border-radius: 50%;
402
- }
403
-
404
- .button--circle.button--large {
405
- width: var(--sl-input-height-large);
406
- border-radius: 50%;
407
- }
408
-
409
- .button--circle .button__prefix,
410
- .button--circle .button__suffix,
411
- .button--circle .button__caret {
412
- display: none;
413
- }
414
-
415
- /*
416
- * Caret modifier
417
- */
418
-
419
- .button--caret .button__suffix {
420
- display: none;
421
- }
422
-
423
- .button--caret .button__caret {
424
- height: auto;
425
- }
426
-
427
- /*
428
- * Loading modifier
429
- */
430
-
431
- .button--loading {
432
- position: relative;
433
- cursor: wait;
434
- }
435
-
436
- .button--loading .button__prefix,
437
- .button--loading .button__label,
438
- .button--loading .button__suffix,
439
- .button--loading .button__caret {
440
- visibility: hidden;
441
- }
442
-
443
- .button--loading sl-spinner {
444
- --indicator-color: currentColor;
445
- position: absolute;
446
- font-size: 1em;
447
- height: 1em;
448
- width: 1em;
449
- top: calc(50% - 0.5em);
450
- left: calc(50% - 0.5em);
451
- }
452
-
453
- /*
454
- * Badges
455
- */
456
-
457
- .button ::slotted(sl-badge) {
458
- position: absolute;
459
- top: 0;
460
- right: 0;
461
- translate: 50% -50%;
462
- pointer-events: none;
463
- }
464
-
465
- .button--rtl ::slotted(sl-badge) {
466
- right: auto;
467
- left: 0;
468
- translate: -50% -50%;
469
- }
470
-
471
- /*
472
- * Button spacing
473
- */
474
-
475
- .button--has-label.button--small .button__label {
476
- padding: 0 var(--sl-spacing-small);
477
- }
478
-
479
- .button--has-label.button--medium .button__label {
480
- padding: 0 var(--sl-spacing-medium);
481
- }
482
-
483
- .button--has-label.button--large .button__label {
484
- padding: 0 var(--sl-spacing-large);
485
- }
486
-
487
- .button--has-prefix.button--small {
488
- padding-inline-start: var(--sl-spacing-x-small);
489
- }
490
-
491
- .button--has-prefix.button--small .button__label {
492
- padding-inline-start: var(--sl-spacing-x-small);
493
- }
494
-
495
- .button--has-prefix.button--medium {
496
- padding-inline-start: var(--sl-spacing-small);
497
- }
498
-
499
- .button--has-prefix.button--medium .button__label {
500
- padding-inline-start: var(--sl-spacing-small);
501
- }
502
-
503
- .button--has-prefix.button--large {
504
- padding-inline-start: var(--sl-spacing-small);
505
- }
506
-
507
- .button--has-prefix.button--large .button__label {
508
- padding-inline-start: var(--sl-spacing-small);
509
- }
510
-
511
- .button--has-suffix.button--small,
512
- .button--caret.button--small {
513
- padding-inline-end: var(--sl-spacing-x-small);
514
- }
515
-
516
- .button--has-suffix.button--small .button__label,
517
- .button--caret.button--small .button__label {
518
- padding-inline-end: var(--sl-spacing-x-small);
519
- }
520
-
521
- .button--has-suffix.button--medium,
522
- .button--caret.button--medium {
523
- padding-inline-end: var(--sl-spacing-small);
524
- }
525
-
526
- .button--has-suffix.button--medium .button__label,
527
- .button--caret.button--medium .button__label {
528
- padding-inline-end: var(--sl-spacing-small);
529
- }
530
-
531
- .button--has-suffix.button--large,
532
- .button--caret.button--large {
533
- padding-inline-end: var(--sl-spacing-small);
534
- }
535
-
536
- .button--has-suffix.button--large .button__label,
537
- .button--caret.button--large .button__label {
538
- padding-inline-end: var(--sl-spacing-small);
539
- }
540
-
541
- /*
542
- * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
543
- * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
544
- * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
545
- * buttons and we style them here instead.
546
- */
547
-
548
- :host([data-sl-button-group__button--first]:not([data-sl-button-group__button--last])) .button {
549
- border-start-end-radius: 0;
550
- border-end-end-radius: 0;
551
- }
552
-
553
- :host([data-sl-button-group__button--inner]) .button {
554
- border-radius: 0;
555
- }
556
-
557
- :host([data-sl-button-group__button--last]:not([data-sl-button-group__button--first])) .button {
558
- border-start-start-radius: 0;
559
- border-end-start-radius: 0;
560
- }
561
-
562
- /* All except the first */
563
- :host([data-sl-button-group__button]:not([data-sl-button-group__button--first])) {
564
- margin-inline-start: calc(-1 * var(--sl-input-border-width));
565
- }
566
-
567
- /* Add a visual separator between solid buttons */
568
- :host(
569
- [data-sl-button-group__button]:not(
570
- [data-sl-button-group__button--first],
571
- [data-sl-button-group__button--radio],
572
- [variant='default']
573
- ):not(:hover)
574
- )
575
- .button:after {
576
- content: '';
577
- position: absolute;
578
- top: 0;
579
- inset-inline-start: 0;
580
- bottom: 0;
581
- border-left: solid 1px rgb(128 128 128 / 33%);
582
- mix-blend-mode: multiply;
583
- }
584
-
585
- /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
586
- :host([data-sl-button-group__button--hover]) {
587
- z-index: 1;
588
- }
589
-
590
- /* Focus and checked are always on top */
591
- :host([data-sl-button-group__button--focus]),
592
- :host([data-sl-button-group__button][checked]) {
593
- z-index: 2;
594
- }
595
- `;
596
- export {
597
- r as b
598
- };