@synergy-design-system/mcp 2.6.1 → 2.8.0

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

@@ -1,104 +1,125 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
   :host {
     display: block;
   }
 
   :host(:focus-visible) {
-    outline: 0px;
+    outline: 0;
   }
 
   .radio {
+    align-items: flex-start;
+    color: var(--syn-input-label-color);
+    cursor: pointer;
     display: inline-flex;
-    align-items: top;
     font-family: var(--syn-input-font-family);
     font-size: var(--syn-input-font-size-medium);
     font-weight: var(--syn-input-font-weight);
-    color: var(--syn-input-label-color);
     vertical-align: middle;
-    cursor: pointer;
   }
 
   .radio--small {
     --toggle-size: var(--syn-toggle-size-small);
+
     font-size: var(--syn-input-font-size-small);
   }
 
   .radio--medium {
     --toggle-size: var(--syn-toggle-size-medium);
+
     font-size: var(--syn-input-font-size-medium);
   }
 
   .radio--large {
     --toggle-size: var(--syn-toggle-size-large);
+
     font-size: var(--syn-input-font-size-large);
   }
 
   .radio__checked-icon {
     display: inline-flex;
-    width: var(--toggle-size);
     height: var(--toggle-size);
+
+    /**
+     * #920: The new icons are instances in figma.
+     * The width of the system icon is 12px x 12px, so there is no inner padding.
+     * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.
+     */
+    scale: 0.5;
+    width: var(--toggle-size);
+
   }
 
   .radio__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
+    background-color: var(--syn-input-background-color);
     border: solid var(--syn-input-border-width) var(--syn-input-border-color);
     border-radius: 50%;
-    background-color: var(--syn-input-background-color);
     color: transparent;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: var(--toggle-size);
+    justify-content: center;
+    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);
   }
 
   .radio__input {
-    position: absolute;
+    margin: 0;
     opacity: 0;
     padding: 0;
-    margin: 0;
     pointer-events: none;
+    position: absolute;
   }
 
   /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly):hover .radio__control {
     border-color: var(--syn-input-border-color-hover);
-    background-color: var(--syn-input-background-color-hover);
   }
 
   /* Checked */
   .radio--checked .radio__control {
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
     color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
-    background-color: var(--syn-color-primary-600);
   }
 
   /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border-color: var(--syn-color-primary-500);
-    background-color: var(--syn-color-primary-500);
+  .radio.radio--checked:not(.radio--disabled):not(.radio--readonly):hover .radio__control {
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
+  }
+
+  /* Checked + active */
+  .radio.radio--checked:not(.radio--disabled):not(.radio--readonly):active .radio__control {
+    background-color: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
+  }
+
+  /* Not-Checked + active */
+  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly):active .radio__control {
+    border-color: var(--syn-input-border-color-active);
   }
 
   /* Checked + focus */
   :host(:focus-visible) .radio__control {
     outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+    outline-offset: var(--syn-focus-ring-width);
   }
 
-  /* Disabled */
   .radio--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
+
+    /** #429: Use token for opacity */
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
@@ -106,12 +127,53 @@ export default css`
     opacity: 0;
   }
 
+  /* Fix#456: Multi line radio fixes */
   .radio__label {
-    display: inline-block;
+    align-self: center;
     color: var(--syn-input-label-color);
+    display: inline-block;
     line-height: var(--toggle-size);
-    margin-inline-start: 0.5em;
+    margin-inline-start: var(--syn-spacing-x-small);
+    margin-top: -1px;
     user-select: none;
-    -webkit-user-select: none;
+  }
+
+  .radio--small .radio__label {
+    font: var(--syn-body-small-regular);
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  .radio--medium .radio__label {
+    font: var(--syn-body-medium-regular);
+  }
+
+  .radio--large .radio__label {
+    font: var(--syn-body-large-regular);
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  /* /Fix#456 */
+
+  /**
+   * #1174: Readonly state
+   */
+  .radio.radio--readonly {
+    cursor: default;
+  }
+
+  .radio.radio--readonly .radio__label {
+    user-select: auto;
+  }
+
+  .radio.radio--readonly .radio__control {
+    background: var(--syn-input-readonly-background-color);
+    border-color: var(--syn-input-readonly-background-color);
+    color: var(--syn-readonly-indicator-color);
+    cursor: default;
+  }
+
+  :host(:focus) .radio--readonly .radio__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-width);
   }
 `;

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;
+  }
 `;