@synergy-design-system/mcp 2.6.1 → 2.7.0

package/metadata/packages/components/components/syn-switch/component.styles.ts

@@ -2,165 +2,247 @@
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
   :host {
     display: inline-block;
   }
 
   :host([size='small']) {
-    --height: var(--syn-toggle-size-small);
-    --thumb-size: calc(var(--syn-toggle-size-small) + 4px);
-    --width: calc(var(--height) * 2);
+    --height: var(--syn-switch-height-small);
+    --thumb-size: var(--syn-toggle-size-small);
+    --width: var(--syn-switch-width-small);
 
     font-size: var(--syn-input-font-size-small);
   }
 
   :host([size='medium']) {
-    --height: var(--syn-toggle-size-medium);
-    --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);
-    --width: calc(var(--height) * 2);
+    --height: var(--syn-switch-height-medium);
+    --thumb-size: var(--syn-toggle-size-medium);
+    --width: var(--syn-switch-width-medium);
 
     font-size: var(--syn-input-font-size-medium);
   }
 
   :host([size='large']) {
-    --height: var(--syn-toggle-size-large);
-    --thumb-size: calc(var(--syn-toggle-size-large) + 4px);
-    --width: calc(var(--height) * 2);
+    --height: var(--syn-switch-height-large);
+    --thumb-size: var(--syn-toggle-size-large);
+    --width: var(--syn-switch-width-large);
 
     font-size: var(--syn-input-font-size-large);
   }
 
   .switch {
-    position: relative;
-    display: inline-flex;
     align-items: center;
+    color: var(--syn-input-label-color);
+    cursor: pointer;
+    display: inline-flex;
     font-family: var(--syn-input-font-family);
     font-size: inherit;
     font-weight: var(--syn-input-font-weight);
-    color: var(--syn-input-label-color);
+    position: relative;
     vertical-align: middle;
-    cursor: pointer;
+  }
+
+  .switch.switch--small {
+    padding: var(--syn-spacing-2x-small) 0;
+  }
+
+  .switch.switch--medium {
+    padding: var(--syn-spacing-2x-small) 0;
+  }
+
+  .switch.switch--large {
+    padding: var(--syn-spacing-3x-small) 0;
+  }
+
+  /* Hint: can be removed, if the padding stylings for sizes from above are removed */
+  .form-control--has-help-text .switch {
+    padding-bottom: 0;
   }
 
   .switch__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    width: var(--width);
-    height: var(--height);
-    background-color: var(--syn-color-neutral-400);
-    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
+    background-color: var(--syn-input-icon-icon-clearable-color);
+    border: solid var(--syn-border-width-medium) var(--syn-input-icon-icon-clearable-color);
     border-radius: var(--height);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: var(--height);
+    justify-content: center;
+    position: relative;
     transition:
       var(--syn-transition-fast) border-color,
       var(--syn-transition-fast) background-color;
+    width: var(--width);
   }
 
   .switch__control .switch__thumb {
-    width: var(--thumb-size);
-    height: var(--thumb-size);
     background-color: var(--syn-color-neutral-0);
+    border: none;
     border-radius: 50%;
-    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
-    translate: calc((var(--width) - var(--height)) / -2);
+    height: var(--thumb-size);
     transition:
       var(--syn-transition-fast) translate ease,
       var(--syn-transition-fast) background-color,
       var(--syn-transition-fast) border-color,
       var(--syn-transition-fast) box-shadow;
+    translate: calc((var(--width) - var(--height)) / -2);
+    width: var(--thumb-size);
   }
 
   .switch__input {
-    position: absolute;
+    margin: 0;
     opacity: 0;
     padding: 0;
-    margin: 0;
     pointer-events: none;
+    position: absolute;
   }
 
   /* Hover */
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
-    background-color: var(--syn-color-neutral-400);
-    border-color: var(--syn-color-neutral-400);
-  }
-
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-neutral-400);
+  .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly):hover .switch__control {
+    background-color: var(--syn-input-icon-icon-clearable-color-hover);
+    border-color: var(--syn-input-icon-icon-clearable-color-hover);
   }
 
   /* Focus */
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-color-neutral-400);
-    border-color: var(--syn-color-neutral-400);
+  .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-input-icon-icon-clearable-color);
+    border-color: var(--syn-input-icon-icon-clearable-color);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
   }
 
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+  .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly) .switch__input:focus-visible ~ .switch__control .switch__thumb {
     background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+    outline: none;
   }
 
   /* Checked */
   .switch--checked .switch__control {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
   }
 
   .switch--checked .switch__control .switch__thumb {
     background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
     translate: calc((var(--width) - var(--height)) / 2);
   }
 
   /* Checked + hover */
-  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly):hover .switch__control {
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
-  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly):hover .switch__control .switch__thumb {
     background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
   }
 
   /* Checked + focus */
-  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
   }
 
-  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly) .switch__input:focus-visible ~ .switch__control .switch__thumb {
     background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+    outline: none;
+  }
+
+  /*
+   * #443: Add active styles
+   * The checked and unchecked states have different active colors
+   * Note the fallback is defined to match the hover color.
+   * This is done to make sure no active state is shown at all if no active color is defined.
+   * Still better than showing one for the unchecked state but not for the checked state.
+   */
+  .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly):active .switch__control {
+    background: var(--syn-input-icon-icon-clearable-color-active);
+    border-color: var(--syn-input-icon-icon-clearable-color-active);
+  }
+
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly):active .switch__control {
+    background: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
   }
 
-  /* Disabled */
+  /** #429: Use token for opacity */
   .switch--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   .switch__label {
     display: inline-block;
     line-height: var(--height);
-    margin-inline-start: 0.5em;
+    margin-inline-start: var(--syn-spacing-x-small);
     user-select: none;
-    -webkit-user-select: none;
   }
 
   :host([required]) .switch__label::after {
-    content: var(--syn-input-required-content);
     color: var(--syn-input-required-content-color);
+    content: var(--syn-input-required-content);
     margin-inline-start: var(--syn-input-required-content-offset);
   }
 
+  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly) .switch__control {
+    background-color: var(--syn-input-border-color-focus-error);
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly):hover .switch__control {
+    background-color: var(--syn-input-border-color-hover);
+    border-color: var(--syn-input-border-color-hover);
+  }
+
+  /**
+   * #1178: Readonly state
+   */
+  .switch.switch--readonly {
+    cursor: default;
+  }
+
+  .switch.switch--readonly .switch__label {
+    user-select: auto;
+  }
+
+  .switch.switch--readonly .switch__control {
+    background: var(--syn-readonly-background-color);
+    border-color: var(--syn-readonly-background-color);
+    cursor: default;
+  }
+
+  .switch.switch--readonly:hover .switch__control {
+    background: var(--syn-input-readonly-background-color-hover);
+    border-color: var(--syn-input-readonly-background-color-hover);
+  }
+
+  .switch.switch--readonly .switch__input:focus ~ .switch__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  .switch.switch--readonly .switch__control .switch__thumb {
+    background: var(--syn-readonly-indicator-color);
+  }
+
+  /* Override base styles to remove outline from thumb for readonly switches */
+  .switch.switch--readonly .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    outline: none;
+  }
+
+  .switch.switch--readonly.switch--checked .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    outline: none !important;
+  }
+
+  /* Focus override */
+  .switch.switch--readonly .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-readonly-background-color);
+    border-color: var(--syn-readonly-background-color);
+  }
+
   @media (forced-colors: active) {
     .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
     .switch--checked .switch__control .switch__thumb {

package/metadata/packages/components/components/syn-switch/component.ts

@@ -10,10 +10,8 @@ import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import formControlStyles from '../../styles/form-control.styles.js';
-import formControlCustomStyles from '../../styles/form-control.custom.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './switch.styles.js';
-import customStyles from './switch.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { SynergyFormControl } from '../../internal/synergy-element.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
@@ -45,7 +43,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynSwitch')
 export default class SynSwitch extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
 
   private readonly formControlController = new FormControlController(this, {
     value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined),
@@ -71,6 +69,9 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
   /** Disables the switch. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Sets the switch to a readonly state. */
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
   /** Draws the switch in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;
 
@@ -118,7 +119,12 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
     this.formControlController.emitInvalidEvent(event);
   }
 
-  private handleClick() {
+  private handleClick(e: MouseEvent) {
+    if (this.readonly) {
+      e.preventDefault();
+      return;
+    }
+
     this.checked = !this.checked;
     this.emit('syn-change');
   }
@@ -129,6 +135,10 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    if (this.readonly) {
+      return;
+    }
+
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
       this.checked = false;
@@ -212,6 +222,7 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
             switch: true,
             'switch--checked': this.checked,
             'switch--disabled': this.disabled,
+            'switch--readonly': this.readonly,
             'switch--focused': this.hasFocus,
             'switch--small': this.size === 'small',
             'switch--medium': this.size === 'medium',
@@ -226,6 +237,7 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
             value=${ifDefined(this.value)}
             .checked=${live(this.checked)}
             .disabled=${this.disabled}
+            .readOnly=${this.readonly}
             .required=${this.required}
             role="switch"
             aria-checked=${this.checked ? 'true' : 'false'}

package/metadata/packages/components/components/syn-switch/component.vue

@@ -71,6 +71,11 @@ const props = defineProps<{
    */
   disabled?: SynSwitch['disabled'];
 
+  /**
+   * Sets the switch to a readonly state.
+   */
+  readonly?: SynSwitch['readonly'];
+
   /**
    * Draws the switch in a checked state.
    */

package/metadata/packages/components/components/syn-textarea/component.styles.ts

@@ -1,28 +1,29 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  /* stylelint-disable property-no-vendor-prefix */
   :host {
     display: block;
   }
 
   .textarea {
-    display: grid;
     align-items: center;
-    position: relative;
-    width: 100%;
+    cursor: text;
+    display: grid;
     font-family: var(--syn-input-font-family);
     font-weight: var(--syn-input-font-weight);
-    line-height: var(--syn-line-height-normal);
     letter-spacing: var(--syn-input-letter-spacing);
-    vertical-align: middle;
+    line-height: var(--syn-line-height-normal);
+    position: relative;
     transition:
       var(--syn-transition-fast) color,
       var(--syn-transition-fast) border,
       var(--syn-transition-fast) box-shadow,
       var(--syn-transition-fast) background-color;
-    cursor: text;
+    vertical-align: middle;
+    width: 100%;
   }
 
   /* Standard textareas */
@@ -35,6 +36,7 @@ export default css`
     background-color: var(--syn-input-background-color-hover);
     border-color: var(--syn-input-border-color-hover);
   }
+
   .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
     color: var(--syn-input-color-hover);
   }
@@ -42,8 +44,8 @@ export default css`
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
     background-color: var(--syn-input-background-color-focus);
     border-color: var(--syn-input-border-color-focus);
-    color: var(--syn-input-color-focus);
     box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
+    color: var(--syn-input-color-focus);
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
@@ -53,8 +55,8 @@ export default css`
   .textarea--standard.textarea--disabled {
     background-color: var(--syn-input-background-color-disabled);
     border-color: var(--syn-input-border-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
   }
 
   .textarea__control,
@@ -63,9 +65,9 @@ export default css`
   }
 
   .textarea__size-adjuster {
-    visibility: hidden;
-    pointer-events: none;
     opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
@@ -78,8 +80,8 @@ export default css`
 
   /* Readonly textareas */
   .textarea--readonly {
-    border: none;
     background-color: var(--syn-input-readonly-background-color);
+    border: none;
     color: var(--syn-input-color);
   }
 
@@ -95,21 +97,29 @@ export default css`
 
   .textarea--readonly.textarea--disabled {
     background-color: var(--syn-input-readonly-background-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   .textarea__control {
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--syn-input-color);
+    cursor: inherit;
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
     line-height: 1.4;
-    color: var(--syn-input-color);
-    border: none;
-    background: none;
-    box-shadow: none;
-    cursor: inherit;
-    -webkit-appearance: none;
+
+    /*
+    Unfortunately we need to add a small margin to the textarea control. This is needed for the new sick 2025 theme,
+    as because of the big border-radius the resize icon will otherwise overlap with the border
+    This added margin needs to be subtracted from the padding of the textarea
+    */
+    margin: var(--syn-spacing-3x-small);
   }
 
   .textarea__control::-webkit-search-decoration,
@@ -117,12 +127,13 @@ export default css`
   .textarea__control::-webkit-search-results-button,
   .textarea__control::-webkit-search-results-decoration {
     -webkit-appearance: none;
+    appearance: none;
   }
 
   .textarea__control::placeholder {
     color: var(--syn-input-placeholder-color);
-    user-select: none;
     -webkit-user-select: none;
+    user-select: none;
   }
 
   .textarea__control:focus {
@@ -132,14 +143,17 @@ export default css`
   /*
    * Size modifiers
    */
-
   .textarea--small {
     border-radius: var(--syn-input-border-radius-small);
     font-size: var(--syn-input-font-size-small);
   }
 
   .textarea--small .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-small);
+    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
+      but we have different (coming from shoelace) */
+
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-small) - var(--syn-spacing-3x-small));
   }
 
   .textarea--medium {
@@ -148,7 +162,8 @@ export default css`
   }
 
   .textarea--medium .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-medium);
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-medium) - var(--syn-spacing-3x-small));
   }
 
   .textarea--large {
@@ -157,13 +172,16 @@ export default css`
   }
 
   .textarea--large .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-large);
+    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
+      but we have different (coming from shoelace) */
+
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-large) - var(--syn-spacing-3x-small));
   }
 
   /*
    * Resize types
    */
-
   .textarea--resize-none .textarea__control {
     resize: none;
   }
@@ -174,7 +192,17 @@ export default css`
 
   .textarea--resize-auto .textarea__control {
     height: auto;
-    resize: none;
     overflow-y: hidden;
+    resize: none;
+  }
+
+  /* Validation */
+  :host([data-user-invalid]) .textarea--standard {
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .textarea--standard.textarea--focused:not(.textarea--disabled) {
+    border-color: var(--syn-input-border-color-focus-error);
+    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
   }
 `;

package/metadata/packages/components/components/syn-textarea/component.ts

@@ -10,10 +10,8 @@ import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import formControlStyles from '../../styles/form-control.styles.js';
-import formControlCustomStyles from '../../styles/form-control.custom.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './textarea.styles.js';
-import customStyles from './textarea.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { SynergyFormControl } from '../../internal/synergy-element.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
@@ -42,7 +40,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynTextarea')
 export default class SynTextarea extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['syn-blur', 'syn-input']

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

@@ -1,5 +1,32 @@
 # Changelog
 
+## 3.5.0
+
+### Minor Changes
+
+- [#1189](https://github.com/synergy-design-system/synergy-design-system/pull/1189) [`a4f49ac`](https://github.com/synergy-design-system/synergy-design-system/commit/a4f49ac79a660ef5b8d1b380fe9fcd2159dc9b78) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-26
+
+  feat: ✨ Added readonly for various form fields (#1171, #1172, #1173, #1174, #1175, #1176, #1177, #1178)
+
+  Applies to:
+  - `<syn-checkbox>`
+  - `<syn-combobox>`
+  - `<syn-file>`
+  - `<syn-radio>`
+  - `<syn-radio-group>`
+  - `<syn-range>`
+  - `<syn-select>`
+  - `<syn-switch>`
+
+  Form elements now support being displayed as `readonly` fields.
+
+  Field marked `readonly` may receive focus, but their value cannot be changed by customer inputs.
+
+### Patch Changes
+
+- Updated dependencies [[`a4f49ac`](https://github.com/synergy-design-system/synergy-design-system/commit/a4f49ac79a660ef5b8d1b380fe9fcd2159dc9b78)]:
+  - @synergy-design-system/tokens@3.5.0
+
 ## 3.4.1
 
 ### Patch Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 3.5.0
+
+### Minor Changes
+
+- [#1189](https://github.com/synergy-design-system/synergy-design-system/pull/1189) [`a4f49ac`](https://github.com/synergy-design-system/synergy-design-system/commit/a4f49ac79a660ef5b8d1b380fe9fcd2159dc9b78) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-26
+
+  feat: ✨ Added readonly for various form fields (#1171, #1172, #1173, #1174, #1175, #1176, #1177, #1178)
+
+  Applies to:
+  - `<syn-checkbox>`
+  - `<syn-combobox>`
+  - `<syn-file>`
+  - `<syn-radio>`
+  - `<syn-radio-group>`
+  - `<syn-range>`
+  - `<syn-select>`
+  - `<syn-switch>`
+
+  Form elements now support being displayed as `readonly` fields.
+
+  Field marked `readonly` may receive focus, but their value cannot be changed by customer inputs.
+
 ## 3.4.1
 
 ## 3.4.0