@synergy-design-system/mcp 1.13.0 → 1.15.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ CD update for syn-radio ([#1051](https://github.com/synergy-design-system/synergy-design-system/issues/1051)) ([b245f1f](https://github.com/synergy-design-system/synergy-design-system/commit/b245f1f90836a68594ecc8fdc026ecb8b3d284a9))
+
+# [@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)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-70cb3200ddbb9faa6788b5b71e130280
+88e8ef9504ea15108a792da88481adef

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-radio/component.custom.styles.ts

@@ -11,15 +11,33 @@ export default css`
     opacity: var(--syn-input-disabled-opacity);
   }
 
+  /* Checked */
+  /* stylelint-disable-next-line no-descending-specificity */
+  .radio--checked .radio__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));
+  }
+
   /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled):hover  .radio__control {
-    background-color: var(--syn-color-primary-950);
-    border-color: var(--syn-color-primary-950);
+  .radio.radio--checked:not(.radio--disabled) .radio__control:hover  {
+    background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
+    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
+  }
+
+  /* Checked + active */
+  .radio.radio--checked:not(.radio--disabled) .radio__control:active  {
+    background-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    border-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
   }
 
-  /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {
-    border-color: var(--syn-color-primary-900);
+  /* Not-Checked + Hover */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+    border-color: var(--syn-input-border-color-hover);
+  }
+
+  /* Not-Checked + active */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:active {
+    border-color: var(--syn-color-neutral-1000);
   }
 
   /* Fix#456: Multi line radio fixes */
@@ -43,6 +61,8 @@ export default css`
     top: -2px;
   }
 
+  /* /Fix#456 */
+
   /**
    * #920: The new icons are instances in figma.
    * The width of the system icon is 12px x 12px, so there is no inner padding.
@@ -52,21 +72,6 @@ export default css`
     scale: 0.5;
   }
 
-  /* /Fix#456 */
-
-  /* Size modifiers */
-  .radio--small {
-    --toggle-size: var(--syn-input-font-size-small);
-  }
-
-  .radio--medium {
-    --toggle-size: var(--syn-font-size-medium);
-  }
-
-  .radio--large {
-    --toggle-size: var(--syn-spacing-large);
-  }
-
   .radio--small .radio__label, .radio--large .radio__label  {
     margin-inline-start: var(--syn-spacing-x-small);
   }

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

@@ -4,9 +4,13 @@ export default css`
   :host([data-user-invalid]) {
     --syn-input-border-color: var(--syn-input-border-color-focus-error);
     --syn-input-border-color-hover: var(--syn-input-border-color-focus-error);
-    --syn-color-primary-600: var(--syn-color-error-700);
+    --syn-color-primary-600: var(--syn-input-border-color-focus-error);
     --syn-color-primary-900: var(--syn-color-error-900);
     --syn-color-primary-950: var(--syn-color-error-950);
+    --syn-color-neutral-1000: var(--syn-input-border-color-focus-error);
+    --syn-interactive-emphasis-color: var(--syn-input-border-color-focus-error);
+    --syn-interactive-emphasis-color-hover: var(--syn-input-border-color-focus-error);
+    --syn-interactive-emphasis-color-active: var(--syn-input-border-color-focus-error);
   }
 
   .form-control--has-help-text.form-control--radio-group .form-control__help-text {
@@ -18,5 +22,4 @@ export default css`
     flex-direction: column;
     gap: var(--syn-spacing-x-small);
   }
-
 `;

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

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ CD update for syn-radio ([#1051](https://github.com/synergy-design-system/synergy-design-system/issues/1051)) ([b245f1f](https://github.com/synergy-design-system/synergy-design-system/commit/b245f1f90836a68594ecc8fdc026ecb8b3d284a9))
+
+# [@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)
 
 

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ CD update for syn-radio ([#1051](https://github.com/synergy-design-system/synergy-design-system/issues/1051)) ([b245f1f](https://github.com/synergy-design-system/synergy-design-system/commit/b245f1f90836a68594ecc8fdc026ecb8b3d284a9))
+
+# [@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)
 
 

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.32.0
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,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.32.0
+ * @synergy-design-system/tokens version 2.34.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}
  */
@@ -198,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.32.0
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,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.32.0
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,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.32.0
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,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.32.0
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,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.32.0
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,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-radio/docs.md

@@ -16,17 +16,37 @@ Radios allow the user to select a single option from a group. \nRadios are desig
 
 ---
 
-## Disabled
+## Initial Value
 
-Use the disabled attribute to disable a radio.
+To set the initial value and checked state, use the value attribute on the radio element.
+
+```html
+<syn-radio-group value="1" size="medium" form="">
+  <syn-radio
+    value="1"
+    selected=""
+    role="radio"
+    tabindex="0"
+    aria-disabled="false"
+    aria-checked="true"
+    size="medium"
+    >Option</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the Radio has been focused by the keyboard interaction.
 
 ```html
 <syn-radio
   value="1"
-  disabled=""
   role="radio"
   tabindex="-1"
-  aria-disabled="true"
+  aria-disabled="false"
   aria-checked="false"
   size="medium"
   >Option</syn-radio
@@ -35,16 +55,17 @@ Use the disabled attribute to disable a radio.
 
 ---
 
-## Focus
+## Disabled
 
-The focus event gives the user feedback that the Radio has been focused by the keyboard interaction.
+Use the disabled attribute to disable a radio.
 
 ```html
 <syn-radio
   value="1"
+  disabled=""
   role="radio"
   tabindex="-1"
-  aria-disabled="false"
+  aria-disabled="true"
   aria-checked="false"
   size="medium"
   >Option</syn-radio
@@ -53,21 +74,70 @@ The focus event gives the user feedback that the Radio has been focused by the k
 
 ---
 
+## Sizes
+
+Add the size attribute to the Radio Group to change the radios’ size.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-radio
+    value="1"
+    size="small"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="2"
+    size="medium"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="3"
+    size="large"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    >Option</syn-radio
+  >
+</div>
+```
+
+---
+
 ## Invalid
 
 The invalid status is used to warn the user that the Radio is invalid. For example, if the radio is mandatory and nothing has been checked.
 
 ```html
 <form class="custom-validity">
-  <syn-radio-group required="" value="" size="medium" form="">
+  <syn-radio-group required="" value="2" size="medium" form="">
     <syn-radio
       value="1"
       role="radio"
-      tabindex="0"
+      tabindex="-1"
       aria-disabled="false"
       aria-checked="false"
       size="medium"
-      >Option</syn-radio
+      >Invalid</syn-radio
+    >
+    <syn-radio
+      value="2"
+      role="radio"
+      tabindex="0"
+      aria-disabled="false"
+      aria-checked="true"
+      size="medium"
+      >Invalid</syn-radio
     >
   </syn-radio-group>
   <syn-button type="submit" variant="filled" title="" size="medium"
@@ -85,39 +155,3 @@ The invalid status is used to warn the user that the Radio is invalid. For examp
   }
 </style>
 ```
-
----
-
-## Sizes
-
-Add the size attribute to the Radio Group to change the radios’ size.
-
-```html
-<syn-radio
-  value="1"
-  size="small"
-  role="radio"
-  tabindex="-1"
-  aria-disabled="false"
-  aria-checked="false"
-  >Option</syn-radio
->
-<syn-radio
-  value="2"
-  size="medium"
-  role="radio"
-  tabindex="-1"
-  aria-disabled="false"
-  aria-checked="false"
-  >Option</syn-radio
->
-<syn-radio
-  value="3"
-  size="large"
-  role="radio"
-  tabindex="-1"
-  aria-disabled="false"
-  aria-checked="false"
-  >Option</syn-radio
->
-```

package/metadata/static/components/syn-radio-group/docs.md

@@ -74,23 +74,23 @@ Use the label attribute to give the radio-group an accessible label. For labels
 
 ---
 
-## Help Text
+## Checked
 
-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.
+To set the initial value and checked state, use the value attribute on the containing radio group.
 
 ```html
 <syn-radio-group
   label="This is a label"
-  help-text="This is the help-text"
+  help-text="This is checked"
   name="a"
-  value=""
+  value="2"
   size="medium"
   form=""
 >
   <syn-radio
     value="1"
     role="radio"
-    tabindex="0"
+    tabindex="-1"
     aria-disabled="false"
     aria-checked="false"
     size="medium"
@@ -99,9 +99,9 @@ Add descriptive help text to a switch with the help-text attribute. For help tex
   <syn-radio
     value="2"
     role="radio"
-    tabindex="-1"
+    tabindex="0"
     aria-disabled="false"
-    aria-checked="false"
+    aria-checked="true"
     size="medium"
     >Option</syn-radio
   >
@@ -119,13 +119,14 @@ Add descriptive help text to a switch with the help-text attribute. For help tex
 
 ---
 
-## Focus
+## Help Text
 
-The focus event gives the user feedback that one of the radio buttons has been focused by the keyboard interaction.
+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-radio-group
   label="This is a label"
+  help-text="Choose the most appropriate option."
   name="a"
   value=""
   size="medium"
@@ -133,10 +134,9 @@ The focus event gives the user feedback that one of the radio buttons has been f
 >
   <syn-radio
     value="1"
-    disabled=""
     role="radio"
     tabindex="0"
-    aria-disabled="true"
+    aria-disabled="false"
     aria-checked="false"
     size="medium"
     >Option</syn-radio
@@ -164,14 +164,13 @@ The focus event gives the user feedback that one of the radio buttons has been f
 
 ---
 
-## Disabled
+## Focus
 
-Radios and radio buttons can be disabled by adding the disabled attribute to the respective options inside the radio group.
+The focus event gives the user feedback that one of the radio buttons has been focused by the keyboard interaction.
 
 ```html
 <syn-radio-group
   label="This is a label"
-  help-text="This is disabled"
   name="a"
   value=""
   size="medium"
@@ -179,19 +178,19 @@ Radios and radio buttons can be disabled by adding the disabled attribute to the
 >
   <syn-radio
     value="1"
+    disabled=""
     role="radio"
     tabindex="0"
-    aria-disabled="false"
+    aria-disabled="true"
     aria-checked="false"
     size="medium"
     >Option</syn-radio
   >
   <syn-radio
     value="2"
-    disabled=""
     role="radio"
     tabindex="-1"
-    aria-disabled="true"
+    aria-disabled="false"
     aria-checked="false"
     size="medium"
     >Option</syn-radio
@@ -210,21 +209,23 @@ Radios and radio buttons can be disabled by adding the disabled attribute to the
 
 ---
 
-## Checked
+## Disabled
+
+Radios and radio buttons can be disabled by adding the disabled attribute to the respective options inside the radio group.
 
 ```html
 <syn-radio-group
   label="This is a label"
-  help-text="This is checked"
+  help-text="This is disabled"
   name="a"
-  value="2"
+  value=""
   size="medium"
   form=""
 >
   <syn-radio
     value="1"
     role="radio"
-    tabindex="-1"
+    tabindex="0"
     aria-disabled="false"
     aria-checked="false"
     size="medium"
@@ -232,10 +233,11 @@ Radios and radio buttons can be disabled by adding the disabled attribute to the
   >
   <syn-radio
     value="2"
+    disabled=""
     role="radio"
-    tabindex="0"
-    aria-disabled="false"
-    aria-checked="true"
+    tabindex="-1"
+    aria-disabled="true"
+    aria-checked="false"
     size="medium"
     >Option</syn-radio
   >
@@ -253,6 +255,79 @@ Radios and radio buttons can be disabled by adding the disabled attribute to the
 
 ---
 
+## Sizes
+
+The size of Radios and Radio Buttons will be determined by the Radio Group’s size attribute.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-radio-group label="Small size" size="small" value="" form="">
+    <syn-radio
+      value="1"
+      role="radio"
+      tabindex="0"
+      aria-disabled="false"
+      aria-checked="false"
+      size="small"
+      >Option</syn-radio
+    >
+    <syn-radio
+      value="2"
+      role="radio"
+      tabindex="-1"
+      aria-disabled="false"
+      aria-checked="false"
+      size="small"
+      >Option</syn-radio
+    >
+  </syn-radio-group>
+  <syn-radio-group label="Medium size" size="medium" value="" form="">
+    <syn-radio
+      value="1"
+      role="radio"
+      tabindex="0"
+      aria-disabled="false"
+      aria-checked="false"
+      size="medium"
+      >Option</syn-radio
+    >
+    <syn-radio
+      value="2"
+      role="radio"
+      tabindex="-1"
+      aria-disabled="false"
+      aria-checked="false"
+      size="medium"
+      >Option</syn-radio
+    >
+  </syn-radio-group>
+  <syn-radio-group label="Large size" size="large" value="" form="">
+    <syn-radio
+      value="1"
+      role="radio"
+      tabindex="0"
+      aria-disabled="false"
+      aria-checked="false"
+      size="large"
+      >Option</syn-radio
+    >
+    <syn-radio
+      value="2"
+      role="radio"
+      tabindex="-1"
+      aria-disabled="false"
+      aria-checked="false"
+      size="large"
+      >Option</syn-radio
+    >
+  </syn-radio-group>
+</div>
+```
+
+---
+
 ## Invalid
 
 The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio is mandatory and nothing has been checked.
@@ -304,7 +379,7 @@ The invalid status is used to warn the user that the Radio Group is invalid. For
   .custom-validity {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
   syn-button {
     align-self: flex-start;

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.52.0",
+    "@synergy-design-system/components": "2.54.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.33.0",
-    "@synergy-design-system/styles": "1.8.1"
+    "@synergy-design-system/tokens": "^2.35.0"
   },
   "exports": {
     ".": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",