@synergy-design-system/mcp 2.11.0 → 2.12.1

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # Changelog
 
+## 2.12.1
+
+### Patch Changes
+
+- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 dependency updates (#258)
+
+- Updated dependencies [[`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288)]:
+  - @synergy-design-system/assets@2.0.2
+
+## 2.12.0
+
+### Minor Changes
+
+- [#1209](https://github.com/synergy-design-system/synergy-design-system/pull/1209) [`5704a96`](https://github.com/synergy-design-system/synergy-design-system/commit/5704a96fbe2d0481822a30ce171a01df960c82f1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  feat: ✨ Allow `<syn-divider>` as a separator in meta-navigation of `<syn-header>` (#1130)
+
+  This release adds the possiblity to use `<syn-divider>` as a separator between items in the `<syn-header>` metanavigation.
+  It will automatically set the correct `height` on vertically aligned `<syn-dividers>`.
+
+  You may use it via:
+
+  ```html
+  <syn-header label="App Name">
+    <nav slot="meta-navigation">
+      <syn-icon-button
+        name="settings_outline"
+        label="Settings"
+      ></syn-icon-button>
+      <syn-icon-button
+        name="insert_chart_outlined"
+        label="Analytics"
+      ></syn-icon-button>
+      <syn-divider vertical></syn-divider>
+      <syn-icon-button name="dark_mode" label="Dark Mode"></syn-icon-button>
+      <syn-divider vertical></syn-divider>
+      <syn-icon-button name="language" label="Language"></syn-icon-button>
+      <syn-icon-button name="login" label="Login"></syn-icon-button>
+    </nav>
+  </syn-header>
+  ```
+
+  or via directly slotting the `<syn-divider>` via
+
+  ```html
+  <syn-header label="App Name">
+    <syn-icon-button
+      slot="meta-navigation"
+      name="settings_outline"
+      label="Settings"
+    ></syn-icon-button>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="insert_chart_outlined"
+      label="Analytics"
+    ></syn-icon-button>
+    <syn-divider vertical slot="meta-navigation"></syn-divider>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="dark_mode"
+      label="Dark Mode"
+    ></syn-icon-button>
+    <syn-divider vertical slot="meta-navigation"></syn-divider>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="language"
+      label="Language"
+    ></syn-icon-button>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="login"
+      label="Login"
+    ></syn-icon-button>
+  </syn-header>
+  ```
+
+  `<syn-header>` now also exposes a new `cssproperty` `--metanavigation-item-size` that can be used to define the size of rendered `<syn-icon-buttons>`, as well as the height of `<syn-divider>`
+
 ## 2.11.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-8ff3b2f94fdeb4b49a8f7f96d20fab34
+e863d3d1ecb673b5485041d4f4a8b704

package/metadata/packages/assets/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.0.2
+
+### Patch Changes
+
+- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 dependency updates (#258)
+
 ## 2.0.1
 
 ### Patch Changes

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

@@ -1,8 +1,6 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
     --color: var(--syn-panel-border-color);
     --width: var(--syn-panel-border-width);
@@ -10,15 +8,15 @@ export default css`
   }
 
   :host(:not([vertical])) {
-    display: block;
     border-top: solid var(--width) var(--color);
+    display: block;
     margin: var(--spacing) 0;
   }
 
   :host([vertical]) {
+    border-left: solid var(--width) var(--color);
     display: inline-block;
     height: 100%;
-    border-left: solid var(--width) var(--color);
     margin: 0 var(--spacing);
   }
 `;

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

@@ -4,7 +4,6 @@ import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './divider.styles.js';
-import customStyles from './divider.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**
@@ -18,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --spacing - The spacing of the divider.
  */
 export default class SynDivider extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   /** Draws the divider in a vertical orientation. */
   @property({ type: Boolean, reflect: true }) vertical = false;

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

@@ -49,6 +49,7 @@ import '@synergy-design-system/components/components/header/header.js';
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
  *
  * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
  */
 @Component({
   selector: 'syn-header',

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

@@ -46,6 +46,7 @@ Component.define('syn-header');
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
  *
  * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
  */
 export const SynHeader = createComponent({
   displayName: 'SynHeader',

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

@@ -3,6 +3,7 @@ import { css } from 'lit';
 export default css`
   :host {
     --sticky-position: 0;
+    --metanavigation-item-size: var(--syn-font-size-x-large);
 
     display: block;
   }
@@ -82,7 +83,7 @@ export default css`
   .header__meta-navigation ::slotted(*) {
     color: var(--syn-interactive-quiet-color);
     display: contents;
-    font-size: var(--syn-font-size-x-large);
+    font-size: var(--metanavigation-item-size);
   }
 
   /**

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

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/unbound-method */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit/static-html.js';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import type { CSSResultGroup } from 'lit';
 import SynergyElement from '../../internal/synergy-element.js';
 import { HasSlotController } from '../../internal/slot.js';
@@ -11,6 +10,7 @@ import SynIcon from '../icon/icon.js';
 import type SynSideNav from '../side-nav/side-nav.component.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { watch } from '../../internal/watch.js';
+import type SynDivider from '../divider/divider.component.js';
 
 /**
  * @summary The <syn-header /> element provides a generic application header
@@ -43,6 +43,7 @@ import { watch } from '../../internal/watch.js';
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
  *
  * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
  */
 export default class SynHeader extends SynergyElement {
   static styles: CSSResultGroup = [
@@ -68,6 +69,8 @@ export default class SynHeader extends SynergyElement {
    */
   private isSideNavAnimating = false;
 
+  @query('slot[name="meta-navigation"]') private metaNavigationSlot: HTMLSlotElement;
+
   /**
    * The headers label. If you need to display HTML, use the `label` slot instead.
    */
@@ -128,6 +131,43 @@ export default class SynHeader extends SynergyElement {
     }
   }
 
+  /**
+   * #1130: Automatically set the correct styles for vertical syn-dividers in the meta navigation.
+   * Dividers may be slotted directly in the meta navigation or be nested in another element, e.g. a wrapper for the meta navigation.
+   * Horizontal dividers are not supported in the meta navigation and we don't want to override any styles for them that might be set by the user.
+   */
+  private updateMetaNavigation() {
+    const foundDividers: SynDivider[] = [];
+    this.metaNavigationSlot
+      // Get all slotted children.
+      // Needed because we may also have dividers in a wrapper that is used for the meta navigation
+      .assignedElements({ flatten: true })
+      .forEach(el => {
+        if (el.tagName.toLowerCase() === 'syn-divider') {
+          foundDividers.push(el as SynDivider);
+        } else {
+          const directChildDividers = el.querySelectorAll<SynDivider>(':scope > syn-divider');
+          if (directChildDividers.length) {
+            foundDividers.push(...directChildDividers);
+          }
+        }
+      });
+
+    // Set the correct styles for the found dividers
+    // - --spacing: var(--syn-spacing-x-small) makes the spacing slightly narrower,
+    // - align-self: center makes sure the divider is centered in the meta navigation,
+    // - height: var(--metanavigation-item-size) makes sure the divider has the same height as the other items in the meta navigation.
+    // We use this approach as it is faster than 3 separate style changes and we can be sure to not override any other styles that might be set on the divider.
+    const cssText = '--spacing: var(--syn-spacing-x-small); align-self: center; display: flex; height: var(--metanavigation-item-size);';
+
+    foundDividers
+      .filter(divider => divider.hasAttribute('vertical'))
+      .forEach(divider => {
+        // eslint-disable-next-line no-param-reassign
+        divider.style.cssText += cssText;
+      });
+  }
+
   @watch('burgerMenu', { waitUntilFirstUpdate: true })
   handleBurgerMenu() {
     const myEvt: keyof GlobalEventHandlersEventMap = `syn-burger-menu-${this.burgerMenu}`;
@@ -203,6 +243,7 @@ export default class SynHeader extends SynergyElement {
   }
 
   render() {
+    /* eslint-disable @typescript-eslint/unbound-method */
     const hasNavigation = this.hasSlotController.test('navigation');
     const showBurgerMenu = this.burgerMenu !== 'hidden';
     return html`
@@ -254,7 +295,7 @@ export default class SynHeader extends SynergyElement {
           </div>
 
           <div part="meta-navigation" class="header__meta-navigation">
-            <slot name="meta-navigation"></slot>
+            <slot @slotchange=${this.updateMetaNavigation} name="meta-navigation"></slot>
           </div>
         </div>
         <!-- /.header__content -->
@@ -264,5 +305,6 @@ export default class SynHeader extends SynergyElement {
         </div>
       </header>
     `;
+    /* eslint-enable @typescript-eslint/unbound-method */
   }
 }

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

@@ -36,6 +36,7 @@
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
  *
  * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
  */
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/header/header.js';

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

@@ -1,5 +1,90 @@
 # Changelog
 
+## 3.10.1
+
+### Patch Changes
+
+- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 dependency updates (#258)
+
+- Updated dependencies [[`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288)]:
+  - @synergy-design-system/tokens@3.10.1
+
+## 3.10.0
+
+### Minor Changes
+
+- [#1209](https://github.com/synergy-design-system/synergy-design-system/pull/1209) [`5704a96`](https://github.com/synergy-design-system/synergy-design-system/commit/5704a96fbe2d0481822a30ce171a01df960c82f1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  feat: ✨ Allow `<syn-divider>` as a separator in meta-navigation of `<syn-header>` (#1130)
+
+  This release adds the possiblity to use `<syn-divider>` as a separator between items in the `<syn-header>` metanavigation.
+  It will automatically set the correct `height` on vertically aligned `<syn-dividers>`.
+
+  You may use it via:
+
+  ```html
+  <syn-header label="App Name">
+    <nav slot="meta-navigation">
+      <syn-icon-button
+        name="settings_outline"
+        label="Settings"
+      ></syn-icon-button>
+      <syn-icon-button
+        name="insert_chart_outlined"
+        label="Analytics"
+      ></syn-icon-button>
+      <syn-divider vertical></syn-divider>
+      <syn-icon-button name="dark_mode" label="Dark Mode"></syn-icon-button>
+      <syn-divider vertical></syn-divider>
+      <syn-icon-button name="language" label="Language"></syn-icon-button>
+      <syn-icon-button name="login" label="Login"></syn-icon-button>
+    </nav>
+  </syn-header>
+  ```
+
+  or via directly slotting the `<syn-divider>` via
+
+  ```html
+  <syn-header label="App Name">
+    <syn-icon-button
+      slot="meta-navigation"
+      name="settings_outline"
+      label="Settings"
+    ></syn-icon-button>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="insert_chart_outlined"
+      label="Analytics"
+    ></syn-icon-button>
+    <syn-divider vertical slot="meta-navigation"></syn-divider>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="dark_mode"
+      label="Dark Mode"
+    ></syn-icon-button>
+    <syn-divider vertical slot="meta-navigation"></syn-divider>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="language"
+      label="Language"
+    ></syn-icon-button>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="login"
+      label="Login"
+    ></syn-icon-button>
+  </syn-header>
+  ```
+
+  `<syn-header>` now also exposes a new `cssproperty` `--metanavigation-item-size` that can be used to define the size of rendered `<syn-icon-buttons>`, as well as the height of `<syn-divider>`
+
+### Patch Changes
+
+- Updated dependencies [[`5704a96`](https://github.com/synergy-design-system/synergy-design-system/commit/5704a96fbe2d0481822a30ce171a01df960c82f1)]:
+  - @synergy-design-system/tokens@3.10.0
+
 ## 3.9.0
 
 ### Patch Changes

package/metadata/packages/fonts/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.4
+
+### Patch Changes
+
+- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 dependency updates (#258)
+
 ## 1.0.3
 
 ### Patch Changes

package/metadata/packages/fonts/package.json

@@ -7,13 +7,13 @@
   "devDependencies": {
     "@synergy-design-system/eslint-config-syn": "workspace:^",
     "@synergy-design-system/stylelint-config-syn": "workspace:^",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "ora": "^9.3.0",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-header": "^3.0.3",
     "postcss-import": "^16.1.1",
     "postcss-url": "^10.1.3",
-    "stylelint": "^17.3.0"
+    "stylelint": "^17.4.0"
   },
   "exports": {
     ".": {
@@ -68,5 +68,5 @@
     "lint": "pnpm run /^lint:.*/"
   },
   "type": "module",
-  "version": "1.0.3"
+  "version": "1.0.4"
 }

package/metadata/packages/styles/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 2.0.2
+
+### Patch Changes
+
+- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 dependency updates (#258)
+
+- Updated dependencies [[`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288)]:
+  - @synergy-design-system/tokens@3.10.1
+
 ## 2.0.1
 
 ### Patch Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,82 @@
 # Changelog
 
+## 3.10.1
+
+### Patch Changes
+
+- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 dependency updates (#258)
+
+## 3.10.0
+
+### Minor Changes
+
+- [#1209](https://github.com/synergy-design-system/synergy-design-system/pull/1209) [`5704a96`](https://github.com/synergy-design-system/synergy-design-system/commit/5704a96fbe2d0481822a30ce171a01df960c82f1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  feat: ✨ Allow `<syn-divider>` as a separator in meta-navigation of `<syn-header>` (#1130)
+
+  This release adds the possiblity to use `<syn-divider>` as a separator between items in the `<syn-header>` metanavigation.
+  It will automatically set the correct `height` on vertically aligned `<syn-dividers>`.
+
+  You may use it via:
+
+  ```html
+  <syn-header label="App Name">
+    <nav slot="meta-navigation">
+      <syn-icon-button
+        name="settings_outline"
+        label="Settings"
+      ></syn-icon-button>
+      <syn-icon-button
+        name="insert_chart_outlined"
+        label="Analytics"
+      ></syn-icon-button>
+      <syn-divider vertical></syn-divider>
+      <syn-icon-button name="dark_mode" label="Dark Mode"></syn-icon-button>
+      <syn-divider vertical></syn-divider>
+      <syn-icon-button name="language" label="Language"></syn-icon-button>
+      <syn-icon-button name="login" label="Login"></syn-icon-button>
+    </nav>
+  </syn-header>
+  ```
+
+  or via directly slotting the `<syn-divider>` via
+
+  ```html
+  <syn-header label="App Name">
+    <syn-icon-button
+      slot="meta-navigation"
+      name="settings_outline"
+      label="Settings"
+    ></syn-icon-button>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="insert_chart_outlined"
+      label="Analytics"
+    ></syn-icon-button>
+    <syn-divider vertical slot="meta-navigation"></syn-divider>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="dark_mode"
+      label="Dark Mode"
+    ></syn-icon-button>
+    <syn-divider vertical slot="meta-navigation"></syn-divider>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="language"
+      label="Language"
+    ></syn-icon-button>
+    <syn-icon-button
+      slot="meta-navigation"
+      name="login"
+      label="Login"
+    ></syn-icon-button>
+  </syn-header>
+  ```
+
+  `<syn-header>` now also exposes a new `cssproperty` `--metanavigation-item-size` that can be used to define the size of rendered `<syn-icon-buttons>`, as well as the height of `<syn-divider>`
+
 ## 3.9.0
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.8.0
+ * @synergy-design-system/tokens version 3.10.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.8.0
+ * @synergy-design-system/tokens version 3.10.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

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

package/metadata/static/components/syn-header/docs.md

@@ -107,6 +107,71 @@ Use the Meta Navigation slot to add additional functionalities to your applicati
 
 ---
 
+## Meta Navigation With Dividers
+
+If you need different icon groups or a separator between them, add a <syn-divider> between them.
+
+```html
+<syn-header label="App Name" burger-menu="hidden">
+  <nav slot="meta-navigation">
+    <syn-icon-button
+      name="settings_outline"
+      label="Settings"
+      size="inherit"
+      color="currentColor"
+    ></syn-icon-button>
+    <syn-icon-button
+      name="insert_chart_outlined"
+      label="Analytics"
+      size="inherit"
+      color="currentColor"
+    ></syn-icon-button>
+    <syn-divider
+      vertical=""
+      role="separator"
+      aria-orientation="vertical"
+      style="
+        --spacing: var(--syn-spacing-x-small);
+        align-self: center;
+        display: flex;
+        height: var(--metanavigation-item-size);
+      "
+    ></syn-divider>
+    <syn-icon-button
+      name="dark_mode"
+      label="Dark Mode"
+      size="inherit"
+      color="currentColor"
+    ></syn-icon-button>
+    <syn-divider
+      vertical=""
+      role="separator"
+      aria-orientation="vertical"
+      style="
+        --spacing: var(--syn-spacing-x-small);
+        align-self: center;
+        display: flex;
+        height: var(--metanavigation-item-size);
+      "
+    ></syn-divider>
+    <syn-icon-button
+      name="language"
+      label="Language"
+      size="inherit"
+      color="currentColor"
+    ></syn-icon-button>
+    <syn-icon-button
+      name="login"
+      label="Login"
+      size="inherit"
+      color="currentColor"
+    ></syn-icon-button>
+  </nav>
+</syn-header>
+```
+
+---
+
 ## Navigation
 
 Use the top navigation slot to add syn-navigation and horizontal syn-navigation-items.

package/package.json

@@ -7,33 +7,33 @@
     "syn-mcp": "./dist/bin/start.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.26.0",
+    "@modelcontextprotocol/sdk": "^1.27.1",
     "globby": "^16.1.1",
     "zod": "^4.3.6",
-    "@synergy-design-system/assets": "2.0.1"
+    "@synergy-design-system/assets": "2.0.2"
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.10.13",
+    "@types/node": "^24.12.0",
     "@types/serve-handler": "^6.1.4",
     "change-case": "^5.4.4",
     "custom-elements-manifest": "^2.1.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "jest": "^30.2.0",
     "ora": "^9.3.0",
     "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "rimraf": "^6.1.3",
-    "serve-handler": "^6.1.6",
+    "serve-handler": "^6.1.7",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "3.9.0",
+    "@synergy-design-system/components": "3.10.1",
     "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/styles": "2.0.1",
-    "@synergy-design-system/tokens": "^3.9.0",
-    "@synergy-design-system/fonts": "1.0.3"
+    "@synergy-design-system/tokens": "^3.10.1",
+    "@synergy-design-system/styles": "2.0.2",
+    "@synergy-design-system/fonts": "1.0.4"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.11.0",
+  "version": "2.12.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-divider/component.custom.styles.ts

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