@synergy-design-system/mcp 2.8.2 → 2.9.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 +10 -0
- package/metadata/checksum.txt +1 -1
- package/metadata/packages/components/components/syn-tag-group/component.angular.ts +83 -0
- package/metadata/packages/components/components/syn-tag-group/component.react.ts +33 -0
- package/metadata/packages/components/components/syn-tag-group/component.styles.ts +49 -0
- package/metadata/packages/components/components/syn-tag-group/component.ts +95 -0
- package/metadata/packages/components/components/syn-tag-group/component.vue +69 -0
- package/metadata/packages/components/static/CHANGELOG.md +15 -0
- package/metadata/packages/tokens/CHANGELOG.md +10 -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-tag-group/docs.md +269 -0
- package/metadata/static/templates/tag-group.md +833 -0
- package/package.json +5 -5
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
## Default
|
|
2
|
+
|
|
3
|
+
A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels. It arranges tags in flexible rows and supports different sizes and layouts. Tags can be removable, icon based, or purely textual.
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<syn-tag-group label-position="top" size="medium">
|
|
7
|
+
<syn-tag removable="" size="medium">
|
|
8
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
9
|
+
Option
|
|
10
|
+
</syn-tag>
|
|
11
|
+
<syn-tag removable="" size="medium">
|
|
12
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
13
|
+
Option
|
|
14
|
+
</syn-tag>
|
|
15
|
+
<syn-tag removable="" size="medium">
|
|
16
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
17
|
+
Option
|
|
18
|
+
</syn-tag>
|
|
19
|
+
<syn-tag removable="" size="medium">
|
|
20
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
21
|
+
Option
|
|
22
|
+
</syn-tag>
|
|
23
|
+
<syn-tag removable="" size="medium">
|
|
24
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
25
|
+
Option
|
|
26
|
+
</syn-tag>
|
|
27
|
+
<syn-tag removable="" size="medium">
|
|
28
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
29
|
+
Option
|
|
30
|
+
</syn-tag>
|
|
31
|
+
<span slot="label">This is a label</span>
|
|
32
|
+
</syn-tag-group>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Labels
|
|
38
|
+
|
|
39
|
+
Use the label attribute to give the tag-group an accessible label. For labels that contain HTML, use the label slot instead.
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<syn-tag-group label-position="top" size="medium">
|
|
43
|
+
<div slot="label">This is a label</div>
|
|
44
|
+
<syn-tag removable="" size="medium">
|
|
45
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
46
|
+
Option
|
|
47
|
+
</syn-tag>
|
|
48
|
+
<syn-tag removable="" size="medium">
|
|
49
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
50
|
+
Option
|
|
51
|
+
</syn-tag>
|
|
52
|
+
<syn-tag removable="" size="medium">
|
|
53
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
54
|
+
Option
|
|
55
|
+
</syn-tag>
|
|
56
|
+
<syn-tag removable="" size="medium">
|
|
57
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
58
|
+
Option
|
|
59
|
+
</syn-tag>
|
|
60
|
+
<syn-tag removable="" size="medium">
|
|
61
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
62
|
+
Option
|
|
63
|
+
</syn-tag>
|
|
64
|
+
<syn-tag removable="" size="medium">
|
|
65
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
66
|
+
Option
|
|
67
|
+
</syn-tag>
|
|
68
|
+
</syn-tag-group>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Sizes
|
|
74
|
+
|
|
75
|
+
Use the size attribute to change a tag group’s size.
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<div
|
|
79
|
+
style="display: flex; flex-direction: column; gap: var(--syn-spacing-x-large)"
|
|
80
|
+
>
|
|
81
|
+
<syn-tag-group size="small" label="Small" label-position="top">
|
|
82
|
+
<syn-tag removable="" size="small">
|
|
83
|
+
<syn-icon
|
|
84
|
+
name="wallpaper"
|
|
85
|
+
aria-hidden="true"
|
|
86
|
+
library="default"
|
|
87
|
+
></syn-icon>
|
|
88
|
+
Option
|
|
89
|
+
</syn-tag>
|
|
90
|
+
<syn-tag removable="" size="small">
|
|
91
|
+
<syn-icon
|
|
92
|
+
name="wallpaper"
|
|
93
|
+
aria-hidden="true"
|
|
94
|
+
library="default"
|
|
95
|
+
></syn-icon>
|
|
96
|
+
Option
|
|
97
|
+
</syn-tag>
|
|
98
|
+
<syn-tag removable="" size="small">
|
|
99
|
+
<syn-icon
|
|
100
|
+
name="wallpaper"
|
|
101
|
+
aria-hidden="true"
|
|
102
|
+
library="default"
|
|
103
|
+
></syn-icon>
|
|
104
|
+
Option
|
|
105
|
+
</syn-tag>
|
|
106
|
+
<syn-tag removable="" size="small">
|
|
107
|
+
<syn-icon
|
|
108
|
+
name="wallpaper"
|
|
109
|
+
aria-hidden="true"
|
|
110
|
+
library="default"
|
|
111
|
+
></syn-icon>
|
|
112
|
+
Option
|
|
113
|
+
</syn-tag>
|
|
114
|
+
<syn-tag removable="" size="small">
|
|
115
|
+
<syn-icon
|
|
116
|
+
name="wallpaper"
|
|
117
|
+
aria-hidden="true"
|
|
118
|
+
library="default"
|
|
119
|
+
></syn-icon>
|
|
120
|
+
Option
|
|
121
|
+
</syn-tag>
|
|
122
|
+
<syn-tag removable="" size="small">
|
|
123
|
+
<syn-icon
|
|
124
|
+
name="wallpaper"
|
|
125
|
+
aria-hidden="true"
|
|
126
|
+
library="default"
|
|
127
|
+
></syn-icon>
|
|
128
|
+
Option
|
|
129
|
+
</syn-tag>
|
|
130
|
+
</syn-tag-group>
|
|
131
|
+
|
|
132
|
+
<syn-tag-group size="medium" label="Medium" label-position="top">
|
|
133
|
+
<syn-tag removable="" size="medium">
|
|
134
|
+
<syn-icon
|
|
135
|
+
name="wallpaper"
|
|
136
|
+
aria-hidden="true"
|
|
137
|
+
library="default"
|
|
138
|
+
></syn-icon>
|
|
139
|
+
Option
|
|
140
|
+
</syn-tag>
|
|
141
|
+
<syn-tag removable="" size="medium">
|
|
142
|
+
<syn-icon
|
|
143
|
+
name="wallpaper"
|
|
144
|
+
aria-hidden="true"
|
|
145
|
+
library="default"
|
|
146
|
+
></syn-icon>
|
|
147
|
+
Option
|
|
148
|
+
</syn-tag>
|
|
149
|
+
<syn-tag removable="" size="medium">
|
|
150
|
+
<syn-icon
|
|
151
|
+
name="wallpaper"
|
|
152
|
+
aria-hidden="true"
|
|
153
|
+
library="default"
|
|
154
|
+
></syn-icon>
|
|
155
|
+
Option
|
|
156
|
+
</syn-tag>
|
|
157
|
+
<syn-tag removable="" size="medium">
|
|
158
|
+
<syn-icon
|
|
159
|
+
name="wallpaper"
|
|
160
|
+
aria-hidden="true"
|
|
161
|
+
library="default"
|
|
162
|
+
></syn-icon>
|
|
163
|
+
Option
|
|
164
|
+
</syn-tag>
|
|
165
|
+
<syn-tag removable="" size="medium">
|
|
166
|
+
<syn-icon
|
|
167
|
+
name="wallpaper"
|
|
168
|
+
aria-hidden="true"
|
|
169
|
+
library="default"
|
|
170
|
+
></syn-icon>
|
|
171
|
+
Option
|
|
172
|
+
</syn-tag>
|
|
173
|
+
<syn-tag removable="" size="medium">
|
|
174
|
+
<syn-icon
|
|
175
|
+
name="wallpaper"
|
|
176
|
+
aria-hidden="true"
|
|
177
|
+
library="default"
|
|
178
|
+
></syn-icon>
|
|
179
|
+
Option
|
|
180
|
+
</syn-tag>
|
|
181
|
+
</syn-tag-group>
|
|
182
|
+
|
|
183
|
+
<syn-tag-group size="large" label="Large" label-position="top">
|
|
184
|
+
<syn-tag removable="" size="large">
|
|
185
|
+
<syn-icon
|
|
186
|
+
name="wallpaper"
|
|
187
|
+
aria-hidden="true"
|
|
188
|
+
library="default"
|
|
189
|
+
></syn-icon>
|
|
190
|
+
Option
|
|
191
|
+
</syn-tag>
|
|
192
|
+
<syn-tag removable="" size="large">
|
|
193
|
+
<syn-icon
|
|
194
|
+
name="wallpaper"
|
|
195
|
+
aria-hidden="true"
|
|
196
|
+
library="default"
|
|
197
|
+
></syn-icon>
|
|
198
|
+
Option
|
|
199
|
+
</syn-tag>
|
|
200
|
+
<syn-tag removable="" size="large">
|
|
201
|
+
<syn-icon
|
|
202
|
+
name="wallpaper"
|
|
203
|
+
aria-hidden="true"
|
|
204
|
+
library="default"
|
|
205
|
+
></syn-icon>
|
|
206
|
+
Option
|
|
207
|
+
</syn-tag>
|
|
208
|
+
<syn-tag removable="" size="large">
|
|
209
|
+
<syn-icon
|
|
210
|
+
name="wallpaper"
|
|
211
|
+
aria-hidden="true"
|
|
212
|
+
library="default"
|
|
213
|
+
></syn-icon>
|
|
214
|
+
Option
|
|
215
|
+
</syn-tag>
|
|
216
|
+
<syn-tag removable="" size="large">
|
|
217
|
+
<syn-icon
|
|
218
|
+
name="wallpaper"
|
|
219
|
+
aria-hidden="true"
|
|
220
|
+
library="default"
|
|
221
|
+
></syn-icon>
|
|
222
|
+
Option
|
|
223
|
+
</syn-tag>
|
|
224
|
+
<syn-tag removable="" size="large">
|
|
225
|
+
<syn-icon
|
|
226
|
+
name="wallpaper"
|
|
227
|
+
aria-hidden="true"
|
|
228
|
+
library="default"
|
|
229
|
+
></syn-icon>
|
|
230
|
+
Option
|
|
231
|
+
</syn-tag>
|
|
232
|
+
</syn-tag-group>
|
|
233
|
+
</div>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
## Label Alignment
|
|
239
|
+
|
|
240
|
+
Use the label-position attribute to change the position of the label. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
|
|
241
|
+
|
|
242
|
+
```html
|
|
243
|
+
<syn-tag-group label="This is a label" label-position="start" size="medium">
|
|
244
|
+
<syn-tag removable="" size="medium">
|
|
245
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
246
|
+
Option
|
|
247
|
+
</syn-tag>
|
|
248
|
+
<syn-tag removable="" size="medium">
|
|
249
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
250
|
+
Option
|
|
251
|
+
</syn-tag>
|
|
252
|
+
<syn-tag removable="" size="medium">
|
|
253
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
254
|
+
Option
|
|
255
|
+
</syn-tag>
|
|
256
|
+
<syn-tag removable="" size="medium">
|
|
257
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
258
|
+
Option
|
|
259
|
+
</syn-tag>
|
|
260
|
+
<syn-tag removable="" size="medium">
|
|
261
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
262
|
+
Option
|
|
263
|
+
</syn-tag>
|
|
264
|
+
<syn-tag removable="" size="medium">
|
|
265
|
+
<syn-icon name="wallpaper" aria-hidden="true" library="default"></syn-icon>
|
|
266
|
+
Option
|
|
267
|
+
</syn-tag>
|
|
268
|
+
</syn-tag-group>
|
|
269
|
+
```
|