@synergy-design-system/mcp 1.25.0 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.26.0
+
+### Minor Changes
+
+- [#1074](https://github.com/synergy-design-system/synergy-design-system/pull/1074) [`ac24e63`](https://github.com/synergy-design-system/synergy-design-system/commit/ac24e6379862c7e60b5d5293614f0d804eeb7388) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-27
+
+  feat: ✨ Brand updates for `<syn-menu>`, `<syn-menu-item>` and `<syn-menu-label>` (#958)
+
 ## 1.25.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-98332254633fa4f98c9248b9d66f35b1
+92bcfd1fb50bde3e54887102c73e457a

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    border-radius: 0;
+    border-radius: var(--syn-input-border-radius-medium);
   }
 
   /*
@@ -24,6 +24,6 @@ export default css`
 
   ::slotted(syn-divider) {
     /* #369: Slotted syn-dividers should use a lighter color so they do not crash with the border visually */
-    --color: var(--syn-color-neutral-200);
+    --color: var(--syn-panel-border-color);
   }
 `;

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

@@ -7,11 +7,27 @@ export default css`
   }
 
   .menu-item {
-    color: var(--syn-typography-color-text);
+    /*
+     * #958: Brand2025 defines a small gap between menu items
+     * and rounded corners. We achieve that using an outline
+     * that simulates the gap using the menu background color.
+     */
+    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);
+    
+    border-radius: calc(var(--outline) * 1.5);
+    color: var(--syn-option-color, var(--syn-typography-color-text));
     font-size: var(--syn-font-size-medium);
+    outline: var(--outline) solid var(--syn-panel-background-color);
+    outline-offset: calc(var(--outline) * -1 + 1px);
     padding: var(--syn-spacing-small) var(--syn-spacing-medium);
   }
 
+  :host(:focus-visible) .menu-item {
+    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
+    outline: var(--outline) solid var(--syn-panel-background-color);
+    outline-offset: calc(var(--outline) * -1 + 1px);
+  }
+
   /** #429: Use token for opacity */
   .menu-item.menu-item--disabled {
     opacity: var(--syn-opacity-50);
@@ -33,15 +49,29 @@ export default css`
    */
   .menu-item .menu-item__prefix::slotted(syn-icon),
   .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-color-neutral-800);
+    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
     font-size: var(--syn-font-size-x-large);
   }
 
-  :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-color-neutral-0);
+  :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));
+  }
+
+  :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));
   }
 
+  /* 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));
+  }
+  /* stylelint-enable selector-not-notation, plugin/no-unsupported-browser-features */
+
   /**
    * Adjust the size of icons
    */
@@ -61,7 +91,7 @@ export default css`
   }
 
   .menu-item .menu-item__check {
-    color: var(--syn-color-primary-600);
+    color: var(--syn-option-check-color, var(--syn-color-primary-600));
     margin-inline-end: var(--syn-spacing-small);
   }
 
@@ -76,7 +106,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-color-neutral-0);
+    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+  }
+
+  :host(:hover) .menu-item--checked .menu-item__check {
+    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
   }
 
   /**
@@ -110,6 +144,7 @@ export default css`
   .menu-item--loading syn-spinner {
     --track-width: 2px;
 
+    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
     font-size: var(--syn-font-size-medium);
     left: var(--syn-spacing-medium);
   }

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

@@ -13,7 +13,7 @@ export default css`
   }
 
   .menu-label {
-    color: var(--syn-typography-color-text);
+    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);

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

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2.64.0
+
+### Minor Changes
+
+- [#1074](https://github.com/synergy-design-system/synergy-design-system/pull/1074) [`ac24e63`](https://github.com/synergy-design-system/synergy-design-system/commit/ac24e6379862c7e60b5d5293614f0d804eeb7388) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-27
+
+  feat: ✨ Brand updates for `<syn-menu>`, `<syn-menu-item>` and `<syn-menu-label>` (#958)
+
+### Patch Changes
+
+- Updated dependencies [[`ac24e63`](https://github.com/synergy-design-system/synergy-design-system/commit/ac24e6379862c7e60b5d5293614f0d804eeb7388)]:
+  - @synergy-design-system/tokens@2.44.0
+
 ## 2.63.0
 
 ### Minor Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.44.0
+
+### Minor Changes
+
+- [#1074](https://github.com/synergy-design-system/synergy-design-system/pull/1074) [`ac24e63`](https://github.com/synergy-design-system/synergy-design-system/commit/ac24e6379862c7e60b5d5293614f0d804eeb7388) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-27
+
+  feat: ✨ Brand updates for `<syn-menu>`, `<syn-menu-item>` and `<syn-menu-label>` (#958)
+
 ## 2.43.0
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

@@ -111,6 +111,7 @@
   --syn-color-primary-800: #b9e5fe;
   --syn-color-primary-900: #e0f1fe;
   --syn-color-primary-950: #f0f9ff;
+  --syn-color-primary-1000: #f0f9ff;
   --syn-color-success-50: #172c07;
   --syn-color-success-100: #315017;
   --syn-color-success-200: #395e16;
@@ -248,6 +249,17 @@
   --syn-link-underline-outline: 7%;
   --syn-logo-color: var(--syn-color-primary-400);
   --syn-opacity-50: 0.5; /** 50% */
+  --syn-option-background-color-active: var(--syn-color-primary-400);
+  --syn-option-background-color-hover: var(--syn-color-neutral-100);
+  --syn-option-check-color: var(--syn-color-primary-600);
+  --syn-option-check-color-active: var(--syn-color-neutral-0);
+  --syn-option-check-color-hover: var(--syn-color-primary-600);
+  --syn-option-color: var(--syn-typography-color-text);
+  --syn-option-color-active: var(--syn-typography-color-text-inverted);
+  --syn-option-color-hover: var(--syn-typography-color-text);
+  --syn-option-icon-color: var(--syn-typography-color-text);
+  --syn-option-icon-color-active: var(--syn-typography-color-text-inverted);
+  --syn-option-icon-color-hover: var(--syn-typography-color-text);
   --syn-overlay-background-blur: 0px;
   --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
   --syn-page-background: var(--syn-color-neutral-50);

package/metadata/packages/tokens/index.js

@@ -523,6 +523,11 @@ export const SynColorPrimary900 = 'var(--syn-color-primary-900)';
  */
 export const SynColorPrimary950 = 'var(--syn-color-primary-950)';
 
+/**
+ * @type {string}
+ */
+export const SynColorPrimary1000 = 'var(--syn-color-primary-1000)';
+
 /**
  * @type {string}
  */
@@ -1208,6 +1213,61 @@ export const SynLogoColor = 'var(--syn-logo-color)';
  */
 export const SynOpacity50 = 'var(--syn-opacity-50)';
 
+/**
+ * @type {string}
+ */
+export const SynOptionBackgroundColorActive = 'var(--syn-option-background-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionBackgroundColorHover = 'var(--syn-option-background-color-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionCheckColor = 'var(--syn-option-check-color)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionCheckColorActive = 'var(--syn-option-check-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionCheckColorHover = 'var(--syn-option-check-color-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionColor = 'var(--syn-option-color)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionColorActive = 'var(--syn-option-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionColorHover = 'var(--syn-option-color-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionIconColor = 'var(--syn-option-icon-color)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionIconColorActive = 'var(--syn-option-icon-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynOptionIconColorHover = 'var(--syn-option-icon-color-hover)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -111,6 +111,7 @@
   --syn-color-primary-800: #065786;
   --syn-color-primary-900: #0b486f;
   --syn-color-primary-950: #072e4a;
+  --syn-color-primary-1000: #072e4a;
   --syn-color-success-50: #f5fde8;
   --syn-color-success-100: #e7facd;
   --syn-color-success-200: #d1f4a2;
@@ -248,6 +249,17 @@
   --syn-link-underline-outline: 7%;
   --syn-logo-color: var(--syn-color-primary-600);
   --syn-opacity-50: 0.5; /** 50% */
+  --syn-option-background-color-active: var(--syn-color-primary-600);
+  --syn-option-background-color-hover: var(--syn-color-neutral-100);
+  --syn-option-check-color: var(--syn-color-primary-600);
+  --syn-option-check-color-active: var(--syn-color-neutral-0);
+  --syn-option-check-color-hover: var(--syn-color-primary-600);
+  --syn-option-color: var(--syn-typography-color-text);
+  --syn-option-color-active: var(--syn-typography-color-text-inverted);
+  --syn-option-color-hover: var(--syn-typography-color-text);
+  --syn-option-icon-color: var(--syn-input-icon-color);
+  --syn-option-icon-color-active: var(--syn-color-neutral-0);
+  --syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
   --syn-overlay-background-blur: 0px;
   --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
   --syn-page-background: var(--syn-color-neutral-100);

package/metadata/packages/tokens/sick2018_dark.css

@@ -111,6 +111,7 @@
   --syn-color-primary-800: #b9e5fe;
   --syn-color-primary-900: #e0f1fe;
   --syn-color-primary-950: #f0f9ff;
+  --syn-color-primary-1000: #f0f9ff;
   --syn-color-success-50: #172c07;
   --syn-color-success-100: #315017;
   --syn-color-success-200: #395e16;
@@ -248,6 +249,17 @@
   --syn-link-underline-outline: 7%;
   --syn-logo-color: var(--syn-color-primary-400);
   --syn-opacity-50: 0.5; /** 50% */
+  --syn-option-background-color-active: var(--syn-color-primary-400);
+  --syn-option-background-color-hover: var(--syn-color-neutral-100);
+  --syn-option-check-color: var(--syn-color-primary-600);
+  --syn-option-check-color-active: var(--syn-color-neutral-0);
+  --syn-option-check-color-hover: var(--syn-color-primary-600);
+  --syn-option-color: var(--syn-typography-color-text);
+  --syn-option-color-active: var(--syn-typography-color-text-inverted);
+  --syn-option-color-hover: var(--syn-typography-color-text);
+  --syn-option-icon-color: var(--syn-typography-color-text);
+  --syn-option-icon-color-active: var(--syn-typography-color-text-inverted);
+  --syn-option-icon-color-hover: var(--syn-typography-color-text);
   --syn-overlay-background-blur: 0px;
   --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
   --syn-page-background: var(--syn-color-neutral-50);

package/metadata/packages/tokens/sick2018_light.css

@@ -111,6 +111,7 @@
   --syn-color-primary-800: #065786;
   --syn-color-primary-900: #0b486f;
   --syn-color-primary-950: #072e4a;
+  --syn-color-primary-1000: #072e4a;
   --syn-color-success-50: #f5fde8;
   --syn-color-success-100: #e7facd;
   --syn-color-success-200: #d1f4a2;
@@ -248,6 +249,17 @@
   --syn-link-underline-outline: 7%;
   --syn-logo-color: var(--syn-color-primary-600);
   --syn-opacity-50: 0.5; /** 50% */
+  --syn-option-background-color-active: var(--syn-color-primary-600);
+  --syn-option-background-color-hover: var(--syn-color-neutral-100);
+  --syn-option-check-color: var(--syn-color-primary-600);
+  --syn-option-check-color-active: var(--syn-color-neutral-0);
+  --syn-option-check-color-hover: var(--syn-color-primary-600);
+  --syn-option-color: var(--syn-typography-color-text);
+  --syn-option-color-active: var(--syn-typography-color-text-inverted);
+  --syn-option-color-hover: var(--syn-typography-color-text);
+  --syn-option-icon-color: var(--syn-input-icon-color);
+  --syn-option-icon-color-active: var(--syn-color-neutral-0);
+  --syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
   --syn-overlay-background-blur: 0px;
   --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
   --syn-page-background: var(--syn-color-neutral-100);

package/metadata/packages/tokens/sick2025_dark.css

@@ -111,6 +111,7 @@
   --syn-color-primary-800: #ccdeff;
   --syn-color-primary-900: #dae7ff;
   --syn-color-primary-950: #eff5ff;
+  --syn-color-primary-1000: #eff5ff;
   --syn-color-success-50: #003911;
   --syn-color-success-100: #026524;
   --syn-color-success-200: #00852c;
@@ -248,6 +249,17 @@
   --syn-link-underline-outline: 25%;
   --syn-logo-color: var(--syn-color-primary-300);
   --syn-opacity-50: 0.5; /** 50% */
+  --syn-option-background-color-active: var(--syn-color-neutral-1000);
+  --syn-option-background-color-hover: var(--syn-color-neutral-1000);
+  --syn-option-check-color: var(--syn-interactive-quiet-color);
+  --syn-option-check-color-active: var(--syn-color-neutral-0);
+  --syn-option-check-color-hover: var(--syn-color-neutral-0);
+  --syn-option-color: var(--syn-typography-color-text);
+  --syn-option-color-active: var(--syn-typography-color-text-inverted);
+  --syn-option-color-hover: var(--syn-typography-color-text-inverted);
+  --syn-option-icon-color: var(--syn-interactive-quiet-color);
+  --syn-option-icon-color-active: var(--syn-color-neutral-0);
+  --syn-option-icon-color-hover: var(--syn-color-neutral-0);
   --syn-overlay-background-blur: 8px;
   --syn-overlay-background-color: rgba(0, 5, 26, 0.6);
   --syn-page-background: var(--syn-color-neutral-0);

package/metadata/packages/tokens/sick2025_light.css

@@ -111,6 +111,7 @@
   --syn-color-primary-800: #0845c5;
   --syn-color-primary-900: #0d3f9b;
   --syn-color-primary-950: #0e275d;
+  --syn-color-primary-1000: #000a37;
   --syn-color-success-50: #f0fdf4;
   --syn-color-success-100: #ddfbe6;
   --syn-color-success-200: #bcf6cf;
@@ -248,6 +249,17 @@
   --syn-link-underline-outline: 25%;
   --syn-logo-color: var(--syn-color-primary-700);
   --syn-opacity-50: 0.5; /** 50% */
+  --syn-option-background-color-active: var(--syn-color-primary-1000);
+  --syn-option-background-color-hover: var(--syn-color-primary-1000);
+  --syn-option-check-color: var(--syn-interactive-quiet-color);
+  --syn-option-check-color-active: var(--syn-color-neutral-0);
+  --syn-option-check-color-hover: var(--syn-color-neutral-0);
+  --syn-option-color: var(--syn-typography-color-text);
+  --syn-option-color-active: var(--syn-typography-color-text-inverted);
+  --syn-option-color-hover: var(--syn-typography-color-text-inverted);
+  --syn-option-icon-color: var(--syn-interactive-quiet-color);
+  --syn-option-icon-color-active: var(--syn-color-neutral-0);
+  --syn-option-icon-color-hover: var(--syn-color-neutral-0);
   --syn-overlay-background-blur: 8px;
   --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
   --syn-page-background: #f8f7f6;

package/metadata/static/components/syn-menu-item/docs.md

@@ -100,6 +100,26 @@ Use the loading attribute to indicate that a menu item is busy. Like a disable
 
 ---
 
+## Focus
+
+The focus event gives the user feedback that the Menu Item has been focused by the keyboard interaction from the user.
+
+```html
+<syn-menu style="max-width: 240px" role="menu">
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
+    >Option 1</syn-menu-item
+  >
+  <syn-menu-item disabled="" role="menuitem" aria-disabled="true" tabindex="-1"
+    >Option 2</syn-menu-item
+  >
+  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
+    >Option 3</syn-menu-item
+  >
+</syn-menu>
+```
+
+---
+
 ## Checkbox Menu Items
 
 Set the type attribute to checkbox to create a menu item that will toggle on and off when selected. You can use the checked attribute to set the initial state.Checkbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you’d find in the menu of a native app.

package/package.json

@@ -28,11 +28,11 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
+    "@synergy-design-system/components": "2.64.0",
     "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/styles": "1.9.0",
-    "@synergy-design-system/components": "2.63.0",
-    "@synergy-design-system/tokens": "^2.43.0"
+    "@synergy-design-system/tokens": "^2.44.0"
   },
   "exports": {
     ".": {
@@ -66,7 +66,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",