@synergy-design-system/mcp 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 2.7.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.
+
+## 2.6.1
+
+### Patch Changes
+
+- [#1196](https://github.com/synergy-design-system/synergy-design-system/pull/1196) [`6a9b934`](https://github.com/synergy-design-system/synergy-design-system/commit/6a9b9349f6404a638fadd842e3f2fd8216fd81cd) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-25
+
+  fix: 🐛 prio nav with only one item (#1195)
+
 ## 2.6.0
 
 ### Minor Changes

package/dist/utilities/storybook/scraper.js

@@ -65,11 +65,20 @@ export class StorybookScraper {
             // Extract the stories metadata first
             // We get basic info and identify stories that need iframe content
             const rawStoryMetadata = await page.evaluate(() => Array.from(document.querySelectorAll('.sb-anchor'))
+                // eslint-disable-next-line complexity
                 .map((story, index) => {
                 const description = story.querySelector(':scope > p')?.textContent || '';
-                const exampleSource = story.querySelector('.sb-story #root-inner')?.innerHTML || '';
                 const heading = story.querySelector('h3')?.textContent || '';
                 const hasIframe = !!story.querySelector('.sb-story iframe');
+                let exampleSource = '';
+                if (!hasIframe) {
+                    // #1152: The example source is usually in the #root-inner element.
+                    // However, for at least one story (tag-group-template), the #root-inner container is missing.
+                    // I am not sure why, but I think a fallback would be just to check the first element for the time being.
+                    const exampleWithRoot = story.querySelector('.sb-story #root-inner')?.innerHTML || '';
+                    const exampleWithoutRoot = story.querySelector('.sb-story > div')?.innerHTML || '';
+                    exampleSource = exampleWithRoot || exampleWithoutRoot;
+                }
                 return {
                     description,
                     exampleSource,
@@ -94,14 +103,16 @@ export class StorybookScraper {
                 if (!exampleSource && storyMeta.hasIframe) {
                     try {
                         const storySection = page.locator('.sb-anchor').nth(storyMeta.index);
+                        // Storybook uses lazy loading, so the iframe may not be loaded until we scroll it into view
+                        await storySection.scrollIntoViewIfNeeded();
+                        await page.waitForTimeout(1000);
                         const frame = storySection.frameLocator('iframe');
                         const frameContent = await frame.locator('#root-inner').innerHTML();
                         exampleSource = frameContent || '';
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     }
                     catch (error) {
                         // If iframe content extraction fails, continue with empty content
-                        console.log(`Failed to extract iframe content for story "${storyMeta.heading}"`);
+                        console.log(`Failed to extract iframe content for story "${storyMeta.heading}"`, error);
                     }
                 }
                 // Replace all lit internal comments

package/metadata/checksum.txt

@@ -1 +1 @@
-b0413e89368486e50f5f493fa46fe72b
+8ed433601cf1c2dfa44ffdbdd527f2bf

package/metadata/packages/components/components/syn-checkbox/component.angular.ts

@@ -154,6 +154,19 @@ export class SynCheckboxComponent {
     return this.nativeElement.disabled;
   }
 
+  /**
+   * Sets the checkbox to a readonly state.
+   */
+  @Input()
+  set readonly(v: '' | SynCheckbox['readonly']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.readonly = v === '' || v),
+    );
+  }
+  get readonly(): SynCheckbox['readonly'] {
+    return this.nativeElement.readonly;
+  }
+
   /**
    * Draws the checkbox in a checked state.
    */

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

@@ -2,79 +2,88 @@
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
   :host {
     display: inline-block;
   }
 
   .checkbox {
-    position: relative;
-    display: inline-flex;
     align-items: flex-start;
+    color: var(--syn-input-label-color);
+    cursor: pointer;
+    display: inline-flex;
     font-family: var(--syn-input-font-family);
     font-weight: var(--syn-input-font-weight);
-    color: var(--syn-input-label-color);
+    padding: var(--syn-spacing-2x-small) 0; /* #1083: This adds spacing around multi-line labels */
+    position: relative;
     vertical-align: middle;
-    cursor: pointer;
   }
 
   .checkbox--small {
     --toggle-size: var(--syn-toggle-size-small);
+
     font-size: var(--syn-input-font-size-small);
+    padding: var(--syn-spacing-3x-small) 0;
   }
 
   .checkbox--medium {
     --toggle-size: var(--syn-toggle-size-medium);
+
     font-size: var(--syn-input-font-size-medium);
   }
 
   .checkbox--large {
     --toggle-size: var(--syn-toggle-size-large);
+
     font-size: var(--syn-input-font-size-large);
   }
 
   .checkbox__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
-    border-radius: 2px;
     background-color: var(--syn-input-background-color);
+    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
+    border-radius: var(--syn-checkbox-border-radius);
     color: var(--syn-color-neutral-0);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: var(--toggle-size);
+    justify-content: center;
+    margin: 0.1em 0; /* #1083: This adds spacing around multi-line labels */
+    position: relative;
     transition:
       var(--syn-transition-fast) border-color,
       var(--syn-transition-fast) background-color,
       var(--syn-transition-fast) color,
       var(--syn-transition-fast) box-shadow;
+    width: var(--toggle-size);
   }
 
   .checkbox__input {
-    position: absolute;
+    margin: 0;
     opacity: 0;
     padding: 0;
-    margin: 0;
     pointer-events: none;
+    position: absolute;
   }
 
   .checkbox__checked-icon,
   .checkbox__indeterminate-icon {
     display: inline-flex;
-    width: var(--toggle-size);
     height: var(--toggle-size);
+    width: var(--toggle-size);
   }
 
-  /* Hover */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--syn-input-border-color-hover);
+  /**
+   * Hover
+   * Applies the hover state to the whole component
+   */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {
     background-color: var(--syn-input-background-color-hover);
+    border-color: var(--syn-input-border-color-hover);
   }
 
   /* Focus */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+  .checkbox:not(.checkbox--disabled):not(.checkbox--readonly) .checkbox__input:focus-visible ~ .checkbox__control {
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -82,42 +91,93 @@ export default css`
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    border-color: var(--syn-color-primary-600);
-    background-color: var(--syn-color-primary-600);
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
   }
 
-  /* Checked/indeterminate + hover */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--syn-color-primary-500);
-    background-color: var(--syn-color-primary-500);
+  /**
+   * Checked/indeterminate + hover
+   * Applies the hover state to the whole component
+   */
+  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
-  /* Checked/indeterminate + focus */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+  /*
+   * #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.
+   */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {
+    border-color: var(--syn-input-border-color-active);
   }
 
-  /* Disabled */
+  /* Checked/indeterminate */
+  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {
+    background: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
+  }
+
+  /** #429: Use token for opacity */
   .checkbox--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   .checkbox__label {
-    display: inline-block;
+    align-self: center;
     color: var(--syn-input-label-color);
-    line-height: var(--toggle-size);
-    margin-inline-start: 0.5em;
+    display: inline-block;
+    line-height: var(--syn-line-height-normal);
+    margin-inline-start: var(--syn-spacing-x-small);
     user-select: none;
-    -webkit-user-select: none;
   }
 
   :host([required]) .checkbox__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]) .checkbox__control {
+    background: var(--syn-input-border-color-focus-error);
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  /**
+   * #943: When invalid, use a transparent background if not checked or indeterminate
+   */
+  :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {
+    background: transparent;
+  }
+
+  /**
+   * #1171: Readonly state
+   */
+  .checkbox.checkbox--readonly {
+    cursor: default;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__label {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-user-select: auto;
+    user-select: auto;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__control {
+    background: var(--syn-input-readonly-background-color);
+    border-color: var(--syn-input-readonly-background-color);
+    color: var(--syn-readonly-indicator-color);
+    cursor: default;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__input:focus ~ .checkbox__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
 `;

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

@@ -6,15 +6,13 @@ import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { property, query, state } from 'lit/decorators.js';
+import { property, query } 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 SynIcon from '../icon/icon.component.js';
 import styles from './checkbox.styles.js';
-import customStyles from './checkbox.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { SynergyFormControl } from '../../internal/synergy-element.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
@@ -47,7 +45,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynCheckbox')
 export default class SynCheckbox extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
   static dependencies = { 'syn-icon': SynIcon };
 
   private readonly formControlController = new FormControlController(this, {
@@ -59,8 +57,6 @@ export default class SynCheckbox extends SynergyElement implements SynergyFormCo
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
 
-  @state() private hasFocus = false;
-
   @property({ reflect: true }) title = ''; // make reactive to pass through
 
   /** The name of the checkbox, submitted as a name/value pair with form data. */
@@ -75,6 +71,9 @@ export default class SynCheckbox extends SynergyElement implements SynergyFormCo
   /** Disables the checkbox. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Sets the checkbox to a readonly state. */
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
   /** Draws the checkbox in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;
 
@@ -114,14 +113,18 @@ export default class SynCheckbox extends SynergyElement implements SynergyFormCo
     this.formControlController.updateValidity();
   }
 
-  private handleClick() {
+  private handleClick(e: MouseEvent) {
+    if (this.readonly) {
+      e.preventDefault();
+      return;
+    }
+
     this.checked = !this.checked;
     this.indeterminate = false;
     this.emit('syn-change');
   }
 
   private handleBlur() {
-    this.hasFocus = false;
     this.emit('syn-blur');
   }
 
@@ -135,7 +138,6 @@ export default class SynCheckbox extends SynergyElement implements SynergyFormCo
   }
 
   private handleFocus() {
-    this.hasFocus = true;
     this.emit('syn-focus');
   }
 
@@ -216,7 +218,7 @@ export default class SynCheckbox extends SynergyElement implements SynergyFormCo
             checkbox: true,
             'checkbox--checked': this.checked,
             'checkbox--disabled': this.disabled,
-            'checkbox--focused': this.hasFocus,
+            'checkbox--readonly': this.readonly,
             'checkbox--indeterminate': this.indeterminate,
             'checkbox--small': this.size === 'small',
             'checkbox--medium': this.size === 'medium',
@@ -232,6 +234,7 @@ export default class SynCheckbox extends SynergyElement implements SynergyFormCo
             .indeterminate=${live(this.indeterminate)}
             .checked=${live(this.checked)}
             .disabled=${this.disabled}
+            .readOnly=${this.readonly}
             .required=${this.required}
             aria-checked=${this.checked ? 'true' : 'false'}
             aria-describedby="help-text"

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

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

package/metadata/packages/components/components/syn-combobox/component.angular.ts

@@ -212,6 +212,19 @@ export class SynComboboxComponent {
     return this.nativeElement.disabled;
   }
 
+  /**
+   * Sets the combobox to a readonly state.
+   */
+  @Input()
+  set readonly(v: '' | SynCombobox['readonly']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.readonly = v === '' || v),
+    );
+  }
+  get readonly(): SynCombobox['readonly'] {
+    return this.nativeElement.readonly;
+  }
+
   /**
    * Adds a clear button when the combobox is not empty.
    */