@synergy-design-system/mcp 2.7.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 2.8.1
+
+### Patch Changes
+
+- [#1208](https://github.com/synergy-design-system/synergy-design-system/pull/1208) [`49c9d1c`](https://github.com/synergy-design-system/synergy-design-system/commit/49c9d1c30d777384024134ec983d183aed109421) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-03
+
+  fix: 🐛 `<syn-menu-item>`: Slotted `<syn-icon>` elements not visible on hover (#1194)
+
+  This release fixes a bug that accidentally set the color of slotted elements in `<syn-menu-item>` to white which lead to the icons appear to be invisible.
+
+## 2.8.0
+
+### Minor Changes
+
+- [#1192](https://github.com/synergy-design-system/synergy-design-system/pull/1192) [`31c54c0`](https://github.com/synergy-design-system/synergy-design-system/commit/31c54c04a651a14e20bc5f4b2aff1bd92ad26bc0) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-02
+
+  feat: ✨ New variant `tooltip` for `<syn-validate>` (#664)
+
+  `<syn-validate>` received the option to show validation errors using `<syn-tooltip>`.
+  To use this feature, set the `variant` property to `tooltip`.
+
 ## 2.7.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-8ed433601cf1c2dfa44ffdbdd527f2bf
+fd0fb372f326cb0b33ccba89f91bce9a

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

@@ -1,8 +1,7 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
   :host {
     display: contents;
 
@@ -11,19 +10,54 @@ export default css`
   }
 
   .alert {
-    position: relative;
-    display: flex;
+    /* Defines the used border and icon color for variants */
+    --variant-color-border: var(--syn-alert-informative-color-border);
+    --variant-color-background: var(--syn-alert-informative-color-background);
+    --variant-color-icon: var(--syn-alert-informative-color-icon);
+    --variant-color-indicator: var(--syn-alert-informative-color-indicator);
+
+    /* Defines special settings for sizes */
+    --size-font-size: var(--syn-font-size-medium);
+    --size-icon-size: var(--syn-font-size-x-large);
+    --size-min-height: 54px;
+    --size-message-padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
+    --size-icon-padding-block: var(--syn-spacing-medium);
+    --size-icon-padding-inline: var(--syn-spacing-medium);
+
     align-items: stretch;
-    background-color: var(--syn-panel-background-color);
-    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);
-    border-top-width: calc(var(--syn-panel-border-width) * 3);
-    border-radius: var(--syn-border-radius-medium);
+    background-color: var(--variant-color-background);
+    border: var(--syn-panel-border-width) solid var(--variant-color-border);
+    border-left: 0;
+    border-radius: var(--syn-border-radius-none);
+    box-sizing: content-box;
+    color: var(--syn-typography-color-text);
+    display: flex;
     font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-small);
+    font-size: var(--size-font-size);
     font-weight: var(--syn-font-weight-normal);
-    line-height: 1.6;
-    color: var(--syn-color-neutral-700);
+    line-height: var(--syn-line-height-normal);
     margin: inherit;
+    min-height: var(--size-min-height);
+    position: relative;
+  }
+
+  /**
+   * Add back the items left borders
+   * This is done to prevent border clipping with the large border-left needed on .alert
+   * Note we also need to adjust our paddings to add the border width here
+   */
+  .alert::before {
+    background: var(--variant-color-indicator);
+    bottom: -1px;
+    content: "";
+    left: 0;
+    position: absolute;
+    top: -1px;
+    width: var(--syn-spacing-2x-small);
+  }
+
+  .alert :first-child {
+    margin-inline-start: var(--syn-spacing-2x-small);
   }
 
   .alert:not(.alert--has-icon) .alert__icon,
@@ -31,12 +65,17 @@ export default css`
     display: none;
   }
 
+  /**
+   * Make sure everything is aligned to top
+   */
   .alert__icon {
-    flex: 0 0 auto;
+    align-items: flex-start;
+    color: var(--variant-color-icon);
     display: flex;
-    align-items: center;
-    font-size: var(--syn-font-size-large);
-    padding-inline-start: var(--syn-spacing-large);
+    flex: 0 0 auto;
+    font-size: var(--size-icon-size);
+    padding-block-start: var(--size-icon-padding-block);
+    padding-inline-start: var(--size-icon-padding-inline);
   }
 
   .alert--has-countdown {
@@ -44,28 +83,34 @@ export default css`
   }
 
   .alert__message {
-    flex: 1 1 auto;
+    align-self: center;
     display: block;
-    padding: var(--syn-spacing-large);
+    flex: 1 1 auto;
+    padding: var(--size-message-padding);
   }
 
+  /**
+   * Close Icon
+   */
   .alert__close-button {
-    flex: 0 0 auto;
+    align-items: flex-start;
+    align-self: start; /* #1135: Fix alignment for the close icon */
+    color: var(--syn-typography-color-text);
     display: flex;
-    align-items: center;
-    font-size: var(--syn-font-size-medium);
-    margin-inline-end: var(--syn-spacing-medium);
-    align-self: center;
+    flex: 0 0 auto;
+    font-size: var(--size-icon-size);
+    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
+    margin-inline-end: var(--syn-spacing-x-small);
   }
 
   .alert__countdown {
-    position: absolute;
+    background-color: var(--syn-panel-border-color);
     bottom: 0;
+    display: flex;
+    height: calc(var(--syn-panel-border-width) * 3);
     left: 0;
+    position: absolute;
     width: 100%;
-    height: calc(var(--syn-panel-border-width) * 3);
-    background-color: var(--syn-panel-border-color);
-    display: flex;
   }
 
   .alert__countdown--ltr {
@@ -97,6 +142,61 @@ export default css`
     background-color: var(--syn-color-danger-600);
   }
 
+  /**
+   * Variant colors
+   */
+  .alert--success {
+    --variant-color-border: var(--syn-alert-success-color-border);
+    --variant-color-background: var(--syn-alert-success-color-background);
+    --variant-color-icon: var(--syn-alert-success-color-icon);
+    --variant-color-indicator: var(--syn-alert-success-color-indicator);
+  }
+
+  .alert--neutral {
+    --variant-color-border: var(--syn-alert-neutral-color-border);
+    --variant-color-background: var(--syn-alert-neutral-color-background);
+    --variant-color-icon: var(--syn-alert-neutral-color-icon);
+    --variant-color-indicator: var(--syn-alert-neutral-color-indicator);
+  }
+
+  .alert--warning {
+    --variant-color-border: var(--syn-alert-warning-color-border);
+    --variant-color-background: var(--syn-alert-warning-color-background);
+    --variant-color-icon: var(--syn-alert-warning-color-icon);
+    --variant-color-indicator: var(--syn-alert-warning-color-indicator);
+  }
+
+  .alert--danger {
+    --variant-color-border: var(--syn-alert-error-color-border);
+    --variant-color-background: var(--syn-alert-error-color-background);
+    --variant-color-icon: var(--syn-alert-error-color-icon);
+    --variant-color-indicator: var(--syn-alert-error-color-indicator);
+  }
+
+  /* #1119: Alert Sizes */
+  .alert--small {
+    --size-font-size: var(--syn-font-size-small);
+    --size-icon-size: var(--syn-font-size-large);
+    --size-min-height: 44px;
+    --size-message-padding: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-small);
+    --size-icon-padding-block: var(--syn-spacing-small);
+    --size-icon-padding-inline: var(--syn-spacing-small);
+  }
+
+  /* Adjust close button size for small alerts */
+  .alert--small .alert__close-button {
+    font-size: var(--syn-font-size-medium);
+  }
+
+  .alert--large {
+    --size-font-size: var(--syn-font-size-large);
+    --size-icon-size: var(--syn-font-size-2x-large);
+    --size-min-height: 68px;
+    --size-message-padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-medium-large) var(--syn-spacing-medium-large);
+    --size-icon-padding-block: var(--syn-spacing-medium-large);
+    --size-icon-padding-inline: var(--syn-spacing-medium-large);
+  }
+
   .alert__timer {
     display: none;
   }

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

@@ -13,7 +13,6 @@ import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIconButton from '../icon-button/icon-button.component.js';
 import styles from './alert.styles.js';
-import customStyles from './alert.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
@@ -44,7 +43,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynAlert')
 export default class SynAlert extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'syn-icon-button': SynIconButton };
 
   private autoHideTimeout: number;

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

@@ -1,8 +1,6 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
     display: inline-block;
   }
@@ -32,11 +30,11 @@ export default css`
   }
 
   .dropdown__panel {
+    border-radius: var(--syn-border-radius-medium);
+    box-shadow: var(--syn-shadow-large);
     font-family: var(--syn-font-sans);
     font-size: var(--syn-font-size-medium);
     font-weight: var(--syn-font-weight-normal);
-    box-shadow: var(--syn-shadow-large);
-    border-radius: var(--syn-border-radius-medium);
     pointer-events: none;
   }
 
@@ -47,7 +45,7 @@ export default css`
 
   /* When users slot a menu, make sure it conforms to the popup's auto-size */
   ::slotted(syn-menu) {
-    max-width: var(--auto-size-available-width) !important;
     max-height: var(--auto-size-available-height) !important;
+    max-width: var(--auto-size-available-width) !important;
   }
 `;

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

@@ -14,7 +14,6 @@ import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynPopup from '../popup/popup.component.js';
 import styles from './dropdown.styles.js';
-import customStyles from './dropdown.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { SynSelectEvent } from '../../events/syn-select.js';
 import type SynButton from '../button/button.js';
@@ -46,7 +45,7 @@ import type SynMenu from '../menu/menu.js';
  * @animation dropdown.hide - The animation to use when hiding the dropdown.
  */
 export default class SynDropdown extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'syn-popup': SynPopup };
 
   @query('.dropdown') popup: SynPopup;

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

@@ -1,20 +1,37 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
-    display: block;
-    position: relative;
     background: var(--syn-panel-background-color);
     border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);
-    border-radius: var(--syn-border-radius-medium);
-    padding: var(--syn-spacing-x-small) 0;
+    border-radius: var(--syn-input-border-radius-medium);
+    display: block;
     overflow: auto;
     overscroll-behavior: none;
+    padding: var(--syn-spacing-x-small) 0;
+    position: relative;
   }
 
   ::slotted(syn-divider) {
+    /* #369: Slotted syn-dividers should use a lighter color so they do not crash with the border visually */
+    --color: var(--syn-panel-border-color);
     --spacing: var(--syn-spacing-x-small);
   }
+
+  /**
+   * Make sure to hide the syn-divider for the first syn-optgroup
+   * Note! ::slotted does currently not work with ::part, so we
+   * opted for using a css variable here.
+   */
+  ::slotted(syn-menu-label:first-of-type) {
+    --display-divider: none;
+  }
+
+  /*
+   * #368: Hide the checkmarks for menu items
+   * when no syn-menu-item[checkbox] or loading is present
+   */
+  .menu--no-checkmarks::slotted(syn-menu-item) {
+    --display-checkmark: none;
+  }
 `;

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

@@ -7,7 +7,6 @@ import type { SynAttributesChangedEvent } from '../../events/syn-attributes-chan
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './menu.styles.js';
-import customStyles from './menu.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type SynMenuItem from '../menu-item/menu-item.component.js';
 
@@ -26,7 +25,7 @@ export interface MenuSelectEventDetail {
  * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
  */
 export default class SynMenu extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
   @state() hasMenuItemsWithCheckmarks = false;

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

@@ -1,11 +1,25 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
   :host {
     --submenu-offset: -2px;
 
+    /* Custom override for hiding the checkmark in menus it is not needed */
+    --display-checkmark: flex;
+
+    /**
+     * Default size settings for menu-item
+     * This prepares the custom sizes that we will add later on
+     * @see https://github.com/synergy-design-system/design/issues/277
+     */
+    --menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);
+    --menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
+    --menuitem-min-height: var(--syn-input-height-medium);
+    --menuitem-padding: var(--syn-input-spacing-medium);
+    --menuitem-font-size: var(--syn-input-font-size-medium);
+    --menuitem-icon-size: var(--syn-spacing-large);
+
     display: block;
   }
 
@@ -14,116 +28,168 @@ export default css`
   }
 
   .menu-item {
-    position: relative;
+    align-items: center;
+
+    /*
+     * #1127: Brand2025 defines a small gap between options
+     * and rounded corners. We achieve that using an border
+     * that simulates the gap using the menu background color.
+     */
+    border: solid var(--syn-panel-background-color);
+
+    /* 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);
+    cursor: pointer;
     display: flex;
-    align-items: stretch;
     font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-medium);
+    font-size: var(--menuitem-font-size);
     font-weight: var(--syn-font-weight-normal);
-    line-height: var(--syn-line-height-normal);
     letter-spacing: var(--syn-letter-spacing-normal);
-    color: var(--syn-color-neutral-700);
-    padding: var(--syn-spacing-2x-small) var(--syn-spacing-2x-small);
+    line-height: var(--syn-line-height-normal);
+
+    /* Height is dependent on line-height of .option__label, which does not fit the layout completely */
+    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));
+    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
+    position: relative;
     transition: var(--syn-transition-fast) fill;
-    user-select: none;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-user-select: none;
+    user-select: none;
     white-space: nowrap;
-    cursor: pointer;
   }
 
   .menu-item.menu-item--disabled {
-    outline: none;
-    opacity: 0.5;
     cursor: not-allowed;
+
+    /** #429: Use token for opacity */
+    opacity: var(--syn-opacity-50);
+    outline: none;
   }
 
   .menu-item.menu-item--loading {
-    outline: none;
     cursor: wait;
+    outline: none;
   }
 
   .menu-item.menu-item--loading *:not(syn-spinner) {
-    opacity: 0.5;
+    opacity: var(--syn-opacity-50);
   }
 
   .menu-item--loading syn-spinner {
     --indicator-color: currentColor;
-    --track-width: 1px;
+    --track-width: 2px;
+
+    color: var(--syn-interactive-emphasis-color);
+    font-size: var(--syn-font-size-medium);
+    left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
+    opacity: 1;
     position: absolute;
-    font-size: 0.75em;
     top: calc(50% - 0.5em);
-    left: 0.65rem;
-    opacity: 1;
   }
 
   .menu-item .menu-item__label {
-    flex: 1 1 auto;
     display: inline-block;
-    text-overflow: ellipsis;
+    flex: 1 1 auto;
     overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .menu-item .menu-item__prefix {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
+    display: flex;
+    flex: 0 0 auto;
   }
 
   .menu-item .menu-item__prefix::slotted(*) {
-    margin-inline-end: var(--syn-spacing-x-small);
+    margin-inline-end: var(--syn-spacing-small);
   }
 
   .menu-item .menu-item__suffix {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
+    display: flex;
+    flex: 0 0 auto;
   }
 
   .menu-item .menu-item__suffix::slotted(*) {
-    margin-inline-start: var(--syn-spacing-x-small);
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  /**
+   * Set the default font size to make icons appear correct
+   */
+  .menu-item .menu-item__prefix::slotted(syn-icon),
+  .menu-item .menu-item__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color);
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  /**
+   * #1194: Make sure hover is only done on non disabled items
+   */
+  :host(:hover) .menu-item:not(.menu-item--disabled) .menu-item__prefix::slotted(syn-icon),
+  :host(:hover) .menu-item:not(.menu-item--disabled) .menu-item__suffix::slotted(syn-icon) {
+    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);
   }
 
   /* Safe triangle */
   .menu-item--submenu-expanded::after {
-    content: '';
-    position: fixed;
-    z-index: calc(var(--syn-z-index-dropdown) - 1);
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     clip-path: polygon(
       var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
       var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
       var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
     );
+    content: '';
+    inset: 0;
+    position: fixed;
+    z-index: calc(var(--syn-z-index-dropdown) - 1);
   }
 
   :host(:focus-visible) {
     outline: none;
   }
 
-  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
+  :host(:hover:not([aria-disabled='true']):not(:focus-visible)) .menu-item,
   .menu-item--submenu-expanded {
-    background-color: var(--syn-color-neutral-100);
-    color: var(--syn-color-neutral-1000);
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   :host(:focus-visible) .menu-item {
-    outline: none;
-    background-color: var(--syn-color-primary-600);
+    background-color: var(--syn-option-background-color-active);
     color: var(--syn-color-neutral-0);
     opacity: 1;
+    outline: none;
   }
 
   .menu-item .menu-item__check,
   .menu-item .menu-item__chevron {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
+    display: var(--display-checkmark);
+    flex: 0 0 auto;
+    font-size: var(--syn-font-size-x-large);
     justify-content: center;
-    width: 1.5em;
     visibility: hidden;
+    width: var(--syn-font-size-x-large);
+  }
+
+  .menu-item .menu-item__check {
+    color: var(--syn-option-check-color);
+    margin-inline-end: var(--syn-spacing-small);
+  }
+
+  /**
+   * This makes sure the chevron does not take any space if we do not have children
+   */
+  .menu-item .menu-item__chevron {
+    display: none;
+    margin-inline-start: var(--syn-spacing-small);
   }
 
   .menu-item--checked .menu-item__check,
@@ -131,17 +197,79 @@ export default css`
     visibility: visible;
   }
 
+  /**
+   * Make sure to show the chevron if there are children
+   */
+  .menu-item--has-submenu .menu-item__chevron {
+    display: flex;
+  }
+
+  /**
+   * When in loading state, do not show the checkmark as it would bleed through
+   */
+  .menu-item--loading .menu-item__check {
+    visibility: hidden;
+  }
+
+  /**
+   * 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);
+  }
+
+  :host(:hover) .menu-item--checked:not(.menu-item--disabled) .menu-item__check {  
+    color: var(--syn-option-check-color-hover);
+  }
+
+  /**
+   * Special handling for the submenu chevron:
+   * We are using the "chevron-down" icon per default as
+   * we do not want all chevrons to be part of the bundle
+   * Therefore, we have to transform it into the right direction
+   */
+  .menu-item .menu-item__chevron syn-icon {
+    transform: rotate(-90deg);
+  }
+
+  .menu-item--rtl .menu-item__chevron syn-icon {
+    transform: rotate(90deg);
+  }
+
+  /**
+   * Highlight checked items
+   */
+  .menu-item--checked .menu-item__label {
+    font-weight: var(--syn-font-weight-semibold);
+  }
+
+  /* Needed if we do not show the checkmark */
+  :host(:not([type="checkmark"]):not([loading])) .menu-item__label {
+    min-height: var(--syn-font-size-x-large);
+  }
+
   /* Add elevation and z-index to submenus */
   syn-popup::part(popup) {
+    /* #1131: Make sure that slotted menus do show the correct border radius */
+    border-radius: var(--syn-input-border-radius-medium);
     box-shadow: var(--syn-shadow-large);
-    z-index: var(--syn-z-index-dropdown);
     margin-left: var(--submenu-offset);
+    z-index: var(--syn-z-index-dropdown);
   }
 
   .menu-item--rtl syn-popup::part(popup) {
     margin-left: calc(-1 * var(--submenu-offset));
   }
 
+  /**
+   * #1009: Adjust the position for submenus when they are opened to the left, too.
+   * This works because the data-current-placement attribute is set on the popup accordingly.
+   * We do not use the actual placement attribute, because it does not update when the placement changes
+   */
+  syn-popup[data-current-placement^="left"]::part(popup) {
+    margin-left: calc(-1 * var(--submenu-offset));
+  }
+
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .menu-item,
     :host(:focus-visible) .menu-item {
@@ -151,7 +279,7 @@ export default css`
   }
 
   ::slotted(syn-menu) {
-    max-width: var(--auto-size-available-width) !important;
     max-height: var(--auto-size-available-height) !important;
+    max-width: var(--auto-size-available-width) !important;
   }
 `;