@synergy-design-system/mcp 1.16.0 → 1.17.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/mcp-v1.17.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.17.0...mcp/1.17.1) (2025-11-03)
+
+
+### Bug Fixes
+
+* 🐛 Show scrollbars for closed sticky variant of side-nav ([#1062](https://github.com/synergy-design-system/synergy-design-system/issues/1062)) ([926905b](https://github.com/synergy-design-system/synergy-design-system/commit/926905bd15c87948700e5f32382547b2a1c43821))
+
+# [@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)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-8e90718c5ac055c568c23e7889f96e36
+555eddeb31ec5af0c88a3022cec753e1

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-side-nav/component.styles.ts

@@ -132,13 +132,6 @@ export default css`
     display: block;
   }
 
-
-  /* Hide the scrollbars in closed variant="sticky" */ 
-  :not(.side-nav--open).side-nav--sticky .side-nav__drawer::part(body){
-    overflow: hidden;
-  }
-
-
   .side-nav__toggle-icon > syn-icon {
     font-size: var(--syn-font-size-x-large);
     min-width: var(--syn-font-size-x-large);

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

@@ -1,3 +1,17 @@
+# [@synergy-design-system/components-v2.56.1](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.56.0...components/2.56.1) (2025-11-03)
+
+
+### Bug Fixes
+
+* 🐛 Show scrollbars for closed sticky variant of side-nav ([#1062](https://github.com/synergy-design-system/synergy-design-system/issues/1062)) ([926905b](https://github.com/synergy-design-system/synergy-design-system/commit/926905bd15c87948700e5f32382547b2a1c43821))
+
+# [@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)
 
 

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@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)
 
 

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.35.0
+ * @synergy-design-system/tokens version 2.37.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.35.0
+ * @synergy-design-system/tokens version 2.37.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.35.0
+ * @synergy-design-system/tokens version 2.37.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.35.0
+ * @synergy-design-system/tokens version 2.37.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.35.0
+ * @synergy-design-system/tokens version 2.37.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.35.0
+ * @synergy-design-system/tokens version 2.37.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.35.0
+ * @synergy-design-system/tokens version 2.37.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/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.56.1",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/tokens": "^2.36.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/components": "2.55.0",
-    "@synergy-design-system/styles": "1.8.1"
+    "@synergy-design-system/styles": "1.8.1",
+    "@synergy-design-system/tokens": "^2.37.0",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0"
   },
   "exports": {
     ".": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",