@synergy-design-system/mcp 1.41.2 → 2.0.0

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

@@ -11,7 +11,7 @@ export default css`
   }
 
   .checkbox__control {
-    border-radius: var(--syn-checkbox-border-radius, var(--syn-input-border-radius-small));
+    border-radius: var(--syn-checkbox-border-radius);
 
     /* #1083: This adds spacing around multi-line labels */
     margin: 0.1em 0;
@@ -20,8 +20,8 @@ export default css`
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__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);
   }
 
   :host([data-user-invalid]) .checkbox__control {
@@ -56,8 +56,8 @@ export default css`
    */
   .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__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);
   }
 
   /*
@@ -74,8 +74,8 @@ export default css`
   /* Checked/indeterminate */
   .checkbox.checkbox--checked:not(.checkbox--disabled):active .checkbox__control,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled):active .checkbox__control {
-    background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-900));
-    border-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-900));
+    background: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
   }
 
   .checkbox__label {

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

@@ -242,23 +242,6 @@ and `hide()` methods and this attribute will reflect the combobox's open state.
     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: '' | SynCombobox['hoist']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hoist = v === '' || v),
-    );
-  }
-  get hoist(): SynCombobox['hoist'] {
-    return this.nativeElement.hoist;
-  }
-
   /**
    * The combobox's label.
    * If you need to display HTML, use the `label` slot instead.

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

@@ -169,14 +169,6 @@ export default class SynCombobox extends SynergyElement implements SynergyFormCo
    */
   @property({ reflect: true, type: Boolean }) 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 combobox's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
@@ -1002,7 +994,6 @@ export default class SynCombobox extends SynergyElement implements SynergyFormCo
               'combobox--top': this.placement === 'top',
             })}
             placement=${`${this.placement}-start`}
-            strategy=${this.hoist ? 'fixed' : 'absolute'}
             flip
             shift
             sync="width"

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

@@ -120,15 +120,6 @@ and `hide()` methods and this attribute will reflect the combobox's open state.
  */
   open?: SynCombobox['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?: SynCombobox['hoist'];
-
   /**
    * The combobox's label.
    * If you need to display HTML, use the `label` slot instead.

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

@@ -39,7 +39,7 @@ export default css`
    * we have to adjust the rotation of the icon when the details is open.
    */
   .details--open .details__summary-icon {
-    rotate: var(--syn-details-open-rotation, 360deg);
+    rotate: var(--syn-details-open-rotation);
   }
 
   /**

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

@@ -33,7 +33,7 @@ export default css`
   /* Overlay Background */
   .dialog__overlay {
     /* #946: Add background blur for sick 2025 */
-    backdrop-filter: blur(var(--syn-overlay-background-blur, 0));
+    backdrop-filter: blur(var(--syn-overlay-background-blur));
   }
 
   /**

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

@@ -154,23 +154,6 @@ dropdowns that allow for multiple interactions.
     return this.nativeElement.skidding;
   }
 
-  /**
-* Enable this option to prevent the panel 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: '' | SynDropdown['hoist']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hoist = v === '' || v),
-    );
-  }
-  get hoist(): SynDropdown['hoist'] {
-    return this.nativeElement.hoist;
-  }
-
   /**
    * Syncs the popup width or height to that of the trigger element.
    */

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

@@ -108,13 +108,6 @@ export default class SynDropdown extends SynergyElement {
   /** The distance in pixels from which to offset the panel along its trigger. */
   @property({ type: Number }) skidding = 0;
 
-  /**
-   * Enable this option to prevent the panel 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;
-
   /**
    * Syncs the popup width or height to that of the trigger element.
    */
@@ -438,7 +431,6 @@ export default class SynDropdown extends SynergyElement {
         placement=${this.placement}
         distance=${this.distance}
         skidding=${this.skidding}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
         flip
         shift
         auto-size="vertical"

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

@@ -84,15 +84,6 @@ dropdowns that allow for multiple interactions.
    */
   skidding?: SynDropdown['skidding'];
 
-  /**
-* Enable this option to prevent the panel 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?: SynDropdown['hoist'];
-
   /**
    * Syncs the popup width or height to that of the trigger element.
    */

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

@@ -77,13 +77,13 @@ export default css`
    */
   .form-control--user-dragging:not([disabled]) .button::part(base) {
     background: none;
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-interactive-emphasis-color-hover);
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /* Drop Area */
   .droparea {
-    --highlight-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --highlight-color: var(--syn-interactive-emphasis-color);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color);
     border-radius: var(--syn-input-border-radius-medium);
@@ -93,7 +93,7 @@ export default css`
   }
 
   .droparea:focus-visible {
-    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -161,12 +161,12 @@ export default css`
 
   :host(:not([disabled])) .form-control--user-dragging .droparea {
     background: var(--syn-color-primary-50);
-    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);
     cursor: pointer;
   }
 
   :host(:not([disabled])) .droparea:not(:focus-visible):hover {
-    --highlight-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    --highlight-color: var(--syn-interactive-emphasis-color-hover);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);
     cursor: pointer;

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

@@ -7,7 +7,7 @@ export default css`
 
   .header {
     background: var(--syn-panel-background-color);
-    box-shadow: inset 0 -1px 0 0 var(--syn-header-border-color, var(--syn-color-neutral-400));
+    box-shadow: inset 0 -1px 0 0 var(--syn-header-border-color);
   }
 
   /**
@@ -39,7 +39,7 @@ export default css`
    */
   .header__logo ::slotted(a),
   .header__logo ::slotted(a:hover) {
-    color: var(--syn-logo-color, var(--syn-color-primary-600));
+    color: var(--syn-logo-color);
   }
 
   .header__logo ::slotted(a:is(:focus-visible)) {
@@ -52,7 +52,7 @@ export default css`
    */
   .header__logo syn-icon,
   .header__logo syn-icon::part(svg) {
-    color: var(--syn-logo-color, var(--syn-color-primary-600));
+    color: var(--syn-logo-color);
     height: 32px;
     width: auto;
   }
@@ -78,7 +78,7 @@ export default css`
   }
 
   .header__meta-navigation ::slotted(*) {
-    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
+    color: var(--syn-interactive-quiet-color);
     display: contents;
     font-size: var(--syn-font-size-x-large);
   }
@@ -97,7 +97,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
+    color: var(--syn-interactive-quiet-color);
     cursor: pointer;
     display: flex;
     font-size: var(--syn-font-size-x-large);
@@ -107,11 +107,11 @@ export default css`
   }
 
   .header__burger-menu-toggle:hover {
-    color: var(--syn-interactive-quiet-color-hover, var(--syn-color-primary-600));
+    color: var(--syn-interactive-quiet-color-hover);
   }
 
   .header__burger-menu-toggle:active {
-    color: var(--syn-interactive-quiet-color-active, var(--syn-color-primary-700));
+    color: var(--syn-interactive-quiet-color-active);
   }
 
   .header__burger-menu-toggle:focus-visible {

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

@@ -16,7 +16,7 @@ export default css`
 
   /* Remove round borders */
   .icon-button:focus-visible {
-    border-radius: var(--syn-icon-button-focus-ring-border-radius, var(--syn-border-radius-none));
+    border-radius: var(--syn-icon-button-focus-ring-border-radius);
   }
 
   /* Colors */
@@ -26,31 +26,31 @@ export default css`
 
   :host([color="primary"]),
   :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    color: var(--syn-interactive-emphasis-color);
   }
 
   :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    color: var(--syn-interactive-emphasis-color-active);
   }
 
   :host([color="neutral"]) {
-    color: var(--syn-interactive-quiet-color, var(--syn-typography-color-text));
+    color: var(--syn-interactive-quiet-color);
   }
 
   :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-interactive-quiet-color-hover, var(--syn-color-primary-600));
+    color: var(--syn-interactive-quiet-color-hover);
   }
 
   :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-interactive-quiet-color-active, var(--syn-color-primary-700));
+    color: var(--syn-interactive-quiet-color-active);
   }
 
   :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
-    color: var(--syn-interactive-quiet-color, var(--syn-typography-color-text));
+    color: var(--syn-interactive-quiet-color);
   }
 
   /* Sizes */

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

@@ -225,7 +225,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    color: var(--syn-interactive-emphasis-color);
     cursor: pointer;
     display: flex;
     padding: var(--syn-spacing-x-small);
@@ -245,11 +245,11 @@ export default css`
   }
 
   .input__number-stepper-button:hover:not([disabled]) {
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   .input__number-stepper-button:active:not([disabled]) {
-    color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    color: var(--syn-interactive-emphasis-color-active);
   }
 
   .input__number-stepper-button[disabled] {

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

@@ -264,7 +264,7 @@ export default class SynInput extends SynergyElement implements SynergyFormContr
     type: Number,
   }) maxFractionDigits: number;
 
-  #numericStrategy: NumericStrategy = nativeNumericStrategy;
+  #numericStrategy: NumericStrategy = modernNumericStrategy;
 
   /**
    * Defines the strategy for handling numbers in the numeric input.
@@ -305,8 +305,7 @@ export default class SynInput extends SynergyElement implements SynergyFormContr
   }
 
   /**
-   * @default nativeNumericStrategy
-   * @todo: This must be changed to "modern" in Synergy@3
+   * @default modernNumericStrategy
    */
   get numericStrategy(): 'native' | 'modern' | Partial<NumericStrategy> {
     return this.#numericStrategy;

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

@@ -31,7 +31,7 @@ export default css`
     /* Border Radius needs to be increased to cover the outline */
     border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));
     border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);
-    color: var(--syn-option-color, var(--syn-typography-color-text));
+    color: var(--syn-option-color);
     font-size: var(--menuitem-font-size);
 
     /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
@@ -40,7 +40,7 @@ export default css`
   }
 
   :host(:focus-visible) .menu-item {
-    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
+    background-color: var(--syn-option-background-color-active);
   }
 
   /** #429: Use token for opacity */
@@ -64,26 +64,26 @@ export default css`
    */
   .menu-item .menu-item__prefix::slotted(syn-icon),
   .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
+    color: var(--syn-option-icon-color);
     font-size: var(--syn-font-size-x-large);
   }
 
   :host(:hover) .menu-item .menu-item__prefix::slotted(syn-icon),
   :host(:hover) .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover, var(--syn-typography-color-text-inverted));
+    color: var(--syn-option-icon-color-hover);
   }
 
   :host(:focus-visible) .menu-item .menu-item__prefix::slotted(syn-icon),
   :host(:focus-visible) .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active, var(--syn-typography-color-text-inverted));
+    color: var(--syn-option-icon-color-active);
   }
 
   /* Adjust background and text color for focused elements */
   /* stylelint-disable selector-not-notation, plugin/no-unsupported-browser-features */
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
   .menu-item--submenu-expanded {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
   /* stylelint-enable selector-not-notation, plugin/no-unsupported-browser-features */
 
@@ -106,7 +106,7 @@ export default css`
   }
 
   .menu-item .menu-item__check {
-    color: var(--syn-option-check-color, var(--syn-color-primary-600));
+    color: var(--syn-option-check-color);
     margin-inline-end: var(--syn-spacing-small);
   }
 
@@ -121,11 +121,11 @@ export default css`
    * Make sure the checkbox is also visible when the item is active
    */
   :host(:focus-visible) .menu-item--checked .menu-item__check {
-    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-active);
   }
 
   :host(:hover) .menu-item--checked .menu-item__check {
-    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-hover);
   }
 
   /**
@@ -159,7 +159,7 @@ export default css`
   .menu-item--loading syn-spinner {
     --track-width: 2px;
 
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
+    color: var(--syn-interactive-emphasis-color);
     font-size: var(--syn-font-size-medium);
     left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }

package/metadata/packages/components/components/syn-nav-item/component.styles.ts

@@ -103,7 +103,7 @@ export default css`
    * Basic set up for the nav item prefix.
    */
   .nav-item:not(.nav-item--disabled)::before {
-    background: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-50));
+    background: var(--syn-interactive-background-color-hover);
     content: '';
     display: block;
     height: 100%;
@@ -127,7 +127,7 @@ export default css`
    * #443: Add support for active state
    */
   .nav-item:not(.nav-item--disabled):active::before {
-    background: var(--syn-interactive-background-color-active, var(--syn-color-neutral-50));
+    background: var(--syn-interactive-background-color-active);
     opacity: 1;
   }
 
@@ -267,7 +267,7 @@ export default css`
   }
 
   .current-indicator--visible {
-    background: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    background: var(--syn-interactive-emphasis-color);
   }
 
   .nav-item--horizontal .current-indicator {

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

@@ -51,7 +51,7 @@ export default css`
 
   .optgroup__prefix,
   .optgroup__suffix {
-    color: var(--syn-option-icon-color, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color);
     font-size: var(--syn-spacing-large);
   }
 

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

@@ -36,18 +36,18 @@ export default css`
   }
 
   .option:not(.option--current) {
-    color: var(--syn-option-color, var(--syn-typography-color-text));
+    color: var(--syn-option-color);
   }
 
   .option--current,
   .option--current.option--hover:not(.option--disabled) {
-    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-active);
+    color: var(--syn-option-color-active);
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   /** #429: Use token for opacity */
@@ -56,8 +56,8 @@ export default css`
   }
 
   .option--current.option--disabled {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   .option__label {
@@ -65,7 +65,7 @@ export default css`
   }
 
   .option__check {
-    color: var(--syn-option-check-color, var(--syn-color-primary-600));
+    color: var(--syn-option-check-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
@@ -75,11 +75,11 @@ export default css`
 
   /* Invert the check mark when keyboard navigation is used */
   .option--current .option__check {
-    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-active);
   }
 
   .option--hover:not(.option--current) .option__check {
-    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-hover);
   }
 
   /* Use larger spacing between icons and content */
@@ -94,18 +94,18 @@ export default css`
   /* Set correct icon size when someone uses syn-icon in the slots */
   .option__prefix::slotted(syn-icon),
   .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
+    color: var(--syn-option-icon-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
   .option--hover .option__prefix::slotted(syn-icon),
   .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-hover);
   }
 
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-active);
   }
 
   /* This is needed for the highlight styling of the options in syn-combobox */

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

@@ -108,22 +108,6 @@ panel inside of the viewport.
     return this.nativeElement.placement;
   }
 
-  /**
-* Determines how the popup is positioned.
-* The `absolute` strategy works well in most cases, but if overflow is
-clipped, using a `fixed` position strategy can often workaround it.
-
-@deprecated The strategy property is deprecated and will be removed in future versions.
-* Modern browsers support the popover element which is used internally instead.
- */
-  @Input()
-  set strategy(v: SynPopup['strategy']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.strategy = v));
-  }
-  get strategy(): SynPopup['strategy'] {
-    return this.nativeElement.strategy;
-  }
-
   /**
    * The distance in pixels from which to offset the panel away from its anchor.
    */

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

@@ -106,13 +106,6 @@ export default class SynPopup extends SynergyElement {
     | 'left-start'
     | 'left-end' = 'top';
 
-  /**
-   * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
-   * clipped, using a `fixed` position strategy can often workaround it.
-   * @deprecated The strategy property is deprecated and will be removed in future versions. Modern browsers support the popover element which is used internally instead.
-   */
-  @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';
-
   /** The distance in pixels from which to offset the panel away from its anchor. */
   @property({ type: Number }) distance = 0;
 
@@ -417,14 +410,14 @@ export default class SynPopup extends SynergyElement {
     // More info: https://github.com/shoelace-style/shoelace/issues/1135
     //
     const getOffsetParent =
-      SUPPORTS_POPOVER || this.strategy === 'absolute'
+      SUPPORTS_POPOVER
         ? (element: Element) => platform.getOffsetParent(element, offsetParent)
         : platform.getOffsetParent;
 
     computePosition(this.anchorEl, this.popup, {
       placement: this.placement,
       middleware,
-      strategy: SUPPORTS_POPOVER ? 'absolute' : this.strategy,
+      strategy: SUPPORTS_POPOVER ? 'absolute' : 'fixed',
       platform: {
         ...platform,
         getOffsetParent
@@ -585,7 +578,7 @@ export default class SynPopup extends SynergyElement {
         class=${classMap({
           popup: true,
           'popup--active': this.active,
-          'popup--fixed': !SUPPORTS_POPOVER && this.strategy === 'fixed',
+          'popup--fixed': !SUPPORTS_POPOVER,
           'popup--has-arrow': this.arrow
         })}
       >

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

@@ -72,16 +72,6 @@ panel inside of the viewport.
  */
   placement?: SynPopup['placement'];
 
-  /**
-* Determines how the popup is positioned.
-* The `absolute` strategy works well in most cases, but if overflow is
-clipped, using a `fixed` position strategy can often workaround it.
-
-@deprecated The strategy property is deprecated and will be removed in future versions.
-* Modern browsers support the popover element which is used internally instead.
- */
-  strategy?: SynPopup['strategy'];
-
   /**
    * The distance in pixels from which to offset the panel away from its anchor.
    */