@synergy-design-system/mcp 2.6.1 → 2.7.0

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

@@ -1,14 +1,12 @@
-/* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
+import type { CSSResultGroup } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIcon from '../icon/icon.component.js';
 import styles from './radio.styles.js';
-import customStyles from './radio.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
 /**
@@ -32,10 +30,12 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynRadio')
 export default class SynRadio extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
+
   static dependencies = { 'syn-icon': SynIcon };
 
   @state() checked = false;
+
   @state() protected hasFocus = false;
 
   /** The radio's value. When selected, the radio group will receive this value. */
@@ -48,7 +48,10 @@ export default class SynRadio extends SynergyElement {
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Disables the radio. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ reflect: true, type: Boolean }) disabled = false;
+
+  /** Sets the radio to a readonly state. */
+  @property({ reflect: true, type: Boolean }) readonly = false;
 
   constructor() {
     super();
@@ -68,6 +71,11 @@ export default class SynRadio extends SynergyElement {
   };
 
   private handleClick = () => {
+    if (this.readonly) {
+      this.focus();
+      return;
+    }
+
     if (!this.disabled) {
       this.checked = true;
     }
@@ -81,7 +89,7 @@ export default class SynRadio extends SynergyElement {
   private setInitialAttributes() {
     this.setAttribute('role', 'radio');
     this.setAttribute('tabindex', '-1');
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    this.setAttribute('aria-disabled', (this.disabled || this.readonly) ? 'true' : 'false');
   }
 
   @watch('checked')
@@ -90,9 +98,9 @@ export default class SynRadio extends SynergyElement {
     this.setAttribute('tabindex', this.checked ? '0' : '-1');
   }
 
-  @watch('disabled', { waitUntilFirstUpdate: true })
+  @watch(['disabled', 'readonly'], { waitUntilFirstUpdate: true })
   handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    this.setAttribute('aria-disabled', (this.disabled || this.readonly) ? 'true' : 'false');
   }
 
   render() {
@@ -104,9 +112,10 @@ export default class SynRadio extends SynergyElement {
           'radio--checked': this.checked,
           'radio--disabled': this.disabled,
           'radio--focused': this.hasFocus,
-          'radio--small': this.size === 'small',
+          'radio--large': this.size === 'large',
           'radio--medium': this.size === 'medium',
-          'radio--large': this.size === 'large'
+          'radio--readonly': this.readonly,
+          'radio--small': this.size === 'small',
         })}
       >
         <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">

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

@@ -57,6 +57,11 @@ attribute can typically be omitted.
    * Disables the radio.
    */
   disabled?: SynRadio['disabled'];
+
+  /**
+   * Sets the radio to a readonly state.
+   */
+  readonly?: SynRadio['readonly'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

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

@@ -1,17 +1,27 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
     display: block;
   }
 
+  :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-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 {
-    position: relative;
     border: none;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    position: relative;
   }
 
   .form-control__label {
@@ -24,14 +34,25 @@ export default css`
   }
 
   .visually-hidden {
-    position: absolute;
-    width: 1px;
+    border: 0;
+    /* stylelint-disable-next-line property-no-deprecated */
+    clip: rect(0, 0, 0, 0);
     height: 1px;
-    padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    padding: 0;
+    position: absolute;
     white-space: nowrap;
-    border: 0;
+    width: 1px;
+  }
+
+  .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);
   }
 `;

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

@@ -1,23 +1,22 @@
-/* eslint-disable */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable no-param-reassign */
 import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
 import {
-  customErrorValidityState,
   FormControlController,
+  customErrorValidityState,
   validValidityState,
-  valueMissingValidityState
+  valueMissingValidityState,
 } from '../../internal/form.js';
 import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit';
-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 SynButtonGroup from '../button-group/button-group.component.js';
 import styles from './radio-group.styles.js';
-import customStyles from './radio-group.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
 import type { SynergyFormControl } from '../../internal/synergy-element.js';
 import type SynRadio from '../radio/radio.js';
 import type SynRadioButton from '../radio-button/radio-button.js';
@@ -49,19 +48,26 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynRadioGroup')
 export default class SynRadioGroup extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
+
   static dependencies = { 'syn-button-group': SynButtonGroup };
 
   protected readonly formControlController = new FormControlController(this);
+
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+
   private customValidityMessage = '';
+
   private validationTimeout: number;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
   @query('.radio-group__validation-input') validationInput: HTMLInputElement;
 
   @state() private hasButtonGroup = false;
+
   @state() private errorMessage = '';
+
   @state() defaultValue: string | number = '';
 
   /**
@@ -90,7 +96,7 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
   @property({ reflect: true }) form = '';
 
   /** Ensures a child radio is checked before allowing the containing form to submit. */
-  @property({ type: Boolean, reflect: true }) required = false;
+  @property({ reflect: true, type: Boolean }) required = false;
 
   /** Gets the validity state object */
   get validity() {
@@ -99,7 +105,9 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
 
     if (hasCustomValidityMessage) {
       return customErrorValidityState;
-    } else if (isRequiredAndEmpty) {
+    }
+
+    if (isRequiredAndEmpty) {
       return valueMissingValidityState;
     }
 
@@ -113,7 +121,9 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
 
     if (hasCustomValidityMessage) {
       return this.customValidityMessage;
-    } else if (isRequiredAndEmpty) {
+    }
+
+    if (isRequiredAndEmpty) {
       return this.validationInput.validationMessage;
     }
 
@@ -138,12 +148,15 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
     const radios = this.getAllRadios();
     const oldValue = this.value;
 
-    if (!target || target.disabled) {
+    // #1174: If we have a radio, also do nothing if the radio is readonly
+    if (!target || target.disabled || (target as SynRadio).readonly) {
       return;
     }
 
     this.value = target.value;
-    radios.forEach(radio => (radio.checked = radio === target));
+    radios.forEach(radio => {
+      radio.checked = radio === target;
+    });
 
     if (this.value !== oldValue) {
       this.emit('syn-change');
@@ -156,21 +169,26 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
       return;
     }
 
-    const radios = this.getAllRadios().filter(radio => !radio.disabled);
-    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];
+    // #1174: Filter out elements that are either disabled or readonly
+    const availableRadios = this.getAllRadios().filter(radio => (!radio.disabled && !(radio as SynRadio).readonly));
+    const checkedRadio = availableRadios.find(radio => radio.checked) ?? availableRadios[0];
+
+    // eslint-disable-next-line no-nested-ternary
     const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
     const oldValue = this.value;
-    let index = radios.indexOf(checkedRadio) + incr;
+    let index = availableRadios.indexOf(checkedRadio) + incr;
 
     if (index < 0) {
-      index = radios.length - 1;
+      index = availableRadios.length - 1;
     }
 
-    if (index > radios.length - 1) {
+    if (index > availableRadios.length - 1) {
       index = 0;
     }
 
-    this.getAllRadios().forEach(radio => {
+    const allRadios = this.getAllRadios();
+
+    allRadios.forEach(radio => {
       radio.checked = false;
 
       if (!this.hasButtonGroup) {
@@ -178,14 +196,19 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
       }
     });
 
-    this.value = radios[index].value;
-    radios[index].checked = true;
+    // #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;
 
     if (!this.hasButtonGroup) {
-      radios[index].setAttribute('tabindex', '0');
-      radios[index].focus();
+      availableRadios[index].setAttribute('tabindex', '0');
+      availableRadios[index].focus();
     } else {
-      radios[index].shadowRoot!.querySelector('button')!.focus();
+      availableRadios[index].shadowRoot!.querySelector('button')!.focus();
     }
 
     if (this.value !== oldValue) {
@@ -214,7 +237,7 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
         await radio.updateComplete;
         radio.checked = radio.value === this.value;
         radio.size = this.size;
-      })
+      }),
     );
 
     this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'syn-radio-button');
@@ -262,7 +285,9 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
 
   private updateCheckedRadio() {
     const radios = this.getAllRadios();
-    radios.forEach(radio => (radio.checked = radio.value === this.value));
+    radios.forEach(radio => {
+      radio.checked = radio.value === this.value;
+    });
     this.formControlController.setValidity(this.validity.valid);
   }
 
@@ -309,7 +334,9 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
       // Show the browser's constraint validation message
       this.validationInput.hidden = false;
       this.validationInput.reportValidity();
-      this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000) as unknown as number;
+      this.validationTimeout = setTimeout(() => {
+        this.validationInput.hidden = true;
+      }, 10000) as unknown as number;
     }
 
     return isValid;
@@ -338,6 +365,7 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
   }
 
   render() {
+    /* eslint-disable @typescript-eslint/unbound-method */
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
@@ -351,12 +379,12 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
         part="form-control"
         class=${classMap({
           'form-control': true,
-          'form-control--small': this.size === 'small',
-          'form-control--medium': this.size === 'medium',
+          'form-control--has-help-text': hasHelpText,
+          'form-control--has-label': hasLabel,
           'form-control--large': this.size === 'large',
+          'form-control--medium': this.size === 'medium',
           'form-control--radio-group': true,
-          'form-control--has-label': hasLabel,
-          'form-control--has-help-text': hasHelpText
+          'form-control--small': this.size === 'small',
         })}
         role="radiogroup"
         aria-labelledby="label"
@@ -407,5 +435,6 @@ export default class SynRadioGroup extends SynergyElement implements SynergyForm
         </div>
       </fieldset>
     `;
+    /* eslint-enable @typescript-eslint/unbound-method */
   }
 }

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

@@ -177,6 +177,19 @@ export class SynRangeComponent {
     return this.nativeElement.disabled;
   }
 
+  /**
+   * Sets the range to a readonly state.
+   */
+  @Input()
+  set readonly(v: '' | SynRange['readonly']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.readonly = v === '' || v),
+    );
+  }
+  get readonly(): SynRange['readonly'] {
+    return this.nativeElement.readonly;
+  }
+
   /**
    * The minimum acceptable value of the range.
    */

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

@@ -213,20 +213,26 @@ export default css`
     cursor: not-allowed;
   }
 
+  :host([readonly]) .track__wrapper,
+  :host([readonly]) .thumb,
+  :host([readonly]) .thumb.grabbed {
+    cursor: default;
+  }
+
   /*
    * Guard against mobile devices not removing the transform
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover
    */
   @media (any-hover: hover) {
-    :host(:not([disabled])) .thumb:hover  {
+    :host(:not([disabled]):not([readonly])) .thumb:hover  {
       transform: scale(var(--thumb-hit-area-size));
     }
 
-    :host(:not([disabled])) .thumb:not(.grabbed):hover  {
+    :host(:not([disabled]):not([readonly])) .thumb:not(.grabbed):hover  {
       background: var(--syn-interactive-emphasis-color-hover);
     }
     
-    :host(:not([disabled])) .thumb:hover::after  {
+    :host(:not([disabled]):not([readonly])) .thumb:hover::after  {
       /* Unset the area of the thumb click and drag area space, so it does not scale with the hover */
       inset: unset;
     }
@@ -282,4 +288,22 @@ export default css`
   :host([data-user-invalid]) .thumb {
     background-color: var(--syn-range-error-color);
   }
+
+  /**
+   * #1176: Readonly state
+   */
+  :host([readonly]) {
+    --track-color-active: var(--syn-readonly-indicator-color);
+    --track-color-inactive: var(--syn-readonly-background-color);
+  }
+
+  :host([readonly]) .thumb {
+    background-color: var(--syn-readonly-indicator-color);
+  }
+
+  :host([readonly]) .thumb:focus {
+    background-color: var(--syn-readonly-indicator-color);
+    outline: var(--syn-focus-ring);
+    outline-offset: 0;
+  }
 `;

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

@@ -11,7 +11,6 @@ import { HasSlotController } from '../../internal/slot.js';
 import { LocalizeController } from '../../utilities/localize.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 SynTooltip from '../tooltip/tooltip.component.js';
 import {
@@ -78,7 +77,6 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
   static styles: CSSResultGroup = [
     componentStyles,
     formControlStyles,
-    formControlCustomStyles,
     styles,
   ];
 
@@ -98,6 +96,9 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
   /** Disables the range. */
   @property({ reflect: true, type: Boolean }) disabled = false;
 
+  /** Sets the range to a readonly state. */
+  @property({ reflect: true, type: Boolean }) readonly = false;
+
   /** The minimum acceptable value of the range. */
   @property({ type: Number }) min = 0;
 
@@ -354,6 +355,12 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
 
   #onClickTrack(event: PointerEvent, focusThumb = true) {
     if (this.disabled) return;
+    if (this.readonly) {
+      event.preventDefault();
+      this.focus();
+      return;
+    }
+
     const { clientX } = event;
 
     const thumbs = Array.from(this.thumbs);
@@ -443,7 +450,7 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
   }
 
   async #onClickThumb(event: PointerEvent) {
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
 
     const thumb = event.target as HTMLDivElement;
     this.#updateTooltip(thumb);
@@ -460,7 +467,7 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
   }
 
   #onDragThumb(event: PointerEvent) {
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
 
     const thumb = event.target as HTMLDivElement;
     const rangeId = +thumb.dataset.rangeId!;
@@ -509,6 +516,8 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
   }
 
   async #onReleaseThumb(event: PointerEvent) {
+    if (this.disabled || this.readonly) return;
+
     const thumb = event.target as HTMLDivElement;
     if (!thumb.dataset.pointerId || event.pointerId !== +thumb.dataset.pointerId) return;
 
@@ -569,6 +578,8 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
   }
 
   #onKeyPress(event: KeyboardEvent) {
+    if (this.readonly) return;
+
     const thumb = event.target as HTMLDivElement;
     const rangeId = +thumb.dataset.rangeId!;
 
@@ -756,7 +767,7 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
           trigger="focus"
         >
           <div
-            aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}
+            aria-disabled=${ifDefined((this.disabled || this.readonly) ? 'true' : undefined)}
             aria-labelledby=${ariaLabeledBy}
             aria-label=${ariaLabel}
             aria-valuemax="${this.max}"
@@ -802,6 +813,7 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
           'form-control--has-prefix': hasPrefixSlot,
           'form-control--has-suffix': hasSuffixSlot,
           'form-control--is-disabled': this.disabled,
+          'form-control--is-readonly': this.readonly,
           'form-control--large': this.size === 'large',
           'form-control--medium': this.size === 'medium',
           'form-control--small': this.size === 'small',

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

@@ -98,6 +98,11 @@ const props = defineProps<{
    */
   disabled?: SynRange['disabled'];
 
+  /**
+   * Sets the range to a readonly state.
+   */
+  readonly?: SynRange['readonly'];
+
   /**
    * The minimum acceptable value of the range.
    */

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

@@ -235,6 +235,19 @@ indicate the number of additional items that are selected.
     return this.nativeElement.disabled;
   }
 
+  /**
+   * Sets the select to a readonly state.
+   */
+  @Input()
+  set readonly(v: '' | SynSelect['readonly']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.readonly = v === '' || v),
+    );
+  }
+  get readonly(): SynSelect['readonly'] {
+    return this.nativeElement.readonly;
+  }
+
   /**
    * Adds a clear button when the select is not empty.
    */