@synergy-design-system/metadata 3.17.0 → 3.18.0

package/data/layers/full/component/component:syn-radio-button/components/radio-button.component.ts

@@ -1,21 +1,20 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit/static-html.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { type CSSResultGroup, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController, getTextContent } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './radio-button.styles.js';
-import type { CSSResultGroup } from 'lit';
+import buttonStyles from '../button/button.styles.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
 /**
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.
@@ -33,26 +32,32 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynRadioButton')
 export default class SynRadioButton extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static styles: CSSResultGroup = [componentStyles, buttonStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
 
   @query('.button') input: HTMLInputElement;
-  @query('.hidden-input') hiddenInput: HTMLInputElement;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   @state() protected hasFocus = false;
 
+  @state() private iconOnly = false;
+
   /**
    * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
    * it easier to style in button groups.
    */
-  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ reflect: true, type: Boolean }) checked = false;
 
   /** The radio's value. When selected, the radio group will receive this value. */
   @property() value: string | number;
 
   /** Disables the radio button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ reflect: true, type: Boolean }) disabled = false;
+
+  /** Sets the radio button to a readonly state. */
+  @property({ reflect: true, type: Boolean }) readonly = false;
 
   /**
    * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
@@ -60,21 +65,22 @@ export default class SynRadioButton extends SynergyElement {
    */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
-  /** Draws a pill-style radio button with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'presentation');
   }
 
+  private isDisabled() {
+    return this.disabled || this.readonly;
+  }
+
   private handleBlur() {
     this.hasFocus = false;
     this.emit('syn-blur');
   }
 
   private handleClick(e: MouseEvent) {
-    if (this.disabled) {
+    if (this.isDisabled()) {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -88,9 +94,17 @@ export default class SynRadioButton extends SynergyElement {
     this.emit('syn-focus');
   }
 
-  @watch('disabled', { waitUntilFirstUpdate: true })
+  private handleSlotChange() {
+    const textContent = getTextContent(this.defaultSlot).trim();
+    const assignedElements = this.defaultSlot.assignedElements({ flatten: true });
+    const iconOnlyElement = assignedElements.length === 1 && assignedElements[0].tagName.toLowerCase() === 'syn-icon';
+
+    this.iconOnly = iconOnlyElement && textContent === '';
+  }
+
+  @watch(['disabled', 'readonly'], { waitUntilFirstUpdate: true })
   handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    this.setAttribute('aria-disabled', this.isDisabled() ? 'true' : 'false');
   }
 
   /** Sets focus on the radio button. */
@@ -104,6 +118,7 @@ export default class SynRadioButton extends SynergyElement {
   }
 
   render() {
+    /* eslint-disable @typescript-eslint/unbound-method */
     return html`
       <div part="base" role="presentation">
         <button
@@ -112,31 +127,36 @@ export default class SynRadioButton extends SynergyElement {
           aria-checked="${this.checked}"
           class=${classMap({
             button: true,
-            'button--default': true,
-            'button--small': this.size === 'small',
-            'button--medium': this.size === 'medium',
-            'button--large': this.size === 'large',
             'button--checked': this.checked,
+            'button--default': true,
             'button--disabled': this.disabled,
+            'button--filled': this.checked,
             'button--focused': this.hasFocus,
-            'button--outline': true,
-            'button--pill': this.pill,
             'button--has-label': this.hasSlotController.test('[default]'),
             'button--has-prefix': this.hasSlotController.test('prefix'),
-            'button--has-suffix': this.hasSlotController.test('suffix')
+            'button--has-suffix': this.hasSlotController.test('suffix'),
+            'button--icon-only': this.iconOnly,
+            'button--large': this.size === 'large',
+            'button--medium': this.size === 'medium',
+            'button--primary': true,
+            'button--readonly': this.readonly,
+            'button--small': this.size === 'small',
+            'button--text': !this.checked,
           })}
           aria-disabled=${this.disabled}
           type="button"
+          tabindex=${ifDefined(this.disabled ? '-1': undefined)}
           value=${ifDefined(this.value)}
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
           @click=${this.handleClick}
         >
           <slot name="prefix" part="prefix" class="button__prefix"></slot>
-          <slot part="label" class="button__label"></slot>
+          <slot part="label" class="button__label" @slotchange=${this.handleSlotChange}></slot>
           <slot name="suffix" part="suffix" class="button__suffix"></slot>
         </button>
       </div>
     `;
+    /* eslint-enable @typescript-eslint/unbound-method */
   }
 }

package/data/layers/full/component/component:syn-radio-button/components/radio-button.styles.ts

@@ -1,30 +1,92 @@
-/* eslint-disable */
 import { css } from 'lit';
-import buttonStyles from '../button/button.styles.js';
 
 export default css`
-	/* stylelint-disable */
-  ${buttonStyles}
-
-  .button__prefix,
-  .button__suffix,
-  .button__label {
-    display: inline-flex;
-    position: relative;
-    align-items: center;
-  }
-
-  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
-    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
-  .hidden-input {
-    all: unset;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    outline: dotted 1px red;
-    opacity: 0;
-    z-index: -1;
+  :host([readonly]) {
+    cursor: default;
+  }
+
+  .button {
+    /* Medium size is the default */
+    --syn-radio-button-height: 32px;
+    --syn-radio-button-radius: var(--syn-radio-button-border-radius-medium);
+
+    border-radius: var(--syn-radio-button-radius);
+    font-weight: normal;
+    line-height: calc(var(--syn-radio-button-height) - var(--syn-input-border-width) * 2);
+    min-height: var(--syn-radio-button-height);
+  }
+
+  .button--small {
+    --syn-radio-button-height: 24px;
+    --syn-radio-button-radius: var(--syn-radio-button-border-radius-small);
+  }
+
+  .button--large {
+    --syn-radio-button-height: 48px;
+    --syn-radio-button-radius: var(--syn-radio-button-border-radius-large);
+  }
+
+  /**
+   * Icon only buttons
+   */
+  .button--icon-only .button__label {
+    border-radius: var(--syn-border-radius-medium);
+    padding-inline: var(--syn-spacing-2x-small);
+  }
+
+  /**
+   * Override the default unchecked button
+   */
+  .button--text {
+    color: var(--syn-interactive-quiet-color);
+  }
+
+  .button--text:hover:not(.button--disabled):not(.button--readonly) {
+    background: var(--syn-interactive-background-color-hover);
+    color: var(--syn-interactive-quiet-color-hover);
+  }
+
+  /**
+   * Disabled active buttons should look like their default state, but with opacity applied.
+   * This overrides the defaults from the button component.
+   * Note we cannot use syn-button-color because it will be the wrong color in dark mode.
+   */
+  .button--filled.button--primary,
+  .button--filled.button--primary.button--disabled {
+    background: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
+    color: var(--syn-color-neutral-0);
+  }
+
+  /**
+   * Make sure the active state is applied to the button in its selected and none selected state.
+   */
+  .button--filled.button--primary:active:not(.button--disabled),
+  .button--text.button--primary:active:not(.button--disabled) {
+    background: var(--syn-button-color-active);
+    border-color: var(--syn-button-color-active);
+    color: var(--syn-button-filled-color-text-active);
+  }
+
+  /**
+   * Readonly state styles
+   */
+  .button.button--readonly {
+    background: var(--syn-readonly-background-color);
+    color: var(--syn-readonly-color-text);
+    cursor: text;
+    pointer-events: none;
+    user-select: text;
+  }
+
+  .button.button--readonly:focus-visible {
+    background: var(--syn-input-readonly-background-color-focus);
+    color: var(--syn-readonly-color-text);
+  }
+
+  .button.button--readonly.button--checked {
+    background: var(--syn-readonly-indicator-color);
+    border-color: var(--syn-readonly-border-color);
+    color: var(--syn-color-neutral-0);
   }
 `;

package/data/layers/full/component/component:syn-radio-button/react/radio-button.ts

@@ -18,7 +18,7 @@ Component.define('syn-radio-button');
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.

package/data/layers/full/component/component:syn-radio-button/vue/SynVueRadioButton.vue

@@ -9,7 +9,7 @@
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.
@@ -52,17 +52,17 @@ const props = defineProps<{
    */
   disabled?: SynRadioButton['disabled'];
 
+  /**
+   * Sets the radio button to a readonly state.
+   */
+  readonly?: SynRadioButton['readonly'];
+
   /**
 * The radio button's size.
 * When used inside a radio group, the size will be determined by the radio group's size so
 this attribute can typically be omitted.
  */
   size?: SynRadioButton['size'];
-
-  /**
-   * Draws a pill-style radio button with rounded edges.
-   */
-  pill?: SynRadioButton['pill'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

package/data/layers/full/component/component:syn-radio-group/components/radio-group.component.ts

@@ -144,15 +144,16 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
   }
 
   private handleRadioClick(event: MouseEvent) {
-    const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;
-    const radios = this.getAllRadios();
-    const oldValue = this.value;
+    const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button');
 
     // #1174: If we have a radio, also do nothing if the radio is readonly
-    if (!target || target.disabled || (target as SynRadio).readonly) {
+    if (!target || target.disabled || target.readonly) {
       return;
     }
 
+    const radios = this.getAllRadios();
+    const oldValue = this.value;
+
     this.value = target.value;
     radios.forEach(radio => {
       radio.checked = radio === target;
@@ -170,7 +171,7 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
     }
 
     // #1174: Filter out elements that are either disabled or readonly
-    const availableRadios = this.getAllRadios().filter(radio => (!radio.disabled && !(radio as SynRadio).readonly));
+    const availableRadios = this.getAllRadios().filter(radio => (!radio.disabled && !radio.readonly));
     const checkedRadio = availableRadios.find(radio => radio.checked) ?? availableRadios[0];
 
     // eslint-disable-next-line no-nested-ternary
@@ -186,6 +187,11 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
       index = 0;
     }
 
+    // #1175: If all radios are readonly, skip and focus the first one and do not change the value
+    if (!availableRadios[index]) {
+      return;
+    }
+
     const allRadios = this.getAllRadios();
 
     allRadios.forEach(radio => {
@@ -196,11 +202,6 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
       }
     });
 
-    // #1175: If all radios are readonly, skip and focus the first one and do not change the value
-    if (!availableRadios[index]) {
-      return;
-    }
-
     this.value = availableRadios[index].value;
     availableRadios[index].checked = true;
 
@@ -257,6 +258,11 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
     if (this.hasButtonGroup) {
       const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');
 
+      // Check if all radios in the group are readonly. If they are, set the button group to readonly as well to prevent focus and hover styles
+      if (buttonGroup) {
+        buttonGroup.toggleAttribute('readonly', radios.every(radio => radio.readonly));
+      }
+
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
@@ -379,6 +385,7 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
         part="form-control"
         class=${classMap({
           'form-control': true,
+          'form-control--has-button-group': this.hasButtonGroup,
           'form-control--has-help-text': hasHelpText,
           'form-control--has-label': hasLabel,
           'form-control--large': this.size === 'large',
@@ -418,7 +425,12 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
 
           ${this.hasButtonGroup
             ? html`
-                <syn-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
+                <syn-button-group
+                  exportparts="base:button-group__base"
+                  part="button-group"
+                  role="presentation"
+                  size=${this.size}
+                >
                   ${defaultSlot}
                 </syn-button-group>
               `

package/data/layers/full/component/component:syn-radio-group/components/radio-group.styles.ts

@@ -28,6 +28,16 @@ export default css`
     padding: 0;
   }
 
+  .form-control-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-x-small);
+  }
+
+  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
+    margin-top: var(--syn-spacing-x-small);
+  }
+
   .radio-group--required .radio-group__label::after {
     content: var(--syn-input-required-content);
     margin-inline-start: var(--syn-input-required-content-offset);
@@ -46,13 +56,48 @@ export default css`
     width: 1px;
   }
 
-  .form-control-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--syn-spacing-x-small);
+  /**
+   * #1140:
+   * Apply custom styling when we are using syn-radio-button.
+   * This is needed because syn-radio-button is displayed with space between the items
+   * and should not adhere to the default styling needed for regular button groups.
+   */
+  .form-control--has-button-group .form-control-input {
+    max-width: 100%; /* Fallback for older browsers, do not remove */
   }
 
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--syn-spacing-x-small);
+  @supports (max-width: fit-content) {
+    .form-control--has-button-group .form-control-input {
+      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+      max-width: fit-content;
+    }
+  }
+
+  .form-control--has-button-group syn-button-group::part(base) {
+    --radiogroup-padding: calc(var(--syn-spacing-x-small) - 1px);
+
+    border: 1px solid var(--syn-input-border-color);
+    border-radius: var(--syn-input-border-radius-large);
+    gap: var(--radiogroup-padding);
+    padding: var(--radiogroup-padding);
+  }
+
+  .form-control--has-button-group syn-button-group[readonly]::part(base) {
+    background: var(--syn-readonly-background-color);
+    border-color: var(--syn-readonly-background-color);
+  }
+
+  .form-control--has-button-group syn-button-group[size="small"]::part(base) {
+    --radiogroup-padding: calc(var(--syn-spacing-2x-small) + var(--syn-input-width));
+  }
+
+  /**
+   * #1140: This statement overrides the children selectors that are used for showing readonly fields
+   * We are not able to easily forward them to the radio button, so we need to override them here.
+   */
+  .form-control--has-button-group syn-button-group[readonly] ::slotted(syn-radio-button) {
+    --syn-readonly-indicator-color: var(--syn-readonly-background-color);
+    --syn-readonly-border-color: transparent;
+    --syn-color-neutral-0: var(--syn-readonly-color-text);
   }
 `;

package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @synergy-design-system/angular
 
+## 3.17.0
+
+### Minor Changes
+
+- [#1231](https://github.com/synergy-design-system/synergy-design-system/pull/1231) [`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-30
+
+  feat: ✨ `<syn-radio-button>` ([#1140](https://github.com/synergy-design-system/synergy-design-system/issues/1140))
+
+  This release adds the new `<syn-radio-button>` component for single-selection controls with a more prominent, button-like appearance.
+
+  Use `<syn-radio>` for classic form input patterns, and `<syn-radio-button>` when the same behavior should feel more like an immediate mode, view, or option switch.
+
+### Patch Changes
+
+- Updated dependencies [[`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9)]:
+  - @synergy-design-system/components@3.17.0
+  - @synergy-design-system/tokens@3.17.0
+
 ## 3.16.0
 
 ### Minor Changes

package/data/layers/full/setup/setup:angular-package/angular/package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/synergy-design-system/synergy-design-system.git",
     "directory": "packages/angular"
   },
-  "version": "3.16.0",
+  "version": "3.17.0",
   "scripts": {
     "_build": "pnpm _clean && ng-packagr -c tsconfig.lib.json && pnpm _after-build",
     "_clean": "rm -rf ../_private/angular-demo/.angular",

package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 3.17.0
+
+### Minor Changes
+
+- [#1231](https://github.com/synergy-design-system/synergy-design-system/pull/1231) [`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-30
+
+  feat: ✨ `<syn-radio-button>` ([#1140](https://github.com/synergy-design-system/synergy-design-system/issues/1140))
+
+  This release adds the new `<syn-radio-button>` component for single-selection controls with a more prominent, button-like appearance.
+
+  Use `<syn-radio>` for classic form input patterns, and `<syn-radio-button>` when the same behavior should feel more like an immediate mode, view, or option switch.
+
+### Patch Changes
+
+- Updated dependencies [[`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9)]:
+  - @synergy-design-system/tokens@3.17.0
+
 ## 3.16.0
 
 ### Minor Changes

package/data/layers/full/setup/setup:components-package/components/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "repository": {
     "type": "git",

package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @synergy-design-system/react
 
+## 3.17.0
+
+### Patch Changes
+
+- Updated dependencies [[`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9)]:
+  - @synergy-design-system/components@3.17.0
+  - @synergy-design-system/tokens@3.17.0
+
 ## 3.16.0
 
 ### Minor Changes

package/data/layers/full/setup/setup:react-package/react/package.json

@@ -43,7 +43,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "devDependencies": {
     "@types/react": "^19.2.17",
     "react": "^19.2.7"

package/data/layers/full/setup/setup:react-package/react/syn-jsx-elements.ts

@@ -1092,7 +1092,7 @@ export type SynCustomElement<
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.
@@ -2441,7 +2441,7 @@ declare module 'react' {
        * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
        * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
        * @status stable
-       * @since 1.0.0
+       * @since 3.17.0
        *
        * @slot - The radio button's label.
        * @slot prefix - A presentational prefix icon or similar element.

package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 3.17.0
+
+### Minor Changes
+
+- [#1231](https://github.com/synergy-design-system/synergy-design-system/pull/1231) [`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-30
+
+  feat: ✨ `<syn-radio-button>` ([#1140](https://github.com/synergy-design-system/synergy-design-system/issues/1140))
+
+  This release adds the new `<syn-radio-button>` component for single-selection controls with a more prominent, button-like appearance.
+
+  Use `<syn-radio>` for classic form input patterns, and `<syn-radio-button>` when the same behavior should feel more like an immediate mode, view, or option switch.
+
 ## 3.16.0
 
 ### Minor Changes

package/data/layers/full/setup/setup:tokens-package/tokens/package.json

@@ -82,5 +82,5 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "3.16.0"
+  "version": "3.17.0"
 }

package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @synergy-design-system/vue
 
+## 3.17.0
+
+### Minor Changes
+
+- [#1231](https://github.com/synergy-design-system/synergy-design-system/pull/1231) [`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-30
+
+  feat: ✨ `<syn-radio-button>` ([#1140](https://github.com/synergy-design-system/synergy-design-system/issues/1140))
+
+  This release adds the new `<syn-radio-button>` component for single-selection controls with a more prominent, button-like appearance.
+
+  Use `<syn-radio>` for classic form input patterns, and `<syn-radio-button>` when the same behavior should feel more like an immediate mode, view, or option switch.
+
+### Patch Changes
+
+- Updated dependencies [[`8a6cbf7`](https://github.com/synergy-design-system/synergy-design-system/commit/8a6cbf78fe5236b691815edfad12b34659937df9)]:
+  - @synergy-design-system/components@3.17.0
+  - @synergy-design-system/tokens@3.17.0
+
 ## 3.16.0
 
 ### Minor Changes

package/data/layers/full/setup/setup:vue-package/vue/package.json

@@ -50,7 +50,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.9.1",

package/data/layers/full/tokens/charts/js/index.d.ts

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