@synergy-design-system/mcp 1.14.0 → 1.15.0

package/CHANGELOG.md

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

package/metadata/checksum.txt

@@ -1 +1 @@
-f3114c45878f843af63d95fbab5c9fec
+88e8ef9504ea15108a792da88481adef

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

package/metadata/packages/tokens/CHANGELOG.md

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

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.33.0
+ * @synergy-design-system/tokens version 2.34.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.33.0
+ * @synergy-design-system/tokens version 2.34.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.33.0
+ * @synergy-design-system/tokens version 2.34.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.33.0
+ * @synergy-design-system/tokens version 2.34.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.33.0
+ * @synergy-design-system/tokens version 2.34.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.33.0
+ * @synergy-design-system/tokens version 2.34.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.33.0
+ * @synergy-design-system/tokens version 2.34.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

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.54.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/styles": "1.8.1",
-    "@synergy-design-system/tokens": "^2.34.0"
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/tokens": "^2.35.0"
   },
   "exports": {
     ".": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.14.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",