@synergy-design-system/mcp 1.15.0 → 1.16.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 (15) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-switch/component.custom.styles.ts +26 -20
  4. package/metadata/packages/components/static/CHANGELOG.md +7 -0
  5. package/metadata/packages/tokens/CHANGELOG.md +7 -0
  6. package/metadata/packages/tokens/dark.css +1 -1
  7. package/metadata/packages/tokens/index.js +1 -1
  8. package/metadata/packages/tokens/light.css +1 -1
  9. package/metadata/packages/tokens/sick2018_dark.css +1 -1
  10. package/metadata/packages/tokens/sick2018_light.css +1 -1
  11. package/metadata/packages/tokens/sick2025_dark.css +1 -1
  12. package/metadata/packages/tokens/sick2025_light.css +1 -1
  13. package/metadata/static/components/syn-switch/docs.md +40 -15
  14. package/metadata/static/templates/breadcrumb.md +4 -0
  15. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/mcp-v1.16.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.15.0...mcp/1.16.0) (2025-10-29)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-switch ([#1046](https://github.com/synergy-design-system/synergy-design-system/issues/1046)) ([088ce44](https://github.com/synergy-design-system/synergy-design-system/commit/088ce44da4e948099f10c66d29ca48dc6da3b5bb))
7
+
1
8
  # [@synergy-design-system/mcp-v1.15.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.14.0...mcp/1.15.0) (2025-10-28)
2
9
 
3
10
 
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- 88e8ef9504ea15108a792da88481adef
1
+ 8e90718c5ac055c568c23e7889f96e36
package/metadata/packages/components/components/syn-switch/component.custom.styles.ts CHANGED
@@ -2,14 +2,14 @@ import { css } from 'lit';
2
2
 
3
3
  export default css`
4
4
  :host([size='small']) {
5
- --height: calc(var(--syn-font-size-medium) + 2px);
6
- --thumb-size: var(--syn-font-size-small);
5
+ --height: calc(var(--syn-toggle-size-medium) + 2px);
6
+ --thumb-size: var(--syn-toggle-size-small);
7
7
  --width: calc((var(--height) * 2) - 6px);
8
8
  }
9
9
 
10
10
  :host([size='medium']) {
11
- --height: var(--syn-font-size-large);
12
- --thumb-size: var(--syn-font-size-medium);
11
+ --height: calc(var(--syn-toggle-size-medium) + 4px);
12
+ --thumb-size: var(--syn-toggle-size-medium);
13
13
  --width: calc((var(--height) * 2) - 6px);
14
14
  }
15
15
 
@@ -42,18 +42,24 @@ export default css`
42
42
  }
43
43
 
44
44
  .switch__control {
45
- background-color: var(--syn-color-neutral-600);
46
- border: solid var(--syn-border-width-medium) var(--syn-color-neutral-600);
45
+ background-color: var(--syn-input-icon-icon-clearable-color);
46
+ border: solid var(--syn-border-width-medium) var(--syn-input-icon-icon-clearable-color);
47
47
  }
48
48
 
49
- .switch__control .switch__thumb {
49
+ .switch__control .switch__thumb {
50
50
  border: none;
51
- }
51
+ }
52
+
53
+ /* Checked */
54
+ .switch--checked .switch__control {
55
+ background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
56
+ border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
57
+ }
52
58
 
53
59
  /* Hover */
54
60
  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
55
- background-color: var(--syn-color-neutral-900);
56
- border-color: var(--syn-color-neutral-900);
61
+ background-color: var(--syn-input-icon-icon-clearable-color-hover);
62
+ border-color: var(--syn-input-icon-icon-clearable-color-hover);
57
63
  }
58
64
 
59
65
  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
@@ -62,8 +68,8 @@ export default css`
62
68
 
63
69
  /* Checked + hover */
64
70
  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
65
- background-color: var(--syn-color-primary-900);
66
- border-color: var(--syn-color-primary-900);
71
+ background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
72
+ border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
67
73
  }
68
74
 
69
75
  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
@@ -72,8 +78,8 @@ export default css`
72
78
 
73
79
  /* Focus */
74
80
  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
75
- background-color: var(--syn-color-neutral-600);
76
- border-color: var(--syn-color-neutral-600);
81
+ background-color: var(--syn-input-icon-icon-clearable-color);
82
+ border-color: var(--syn-input-icon-icon-clearable-color);
77
83
  outline: var(--syn-focus-ring);
78
84
  outline-offset: var(--syn-focus-ring-offset);
79
85
  }
@@ -85,8 +91,8 @@ export default css`
85
91
 
86
92
  /* Checked + focus */
87
93
  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
88
- background-color: var(--syn-color-primary-900);
89
- border-color: var(--syn-color-primary-900);
94
+ background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
95
+ border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
90
96
  outline: var(--syn-focus-ring);
91
97
  outline-offset: var(--syn-focus-ring-offset);
92
98
  }
@@ -101,12 +107,12 @@ export default css`
101
107
  }
102
108
 
103
109
  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control {
104
- background-color: var(--syn-color-error-700);
105
- border-color: var(--syn-color-error-700);
110
+ background-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
111
+ border-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
106
112
  }
107
113
 
108
114
  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
109
- background-color: var(--syn-color-error-900);
110
- border-color: var(--syn-color-error-900);
115
+ background-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
116
+ border-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
111
117
  }
112
118
  `;
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/components-v2.55.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.54.0...components/2.55.0) (2025-10-29)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-switch ([#1046](https://github.com/synergy-design-system/synergy-design-system/issues/1046)) ([088ce44](https://github.com/synergy-design-system/synergy-design-system/commit/088ce44da4e948099f10c66d29ca48dc6da3b5bb))
7
+
1
8
  # [@synergy-design-system/components-v2.54.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.53.0...components/2.54.0) (2025-10-28)
2
9
 
3
10
 
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/tokens-v2.36.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.35.0...tokens/2.36.0) (2025-10-29)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-switch ([#1046](https://github.com/synergy-design-system/synergy-design-system/issues/1046)) ([088ce44](https://github.com/synergy-design-system/synergy-design-system/commit/088ce44da4e948099f10c66d29ca48dc6da3b5bb))
7
+
1
8
  # [@synergy-design-system/tokens-v2.35.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.34.0...tokens/2.35.0) (2025-10-28)
2
9
 
3
10
 
package/metadata/packages/tokens/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.34.0
2
+ * @synergy-design-system/tokens version 2.35.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.34.0
2
+ * @synergy-design-system/tokens version 2.35.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
package/metadata/packages/tokens/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.34.0
2
+ * @synergy-design-system/tokens version 2.35.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.34.0
2
+ * @synergy-design-system/tokens version 2.35.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.34.0
2
+ * @synergy-design-system/tokens version 2.35.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.34.0
2
+ * @synergy-design-system/tokens version 2.35.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.34.0
2
+ * @synergy-design-system/tokens version 2.35.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/static/components/syn-switch/docs.md CHANGED
@@ -18,6 +18,16 @@ Use the checked attribute to activate the switch.
18
18
 
19
19
  ---
20
20
 
21
+ ## Focus
22
+
23
+ The focus event gives the user feedback that the Switch has been focused by the keyboard interaction.
24
+
25
+ ```html
26
+ <syn-switch title="" size="medium" form="">Focused</syn-switch>
27
+ ```
28
+
29
+ ---
30
+
21
31
  ## Disabled
22
32
 
23
33
  Use the disabled attribute to disable the switch.
@@ -28,12 +38,39 @@ Use the disabled attribute to disable the switch.
28
38
 
29
39
  ---
30
40
 
31
- ## Focus
41
+ ## Sizes
32
42
 
33
- The focus event gives the user feedback that the Switch has been focused by the keyboard interaction.
43
+ Use the size attribute to change a switch’s size.
34
44
 
35
45
  ```html
36
- <syn-switch title="" size="medium" form="">Focused</syn-switch>
46
+ <div
47
+ style="
48
+ gap: var(--syn-spacing-large);
49
+ display: flex;
50
+ flex-direction: column;
51
+ align-items: flex-start;
52
+ "
53
+ >
54
+ <syn-switch size="small" title="" form="">Small</syn-switch>
55
+ <syn-switch size="medium" title="" form="">Medium</syn-switch>
56
+ <syn-switch size="large" title="" form="">Large</syn-switch>
57
+ </div>
58
+ ```
59
+
60
+ ---
61
+
62
+ ## Help Text
63
+
64
+ Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.The help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.
65
+
66
+ ```html
67
+ <syn-switch
68
+ help-text="What should the user know about the switch?"
69
+ title=""
70
+ size="medium"
71
+ form=""
72
+ >Label</syn-switch
73
+ >
37
74
  ```
38
75
 
39
76
  ---
@@ -60,15 +97,3 @@ The invalid status is used to warn the user that the Switch is invalid.
60
97
  }
61
98
  </style>
62
99
  ```
63
-
64
- ---
65
-
66
- ## Sizes
67
-
68
- Use the size attribute to change a switch’s size.
69
-
70
- ```html
71
- <syn-switch size="small" title="" form="">Small</syn-switch><br />
72
- <syn-switch size="medium" title="" form="">Medium</syn-switch><br />
73
- <syn-switch size="large" title="" form="">Large</syn-switch>
74
- ```
package/metadata/static/templates/breadcrumb.md CHANGED
@@ -152,6 +152,10 @@
152
152
  #breadcrumb-responsive .back-icon {
153
153
  display: none;
154
154
  }
155
+ /* Remove the margin of the prefix slot */
156
+ #breadcrumb-responsive syn-breadcrumb-item:has(> .back-icon)::part(prefix) {
157
+ display: none;
158
+ }
155
159
  }
156
160
 
157
161
  /**
package/package.json CHANGED
@@ -33,11 +33,11 @@
33
33
  "serve-handler": "^6.1.6",
34
34
  "ts-jest": "^29.4.4",
35
35
  "typescript": "^5.9.3",
36
- "@synergy-design-system/components": "2.54.0",
37
36
  "@synergy-design-system/docs": "0.1.0",
38
- "@synergy-design-system/styles": "1.8.1",
37
+ "@synergy-design-system/tokens": "^2.36.0",
39
38
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
40
- "@synergy-design-system/tokens": "^2.35.0"
39
+ "@synergy-design-system/components": "2.55.0",
40
+ "@synergy-design-system/styles": "1.8.1"
41
41
  },
42
42
  "exports": {
43
43
  ".": {
@@ -122,7 +122,7 @@
122
122
  "directory": "packages/mcp"
123
123
  },
124
124
  "type": "module",
125
- "version": "1.15.0",
125
+ "version": "1.16.0",
126
126
  "scripts": {
127
127
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
128
128
  "build:all": "pnpm run build && pnpm run build:storybook",