@synergy-design-system/mcp 1.41.2 → 2.0.0

package/metadata/packages/components/components/syn-progress-bar/component.custom.styles.ts

@@ -4,8 +4,8 @@ export default css`
   :host {
     --height: var(--syn-font-size-medium);
     --speed: 2.5s;
-    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));
-    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));
+    --indicator-color: var(--syn-progress-indicator-color);
+    --track-color: var(--syn-progress-track-color);
   }
 
   .progress-bar {

package/metadata/packages/components/components/syn-progress-ring/component.custom.styles.ts

@@ -4,8 +4,8 @@ export default css`
   :host {
     --size: 120px;
     --track-width: var(--syn-spacing-x-small);
-    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));
-    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));
+    --track-color: var(--syn-progress-track-color);
+    --indicator-color: var(--syn-progress-indicator-color);
   }
 
   .progress-ring__indicator {

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

@@ -18,8 +18,8 @@ export default css`
   /* Checked */
   /* stylelint-disable-next-line no-descending-specificity */
   .radio--checked .radio__control {
-    background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
-    border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
   }
 
   /* Reset original hover */
@@ -30,14 +30,14 @@ export default css`
 
   /* Checked + hover */
   .radio.radio--checked:not(.radio--disabled):hover .radio__control  {
-    background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /* Checked + active */
   .radio.radio--checked:not(.radio--disabled):active .radio__control  {
-    background-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
-    border-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    background-color: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
   }
 
   /* Not-Checked + Hover */
@@ -47,7 +47,7 @@ export default css`
 
   /* Not-Checked + active */
   .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {
-    border-color: var(--syn-input-border-color-active, var(--syn-color-neutral-1000));
+    border-color: var(--syn-input-border-color-active);
   }
 
   /* Fix#456: Multi line radio fixes */

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

@@ -10,8 +10,8 @@ export default css`
     --thumb-hit-area-size: 1.4;
     --track-hit-area-size: var(--syn-spacing-medium);
     --track-active-offset: 0px;
-    --track-color-active: var(--syn-range-track-color-active,var(--syn-color-primary-600));
-    --track-color-inactive: var(--syn-range-color-inactive, var(--syn-color-neutral-200));
+    --track-color-active: var(--syn-range-track-color-active);
+    --track-color-inactive: var(--syn-range-color-inactive);
     --track-height: var(--syn-spacing-2x-small);
 
     /* This is needed to get the full with of the element, including the border */
@@ -155,8 +155,8 @@ export default css`
   }
 
   .thumb {
-    background-color: var(--syn-interactive-emphasis-color,var(--syn-color-primary-600));
-    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset, var(--syn-color-neutral-0));
+    background-color: var(--syn-interactive-emphasis-color);
+    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset);
     border-radius: var(--syn-border-radius-circle);
     cursor: pointer;
     display: block;
@@ -192,7 +192,7 @@ export default css`
   }
 
   .thumb.grabbed {
-    background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    background: var(--syn-interactive-emphasis-color-active);
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     cursor: grabbing;
   }
@@ -202,7 +202,7 @@ export default css`
   }
 
   .thumb:not(.grabbed):focus-visible {
-    background: var(--syn-interactive-emphasis-color-hover,var(--syn-color-primary-900));
+    background: var(--syn-interactive-emphasis-color-hover);
     outline: var(--syn-focus-ring);
     outline-offset: 0;
   }
@@ -223,7 +223,7 @@ export default css`
     }
 
     :host(:not([disabled])) .thumb:not(.grabbed):hover  {
-      background: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+      background: var(--syn-interactive-emphasis-color-hover);
     }
     
     :host(:not([disabled])) .thumb:hover::after  {
@@ -276,10 +276,10 @@ export default css`
   
 
   :host([data-user-invalid]) .active-track {
-    --track-color-active: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
+    --track-color-active: var(--syn-range-error-color);
   }
 
   :host([data-user-invalid]) .thumb {
-    background-color: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
+    background-color: var(--syn-range-error-color);
   }
 `;

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

@@ -751,7 +751,6 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
       return html`
         <syn-tooltip
           exportparts="base:tooltip__base, base__arrow:tooltip__arrow, base__popup:tooltip__popup, body:tooltip__body"
-          hoist
           .disabled=${this.tooltipPlacement === 'none' || this.disabled}
           .placement=${this.tooltipPlacement as 'top' | 'bottom'}
           trigger="focus"

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

@@ -15,7 +15,7 @@ export default css`
   }
 
   .tick-line {
-    background: var(--syn-range-tick-color, var(--syn-color-neutral-400));
+    background: var(--syn-range-tick-color);
     height: var(--tick-height);
   }
 

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

@@ -263,23 +263,6 @@ use the `show()` and `hide()` methods and this attribute will reflect the select
     return this.nativeElement.open;
   }
 
-  /**
-* Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  @Input()
-  set hoist(v: '' | SynSelect['hoist']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hoist = v === '' || v),
-    );
-  }
-  get hoist(): SynSelect['hoist'] {
-    return this.nativeElement.hoist;
-  }
-
   /**
    * The select's label.
    * If you need to display HTML, use the `label` slot instead.

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

@@ -184,13 +184,6 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
    */
   @property({ type: Boolean, reflect: true }) open = false;
 
-  /**
-   * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
-   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-    * @deprecated This property is deprecated and will be removed in the next major version.
-   */
-  @property({ type: Boolean }) hoist = false;
-
   /** The select's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
@@ -930,7 +923,6 @@ protected override willUpdate(changedProperties: PropertyValues) {
               'select--large': this.size === 'large'
             })}
             placement=${this.placement + '-start'}
-            strategy=${this.hoist ? 'fixed' : 'absolute'}
             flip
             shift
             sync="width"

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

@@ -128,15 +128,6 @@ use the `show()` and `hide()` methods and this attribute will reflect the select
  */
   open?: SynSelect['open'];
 
-  /**
-* Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  hoist?: SynSelect['hoist'];
-
   /**
    * The select's label.
    * If you need to display HTML, use the `label` slot instead.

package/metadata/packages/components/components/syn-side-nav/component.angular.ts

@@ -142,27 +142,6 @@ Without `open`, the side-nav will only show the prefix of nav-item's.
     return this.nativeElement.open;
   }
 
-  /**
-* Use the rail attribute to only show the prefix of navigation items in closed state.
-This will open on hover on the rail navigation.
-On touch devices the navigation opens on click and shows an overlay.
-
-Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-If this is not the case you should use a burger navigation.
-
-@deprecated Use the `variant` attribute with `rail` instead.
-Will be removed in synergy version 3.0
- */
-  @Input()
-  set rail(v: '' | SynSideNav['rail']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.rail = v === '' || v),
-    );
-  }
-  get rail(): SynSideNav['rail'] {
-    return this.nativeElement.rail;
-  }
-
   /**
 * The variant that should be used to show the side navigation.
 

package/metadata/packages/components/components/syn-side-nav/component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import { classMap } from 'lit/directives/class-map.js';
-import type { CSSResultGroup, PropertyValues } from 'lit';
+import type { CSSResultGroup } from 'lit';
 import { html } from 'lit/static-html.js';
 import { property, query, state } from 'lit/decorators.js';
 import { HasSlotController } from '../../internal/slot.js';
@@ -129,19 +129,6 @@ export default class SynSideNav extends SynergyElement {
    */
   @property({ reflect: true, type: Boolean }) open = false;
 
-  /**
-   * Use the rail attribute to only show the prefix of navigation items in closed state.
-   * This will open on hover on the rail navigation.
-   * On touch devices the navigation opens on click and shows an overlay.
-   *
-   * Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-   * If this is not the case you should use a burger navigation.
-   *
-   * @deprecated Use the `variant` attribute with `rail` instead.
-   * Will be removed in synergy version 3.0
-   */
-  @property({ reflect: true, type: Boolean }) rail = false;
-
   /**
    * The variant that should be used to show the side navigation.
    *
@@ -356,28 +343,6 @@ export default class SynSideNav extends SynergyElement {
     }
   }
 
-  // eslint-disable-next-line complexity
-  protected override willUpdate(changedProperties: PropertyValues) {
-    super.willUpdate(changedProperties);
-
-    // TODO: this can be removed in synergy version 3.0
-    if (changedProperties.has('rail')) {
-      if (this.rail) {
-        // Add deprecation console warning for stakeholder, which do not use linting
-        // to get their attention
-        // eslint-disable-next-line no-console
-        console.warn('<syn-side-nav/>: The `rail` attribute is deprecated. Please use the `variant` attribute with `rail` instead. It will be removed in synergy version 3.0');
-      }
-
-      // The `variant` should be adapted to the `rail` attribute,
-      // if it was explicitly set or unset by the user.
-      // This is needed to be backwards compatible with the `rail` attribute
-      if (!changedProperties.has('variant') || this.rail) {
-        this.variant = this.rail ? 'rail' : 'default';
-      }
-    }
-  }
-
   private toggleOpenState() {
     this.open = !this.open;
   }

package/metadata/packages/components/components/syn-side-nav/component.vue

@@ -106,19 +106,6 @@ Without `open`, the side-nav will only show the prefix of nav-item's.
  */
   open?: SynSideNav['open'];
 
-  /**
-* Use the rail attribute to only show the prefix of navigation items in closed state.
-This will open on hover on the rail navigation.
-On touch devices the navigation opens on click and shows an overlay.
-
-Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-If this is not the case you should use a burger navigation.
-
-@deprecated Use the `variant` attribute with `rail` instead.
-Will be removed in synergy version 3.0
- */
-  rail?: SynSideNav['rail'];
-
   /**
 * The variant that should be used to show the side navigation.
 

package/metadata/packages/components/components/syn-spinner/component.custom.styles.ts

@@ -3,7 +3,7 @@ import { css } from 'lit';
 export default css`
   :host {
     --speed: var(--syn-transition-x-slow);
-    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --indicator-color: var(--syn-interactive-emphasis-color);
   }
 
   .spinner__indicator {
@@ -16,7 +16,7 @@ export default css`
    */
   .spinner__track {
     filter: saturate(0);
-    opacity: var(--syn-spinner-opacity, 0.16);
+    opacity: var(--syn-spinner-opacity);
     stroke: var(--indicator-color);
   }
 

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

@@ -2,25 +2,25 @@ import { css } from 'lit';
 
 export default css`
   :host([size='small']) {
-   --height: var(--syn-switch-height-small, calc(var(--syn-toggle-size-medium) + 2px));
+   --height: var(--syn-switch-height-small);
    --thumb-size: var(--syn-toggle-size-small);
-   --width: var(--syn-switch-width-small, calc((var(--height) * 2) - 6px));
+   --width: var(--syn-switch-width-small);
 
     font-size: var(--syn-input-font-size-small);
   }
 
   :host([size='medium']) {
-    --height: var(--syn-switch-height-medium, calc(var(--syn-toggle-size-medium) + 4px));
+    --height: var(--syn-switch-height-medium);
     --thumb-size: var(--syn-toggle-size-medium);
-    --width: var(--syn-switch-width-medium, calc((var(--height) * 2) - 6px));
+    --width: var(--syn-switch-width-medium);
 
     font-size: var(--syn-input-font-size-medium);
   }
 
   :host([size='large']) {
-    --height: var(--syn-switch-height-large, calc(var(--syn-toggle-size-large) + 4px));
+    --height: var(--syn-switch-height-large);
     --thumb-size: var(--syn-toggle-size-large);
-    --width: var(--syn-switch-width-large, calc((var(--height) * 2) - 6px));
+    --width: var(--syn-switch-width-large);
 
     font-size: var(--syn-input-font-size-large);
   }
@@ -58,8 +58,8 @@ export default css`
 
   /* Checked */
   .switch--checked .switch__control {
-    background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
-    border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
   }
   
   /* Hover */
@@ -74,8 +74,8 @@ export default css`
 
   /* Checked + hover */
   .switch.switch--checked:not(.switch--disabled):hover .switch__control {
-    background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
   .switch.switch--checked:not(.switch--disabled):hover .switch__control:hover .switch__thumb {
@@ -114,8 +114,8 @@ export default css`
 
   /* Checked + focus */
   .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
-    border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    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);
   }
@@ -130,12 +130,12 @@ export default css`
   }
   
   :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control {
-    background-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
-    border-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
+    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):hover .switch__control {
-    background-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
-    border-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
+    background-color: var(--syn-input-border-color-hover);
+    border-color: var(--syn-input-border-color-hover);
   }
   `;

package/metadata/packages/components/components/syn-tab/component.custom.styles.ts

@@ -46,7 +46,7 @@ export default css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
+    color: var(--syn-interactive-emphasis-color);
   }
 
   .tab.tab--active:not(:hover):not(.tab--disabled) {
@@ -61,7 +61,7 @@ export default css`
   }
 
   .tab__close-button {
-    color: var(--syn-input-icon-icon-clearable-color, var(--syn-color-neutral-500));
+    color: var(--syn-input-icon-icon-clearable-color);
     font-size: var(--syn-font-size-x-large);
     margin-inline-start: var(--syn-spacing-2x-small);
   }
@@ -71,7 +71,7 @@ export default css`
   }
 
   .tab__close-button::part(base):hover {
-    color: var(--syn-input-icon-icon-clearable-color-hover, var(--syn-color-primary-700));
+    color: var(--syn-input-icon-icon-clearable-color-hover);
   }
 
   .tab--active {

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

@@ -7,7 +7,7 @@ export default css`
     --track-width: var(--syn-border-width-small);
     --track-color: var(--syn-panel-border-color);
     --indicator-width: var(--syn-border-width-x-large);
-    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --indicator-color: var(--syn-interactive-emphasis-color);
   }
 
   /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */
@@ -185,7 +185,7 @@ export default css`
   .tab-group__scroll-button {
     /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */
     bottom: var(--syn-panel-border-width);
-    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
+    color: var(--syn-interactive-quiet-color);
     font-size: var(--syn-font-size-medium);
     width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
   }

package/metadata/packages/components/components/syn-tag/component.custom.styles.ts

@@ -68,7 +68,7 @@ export default css`
 
   /* Hover */
   .tag.tag--removable:hover {
-    background-color: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-100));
+    background-color: var(--syn-interactive-background-color-hover);
   }
   
   .tag .tag__remove:hover {

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

@@ -169,24 +169,6 @@ programmatically.
     return this.nativeElement.trigger;
   }
 
-  /**
-* Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-`overflow: auto|hidden|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all,
-scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  @Input()
-  set hoist(v: '' | SynTooltip['hoist']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hoist = v === '' || v),
-    );
-  }
-  get hoist(): SynTooltip['hoist'] {
-    return this.nativeElement.hoist;
-  }
-
   /**
    * Emitted when the tooltip begins to show.
    */

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

@@ -101,14 +101,6 @@ export default class SynTooltip extends SynergyElement {
    */
   @property() trigger = 'hover focus';
 
-  /**
-   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-   * scenarios.
-    * @deprecated This property is deprecated and will be removed in the next major version.
-   */
-  @property({ type: Boolean }) hoist = false;
-
   constructor() {
     super();
     this.addEventListener('blur', this.handleBlur, true);
@@ -229,7 +221,7 @@ export default class SynTooltip extends SynergyElement {
     }
   }
 
-  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+  @watch(['content', 'distance','placement', 'skidding'])
   async handleOptionsChange() {
     if (this.hasUpdated) {
       await this.updateComplete;
@@ -285,7 +277,6 @@ export default class SynTooltip extends SynergyElement {
         placement=${this.placement}
         distance=${this.distance}
         skidding=${this.skidding}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
         flip
         shift
         arrow

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

@@ -94,16 +94,6 @@ options can be passed by separating them with a space.
 programmatically.
  */
   trigger?: SynTooltip['trigger'];
-
-  /**
-* Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-`overflow: auto|hidden|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all,
-scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  hoist?: SynTooltip['hoist'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.