@synergy-design-system/mcp 1.21.0 → 1.22.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 (16) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/utilities/storybook/scraper.js +37 -1
  3. package/metadata/checksum.txt +1 -1
  4. package/metadata/packages/components/components/syn-range/component.styles.ts +11 -11
  5. package/metadata/packages/components/components/syn-range-tick/component.styles.ts +1 -1
  6. package/metadata/packages/components/static/CHANGELOG.md +13 -0
  7. package/metadata/packages/tokens/CHANGELOG.md +8 -0
  8. package/metadata/packages/tokens/dark.css +11 -5
  9. package/metadata/packages/tokens/index.js +31 -1
  10. package/metadata/packages/tokens/light.css +11 -5
  11. package/metadata/packages/tokens/sick2018_dark.css +11 -5
  12. package/metadata/packages/tokens/sick2018_light.css +11 -5
  13. package/metadata/packages/tokens/sick2025_dark.css +22 -16
  14. package/metadata/packages/tokens/sick2025_light.css +11 -5
  15. package/metadata/static/components/syn-combobox/docs.md +0 -41
  16. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.22.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
8
+
9
+ feat: ✨ Brand update for syn-range and syn-range-tick (#966)
10
+
11
+ ## 1.21.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [#1080](https://github.com/synergy-design-system/synergy-design-system/pull/1080) [`aab4c0e`](https://github.com/synergy-design-system/synergy-design-system/commit/aab4c0e23b075e4b3c98d5d14d754c718fd74546) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-10
16
+
17
+ fix: 🐛 MCP: Exclude flaky stories from output (#1077)
18
+
3
19
  ## 1.21.0
4
20
 
5
21
  ### Minor Changes
package/dist/utilities/storybook/scraper.js CHANGED
@@ -3,6 +3,34 @@ import { dirname } from 'node:path';
3
3
  import { mkdir, writeFile } from 'node:fs/promises';
4
4
  import { chromium } from 'playwright';
5
5
  import prettier from 'prettier';
6
+ import storybookOutput from '@synergy-design-system/docs/dist/index.json' with { type: 'json' };
7
+ /**
8
+ * Check if a story should be skipped based on its tags
9
+ * @param storyId The story ID to check (e.g., "components-syn-combobox--async-options")
10
+ * @returns true if the story should be skipped, false otherwise
11
+ */
12
+ function shouldSkipStory(storyId) {
13
+ const entries = storybookOutput.entries;
14
+ const storyEntry = entries[storyId];
15
+ return storyEntry?.tags?.includes('skip_mcp') || false;
16
+ }
17
+ /**
18
+ * Check if a story heading should be skipped by finding the corresponding story ID
19
+ * @param docsStoryId The docs story ID (e.g., "components-syn-combobox--docs")
20
+ * @param heading The story heading (e.g., "Async Options")
21
+ * @returns true if the story should be skipped, false otherwise
22
+ */
23
+ function shouldSkipStoryByHeading(docsStoryId, heading) {
24
+ // Get the component prefix from docs story ID
25
+ // (e.g., "components-syn-combobox" from "components-syn-combobox--docs")
26
+ const componentPrefix = docsStoryId.replace('--docs', '');
27
+ // Find matching story by converting heading to potential story ID format
28
+ // Story names are typically converted from "Async Options" to "async-options"
29
+ const potentialStorySlug = heading.toLowerCase().replace(/\s+/g, '-');
30
+ const potentialStoryId = `${componentPrefix}--${potentialStorySlug}`;
31
+ // Check if this potential story ID exists and should be skipped
32
+ return shouldSkipStory(potentialStoryId);
33
+ }
6
34
  export class StorybookScraper {
7
35
  config;
8
36
  constructor(config) {
@@ -37,7 +65,7 @@ export class StorybookScraper {
37
65
  await page.waitForSelector('.sb-anchor');
38
66
  // Extract the stories metadata first
39
67
  // We get basic info and identify stories that need iframe content
40
- const storyMetadata = await page.evaluate(() => Array.from(document.querySelectorAll('.sb-anchor'))
68
+ const rawStoryMetadata = await page.evaluate(() => Array.from(document.querySelectorAll('.sb-anchor'))
41
69
  .map((story, index) => {
42
70
  const description = story.querySelector(':scope > p')?.textContent || '';
43
71
  const exampleSource = story.querySelector('.sb-story #root-inner')?.innerHTML || '';
@@ -52,6 +80,14 @@ export class StorybookScraper {
52
80
  };
53
81
  })
54
82
  .filter(x => x.heading));
83
+ // Filter out stories that should be skipped based on their tags
84
+ const storyMetadata = rawStoryMetadata.filter(story => {
85
+ const shouldSkip = shouldSkipStoryByHeading(storyId, story.heading);
86
+ if (shouldSkip) {
87
+ console.log(`Skipping story "${story.heading}" due to skip_mcp tag`);
88
+ }
89
+ return !shouldSkip;
90
+ });
55
91
  // Process each story and handle iframe content if needed
56
92
  const results = await Promise.all(storyMetadata.map(async (storyMeta) => {
57
93
  let { exampleSource } = storyMeta;
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- f2250dcbcf8ea1a11b07fa054a2bce93
1
+ 801fb6a373aadb785308b079343111ee
package/metadata/packages/components/components/syn-range/component.styles.ts CHANGED
@@ -10,8 +10,8 @@ export default css`
10
10
  --thumb-hit-area-size: 1.4;
11
11
  --track-hit-area-size: var(--syn-spacing-medium);
12
12
  --track-active-offset: 0px;
13
- --track-color-active: var(--syn-color-primary-600);
14
- --track-color-inactive: var(--syn-color-neutral-200);
13
+ --track-color-active: var(--syn-range-track-color-active,var(--syn-color-primary-600));
14
+ --track-color-inactive: var(--syn-range-color-inactive, var(--syn-color-neutral-200));
15
15
  --track-height: var(--syn-spacing-2x-small);
16
16
 
17
17
  /* This is needed to get the full with of the element, including the border */
@@ -139,14 +139,14 @@ export default css`
139
139
 
140
140
  .track {
141
141
  background-color: var(--track-color-inactive);
142
- border-radius: var(--syn-border-radius-small);
142
+ border-radius: var(--syn-border-radius-pill);
143
143
  height: var(--track-height);
144
144
  margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);
145
145
  }
146
146
 
147
147
  .active-track {
148
148
  background-color: var(--track-color-active);
149
- border-radius: var(--syn-border-radius-small);
149
+ border-radius: var(--syn-border-radius-pill);
150
150
  height: var(--track-height);
151
151
  margin: 0 calc(var(--half-thumb-size) * -1);
152
152
  position: absolute;
@@ -155,8 +155,8 @@ export default css`
155
155
  }
156
156
 
157
157
  .thumb {
158
- background-color: var(--syn-color-primary-600);
159
- border: var(--syn-focus-ring-width) solid var(--syn-color-neutral-0);
158
+ background-color: var(--syn-interactive-emphasis-color,var(--syn-color-primary-600));
159
+ border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset, var(--syn-color-neutral-0));
160
160
  border-radius: var(--syn-border-radius-circle);
161
161
  cursor: pointer;
162
162
  display: block;
@@ -192,7 +192,7 @@ export default css`
192
192
  }
193
193
 
194
194
  .thumb.grabbed {
195
- background: var(--syn-color-primary-950);
195
+ background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
196
196
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
197
197
  cursor: grabbing;
198
198
  }
@@ -202,7 +202,7 @@ export default css`
202
202
  }
203
203
 
204
204
  .thumb:not(.grabbed):focus-visible {
205
- background: var(--syn-color-primary-600);
205
+ background: var(--syn-interactive-emphasis-color-hover,var(--syn-color-primary-900));
206
206
  outline: var(--syn-focus-ring);
207
207
  outline-offset: 0;
208
208
  }
@@ -223,7 +223,7 @@ export default css`
223
223
  }
224
224
 
225
225
  :host(:not([disabled])) .thumb:not(.grabbed):hover {
226
- background: var(--syn-color-primary-900);
226
+ background: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
227
227
  }
228
228
 
229
229
  :host(:not([disabled])) .thumb:hover::after {
@@ -275,10 +275,10 @@ export default css`
275
275
 
276
276
 
277
277
  :host([data-user-invalid]) .active-track {
278
- --track-color-active: var(--syn-input-border-color-focus-error);
278
+ --track-color-active: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
279
279
  }
280
280
 
281
281
  :host([data-user-invalid]) .thumb {
282
- background-color: var(--syn-input-border-color-focus-error);
282
+ background-color: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
283
283
  }
284
284
  `;
package/metadata/packages/components/components/syn-range-tick/component.styles.ts CHANGED
@@ -15,7 +15,7 @@ export default css`
15
15
  }
16
16
 
17
17
  .tick-line {
18
- background: var(--syn-color-neutral-400);
18
+ background: var(--syn-range-tick-color, var(--syn-color-neutral-400));
19
19
  height: var(--tick-height);
20
20
  }
21
21
 
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.60.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
8
+
9
+ feat: ✨ Brand update for syn-range and syn-range-tick (#966)
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [[`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32)]:
14
+ - @synergy-design-system/tokens@2.41.0
15
+
3
16
  ## 2.59.0
4
17
 
5
18
  ### Minor Changes
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.41.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
8
+
9
+ feat: ✨ Brand update for syn-range and syn-range-tick (#966)
10
+
3
11
  ## 2.40.0
4
12
 
5
13
  ### Minor Changes
package/metadata/packages/tokens/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.40.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/packages/tokens/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.40.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -833,6 +833,11 @@ export const SynInputBorderColorFocusError = 'var(--syn-input-border-color-focus
833
833
  */
834
834
  export const SynInputBorderColorHover = 'var(--syn-input-border-color-hover)';
835
835
 
836
+ /**
837
+ * @type {string}
838
+ */
839
+ export const SynInputBorderColorOffset = 'var(--syn-input-border-color-offset)';
840
+
836
841
  /**
837
842
  * @type {string}
838
843
  */
@@ -1248,6 +1253,31 @@ export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
1248
1253
  */
1249
1254
  export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
1250
1255
 
1256
+ /**
1257
+ * @type {string}
1258
+ */
1259
+ export const SynRangeColorInactive = 'var(--syn-range-color-inactive)';
1260
+
1261
+ /**
1262
+ * @type {string}
1263
+ */
1264
+ export const SynRangeErrorColor = 'var(--syn-range-error-color)';
1265
+
1266
+ /**
1267
+ * @type {string}
1268
+ */
1269
+ export const SynRangeTickColor = 'var(--syn-range-tick-color)';
1270
+
1271
+ /**
1272
+ * @type {string}
1273
+ */
1274
+ export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
1275
+
1276
+ /**
1277
+ * @type {string}
1278
+ */
1279
+ export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
1280
+
1251
1281
  /**
1252
1282
  * @type {string}
1253
1283
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.40.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.40.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.40.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.40.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-primary-400);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
175
175
  --syn-input-border-color-hover: var(--syn-color-primary-400);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-medium);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-800);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-500);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-300);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-300);
261
+ --syn-range-error-color: var(--syn-color-error-600);
262
+ --syn-range-tick-color: var(--syn-color-neutral-600);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
@@ -274,8 +280,8 @@
274
280
  --syn-table-background-color-alternating: var(--syn-color-neutral-200);
275
281
  --syn-table-background-color-header: var(--syn-color-neutral-300);
276
282
  --syn-table-border-color: var(--syn-color-neutral-300);
277
- --syn-table-shadow-end: rgba(0, 0, 0, 0);
278
- --syn-table-shadow-start: rgba(0, 0, 0, 0.8);
283
+ --syn-table-shadow-end: rgba(13, 13, 13, 0);
284
+ --syn-table-shadow-start: rgba(13, 13, 13, 0.8);
279
285
  --syn-text-decoration-default: none;
280
286
  --syn-text-decoration-underline: underline;
281
287
  --syn-toggle-size-large: var(--syn-spacing-large);
@@ -302,15 +308,15 @@
302
308
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
303
309
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
304
310
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
305
- --syn-shadow-medium: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
306
- --syn-shadow-large: 0px 0px 3px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
307
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 48px 0px rgba(0, 0, 0, 0.16);
308
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
309
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(0, 0, 0, 0.12), 0px -3px 8px 0px rgba(0, 0, 0, 0.12), 0px -4px 12px 0px rgba(0, 0, 0, 0.16);
310
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(0, 0, 0, 0.12), -3px 0px 8px 0px rgba(0, 0, 0, 0.12), -4px 0px 12px 0px rgba(0, 0, 0, 0.16);
311
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(0, 0, 0, 0.12), 3px 0px 8px 0px rgba(0, 0, 0, 0.12), 4px 0px 12px 0px rgba(0, 0, 0, 0.16);
312
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
313
- --syn-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
311
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
312
+ --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
313
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
314
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
315
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
316
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
317
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
318
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
319
+ --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
314
320
  --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
315
321
  --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
316
322
  --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.40.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-primary-700);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
175
175
  --syn-input-border-color-hover: var(--syn-color-primary-700);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-medium);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-700);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: #e6e1dc;
214
- --syn-input-readonly-background-color-disabled: #e6e1dc;
215
- --syn-input-readonly-background-color-focus: #e6e1dc;
216
- --syn-input-readonly-background-color-hover: #e6e1dc;
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-700);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-100);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-100);
261
+ --syn-range-error-color: var(--syn-color-error-600);
262
+ --syn-range-tick-color: var(--syn-color-neutral-500);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: #e6e1dc;
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/static/components/syn-combobox/docs.md CHANGED
@@ -2241,47 +2241,6 @@ The height of the filtered options list can be customized by setting the max-hei
2241
2241
 
2242
2242
  ---
2243
2243
 
2244
- ## Async Options
2245
-
2246
- It is possible to add options dynamically to the combobox e.g. if the option values need to be fetched asynchronously from a remote server or API.
2247
-
2248
- ```html
2249
- <syn-combobox
2250
- label="Async options"
2251
- class="async-combobox"
2252
- size="medium"
2253
- placement="bottom"
2254
- form=""
2255
- >
2256
- <syn-option
2257
- role="option"
2258
- aria-selected="false"
2259
- aria-disabled="false"
2260
- value=""
2261
- id="syn-combobox-option-0"
2262
- >Option 1</syn-option
2263
- >
2264
- <syn-option
2265
- role="option"
2266
- aria-selected="false"
2267
- aria-disabled="false"
2268
- value=""
2269
- id="syn-combobox-option-1"
2270
- >Option 2</syn-option
2271
- >
2272
- <syn-option
2273
- role="option"
2274
- aria-selected="false"
2275
- aria-disabled="false"
2276
- value=""
2277
- id="syn-combobox-option-2"
2278
- >Option 3</syn-option
2279
- >
2280
- </syn-combobox>
2281
- ```
2282
-
2283
- ---
2284
-
2285
2244
  ## Custom Filter
2286
2245
 
2287
2246
  A custom filter can be applied by passing a filter function to the filter property. This filter() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.
package/package.json CHANGED
@@ -28,11 +28,11 @@
28
28
  "serve-handler": "^6.1.6",
29
29
  "ts-jest": "^29.4.0",
30
30
  "typescript": "^5.9.3",
31
- "@synergy-design-system/components": "2.59.0",
31
+ "@synergy-design-system/components": "2.60.0",
32
32
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
33
+ "@synergy-design-system/docs": "0.1.0",
33
34
  "@synergy-design-system/styles": "1.9.0",
34
- "@synergy-design-system/tokens": "^2.40.0",
35
- "@synergy-design-system/docs": "0.1.0"
35
+ "@synergy-design-system/tokens": "^2.41.0"
36
36
  },
37
37
  "exports": {
38
38
  ".": {
@@ -66,7 +66,7 @@
66
66
  "directory": "packages/mcp"
67
67
  },
68
68
  "type": "module",
69
- "version": "1.21.0",
69
+ "version": "1.22.0",
70
70
  "scripts": {
71
71
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
72
72
  "build:all": "pnpm run build && pnpm run build:storybook",