@synergy-design-system/mcp 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/mcp-v1.8.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.7.1...mcp/1.8.0) (2025-10-13)
+
+
+### Features
+
+* ✨ CD update for syn-progress-ring ([#1033](https://github.com/synergy-design-system/synergy-design-system/issues/1033)) ([ba51374](https://github.com/synergy-design-system/synergy-design-system/commit/ba51374977ad486c2a8020586718740e60da7f51))
+
+# [@synergy-design-system/mcp-v1.7.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.7.0...mcp/1.7.1) (2025-10-08)
+
+
+### Bug Fixes
+
+* 🐛 Subsequently changed delimiter not taking into account for option value ([#1040](https://github.com/synergy-design-system/synergy-design-system/issues/1040)) ([fb45b32](https://github.com/synergy-design-system/synergy-design-system/commit/fb45b32c36d39046da754a294bff79d1a0ffeb42))
+
 # [@synergy-design-system/mcp-v1.7.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.6.2...mcp/1.7.0) (2025-10-02)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-744ff99772420e24dc148ca4f4c88ddf
+14318f8da07d1d58c70403ccd387ff79

package/metadata/packages/components/components/syn-option/component.ts

@@ -44,6 +44,8 @@ export default class SynOption extends SynergyElement {
   // @ts-expect-error - Controller is currently unused
   private readonly localize = new LocalizeController(this);
 
+  // #1036: Needed to store the original value before any delimiter processing
+  private originalValue: string | number = '';
   private isInitialized = false;
 
   @query('.option__label') defaultSlot: HTMLSlotElement;
@@ -110,24 +112,39 @@ export default class SynOption extends SynergyElement {
     this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
   }
 
+  @watch('delimiter')
+  handleDelimiterChange() {
+    this.sanitizeValueForDelimiter();
+  }
+
   @watch('value')
   handleValueChange() {
-    if (typeof this.value === 'number') {
+    this.originalValue = this.value;
+    this.sanitizeValueForDelimiter();
+  }
+
+  /**
+   * Replaces any occurrences of the delimiter in the option's original value with underscores.
+   */
+  sanitizeValueForDelimiter() {
+    let value = this.originalValue;
+    if (typeof value === 'number') {
       return;
     }
 
     // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
     // instead of requiring them to cast the value to a string.
-    if (typeof this.value !== 'string') {
-      this.value = String(this.value);
+    if (typeof value !== 'string') {
+      value = String(value);
     }
 
     const { delimiter } = this;
 
-    if (this.value.includes(delimiter)) {
+    if (value.includes(delimiter)) {
       console.error(`Option values cannot include "${delimiter}". All occurrences of "${delimiter}" have been replaced with "_".`, this);
-      this.value = delimiterToWhiteSpace(this.value, this.delimiter);
+      value = delimiterToWhiteSpace(value, this.delimiter);
     }
+    this.value = value;
   }
 
   /** Returns a plain text label based on the option's content. */

package/metadata/packages/components/components/syn-progress-bar/component.custom.styles.ts

@@ -4,7 +4,8 @@ export default css`
   :host {
     --height: var(--syn-font-size-medium);
     --speed: 2.5s;
-    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));
+    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));
   }
 
   .progress-bar {

package/metadata/packages/components/components/syn-progress-ring/component.custom.styles.ts

@@ -4,6 +4,8 @@ export default css`
   :host {
     --size: 120px;
     --track-width: var(--syn-spacing-x-small);
+    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));
+    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));
   }
 
   .progress-ring__indicator {

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/components-v2.47.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.46.1...components/2.47.0) (2025-10-13)
+
+
+### Features
+
+* ✨ CD update for syn-progress-ring ([#1033](https://github.com/synergy-design-system/synergy-design-system/issues/1033)) ([ba51374](https://github.com/synergy-design-system/synergy-design-system/commit/ba51374977ad486c2a8020586718740e60da7f51))
+
+# [@synergy-design-system/components-v2.46.1](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.46.0...components/2.46.1) (2025-10-08)
+
+
+### Bug Fixes
+
+* 🐛 Subsequently changed delimiter not taking into account for option value ([#1040](https://github.com/synergy-design-system/synergy-design-system/issues/1040)) ([fb45b32](https://github.com/synergy-design-system/synergy-design-system/commit/fb45b32c36d39046da754a294bff79d1a0ffeb42))
+
 # [@synergy-design-system/components-v2.46.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.45.2...components/2.46.0) (2025-10-02)
 
 

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/tokens-v2.28.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.27.0...tokens/2.28.0) (2025-10-13)
+
+
+### Features
+
+* ✨ CD update for syn-progress-ring ([#1033](https://github.com/synergy-design-system/synergy-design-system/issues/1033)) ([ba51374](https://github.com/synergy-design-system/synergy-design-system/commit/ba51374977ad486c2a8020586718740e60da7f51))
+
 # [@synergy-design-system/tokens-v2.27.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.26.1...tokens/2.27.0) (2025-10-02)
 
 

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.26.1
+ * @synergy-design-system/tokens version 2.27.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -209,6 +209,8 @@
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);
   --syn-panel-border-width: var(--syn-border-width-small);
+  --syn-progress-indicator-color: var(--syn-color-primary-600);
+  --syn-progress-track-color: var(--syn-color-neutral-200);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.26.1
+ * @synergy-design-system/tokens version 2.27.0
  * SICK Global UX Foundation
  */
 
@@ -1013,6 +1013,16 @@ export const SynPanelBorderRadius = 'var(--syn-panel-border-radius)';
  */
 export const SynPanelBorderWidth = 'var(--syn-panel-border-width)';
 
+/**
+ * @type {string}
+ */
+export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
+
+/**
+ * @type {string}
+ */
+export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.26.1
+ * @synergy-design-system/tokens version 2.27.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -209,6 +209,8 @@
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);
   --syn-panel-border-width: var(--syn-border-width-small);
+  --syn-progress-indicator-color: var(--syn-color-primary-600);
+  --syn-progress-track-color: var(--syn-color-neutral-200);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.26.1
+ * @synergy-design-system/tokens version 2.27.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -209,6 +209,8 @@
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);
   --syn-panel-border-width: var(--syn-border-width-small);
+  --syn-progress-indicator-color: var(--syn-color-primary-600);
+  --syn-progress-track-color: var(--syn-color-neutral-200);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.26.1
+ * @synergy-design-system/tokens version 2.27.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -209,6 +209,8 @@
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);
   --syn-panel-border-width: var(--syn-border-width-small);
+  --syn-progress-indicator-color: var(--syn-color-primary-600);
+  --syn-progress-track-color: var(--syn-color-neutral-200);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.26.1
+ * @synergy-design-system/tokens version 2.27.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -209,6 +209,8 @@
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);
   --syn-panel-border-width: var(--syn-border-width-small);
+  --syn-progress-indicator-color: var(--syn-color-primary-500);
+  --syn-progress-track-color: var(--syn-color-neutral-300);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.26.1
+ * @synergy-design-system/tokens version 2.27.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -209,6 +209,8 @@
   --syn-panel-border-color: #e6e1dc;
   --syn-panel-border-radius: var(--syn-border-radius-medium);
   --syn-panel-border-width: var(--syn-border-width-small);
+  --syn-progress-indicator-color: var(--syn-color-primary-700);
+  --syn-progress-track-color: var(--syn-color-neutral-100);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
   --syn-spacing-3x-large: 64px;

package/metadata/static/components/syn-progress-ring/docs.md

@@ -38,7 +38,7 @@ To change the color, use the --track-color and --indicator-color custom prop
 ```html
 <syn-progress-ring
   value="50"
-  style="--indicator-color: var(--syn-color-success-600)"
+  style="--indicator-color: var(--syn-color-success-700)"
 ></syn-progress-ring>
 ```
 

package/package.json

@@ -33,11 +33,11 @@
     "semantic-release-monorepo": "7.0.5",
     "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
-    "@synergy-design-system/components": "2.46.0",
     "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/tokens": "^2.27.0",
-    "@synergy-design-system/styles": "1.8.0"
+    "@synergy-design-system/styles": "1.8.0",
+    "@synergy-design-system/components": "2.47.0",
+    "@synergy-design-system/tokens": "^2.28.0"
   },
   "exports": {
     ".": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",