@synergy-design-system/mcp 2.0.0 → 2.1.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.
- package/CHANGELOG.md +12 -0
- package/metadata/checksum.txt +1 -1
- package/metadata/packages/components/components/syn-button/component.custom.styles.ts +14 -0
- package/metadata/packages/components/components/syn-button-group/component.angular.ts +24 -0
- package/metadata/packages/components/components/syn-button-group/component.custom.styles.ts +5 -0
- package/metadata/packages/components/components/syn-button-group/component.ts +77 -2
- package/metadata/packages/components/components/syn-button-group/component.vue +12 -0
- package/metadata/packages/components/static/CHANGELOG.md +17 -0
- package/metadata/packages/styles/index.css +1 -1
- package/metadata/packages/styles/link-list.css +1 -1
- package/metadata/packages/styles/link.css +1 -1
- package/metadata/packages/styles/tables.css +1 -1
- package/metadata/packages/styles/typography.css +1 -1
- package/metadata/packages/tokens/CHANGELOG.md +12 -0
- package/metadata/packages/tokens/dark.css +1 -1
- package/metadata/packages/tokens/index.js +1 -1
- package/metadata/packages/tokens/light.css +1 -1
- package/metadata/packages/tokens/sick2018_dark.css +1 -1
- package/metadata/packages/tokens/sick2018_light.css +1 -1
- package/metadata/packages/tokens/sick2025_dark.css +1 -1
- package/metadata/packages/tokens/sick2025_light.css +1 -1
- package/metadata/static/components/syn-button-group/docs.md +259 -0
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1141](https://github.com/synergy-design-system/synergy-design-system/pull/1141) [`96dff2e`](https://github.com/synergy-design-system/synergy-design-system/commit/96dff2ebb47cee901f72773664ee864db5653219) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
|
|
8
|
+
|
|
9
|
+
feat: ✨ `<syn-button-group>` (#392)
|
|
10
|
+
|
|
11
|
+
We added a new component `<syn-button-group>` that you can use to group a list of buttons.
|
|
12
|
+
|
|
13
|
+
It will automatically apply its `size` and `variant` properties to all nested buttons.
|
|
14
|
+
|
|
3
15
|
## 2.0.0
|
|
4
16
|
|
|
5
17
|
### Major Changes
|
package/metadata/checksum.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
8e86dcd5f0529fc5dd6dbe8e13393140
|
|
@@ -228,4 +228,18 @@ export default css`
|
|
|
228
228
|
.button--caret.button--large .button__caret{
|
|
229
229
|
font-size: var(--syn-font-size-2x-large);
|
|
230
230
|
}
|
|
231
|
+
|
|
232
|
+
/* #392: Button Groups */
|
|
233
|
+
:host([data-syn-button-group__button--inner]) .button--filled.button {
|
|
234
|
+
border-left-color: var(--syn-panel-background-color);
|
|
235
|
+
border-right-color: var(--syn-panel-background-color);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
:host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button--filled.button {
|
|
239
|
+
border-right-color: var(--syn-panel-background-color);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
:host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button--filled.button {
|
|
243
|
+
border-left-color: var(--syn-panel-background-color);
|
|
244
|
+
}
|
|
231
245
|
`;
|
|
@@ -52,4 +52,28 @@ devices when interacting with the control and is strongly recommended.
|
|
|
52
52
|
get label(): SynButtonGroup['label'] {
|
|
53
53
|
return this.nativeElement.label;
|
|
54
54
|
}
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* The button-groups size.
|
|
58
|
+
* This affects all buttons within the group.
|
|
59
|
+
*/
|
|
60
|
+
@Input()
|
|
61
|
+
set size(v: SynButtonGroup['size']) {
|
|
62
|
+
this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
|
|
63
|
+
}
|
|
64
|
+
get size(): SynButtonGroup['size'] {
|
|
65
|
+
return this.nativeElement.size;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* The button-group's theme variant.
|
|
70
|
+
* This affects all buttons within the group.
|
|
71
|
+
*/
|
|
72
|
+
@Input()
|
|
73
|
+
set variant(v: SynButtonGroup['variant']) {
|
|
74
|
+
this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
|
|
75
|
+
}
|
|
76
|
+
get variant(): SynButtonGroup['variant'] {
|
|
77
|
+
return this.nativeElement.variant;
|
|
78
|
+
}
|
|
55
79
|
}
|
|
@@ -11,7 +11,11 @@ import { property, query, state } from 'lit/decorators.js';
|
|
|
11
11
|
import componentStyles from '../../styles/component.styles.js';
|
|
12
12
|
import SynergyElement from '../../internal/synergy-element.js';
|
|
13
13
|
import styles from './button-group.styles.js';
|
|
14
|
+
import customStyles from './button-group.custom.styles.js';
|
|
14
15
|
import type { CSSResultGroup } from 'lit';
|
|
16
|
+
import type SynButton from '../button/button.component.js';
|
|
17
|
+
import type SynRadioButton from '../radio-button/radio-button.component.js';
|
|
18
|
+
import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
|
|
15
19
|
|
|
16
20
|
/**
|
|
17
21
|
* @summary Button groups can be used to group related buttons into sections.
|
|
@@ -23,8 +27,9 @@ import type { CSSResultGroup } from 'lit';
|
|
|
23
27
|
*
|
|
24
28
|
* @csspart base - The component's base wrapper.
|
|
25
29
|
*/
|
|
30
|
+
@enableDefaultSettings('SynButtonGroup')
|
|
26
31
|
export default class SynButtonGroup extends SynergyElement {
|
|
27
|
-
static styles: CSSResultGroup = [componentStyles, styles];
|
|
32
|
+
static styles: CSSResultGroup = [componentStyles, styles, customStyles];
|
|
28
33
|
|
|
29
34
|
@query('slot') defaultSlot: HTMLSlotElement;
|
|
30
35
|
|
|
@@ -36,6 +41,14 @@ export default class SynButtonGroup extends SynergyElement {
|
|
|
36
41
|
*/
|
|
37
42
|
@property() label = '';
|
|
38
43
|
|
|
44
|
+
/** The button-groups size. This affects all buttons within the group. */
|
|
45
|
+
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
|
46
|
+
|
|
47
|
+
/** The button-group's theme variant. This affects all buttons within the group. */
|
|
48
|
+
@property({ reflect: true }) variant: 'filled' | 'outline' = 'outline';
|
|
49
|
+
|
|
50
|
+
private mutationObserver: MutationObserver;
|
|
51
|
+
|
|
39
52
|
private handleFocus(event: Event) {
|
|
40
53
|
const button = findButton(event.target as HTMLElement);
|
|
41
54
|
button?.toggleAttribute('data-syn-button-group__button--focus', true);
|
|
@@ -61,9 +74,15 @@ export default class SynButtonGroup extends SynergyElement {
|
|
|
61
74
|
|
|
62
75
|
slottedElements.forEach(el => {
|
|
63
76
|
const index = slottedElements.indexOf(el);
|
|
64
|
-
const button = findButton(el);
|
|
77
|
+
const button = findButton(el) as SynButton | SynRadioButton;
|
|
65
78
|
|
|
66
79
|
if (button) {
|
|
80
|
+
button.size = this.size;
|
|
81
|
+
|
|
82
|
+
if (button.tagName.toLowerCase() === 'syn-button') {
|
|
83
|
+
(button as SynButton).variant = this.variant;
|
|
84
|
+
}
|
|
85
|
+
|
|
67
86
|
button.toggleAttribute('data-syn-button-group__button', true);
|
|
68
87
|
button.toggleAttribute('data-syn-button-group__button--first', index === 0);
|
|
69
88
|
button.toggleAttribute('data-syn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
|
|
@@ -76,6 +95,62 @@ export default class SynButtonGroup extends SynergyElement {
|
|
|
76
95
|
});
|
|
77
96
|
}
|
|
78
97
|
|
|
98
|
+
firstUpdated() {
|
|
99
|
+
const startObserving = () => {
|
|
100
|
+
this.mutationObserver.observe(this, {
|
|
101
|
+
subtree: true,
|
|
102
|
+
attributes: true,
|
|
103
|
+
attributeFilter: ['size', 'variant'],
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
this.mutationObserver = new MutationObserver((entries) => {
|
|
108
|
+
// Temporarily disconnect to prevent infinite loop
|
|
109
|
+
this.mutationObserver.disconnect();
|
|
110
|
+
|
|
111
|
+
// Check if the button-group itself changed or its children
|
|
112
|
+
const buttonGroupChanged = entries.some(entry => entry.target === this);
|
|
113
|
+
const childrenChanged = entries.some(entry => entry.target !== this);
|
|
114
|
+
|
|
115
|
+
if (childrenChanged) {
|
|
116
|
+
// Handle child button changes (existing logic)
|
|
117
|
+
entries
|
|
118
|
+
.filter(entry => entry.target !== this)
|
|
119
|
+
.forEach(entry => {
|
|
120
|
+
const target = entry.target as HTMLElement;
|
|
121
|
+
const button = findButton(target) as SynButton | SynRadioButton;
|
|
122
|
+
|
|
123
|
+
if (button) {
|
|
124
|
+
// Unset the size property to allow button-group to control it
|
|
125
|
+
button.size = undefined as any;
|
|
126
|
+
|
|
127
|
+
// Also unset variant for syn-buttons
|
|
128
|
+
if (button.tagName.toLowerCase() === 'syn-button') {
|
|
129
|
+
(button as SynButton).variant = undefined as any;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Handle both cases: button-group changes and child changes
|
|
136
|
+
if (buttonGroupChanged || childrenChanged) {
|
|
137
|
+
this.handleSlotChange();
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Reconnect observer after changes are done
|
|
141
|
+
this.updateComplete.then(() => {
|
|
142
|
+
startObserving();
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
startObserving();
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
disconnectedCallback() {
|
|
150
|
+
super.disconnectedCallback();
|
|
151
|
+
this.mutationObserver?.disconnect();
|
|
152
|
+
}
|
|
153
|
+
|
|
79
154
|
render() {
|
|
80
155
|
// eslint-disable-next-line lit-a11y/mouse-events-have-key-events
|
|
81
156
|
return html`
|
|
@@ -35,6 +35,18 @@ const props = defineProps<{
|
|
|
35
35
|
devices when interacting with the control and is strongly recommended.
|
|
36
36
|
*/
|
|
37
37
|
label?: SynButtonGroup['label'];
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* The button-groups size.
|
|
41
|
+
* This affects all buttons within the group.
|
|
42
|
+
*/
|
|
43
|
+
size?: SynButtonGroup['size'];
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* The button-group's theme variant.
|
|
47
|
+
* This affects all buttons within the group.
|
|
48
|
+
*/
|
|
49
|
+
variant?: SynButtonGroup['variant'];
|
|
38
50
|
}>();
|
|
39
51
|
|
|
40
52
|
// Make sure prop binding only forwards the props that are actually there.
|
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1141](https://github.com/synergy-design-system/synergy-design-system/pull/1141) [`96dff2e`](https://github.com/synergy-design-system/synergy-design-system/commit/96dff2ebb47cee901f72773664ee864db5653219) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
|
|
8
|
+
|
|
9
|
+
feat: ✨ `<syn-button-group>` (#392)
|
|
10
|
+
|
|
11
|
+
We added a new component `<syn-button-group>` that you can use to group a list of buttons.
|
|
12
|
+
|
|
13
|
+
It will automatically apply its `size` and `variant` properties to all nested buttons.
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [[`96dff2e`](https://github.com/synergy-design-system/synergy-design-system/commit/96dff2ebb47cee901f72773664ee864db5653219)]:
|
|
18
|
+
- @synergy-design-system/tokens@3.1.0
|
|
19
|
+
|
|
3
20
|
## 3.0.0
|
|
4
21
|
|
|
5
22
|
### Major Changes
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1141](https://github.com/synergy-design-system/synergy-design-system/pull/1141) [`96dff2e`](https://github.com/synergy-design-system/synergy-design-system/commit/96dff2ebb47cee901f72773664ee864db5653219) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
|
|
8
|
+
|
|
9
|
+
feat: ✨ `<syn-button-group>` (#392)
|
|
10
|
+
|
|
11
|
+
We added a new component `<syn-button-group>` that you can use to group a list of buttons.
|
|
12
|
+
|
|
13
|
+
It will automatically apply its `size` and `variant` properties to all nested buttons.
|
|
14
|
+
|
|
3
15
|
## 3.0.0
|
|
4
16
|
|
|
5
17
|
### Major Changes
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
## Default
|
|
2
|
+
|
|
3
|
+
Button groups can be used to group related buttons into sections.
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<syn-button-group size="medium" variant="outline">
|
|
7
|
+
<syn-button title="" variant="outline" size="medium">Left</syn-button>
|
|
8
|
+
<syn-button title="" variant="outline" size="medium">Center</syn-button>
|
|
9
|
+
<syn-button title="" variant="outline" size="medium">Right</syn-button>
|
|
10
|
+
</syn-button-group>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Variants
|
|
16
|
+
|
|
17
|
+
Use the variant attribute to set the button’s variant. Variants can be Filled, Outline. There is no Text variant.
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<div
|
|
21
|
+
style="display: flex; gap: var(--syn-spacing-large); flex-direction: column"
|
|
22
|
+
>
|
|
23
|
+
<syn-button-group variant="outline" label="Variant (outline)" size="medium">
|
|
24
|
+
<syn-button title="" variant="outline" size="medium">Left</syn-button>
|
|
25
|
+
<syn-button title="" variant="outline" size="medium">Center</syn-button>
|
|
26
|
+
<syn-button title="" variant="outline" size="medium">Right</syn-button>
|
|
27
|
+
</syn-button-group>
|
|
28
|
+
|
|
29
|
+
<syn-button-group variant="filled" label="Variant (filled)" size="medium">
|
|
30
|
+
<syn-button title="" variant="filled" size="medium">Left</syn-button>
|
|
31
|
+
<syn-button title="" variant="filled" size="medium">Center</syn-button>
|
|
32
|
+
<syn-button title="" variant="filled" size="medium">Right</syn-button>
|
|
33
|
+
</syn-button-group>
|
|
34
|
+
</div>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Button Sizes
|
|
40
|
+
|
|
41
|
+
All button sizes are supported. The size of the button-group will be used to determine the size of the buttons.
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<div
|
|
45
|
+
style="display: flex; gap: var(--syn-spacing-large); flex-direction: column"
|
|
46
|
+
>
|
|
47
|
+
<syn-button-group size="small" label="Alignment (small)" variant="outline">
|
|
48
|
+
<syn-button title="" variant="outline" size="small">Left</syn-button>
|
|
49
|
+
<syn-button title="" variant="outline" size="small">Center</syn-button>
|
|
50
|
+
<syn-button title="" variant="outline" size="small">Right</syn-button>
|
|
51
|
+
</syn-button-group>
|
|
52
|
+
|
|
53
|
+
<syn-button-group size="medium" label="Alignment (medium)" variant="outline">
|
|
54
|
+
<syn-button title="" variant="outline" size="medium">Left</syn-button>
|
|
55
|
+
<syn-button title="" variant="outline" size="medium">Center</syn-button>
|
|
56
|
+
<syn-button title="" variant="outline" size="medium">Right</syn-button>
|
|
57
|
+
</syn-button-group>
|
|
58
|
+
|
|
59
|
+
<syn-button-group size="large" label="Alignment (large)" variant="outline">
|
|
60
|
+
<syn-button title="" variant="outline" size="large">Left</syn-button>
|
|
61
|
+
<syn-button title="" variant="outline" size="large">Center</syn-button>
|
|
62
|
+
<syn-button title="" variant="outline" size="large">Right</syn-button>
|
|
63
|
+
</syn-button-group>
|
|
64
|
+
</div>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Dropdowns In Button Groups
|
|
70
|
+
|
|
71
|
+
Dropdowns can be placed inside button groups as long as the trigger is an <syn-button> element.
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<syn-button-group label="Example Button Group" size="medium" variant="outline">
|
|
75
|
+
<syn-button title="" variant="outline" size="medium">Button</syn-button>
|
|
76
|
+
<syn-button title="" variant="outline" size="medium">Button</syn-button>
|
|
77
|
+
<syn-dropdown placement="bottom-end">
|
|
78
|
+
<syn-button slot="trigger" caret="" title="" variant="outline" size="medium"
|
|
79
|
+
>Dropdown</syn-button
|
|
80
|
+
>
|
|
81
|
+
<syn-menu role="menu">
|
|
82
|
+
<syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
|
|
83
|
+
>Save</syn-menu-item
|
|
84
|
+
>
|
|
85
|
+
<syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
|
|
86
|
+
>Save as…</syn-menu-item
|
|
87
|
+
>
|
|
88
|
+
<syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
|
|
89
|
+
>Save all</syn-menu-item
|
|
90
|
+
>
|
|
91
|
+
</syn-menu>
|
|
92
|
+
</syn-dropdown>
|
|
93
|
+
</syn-button-group>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
## Split Buttons
|
|
99
|
+
|
|
100
|
+
Create a split button using a button and a dropdown. Use a visually hidden label to ensure the dropdown is accessible to users with assistive devices.
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<syn-button-group label="Example Button Group" size="medium" variant="outline">
|
|
104
|
+
<syn-button title="" variant="outline" size="medium">Save</syn-button>
|
|
105
|
+
<syn-dropdown placement="bottom-end">
|
|
106
|
+
<syn-button
|
|
107
|
+
slot="trigger"
|
|
108
|
+
variant="outline"
|
|
109
|
+
caret=""
|
|
110
|
+
title=""
|
|
111
|
+
size="medium"
|
|
112
|
+
></syn-button>
|
|
113
|
+
<syn-menu role="menu">
|
|
114
|
+
<syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
|
|
115
|
+
>Save</syn-menu-item
|
|
116
|
+
>
|
|
117
|
+
<syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
|
|
118
|
+
>Save as…</syn-menu-item
|
|
119
|
+
>
|
|
120
|
+
<syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
|
|
121
|
+
>Save all</syn-menu-item
|
|
122
|
+
>
|
|
123
|
+
</syn-menu>
|
|
124
|
+
</syn-dropdown>
|
|
125
|
+
</syn-button-group>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## Tooltips In Button Groups
|
|
131
|
+
|
|
132
|
+
Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<syn-button-group label="Example Button Group" size="medium" variant="outline">
|
|
136
|
+
<syn-tooltip content="I am on the left">
|
|
137
|
+
<syn-button title="" variant="outline" size="medium">Left</syn-button>
|
|
138
|
+
</syn-tooltip>
|
|
139
|
+
<syn-tooltip content="I am in the center">
|
|
140
|
+
<syn-button title="" variant="outline" size="medium">Center</syn-button>
|
|
141
|
+
</syn-tooltip>
|
|
142
|
+
<syn-tooltip content="I am on the right">
|
|
143
|
+
<syn-button title="" variant="outline" size="medium">Right</syn-button>
|
|
144
|
+
</syn-tooltip>
|
|
145
|
+
</syn-button-group>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
---
|
|
149
|
+
|
|
150
|
+
## Toolbar Example
|
|
151
|
+
|
|
152
|
+
Create interactive toolbars with button groups.
|
|
153
|
+
|
|
154
|
+
```html
|
|
155
|
+
<div class="button-group-toolbar">
|
|
156
|
+
<syn-button-group label="Download and save" size="medium" variant="outline">
|
|
157
|
+
<syn-tooltip content="Save">
|
|
158
|
+
<syn-button title="" variant="outline" size="medium"
|
|
159
|
+
><syn-icon
|
|
160
|
+
name="save"
|
|
161
|
+
label="Save"
|
|
162
|
+
role="img"
|
|
163
|
+
aria-label="Save"
|
|
164
|
+
library="default"
|
|
165
|
+
></syn-icon
|
|
166
|
+
></syn-button>
|
|
167
|
+
</syn-tooltip>
|
|
168
|
+
<syn-tooltip content="Download">
|
|
169
|
+
<syn-button title="" variant="outline" size="medium"
|
|
170
|
+
><syn-icon
|
|
171
|
+
name="save_alt"
|
|
172
|
+
label="Download"
|
|
173
|
+
role="img"
|
|
174
|
+
aria-label="Download"
|
|
175
|
+
library="default"
|
|
176
|
+
></syn-icon
|
|
177
|
+
></syn-button>
|
|
178
|
+
</syn-tooltip>
|
|
179
|
+
</syn-button-group>
|
|
180
|
+
|
|
181
|
+
<syn-button-group label="Misc" size="medium" variant="outline">
|
|
182
|
+
<syn-tooltip content="Edit">
|
|
183
|
+
<syn-button title="" variant="outline" size="medium"
|
|
184
|
+
><syn-icon
|
|
185
|
+
name="edit"
|
|
186
|
+
label="Edit"
|
|
187
|
+
role="img"
|
|
188
|
+
aria-label="Edit"
|
|
189
|
+
library="default"
|
|
190
|
+
></syn-icon
|
|
191
|
+
></syn-button>
|
|
192
|
+
</syn-tooltip>
|
|
193
|
+
<syn-tooltip content="Settings">
|
|
194
|
+
<syn-button title="" variant="outline" size="medium"
|
|
195
|
+
><syn-icon
|
|
196
|
+
name="settings"
|
|
197
|
+
label="Settings"
|
|
198
|
+
role="img"
|
|
199
|
+
aria-label="Settings"
|
|
200
|
+
library="default"
|
|
201
|
+
></syn-icon
|
|
202
|
+
></syn-button>
|
|
203
|
+
</syn-tooltip>
|
|
204
|
+
<syn-tooltip content="Preview">
|
|
205
|
+
<syn-button title="" variant="outline" size="medium"
|
|
206
|
+
><syn-icon
|
|
207
|
+
name="wallpaper"
|
|
208
|
+
label="Preview"
|
|
209
|
+
role="img"
|
|
210
|
+
aria-label="Preview"
|
|
211
|
+
library="default"
|
|
212
|
+
></syn-icon
|
|
213
|
+
></syn-button>
|
|
214
|
+
</syn-tooltip>
|
|
215
|
+
</syn-button-group>
|
|
216
|
+
|
|
217
|
+
<syn-button-group size="medium" variant="outline">
|
|
218
|
+
<syn-tooltip content="Add">
|
|
219
|
+
<syn-button title="" variant="outline" size="medium"
|
|
220
|
+
><syn-icon
|
|
221
|
+
name="add"
|
|
222
|
+
label="Add"
|
|
223
|
+
role="img"
|
|
224
|
+
aria-label="Add"
|
|
225
|
+
library="default"
|
|
226
|
+
></syn-icon
|
|
227
|
+
></syn-button>
|
|
228
|
+
</syn-tooltip>
|
|
229
|
+
<syn-tooltip content="Info">
|
|
230
|
+
<syn-button title="" variant="outline" size="medium"
|
|
231
|
+
><syn-icon
|
|
232
|
+
name="info"
|
|
233
|
+
label="Info"
|
|
234
|
+
role="img"
|
|
235
|
+
aria-label="Info"
|
|
236
|
+
library="default"
|
|
237
|
+
></syn-icon
|
|
238
|
+
></syn-button>
|
|
239
|
+
</syn-tooltip>
|
|
240
|
+
<syn-tooltip content="Upload File">
|
|
241
|
+
<syn-button title="" variant="outline" size="medium"
|
|
242
|
+
><syn-icon
|
|
243
|
+
name="upload_file"
|
|
244
|
+
label="Upload File"
|
|
245
|
+
role="img"
|
|
246
|
+
aria-label="Upload File"
|
|
247
|
+
library="default"
|
|
248
|
+
></syn-icon
|
|
249
|
+
></syn-button>
|
|
250
|
+
</syn-tooltip>
|
|
251
|
+
</syn-button-group>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<style>
|
|
255
|
+
.button-group-toolbar syn-button-group:not(:last-of-type) {
|
|
256
|
+
margin-right: var(--syn-spacing-large);
|
|
257
|
+
}
|
|
258
|
+
</style>
|
|
259
|
+
```
|
package/package.json
CHANGED
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"serve-handler": "^6.1.6",
|
|
29
29
|
"ts-jest": "^29.4.6",
|
|
30
30
|
"typescript": "^5.9.3",
|
|
31
|
-
"@synergy-design-system/components": "3.0.0",
|
|
32
|
-
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
33
31
|
"@synergy-design-system/docs": "0.1.0",
|
|
32
|
+
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
33
|
+
"@synergy-design-system/components": "3.1.0",
|
|
34
34
|
"@synergy-design-system/fonts": "1.0.2",
|
|
35
|
-
"@synergy-design-system/
|
|
36
|
-
"@synergy-design-system/
|
|
35
|
+
"@synergy-design-system/styles": "2.0.0",
|
|
36
|
+
"@synergy-design-system/tokens": "^3.1.0"
|
|
37
37
|
},
|
|
38
38
|
"exports": {
|
|
39
39
|
".": {
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"directory": "packages/mcp"
|
|
68
68
|
},
|
|
69
69
|
"type": "module",
|
|
70
|
-
"version": "2.
|
|
70
|
+
"version": "2.1.0",
|
|
71
71
|
"scripts": {
|
|
72
72
|
"build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
|
|
73
73
|
"build:all": "pnpm run build && pnpm run build:storybook",
|