@synergy-design-system/mcp 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

package/metadata/checksum.txt

@@ -1 +1 @@
-8e6d1d17a574847bbf85bc978ec6d9c9
+fd0fb372f326cb0b33ccba89f91bce9a

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

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

@@ -12,7 +12,6 @@ import SynIcon from '../icon/icon.component.js';
 import SynPopup from '../popup/popup.component.js';
 import SynSpinner from '../spinner/spinner.component.js';
 import styles from './menu-item.styles.js';
-import customStyles from './menu-item.custom.styles.js';
 import { emitEventForPropertyUpdates } from '../../internal/watchEvent.js';
 import type { CSSResultGroup } from 'lit';
 
@@ -46,7 +45,7 @@ import type { CSSResultGroup } from 'lit';
   waitUntilFirstUpdated: true,
 })
 export default class SynMenuItem extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = {
     'syn-icon': SynIcon,
     'syn-popup': SynPopup,

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

@@ -1,21 +1,31 @@
-/* eslint-disable */
 import { css } from 'lit';
+
 export default css`
-	/* stylelint-disable */
   :host {
+    --display-divider: block;
+
     display: block;
   }
 
+  .menu-label__divider {
+    --spacing: 0;
+
+    display: var(--display-divider);
+    margin-bottom: var(--syn-spacing-x-small);
+  }
+
   .menu-label {
+    color: var(--syn-input-color);
     display: inline-block;
     font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-small);
+    font-size: var(--syn-font-size-medium);
     font-weight: var(--syn-font-weight-semibold);
-    line-height: var(--syn-line-height-normal);
     letter-spacing: var(--syn-letter-spacing-normal);
-    color: var(--syn-color-neutral-500);
-    padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-large);
-    user-select: none;
+    line-height: var(--syn-line-height-normal);
+    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+
+    /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-user-select: none;
+    user-select: none;
   }
 `;

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

@@ -4,7 +4,6 @@ import SynDivider from '../divider/divider.component.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './menu-label.styles.js';
-import customStyles from './menu-label.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**
@@ -24,7 +23,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 export default class SynMenuLabel extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   static dependencies = {
     'syn-divider': SynDivider,

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.6.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.
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.6.1
+
 ## 3.6.0
 
 ### Minor Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## 3.6.1
+
 ## 3.6.0
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.5.0
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.5.0
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.5.0
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.5.0
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.5.0
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.5.0
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.5.0
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "3.6.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/fonts": "1.0.3",
-    "@synergy-design-system/tokens": "^3.6.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/styles": "2.0.1"
+    "@synergy-design-system/components": "3.6.1",
+    "@synergy-design-system/fonts": "1.0.3",
+    "@synergy-design-system/styles": "2.0.1",
+    "@synergy-design-system/tokens": "^3.6.1"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",

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

@@ -1,5 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* Write custom CSS here */
-`;

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

@@ -1,29 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    border-radius: var(--syn-input-border-radius-medium);
-  }
-
-  /*
-   * #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;
-  }
-
-  /**
-   * 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;
-  }
-
-  ::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);
-  }
-`;

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

@@ -1,192 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    /* 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);
-  }
-
-  .menu-item {
-    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);
-    font-size: var(--menuitem-font-size);
-
-    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
-    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));
-    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
-  }
-
-  :host(:focus-visible) .menu-item {
-    background-color: var(--syn-option-background-color-active);
-  }
-
-  /** #429: Use token for opacity */
-  .menu-item.menu-item--disabled {
-    opacity: var(--syn-opacity-50);
-  }
-
-  /**
-   * Handling for slotted prefix and suffix
-   */
-  .menu-item .menu-item__prefix::slotted(*) {
-    margin-inline-end: var(--syn-spacing-small);
-  }
-
-  .menu-item .menu-item__suffix::slotted(*) {
-    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);
-  }
-
-  :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);
-  }
-
-  :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);
-  }
-
-  /* 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);
-    color: var(--syn-option-color-hover);
-  }
-  /* stylelint-enable selector-not-notation, plugin/no-unsupported-browser-features */
-
-  /**
-   * Adjust the size of icons
-   */
-  .menu-item .menu-item__chevron,
-  .menu-item .menu-item__check {
-    display: var(--display-checkmark);
-    font-size: var(--syn-font-size-x-large);
-    width: var(--syn-font-size-x-large);
-  }
-
-  /**
-   * 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 .menu-item__check {
-    color: var(--syn-option-check-color);
-    margin-inline-end: var(--syn-spacing-small);
-  }
-
-  /**
-   * 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 .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);
-  }
-
-  .menu-item.menu-item--loading *:not(syn-spinner) {
-    opacity: var(--syn-opacity-50);
-  }
-
-  /**
-   * Make sure to show the chevron if there are children
-   */
-  .menu-item--has-submenu .menu-item__chevron {
-    display: flex;
-  }
-
-  /**
-   * Adjustments for the spinner in loading state
-   */
-  .menu-item--loading syn-spinner {
-    --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));
-  }
-
-  /**
-   * 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);
-  }
-
-  /* #1131: Make sure that slotted menus do show the correct border radius */
-  syn-popup::part(popup) {
-    border-radius: var(--syn-input-border-radius-medium);
-  }
-
-  /**
-   * #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));
-  }
-`;

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

@@ -1,24 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --display-divider: block;
-  }
-
-  .menu-label__divider {
-    --spacing: 0;
-
-    display: var(--display-divider);
-    margin-bottom: var(--syn-spacing-x-small);
-  }
-
-  .menu-label {
-    color: var(--syn-input-color);
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-medium);
-    font-weight: var(--syn-font-weight-semibold);
-    letter-spacing: var(--syn-letter-spacing-normal);
-    line-height: var(--syn-line-height-normal);
-    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
-  }
-`;