@synergy-design-system/mcp 1.24.0 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # 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
+
+- [#1079](https://github.com/synergy-design-system/synergy-design-system/pull/1079) [`3f893f9`](https://github.com/synergy-design-system/synergy-design-system/commit/3f893f9d9d04cbfa3ae530bf8e3ecbcfe7be022f) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-25
+
+  feat: ✨ create migration iconset (#1078)
+
+  Added new utilities that help with migrating from 2018 to the new 2025 theme:
+
+  `migrationLibrary`:
+
+  A small migration library, aimed to be a drop in replacement for the default system icon library.
+  Please have a look at [Synergies 2025 migration guide](https://synergy-design-system.github.io/?path=/docs/migration-to-synergy-3-0--docs) about how to use this.
+
+  `migrateIconName` and `migrateIconNameFilled`:
+
+  New low level utilities that helps mapping 2018 icons to the new 2025 icon library.
+  This may be used if a custom icon library is in place.
+  You should use `migrateIconName` in most cases as the default for Synergy are outlined icons.
+  In cases where needed, you may also use `migrateIconNameFilled`, which will use the filled variant of Material Icons.
+
+  `setupIcons`:
+
+  High level feature that allows to toggle the default icon library, as well as the system icons via one command. You may use `setupIcons('sick2025');` to switch to the new icon set.
+
+  > Note this only works if you have your icons setup according to the Synergy defaults.
+
+  docs: 📚 Make sure to use correct icons on both 2018 and 2025 stories (#1024)
+
+  Documentation now correctly toggles the icon sets, using the new `migrateIconName` underneath.
+
+### Patch Changes
+
+- Updated dependencies [[`3f893f9`](https://github.com/synergy-design-system/synergy-design-system/commit/3f893f9d9d04cbfa3ae530bf8e3ecbcfe7be022f)]:
+  - @synergy-design-system/assets@1.23.0
+
 ## 1.24.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-e4580d57e51553f431865895f2834f20
+92bcfd1fb50bde3e54887102c73e457a

package/metadata/packages/assets/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 1.23.0
+
+### Minor Changes
+
+- [#1079](https://github.com/synergy-design-system/synergy-design-system/pull/1079) [`3f893f9`](https://github.com/synergy-design-system/synergy-design-system/commit/3f893f9d9d04cbfa3ae530bf8e3ecbcfe7be022f) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-25
+
+  feat: ✨ create migration iconset (#1078)
+
+  Added new utilities that help with migrating from 2018 to the new 2025 theme:
+
+  `migrationLibrary`:
+
+  A small migration library, aimed to be a drop in replacement for the default system icon library.
+  Please have a look at [Synergies 2025 migration guide](https://synergy-design-system.github.io/?path=/docs/migration-to-synergy-3-0--docs) about how to use this.
+
+  `migrateIconName` and `migrateIconNameFilled`:
+
+  New low level utilities that helps mapping 2018 icons to the new 2025 icon library.
+  This may be used if a custom icon library is in place.
+  You should use `migrateIconName` in most cases as the default for Synergy are outlined icons.
+  In cases where needed, you may also use `migrateIconNameFilled`, which will use the filled variant of Material Icons.
+
+  `setupIcons`:
+
+  High level feature that allows to toggle the default icon library, as well as the system icons via one command. You may use `setupIcons('sick2025');` to switch to the new icon set.
+
+  > Note this only works if you have your icons setup according to the Synergy defaults.
+
+  docs: 📚 Make sure to use correct icons on both 2018 and 2025 stories (#1024)
+
+  Documentation now correctly toggles the icon sets, using the new `migrateIconName` underneath.
+
 ## 1.22.0
 
 ### Minor Changes

package/metadata/packages/assets/README.md

@@ -75,5 +75,6 @@ This will:
 - download all icons from figma
 - download all thumbnails for docs
 - Recreate all default icons
+- Create the migration iconsets for Synergy 2018 to 2025 via `pnpm create-migration-iconset`
 - Recreate the license files in the different folders
 - Create [code connect files](https://www.figma.com/code-connect-docs/html) for all icons. Please be aware you have to call `pnpm figma-export:icons` in the components package to publish the icons!

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/migration/migration-synergy-v3.md

@@ -85,6 +85,68 @@ export default defineConfig({
 });
 ```
 
+#### Migrating to the new icon set without changing the icon names
+
+Applications that are migrating from Synergy 2 may have used icons that have been renamed in the migration process.
+Those icons will **not** show up after the switch to the new icon library.
+For this reason, Synergy provides some new utilities that help migrating your applications:
+
+##### Example 1: Easy migration via `setupIcons`
+
+The easiest type of migration. If you have an icon setup as recommended in this documentation (e.g. copying the assets to a default location), you may just use the new `setupIcons` function and call it:
+
+```javascript
+import { setupIcons } from "@synergy-design-system/components";
+setupIcons("sick2025");
+```
+
+This will make sure to set the system icons to the new `sick2025` theme and also sets up a new `default` icon library that includes a static map from old icon names to the new ones.
+
+> Note you will **not** have to call `setSystemIconLibrary` as Synergy will do this internally!
+
+##### Custom setup: Using `migrateIconName` directly
+
+Synergy now ships with a new basic utility function `migrateIconName`.
+This function is able to map an icons name from the `sick2018` to the new `sick2025` icon set. It does so via a static map, returning the new names for icons.
+
+You may use this directly, if you have overwritten the default icon library via the `registerIconLibrary` method:
+
+```javascript
+import {
+  registerIconLibrary,
+  setSystemIconLibrary,
+  // Default icon set (outline)
+  migrateIconName,
+  // Alternative icon set (filled)
+  migrateIconNameFilled,
+} from "@synergy-design-system/components";
+
+// Manually override the default icon library to use migrateIconName
+// This is the default for the outline icon set.
+const customIconLibrary = {
+  name: "default",
+  resolver: name => {
+    const mappedName = migrateIconName(name);
+    return getBasePath(`assets/icons/${mappedName}.svg`);
+  },
+};
+
+// If you want to use filled icons instead, you may also append
+// "_fill" to the svg name to use those icons instead.
+const customIconLibraryFilled = {
+  name: "default",
+  resolver: name => {
+    const mappedName = migrateIconNameFilled(name);
+    return getBasePath(`assets/icons/${mappedName}.svg`);
+  },
+};
+
+// Enable your new library.
+// Do not forget to set the system icon library!
+registerIconLibrary("default", customIconLibrary);
+setSystemIconLibrary("sick2025");
+```
+
 ### Tokens
 
 Synergy 3.0 introduces new CSS theme files that implement the updated SICK brand appearance:

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

@@ -1,5 +1,50 @@
 # 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
+
+- [#1079](https://github.com/synergy-design-system/synergy-design-system/pull/1079) [`3f893f9`](https://github.com/synergy-design-system/synergy-design-system/commit/3f893f9d9d04cbfa3ae530bf8e3ecbcfe7be022f) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-25
+
+  feat: ✨ create migration iconset (#1078)
+
+  Added new utilities that help with migrating from 2018 to the new 2025 theme:
+
+  `migrationLibrary`:
+
+  A small migration library, aimed to be a drop in replacement for the default system icon library.
+  Please have a look at [Synergies 2025 migration guide](https://synergy-design-system.github.io/?path=/docs/migration-to-synergy-3-0--docs) about how to use this.
+
+  `migrateIconName` and `migrateIconNameFilled`:
+
+  New low level utilities that helps mapping 2018 icons to the new 2025 icon library.
+  This may be used if a custom icon library is in place.
+  You should use `migrateIconName` in most cases as the default for Synergy are outlined icons.
+  In cases where needed, you may also use `migrateIconNameFilled`, which will use the filled variant of Material Icons.
+
+  `setupIcons`:
+
+  High level feature that allows to toggle the default icon library, as well as the system icons via one command. You may use `setupIcons('sick2025');` to switch to the new icon set.
+
+  > Note this only works if you have your icons setup according to the Synergy defaults.
+
+  docs: 📚 Make sure to use correct icons on both 2018 and 2025 stories (#1024)
+
+  Documentation now correctly toggles the icon sets, using the new `migrateIconName` underneath.
+
 ## 2.62.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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.42.0
+ * @synergy-design-system/tokens version 2.43.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.42.0
+ * @synergy-design-system/tokens version 2.43.0
  * SICK Global UX Foundation
  */
 
@@ -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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.42.0
+ * @synergy-design-system/tokens version 2.43.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.42.0
+ * @synergy-design-system/tokens version 2.43.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.42.0
+ * @synergy-design-system/tokens version 2.43.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.42.0
+ * @synergy-design-system/tokens version 2.43.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.42.0
+ * @synergy-design-system/tokens version 2.43.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -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

@@ -10,7 +10,7 @@
     "@modelcontextprotocol/sdk": "^1.19.1",
     "globby": "^15.0.0",
     "zod": "^3.25.76",
-    "@synergy-design-system/assets": "1.22.0"
+    "@synergy-design-system/assets": "1.23.0"
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
@@ -28,11 +28,11 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.62.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/components": "2.64.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/tokens": "^2.43.0",
-    "@synergy-design-system/styles": "1.9.0"
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/styles": "1.9.0",
+    "@synergy-design-system/tokens": "^2.44.0"
   },
   "exports": {
     ".": {
@@ -66,7 +66,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.24.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",