@synergy-design-system/components 2.18.8 → 2.19.1

package/README.md

@@ -9,7 +9,11 @@ Got any problems using our components? Please take a look at [our list of known
 
 ## Getting started
 
-### 1. Package installation
+### 1. Usage example
+
+If you want to see a usage example, please check out our [test Web Components repository](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/_private/vanilla-demo).
+
+### 2. Package installation
 
 Run the following steps to install the required packages.
 
@@ -20,11 +24,17 @@ npm install --save @synergy-design-system/components
 # Install the required design tokens
 # (only needed if you do not install peerDeps automatically)
 npm install --save @synergy-design-system/tokens
+
+# Optional: Install the styles utility package
+npm install --save @synergy-design-system/styles
+
+# Optional: if icons shall be used, install the assets package
+npm install --save @synergy-design-system/assets
 ```
 
 ---
 
-### 2. Load the design tokens (required) and utility classes (recommended)
+### 3. Load the desired theme (required) and utility classes (recommended)
 
 The shipped components make heavy use of design tokens, which are provided via [@synergy-design-system/tokens](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/tokens). Make sure to follow the installation steps there for help on setting the tokens up. Usually it is enough to load the light or dark theme included there.
 
@@ -77,7 +87,7 @@ You may either load all of them in one bundle (recommended) or just include the
 
 ---
 
-### 3. Define the elements
+### 4. Importing and rendering components
 
 There are multiple ways to load the components:
 
@@ -165,7 +175,7 @@ import "@synergy-design-system/components/components/button/button.js";
 
 ---
 
-### 4. Using the provided types
+### 5. Using the provided types
 
 The components are built using typescript and provide types for elements and events out of the box. These can be used for working with the dom when working in a typescript environment. You may use them by importing the needed types and using them for elements, like shown in this example:
 
@@ -199,7 +209,7 @@ document.addEventListener("load", () => {
 
 ---
 
-### 5. Add html autocompletion to VSCode (optional)
+### 6. Add html autocompletion to VSCode (optional)
 
 This package ships with a [custom-elements-manifest](https://github.com/webcomponents/custom-elements-manifest) that may be used to provide typings for tags. To enable code completion, please proceed the following way:
 
@@ -214,7 +224,7 @@ This package ships with a [custom-elements-manifest](https://github.com/webcompo
 
 ---
 
-### 6. Breaking changes between major versions
+### 7. Breaking changes between major versions
 
 Please have a look at the official [breaking changes list](https://synergy-design-system.github.io/?path=/docs/packages-components-breaking-changes--docs) for information how to update to new major versions of Synergy.
 

package/dist/chunks/{chunk.2H3IQPTM.js → chunk.2JG74LET.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -132,4 +132,4 @@ __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.2H3IQPTM.js.map
+//# sourceMappingURL=chunk.2JG74LET.js.map

package/dist/chunks/{chunk.OFJG7LC3.js → chunk.2N7FON4J.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.OIHFR6LH.js";
+} from "./chunk.HA4VAH4R.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.OFJG7LC3.js.map
+//# sourceMappingURL=chunk.2N7FON4J.js.map

package/dist/chunks/{chunk.FLEAMNCX.js → chunk.2SNG6ICN.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.BKTXEUXZ.js";
+} from "./chunk.UTI5YRPI.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.FLEAMNCX.js.map
+//# sourceMappingURL=chunk.2SNG6ICN.js.map

package/dist/chunks/{chunk.XVXIZXLM.js → chunk.2SYVQAAG.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.XVXIZXLM.js.map
+//# sourceMappingURL=chunk.2SYVQAAG.js.map

package/dist/chunks/{chunk.ATRLF7OR.js → chunk.2YC2XPZB.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.HPEZQ66S.js";
+} from "./chunk.N4ERWGQS.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.ATRLF7OR.js.map
+//# sourceMappingURL=chunk.2YC2XPZB.js.map

package/dist/chunks/{chunk.RQSPYDFV.js → chunk.3CDGBCI4.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.5732DMBC.js";
 import {
   SynIconButton
-} from "./chunk.HPEZQ66S.js";
+} from "./chunk.N4ERWGQS.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -39,7 +39,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -394,4 +394,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.RQSPYDFV.js.map
+//# sourceMappingURL=chunk.3CDGBCI4.js.map

package/dist/chunks/{chunk.WC23KYCD.js → chunk.3FDVOXDQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EHSNF4SS.js";
 import {
   SynIcon
-} from "./chunk.FZCXY6IO.js";
+} from "./chunk.PK3GNIMV.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -114,4 +114,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.WC23KYCD.js.map
+//# sourceMappingURL=chunk.3FDVOXDQ.js.map

package/dist/chunks/{chunk.AMRDZXRQ.js → chunk.3LFV62YH.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.TWPGX637.js";
+} from "./chunk.F4LWC4ZG.js";
 
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.AMRDZXRQ.js.map
+//# sourceMappingURL=chunk.3LFV62YH.js.map

package/dist/chunks/{chunk.FALZTFMP.js → chunk.43D7XZG3.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.VQ6YKGNL.js";
+} from "./chunk.B6WI7PKT.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.FALZTFMP.js.map
+//# sourceMappingURL=chunk.43D7XZG3.js.map

package/dist/chunks/{chunk.ZPOTYA4R.js → chunk.44UQ423T.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -33,4 +33,4 @@ export {
   normalizeEventAttribute,
   getEventNameForElement
 };
-//# sourceMappingURL=chunk.ZPOTYA4R.js.map
+//# sourceMappingURL=chunk.44UQ423T.js.map

package/dist/chunks/{chunk.N5NLC5PT.js → chunk.46RPMMZE.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.EQS6HORR.js";
+} from "./chunk.YO2KHVWQ.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.N5NLC5PT.js.map
+//# sourceMappingURL=chunk.46RPMMZE.js.map

package/dist/chunks/{chunk.BQGT5WC2.js → chunk.4Q7M7UF6.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.2ZHDDNZ4.js";
+} from "./chunk.PHXEWESW.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.BQGT5WC2.js.map
+//# sourceMappingURL=chunk.4Q7M7UF6.js.map

package/dist/chunks/{chunk.2A44EHJF.js → chunk.4XDYA3BR.js}

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.VSYQL7VN.js";
+} from "./chunk.VWX3BDY3.js";
 
 // src/components/file/file.ts
 var file_default = SynFile;
@@ -9,4 +9,4 @@ SynFile.define("syn-file");
 export {
   file_default
 };
-//# sourceMappingURL=chunk.2A44EHJF.js.map
+//# sourceMappingURL=chunk.4XDYA3BR.js.map

package/dist/chunks/{chunk.EXZM7E66.js → chunk.5BHMOVOP.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.FZCXY6IO.js";
+} from "./chunk.PK3GNIMV.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -261,4 +261,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.EXZM7E66.js.map
+//# sourceMappingURL=chunk.5BHMOVOP.js.map

package/dist/chunks/{chunk.7DGSPEGG.js → chunk.5BYHQ76J.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.7DGSPEGG.js.map
+//# sourceMappingURL=chunk.5BYHQ76J.js.map

package/dist/chunks/{chunk.7GIML4JQ.js → chunk.5YLM2S42.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.VCP3NP6X.js";
+} from "./chunk.6B35YJ7Q.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.7GIML4JQ.js.map
+//# sourceMappingURL=chunk.5YLM2S42.js.map

package/dist/chunks/{chunk.RJDU3ZLA.js → chunk.64ZJW35J.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.AA5ERQTB.js";
+} from "./chunk.KHTBGYZW.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.RJDU3ZLA.js.map
+//# sourceMappingURL=chunk.64ZJW35J.js.map

package/dist/chunks/{chunk.VCP3NP6X.js → chunk.6B35YJ7Q.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.VPWCODUY.js";
+} from "./chunk.DOGF6H73.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -275,4 +275,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.VCP3NP6X.js.map
+//# sourceMappingURL=chunk.6B35YJ7Q.js.map

package/dist/chunks/{chunk.SEJXMXDF.js → chunk.6KCSCINW.js}

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "./chunk.IDMPWKT4.js";
+} from "./chunk.L3RMZR6S.js";
 
 // src/components/tab-group/tab-group.ts
 var tab_group_default = SynTabGroup;
@@ -9,4 +9,4 @@ SynTabGroup.define("syn-tab-group");
 export {
   tab_group_default
 };
-//# sourceMappingURL=chunk.SEJXMXDF.js.map
+//# sourceMappingURL=chunk.6KCSCINW.js.map

package/dist/chunks/{chunk.5AHNBYLY.js → chunk.6OWPHF3O.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.HQ6QUSK7.js";
 import {
   SynIcon
-} from "./chunk.FZCXY6IO.js";
+} from "./chunk.PK3GNIMV.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -241,4 +241,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.5AHNBYLY.js.map
+//# sourceMappingURL=chunk.6OWPHF3O.js.map

package/dist/chunks/{chunk.TBEIHN7E.js → chunk.6Y7FIYEL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -89,4 +89,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.TBEIHN7E.js.map
+//# sourceMappingURL=chunk.6Y7FIYEL.js.map

package/dist/chunks/{chunk.Y4YV7SYH.js → chunk.7TXUSUIJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.66LQF6IO.js";
 import {
   icon_default
-} from "./chunk.XZXLATDY.js";
+} from "./chunk.UWBVP5EO.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -75,8 +75,10 @@ var SynHeader = class extends SynergyElement {
     this.mutationObserver = new MutationObserver(() => this.updateBurgerMenuBasedOnSideNav());
   }
   firstUpdated() {
-    const sideNav = document.querySelector("syn-side-nav");
-    this.connectSideNavigation(sideNav);
+    this.updateComplete.then(() => {
+      const sideNav = document.querySelector("syn-side-nav");
+      this.connectSideNavigation(sideNav);
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -182,4 +184,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.Y4YV7SYH.js.map
+//# sourceMappingURL=chunk.7TXUSUIJ.js.map

package/dist/chunks/{chunk.Y4YV7SYH.js.map → chunk.7TXUSUIJ.js.map}

@@ -1,7 +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 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 */\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 `label` slot instead.\n   */\n  @property() label = '';\n\n  /**\n   * Defines the current visibility and icon of the burger-menu icon.\n   * The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\n   * The following values can be used:\n   * - hidden: The burger menu is not visible\n   * - open: The burger menu is visible and shows the close icon\n   * - closed: The burger menu is visible and shows the open icon\n   */\n  @property({ attribute: 'burger-menu', reflect: true }) burgerMenu: 'hidden' | 'open' | 'closed' = 'hidden';\n\n  /**\n   * The side nav\n   */\n  @state() private sideNav: SynSideNav | null;\n\n  private toggleBurgerMenu() {\n    switch (this.burgerMenu) {\n    case 'closed': this.burgerMenu = 'open'; break;\n    case 'open': this.burgerMenu = 'closed'; break;\n    default: break;\n    }\n  }\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.toggleBurgerMenu();\n  }\n\n  /**\n   * Automatically update the burger menu icon based\n   * on the state of the side-nav, if one is connected.\n   */\n  private updateBurgerMenuBasedOnSideNav() {\n    if (this.sideNav) {\n      // Hide the burger menu icon if the side-nav is in rail mode\n      if (this.sideNav.rail) {\n        this.burgerMenu = 'hidden';\n      } else {\n        this.burgerMenu = this.sideNav.open ? 'open' : 'closed';\n      }\n    }\n  }\n\n  @watch('burgerMenu', { waitUntilFirstUpdate: true })\n  handleBurgerMenu() {\n    const myEvt: keyof GlobalEventHandlersEventMap = `syn-burger-menu-${this.burgerMenu}`;\n    this.emit(myEvt);\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 | null) {\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    const showBurgerMenu = this.burgerMenu !== 'hidden';\n    return html`\n      <header\n        class=${classMap({\n          header: true,\n          'header--has-burger-menu': showBurgerMenu,\n          'header--has-navigation': hasNavigation,\n        })}\n        part=\"base\"\n      >\n        <!-- .header__content -->\n        <div part=\"content\" class=\"header__content\">\n\n          ${showBurgerMenu\n              ? html`\n                  <button\n                    aria-label=${this.localize.term(this.burgerMenu === 'closed' ? 'openMenu' : 'closeMenu')}\n                    class=\"header__burger-menu-toggle\"\n                    @click=${this.handleBurgerMenuToggle}\n                    part=\"burger-menu-toggle-button\"\n                    type=\"button\"\n                  >\n                    ${this.burgerMenu === 'open'\n                      ? html`\n                          <slot name=\"open-burger-menu-icon\">\n                            <syn-icon name=\"x-lg\" library=\"system\"></syn-icon>\n                          </slot>\n                        `\n                      : html`\n                          <slot name=\"closed-burger-menu-icon\">\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 name=\"label\">\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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",
+  "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 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 */\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 `label` slot instead.\n   */\n  @property() label = '';\n\n  /**\n   * Defines the current visibility and icon of the burger-menu icon.\n   * The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\n   * The following values can be used:\n   * - hidden: The burger menu is not visible\n   * - open: The burger menu is visible and shows the close icon\n   * - closed: The burger menu is visible and shows the open icon\n   */\n  @property({ attribute: 'burger-menu', reflect: true }) burgerMenu: 'hidden' | 'open' | 'closed' = 'hidden';\n\n  /**\n   * The side nav\n   */\n  @state() private sideNav: SynSideNav | null;\n\n  private toggleBurgerMenu() {\n    switch (this.burgerMenu) {\n    case 'closed': this.burgerMenu = 'open'; break;\n    case 'open': this.burgerMenu = 'closed'; break;\n    default: break;\n    }\n  }\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.toggleBurgerMenu();\n  }\n\n  /**\n   * Automatically update the burger menu icon based\n   * on the state of the side-nav, if one is connected.\n   */\n  private updateBurgerMenuBasedOnSideNav() {\n    if (this.sideNav) {\n      // Hide the burger menu icon if the side-nav is in rail mode\n      if (this.sideNav.rail) {\n        this.burgerMenu = 'hidden';\n      } else {\n        this.burgerMenu = this.sideNav.open ? 'open' : 'closed';\n      }\n    }\n  }\n\n  @watch('burgerMenu', { waitUntilFirstUpdate: true })\n  handleBurgerMenu() {\n    const myEvt: keyof GlobalEventHandlersEventMap = `syn-burger-menu-${this.burgerMenu}`;\n    this.emit(myEvt);\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    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    this.updateComplete.then(() => {\n      const sideNav = document.querySelector('syn-side-nav');\n      this.connectSideNavigation(sideNav);\n    });\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 | null) {\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    const showBurgerMenu = this.burgerMenu !== 'hidden';\n    return html`\n      <header\n        class=${classMap({\n          header: true,\n          'header--has-burger-menu': showBurgerMenu,\n          'header--has-navigation': hasNavigation,\n        })}\n        part=\"base\"\n      >\n        <!-- .header__content -->\n        <div part=\"content\" class=\"header__content\">\n\n          ${showBurgerMenu\n              ? html`\n                  <button\n                    aria-label=${this.localize.term(this.burgerMenu === 'closed' ? 'openMenu' : 'closeMenu')}\n                    class=\"header__burger-menu-toggle\"\n                    @click=${this.handleBurgerMenuToggle}\n                    part=\"burger-menu-toggle-button\"\n                    type=\"button\"\n                  >\n                    ${this.burgerMenu === 'open'\n                      ? html`\n                          <slot name=\"open-burger-menu-icon\">\n                            <syn-icon name=\"x-lg\" library=\"system\"></syn-icon>\n                          </slot>\n                        `\n                      : html`\n                          <slot name=\"closed-burger-menu-icon\">\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 name=\"label\">\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AAyChC,IAAqB,YAArB,cAAuC,eAAe;AAAA,EAAtD;AAAA;AAUE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,QAAQ,SAAS,mBAAmB,YAAY;AAE9H,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAU3C,iBAAQ;AAUmC,sBAA2C;AAAA;AAAA,EAO1F,mBAAmB;AACzB,YAAQ,KAAK,YAAY;AAAA,MACzB,KAAK;AAAU,aAAK,aAAa;AAAQ;AAAA,MACzC,KAAK;AAAQ,aAAK,aAAa;AAAU;AAAA,MACzC;AAAS;AAAA,IACT;AAAA,EACF;AAAA,EAEQ,yBAAyB;AAE/B,QAAI,KAAK,WAAW,CAAC,KAAK,QAAQ,MAAM;AACtC,WAAK,QAAQ,OAAO,CAAC,KAAK,QAAQ;AAAA,IACpC;AACA,SAAK,iBAAiB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,iCAAiC;AACvC,QAAI,KAAK,SAAS;AAEhB,UAAI,KAAK,QAAQ,MAAM;AACrB,aAAK,aAAa;AAAA,MACpB,OAAO;AACL,aAAK,aAAa,KAAK,QAAQ,OAAO,SAAS;AAAA,MACjD;AAAA,IACF;AAAA,EACF;AAAA,EAGA,mBAAmB;AACjB,UAAM,QAA2C,mBAAmB,KAAK,UAAU;AACnF,SAAK,KAAK,KAAK;AAAA,EACjB;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AAExB,SAAK,mBAAmB,IAAI,iBAAiB,MAAM,KAAK,+BAA+B,CAAC;AAAA,EAC1F;AAAA,EAEA,eAAe;AAIb,SAAK,eAAe,KAAK,MAAM;AAC7B,YAAM,UAAU,SAAS,cAAc,cAAc;AACrD,WAAK,sBAAsB,OAAO;AAAA,IACpC,CAAC;AAAA,EACH;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAG3B,SAAK,iBAAiB,WAAW;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,sBAAsB,SAA4B;AAChD,SAAK,iBAAiB,WAAW;AAEjC,SAAK,UAAU,WAAW,SAAS,cAAc,cAAc;AAC/D,QAAI,KAAK,SAAS;AAGhB,WAAK,+BAA+B;AACpC,WAAK,iBAAiB,QAAQ,KAAK,SAAS,EAAE,iBAAiB,CAAC,QAAQ,MAAM,GAAG,YAAY,KAAK,CAAC;AAAA,IACrG;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,gBAAgB,KAAK,kBAAkB,KAAK,YAAY;AAC9D,UAAM,iBAAiB,KAAK,eAAe;AAC3C,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,2BAA2B;AAAA,MAC3B,0BAA0B;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAME,iBACI;AAAA;AAAA,iCAEiB,KAAK,SAAS,KAAK,KAAK,eAAe,WAAW,aAAa,WAAW,CAAC;AAAA;AAAA,6BAE/E,KAAK,sBAAsB;AAAA;AAAA;AAAA;AAAA,sBAIlC,KAAK,eAAe,SAClB;AAAA;AAAA;AAAA;AAAA,4BAKA;AAAA;AAAA;AAAA;AAAA,yBAIC;AAAA;AAAA,oBAGT,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAUF,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAexB;AACF;AAvLqB,UACZ,SAAyB;AAAA,EAC9B;AAAA,EACA;AACF;AAJmB,UAMZ,eAAe;AAAA,EACpB,YAAY;AACd;AAcY;AAAA,EAAX,SAAS;AAAA,GAtBS,UAsBP;AAU2C;AAAA,EAAtD,SAAS,EAAE,WAAW,eAAe,SAAS,KAAK,CAAC;AAAA,GAhClC,UAgCoC;AAKtC;AAAA,EAAhB,MAAM;AAAA,GArCY,UAqCF;AAkCjB;AAAA,EADC,MAAM,cAAc,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAtEhC,UAuEnB;",
   "names": []
 }

package/dist/chunks/{chunk.FCKLOSX3.js → chunk.7ZKVKYRE.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.SGLHH44G.js";
+} from "./chunk.NAHE2AWQ.js";
 
 // src/components/prio-nav/prio-nav.ts
 var prio_nav_default = SynPrioNav;
@@ -9,4 +9,4 @@ SynPrioNav.define("syn-prio-nav");
 export {
   prio_nav_default
 };
-//# sourceMappingURL=chunk.FCKLOSX3.js.map
+//# sourceMappingURL=chunk.7ZKVKYRE.js.map

package/dist/chunks/{chunk.HFHMYT62.js → chunk.7ZS3IRSM.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.7DGSPEGG.js";
+} from "./chunk.5BYHQ76J.js";
 import {
   FormControlController,
   validValidityState
@@ -17,7 +17,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.FZCXY6IO.js";
+} from "./chunk.PK3GNIMV.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -289,4 +289,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.HFHMYT62.js.map
+//# sourceMappingURL=chunk.7ZS3IRSM.js.map

package/dist/chunks/{chunk.WZXZ4FC5.js → chunk.ADTS64AI.js}

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.5AHNBYLY.js";
+} from "./chunk.6OWPHF3O.js";
 
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.WZXZ4FC5.js.map
+//# sourceMappingURL=chunk.ADTS64AI.js.map

package/dist/chunks/{chunk.VQ6YKGNL.js → chunk.B6WI7PKT.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.CZMCFLBO.js";
+} from "./chunk.C2V3QSNV.js";
 import {
   select_styles_default
 } from "./chunk.XTWO6ZZW.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.B6HFSIU2.js";
 import {
   SynPopup
-} from "./chunk.VPWCODUY.js";
+} from "./chunk.DOGF6H73.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.FZCXY6IO.js";
+} from "./chunk.PK3GNIMV.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -48,7 +48,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -804,4 +804,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.VQ6YKGNL.js.map
+//# sourceMappingURL=chunk.B6WI7PKT.js.map

package/dist/chunks/{chunk.PVFMNJOZ.js → chunk.BEN5FJNP.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.4B3O52DQ.js";
+} from "./chunk.NOZCGRZB.js";
 
 // src/components/tab-panel/tab-panel.ts
 var tab_panel_default = SynTabPanel;
@@ -9,4 +9,4 @@ SynTabPanel.define("syn-tab-panel");
 export {
   tab_panel_default
 };
-//# sourceMappingURL=chunk.PVFMNJOZ.js.map
+//# sourceMappingURL=chunk.BEN5FJNP.js.map

package/dist/chunks/{chunk.VUHFOAIQ.js → chunk.BJIWJOZJ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FXRJHEKQ.js";
+} from "./chunk.G52UIX7A.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.VUHFOAIQ.js.map
+//# sourceMappingURL=chunk.BJIWJOZJ.js.map