@synergy-design-system/mcp 2.13.3 → 2.14.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 +24 -0
- package/metadata/checksum.txt +1 -1
- package/metadata/packages/assets/CHANGELOG.md +8 -0
- package/metadata/packages/components/static/CHANGELOG.md +29 -0
- package/metadata/packages/fonts/CHANGELOG.md +8 -0
- package/metadata/packages/fonts/package.json +2 -2
- package/metadata/packages/styles/CHANGELOG.md +11 -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 +10 -0
- package/metadata/packages/tokens/dark.css +4 -4
- package/metadata/packages/tokens/index.js +1 -1
- package/metadata/packages/tokens/light.css +4 -4
- package/metadata/packages/tokens/sick2018_dark.css +5 -5
- package/metadata/packages/tokens/sick2018_light.css +5 -5
- package/metadata/packages/tokens/sick2025_dark.css +4 -4
- package/metadata/packages/tokens/sick2025_light.css +4 -4
- package/metadata/static/templates/forms.md +189 -0
- package/metadata/static/templates/localization.md +279 -0
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.14.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1247](https://github.com/synergy-design-system/synergy-design-system/pull/1247) [`b3ab501`](https://github.com/synergy-design-system/synergy-design-system/commit/b3ab50132ec4ab770b79fa32b1334a1054c60746) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-15
|
|
8
|
+
|
|
9
|
+
feat: ✨ Updates to the Synergy translation System (#452, #1242, #1248)
|
|
10
|
+
|
|
11
|
+
This release adds translations for all officially supported languages, as well as documentation about how to use Synergies translation system.
|
|
12
|
+
It also removes unneeded dependencies from the components package:
|
|
13
|
+
- `@shoelace-style/translate` has reached end of live. We forked the original code to make sure it receives updates in Synergy if needed.
|
|
14
|
+
- `@shoelace-style/animation` was never used internally.
|
|
15
|
+
|
|
16
|
+
## 2.13.4
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
21
|
+
|
|
22
|
+
fix: 🐛 dependency updates (#258)
|
|
23
|
+
|
|
24
|
+
- Updated dependencies [[`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9)]:
|
|
25
|
+
- @synergy-design-system/assets@2.0.3
|
|
26
|
+
|
|
3
27
|
## 2.13.3
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
package/metadata/checksum.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
4a1b447c845c11f9c997efbb142e3a62
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
3
11
|
## 2.0.2
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.11.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1247](https://github.com/synergy-design-system/synergy-design-system/pull/1247) [`b3ab501`](https://github.com/synergy-design-system/synergy-design-system/commit/b3ab50132ec4ab770b79fa32b1334a1054c60746) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-15
|
|
8
|
+
|
|
9
|
+
feat: ✨ Updates to the Synergy translation System (#452, #1242, #1248)
|
|
10
|
+
|
|
11
|
+
This release adds translations for all officially supported languages, as well as documentation about how to use Synergies translation system.
|
|
12
|
+
It also removes unneeded dependencies from the components package:
|
|
13
|
+
- `@shoelace-style/translate` has reached end of live. We forked the original code to make sure it receives updates in Synergy if needed.
|
|
14
|
+
- `@shoelace-style/animation` was never used internally.
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies []:
|
|
19
|
+
- @synergy-design-system/tokens@3.11.0
|
|
20
|
+
|
|
21
|
+
## 3.10.5
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
26
|
+
|
|
27
|
+
fix: 🐛 dependency updates (#258)
|
|
28
|
+
|
|
29
|
+
- Updated dependencies [[`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9)]:
|
|
30
|
+
- @synergy-design-system/tokens@3.10.5
|
|
31
|
+
|
|
3
32
|
## 3.10.4
|
|
4
33
|
|
|
5
34
|
### Patch Changes
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
3
11
|
## 1.0.4
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"postcss-header": "^3.0.3",
|
|
14
14
|
"postcss-import": "^16.1.1",
|
|
15
15
|
"postcss-url": "^10.1.3",
|
|
16
|
-
"stylelint": "^17.
|
|
16
|
+
"stylelint": "^17.5.0"
|
|
17
17
|
},
|
|
18
18
|
"exports": {
|
|
19
19
|
".": {
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"lint": "pnpm run /^lint:.*/"
|
|
69
69
|
},
|
|
70
70
|
"type": "module",
|
|
71
|
-
"version": "1.0.
|
|
71
|
+
"version": "1.0.5"
|
|
72
72
|
}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [[`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9)]:
|
|
12
|
+
- @synergy-design-system/tokens@3.10.5
|
|
13
|
+
|
|
3
14
|
## 2.0.2
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.11.0
|
|
4
|
+
|
|
5
|
+
## 3.10.5
|
|
6
|
+
|
|
7
|
+
### Patch Changes
|
|
8
|
+
|
|
9
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
10
|
+
|
|
11
|
+
fix: 🐛 dependency updates (#258)
|
|
12
|
+
|
|
3
13
|
## 3.10.4
|
|
4
14
|
|
|
5
15
|
## 3.10.3
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.5
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-700);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.5
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-500);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.5
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-color-neutral-500);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-400);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
--syn-option-icon-color: var(--syn-typography-color-text);
|
|
350
350
|
--syn-option-icon-color-active: var(--syn-typography-color-text-inverted);
|
|
351
351
|
--syn-option-icon-color-hover: var(--syn-typography-color-text);
|
|
352
|
-
--syn-overlay-background-blur:
|
|
352
|
+
--syn-overlay-background-blur: 0;
|
|
353
353
|
--syn-overlay-background-color: rgba(49, 55, 58, 0.5);
|
|
354
354
|
--syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
|
|
355
355
|
--syn-page-background-color: var(--syn-color-neutral-0);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.5
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-color-neutral-500);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-400);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
--syn-option-icon-color: var(--syn-input-icon-color);
|
|
350
350
|
--syn-option-icon-color-active: var(--syn-color-neutral-0);
|
|
351
351
|
--syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
|
|
352
|
-
--syn-overlay-background-blur:
|
|
352
|
+
--syn-overlay-background-blur: 0;
|
|
353
353
|
--syn-overlay-background-color: rgba(49, 55, 58, 0.5);
|
|
354
354
|
--syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
|
|
355
355
|
--syn-page-background-color: var(--syn-color-neutral-0);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.5
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-700);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.5
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-500);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -367,3 +367,192 @@
|
|
|
367
367
|
</form>
|
|
368
368
|
</div>
|
|
369
369
|
```
|
|
370
|
+
|
|
371
|
+
---
|
|
372
|
+
|
|
373
|
+
## Multiple Files Upload Form
|
|
374
|
+
|
|
375
|
+
```html
|
|
376
|
+
<div class="synergy-upload-form-demo">
|
|
377
|
+
<h1>Multiple files upload</h1>
|
|
378
|
+
<form
|
|
379
|
+
enctype="multipart/form-data"
|
|
380
|
+
method="post"
|
|
381
|
+
id="upload-multiple-form-docs"
|
|
382
|
+
>
|
|
383
|
+
<syn-file
|
|
384
|
+
droparea=""
|
|
385
|
+
name="files"
|
|
386
|
+
multiple=""
|
|
387
|
+
label="Select Files"
|
|
388
|
+
help-text="Max file size is 500kb. Supported file types are .jgp, .png and .pdf"
|
|
389
|
+
size="medium"
|
|
390
|
+
form=""
|
|
391
|
+
></syn-file>
|
|
392
|
+
|
|
393
|
+
<!-- File list: hidden until files are selected -->
|
|
394
|
+
<ul class="uploaded-files">
|
|
395
|
+
<li class="entry-uploading">
|
|
396
|
+
<em>image.png</em
|
|
397
|
+
><span class="uploaded-files--status"><syn-spinner></syn-spinner></span
|
|
398
|
+
><syn-divider
|
|
399
|
+
role="separator"
|
|
400
|
+
aria-orientation="horizontal"
|
|
401
|
+
></syn-divider>
|
|
402
|
+
</li>
|
|
403
|
+
<li class="entry-success">
|
|
404
|
+
<em>file-name</em
|
|
405
|
+
><span class="uploaded-files--status"
|
|
406
|
+
><syn-icon-button
|
|
407
|
+
library="system"
|
|
408
|
+
size="medium"
|
|
409
|
+
name="status-success"
|
|
410
|
+
label="Upload successful"
|
|
411
|
+
tabindex="-1"
|
|
412
|
+
color="currentColor"
|
|
413
|
+
></syn-icon-button></span
|
|
414
|
+
><syn-divider
|
|
415
|
+
role="separator"
|
|
416
|
+
aria-orientation="horizontal"
|
|
417
|
+
></syn-divider>
|
|
418
|
+
</li>
|
|
419
|
+
<li class="entry-queued">
|
|
420
|
+
<em>file-name</em
|
|
421
|
+
><span class="uploaded-files--status"
|
|
422
|
+
><syn-icon-button
|
|
423
|
+
library="system"
|
|
424
|
+
size="medium"
|
|
425
|
+
name="x-lg"
|
|
426
|
+
label="Cancel upload"
|
|
427
|
+
color="currentColor"
|
|
428
|
+
></syn-icon-button></span
|
|
429
|
+
><syn-divider
|
|
430
|
+
role="separator"
|
|
431
|
+
aria-orientation="horizontal"
|
|
432
|
+
></syn-divider>
|
|
433
|
+
</li>
|
|
434
|
+
<li class="entry-queued">
|
|
435
|
+
<em
|
|
436
|
+
>file-name-large<span class="uploaded-files--help-text"
|
|
437
|
+
>File exceeds size limit.</span
|
|
438
|
+
></em
|
|
439
|
+
><span class="uploaded-files--status"
|
|
440
|
+
><syn-icon-button
|
|
441
|
+
library="system"
|
|
442
|
+
size="medium"
|
|
443
|
+
name="x-lg"
|
|
444
|
+
label="Cancel upload"
|
|
445
|
+
color="currentColor"
|
|
446
|
+
></syn-icon-button></span
|
|
447
|
+
><syn-divider
|
|
448
|
+
role="separator"
|
|
449
|
+
aria-orientation="horizontal"
|
|
450
|
+
></syn-divider>
|
|
451
|
+
</li>
|
|
452
|
+
</ul>
|
|
453
|
+
|
|
454
|
+
<div class="submit-actions">
|
|
455
|
+
<syn-button type="submit" variant="filled" title="" size="medium"
|
|
456
|
+
>Upload</syn-button
|
|
457
|
+
>
|
|
458
|
+
</div>
|
|
459
|
+
</form>
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
<style>
|
|
463
|
+
.synergy-upload-form-demo {
|
|
464
|
+
background: var(--syn-color-neutral-0);
|
|
465
|
+
margin: 0 auto;
|
|
466
|
+
padding: var(--syn-spacing-x-large);
|
|
467
|
+
max-width: 750px;
|
|
468
|
+
|
|
469
|
+
form {
|
|
470
|
+
display: flex;
|
|
471
|
+
flex-direction: column;
|
|
472
|
+
gap: var(--syn-spacing-medium);
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
h1 {
|
|
477
|
+
font-size: var(--syn-font-size-3x-large);
|
|
478
|
+
font-weight: var(--syn-font-weight-bold);
|
|
479
|
+
margin: 0 0 var(--syn-spacing-medium) 0;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.uploaded-files {
|
|
483
|
+
display: flex;
|
|
484
|
+
flex-direction: column;
|
|
485
|
+
list-style: none;
|
|
486
|
+
padding: 0;
|
|
487
|
+
|
|
488
|
+
li {
|
|
489
|
+
--indicator-color: var(--syn-input-icon-icon-clearable-color);
|
|
490
|
+
|
|
491
|
+
align-items: center;
|
|
492
|
+
box-sizing: border-box;
|
|
493
|
+
display: flex;
|
|
494
|
+
flex-direction: row;
|
|
495
|
+
flex-wrap: wrap;
|
|
496
|
+
padding: var(--syn-spacing-small) 0;
|
|
497
|
+
font: var(--syn-body-medium-regular);
|
|
498
|
+
gap: var(--syn-spacing-small);
|
|
499
|
+
min-height: 50px;
|
|
500
|
+
position: relative;
|
|
501
|
+
|
|
502
|
+
&.entry-success {
|
|
503
|
+
--indicator-color: var(--syn-namur-success-color);
|
|
504
|
+
|
|
505
|
+
pointer-events: none;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
em {
|
|
509
|
+
font: var(--syn-body-medium-regular);
|
|
510
|
+
font-style: normal;
|
|
511
|
+
flex: 1;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.uploaded-files--status {
|
|
515
|
+
color: var(--indicator-color);
|
|
516
|
+
text-align: end;
|
|
517
|
+
width: var(--syn-spacing-large);
|
|
518
|
+
font-size: var(--syn-font-size-large);
|
|
519
|
+
position: absolute;
|
|
520
|
+
right: 0;
|
|
521
|
+
top: var(--syn-spacing-small);
|
|
522
|
+
|
|
523
|
+
syn-icon-button {
|
|
524
|
+
&::part(base) {
|
|
525
|
+
font-size: var(--syn-spacing-large);
|
|
526
|
+
padding: 0;
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.uploaded-files--help-text {
|
|
532
|
+
color: var(--syn-input-border-color-focus-error);
|
|
533
|
+
display: block;
|
|
534
|
+
font: var(--syn-body-small-regular);
|
|
535
|
+
margin: var(--syn-spacing-x-small) 0;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
/* Spinner surface is slightly larger as buttons have some padding applied */
|
|
539
|
+
.uploaded-files--status:has(syn-spinner) {
|
|
540
|
+
right: 2px;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
syn-divider {
|
|
544
|
+
width: 100%;
|
|
545
|
+
margin: 0;
|
|
546
|
+
position: absolute;
|
|
547
|
+
bottom: 0;
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.submit-actions {
|
|
553
|
+
display: flex;
|
|
554
|
+
justify-content: right;
|
|
555
|
+
margin-top: var(--syn-spacing-2x-large);
|
|
556
|
+
}
|
|
557
|
+
</style>
|
|
558
|
+
```
|
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
## Dynamically Set Localizations
|
|
2
|
+
|
|
3
|
+
This example shows how to dynamically set localizations for Synergy components. This can be useful if you want to allow users to change the language of your application on the fly.
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<!-- .synergy-demo-application -->
|
|
7
|
+
<div id="localization-demo-story" class="synergy-demo-application">
|
|
8
|
+
<!-- header -->
|
|
9
|
+
<syn-header label="Localization Demo" sticky="" burger-menu="hidden">
|
|
10
|
+
<!-- meta-navigation -->
|
|
11
|
+
<nav slot="meta-navigation">
|
|
12
|
+
<syn-dropdown placement="bottom-start">
|
|
13
|
+
<div slot="trigger">
|
|
14
|
+
<syn-tooltip content="Change language" placement="bottom">
|
|
15
|
+
<syn-icon-button
|
|
16
|
+
color="neutral"
|
|
17
|
+
name="language"
|
|
18
|
+
label="Choose language"
|
|
19
|
+
size="inherit"
|
|
20
|
+
></syn-icon-button>
|
|
21
|
+
</syn-tooltip>
|
|
22
|
+
</div>
|
|
23
|
+
<syn-menu role="menu">
|
|
24
|
+
<syn-menu-item
|
|
25
|
+
type="checkbox"
|
|
26
|
+
value="cs"
|
|
27
|
+
role="menuitemcheckbox"
|
|
28
|
+
aria-checked="false"
|
|
29
|
+
aria-disabled="false"
|
|
30
|
+
tabindex="0"
|
|
31
|
+
>Čeština</syn-menu-item
|
|
32
|
+
>
|
|
33
|
+
|
|
34
|
+
<syn-menu-item
|
|
35
|
+
type="checkbox"
|
|
36
|
+
value="da"
|
|
37
|
+
role="menuitemcheckbox"
|
|
38
|
+
aria-checked="false"
|
|
39
|
+
aria-disabled="false"
|
|
40
|
+
tabindex="-1"
|
|
41
|
+
>Dansk</syn-menu-item
|
|
42
|
+
>
|
|
43
|
+
|
|
44
|
+
<syn-menu-item
|
|
45
|
+
type="checkbox"
|
|
46
|
+
checked=""
|
|
47
|
+
value="de"
|
|
48
|
+
role="menuitemcheckbox"
|
|
49
|
+
aria-checked="true"
|
|
50
|
+
aria-disabled="false"
|
|
51
|
+
tabindex="-1"
|
|
52
|
+
>Deutsch</syn-menu-item
|
|
53
|
+
>
|
|
54
|
+
|
|
55
|
+
<syn-menu-item
|
|
56
|
+
type="checkbox"
|
|
57
|
+
value="en"
|
|
58
|
+
role="menuitemcheckbox"
|
|
59
|
+
aria-checked="false"
|
|
60
|
+
aria-disabled="false"
|
|
61
|
+
tabindex="-1"
|
|
62
|
+
>English</syn-menu-item
|
|
63
|
+
>
|
|
64
|
+
|
|
65
|
+
<syn-menu-item
|
|
66
|
+
type="checkbox"
|
|
67
|
+
value="es"
|
|
68
|
+
role="menuitemcheckbox"
|
|
69
|
+
aria-checked="false"
|
|
70
|
+
aria-disabled="false"
|
|
71
|
+
tabindex="-1"
|
|
72
|
+
>Español</syn-menu-item
|
|
73
|
+
>
|
|
74
|
+
|
|
75
|
+
<syn-menu-item
|
|
76
|
+
type="checkbox"
|
|
77
|
+
value="fi"
|
|
78
|
+
role="menuitemcheckbox"
|
|
79
|
+
aria-checked="false"
|
|
80
|
+
aria-disabled="false"
|
|
81
|
+
tabindex="-1"
|
|
82
|
+
>Suomi</syn-menu-item
|
|
83
|
+
>
|
|
84
|
+
|
|
85
|
+
<syn-menu-item
|
|
86
|
+
type="checkbox"
|
|
87
|
+
value="fr"
|
|
88
|
+
role="menuitemcheckbox"
|
|
89
|
+
aria-checked="false"
|
|
90
|
+
aria-disabled="false"
|
|
91
|
+
tabindex="-1"
|
|
92
|
+
>Français</syn-menu-item
|
|
93
|
+
>
|
|
94
|
+
|
|
95
|
+
<syn-menu-item
|
|
96
|
+
type="checkbox"
|
|
97
|
+
value="it"
|
|
98
|
+
role="menuitemcheckbox"
|
|
99
|
+
aria-checked="false"
|
|
100
|
+
aria-disabled="false"
|
|
101
|
+
tabindex="-1"
|
|
102
|
+
>Italian</syn-menu-item
|
|
103
|
+
>
|
|
104
|
+
|
|
105
|
+
<syn-menu-item
|
|
106
|
+
type="checkbox"
|
|
107
|
+
value="ja"
|
|
108
|
+
role="menuitemcheckbox"
|
|
109
|
+
aria-checked="false"
|
|
110
|
+
aria-disabled="false"
|
|
111
|
+
tabindex="-1"
|
|
112
|
+
>日本語</syn-menu-item
|
|
113
|
+
>
|
|
114
|
+
|
|
115
|
+
<syn-menu-item
|
|
116
|
+
type="checkbox"
|
|
117
|
+
value="ko"
|
|
118
|
+
role="menuitemcheckbox"
|
|
119
|
+
aria-checked="false"
|
|
120
|
+
aria-disabled="false"
|
|
121
|
+
tabindex="-1"
|
|
122
|
+
>한국어</syn-menu-item
|
|
123
|
+
>
|
|
124
|
+
|
|
125
|
+
<syn-menu-item
|
|
126
|
+
type="checkbox"
|
|
127
|
+
value="nl"
|
|
128
|
+
role="menuitemcheckbox"
|
|
129
|
+
aria-checked="false"
|
|
130
|
+
aria-disabled="false"
|
|
131
|
+
tabindex="-1"
|
|
132
|
+
>Nederlands</syn-menu-item
|
|
133
|
+
>
|
|
134
|
+
|
|
135
|
+
<syn-menu-item
|
|
136
|
+
type="checkbox"
|
|
137
|
+
value="pl"
|
|
138
|
+
role="menuitemcheckbox"
|
|
139
|
+
aria-checked="false"
|
|
140
|
+
aria-disabled="false"
|
|
141
|
+
tabindex="-1"
|
|
142
|
+
>Polski</syn-menu-item
|
|
143
|
+
>
|
|
144
|
+
|
|
145
|
+
<syn-menu-item
|
|
146
|
+
type="checkbox"
|
|
147
|
+
value="pt-BR"
|
|
148
|
+
role="menuitemcheckbox"
|
|
149
|
+
aria-checked="false"
|
|
150
|
+
aria-disabled="false"
|
|
151
|
+
tabindex="-1"
|
|
152
|
+
>Português (Brasil)</syn-menu-item
|
|
153
|
+
>
|
|
154
|
+
|
|
155
|
+
<syn-menu-item
|
|
156
|
+
type="checkbox"
|
|
157
|
+
value="ru"
|
|
158
|
+
role="menuitemcheckbox"
|
|
159
|
+
aria-checked="false"
|
|
160
|
+
aria-disabled="false"
|
|
161
|
+
tabindex="-1"
|
|
162
|
+
>Русский</syn-menu-item
|
|
163
|
+
>
|
|
164
|
+
|
|
165
|
+
<syn-menu-item
|
|
166
|
+
type="checkbox"
|
|
167
|
+
value="sv"
|
|
168
|
+
role="menuitemcheckbox"
|
|
169
|
+
aria-checked="false"
|
|
170
|
+
aria-disabled="false"
|
|
171
|
+
tabindex="-1"
|
|
172
|
+
>Svenska</syn-menu-item
|
|
173
|
+
>
|
|
174
|
+
|
|
175
|
+
<syn-menu-item
|
|
176
|
+
type="checkbox"
|
|
177
|
+
value="tr"
|
|
178
|
+
role="menuitemcheckbox"
|
|
179
|
+
aria-checked="false"
|
|
180
|
+
aria-disabled="false"
|
|
181
|
+
tabindex="-1"
|
|
182
|
+
>Türkçe</syn-menu-item
|
|
183
|
+
>
|
|
184
|
+
|
|
185
|
+
<syn-menu-item
|
|
186
|
+
type="checkbox"
|
|
187
|
+
value="zh-cn"
|
|
188
|
+
role="menuitemcheckbox"
|
|
189
|
+
aria-checked="false"
|
|
190
|
+
aria-disabled="false"
|
|
191
|
+
tabindex="-1"
|
|
192
|
+
>简体中文</syn-menu-item
|
|
193
|
+
>
|
|
194
|
+
|
|
195
|
+
<syn-menu-item
|
|
196
|
+
type="checkbox"
|
|
197
|
+
value="zh-tw"
|
|
198
|
+
role="menuitemcheckbox"
|
|
199
|
+
aria-checked="false"
|
|
200
|
+
aria-disabled="false"
|
|
201
|
+
tabindex="-1"
|
|
202
|
+
>正體中文</syn-menu-item
|
|
203
|
+
>
|
|
204
|
+
</syn-menu>
|
|
205
|
+
</syn-dropdown>
|
|
206
|
+
</nav>
|
|
207
|
+
<!-- /meta-navigation -->
|
|
208
|
+
</syn-header>
|
|
209
|
+
<!-- /header -->
|
|
210
|
+
|
|
211
|
+
<!-- .synergy-demo-content -->
|
|
212
|
+
<div class="synergy-demo-content">
|
|
213
|
+
<main class="synergy-demo-main">
|
|
214
|
+
<syn-card shadow="">
|
|
215
|
+
<h1 class="syn-heading--3x-large">
|
|
216
|
+
Current selected language:
|
|
217
|
+
<span>Deutsch</span>
|
|
218
|
+
</h1>
|
|
219
|
+
<p>
|
|
220
|
+
The following example demonstrates the usage of the
|
|
221
|
+
<code><syn-file></code> component with different language
|
|
222
|
+
settings. The first item will adapt to the currently selected
|
|
223
|
+
language, while the second one uses a fixed
|
|
224
|
+
<code>lang="en"</code> attribute, making it fixed to English
|
|
225
|
+
regardless of the selected language.
|
|
226
|
+
</p>
|
|
227
|
+
<p>
|
|
228
|
+
Try changing the language using the dropdown in the header to see how
|
|
229
|
+
the first file input updates its translations accordingly.
|
|
230
|
+
</p>
|
|
231
|
+
<div class="form">
|
|
232
|
+
<syn-file droparea="" size="medium" form=""></syn-file>
|
|
233
|
+
<syn-file droparea="" lang="en" size="medium" form=""></syn-file>
|
|
234
|
+
</div>
|
|
235
|
+
</syn-card>
|
|
236
|
+
</main>
|
|
237
|
+
<!-- /.synergy-demo-main -->
|
|
238
|
+
</div>
|
|
239
|
+
<!-- /.synergy-demo-content -->
|
|
240
|
+
</div>
|
|
241
|
+
<!-- /.synergy-demo-application -->
|
|
242
|
+
|
|
243
|
+
<style>
|
|
244
|
+
body {
|
|
245
|
+
margin: 0 !important;
|
|
246
|
+
padding: 0 !important;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.synergy-demo-application {
|
|
250
|
+
display: flex;
|
|
251
|
+
flex-direction: column;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.synergy-demo-content {
|
|
255
|
+
background: var(--syn-page-background-color-muted);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.synergy-demo-main {
|
|
259
|
+
display: flex;
|
|
260
|
+
flex-direction: column;
|
|
261
|
+
font: var(--syn-body-medium);
|
|
262
|
+
margin: var(--syn-spacing-medium);
|
|
263
|
+
|
|
264
|
+
h1 {
|
|
265
|
+
margin: 0 0 var(--syn-spacing-medium);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.form {
|
|
269
|
+
display: flex;
|
|
270
|
+
flex-direction: row;
|
|
271
|
+
gap: var(--syn-spacing-medium);
|
|
272
|
+
|
|
273
|
+
syn-file {
|
|
274
|
+
flex-basis: calc(50% - var(--syn-spacing-medium) / 2);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
</style>
|
|
279
|
+
```
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"@modelcontextprotocol/sdk": "^1.27.1",
|
|
11
11
|
"globby": "^16.1.1",
|
|
12
12
|
"zod": "^4.3.6",
|
|
13
|
-
"@synergy-design-system/assets": "2.0.
|
|
13
|
+
"@synergy-design-system/assets": "2.0.3"
|
|
14
14
|
},
|
|
15
15
|
"description": "MCP Server for the Synergy Design System",
|
|
16
16
|
"devDependencies": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"change-case": "^5.4.4",
|
|
21
21
|
"custom-elements-manifest": "^2.1.0",
|
|
22
22
|
"eslint": "^9.39.4",
|
|
23
|
-
"jest": "^30.
|
|
23
|
+
"jest": "^30.3.0",
|
|
24
24
|
"ora": "^9.3.0",
|
|
25
25
|
"playwright": "^1.58.2",
|
|
26
26
|
"prettier": "^3.8.1",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"serve-handler": "^6.1.7",
|
|
29
29
|
"ts-jest": "^29.4.6",
|
|
30
30
|
"typescript": "^5.9.3",
|
|
31
|
-
"@synergy-design-system/components": "3.10.4",
|
|
32
|
-
"@synergy-design-system/docs": "0.1.0",
|
|
33
31
|
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
34
|
-
"@synergy-design-system/
|
|
35
|
-
"@synergy-design-system/
|
|
36
|
-
"@synergy-design-system/tokens": "^3.
|
|
32
|
+
"@synergy-design-system/fonts": "1.0.5",
|
|
33
|
+
"@synergy-design-system/docs": "0.1.0",
|
|
34
|
+
"@synergy-design-system/tokens": "^3.11.0",
|
|
35
|
+
"@synergy-design-system/styles": "2.0.3",
|
|
36
|
+
"@synergy-design-system/components": "3.11.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.14.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",
|