@synergy-design-system/react 3.9.0 → 3.10.0

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @synergy-design-system/react
 
+## 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
 
 ### Patch Changes

package/dist/chunks/{chunk.DSUG7BV5.js → chunk.W27E5FL5.js}

@@ -19,4 +19,4 @@ var SynHeader = createComponent({
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.DSUG7BV5.js.map
+//# sourceMappingURL=chunk.W27E5FL5.js.map

package/dist/chunks/{chunk.DSUG7BV5.js.map → chunk.W27E5FL5.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/header.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/header/header.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';\nimport type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';\nimport type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-header';\nComponent.define('syn-header');\n\n/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot label - The label for the header\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.\n *                      The default close icon is a 'x'.\n * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.\n *                      The default open icon is a burger menu.\n *\n * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed\n * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden\n * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open\n *\n * @csspart base - The component's base wrapper\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n * @csspart burger-menu-toggle-button - The button that toggles the burger menu\n *\n * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.\n */\nexport const SynHeader = createComponent({\n  displayName: 'SynHeader',\n  elementClass: Component,\n  events: {\n    onSynBurgerMenuClosed:\n      'syn-burger-menu-closed' as EventName<SynBurgerMenuClosedEvent>,\n    onSynBurgerMenuHidden:\n      'syn-burger-menu-hidden' as EventName<SynBurgerMenuHiddenEvent>,\n    onSynBurgerMenuOpen:\n      'syn-burger-menu-open' as EventName<SynBurgerMenuOpenEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';\nexport type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';\nexport type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';\n"],
-  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AAkCtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,uBACE;AAAA,IACF,uBACE;AAAA,IACF,qBACE;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/header/header.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';\nimport type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';\nimport type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-header';\nComponent.define('syn-header');\n\n/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot label - The label for the header\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.\n *                      The default close icon is a 'x'.\n * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.\n *                      The default open icon is a burger menu.\n *\n * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed\n * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden\n * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open\n *\n * @csspart base - The component's base wrapper\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n * @csspart burger-menu-toggle-button - The button that toggles the burger menu\n *\n * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.\n * @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)\n */\nexport const SynHeader = createComponent({\n  displayName: 'SynHeader',\n  elementClass: Component,\n  events: {\n    onSynBurgerMenuClosed:\n      'syn-burger-menu-closed' as EventName<SynBurgerMenuClosedEvent>,\n    onSynBurgerMenuHidden:\n      'syn-burger-menu-hidden' as EventName<SynBurgerMenuHiddenEvent>,\n    onSynBurgerMenuOpen:\n      'syn-burger-menu-open' as EventName<SynBurgerMenuOpenEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';\nexport type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';\nexport type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AAmCtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,uBACE;AAAA,IACF,uBACE;AAAA,IACF,qBACE;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
   "names": []
 }

package/dist/components/header.d.ts

@@ -34,6 +34,7 @@ import type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
  * @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 declare const SynHeader: import("@lit/react").ReactWebComponent<Component, {
     onSynBurgerMenuClosed: EventName<SynBurgerMenuClosedEvent>;

package/dist/components/header.js

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "../chunks/chunk.DSUG7BV5.js";
+} from "../chunks/chunk.W27E5FL5.js";
 export {
   SynHeader
 };

package/dist/index.js

@@ -1,3 +1,9 @@
+import {
+  SynValidate
+} from "./chunks/chunk.NDVLOP3B.js";
+import {
+  SynSwitch
+} from "./chunks/chunk.3AUZZVYZ.js";
 import {
   SynTabGroup
 } from "./chunks/chunk.5GCIGA47.js";
@@ -20,8 +26,8 @@ import {
   SynTooltip
 } from "./chunks/chunk.GRD6B33U.js";
 import {
-  SynValidate
-} from "./chunks/chunk.NDVLOP3B.js";
+  SynRadioButton
+} from "./chunks/chunk.2LDP5CAQ.js";
 import {
   SynRadioGroup
 } from "./chunks/chunk.5CIFYMXU.js";
@@ -44,8 +50,8 @@ import {
   SynSpinner
 } from "./chunks/chunk.SOARUKQP.js";
 import {
-  SynSwitch
-} from "./chunks/chunk.3AUZZVYZ.js";
+  SynMenu
+} from "./chunks/chunk.4IVJHGWM.js";
 import {
   SynNavItem
 } from "./chunks/chunk.EFKHCKYH.js";
@@ -68,14 +74,14 @@ import {
   SynProgressRing
 } from "./chunks/chunk.ADSD2U7G.js";
 import {
-  SynRadioButton
-} from "./chunks/chunk.2LDP5CAQ.js";
+  SynDropdown
+} from "./chunks/chunk.AE6RZ4W2.js";
 import {
   SynFile
 } from "./chunks/chunk.IQB5SV6K.js";
 import {
   SynHeader
-} from "./chunks/chunk.DSUG7BV5.js";
+} from "./chunks/chunk.W27E5FL5.js";
 import {
   SynIconButton
 } from "./chunks/chunk.Y77LZN5N.js";
@@ -92,8 +98,8 @@ import {
   SynMenuLabel
 } from "./chunks/chunk.BTEVTUXU.js";
 import {
-  SynMenu
-} from "./chunks/chunk.4IVJHGWM.js";
+  SynButton
+} from "./chunks/chunk.TGSZHDUW.js";
 import {
   SynCard
 } from "./chunks/chunk.OJAJTT5S.js";
@@ -115,9 +121,6 @@ import {
 import {
   SynDrawer
 } from "./chunks/chunk.RWOJEMSX.js";
-import {
-  SynDropdown
-} from "./chunks/chunk.AE6RZ4W2.js";
 import {
   SynAccordion
 } from "./chunks/chunk.2PS5VOXM.js";
@@ -136,9 +139,6 @@ import {
 import {
   SynButtonGroup
 } from "./chunks/chunk.HHPIABBV.js";
-import {
-  SynButton
-} from "./chunks/chunk.TGSZHDUW.js";
 export {
   SynAccordion,
   SynAlert,

package/dist/types/syn-jsx-elements.d.ts

@@ -690,6 +690,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @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 type SynHeaderJSXElement = SynCustomElement<SynHeader, [
     [
         'syn-burger-menu-closed',
@@ -2152,6 +2153,7 @@ declare module 'react' {
              * @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)
              */ 'syn-header': SynHeaderJSXElement;
             /**
              * @summary Icons are symbols that can be used to represent various options within an application.

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@synergy-design-system/components": "3.9.0"
+    "@synergy-design-system/components": "3.10.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -43,12 +43,12 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.4"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "3.9.0"
+    "@synergy-design-system/tokens": "3.10.0"
   }
 }