@synergy-design-system/mcp 1.12.0 → 1.14.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/mcp-v1.14.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.13.0...mcp/1.14.0) (2025-10-27)
+
+
+### Features
+
+* ✨ CD update for syn-badge ([#1049](https://github.com/synergy-design-system/synergy-design-system/issues/1049)) ([894e541](https://github.com/synergy-design-system/synergy-design-system/commit/894e5416653a66f5ef81acaaee8b74a1adf7f3ab))
+
+# [@synergy-design-system/mcp-v1.13.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.12.0...mcp/1.13.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-checkbox ([#1050](https://github.com/synergy-design-system/synergy-design-system/issues/1050)) ([1054c71](https://github.com/synergy-design-system/synergy-design-system/commit/1054c71415f36233ba1e242433806aac21d4d19b))
+
 # [@synergy-design-system/mcp-v1.12.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.11.0...mcp/1.12.0) (2025-10-23)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-d80b07b1c5fd9cf03e5d37e1384733b0
+f3114c45878f843af63d95fbab5c9fec

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

@@ -13,28 +13,28 @@ export default css`
 
   /* Variant modifiers */
   .badge--primary {
-    background-color: var(--syn-color-primary-600);
-    color: var(--syn-typography-color-text-inverted);
+    background-color: var(--syn-badge-informative-color-background, var(--syn-color-primary-600));
+    color: var(--syn-badge-informative-color-text, var(--syn-typography-color-text-inverted));
   }
 
   .badge--success {
-    background-color: var(--syn-color-success-500);
-    color: var(--syn-typography-color-text);
+    background-color: var(--syn-badge-success-color-background, var(--syn-color-success-500));
+    color: var(--syn-badge-success-color-text, var(--syn-typography-color-text));
   }
 
   .badge--neutral {
-    background-color: var(--syn-color-neutral-800);
-    color: var(--syn-typography-color-text-inverted);
+    background-color: var(--syn-badge-neutral-color-background, var(--syn-color-neutral-800));
+    color: var(--syn-badge-neutral-color-text, var(--syn-typography-color-text-inverted));
   }
 
   .badge--warning {
-    background-color: var(--syn-color-warning-400);
-    color: var(--syn-typography-color-text);
+    background-color: var(--syn-badge-warning-color-background, var(--syn-color-warning-400));
+    color: var(--syn-badge-warning-color-text, var(--syn-typography-color-text));
   }
 
   .badge--danger {
-    background-color: var(--syn-color-error-600);
-    color: var(--syn-typography-color-text-inverted);
+    background-color: var(--syn-badge-error-color-background, var(--syn-color-error-600));
+    color: var(--syn-badge-error-color-text, var(--syn-typography-color-text-inverted));
   }
 
   /**

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

@@ -2,13 +2,21 @@ import { css } from 'lit';
 
 export default css`
   .checkbox__control {
-    border-radius: var(--syn-input-border-radius-small);
+    border-radius: var(--syn-checkbox-border-radius, var(--syn-input-border-radius-small));
   }
 
   :host([data-user-invalid]) .checkbox__control {
+    background: var(--syn-input-border-color-focus-error);
     border-color: var(--syn-input-border-color-focus-error);
   }
 
+  /**
+   * #943: When invalid, use a transparent background if not checked or indeterminate
+   */
+  :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {
+    background: transparent;
+  }
+
   /** #429: Use token for opacity */
   .checkbox--disabled {
     opacity: var(--syn-input-disabled-opacity);

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

@@ -1,3 +1,17 @@
+# [@synergy-design-system/components-v2.53.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.52.0...components/2.53.0) (2025-10-27)
+
+
+### Features
+
+* ✨ CD update for syn-badge ([#1049](https://github.com/synergy-design-system/synergy-design-system/issues/1049)) ([894e541](https://github.com/synergy-design-system/synergy-design-system/commit/894e5416653a66f5ef81acaaee8b74a1adf7f3ab))
+
+# [@synergy-design-system/components-v2.52.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.51.0...components/2.52.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-checkbox ([#1050](https://github.com/synergy-design-system/synergy-design-system/issues/1050)) ([1054c71](https://github.com/synergy-design-system/synergy-design-system/commit/1054c71415f36233ba1e242433806aac21d4d19b))
+
 # [@synergy-design-system/components-v2.51.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.50.0...components/2.51.0) (2025-10-23)
 
 

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.34.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.33.0...tokens/2.34.0) (2025-10-27)
+
+
+### Features
+
+* ✨ CD update for syn-badge ([#1049](https://github.com/synergy-design-system/synergy-design-system/issues/1049)) ([894e541](https://github.com/synergy-design-system/synergy-design-system/commit/894e5416653a66f5ef81acaaee8b74a1adf7f3ab))
+
+# [@synergy-design-system/tokens-v2.33.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.32.0...tokens/2.33.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-checkbox ([#1050](https://github.com/synergy-design-system/synergy-design-system/issues/1050)) ([1054c71](https://github.com/synergy-design-system/synergy-design-system/commit/1054c71415f36233ba1e242433806aac21d4d19b))
+
 # [@synergy-design-system/tokens-v2.32.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.31.0...tokens/2.32.0) (2025-10-23)
 
 

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.31.0
+ * @synergy-design-system/tokens version 2.33.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,16 @@
 :root, .syn-sick2018-dark, .syn-theme-dark {
   color-scheme: dark;
 
+  --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);
+  --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
+  --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-success-color-background: var(--syn-color-success-500);
+  --syn-badge-success-color-text: var(--syn-typography-color-text);
+  --syn-badge-warning-color-background: var(--syn-color-warning-400);
+  --syn-badge-warning-color-text: var(--syn-typography-color-text);
   --syn-border-radius-circle: 9999px;
   --syn-border-radius-large: 8px;
   --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #481700;
   --syn-color-accent-100: #7c310b;
   --syn-color-accent-200: #983b08;
@@ -45,6 +56,17 @@
   --syn-color-error-800: #ffc3c9;
   --syn-color-error-900: #ffdee2;
   --syn-color-error-950: #fff0f2;
+  --syn-color-info-50: #072e4a;
+  --syn-color-info-100: #0b486f;
+  --syn-color-info-200: #065786;
+  --syn-color-info-300: #0166a3;
+  --syn-color-info-400: #007cc1;
+  --syn-color-info-500: #0ca2eb;
+  --syn-color-info-600: #36bbfa;
+  --syn-color-info-700: #7cd1fd;
+  --syn-color-info-800: #b9e5fe;
+  --syn-color-info-900: #e0f1fe;
+  --syn-color-info-950: #f0f9ff;
   --syn-color-neutral-0: #000000;
   --syn-color-neutral-50: #31373a;
   --syn-color-neutral-100: #4c5357;

package/metadata/packages/tokens/index.js

@@ -1,8 +1,58 @@
 /**
- * @synergy-design-system/tokens version 2.31.0
+ * @synergy-design-system/tokens version 2.33.0
  * SICK Global UX Foundation
  */
 
+/**
+ * @type {string}
+ */
+export const SynBadgeErrorColorBackground = 'var(--syn-badge-error-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeErrorColorText = 'var(--syn-badge-error-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeInformativeColorBackground = 'var(--syn-badge-informative-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeInformativeColorText = 'var(--syn-badge-informative-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeNeutralColorBackground = 'var(--syn-badge-neutral-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeNeutralColorText = 'var(--syn-badge-neutral-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeSuccessColorBackground = 'var(--syn-badge-success-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeSuccessColorText = 'var(--syn-badge-success-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeWarningColorBackground = 'var(--syn-badge-warning-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynBadgeWarningColorText = 'var(--syn-badge-warning-color-text)';
+
 /**
  * @type {string}
  */
@@ -83,6 +133,11 @@ export const SynButtonFontSizeMedium = 'var(--syn-button-font-size-medium)';
  */
 export const SynButtonFontSizeSmall = 'var(--syn-button-font-size-small)';
 
+/**
+ * @type {string}
+ */
+export const SynCheckboxBorderRadius = 'var(--syn-checkbox-border-radius)';
+
 /**
  * @type {string}
  */
@@ -193,6 +248,61 @@ export const SynColorError900 = 'var(--syn-color-error-900)';
  */
 export const SynColorError950 = 'var(--syn-color-error-950)';
 
+/**
+ * @type {string}
+ */
+export const SynColorInfo50 = 'var(--syn-color-info-50)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo100 = 'var(--syn-color-info-100)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo200 = 'var(--syn-color-info-200)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo300 = 'var(--syn-color-info-300)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo400 = 'var(--syn-color-info-400)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo500 = 'var(--syn-color-info-500)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo600 = 'var(--syn-color-info-600)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo700 = 'var(--syn-color-info-700)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo800 = 'var(--syn-color-info-800)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo900 = 'var(--syn-color-info-900)';
+
+/**
+ * @type {string}
+ */
+export const SynColorInfo950 = 'var(--syn-color-info-950)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.31.0
+ * @synergy-design-system/tokens version 2.33.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,16 @@
 :root, .syn-sick2018-light, .syn-theme-light {
   color-scheme: light;
 
+  --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);
+  --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
+  --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-success-color-background: var(--syn-color-success-500);
+  --syn-badge-success-color-text: var(--syn-typography-color-text);
+  --syn-badge-warning-color-background: var(--syn-color-warning-400);
+  --syn-badge-warning-color-text: var(--syn-typography-color-text);
   --syn-border-radius-circle: 9999px;
   --syn-border-radius-large: 8px;
   --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #fffbea;
   --syn-color-accent-100: #fff2c5;
   --syn-color-accent-200: #ffe685;
@@ -45,6 +56,17 @@
   --syn-color-error-800: #ab091c;
   --syn-color-error-900: #8d0f1e;
   --syn-color-error-950: #4e010a;
+  --syn-color-info-50: #f0f9ff;
+  --syn-color-info-100: #e0f1fe;
+  --syn-color-info-200: #b9e5fe;
+  --syn-color-info-300: #7cd1fd;
+  --syn-color-info-400: #36bbfa;
+  --syn-color-info-500: #0ca2eb;
+  --syn-color-info-600: #007cc1;
+  --syn-color-info-700: #0166a3;
+  --syn-color-info-800: #065786;
+  --syn-color-info-900: #0b486f;
+  --syn-color-info-950: #072e4a;
   --syn-color-neutral-0: #ffffff;
   --syn-color-neutral-50: #f9fafb;
   --syn-color-neutral-100: #f2f3f6;

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.31.0
+ * @synergy-design-system/tokens version 2.33.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,16 @@
 :root, .syn-sick2018-dark, .syn-theme-dark {
   color-scheme: dark;
 
+  --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);
+  --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
+  --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-success-color-background: var(--syn-color-success-500);
+  --syn-badge-success-color-text: var(--syn-typography-color-text);
+  --syn-badge-warning-color-background: var(--syn-color-warning-400);
+  --syn-badge-warning-color-text: var(--syn-typography-color-text);
   --syn-border-radius-circle: 9999px;
   --syn-border-radius-large: 8px;
   --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #481700;
   --syn-color-accent-100: #7c310b;
   --syn-color-accent-200: #983b08;
@@ -45,6 +56,17 @@
   --syn-color-error-800: #ffc3c9;
   --syn-color-error-900: #ffdee2;
   --syn-color-error-950: #fff0f2;
+  --syn-color-info-50: #072e4a;
+  --syn-color-info-100: #0b486f;
+  --syn-color-info-200: #065786;
+  --syn-color-info-300: #0166a3;
+  --syn-color-info-400: #007cc1;
+  --syn-color-info-500: #0ca2eb;
+  --syn-color-info-600: #36bbfa;
+  --syn-color-info-700: #7cd1fd;
+  --syn-color-info-800: #b9e5fe;
+  --syn-color-info-900: #e0f1fe;
+  --syn-color-info-950: #f0f9ff;
   --syn-color-neutral-0: #000000;
   --syn-color-neutral-50: #31373a;
   --syn-color-neutral-100: #4c5357;

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.31.0
+ * @synergy-design-system/tokens version 2.33.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,16 @@
 :root, .syn-sick2018-light, .syn-theme-light {
   color-scheme: light;
 
+  --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);
+  --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
+  --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-success-color-background: var(--syn-color-success-500);
+  --syn-badge-success-color-text: var(--syn-typography-color-text);
+  --syn-badge-warning-color-background: var(--syn-color-warning-400);
+  --syn-badge-warning-color-text: var(--syn-typography-color-text);
   --syn-border-radius-circle: 9999px;
   --syn-border-radius-large: 8px;
   --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #fffbea;
   --syn-color-accent-100: #fff2c5;
   --syn-color-accent-200: #ffe685;
@@ -45,6 +56,17 @@
   --syn-color-error-800: #ab091c;
   --syn-color-error-900: #8d0f1e;
   --syn-color-error-950: #4e010a;
+  --syn-color-info-50: #f0f9ff;
+  --syn-color-info-100: #e0f1fe;
+  --syn-color-info-200: #b9e5fe;
+  --syn-color-info-300: #7cd1fd;
+  --syn-color-info-400: #36bbfa;
+  --syn-color-info-500: #0ca2eb;
+  --syn-color-info-600: #007cc1;
+  --syn-color-info-700: #0166a3;
+  --syn-color-info-800: #065786;
+  --syn-color-info-900: #0b486f;
+  --syn-color-info-950: #072e4a;
   --syn-color-neutral-0: #ffffff;
   --syn-color-neutral-50: #f9fafb;
   --syn-color-neutral-100: #f2f3f6;

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.31.0
+ * @synergy-design-system/tokens version 2.33.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,16 @@
 :root, .syn-sick2025-dark {
   color-scheme: dark;
 
+  --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;
+  --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
+  --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-success-color-background: var(--syn-color-success-600);
+  --syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-warning-color-background: var(--syn-color-warning-800);
+  --syn-badge-warning-color-text: var(--syn-typography-color-text-inverted);
   --syn-border-radius-circle: 9999px;
   --syn-border-radius-large: 8px;
   --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-small);
   --syn-color-accent-50: #ffffff;
   --syn-color-accent-100: #ffffff;
   --syn-color-accent-200: #ffffff;
@@ -45,6 +56,17 @@
   --syn-color-error-800: #ffcfd1;
   --syn-color-error-900: #ffe3e4;
   --syn-color-error-950: #fff1f1;
+  --syn-color-info-50: #06334b;
+  --syn-color-info-100: #085172;
+  --syn-color-info-200: #02628a;
+  --syn-color-info-300: #0075a7;
+  --syn-color-info-400: #0092ce;
+  --syn-color-info-500: #06b6f1;
+  --syn-color-info-600: #26c9ff;
+  --syn-color-info-700: #78ddff;
+  --syn-color-info-800: #a6e9ff;
+  --syn-color-info-900: #dff4ff;
+  --syn-color-info-950: #effaff;
   --syn-color-neutral-0: #000414;
   --syn-color-neutral-50: #000724;
   --syn-color-neutral-100: #000a37;

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.31.0
+ * @synergy-design-system/tokens version 2.33.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,6 +7,16 @@
 :root, .syn-sick2025-light {
   color-scheme: light;
 
+  --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;
+  --syn-badge-informative-color-text: var(--syn-typography-color-text);
+  --syn-badge-neutral-color-background: #d5ccc5;
+  --syn-badge-neutral-color-text: var(--syn-typography-color-text);
+  --syn-badge-success-color-background: var(--syn-color-success-800);
+  --syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-warning-color-background: var(--syn-color-warning-500);
+  --syn-badge-warning-color-text: var(--syn-typography-color-text);
   --syn-border-radius-circle: 9999px;
   --syn-border-radius-large: 8px;
   --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-small);
   --syn-color-accent-50: #ffffff;
   --syn-color-accent-100: #ffffff;
   --syn-color-accent-200: #ffffff;
@@ -45,6 +56,17 @@
   --syn-color-error-800: #941013;
   --syn-color-error-900: #6c0c0e;
   --syn-color-error-950: #450709;
+  --syn-color-info-50: #effaff;
+  --syn-color-info-100: #dff4ff;
+  --syn-color-info-200: #a6e9ff;
+  --syn-color-info-300: #78ddff;
+  --syn-color-info-400: #26c9ff;
+  --syn-color-info-500: #06b6f1;
+  --syn-color-info-600: #0092ce;
+  --syn-color-info-700: #0075a7;
+  --syn-color-info-800: #02628a;
+  --syn-color-info-900: #085172;
+  --syn-color-info-950: #06334b;
   --syn-color-neutral-0: #ffffff;
   --syn-color-neutral-50: #f2f2f2;
   --syn-color-neutral-100: #e7e7e7;

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

@@ -16,9 +16,9 @@ Set the variant attribute to change the badge’s variant.
 <div style="display: flex; gap: var(--syn-spacing-large)">
   <syn-badge variant="primary">primary</syn-badge>
   <syn-badge variant="success">success</syn-badge>
-  <syn-badge variant="neutral">neutral</syn-badge>
   <syn-badge variant="warning">warning</syn-badge>
   <syn-badge variant="danger">danger</syn-badge>
+  <syn-badge variant="neutral">neutral</syn-badge>
 </div>
 ```
 
@@ -35,22 +35,12 @@ One of the most common use cases for badges is attaching them to buttons. DEV: T
     <syn-badge pill="" variant="primary">30</syn-badge>
   </syn-button>
 
-  <syn-button
-    style="margin-inline-start: 1rem"
-    title=""
-    variant="outline"
-    size="medium"
-  >
+  <syn-button title="" variant="outline" size="medium">
     Warnings
     <syn-badge variant="warning" pill="">8</syn-badge>
   </syn-button>
 
-  <syn-button
-    style="margin-inline-start: 1rem"
-    title=""
-    variant="outline"
-    size="medium"
-  >
+  <syn-button title="" variant="outline" size="medium">
     Errors
     <syn-badge variant="danger" pill="">6</syn-badge>
   </syn-button>

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

@@ -18,6 +18,22 @@ Use the checked attribute to activate the checkbox.
 
 ---
 
+## Help Text
+
+Add descriptive help text to a checkbox 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-checkbox
+  help-text="What should the user know about the checkbox?"
+  title=""
+  size="medium"
+  form=""
+  >Label</syn-checkbox
+>
+```
+
+---
+
 ## Indeterminate
 
 Use the indeterminate attribute to make the checkbox indeterminate.
@@ -30,6 +46,16 @@ Use the indeterminate attribute to make the checkbox indeterminate.
 
 ---
 
+## Focus
+
+The focus event gives the user feedback that the Checkbox has been focused by the keyboard interaction.
+
+```html
+<syn-checkbox title="" size="medium" form="">Focused</syn-checkbox>
+```
+
+---
+
 ## Disabled
 
 Use the disabled attribute to disable the checkbox.
@@ -45,7 +71,9 @@ Use the disabled attribute to disable the checkbox.
 Use the size attribute to change a checkbox’s size.
 
 ```html
-<div style="display: flex; flex-direction: column; gap: 1rem">
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
   <syn-checkbox size="small" title="" form="">Small</syn-checkbox>
   <syn-checkbox size="medium" title="" form="">Medium</syn-checkbox>
   <syn-checkbox size="large" title="" form="">Large</syn-checkbox>
@@ -54,6 +82,41 @@ Use the size attribute to change a checkbox’s size.
 
 ---
 
+## Invalid
+
+The invalid status is used to warn the user that the Checkbox is invalid. For example, if the check is mandatory and nothing has been checked.
+
+```html
+<form class="custom-validity">
+  <div class="custom-validity">
+    <syn-checkbox required="" title="" size="medium" form=""
+      >Invalid</syn-checkbox
+    >
+    <syn-checkbox required="" indeterminate="" title="" size="medium" form=""
+      >Invalid</syn-checkbox
+    >
+    <syn-checkbox required="" checked="" title="" size="medium" form=""
+      >Invalid</syn-checkbox
+    >
+  </div>
+  <syn-button type="submit" variant="filled" title="" size="medium"
+    >Submit</syn-button
+  >
+</form>
+<style>
+  .custom-validity {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-large);
+  }
+  syn-button {
+    align-self: flex-start;
+  }
+</style>
+```
+
+---
+
 ## Custom Validity
 
 Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.

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.51.0",
     "@synergy-design-system/docs": "0.1.0",
+    "@synergy-design-system/components": "2.53.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/tokens": "^2.32.0",
-    "@synergy-design-system/styles": "1.8.1"
+    "@synergy-design-system/styles": "1.8.1",
+    "@synergy-design-system/tokens": "^2.34.0"
   },
   "exports": {
     ".": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",