@synergy-design-system/components 1.9.0 → 1.10.0

package/dist/chunks/{chunk.AJU6C4KC.js → chunk.2ZSYEFTP.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.BGKFRWWO.js";
+} from "./chunk.3RA2P64H.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.AJU6C4KC.js.map
+//# sourceMappingURL=chunk.2ZSYEFTP.js.map

package/dist/chunks/{chunk.Y72MIUNI.js → chunk.3B2AQAU2.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.5R3OVMH2.js";
+} from "./chunk.GQY3KJDK.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.Y72MIUNI.js.map
+//# sourceMappingURL=chunk.3B2AQAU2.js.map

package/dist/chunks/{chunk.WC5SV4TV.js → chunk.3DUJKCD2.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.TTL762VF.js";
 import {
   SynDivider
-} from "./chunk.XEI5ZP7Y.js";
+} from "./chunk.SHI4PSGX.js";
 import {
   LocalizeController
 } from "./chunk.LAB4YJYE.js";
@@ -25,14 +25,14 @@ import {
 } from "./chunk.XGXFE6IF.js";
 import {
   SynIcon
-} from "./chunk.PWMSNMDF.js";
+} from "./chunk.NII3J5OF.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass,
   __spreadValues
@@ -643,4 +643,4 @@ __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.WC5SV4TV.js.map
+//# sourceMappingURL=chunk.3DUJKCD2.js.map

package/dist/chunks/{chunk.BGKFRWWO.js → chunk.3RA2P64H.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KG52EHDB.js";
 import {
   SynDivider
-} from "./chunk.XEI5ZP7Y.js";
+} from "./chunk.SHI4PSGX.js";
 import {
   HasSlotController
 } from "./chunk.XGXFE6IF.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.BGKFRWWO.js.map
+//# sourceMappingURL=chunk.3RA2P64H.js.map

package/dist/chunks/{chunk.HF75YRVS.js → chunk.67GSZBK7.js}

@@ -1,9 +1,9 @@
-import {
-  textarea_styles_default
-} from "./chunk.2EI3TNL7.js";
 import {
   textarea_custom_styles_default
 } from "./chunk.YBIBWRKC.js";
+import {
+  textarea_styles_default
+} from "./chunk.2EI3TNL7.js";
 import {
   defaultValue
 } from "./chunk.WFAJR3FN.js";
@@ -23,7 +23,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -364,4 +364,4 @@ __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.HF75YRVS.js.map
+//# sourceMappingURL=chunk.67GSZBK7.js.map

package/dist/chunks/{chunk.ZT5DUKVA.js → chunk.7HMAYWNS.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.O6AXKVFJ.js";
+} from "./chunk.DIXHBM5G.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.ZT5DUKVA.js.map
+//# sourceMappingURL=chunk.7HMAYWNS.js.map

package/dist/chunks/{chunk.5BMNRZ7L.js → chunk.7N42OBRZ.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.WC5SV4TV.js";
+} from "./chunk.3DUJKCD2.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.5BMNRZ7L.js.map
+//# sourceMappingURL=chunk.7N42OBRZ.js.map

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

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

package/dist/chunks/{chunk.MDZ22YWD.js → chunk.AYTANJEE.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.PKO6FEOM.js";
 import {
   SynIcon
-} from "./chunk.PWMSNMDF.js";
+} from "./chunk.NII3J5OF.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -112,4 +112,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.MDZ22YWD.js.map
+//# sourceMappingURL=chunk.AYTANJEE.js.map

package/dist/chunks/{chunk.GAPQVJGQ.js → chunk.BF2Z2XBN.js}

@@ -22,11 +22,11 @@ import {
 } from "./chunk.AVTU2BGE.js";
 import {
   SynButtonGroup
-} from "./chunk.6MS3WNDW.js";
+} from "./chunk.TGVTAWOV.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -356,4 +356,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.GAPQVJGQ.js.map
+//# sourceMappingURL=chunk.BF2Z2XBN.js.map

package/dist/chunks/{chunk.3O5WTWSN.js → chunk.BI7J7YNX.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.BLOH2ZNU.js";
+} from "./chunk.QF4AQCX3.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.3O5WTWSN.js.map
+//# sourceMappingURL=chunk.BI7J7YNX.js.map

package/dist/chunks/{chunk.BTZX6ZFZ.js → chunk.BOO4VTHX.js}

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

package/dist/chunks/{chunk.K3O2PP7X.js → chunk.CBR46SD4.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.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.K3O2PP7X.js.map
+//# sourceMappingURL=chunk.CBR46SD4.js.map

package/dist/chunks/chunk.CJZHKDBQ.js

@@ -0,0 +1,12 @@
+import {
+  SynHeader
+} from "./chunk.JMP6V7XJ.js";
+
+// src/components/header/header.ts
+var header_default = SynHeader;
+SynHeader.define("syn-header");
+
+export {
+  header_default
+};
+//# sourceMappingURL=chunk.CJZHKDBQ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/header/header.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynHeader from './header.component.js';\n\nexport * from './header.component.js';\nexport default SynHeader;\n\nSynHeader.define('syn-header');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-header': SynHeader;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,iBAAQ;AAEf,UAAU,OAAO,YAAY;",
+  "names": []
+}

package/dist/chunks/{chunk.O6AXKVFJ.js → chunk.DIXHBM5G.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.LJQ7LEPV.js";
 import {
   SynIcon
-} from "./chunk.PWMSNMDF.js";
+} from "./chunk.NII3J5OF.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -138,4 +138,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.O6AXKVFJ.js.map
+//# sourceMappingURL=chunk.DIXHBM5G.js.map

package/dist/chunks/{chunk.LF2XSSHD.js → chunk.FAKWK5NS.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.XEI5ZP7Y.js";
+} from "./chunk.SHI4PSGX.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.LF2XSSHD.js.map
+//# sourceMappingURL=chunk.FAKWK5NS.js.map

package/dist/chunks/{chunk.5R3OVMH2.js → chunk.GQY3KJDK.js}

@@ -9,14 +9,14 @@ import {
 } from "./chunk.LAB4YJYE.js";
 import {
   SynIcon
-} from "./chunk.PWMSNMDF.js";
+} from "./chunk.NII3J5OF.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -144,4 +144,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.5R3OVMH2.js.map
+//# sourceMappingURL=chunk.GQY3KJDK.js.map

package/dist/chunks/{chunk.PRZRH7SN.js → chunk.H5ZKCFYO.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.KNXO2FGQ.js";
+} from "./chunk.MZBIDOMW.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.PRZRH7SN.js.map
+//# sourceMappingURL=chunk.H5ZKCFYO.js.map

package/dist/chunks/{chunk.KDDTDU4B.js → chunk.HELY6MCO.js}

@@ -1,9 +1,9 @@
-import {
-  switch_styles_default
-} from "./chunk.ADRKUQGR.js";
 import {
   switch_custom_styles_default
 } from "./chunk.W5JK7V7K.js";
+import {
+  switch_styles_default
+} from "./chunk.ADRKUQGR.js";
 import {
   defaultValue
 } from "./chunk.WFAJR3FN.js";
@@ -23,7 +23,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -247,4 +247,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.KDDTDU4B.js.map
+//# sourceMappingURL=chunk.HELY6MCO.js.map

package/dist/chunks/{chunk.IOPUYG6Q.js → chunk.HUHPPFDX.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.GAPQVJGQ.js";
+} from "./chunk.BF2Z2XBN.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.IOPUYG6Q.js.map
+//# sourceMappingURL=chunk.HUHPPFDX.js.map

package/dist/chunks/chunk.JDXKGJ63.js

@@ -0,0 +1,99 @@
+// src/components/header/header.styles.ts
+import { css } from "lit";
+var header_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  .header {
+    background: var(--syn-color-neutral-0);
+    box-shadow: inset 0 -1px 0 0 var(--syn-color-neutral-400);
+  }
+
+  /**
+   * The primary content area displays one to many slotted items
+   * and contains the following items:
+   * - side nav state icon (OPTIONAL)
+   * - company or application logo
+   * - application name
+   * - meta-navigation
+   */
+  .header__content {
+    align-items: center;
+    box-sizing: content-box;
+    display: flex;
+    min-height: 40px;
+    padding: var(--syn-spacing-large);
+  }
+
+  /**
+   * If the primary navigation is provided, use a smaller spacing
+   * between the primary content area and the navigation area
+   */
+  .header--has-navigation .header__content {
+    padding-bottom: var(--syn-spacing-medium);
+  }
+
+  /**
+   * The logo slot includes the application or company logo
+   */
+  .header__logo ::slotted(*),
+  .header__logo syn-icon {
+    display: block;
+  }
+
+  /**
+   * Make sure to use the correct color and outline for links
+   */
+  .header__logo ::slotted(a),
+  .header__logo ::slotted(a:hover) {
+    color: var(--syn-color-primary-600);
+  }
+
+  .header__logo ::slotted(a:is(:focus-visible)) {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /**
+   * Styles for the default logo. This makes sure the default SICK logo has the correct size and color
+   */
+  .header__logo syn-icon,
+  .header__logo syn-icon::part(svg) {
+    color: var(--syn-color-primary-600);
+    height: 32px;
+    width: auto;
+  }
+
+  /**
+   * The label section hosts the application name
+   */
+  .header__label {
+    font: var(--syn-body-large-bold);
+    padding: 0 var(--syn-spacing-2x-large);
+  }
+
+  /**
+   * The options menu holds an arbitary list of <syn-icon-button />
+   */
+  .header__meta-navigation {
+    display: flex;
+    flex: 1;
+    gap: var(--syn-spacing-x-small);
+    justify-content: end;
+  }
+
+  .header__meta-navigation ::slotted(*) {
+    display: contents;
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  .header__navigation {
+    padding: 0 var(--syn-spacing-large);
+  }
+`;
+
+export {
+  header_styles_default
+};
+//# sourceMappingURL=chunk.JDXKGJ63.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

package/dist/chunks/chunk.JMP6V7XJ.js

@@ -0,0 +1,80 @@
+import {
+  icon_default
+} from "./chunk.BOO4VTHX.js";
+import {
+  header_styles_default
+} from "./chunk.JDXKGJ63.js";
+import {
+  HasSlotController
+} from "./chunk.XGXFE6IF.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.XVNL6NRN.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 } from "lit/decorators.js";
+var SynHeader = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "logo", "label", "meta-navigation", "navigation");
+    this.label = "";
+  }
+  render() {
+    const hasNavigation = this.hasSlotController.test("navigation");
+    return html`
+      <header
+        class=${classMap({
+      header: true,
+      "header--has-navigation": hasNavigation
+    })}
+        part="base"
+      >
+        <!-- .header__content -->
+        <div part="content" class="header__content">
+
+          <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);
+
+export {
+  SynHeader
+};
+//# sourceMappingURL=chunk.JMP6V7XJ.js.map

package/dist/chunks/chunk.JMP6V7XJ.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 } 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';\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 *\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 */\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  /**\n   * The headers label. If you need to display HTML, use the `label` slot instead.\n   */\n  @property() label = '';\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-navigation': hasNavigation,\n        })}\n        part=\"base\"\n      >\n        <!-- .header__content -->\n        <div part=\"content\" class=\"header__content\">\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": ";;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AA6BzB,IAAqB,YAArB,cAAuC,eAAe;AAAA,EAAtD;AAAA;AAUE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,QAAQ,SAAS,mBAAmB,YAAY;AAKlH,iBAAQ;AAAA;AAAA,EAEpB,SAAS;AACP,UAAM,gBAAgB,KAAK,kBAAkB,KAAK,YAAY;AAE9D,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,0BAA0B;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAcM,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAexB;AACF;AAvDqB,UACZ,SAAyB;AAAA,EAC9B;AAAA,EACA;AACF;AAJmB,UAMZ,eAAe;AAAA,EACpB,YAAY;AACd;AAOY;AAAA,EAAX,SAAS;AAAA,GAfS,UAeP;",
+  "names": []
+}

package/dist/chunks/{chunk.F4THECWA.js → chunk.JORZ3DML.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.6MS3WNDW.js";
+} from "./chunk.TGVTAWOV.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.F4THECWA.js.map
+//# sourceMappingURL=chunk.JORZ3DML.js.map

package/dist/chunks/{chunk.5CB3CVZ7.js → chunk.LIRQO322.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.GBOII6N4.js";
+} from "./chunk.WUFFQJJF.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.5CB3CVZ7.js.map
+//# sourceMappingURL=chunk.LIRQO322.js.map

package/dist/chunks/{chunk.FUNZW7ES.js → chunk.M6D7QVXC.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.MDZ22YWD.js";
+} from "./chunk.AYTANJEE.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.FUNZW7ES.js.map
+//# sourceMappingURL=chunk.M6D7QVXC.js.map

package/dist/chunks/{chunk.KNXO2FGQ.js → chunk.MZBIDOMW.js}

@@ -19,14 +19,14 @@ import {
 } from "./chunk.XGXFE6IF.js";
 import {
   SynIcon
-} from "./chunk.PWMSNMDF.js";
+} from "./chunk.NII3J5OF.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3DE5ARIC.js";
+} from "./chunk.XVNL6NRN.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -259,4 +259,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.KNXO2FGQ.js.map
+//# sourceMappingURL=chunk.MZBIDOMW.js.map