@synergy-design-system/vue - npm Package Compare versions

Comparing version 3.9.0 to 3.10.0

CHANGELOG.md

 # @synergy-design-system/vue
 
+## 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/components@3.10.0
+  - @synergy-design-system/tokens@3.10.0
+
 ## 3.9.0
@@ -4,0 +79,0 @@

package.json

@@ -7,3 +7,3 @@ {
   "dependencies": {
-    "@synergy-design-system/components": "3.9.0"
+    "@synergy-design-system/components": "3.10.0"
   },
@@ -44,3 +44,3 @@ "description": "Vue3 wrappers for the Synergy Design System",
   "type": "module",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "devDependencies": {
@@ -55,3 +55,3 @@ "@vitejs/plugin-vue": "^6.0.4",
   "peerDependencies": {
-    "@synergy-design-system/tokens": "3.9.0"
+    "@synergy-design-system/tokens": "3.10.0"
   },
@@ -58,0 +58,0 @@ "scripts": {

src/components/SynVueHeader.vue

@@ -39,2 +39,3 @@ <script setup lang="ts">
  * @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)
  */
@@ -41,0 +42,0 @@ import { computed, ref } from 'vue';

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

493200

0.57%

Dependency changes

• + Added

  @synergy-design-system/components@3.10.0
  (transitive)

• + Added

  @synergy-design-system/tokens@3.10.0
  (transitive)

• - Removed

  @synergy-design-system/components@3.9.0
  (transitive)

• - Removed

  @synergy-design-system/tokens@3.9.0
  (transitive)

• Updated

  @synergy-design-system/components@3.10.0