@synergy-design-system/components 1.14.0 → 1.15.0

package/dist/chunks/{chunk.UEQDHG7J.js → chunk.2BEBXBDJ.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.64MHCKTF.js";
+} from "./chunk.LNUIMITL.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.UEQDHG7J.js.map
+//# sourceMappingURL=chunk.2BEBXBDJ.js.map

package/dist/chunks/{chunk.2KV3G5JF.js → chunk.2LMCM7HQ.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.KEEDSK2V.js";
+} from "./chunk.WV2VTAP2.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.2KV3G5JF.js.map
+//# sourceMappingURL=chunk.2LMCM7HQ.js.map

package/dist/chunks/{chunk.QQB6JCQY.js → chunk.3JBPXBYC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.4QS5IWYB.js";
 import {
   SynDivider
-} from "./chunk.5HAKNNIR.js";
+} from "./chunk.YBPWZ4QI.js";
 import {
   defaultValue
 } from "./chunk.WFAJR3FN.js";
@@ -22,17 +22,17 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.4LMFTSOM.js";
+} from "./chunk.WHYX7AY4.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   LocalizeController
-} from "./chunk.RK7OBPZ5.js";
+} from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass,
   __spreadValues
@@ -643,4 +643,4 @@ __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.QQB6JCQY.js.map
+//# sourceMappingURL=chunk.3JBPXBYC.js.map

package/dist/chunks/{chunk.2SLHEFOH.js → chunk.3QNVV7DW.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.2OLQHFOR.js";
+} from "./chunk.FKT4RXN7.js";
 import {
   button_styles_default
 } from "./chunk.SJMMPKWP.js";
@@ -13,17 +13,17 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.4LMFTSOM.js";
+} from "./chunk.WHYX7AY4.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   LocalizeController
-} from "./chunk.RK7OBPZ5.js";
+} from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   button_custom_styles_default
 } from "./chunk.K55MKNUR.js";
@@ -273,4 +273,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.2SLHEFOH.js.map
+//# sourceMappingURL=chunk.3QNVV7DW.js.map

package/dist/chunks/{chunk.GDHER3FZ.js → chunk.4LD5UMX7.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.QFMUPETV.js";
+} from "./chunk.VUROYPEC.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.GDHER3FZ.js.map
+//# sourceMappingURL=chunk.4LD5UMX7.js.map

package/dist/chunks/{chunk.GGY5VQYA.js → chunk.4TWUWTOI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -409,4 +409,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.GGY5VQYA.js.map
+//# sourceMappingURL=chunk.4TWUWTOI.js.map

package/dist/chunks/{chunk.COFVSXEF.js → chunk.5UETQYQR.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.2QYALZBT.js";
 import {
   SynIconButton
-} from "./chunk.7UUZ5ISH.js";
+} from "./chunk.H7APDHTS.js";
 import {
   getTabbableElements
 } from "./chunk.2QOQY4ZG.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk.QAUTITK3.js";
 import {
   drawer_custom_styles_default
-} from "./chunk.UYD2OVFV.js";
+} from "./chunk.KZMWNTUS.js";
 import {
   drawer_styles_default
 } from "./chunk.PHSJD47V.js";
@@ -31,11 +31,11 @@ import {
 } from "./chunk.AVTU2BGE.js";
 import {
   LocalizeController
-} from "./chunk.RK7OBPZ5.js";
+} from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass,
   __yieldStar
@@ -518,4 +518,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.COFVSXEF.js.map
+//# sourceMappingURL=chunk.5UETQYQR.js.map

package/dist/chunks/{chunk.MQCFDVLW.js → chunk.63JWIOGL.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.H7XP6JAS.js";
+} from "./chunk.YNWVXDDQ.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.MQCFDVLW.js.map
+//# sourceMappingURL=chunk.63JWIOGL.js.map

package/dist/chunks/{chunk.7UVCYUNR.js → chunk.66MOXMDP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.6C4JXZZN.js";
 import {
   library_system_default
-} from "./chunk.N4VSEIRQ.js";
+} from "./chunk.VTKIDI7N.js";
 
 // src/components/icon/library.ts
 var registry = [library_default_default, library_system_default];
@@ -42,4 +42,4 @@ export {
   registerIconLibrary,
   unregisterIconLibrary
 };
-//# sourceMappingURL=chunk.7UVCYUNR.js.map
+//# sourceMappingURL=chunk.66MOXMDP.js.map

package/dist/chunks/chunk.74N5WLM5.js

@@ -0,0 +1,53 @@
+// src/components/prio-nav/prio-nav.styles.ts
+import { css } from "lit";
+var prio_nav_styles_default = css`
+  :host {
+    display: block;
+
+    /**
+     * Needed because the positioning of the priority menu is absolute
+     */
+    position: relative !important;
+  }
+
+  .horizontal-nav {
+    display: flex;
+    flex: 1;
+    gap: var(--syn-spacing-large);
+  }
+
+  /**
+   * Priority Menu adjustments
+   */
+  .priority-menu--hidden {
+    visibility: hidden;
+  }
+
+  .priority-menu__label {
+    display: none;
+  }
+
+  .priority-menu__label--visible {
+    display: block;
+  }
+
+  /**
+   * Make the available small click area accessible by adding paddings
+   */
+  .priority-menu--has-visible-items .priority-menu__icon {
+    padding-left: var(--syn-spacing-small);
+    padding-right: var(--syn-spacing-small);
+  }
+
+  /**
+   * Remove the margin from the content container if it is not visible
+   */
+  .priority-menu--has-visible-items .priority-menu__nav-item::part(content-container) {
+    margin-inline-start: 0;
+  }
+`;
+
+export {
+  prio_nav_styles_default
+};
+//# sourceMappingURL=chunk.74N5WLM5.js.map

package/dist/chunks/chunk.74N5WLM5.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/prio-nav/prio-nav.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n\n    /**\n     * Needed because the positioning of the priority menu is absolute\n     */\n    position: relative !important;\n  }\n\n  .horizontal-nav {\n    display: flex;\n    flex: 1;\n    gap: var(--syn-spacing-large);\n  }\n\n  /**\n   * Priority Menu adjustments\n   */\n  .priority-menu--hidden {\n    visibility: hidden;\n  }\n\n  .priority-menu__label {\n    display: none;\n  }\n\n  .priority-menu__label--visible {\n    display: block;\n  }\n\n  /**\n   * Make the available small click area accessible by adding paddings\n   */\n  .priority-menu--has-visible-items .priority-menu__icon {\n    padding-left: var(--syn-spacing-small);\n    padding-right: var(--syn-spacing-small);\n  }\n\n  /**\n   * Remove the margin from the content container if it is not visible\n   */\n  .priority-menu--has-visible-items .priority-menu__nav-item::part(content-container) {\n    margin-inline-start: 0;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.JDXKGJ63.js → chunk.AOKNP4QD.js}

@@ -71,10 +71,11 @@ var header_styles_default = css`
   .header__label {
     font: var(--syn-body-large-bold);
     padding: 0 var(--syn-spacing-2x-large);
+    white-space: nowrap;
   }
 
   /**
-   * The options menu holds an arbitary list of <syn-icon-button />
+   * The options menu holds an arbitrary list of <syn-icon-button />
    */
   .header__meta-navigation {
     display: flex;
@@ -88,12 +89,51 @@ var header_styles_default = css`
     font-size: var(--syn-font-size-x-large);
   }
 
+  /**
+   * The horizontal top navigation section
+   */
   .header__navigation {
     padding: 0 var(--syn-spacing-large);
   }
+
+  /**
+   * The burger menu icon styles
+   */
+  .header__burger-menu-toggle {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--syn-color-neutral-950);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--syn-font-size-x-large);
+    margin-right: calc(var(--syn-spacing-medium) + var(--syn-spacing-2x-small));
+    padding: var(--syn-spacing-x-small);
+    transition: var(--syn-transition-x-fast) color;
+  }
+
+  .header__burger-menu-toggle:hover {
+    color: var(--syn-color-primary-600);
+  }
+
+  .header__burger-menu-toggle:active {
+    color: var(--syn-color-primary-700);
+  }
+
+  .header__burger-menu-toggle:focus-visible {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /**
+   * If the burger menu is provided, use a smaller spacing on the left side
+   */
+   .header--has-burger-menu .header__content {
+    padding-left: var(--syn-spacing-medium);
+   }
 `;
 
 export {
   header_styles_default
 };
-//# sourceMappingURL=chunk.JDXKGJ63.js.map
+//# sourceMappingURL=chunk.AOKNP4QD.js.map

package/dist/chunks/{chunk.JDXKGJ63.js.map → chunk.AOKNP4QD.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/header/header.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .header {\n    background: var(--syn-color-neutral-0);\n    box-shadow: inset 0 -1px 0 0 var(--syn-color-neutral-400);\n  }\n\n  /**\n   * The primary content area displays one to many slotted items\n   * and contains the following items:\n   * - side nav state icon (OPTIONAL)\n   * - company or application logo\n   * - application name\n   * - meta-navigation\n   */\n  .header__content {\n    align-items: center;\n    box-sizing: content-box;\n    display: flex;\n    min-height: 40px;\n    padding: var(--syn-spacing-large);\n  }\n\n  /**\n   * If the primary navigation is provided, use a smaller spacing\n   * between the primary content area and the navigation area\n   */\n  .header--has-navigation .header__content {\n    padding-bottom: var(--syn-spacing-medium);\n  }\n\n  /**\n   * The logo slot includes the application or company logo\n   */\n  .header__logo ::slotted(*),\n  .header__logo syn-icon {\n    display: block;\n  }\n\n  /**\n   * Make sure to use the correct color and outline for links\n   */\n  .header__logo ::slotted(a),\n  .header__logo ::slotted(a:hover) {\n    color: var(--syn-color-primary-600);\n  }\n\n  .header__logo ::slotted(a:is(:focus-visible)) {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /**\n   * Styles for the default logo. This makes sure the default SICK logo has the correct size and color\n   */\n  .header__logo syn-icon,\n  .header__logo syn-icon::part(svg) {\n    color: var(--syn-color-primary-600);\n    height: 32px;\n    width: auto;\n  }\n\n  /**\n   * The label section hosts the application name\n   */\n  .header__label {\n    font: var(--syn-body-large-bold);\n    padding: 0 var(--syn-spacing-2x-large);\n  }\n\n  /**\n   * The options menu holds an arbitary list of <syn-icon-button />\n   */\n  .header__meta-navigation {\n    display: flex;\n    flex: 1;\n    gap: var(--syn-spacing-x-small);\n    justify-content: end;\n  }\n\n  .header__meta-navigation ::slotted(*) {\n    display: contents;\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .header__navigation {\n    padding: 0 var(--syn-spacing-large);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .header {\n    background: var(--syn-color-neutral-0);\n    box-shadow: inset 0 -1px 0 0 var(--syn-color-neutral-400);\n  }\n\n  /**\n   * The primary content area displays one to many slotted items\n   * and contains the following items:\n   * - side nav state icon (OPTIONAL)\n   * - company or application logo\n   * - application name\n   * - meta-navigation\n   */\n  .header__content {\n    align-items: center;\n    box-sizing: content-box;\n    display: flex;\n    min-height: 40px;\n    padding: var(--syn-spacing-large);\n  }\n\n  /**\n   * If the primary navigation is provided, use a smaller spacing\n   * between the primary content area and the navigation area\n   */\n  .header--has-navigation .header__content {\n    padding-bottom: var(--syn-spacing-medium);\n  }\n\n  /**\n   * The logo slot includes the application or company logo\n   */\n  .header__logo ::slotted(*),\n  .header__logo syn-icon {\n    display: block;\n  }\n\n  /**\n   * Make sure to use the correct color and outline for links\n   */\n  .header__logo ::slotted(a),\n  .header__logo ::slotted(a:hover) {\n    color: var(--syn-color-primary-600);\n  }\n\n  .header__logo ::slotted(a:is(:focus-visible)) {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /**\n   * Styles for the default logo. This makes sure the default SICK logo has the correct size and color\n   */\n  .header__logo syn-icon,\n  .header__logo syn-icon::part(svg) {\n    color: var(--syn-color-primary-600);\n    height: 32px;\n    width: auto;\n  }\n\n  /**\n   * The label section hosts the application name\n   */\n  .header__label {\n    font: var(--syn-body-large-bold);\n    padding: 0 var(--syn-spacing-2x-large);\n    white-space: nowrap;\n  }\n\n  /**\n   * The options menu holds an arbitrary list of <syn-icon-button />\n   */\n  .header__meta-navigation {\n    display: flex;\n    flex: 1;\n    gap: var(--syn-spacing-x-small);\n    justify-content: end;\n  }\n\n  .header__meta-navigation ::slotted(*) {\n    display: contents;\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * The horizontal top navigation section\n   */\n  .header__navigation {\n    padding: 0 var(--syn-spacing-large);\n  }\n\n  /**\n   * The burger menu icon styles\n   */\n  .header__burger-menu-toggle {\n    align-items: center;\n    background: none;\n    border: none;\n    color: var(--syn-color-neutral-950);\n    cursor: pointer;\n    display: flex;\n    font-size: var(--syn-font-size-x-large);\n    margin-right: calc(var(--syn-spacing-medium) + var(--syn-spacing-2x-small));\n    padding: var(--syn-spacing-x-small);\n    transition: var(--syn-transition-x-fast) color;\n  }\n\n  .header__burger-menu-toggle:hover {\n    color: var(--syn-color-primary-600);\n  }\n\n  .header__burger-menu-toggle:active {\n    color: var(--syn-color-primary-700);\n  }\n\n  .header__burger-menu-toggle:focus-visible {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /**\n   * If the burger menu is provided, use a smaller spacing on the left side\n   */\n   .header--has-burger-menu .header__content {\n    padding-left: var(--syn-spacing-medium);\n   }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/chunk.BHTLGDWT.js

@@ -0,0 +1,166 @@
+import {
+  icon_default
+} from "./chunk.G7XEHN2F.js";
+import {
+  header_styles_default
+} from "./chunk.AOKNP4QD.js";
+import {
+  HasSlotController
+} from "./chunk.66WXVGAW.js";
+import {
+  watch
+} from "./chunk.AVTU2BGE.js";
+import {
+  LocalizeController
+} from "./chunk.GEHO4WRP.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.MCJTXOVV.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/header/header.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+import { property, state } from "lit/decorators.js";
+var SynHeader = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "logo", "label", "meta-navigation", "navigation");
+    this.localize = new LocalizeController(this);
+    this.label = "";
+    this.showBurgerMenu = false;
+    this.burgerMenuVisible = false;
+  }
+  handleBurgerMenuToggle() {
+    if (this.sideNav && !this.sideNav.rail) {
+      this.sideNav.open = !this.sideNav.open;
+    }
+    this.burgerMenuVisible = !this.burgerMenuVisible;
+  }
+  updateBurgerMenuBasedOnSideNav() {
+    if (this.sideNav) {
+      this.showBurgerMenu = !this.sideNav.rail;
+      this.burgerMenuVisible = !this.sideNav.rail ? this.sideNav.open : false;
+    }
+  }
+  handleBurgerMenuVisible() {
+    this.emit(this.burgerMenuVisible ? "syn-burger-menu-show" : "syn-burger-menu-hide");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mutationObserver = new MutationObserver(() => this.updateBurgerMenuBasedOnSideNav());
+  }
+  firstUpdated() {
+    const sideNav = document.querySelector("syn-side-nav");
+    this.connectSideNavigation(sideNav);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver.disconnect();
+  }
+  /**
+   * Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation
+   * like showing the burger menu icon and open / close handling.
+   *
+   * If no side navigation is connected, the header will use the first `syn-side-nav` element it
+   * finds.
+   *
+   * @param sideNav The side navigation to connect to the header
+   */
+  connectSideNavigation(sideNav) {
+    this.mutationObserver.disconnect();
+    this.sideNav = sideNav || document.querySelector("syn-side-nav");
+    if (this.sideNav) {
+      this.updateBurgerMenuBasedOnSideNav();
+      this.mutationObserver.observe(this.sideNav, { attributeFilter: ["open", "rail"], attributes: true });
+    }
+  }
+  render() {
+    const hasNavigation = this.hasSlotController.test("navigation");
+    return html`
+      <header
+        class=${classMap({
+      header: true,
+      "header--has-burger-menu": this.showBurgerMenu,
+      "header--has-navigation": hasNavigation
+    })}
+        part="base"
+      >
+        <!-- .header__content -->
+        <div part="content" class="header__content">
+
+          ${this.showBurgerMenu ? html`
+                  <button
+                    part="burger-menu-toggle-button"
+                    class="header__burger-menu-toggle"
+                    type="button"
+                    @click=${this.handleBurgerMenuToggle}
+                    aria-label=${this.localize.term(this.burgerMenuVisible ? "closeMenu" : "openMenu")}
+                  >
+                    ${this.burgerMenuVisible ? html`
+                          <slot name="show-burger-menu">
+                            <syn-icon name="x-lg" library="system"></syn-icon>
+                          </slot>
+                        ` : html`
+                          <slot name="hide-burger-menu">
+                            <syn-icon name="menu" library="system"></syn-icon>
+                          </slot>
+                        `}
+                  </button>
+                ` : ""}
+
+          <div part="logo" class="header__logo">
+            <slot name="logo">
+              <syn-icon name="logo-color" library="system" label="SICK Sensor Intelligence"></syn-icon>
+            </slot>
+          </div>
+
+          <div part="label" class="header__label">
+            <slot>
+              ${this.label}
+            </slot>
+          </div>
+
+          <div part="meta-navigation" class="header__meta-navigation">
+            <slot name="meta-navigation"></slot>
+          </div>
+        </div>
+        <!-- /.header__content -->
+
+        <div part="navigation" class="header__navigation">
+          <slot name="navigation"></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+SynHeader.styles = [
+  component_styles_default,
+  header_styles_default
+];
+SynHeader.dependencies = {
+  "syn-icon": icon_default
+};
+__decorateClass([
+  property()
+], SynHeader.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "show-burger-menu", reflect: true, type: Boolean })
+], SynHeader.prototype, "showBurgerMenu", 2);
+__decorateClass([
+  property({ attribute: "burger-menu-visible", reflect: true, type: Boolean })
+], SynHeader.prototype, "burgerMenuVisible", 2);
+__decorateClass([
+  state()
+], SynHeader.prototype, "sideNav", 2);
+__decorateClass([
+  watch("burgerMenuVisible", { waitUntilFirstUpdate: true })
+], SynHeader.prototype, "handleBurgerMenuVisible", 1);
+
+export {
+  SynHeader
+};
+//# sourceMappingURL=chunk.BHTLGDWT.js.map

package/dist/chunks/chunk.BHTLGDWT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/header/header.component.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/unbound-method */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { property, state } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './header.styles.js';\nimport SynIcon from '../icon/icon.js';\nimport type SynSideNav from '../side-nav/side-nav.component.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { watch } from '../../internal/watch.js';\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 - 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 show-burger-menu - An icon to use in lieu of the default show burger menu icon\n * @slot hide-burger-menu - An icon to use in lieu of the default hide burger menu icon\n *\n * @event syn-burger-menu-show - Emitted when the burger menu button is toggled to visible\n * @event syn-burger-menu-hide - Emitted when the burger menu button is toggled to not visible\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 */\nexport default class SynHeader extends SynergyElement {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    styles,\n  ];\n\n  static dependencies = {\n    'syn-icon': SynIcon,\n  };\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'logo', 'label', 'meta-navigation', 'navigation');\n\n  private readonly localize = new LocalizeController(this);\n\n  /**\n   * Internal mutation observer\n   */\n  private mutationObserver: MutationObserver;\n\n  /**\n   * The headers label. If you need to display HTML, use the `default` slot instead.\n   */\n  @property() label = '';\n\n  /**\n   * Adds a button to toggle the burger menu's visibility.\n   * The button is added automatically, if the component finds a syn-side-nav in non-rail mode.\n   */\n  @property({ attribute: 'show-burger-menu', reflect: true, type: Boolean }) showBurgerMenu = false;\n\n  /**\n   * Determines whether or not the burger menu is currently visible.\n   */\n  @property({ attribute: 'burger-menu-visible', reflect: true, type: Boolean }) burgerMenuVisible = false;\n\n  /**\n   * The side nav\n   */\n  @state() private sideNav: SynSideNav | null;\n\n  private handleBurgerMenuToggle() {\n    // If there is a side-nav in non-rail mode, toggle the open state!\n    if (this.sideNav && !this.sideNav.rail) {\n      this.sideNav.open = !this.sideNav.open;\n    }\n    this.burgerMenuVisible = !this.burgerMenuVisible;\n  }\n\n  private updateBurgerMenuBasedOnSideNav() {\n    // The side-nav has a higher priority than when the burger menu toggle and visibility\n    // is set via property\n    if (this.sideNav) {\n      this.showBurgerMenu = !this.sideNav.rail;\n      this.burgerMenuVisible = !this.sideNav.rail ? this.sideNav.open : false;\n    }\n  }\n\n  @watch('burgerMenuVisible', { waitUntilFirstUpdate: true })\n  handleBurgerMenuVisible() {\n    this.emit(this.burgerMenuVisible ? 'syn-burger-menu-show' : 'syn-burger-menu-hide');\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.mutationObserver = new MutationObserver(() => this.updateBurgerMenuBasedOnSideNav());\n  }\n\n  firstUpdated() {\n    // Search for a side-nav and use the first found in case of the connectSideNavigation method\n    // is not used by the user.\n    const sideNav = document.querySelector('syn-side-nav')!;\n    this.connectSideNavigation(sideNav);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    //  Remove observer\n    this.mutationObserver.disconnect();\n  }\n\n  /**\n   * Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation\n   * like showing the burger menu icon and open / close handling.\n   *\n   * If no side navigation is connected, the header will use the first `syn-side-nav` element it\n   * finds.\n   *\n   * @param sideNav The side navigation to connect to the header\n   */\n  connectSideNavigation(sideNav: SynSideNav) {\n    this.mutationObserver.disconnect();\n\n    this.sideNav = sideNav || document.querySelector('syn-side-nav');\n    if (this.sideNav) {\n      // Need to call the method initially, if the side-nav is not open on connect time.\n      // Otherwise the mutation observer won`t trigger the method.\n      this.updateBurgerMenuBasedOnSideNav();\n      this.mutationObserver.observe(this.sideNav, { attributeFilter: ['open', 'rail'], attributes: true });\n    }\n  }\n\n  render() {\n    const hasNavigation = this.hasSlotController.test('navigation');\n\n    return html`\n      <header\n        class=${classMap({\n          header: true,\n          'header--has-burger-menu': this.showBurgerMenu,\n          'header--has-navigation': hasNavigation,\n        })}\n        part=\"base\"\n      >\n        <!-- .header__content -->\n        <div part=\"content\" class=\"header__content\">\n\n          ${this.showBurgerMenu\n              ? html`\n                  <button\n                    part=\"burger-menu-toggle-button\"\n                    class=\"header__burger-menu-toggle\"\n                    type=\"button\"\n                    @click=${this.handleBurgerMenuToggle}\n                    aria-label=${this.localize.term(this.burgerMenuVisible ? 'closeMenu' : 'openMenu')}\n                  >\n                    ${this.burgerMenuVisible\n                      ? html`\n                          <slot name=\"show-burger-menu\">\n                            <syn-icon name=\"x-lg\" library=\"system\"></syn-icon>\n                          </slot>\n                        `\n                      : html`\n                          <slot name=\"hide-burger-menu\">\n                            <syn-icon name=\"menu\" library=\"system\"></syn-icon>\n                          </slot>\n                        `}\n                  </button>\n                `\n              : ''}\n\n          <div part=\"logo\" class=\"header__logo\">\n            <slot name=\"logo\">\n              <syn-icon name=\"logo-color\" library=\"system\" label=\"SICK Sensor Intelligence\"></syn-icon>\n            </slot>\n          </div>\n\n          <div part=\"label\" class=\"header__label\">\n            <slot>\n              ${this.label}\n            </slot>\n          </div>\n\n          <div part=\"meta-navigation\" class=\"header__meta-navigation\">\n            <slot name=\"meta-navigation\"></slot>\n          </div>\n        </div>\n        <!-- /.header__content -->\n\n        <div part=\"navigation\" class=\"header__navigation\">\n          <slot name=\"navigation\"></slot>\n        </div>\n      </header>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.3HTXK6WY.js → chunk.CHJC6OSN.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.722JR5BD.js";
+} from "./chunk.ON2HXIFZ.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.3HTXK6WY.js.map
+//# sourceMappingURL=chunk.CHJC6OSN.js.map

package/dist/chunks/{chunk.EWGDHM27.js → chunk.EFV5UWMX.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.525LGYB4.js";
+} from "./chunk.NBHBC5FQ.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.EWGDHM27.js.map
+//# sourceMappingURL=chunk.EFV5UWMX.js.map

package/dist/chunks/{chunk.DXL3JN6D.js → chunk.FHEH5OSL.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.2SLHEFOH.js";
+} from "./chunk.3QNVV7DW.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.DXL3JN6D.js.map
+//# sourceMappingURL=chunk.FHEH5OSL.js.map

package/dist/chunks/{chunk.2OLQHFOR.js → chunk.FKT4RXN7.js}

@@ -3,11 +3,11 @@ import {
 } from "./chunk.OSBC36KQ.js";
 import {
   LocalizeController
-} from "./chunk.RK7OBPZ5.js";
+} from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.MCJTXOVV.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -30,4 +30,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default];
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.2OLQHFOR.js.map
+//# sourceMappingURL=chunk.FKT4RXN7.js.map

package/dist/chunks/{chunk.P2D7PUR2.js → chunk.FYN26TFO.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.XIUSSERX.js";
 import {
   SynButtonGroup
-} from "./chunk.H33SDUY3.js";
+} from "./chunk.SE4NF6AN.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
@@ -26,7 +26,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -356,4 +356,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.P2D7PUR2.js.map
+//# sourceMappingURL=chunk.FYN26TFO.js.map

package/dist/chunks/{chunk.Q4CT57M2.js → chunk.G7XEHN2F.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.4LMFTSOM.js";
+} from "./chunk.WHYX7AY4.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.Q4CT57M2.js.map
+//# sourceMappingURL=chunk.G7XEHN2F.js.map

package/dist/chunks/{chunk.SRZMRKLQ.js → chunk.GARWLAOJ.js}

@@ -23,7 +23,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -247,4 +247,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.SRZMRKLQ.js.map
+//# sourceMappingURL=chunk.GARWLAOJ.js.map