@synergy-design-system/components 1.0.0-main.2 → 1.0.0-main.4

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 (146) hide show
  1. package/LICENSE +28 -0
  2. package/README.md +6 -0
  3. package/dist/chunks/chunk.2FIY3TX5.js +32 -0
  4. package/dist/chunks/chunk.2FIY3TX5.js.map +7 -0
  5. package/dist/chunks/chunk.5OIEI73E.js +45 -0
  6. package/dist/chunks/chunk.5OIEI73E.js.map +7 -0
  7. package/dist/chunks/chunk.5PZUAKCS.js +202 -0
  8. package/dist/chunks/chunk.5PZUAKCS.js.map +7 -0
  9. package/dist/chunks/chunk.6C4JXZZN.js +15 -0
  10. package/dist/chunks/chunk.6C4JXZZN.js.map +7 -0
  11. package/dist/chunks/chunk.7EGSHKGV.js +12 -0
  12. package/dist/chunks/chunk.7EGSHKGV.js.map +7 -0
  13. package/dist/chunks/chunk.A3SKDWCT.js +42 -0
  14. package/dist/chunks/chunk.A3SKDWCT.js.map +7 -0
  15. package/dist/chunks/chunk.BQPK6UKU.js +498 -0
  16. package/dist/chunks/chunk.BQPK6UKU.js.map +7 -0
  17. package/dist/chunks/chunk.BREU4ILT.js +28 -0
  18. package/dist/chunks/chunk.BREU4ILT.js.map +7 -0
  19. package/dist/chunks/chunk.C7624ITA.js +30 -0
  20. package/dist/chunks/chunk.C7624ITA.js.map +7 -0
  21. package/dist/chunks/chunk.DJOAQ4JU.js +36 -0
  22. package/dist/chunks/chunk.DJOAQ4JU.js.map +7 -0
  23. package/dist/chunks/chunk.DREO4ZTN.js +10 -0
  24. package/dist/chunks/chunk.DREO4ZTN.js.map +7 -0
  25. package/dist/chunks/chunk.EW2JZPYV.js +12 -0
  26. package/dist/chunks/chunk.EW2JZPYV.js.map +7 -0
  27. package/dist/chunks/chunk.FUYWF5Y2.js +278 -0
  28. package/dist/chunks/chunk.FUYWF5Y2.js.map +7 -0
  29. package/dist/chunks/chunk.ILONRPL4.js +10 -0
  30. package/dist/chunks/chunk.ILONRPL4.js.map +7 -0
  31. package/dist/chunks/chunk.N2I6HVX3.js +71 -0
  32. package/dist/chunks/chunk.N2I6HVX3.js.map +7 -0
  33. package/dist/chunks/chunk.O7USYXBT.js +23 -0
  34. package/dist/chunks/chunk.O7USYXBT.js.map +7 -0
  35. package/dist/chunks/chunk.P22LQI5J.js +376 -0
  36. package/dist/chunks/chunk.P22LQI5J.js.map +7 -0
  37. package/dist/chunks/chunk.Q77OTWF2.js +378 -0
  38. package/dist/chunks/chunk.Q77OTWF2.js.map +7 -0
  39. package/dist/chunks/chunk.R6VNLE6N.js +11 -0
  40. package/dist/chunks/chunk.R6VNLE6N.js.map +7 -0
  41. package/dist/chunks/chunk.SLLG4KJR.js +63 -0
  42. package/dist/chunks/chunk.SLLG4KJR.js.map +7 -0
  43. package/dist/chunks/chunk.U7ZJ22QM.js +128 -0
  44. package/dist/chunks/chunk.U7ZJ22QM.js.map +7 -0
  45. package/dist/chunks/chunk.WDCAHRYG.js +273 -0
  46. package/dist/chunks/chunk.WDCAHRYG.js.map +7 -0
  47. package/dist/chunks/chunk.WTCUSH7V.js +42 -0
  48. package/dist/chunks/chunk.WTCUSH7V.js.map +7 -0
  49. package/dist/chunks/chunk.XGXFE6IF.js +49 -0
  50. package/dist/chunks/chunk.XGXFE6IF.js.map +7 -0
  51. package/dist/components/button/button.component.d.ts +123 -0
  52. package/dist/components/button/button.component.js +24 -0
  53. package/dist/components/button/button.component.js.map +7 -0
  54. package/dist/components/button/button.custom.styles.d.ts +2 -0
  55. package/dist/components/button/button.custom.styles.js +8 -0
  56. package/dist/components/button/button.custom.styles.js.map +7 -0
  57. package/dist/components/button/button.d.ts +8 -0
  58. package/dist/components/button/button.js +25 -0
  59. package/dist/components/button/button.js.map +7 -0
  60. package/dist/components/button/button.styles.d.ts +2 -0
  61. package/dist/components/button/button.styles.js +10 -0
  62. package/dist/components/button/button.styles.js.map +7 -0
  63. package/dist/components/checkbox/checkbox.custom.styles.d.ts +2 -0
  64. package/dist/components/checkbox/checkbox.custom.styles.js +11 -0
  65. package/dist/components/checkbox/checkbox.custom.styles.js.map +7 -0
  66. package/dist/components/icon/icon.component.d.ts +42 -0
  67. package/dist/components/icon/icon.component.js +15 -0
  68. package/dist/components/icon/icon.component.js.map +7 -0
  69. package/dist/components/icon/icon.d.ts +8 -0
  70. package/dist/components/icon/icon.js +19 -0
  71. package/dist/components/icon/icon.js.map +7 -0
  72. package/dist/components/icon/icon.styles.d.ts +2 -0
  73. package/dist/components/icon/icon.styles.js +9 -0
  74. package/dist/components/icon/icon.styles.js.map +7 -0
  75. package/dist/components/icon/library.d.ts +19 -0
  76. package/dist/components/icon/library.default.d.ts +3 -0
  77. package/dist/components/icon/library.default.js +9 -0
  78. package/dist/components/icon/library.default.js.map +7 -0
  79. package/dist/components/icon/library.js +19 -0
  80. package/dist/components/icon/library.js.map +7 -0
  81. package/dist/components/icon/library.system.d.ts +3 -0
  82. package/dist/components/icon/library.system.js +8 -0
  83. package/dist/components/icon/library.system.js.map +7 -0
  84. package/dist/components/input/input.component.d.ts +175 -0
  85. package/dist/components/input/input.component.js +22 -0
  86. package/dist/components/input/input.component.js.map +7 -0
  87. package/dist/components/input/input.custom.styles.d.ts +2 -0
  88. package/dist/components/input/input.custom.styles.js +8 -0
  89. package/dist/components/input/input.custom.styles.js.map +7 -0
  90. package/dist/components/input/input.d.ts +8 -0
  91. package/dist/components/input/input.js +23 -0
  92. package/dist/components/input/input.js.map +7 -0
  93. package/dist/components/input/input.styles.d.ts +2 -0
  94. package/dist/components/input/input.styles.js +10 -0
  95. package/dist/components/input/input.styles.js.map +7 -0
  96. package/dist/components/spinner/spinner.component.d.ts +20 -0
  97. package/dist/components/spinner/spinner.component.js +13 -0
  98. package/dist/components/spinner/spinner.component.js.map +7 -0
  99. package/dist/components/spinner/spinner.styles.d.ts +2 -0
  100. package/dist/components/spinner/spinner.styles.js +9 -0
  101. package/dist/components/spinner/spinner.styles.js.map +7 -0
  102. package/dist/components/textarea/textarea.custom.styles.d.ts +2 -0
  103. package/dist/components/textarea/textarea.custom.styles.js +11 -0
  104. package/dist/components/textarea/textarea.custom.styles.js.map +7 -0
  105. package/dist/custom-elements.json +1870 -0
  106. package/dist/events/events.d.ts +8 -0
  107. package/dist/events/syn-blur.d.ts +6 -0
  108. package/dist/events/syn-change.d.ts +6 -0
  109. package/dist/events/syn-clear.d.ts +6 -0
  110. package/dist/events/syn-error.d.ts +8 -0
  111. package/dist/events/syn-focus.d.ts +6 -0
  112. package/dist/events/syn-input.d.ts +6 -0
  113. package/dist/events/syn-invalid.d.ts +6 -0
  114. package/dist/events/syn-load.d.ts +6 -0
  115. package/dist/internal/default-value.d.ts +2 -0
  116. package/dist/internal/form.d.ts +73 -0
  117. package/dist/internal/slot.d.ts +23 -0
  118. package/dist/internal/synergy-element.d.ts +47 -0
  119. package/dist/internal/test/form-control-base-tests.d.ts +7 -0
  120. package/dist/internal/watch.d.ts +26 -0
  121. package/dist/styles/component.styles.d.ts +2 -0
  122. package/dist/styles/form-control.styles.d.ts +2 -0
  123. package/dist/synergy-autoloader.d.ts +4 -0
  124. package/dist/synergy-autoloader.js +41 -0
  125. package/dist/synergy-autoloader.js.map +7 -0
  126. package/dist/synergy.d.ts +4 -0
  127. package/dist/synergy.js +38 -0
  128. package/dist/synergy.js.map +7 -0
  129. package/dist/translations/de.d.ts +3 -0
  130. package/dist/translations/de.js +46 -0
  131. package/dist/translations/de.js.map +7 -0
  132. package/dist/translations/en.d.ts +3 -0
  133. package/dist/translations/en.js +8 -0
  134. package/dist/translations/en.js.map +7 -0
  135. package/dist/utilities/base-path.d.ts +18 -0
  136. package/dist/utilities/base-path.js +10 -0
  137. package/dist/utilities/base-path.js.map +7 -0
  138. package/dist/utilities/form.d.ts +11 -0
  139. package/dist/utilities/form.js +11 -0
  140. package/dist/utilities/form.js.map +7 -0
  141. package/dist/utilities/localize.d.ts +33 -0
  142. package/dist/utilities/localize.js +11 -0
  143. package/dist/utilities/localize.js.map +7 -0
  144. package/dist/vscode.html-custom-data.json +371 -0
  145. package/dist/web-types.json +738 -0
  146. package/package.json +39 -25
@@ -0,0 +1,376 @@
1
+ import {
2
+ button_custom_styles_default
3
+ } from "./chunk.DREO4ZTN.js";
4
+ import {
5
+ component_styles_default
6
+ } from "./chunk.O7USYXBT.js";
7
+
8
+ // src/components/button/button.styles.ts
9
+ import { css } from "lit";
10
+ var button_styles_default = css`
11
+ /* stylelint-disable */
12
+ ${component_styles_default}
13
+
14
+ :host {
15
+ display: inline-block;
16
+ position: relative;
17
+ width: auto;
18
+ cursor: pointer;
19
+ }
20
+
21
+ .button {
22
+ display: inline-flex;
23
+ align-items: stretch;
24
+ justify-content: center;
25
+ width: 100%;
26
+ border-style: solid;
27
+ border-width: var(--syn-input-border-width);
28
+ font-family: var(--syn-input-font-family);
29
+ font-weight: var(--syn-font-weight-semibold);
30
+ text-decoration: none;
31
+ user-select: none;
32
+ -webkit-user-select: none;
33
+ white-space: nowrap;
34
+ vertical-align: middle;
35
+ padding: 0;
36
+ transition:
37
+ var(--syn-transition-x-fast) background-color,
38
+ var(--syn-transition-x-fast) color,
39
+ var(--syn-transition-x-fast) border,
40
+ var(--syn-transition-x-fast) box-shadow;
41
+ cursor: inherit;
42
+ }
43
+
44
+ .button::-moz-focus-inner {
45
+ border: 0;
46
+ }
47
+
48
+ .button:focus {
49
+ outline: none;
50
+ }
51
+
52
+ .button:focus-visible {
53
+ outline: var(--syn-focus-ring);
54
+ outline-offset: var(--syn-focus-ring-offset);
55
+ }
56
+
57
+ .button--disabled {
58
+ opacity: 0.5;
59
+ cursor: not-allowed;
60
+ }
61
+
62
+ /* When disabled, prevent mouse events from bubbling up from children */
63
+ .button--disabled * {
64
+ pointer-events: none;
65
+ }
66
+
67
+ .button__prefix,
68
+ .button__suffix {
69
+ flex: 0 0 auto;
70
+ display: flex;
71
+ align-items: center;
72
+ pointer-events: none;
73
+ }
74
+
75
+ .button__label {
76
+ display: inline-block;
77
+ }
78
+
79
+ .button__label::slotted(syn-icon) {
80
+ vertical-align: -2px;
81
+ }
82
+
83
+ /*
84
+ * Standard buttons
85
+ */
86
+
87
+ /* Primary */
88
+ .button--default.button--primary {
89
+ background-color: var(--syn-color-primary-600);
90
+ border-color: var(--syn-color-primary-600);
91
+ color: var(--syn-color-neutral-0);
92
+ }
93
+
94
+ .button--default.button--primary:hover:not(.button--disabled) {
95
+ background-color: var(--syn-color-primary-500);
96
+ border-color: var(--syn-color-primary-500);
97
+ color: var(--syn-color-neutral-0);
98
+ }
99
+
100
+ .button--default.button--primary:active:not(.button--disabled) {
101
+ background-color: var(--syn-color-primary-600);
102
+ border-color: var(--syn-color-primary-600);
103
+ color: var(--syn-color-neutral-0);
104
+ }
105
+
106
+ /*
107
+ * Outline buttons
108
+ */
109
+
110
+ .button--outline {
111
+ background: none;
112
+ border: solid 1px;
113
+ }
114
+
115
+ /* Primary */
116
+ .button--outline.button--primary {
117
+ border-color: var(--syn-color-primary-600);
118
+ color: var(--syn-color-primary-600);
119
+ }
120
+
121
+ .button--outline.button--primary:hover:not(.button--disabled),
122
+ .button--outline.button--primary.button--checked:not(.button--disabled) {
123
+ background-color: var(--syn-color-primary-600);
124
+ color: var(--syn-color-neutral-0);
125
+ }
126
+
127
+ .button--outline.button--primary:active:not(.button--disabled) {
128
+ border-color: var(--syn-color-primary-700);
129
+ background-color: var(--syn-color-primary-700);
130
+ color: var(--syn-color-neutral-0);
131
+ }
132
+
133
+ /*
134
+ * Text buttons
135
+ */
136
+
137
+ .button--text {
138
+ background-color: transparent;
139
+ border-color: transparent;
140
+ color: var(--syn-color-primary-600);
141
+ }
142
+
143
+ .button--text:hover:not(.button--disabled) {
144
+ background-color: transparent;
145
+ border-color: transparent;
146
+ color: var(--syn-color-primary-500);
147
+ }
148
+
149
+ .button--text:focus-visible:not(.button--disabled) {
150
+ background-color: transparent;
151
+ border-color: transparent;
152
+ color: var(--syn-color-primary-500);
153
+ }
154
+
155
+ .button--text:active:not(.button--disabled) {
156
+ background-color: transparent;
157
+ border-color: transparent;
158
+ color: var(--syn-color-primary-700);
159
+ }
160
+
161
+ /*
162
+ * Size modifiers
163
+ */
164
+
165
+ .button--small {
166
+ height: auto;
167
+ min-height: var(--syn-input-height-small);
168
+ font-size: var(--syn-button-font-size-small);
169
+ line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);
170
+ border-radius: var(--syn-input-border-radius-small);
171
+ }
172
+
173
+ .button--medium {
174
+ height: auto;
175
+ min-height: var(--syn-input-height-medium);
176
+ font-size: var(--syn-button-font-size-medium);
177
+ line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);
178
+ border-radius: var(--syn-input-border-radius-medium);
179
+ }
180
+
181
+ .button--large {
182
+ height: auto;
183
+ min-height: var(--syn-input-height-large);
184
+ font-size: var(--syn-button-font-size-large);
185
+ line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);
186
+ border-radius: var(--syn-input-border-radius-large);
187
+ }
188
+
189
+ /*
190
+ * Caret modifier
191
+ */
192
+
193
+ .button--caret .button__suffix {
194
+ display: none;
195
+ }
196
+
197
+ .button--caret .button__caret {
198
+ height: auto;
199
+ }
200
+
201
+ /*
202
+ * Loading modifier
203
+ */
204
+
205
+ .button--loading {
206
+ position: relative;
207
+ cursor: wait;
208
+ }
209
+
210
+ .button--loading .button__prefix,
211
+ .button--loading .button__label,
212
+ .button--loading .button__suffix,
213
+ .button--loading .button__caret {
214
+ visibility: hidden;
215
+ }
216
+
217
+ .button--loading syn-spinner {
218
+ --indicator-color: currentColor;
219
+ position: absolute;
220
+ font-size: 1em;
221
+ height: 1em;
222
+ width: 1em;
223
+ top: calc(50% - 0.5em);
224
+ left: calc(50% - 0.5em);
225
+ }
226
+
227
+ /*
228
+ * Badges
229
+ */
230
+
231
+ .button ::slotted(syn-badge) {
232
+ position: absolute;
233
+ top: 0;
234
+ right: 0;
235
+ translate: 50% -50%;
236
+ pointer-events: none;
237
+ }
238
+
239
+ .button--rtl ::slotted(syn-badge) {
240
+ right: auto;
241
+ left: 0;
242
+ translate: -50% -50%;
243
+ }
244
+
245
+ /*
246
+ * Button spacing
247
+ */
248
+
249
+ .button--has-label.button--small .button__label {
250
+ padding: 0 var(--syn-spacing-small);
251
+ }
252
+
253
+ .button--has-label.button--medium .button__label {
254
+ padding: 0 var(--syn-spacing-medium);
255
+ }
256
+
257
+ .button--has-label.button--large .button__label {
258
+ padding: 0 var(--syn-spacing-large);
259
+ }
260
+
261
+ .button--has-prefix.button--small {
262
+ padding-inline-start: var(--syn-spacing-x-small);
263
+ }
264
+
265
+ .button--has-prefix.button--small .button__label {
266
+ padding-inline-start: var(--syn-spacing-x-small);
267
+ }
268
+
269
+ .button--has-prefix.button--medium {
270
+ padding-inline-start: var(--syn-spacing-small);
271
+ }
272
+
273
+ .button--has-prefix.button--medium .button__label {
274
+ padding-inline-start: var(--syn-spacing-small);
275
+ }
276
+
277
+ .button--has-prefix.button--large {
278
+ padding-inline-start: var(--syn-spacing-small);
279
+ }
280
+
281
+ .button--has-prefix.button--large .button__label {
282
+ padding-inline-start: var(--syn-spacing-small);
283
+ }
284
+
285
+ .button--has-suffix.button--small,
286
+ .button--caret.button--small {
287
+ padding-inline-end: var(--syn-spacing-x-small);
288
+ }
289
+
290
+ .button--has-suffix.button--small .button__label,
291
+ .button--caret.button--small .button__label {
292
+ padding-inline-end: var(--syn-spacing-x-small);
293
+ }
294
+
295
+ .button--has-suffix.button--medium,
296
+ .button--caret.button--medium {
297
+ padding-inline-end: var(--syn-spacing-small);
298
+ }
299
+
300
+ .button--has-suffix.button--medium .button__label,
301
+ .button--caret.button--medium .button__label {
302
+ padding-inline-end: var(--syn-spacing-small);
303
+ }
304
+
305
+ .button--has-suffix.button--large,
306
+ .button--caret.button--large {
307
+ padding-inline-end: var(--syn-spacing-small);
308
+ }
309
+
310
+ .button--has-suffix.button--large .button__label,
311
+ .button--caret.button--large .button__label {
312
+ padding-inline-end: var(--syn-spacing-small);
313
+ }
314
+
315
+ /*
316
+ * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
317
+ * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
318
+ * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
319
+ * buttons and we style them here instead.
320
+ */
321
+
322
+ :host(.syn-button-group__button--first:not(.syn-button-group__button--last)) .button {
323
+ border-start-end-radius: 0;
324
+ border-end-end-radius: 0;
325
+ }
326
+
327
+ :host(.syn-button-group__button--inner) .button {
328
+ border-radius: 0;
329
+ }
330
+
331
+ :host(.syn-button-group__button--last:not(.syn-button-group__button--first)) .button {
332
+ border-start-start-radius: 0;
333
+ border-end-start-radius: 0;
334
+ }
335
+
336
+ /* All except the first */
337
+ :host(.syn-button-group__button:not(.syn-button-group__button--first)) {
338
+ margin-inline-start: calc(-1 * var(--syn-input-border-width));
339
+ }
340
+
341
+ /* Add a visual separator between solid buttons */
342
+ :host(
343
+ .syn-button-group__button:not(
344
+ .syn-button-group__button--first,
345
+ .syn-button-group__button--radio,
346
+ [variant='default']
347
+ ):not(:hover)
348
+ )
349
+ .button:after {
350
+ content: '';
351
+ position: absolute;
352
+ top: 0;
353
+ inset-inline-start: 0;
354
+ bottom: 0;
355
+ border-left: solid 1px rgb(128 128 128 / 33%);
356
+ mix-blend-mode: multiply;
357
+ }
358
+
359
+ /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
360
+ :host(.syn-button-group__button--hover) {
361
+ z-index: 1;
362
+ }
363
+
364
+ /* Focus and checked are always on top */
365
+ :host(.syn-button-group__button--focus),
366
+ :host(.syn-button-group__button[checked]) {
367
+ z-index: 2;
368
+ }
369
+
370
+ ${button_custom_styles_default}
371
+ `;
372
+
373
+ export {
374
+ button_styles_default
375
+ };
376
+ //# sourceMappingURL=chunk.P22LQI5J.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/button/button.styles.ts"],
4
+ "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\nimport customStyles from './button.custom.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n ${componentStyles}\n\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--syn-input-border-width);\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition:\n var(--syn-transition-x-fast) background-color,\n var(--syn-transition-x-fast) color,\n var(--syn-transition-x-fast) border,\n var(--syn-transition-x-fast) box-shadow;\n cursor: inherit;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* When disabled, prevent mouse events from bubbling up from children */\n .button--disabled * {\n pointer-events: none;\n }\n\n .button__prefix,\n .button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n pointer-events: none;\n }\n\n .button__label {\n display: inline-block;\n }\n\n .button__label::slotted(syn-icon) {\n vertical-align: -2px;\n }\n\n /*\n * Standard buttons\n */\n\n /* Primary */\n .button--default.button--primary {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n color: var(--syn-color-neutral-0);\n }\n\n .button--default.button--primary:hover:not(.button--disabled) {\n background-color: var(--syn-color-primary-500);\n border-color: var(--syn-color-primary-500);\n color: var(--syn-color-neutral-0);\n }\n\n .button--default.button--primary:active:not(.button--disabled) {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n color: var(--syn-color-neutral-0);\n }\n\n /*\n * Outline buttons\n */\n\n .button--outline {\n background: none;\n border: solid 1px;\n }\n\n /* Primary */\n .button--outline.button--primary {\n border-color: var(--syn-color-primary-600);\n color: var(--syn-color-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n background-color: var(--syn-color-primary-600);\n color: var(--syn-color-neutral-0);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--syn-color-primary-700);\n background-color: var(--syn-color-primary-700);\n color: var(--syn-color-neutral-0);\n }\n\n /*\n * Text buttons\n */\n\n .button--text {\n background-color: transparent;\n border-color: transparent;\n color: var(--syn-color-primary-600);\n }\n\n .button--text:hover:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n color: var(--syn-color-primary-500);\n }\n\n .button--text:focus-visible:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n color: var(--syn-color-primary-500);\n }\n\n .button--text:active:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n color: var(--syn-color-primary-700);\n }\n\n /*\n * Size modifiers\n */\n\n .button--small {\n height: auto;\n min-height: var(--syn-input-height-small);\n font-size: var(--syn-button-font-size-small);\n line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n border-radius: var(--syn-input-border-radius-small);\n }\n\n .button--medium {\n height: auto;\n min-height: var(--syn-input-height-medium);\n font-size: var(--syn-button-font-size-medium);\n line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n border-radius: var(--syn-input-border-radius-medium);\n }\n\n .button--large {\n height: auto;\n min-height: var(--syn-input-height-large);\n font-size: var(--syn-button-font-size-large);\n line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n border-radius: var(--syn-input-border-radius-large);\n }\n\n /*\n * Caret modifier\n */\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /*\n * Loading modifier\n */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading syn-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n\n /*\n * Badges\n */\n\n .button ::slotted(syn-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n .button--rtl ::slotted(syn-badge) {\n right: auto;\n left: 0;\n translate: -50% -50%;\n }\n\n /*\n * Button spacing\n */\n\n .button--has-label.button--small .button__label {\n padding: 0 var(--syn-spacing-small);\n }\n\n .button--has-label.button--medium .button__label {\n padding: 0 var(--syn-spacing-medium);\n }\n\n .button--has-label.button--large .button__label {\n padding: 0 var(--syn-spacing-large);\n }\n\n .button--has-prefix.button--small {\n padding-inline-start: var(--syn-spacing-x-small);\n }\n\n .button--has-prefix.button--small .button__label {\n padding-inline-start: var(--syn-spacing-x-small);\n }\n\n .button--has-prefix.button--medium {\n padding-inline-start: var(--syn-spacing-small);\n }\n\n .button--has-prefix.button--medium .button__label {\n padding-inline-start: var(--syn-spacing-small);\n }\n\n .button--has-prefix.button--large {\n padding-inline-start: var(--syn-spacing-small);\n }\n\n .button--has-prefix.button--large .button__label {\n padding-inline-start: var(--syn-spacing-small);\n }\n\n .button--has-suffix.button--small,\n .button--caret.button--small {\n padding-inline-end: var(--syn-spacing-x-small);\n }\n\n .button--has-suffix.button--small .button__label,\n .button--caret.button--small .button__label {\n padding-inline-end: var(--syn-spacing-x-small);\n }\n\n .button--has-suffix.button--medium,\n .button--caret.button--medium {\n padding-inline-end: var(--syn-spacing-small);\n }\n\n .button--has-suffix.button--medium .button__label,\n .button--caret.button--medium .button__label {\n padding-inline-end: var(--syn-spacing-small);\n }\n\n .button--has-suffix.button--large,\n .button--caret.button--large {\n padding-inline-end: var(--syn-spacing-small);\n }\n\n .button--has-suffix.button--large .button__label,\n .button--caret.button--large .button__label {\n padding-inline-end: var(--syn-spacing-small);\n }\n\n /*\n * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).\n * This means buttons aren't always direct descendants of the button group, thus we can't target them with the\n * ::slotted selector. To work around this, the button group component does some magic to add these special classes to\n * buttons and we style them here instead.\n */\n\n :host(.syn-button-group__button--first:not(.syn-button-group__button--last)) .button {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n :host(.syn-button-group__button--inner) .button {\n border-radius: 0;\n }\n\n :host(.syn-button-group__button--last:not(.syn-button-group__button--first)) .button {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n /* All except the first */\n :host(.syn-button-group__button:not(.syn-button-group__button--first)) {\n margin-inline-start: calc(-1 * var(--syn-input-border-width));\n }\n\n /* Add a visual separator between solid buttons */\n :host(\n .syn-button-group__button:not(\n .syn-button-group__button--first,\n .syn-button-group__button--radio,\n [variant='default']\n ):not(:hover)\n )\n .button:after {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n bottom: 0;\n border-left: solid 1px rgb(128 128 128 / 33%);\n mix-blend-mode: multiply;\n }\n\n /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */\n :host(.syn-button-group__button--hover) {\n z-index: 1;\n }\n\n /* Focus and checked are always on top */\n :host(.syn-button-group__button--focus),\n :host(.syn-button-group__button[checked]) {\n z-index: 2;\n }\n\n ${customStyles}\n`;\n\n"],
5
+ "mappings": ";;;;;;;;AAMA,SAAS,WAAW;AAIpB,IAAO,wBAAQ;AAAA;AAAA,IAEX,wBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsWf,4BAAY;AAAA;",
6
+ "names": []
7
+ }