@synergy-design-system/mcp 1.38.4 → 1.39.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 (19) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-button/component.custom.styles.ts +53 -28
  4. package/metadata/packages/components/components/syn-menu-item/component.custom.styles.ts +27 -12
  5. package/metadata/packages/components/components/syn-optgroup/component.styles.ts +3 -1
  6. package/metadata/packages/components/components/syn-option/component.custom.styles.ts +11 -6
  7. package/metadata/packages/components/migration/migration-synergy-v3.md +0 -5
  8. package/metadata/packages/components/static/CHANGELOG.md +26 -1
  9. package/metadata/packages/tokens/CHANGELOG.md +9 -0
  10. package/metadata/packages/tokens/dark.css +42 -0
  11. package/metadata/packages/tokens/index.js +210 -0
  12. package/metadata/packages/tokens/light.css +42 -0
  13. package/metadata/packages/tokens/sick2018_dark.css +42 -0
  14. package/metadata/packages/tokens/sick2018_light.css +42 -0
  15. package/metadata/packages/tokens/sick2025_dark.css +77 -35
  16. package/metadata/packages/tokens/sick2025_light.css +79 -37
  17. package/metadata/static/components/syn-button/docs.md +371 -301
  18. package/metadata/static/migration/index.md +1 -0
  19. package/package.json +5 -5
package/metadata/static/components/syn-button/docs.md CHANGED
@@ -3,7 +3,7 @@
3
3
  Buttons represent actions that are available to the user.
4
4
 
5
5
  ```html
6
- <syn-button title="" variant="outline" size="medium"> Button </syn-button>
6
+ <syn-button title="" variant="outline" size="medium"> Default </syn-button>
7
7
  ```
8
8
 
9
9
  ---
@@ -13,14 +13,11 @@ Buttons represent actions that are available to the user.
13
13
  Use the variant attribute to set the button’s variant. Variants can be Filled, Outline and Text Buttons. Use the outline attribute to draw outlined buttons with transparent backgrounds. Use the text variant to create text buttons that share the same size as regular buttons but don’t have backgrounds or borders.
14
14
 
15
15
  ```html
16
- <syn-button variant="filled" title="" size="medium">Filled</syn-button>
17
- <syn-button variant="outline" title="" size="medium">Outline</syn-button>
18
- <syn-button variant="text" title="" size="medium">Text</syn-button>
19
- <style>
20
- syn-button {
21
- margin: 0.2rem;
22
- }
23
- </style>
16
+ <div style="display: flex; flex-direction: row; gap: var(--syn-spacing-large)">
17
+ <syn-button variant="filled" title="" size="medium">Filled</syn-button>
18
+ <syn-button variant="outline" title="" size="medium">Outline</syn-button>
19
+ <syn-button variant="text" title="" size="medium">Text</syn-button>
20
+ </div>
24
21
  ```
25
22
 
26
23
  ---
@@ -30,14 +27,18 @@ Use the variant attribute to set the button’s variant. Variants can be Filled,
30
27
  Use the size attribute to change a button’s size.
31
28
 
32
29
  ```html
33
- <syn-button size="small" title="" variant="outline">Small</syn-button>
34
- <syn-button size="medium" title="" variant="outline">Medium</syn-button>
35
- <syn-button size="large" title="" variant="outline">Large</syn-button>
36
- <style>
37
- syn-button {
38
- margin: 0.2rem;
39
- }
40
- </style>
30
+ <div
31
+ style="
32
+ align-items: anchor-center;
33
+ display: flex;
34
+ flex-direction: row;
35
+ gap: var(--syn-spacing-large);
36
+ "
37
+ >
38
+ <syn-button size="small" title="" variant="outline">Small</syn-button>
39
+ <syn-button size="medium" title="" variant="outline">Medium</syn-button>
40
+ <syn-button size="large" title="" variant="outline">Large</syn-button>
41
+ </div>
41
42
  ```
42
43
 
43
44
  ---
@@ -59,38 +60,39 @@ The focus event gives the user feedback that the Button has been focused by the
59
60
  It’s often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the target and download attributes.
60
61
 
61
62
  ```html
62
- <syn-button href="https://example.com/" title="" variant="outline" size="medium"
63
- >Link</syn-button
64
- >
65
- <syn-button
66
- href="https://example.com/"
67
- target="_blank"
68
- title=""
69
- variant="outline"
70
- size="medium"
71
- >New Window</syn-button
72
- >
73
- <syn-button
74
- href="/assets/images/wordmark.svg"
75
- download="synergy.svg"
76
- title=""
77
- variant="outline"
78
- size="medium"
79
- >Download</syn-button
80
- >
81
- <syn-button
82
- href="https://example.com/"
83
- disabled=""
84
- title=""
85
- variant="outline"
86
- size="medium"
87
- >Disabled</syn-button
88
- >
89
- <style>
90
- syn-button {
91
- margin: 0.2rem;
92
- }
93
- </style>
63
+ <div style="display: flex; flex-direction: row; gap: var(--syn-spacing-large)">
64
+ <syn-button
65
+ href="https://example.com/"
66
+ title=""
67
+ variant="outline"
68
+ size="medium"
69
+ >Link</syn-button
70
+ >
71
+ <syn-button
72
+ href="https://example.com/"
73
+ target="_blank"
74
+ title=""
75
+ variant="outline"
76
+ size="medium"
77
+ >New Window</syn-button
78
+ >
79
+ <syn-button
80
+ href="/assets/images/wordmark.svg"
81
+ download="synergy.svg"
82
+ title=""
83
+ variant="outline"
84
+ size="medium"
85
+ >Download</syn-button
86
+ >
87
+ <syn-button
88
+ href="https://example.com/"
89
+ disabled=""
90
+ title=""
91
+ variant="outline"
92
+ size="medium"
93
+ >Disabled</syn-button
94
+ >
95
+ </div>
94
96
  ```
95
97
 
96
98
  ---
@@ -100,23 +102,19 @@ It’s often helpful to have a button that works like a link. This is possible b
100
102
  As expected, buttons can be given a custom width by setting the width attribute. This is useful for making buttons span the full width of their container on smaller screens.
101
103
 
102
104
  ```html
103
- <syn-button
104
- size="small"
105
- style="width: 100%; margin-bottom: 1rem"
106
- title=""
107
- variant="outline"
108
- >Small</syn-button
109
- >
110
- <syn-button
111
- size="medium"
112
- style="width: 100%; margin-bottom: 1rem"
113
- title=""
114
- variant="outline"
115
- >Medium</syn-button
116
- >
117
- <syn-button size="large" style="width: 100%" title="" variant="outline"
118
- >Large</syn-button
105
+ <div
106
+ style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
119
107
  >
108
+ <syn-button size="small" style="width: 100%" title="" variant="outline"
109
+ >Small</syn-button
110
+ >
111
+ <syn-button size="medium" style="width: 100%" title="" variant="outline"
112
+ >Medium</syn-button
113
+ >
114
+ <syn-button size="large" style="width: 100%" title="" variant="outline"
115
+ >Large</syn-button
116
+ >
117
+ </div>
120
118
  ```
121
119
 
122
120
  ---
@@ -126,98 +124,116 @@ As expected, buttons can be given a custom width by setting the width attribute.
126
124
  Insert just a single icon to use the same button style.
127
125
 
128
126
  ```html
129
- <syn-button size="small" variant="filled" title="">
130
- <syn-icon
131
- name="settings"
132
- label="Settings"
133
- role="img"
134
- aria-label="Settings"
135
- library="default"
136
- ></syn-icon>
137
- </syn-button>
138
- <syn-button size="small" title="" variant="outline">
139
- <syn-icon
140
- name="settings"
141
- label="Settings"
142
- role="img"
143
- aria-label="Settings"
144
- library="default"
145
- ></syn-icon>
146
- </syn-button>
147
- <syn-button size="small" variant="text" title="">
148
- <syn-icon
149
- name="settings"
150
- label="Settings"
151
- role="img"
152
- aria-label="Settings"
153
- library="default"
154
- ></syn-icon>
155
- </syn-button>
156
-
157
- <br />
158
-
159
- <syn-button size="medium" variant="filled" title="">
160
- <syn-icon
161
- name="settings"
162
- label="Settings"
163
- role="img"
164
- aria-label="Settings"
165
- library="default"
166
- ></syn-icon>
167
- </syn-button>
168
- <syn-button size="medium" title="" variant="outline">
169
- <syn-icon
170
- name="settings"
171
- label="Settings"
172
- role="img"
173
- aria-label="Settings"
174
- library="default"
175
- ></syn-icon>
176
- </syn-button>
177
- <syn-button size="medium" variant="text" title="">
178
- <syn-icon
179
- name="settings"
180
- label="Settings"
181
- role="img"
182
- aria-label="Settings"
183
- library="default"
184
- ></syn-icon>
185
- </syn-button>
186
-
187
- <br />
188
-
189
- <syn-button size="large" variant="filled" title="">
190
- <syn-icon
191
- name="settings"
192
- label="Settings"
193
- role="img"
194
- aria-label="Settings"
195
- library="default"
196
- ></syn-icon>
197
- </syn-button>
198
- <syn-button size="large" title="" variant="outline">
199
- <syn-icon
200
- name="settings"
201
- label="Settings"
202
- role="img"
203
- aria-label="Settings"
204
- library="default"
205
- ></syn-icon>
206
- </syn-button>
207
- <syn-button size="large" variant="text" title="">
208
- <syn-icon
209
- name="settings"
210
- label="Settings"
211
- role="img"
212
- aria-label="Settings"
213
- library="default"
214
- ></syn-icon>
215
- </syn-button>
216
- <style>
217
- syn-button {
218
- margin: 10px 10px 0 0;
219
- }
220
- </style>
127
+ <div
128
+ style="
129
+ display: flex;
130
+ flex-direction: row;
131
+ gap: var(--syn-spacing-large);
132
+ margin-bottom: var(--syn-spacing-small);
133
+ "
134
+ >
135
+ <syn-button size="small" variant="filled" title="">
136
+ <syn-icon
137
+ name="settings"
138
+ label="Settings"
139
+ role="img"
140
+ aria-label="Settings"
141
+ library="default"
142
+ ></syn-icon>
143
+ </syn-button>
144
+ <syn-button size="small" title="" variant="outline">
145
+ <syn-icon
146
+ name="settings"
147
+ label="Settings"
148
+ role="img"
149
+ aria-label="Settings"
150
+ library="default"
151
+ ></syn-icon>
152
+ </syn-button>
153
+ <syn-button size="small" variant="text" title="">
154
+ <syn-icon
155
+ name="settings"
156
+ label="Settings"
157
+ role="img"
158
+ aria-label="Settings"
159
+ library="default"
160
+ ></syn-icon>
161
+ </syn-button>
162
+ </div>
163
+
164
+ <div
165
+ style="
166
+ display: flex;
167
+ flex-direction: row;
168
+ gap: var(--syn-spacing-large);
169
+ margin-bottom: var(--syn-spacing-small);
170
+ "
171
+ >
172
+ <syn-button size="medium" variant="filled" title="">
173
+ <syn-icon
174
+ name="settings"
175
+ label="Settings"
176
+ role="img"
177
+ aria-label="Settings"
178
+ library="default"
179
+ ></syn-icon>
180
+ </syn-button>
181
+ <syn-button size="medium" title="" variant="outline">
182
+ <syn-icon
183
+ name="settings"
184
+ label="Settings"
185
+ role="img"
186
+ aria-label="Settings"
187
+ library="default"
188
+ ></syn-icon>
189
+ </syn-button>
190
+ <syn-button size="medium" variant="text" title="">
191
+ <syn-icon
192
+ name="settings"
193
+ label="Settings"
194
+ role="img"
195
+ aria-label="Settings"
196
+ library="default"
197
+ ></syn-icon>
198
+ </syn-button>
199
+ </div>
200
+
201
+ <div
202
+ style="
203
+ display: flex;
204
+ flex-direction: row;
205
+ gap: var(--syn-spacing-large);
206
+ margin-bottom: var(--syn-spacing-small);
207
+ "
208
+ >
209
+ <syn-button size="large" variant="filled" title="">
210
+ <syn-icon
211
+ name="settings"
212
+ label="Settings"
213
+ role="img"
214
+ aria-label="Settings"
215
+ library="default"
216
+ ></syn-icon>
217
+ </syn-button>
218
+ <syn-button size="large" title="" variant="outline">
219
+ <syn-icon
220
+ name="settings"
221
+ label="Settings"
222
+ role="img"
223
+ aria-label="Settings"
224
+ library="default"
225
+ ></syn-icon>
226
+ </syn-button>
227
+ <syn-button size="large" variant="text" title="">
228
+ <syn-icon
229
+ name="settings"
230
+ label="Settings"
231
+ role="img"
232
+ aria-label="Settings"
233
+ library="default"
234
+ ></syn-icon>
235
+ </syn-button>
236
+ </div>
221
237
  ```
222
238
 
223
239
  ---
@@ -227,122 +243,129 @@ Insert just a single icon to use the same button style.
227
243
  Use the prefix and suffix slots to add icons.
228
244
 
229
245
  ```html
230
- <syn-button size="small" title="" variant="outline">
231
- <syn-icon
232
- slot="prefix"
233
- name="settings"
234
- aria-hidden="true"
235
- library="default"
236
- ></syn-icon>
237
- Settings
238
- </syn-button>
239
-
240
- <syn-button size="small" title="" variant="outline">
241
- <syn-icon
242
- slot="suffix"
243
- name="refresh"
244
- aria-hidden="true"
245
- library="default"
246
- ></syn-icon>
247
- Refresh
248
- </syn-button>
249
-
250
- <syn-button size="small" title="" variant="outline">
251
- <syn-icon
252
- slot="prefix"
253
- name="link"
254
- aria-hidden="true"
255
- library="default"
256
- ></syn-icon>
257
- <syn-icon
258
- slot="suffix"
259
- name="launch"
260
- aria-hidden="true"
261
- library="default"
262
- ></syn-icon>
263
- Open
264
- </syn-button>
265
-
266
- <br /><br />
267
-
268
- <syn-button title="" variant="outline" size="medium">
269
- <syn-icon
270
- slot="prefix"
271
- name="settings"
272
- aria-hidden="true"
273
- library="default"
274
- ></syn-icon>
275
- Settings
276
- </syn-button>
277
-
278
- <syn-button title="" variant="outline" size="medium">
279
- <syn-icon
280
- slot="suffix"
281
- name="refresh"
282
- aria-hidden="true"
283
- library="default"
284
- ></syn-icon>
285
- Refresh
286
- </syn-button>
287
-
288
- <syn-button title="" variant="outline" size="medium">
289
- <syn-icon
290
- slot="prefix"
291
- name="link"
292
- aria-hidden="true"
293
- library="default"
294
- ></syn-icon>
295
- <syn-icon
296
- slot="suffix"
297
- name="launch"
298
- aria-hidden="true"
299
- library="default"
300
- ></syn-icon>
301
- Open
302
- </syn-button>
303
-
304
- <br /><br />
305
-
306
- <syn-button size="large" title="" variant="outline">
307
- <syn-icon
308
- slot="prefix"
309
- name="settings"
310
- aria-hidden="true"
311
- library="default"
312
- ></syn-icon>
313
- Settings
314
- </syn-button>
315
-
316
- <syn-button size="large" title="" variant="outline">
317
- <syn-icon
318
- slot="suffix"
319
- name="refresh"
320
- aria-hidden="true"
321
- library="default"
322
- ></syn-icon>
323
- Refresh
324
- </syn-button>
325
-
326
- <syn-button size="large" title="" variant="outline">
327
- <syn-icon
328
- slot="prefix"
329
- name="link"
330
- aria-hidden="true"
331
- library="default"
332
- ></syn-icon>
333
- <syn-icon
334
- slot="suffix"
335
- name="launch"
336
- aria-hidden="true"
337
- library="default"
338
- ></syn-icon>
339
- Open
340
- </syn-button>
341
- <style>
342
- syn-button {
343
- margin: 0.2rem;
344
- }
345
- </style>
246
+ <div
247
+ style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
248
+ >
249
+ <div
250
+ style="display: flex; flex-direction: row; gap: var(--syn-spacing-large)"
251
+ >
252
+ <syn-button size="small" title="" variant="outline">
253
+ <syn-icon
254
+ slot="prefix"
255
+ name="settings"
256
+ aria-hidden="true"
257
+ library="default"
258
+ ></syn-icon>
259
+ Settings
260
+ </syn-button>
261
+
262
+ <syn-button size="small" title="" variant="outline">
263
+ <syn-icon
264
+ slot="suffix"
265
+ name="refresh"
266
+ aria-hidden="true"
267
+ library="default"
268
+ ></syn-icon>
269
+ Refresh
270
+ </syn-button>
271
+
272
+ <syn-button size="small" title="" variant="outline">
273
+ <syn-icon
274
+ slot="prefix"
275
+ name="link"
276
+ aria-hidden="true"
277
+ library="default"
278
+ ></syn-icon>
279
+ <syn-icon
280
+ slot="suffix"
281
+ name="launch"
282
+ aria-hidden="true"
283
+ library="default"
284
+ ></syn-icon>
285
+ Open
286
+ </syn-button>
287
+ </div>
288
+
289
+ <div
290
+ style="display: flex; flex-direction: row; gap: var(--syn-spacing-large)"
291
+ >
292
+ <syn-button title="" variant="outline" size="medium">
293
+ <syn-icon
294
+ slot="prefix"
295
+ name="settings"
296
+ aria-hidden="true"
297
+ library="default"
298
+ ></syn-icon>
299
+ Settings
300
+ </syn-button>
301
+
302
+ <syn-button title="" variant="outline" size="medium">
303
+ <syn-icon
304
+ slot="suffix"
305
+ name="refresh"
306
+ aria-hidden="true"
307
+ library="default"
308
+ ></syn-icon>
309
+ Refresh
310
+ </syn-button>
311
+
312
+ <syn-button title="" variant="outline" size="medium">
313
+ <syn-icon
314
+ slot="prefix"
315
+ name="link"
316
+ aria-hidden="true"
317
+ library="default"
318
+ ></syn-icon>
319
+ <syn-icon
320
+ slot="suffix"
321
+ name="launch"
322
+ aria-hidden="true"
323
+ library="default"
324
+ ></syn-icon>
325
+ Open
326
+ </syn-button>
327
+ </div>
328
+
329
+ <div
330
+ style="display: flex; flex-direction: row; gap: var(--syn-spacing-large)"
331
+ >
332
+ <syn-button size="large" title="" variant="outline">
333
+ <syn-icon
334
+ slot="prefix"
335
+ name="settings"
336
+ aria-hidden="true"
337
+ library="default"
338
+ ></syn-icon>
339
+ Settings
340
+ </syn-button>
341
+
342
+ <syn-button size="large" title="" variant="outline">
343
+ <syn-icon
344
+ slot="suffix"
345
+ name="refresh"
346
+ aria-hidden="true"
347
+ library="default"
348
+ ></syn-icon>
349
+ Refresh
350
+ </syn-button>
351
+
352
+ <syn-button size="large" title="" variant="outline">
353
+ <syn-icon
354
+ slot="prefix"
355
+ name="link"
356
+ aria-hidden="true"
357
+ library="default"
358
+ ></syn-icon>
359
+ <syn-icon
360
+ slot="suffix"
361
+ name="launch"
362
+ aria-hidden="true"
363
+ library="default"
364
+ ></syn-icon>
365
+ Open
366
+ </syn-button>
367
+ </div>
368
+ </div>
346
369
  ```
347
370
 
348
371
  ---
@@ -352,16 +375,24 @@ Use the prefix and suffix slots to add icons.
352
375
  Use the caret attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
353
376
 
354
377
  ```html
355
- <syn-button size="small" caret="" title="" variant="outline">Small</syn-button>
356
- <syn-button size="medium" caret="" title="" variant="outline"
357
- >Medium</syn-button
378
+ <div
379
+ style="
380
+ align-items: anchor-center;
381
+ display: flex;
382
+ flex-direction: row;
383
+ gap: var(--syn-spacing-large);
384
+ "
358
385
  >
359
- <syn-button size="large" caret="" title="" variant="outline">Large</syn-button>
360
- <style>
361
- syn-button {
362
- margin: 0.2rem;
363
- }
364
- </style>
386
+ <syn-button size="small" caret="" title="" variant="outline"
387
+ >Small</syn-button
388
+ >
389
+ <syn-button size="medium" caret="" title="" variant="outline"
390
+ >Medium</syn-button
391
+ >
392
+ <syn-button size="large" caret="" title="" variant="outline"
393
+ >Large</syn-button
394
+ >
395
+ </div>
365
396
  ```
366
397
 
367
398
  ---
@@ -371,18 +402,15 @@ Use the caret attribute to add a dropdown indicator when a button will trigger a
371
402
  Use the loading attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
372
403
 
373
404
  ```html
374
- <syn-button variant="filled" loading="" title="" size="medium"
375
- >Filled</syn-button
376
- >
377
- <syn-button variant="outline" loading="" title="" size="medium"
378
- >Outline</syn-button
379
- >
380
- <syn-button variant="text" loading="" title="" size="medium">Text</syn-button>
381
- <style>
382
- syn-button {
383
- margin: 0.2rem;
384
- }
385
- </style>
405
+ <div style="display: flex; flex-direction: row; gap: var(--syn-spacing-large)">
406
+ <syn-button variant="filled" loading="" title="" size="medium"
407
+ >Filled</syn-button
408
+ >
409
+ <syn-button variant="outline" loading="" title="" size="medium"
410
+ >Outline</syn-button
411
+ >
412
+ <syn-button variant="text" loading="" title="" size="medium">Text</syn-button>
413
+ </div>
386
414
  ```
387
415
 
388
416
  ---
@@ -392,11 +420,53 @@ Use the loading attribute to make a button busy. The width will remain the same
392
420
  Use the disabled attribute to disable a button.
393
421
 
394
422
  ```html
395
- <syn-button variant="filled" disabled="" title="" size="medium"
396
- >Filled</syn-button
397
- >
398
- <syn-button variant="outline" disabled="" title="" size="medium"
399
- >Outline</syn-button
400
- >
401
- <syn-button variant="text" disabled="" title="" size="medium">Text</syn-button>
423
+ <div style="display: flex; flex-direction: row; gap: var(--syn-spacing-large)">
424
+ <syn-button variant="filled" disabled="" title="" size="medium">
425
+ <syn-icon
426
+ name="wallpaper"
427
+ slot="prefix"
428
+ aria-hidden="true"
429
+ library="default"
430
+ ></syn-icon>
431
+ Button
432
+ <syn-icon
433
+ name="wallpaper"
434
+ slot="suffix"
435
+ aria-hidden="true"
436
+ library="default"
437
+ ></syn-icon>
438
+ </syn-button>
439
+
440
+ <syn-button variant="outline" disabled="" title="" size="medium">
441
+ <syn-icon
442
+ name="wallpaper"
443
+ slot="prefix"
444
+ aria-hidden="true"
445
+ library="default"
446
+ ></syn-icon>
447
+ Button
448
+ <syn-icon
449
+ name="wallpaper"
450
+ slot="suffix"
451
+ aria-hidden="true"
452
+ library="default"
453
+ ></syn-icon>
454
+ </syn-button>
455
+
456
+ <syn-button variant="text" disabled="" title="" size="medium">
457
+ <syn-icon
458
+ name="wallpaper"
459
+ slot="prefix"
460
+ aria-hidden="true"
461
+ library="default"
462
+ ></syn-icon>
463
+ Button
464
+ <syn-icon
465
+ name="wallpaper"
466
+ slot="suffix"
467
+ aria-hidden="true"
468
+ library="default"
469
+ ></syn-icon>
470
+ </syn-button>
471
+ </div>
402
472
  ```