@synergy-design-system/mcp 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/mcp-v1.17.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.16.0...mcp/1.17.0) (2025-11-03)
+
+
+### Features
+
+* ✨CD update for syn-alert ([#1064](https://github.com/synergy-design-system/synergy-design-system/issues/1064)) ([f9c0656](https://github.com/synergy-design-system/synergy-design-system/commit/f9c0656a268a71ea676ed0b937d8ca77cca2c924))
+
+# [@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)
+
+
+### Features
+
+* ✨ 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))
+
 # [@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)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-88e8ef9504ea15108a792da88481adef
+b3c892d8a836efef346cd0c94b64c7a8

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

@@ -3,9 +3,13 @@ import { css } from 'lit';
 export default css`
   .alert {
     /* Defines the used border and icon color for variants */
-    --variant-accent-color: var(--syn-panel-border-color);
+    --variant-color-border: var(--syn-alert-informative-color-border, var(--syn-panel-border-color));
+    --variant-color-background: var(--syn-alert-informative-color-background, var(--syn-panel-background-color));
+    --variant-color-icon: var(--syn-alert-informative-color-icon, var(--syn-color-primary-600));
+    --variant-color-indicator: var(--syn-alert-informative-color-indicator, var(--syn-color-primary-600));
 
-    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);
+    background-color: var(--variant-color-background);
+    border: var(--syn-panel-border-width) solid var(--variant-color-border);
     border-left: 0;
     border-radius: var(--syn-border-radius-none);
     color: var(--syn-typography-color-text);
@@ -20,7 +24,7 @@ export default css`
    * Note we also need to adjust our paddings to add the border width here
    */
   .alert::before {
-    background: var(--variant-accent-color);
+    background: var(--variant-color-indicator);
     bottom: -1px;
     content: "";
     left: 0;
@@ -50,7 +54,7 @@ export default css`
    * Alert Icon
    */
   .alert__icon {
-    color: var(--variant-accent-color);
+    color: var(--variant-color-icon);
     padding-block: var(--syn-spacing-medium);
     padding-inline-start: var(--syn-spacing-medium);
   }
@@ -66,25 +70,33 @@ export default css`
   }
 
   /**
-   * Variants should highlight the left border instead of top
+   * Variant colors
    */
-  .alert--primary {
-    --variant-accent-color: var(--syn-color-primary-600);
-  }
-
   .alert--success {
-    --variant-accent-color: var(--syn-color-success-500);
+    --variant-color-border: var(--syn-alert-success-color-border, var(--syn-panel-border-color));
+    --variant-color-background: var(--syn-alert-success-color-background, var(--syn-panel-background-color));
+    --variant-color-icon: var(--syn-alert-success-color-icon, var(--syn-color-success-500));
+    --variant-color-indicator: var(--syn-alert-success-color-indicator, var(--syn-color-success-500));
   }
 
   .alert--neutral {
-    --variant-accent-color: var(--syn-color-neutral-800);
+    --variant-color-border: var(--syn-alert-neutral-color-border, var(--syn-panel-border-color));
+    --variant-color-background: var(--syn-alert-neutral-color-background, var(--syn-panel-background-color));
+    --variant-color-icon: var(--syn-alert-neutral-color-icon, var(--syn-color-neutral-800));
+    --variant-color-indicator: var(--syn-alert-neutral-color-indicator, var(--syn-color-neutral-800));
   }
 
   .alert--warning {
-    --variant-accent-color: var(--syn-color-warning-400);
+    --variant-color-border: var(--syn-alert-warning-color-border, var(--syn-panel-border-color));
+    --variant-color-background: var(--syn-alert-warning-color-background, var(--syn-panel-background-color));
+    --variant-color-icon: var(--syn-alert-warning-color-icon, var(--syn-color-warning-400));
+    --variant-color-indicator: var(--syn-alert-warning-color-indicator, var(--syn-color-warning-400));
   }
 
   .alert--danger {
-    --variant-accent-color: var(--syn-color-error-600);
+    --variant-color-border: var(--syn-alert-error-color-border, var(--syn-panel-border-color));
+    --variant-color-background: var(--syn-alert-error-color-background, var(--syn-panel-background-color));
+    --variant-color-icon: var(--syn-alert-error-color-icon, var(--syn-color-error-600));
+    --variant-color-indicator: var(--syn-alert-error-color-indicator, var(--syn-color-error-600));
   }
 `;

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

@@ -2,14 +2,14 @@ import { css } from 'lit';
 
 export default css`
   :host([size='small']) {
-    --height: calc(var(--syn-font-size-medium) + 2px);
-    --thumb-size: var(--syn-font-size-small);
+    --height: calc(var(--syn-toggle-size-medium) + 2px);
+    --thumb-size: var(--syn-toggle-size-small);
     --width: calc((var(--height) * 2) - 6px);
   }
 
   :host([size='medium']) {
-    --height: var(--syn-font-size-large);
-    --thumb-size: var(--syn-font-size-medium);
+    --height: calc(var(--syn-toggle-size-medium) + 4px);
+    --thumb-size: var(--syn-toggle-size-medium);
     --width: calc((var(--height) * 2) - 6px);
   }
 
@@ -42,18 +42,24 @@ export default css`
   }
 
   .switch__control {
-    background-color: var(--syn-color-neutral-600);
-    border: solid var(--syn-border-width-medium) var(--syn-color-neutral-600);
+    background-color: var(--syn-input-icon-icon-clearable-color);
+    border: solid var(--syn-border-width-medium) var(--syn-input-icon-icon-clearable-color);
   }
 
-   .switch__control .switch__thumb {
+  .switch__control .switch__thumb {
     border: none;
-   }
+  }
+
+  /* Checked */
+  .switch--checked .switch__control {
+    background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+  }
 
   /* Hover */
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
-    background-color: var(--syn-color-neutral-900);
-    border-color: var(--syn-color-neutral-900);
+    background-color: var(--syn-input-icon-icon-clearable-color-hover);
+    border-color: var(--syn-input-icon-icon-clearable-color-hover);
   }
 
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
@@ -62,8 +68,8 @@ export default css`
 
   /* Checked + hover */
   .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
-    background-color: var(--syn-color-primary-900);
-    border-color: var(--syn-color-primary-900);
+    background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
   }
 
   .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
@@ -72,8 +78,8 @@ export default css`
 
   /* Focus */
   .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-color-neutral-600);
-    border-color: var(--syn-color-neutral-600);
+    background-color: var(--syn-input-icon-icon-clearable-color);
+    border-color: var(--syn-input-icon-icon-clearable-color);
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -85,8 +91,8 @@ export default css`
 
   /* Checked + focus */
   .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-color-primary-900);
-    border-color: var(--syn-color-primary-900);
+    background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -101,12 +107,12 @@ export default css`
   }
   
   :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control {
-    background-color: var(--syn-color-error-700);
-    border-color: var(--syn-color-error-700);
+    background-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
+    border-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
   }
 
   :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
-    background-color: var(--syn-color-error-900);
-    border-color: var(--syn-color-error-900);
+    background-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
+    border-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
   }
   `;

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

@@ -1,3 +1,17 @@
+# [@synergy-design-system/components-v2.56.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.55.0...components/2.56.0) (2025-11-03)
+
+
+### Features
+
+* ✨CD update for syn-alert ([#1064](https://github.com/synergy-design-system/synergy-design-system/issues/1064)) ([f9c0656](https://github.com/synergy-design-system/synergy-design-system/commit/f9c0656a268a71ea676ed0b937d8ca77cca2c924))
+
+# [@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)
+
+
+### Features
+
+* ✨ 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))
+
 # [@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)
 
 

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.37.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.36.0...tokens/2.37.0) (2025-11-03)
+
+
+### Features
+
+* ✨CD update for syn-alert ([#1064](https://github.com/synergy-design-system/synergy-design-system/issues/1064)) ([f9c0656](https://github.com/synergy-design-system/synergy-design-system/commit/f9c0656a268a71ea676ed0b937d8ca77cca2c924))
+
+# [@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)
+
+
+### Features
+
+* ✨ 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))
+
 # [@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)
 
 

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.34.0
+ * @synergy-design-system/tokens version 2.36.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,26 @@
 :root, .syn-sick2018-dark, .syn-theme-dark {
   color-scheme: dark;
 
+  --syn-alert-error-color-background: var(--syn-panel-background-color);
+  --syn-alert-error-color-border: var(--syn-panel-border-color);
+  --syn-alert-error-color-icon: var(--syn-color-error-600);
+  --syn-alert-error-color-indicator: var(--syn-color-error-600);
+  --syn-alert-informative-color-background: var(--syn-panel-background-color);
+  --syn-alert-informative-color-border: var(--syn-panel-border-color);
+  --syn-alert-informative-color-icon: var(--syn-color-info-600);
+  --syn-alert-informative-color-indicator: var(--syn-color-info-600);
+  --syn-alert-neutral-color-background: var(--syn-panel-background-color);
+  --syn-alert-neutral-color-border: var(--syn-panel-border-color);
+  --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
+  --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
+  --syn-alert-success-color-background: var(--syn-panel-background-color);
+  --syn-alert-success-color-border: var(--syn-panel-border-color);
+  --syn-alert-success-color-icon: var(--syn-color-success-500);
+  --syn-alert-success-color-indicator: var(--syn-color-success-500);
+  --syn-alert-warning-color-background: var(--syn-panel-background-color);
+  --syn-alert-warning-color-border: var(--syn-panel-border-color);
+  --syn-alert-warning-color-icon: var(--syn-color-warning-400);
+  --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
   --syn-badge-error-color-background: var(--syn-color-error-600);
   --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
   --syn-badge-informative-color-background: var(--syn-color-info-600);

package/metadata/packages/tokens/index.js

@@ -1,8 +1,108 @@
 /**
- * @synergy-design-system/tokens version 2.34.0
+ * @synergy-design-system/tokens version 2.36.0
  * SICK Global UX Foundation
  */
 
+/**
+ * @type {string}
+ */
+export const SynAlertErrorColorBackground = 'var(--syn-alert-error-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertErrorColorBorder = 'var(--syn-alert-error-color-border)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertErrorColorIcon = 'var(--syn-alert-error-color-icon)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertErrorColorIndicator = 'var(--syn-alert-error-color-indicator)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertInformativeColorBackground = 'var(--syn-alert-informative-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertInformativeColorBorder = 'var(--syn-alert-informative-color-border)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertInformativeColorIcon = 'var(--syn-alert-informative-color-icon)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertInformativeColorIndicator = 'var(--syn-alert-informative-color-indicator)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertNeutralColorBackground = 'var(--syn-alert-neutral-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertNeutralColorBorder = 'var(--syn-alert-neutral-color-border)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertNeutralColorIcon = 'var(--syn-alert-neutral-color-icon)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertNeutralColorIndicator = 'var(--syn-alert-neutral-color-indicator)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertSuccessColorBackground = 'var(--syn-alert-success-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertSuccessColorBorder = 'var(--syn-alert-success-color-border)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertSuccessColorIcon = 'var(--syn-alert-success-color-icon)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertSuccessColorIndicator = 'var(--syn-alert-success-color-indicator)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertWarningColorBackground = 'var(--syn-alert-warning-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertWarningColorBorder = 'var(--syn-alert-warning-color-border)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertWarningColorIcon = 'var(--syn-alert-warning-color-icon)';
+
+/**
+ * @type {string}
+ */
+export const SynAlertWarningColorIndicator = 'var(--syn-alert-warning-color-indicator)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.34.0
+ * @synergy-design-system/tokens version 2.36.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,26 @@
 :root, .syn-sick2018-light, .syn-theme-light {
   color-scheme: light;
 
+  --syn-alert-error-color-background: var(--syn-panel-background-color);
+  --syn-alert-error-color-border: var(--syn-panel-border-color);
+  --syn-alert-error-color-icon: var(--syn-color-error-600);
+  --syn-alert-error-color-indicator: var(--syn-color-error-600);
+  --syn-alert-informative-color-background: var(--syn-panel-background-color);
+  --syn-alert-informative-color-border: var(--syn-panel-border-color);
+  --syn-alert-informative-color-icon: var(--syn-color-info-600);
+  --syn-alert-informative-color-indicator: var(--syn-color-info-600);
+  --syn-alert-neutral-color-background: var(--syn-panel-background-color);
+  --syn-alert-neutral-color-border: var(--syn-panel-border-color);
+  --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
+  --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
+  --syn-alert-success-color-background: var(--syn-panel-background-color);
+  --syn-alert-success-color-border: var(--syn-panel-border-color);
+  --syn-alert-success-color-icon: var(--syn-color-success-500);
+  --syn-alert-success-color-indicator: var(--syn-color-success-500);
+  --syn-alert-warning-color-background: var(--syn-panel-background-color);
+  --syn-alert-warning-color-border: var(--syn-panel-border-color);
+  --syn-alert-warning-color-icon: var(--syn-color-warning-400);
+  --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
   --syn-badge-error-color-background: var(--syn-color-error-600);
   --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
   --syn-badge-informative-color-background: var(--syn-color-info-600);

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.34.0
+ * @synergy-design-system/tokens version 2.36.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,26 @@
 :root, .syn-sick2018-dark, .syn-theme-dark {
   color-scheme: dark;
 
+  --syn-alert-error-color-background: var(--syn-panel-background-color);
+  --syn-alert-error-color-border: var(--syn-panel-border-color);
+  --syn-alert-error-color-icon: var(--syn-color-error-600);
+  --syn-alert-error-color-indicator: var(--syn-color-error-600);
+  --syn-alert-informative-color-background: var(--syn-panel-background-color);
+  --syn-alert-informative-color-border: var(--syn-panel-border-color);
+  --syn-alert-informative-color-icon: var(--syn-color-info-600);
+  --syn-alert-informative-color-indicator: var(--syn-color-info-600);
+  --syn-alert-neutral-color-background: var(--syn-panel-background-color);
+  --syn-alert-neutral-color-border: var(--syn-panel-border-color);
+  --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
+  --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
+  --syn-alert-success-color-background: var(--syn-panel-background-color);
+  --syn-alert-success-color-border: var(--syn-panel-border-color);
+  --syn-alert-success-color-icon: var(--syn-color-success-500);
+  --syn-alert-success-color-indicator: var(--syn-color-success-500);
+  --syn-alert-warning-color-background: var(--syn-panel-background-color);
+  --syn-alert-warning-color-border: var(--syn-panel-border-color);
+  --syn-alert-warning-color-icon: var(--syn-color-warning-400);
+  --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
   --syn-badge-error-color-background: var(--syn-color-error-600);
   --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
   --syn-badge-informative-color-background: var(--syn-color-info-600);

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.34.0
+ * @synergy-design-system/tokens version 2.36.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,26 @@
 :root, .syn-sick2018-light, .syn-theme-light {
   color-scheme: light;
 
+  --syn-alert-error-color-background: var(--syn-panel-background-color);
+  --syn-alert-error-color-border: var(--syn-panel-border-color);
+  --syn-alert-error-color-icon: var(--syn-color-error-600);
+  --syn-alert-error-color-indicator: var(--syn-color-error-600);
+  --syn-alert-informative-color-background: var(--syn-panel-background-color);
+  --syn-alert-informative-color-border: var(--syn-panel-border-color);
+  --syn-alert-informative-color-icon: var(--syn-color-info-600);
+  --syn-alert-informative-color-indicator: var(--syn-color-info-600);
+  --syn-alert-neutral-color-background: var(--syn-panel-background-color);
+  --syn-alert-neutral-color-border: var(--syn-panel-border-color);
+  --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
+  --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
+  --syn-alert-success-color-background: var(--syn-panel-background-color);
+  --syn-alert-success-color-border: var(--syn-panel-border-color);
+  --syn-alert-success-color-icon: var(--syn-color-success-500);
+  --syn-alert-success-color-indicator: var(--syn-color-success-500);
+  --syn-alert-warning-color-background: var(--syn-panel-background-color);
+  --syn-alert-warning-color-border: var(--syn-panel-border-color);
+  --syn-alert-warning-color-icon: var(--syn-color-warning-400);
+  --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
   --syn-badge-error-color-background: var(--syn-color-error-600);
   --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
   --syn-badge-informative-color-background: var(--syn-color-info-600);

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.34.0
+ * @synergy-design-system/tokens version 2.36.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,26 @@
 :root, .syn-sick2025-dark {
   color-scheme: dark;
 
+  --syn-alert-error-color-background: var(--syn-color-error-50);
+  --syn-alert-error-color-border: var(--syn-color-error-50);
+  --syn-alert-error-color-icon: var(--syn-typography-color-text);
+  --syn-alert-error-color-indicator: var(--syn-color-error-600);
+  --syn-alert-informative-color-background: var(--syn-color-info-50);
+  --syn-alert-informative-color-border: var(--syn-color-info-50);
+  --syn-alert-informative-color-icon: var(--syn-typography-color-text);
+  --syn-alert-informative-color-indicator: var(--syn-color-info-800);
+  --syn-alert-neutral-color-background: var(--syn-color-neutral-300);
+  --syn-alert-neutral-color-border: var(--syn-color-neutral-300);
+  --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
+  --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
+  --syn-alert-success-color-background: var(--syn-color-success-50);
+  --syn-alert-success-color-border: var(--syn-color-success-50);
+  --syn-alert-success-color-icon: var(--syn-typography-color-text);
+  --syn-alert-success-color-indicator: var(--syn-color-success-600);
+  --syn-alert-warning-color-background: var(--syn-color-warning-50);
+  --syn-alert-warning-color-border: var(--syn-color-warning-50);
+  --syn-alert-warning-color-icon: var(--syn-typography-color-text);
+  --syn-alert-warning-color-indicator: var(--syn-color-warning-800);
   --syn-badge-error-color-background: var(--syn-color-error-600);
   --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
   --syn-badge-informative-color-background: #a6e9ff;
@@ -206,8 +226,8 @@
   --syn-input-width: var(--syn-border-width-small);
   --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
   --syn-interactive-emphasis-color: var(--syn-color-primary-500);
-  --syn-interactive-emphasis-color-active: var(--syn-color-neutral-1000);
-  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-emphasis-color-active: var(--syn-color-primary-800);
+  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-700);
   --syn-interactive-quiet-color: var(--syn-color-neutral-1000);
   --syn-interactive-quiet-color-active: var(--syn-color-primary-600);
   --syn-interactive-quiet-color-hover: var(--syn-color-primary-500);

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.34.0
+ * @synergy-design-system/tokens version 2.36.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,26 @@
 :root, .syn-sick2025-light {
   color-scheme: light;
 
+  --syn-alert-error-color-background: var(--syn-color-error-100);
+  --syn-alert-error-color-border: var(--syn-color-error-100);
+  --syn-alert-error-color-icon: var(--syn-typography-color-text);
+  --syn-alert-error-color-indicator: var(--syn-color-error-600);
+  --syn-alert-informative-color-background: var(--syn-color-info-100);
+  --syn-alert-informative-color-border: var(--syn-color-info-100);
+  --syn-alert-informative-color-icon: var(--syn-typography-color-text);
+  --syn-alert-informative-color-indicator: var(--syn-color-info-400);
+  --syn-alert-neutral-color-background: #e6e1dc;
+  --syn-alert-neutral-color-border: #e6e1dc;
+  --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
+  --syn-alert-neutral-color-indicator: #d5ccc5;
+  --syn-alert-success-color-background: var(--syn-color-success-100);
+  --syn-alert-success-color-border: var(--syn-color-success-100);
+  --syn-alert-success-color-icon: var(--syn-typography-color-text);
+  --syn-alert-success-color-indicator: var(--syn-color-success-800);
+  --syn-alert-warning-color-background: var(--syn-color-warning-100);
+  --syn-alert-warning-color-border: var(--syn-color-warning-100);
+  --syn-alert-warning-color-icon: var(--syn-typography-color-text);
+  --syn-alert-warning-color-indicator: var(--syn-color-warning-500);
   --syn-badge-error-color-background: var(--syn-color-error-600);
   --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
   --syn-badge-informative-color-background: #26c9ff;
@@ -204,9 +224,9 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
-  --syn-interactive-background-color-hover: #f8f7f6;
+  --syn-interactive-background-color-hover: #f2f0ed;
   --syn-interactive-emphasis-color: var(--syn-color-primary-700);
-  --syn-interactive-emphasis-color-active: var(--syn-color-neutral-950);
+  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
   --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
   --syn-interactive-quiet-color: var(--syn-color-neutral-950);
   --syn-interactive-quiet-color-active: var(--syn-color-primary-800);

package/metadata/static/components/syn-switch/docs.md

@@ -18,6 +18,16 @@ Use the checked attribute to activate the switch.
 
 ---
 
+## Focus
+
+The focus event gives the user feedback that the Switch has been focused by the keyboard interaction.
+
+```html
+<syn-switch title="" size="medium" form="">Focused</syn-switch>
+```
+
+---
+
 ## Disabled
 
 Use the disabled attribute to disable the switch.
@@ -28,12 +38,39 @@ Use the disabled attribute to disable the switch.
 
 ---
 
-## Focus
+## Sizes
 
-The focus event gives the user feedback that the Switch has been focused by the keyboard interaction.
+Use the size attribute to change a switch’s size.
 
 ```html
-<syn-switch title="" size="medium" form="">Focused</syn-switch>
+<div
+  style="
+    gap: var(--syn-spacing-large);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  "
+>
+  <syn-switch size="small" title="" form="">Small</syn-switch>
+  <syn-switch size="medium" title="" form="">Medium</syn-switch>
+  <syn-switch size="large" title="" form="">Large</syn-switch>
+</div>
+```
+
+---
+
+## Help Text
+
+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.
+
+```html
+<syn-switch
+  help-text="What should the user know about the switch?"
+  title=""
+  size="medium"
+  form=""
+  >Label</syn-switch
+>
 ```
 
 ---
@@ -60,15 +97,3 @@ The invalid status is used to warn the user that the Switch is invalid.
   }
 </style>
 ```
-
----
-
-## Sizes
-
-Use the size attribute to change a switch’s size.
-
-```html
-<syn-switch size="small" title="" form="">Small</syn-switch><br />
-<syn-switch size="medium" title="" form="">Medium</syn-switch><br />
-<syn-switch size="large" title="" form="">Large</syn-switch>
-```

package/metadata/static/templates/breadcrumb.md

@@ -152,6 +152,10 @@
     #breadcrumb-responsive .back-icon {
       display: none;
     }
+    /* Remove the margin of the prefix slot */
+    #breadcrumb-responsive syn-breadcrumb-item:has(> .back-icon)::part(prefix) {
+      display: none;
+    }
   }
 
   /**

package/package.json

@@ -33,11 +33,11 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.4",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.54.0",
+    "@synergy-design-system/components": "2.56.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/styles": "1.8.1",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/tokens": "^2.35.0"
+    "@synergy-design-system/styles": "1.8.1",
+    "@synergy-design-system/tokens": "^2.37.0"
   },
   "exports": {
     ".": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",