@duetds/components 8.0.6 → 8.1.1

package/lib/collection/components/duet-header/duet-header.js

@@ -12,16 +12,16 @@ import { Build, Fragment, h, Host, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
 import { DuetHeaderIcon } from "./duet-header-icon";
 const createEvent = (ev, data) => ({
-  component: "duet-header",
-  data,
-  originalEvent: ev,
+    component: "duet-header",
+    data,
+    originalEvent: ev,
 });
 /**
  * @slot utility - A slot for utilities, such as a notification drawer or shopping basket.
@@ -29,1327 +29,1331 @@ const createEvent = (ev, data) => ({
  * @part header - piercing selector for styling the header element.
  */
 export class DuetHeader {
-  constructor() {
-    var _a;
-    /**
-     * Own Properties
-     */
-    this.subMenuItemRefs = {};
-    this.subMenuButtonRefs = {};
-    this.hasLanguageChanged = false;
-    this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-    this.boundMqlFunctions = [];
-    this.handleClick = (event, moveFocusToButton = false) => {
-      if (event.data.analyticsId) {
-        this.duetAnalytics.emit({
-          component: "duet-header",
-          analyticsId: event.data.analyticsId,
-        });
-      }
-      this.duetChange.emit(event);
-      this.closeMenus(moveFocusToButton);
-      this.closeMobileNavigation(moveFocusToButton);
-    };
-    this.handleSessionClick = (ev) => {
-      const e = createEvent(ev, this.processedSession);
-      this.handleClick(e);
-      this.duetSessionClick.emit(e);
-    };
-    this.handleSessionItemClick = (ev, item) => {
-      const e = createEvent(ev, item);
-      this.handleClick(e);
-      this.duetSessionClick.emit(e);
-    };
-    this.handleSearchClick = (ev) => {
-      const e = createEvent(ev, this.processedSearch);
-      this.handleClick(e);
-      this.duetSearchClick.emit(e);
-    };
-    this.handleUserClick = (ev) => {
-      const e = createEvent(ev, this.processedUser);
-      this.handleClick(e);
-      this.duetUserClick.emit(e);
-    };
-    this.handleBackClick = (ev) => {
-      const e = createEvent(ev, this.processedBack);
-      this.handleClick(e);
-      this.duetBackClick.emit(e);
-    };
-    this.handleSkipClick = (ev) => {
-      const { skipLabel } = this.accessibleI18nLabels;
-      const e = createEvent(ev, { href: this.skipToId, label: skipLabel });
-      this.handleClick(e);
-      this.duetSkipClick.emit(e);
-    };
-    this.handleLogoClick = (ev) => {
-      const e = createEvent(ev, { href: this.logoHref, label: "logo" });
-      this.handleClick(e);
-      this.duetLogoClick.emit(e);
-    };
-    this.handleArrowKeys = ev => {
-      let button;
-      if (isArrowLeftKey(ev) || isArrowUpKey(ev)) {
-        button = ev.target.previousElementSibling;
-      }
-      else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
-        button = ev.target.nextElementSibling;
-      }
-      if (button) {
-        ev.preventDefault();
-        button.focus();
-      }
-    };
-    this.toggleMenu = (ev, type, id, active) => {
-      let el;
-      ev.preventDefault();
-      ev.stopPropagation();
-      if (active === true && !this.openMenu) {
-        const closedActives = this.closedActives ? [...this.closedActives] : [];
-        const index = closedActives.findIndex(i => i === id);
-        if (index > -1) {
-          closedActives.splice(index, 1);
-          this.closedActives = [...closedActives];
-        }
-        else {
-          this.closedActives = [...closedActives, id];
-        }
-      }
-      else {
-        this.openMenu = this.openMenu === id ? null : id;
-      }
-      // For language menu
-      if (type === "language") {
-        this.isContactOpen = false;
-        this.isLanguageOpen = !this.isLanguageOpen;
-        this.isSegmentOpen = false;
-        this.isSessionOpen = false;
-        el = this.languageItemsEl;
-      }
-      // For session menu
-      if (type === "session") {
-        this.isContactOpen = false;
-        this.isLanguageOpen = false;
-        this.isSegmentOpen = false;
-        this.isSessionOpen = !this.isSessionOpen;
-        el = this.sessionItemsEl;
-      }
-      // For contact menu
-      else if (type === "contact") {
-        this.isLanguageOpen = false;
-        this.isContactOpen = !this.isContactOpen;
-        this.isSegmentOpen = false;
-        this.isSessionOpen = false;
-        el = this.contactItemsEl;
-      }
-      // For mobile menu
-      else if (type === "mobile") {
+    constructor() {
+        var _a;
+        /**
+         * Own Properties
+         */
+        this.subMenuItemRefs = {};
+        this.subMenuButtonRefs = {};
+        this.hasLanguageChanged = false;
+        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+        this.boundMqlFunctions = [];
+        this.handleClick = (event, moveFocusToButton = false) => {
+            if (event.data.analyticsId) {
+                this.duetAnalytics.emit({
+                    component: "duet-header",
+                    analyticsId: event.data.analyticsId,
+                });
+            }
+            this.duetChange.emit(event);
+            this.closeMenus(moveFocusToButton);
+            this.closeMobileNavigation(moveFocusToButton);
+        };
+        this.handleSessionClick = (ev) => {
+            const e = createEvent(ev, this.processedSession);
+            this.handleClick(e);
+            this.duetSessionClick.emit(e);
+        };
+        this.handleSessionItemClick = (ev, item) => {
+            const e = createEvent(ev, item);
+            this.handleClick(e);
+            this.duetSessionClick.emit(e);
+        };
+        this.handleSearchClick = (ev) => {
+            const e = createEvent(ev, this.processedSearch);
+            this.handleClick(e);
+            this.duetSearchClick.emit(e);
+        };
+        this.handleUserClick = (ev) => {
+            const e = createEvent(ev, this.processedUser);
+            this.handleClick(e);
+            this.duetUserClick.emit(e);
+        };
+        this.handleBackClick = (ev) => {
+            const e = createEvent(ev, this.processedBack);
+            this.handleClick(e);
+            this.duetBackClick.emit(e);
+        };
+        this.handleSkipClick = (ev) => {
+            const { skipLabel } = this.accessibleI18nLabels;
+            const e = createEvent(ev, { href: this.skipToId, label: skipLabel });
+            this.handleClick(e);
+            this.duetSkipClick.emit(e);
+        };
+        this.handleLogoClick = (ev) => {
+            const e = createEvent(ev, { href: this.logoHref, label: "logo" });
+            this.handleClick(e);
+            this.duetLogoClick.emit(e);
+        };
+        this.handleArrowKeys = ev => {
+            let button;
+            if (isArrowLeftKey(ev) || isArrowUpKey(ev)) {
+                button = ev.target.previousElementSibling;
+            }
+            else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
+                button = ev.target.nextElementSibling;
+            }
+            if (button) {
+                ev.preventDefault();
+                button.focus();
+            }
+        };
+        this.toggleMenu = (ev, type, id, active) => {
+            let el;
+            ev.preventDefault();
+            ev.stopPropagation();
+            if (active === true && !this.openMenu) {
+                const closedActives = this.closedActives ? [...this.closedActives] : [];
+                const index = closedActives.findIndex(i => i === id);
+                if (index > -1) {
+                    closedActives.splice(index, 1);
+                    this.closedActives = [...closedActives];
+                }
+                else {
+                    this.closedActives = [...closedActives, id];
+                }
+            }
+            else {
+                this.openMenu = this.openMenu === id ? null : id;
+            }
+            // For language menu
+            if (type === "language") {
+                this.isContactOpen = false;
+                this.isLanguageOpen = !this.isLanguageOpen;
+                this.isSegmentOpen = false;
+                this.isSessionOpen = false;
+                el = this.languageItemsEl;
+            }
+            // For session menu
+            if (type === "session") {
+                this.isContactOpen = false;
+                this.isLanguageOpen = false;
+                this.isSegmentOpen = false;
+                this.isSessionOpen = !this.isSessionOpen;
+                el = this.sessionItemsEl;
+            }
+            // For contact menu
+            else if (type === "contact") {
+                this.isLanguageOpen = false;
+                this.isContactOpen = !this.isContactOpen;
+                this.isSegmentOpen = false;
+                this.isSessionOpen = false;
+                el = this.contactItemsEl;
+            }
+            // For mobile menu
+            else if (type === "mobile") {
+                this.isContactOpen = false;
+                this.isLanguageOpen = false;
+                this.isSegmentOpen = false;
+                this.isSessionOpen = false;
+                el = this.navigationEl;
+                const toggle = !this.isSlideOutOpen;
+                this.isSlideOutOpen = toggle;
+                this.duetMobileNavToggle.emit({ originalEvent: ev, open: toggle });
+                if (this.isSlideOutOpen) {
+                    disableBodyScroll(this.navigationEl, { reserveScrollBarGap: true });
+                }
+                else {
+                    enableBodyScroll(this.navigationEl);
+                }
+            }
+            else if (type === "sub") {
+                this.isContactOpen = false;
+                this.isLanguageOpen = false;
+                this.isSegmentOpen = false;
+                this.isSessionOpen = false;
+                el = this.subMenuItemRefs[id];
+            }
+            else if (type === "segment") {
+                this.isContactOpen = false;
+                this.isLanguageOpen = false;
+                this.isSessionOpen = false;
+                this.isSegmentOpen = !this.isSegmentOpen;
+                el = this.segmentItemsEl;
+            }
+            if (this.isSlideOutOpen ||
+                this.isLanguageOpen ||
+                this.isContactOpen ||
+                this.isSegmentOpen ||
+                this.isSessionOpen ||
+                this.openMenu) {
+                const drawer = this.element.querySelector("duet-notification-drawer");
+                if (drawer) {
+                    drawer.close(false);
+                }
+                // Focus in the new menu when opened to make them more accessible
+                setTimeout(() => {
+                    el.querySelector("a").focus();
+                }, 300);
+            }
+        };
+        this.emitDuetEvent = (ev, data) => {
+            this.duetEvent.emit({
+                component: "duet-header",
+                data,
+                originalEvent: ev,
+            });
+        };
         this.isContactOpen = false;
         this.isLanguageOpen = false;
-        this.isSegmentOpen = false;
         this.isSessionOpen = false;
-        el = this.navigationEl;
-        const toggle = !this.isSlideOutOpen;
-        this.isSlideOutOpen = toggle;
-        this.duetMobileNavToggle.emit({ originalEvent: ev, open: toggle });
-        if (this.isSlideOutOpen) {
-          disableBodyScroll(this.navigationEl, { reserveScrollBarGap: true });
-        }
-        else {
-          enableBodyScroll(this.navigationEl);
-        }
-      }
-      else if (type === "sub") {
-        this.isContactOpen = false;
-        this.isLanguageOpen = false;
+        this.isSlideOutOpen = false;
         this.isSegmentOpen = false;
-        this.isSessionOpen = false;
-        el = this.subMenuItemRefs[id];
-      }
-      else if (type === "segment") {
-        this.isContactOpen = false;
-        this.isLanguageOpen = false;
-        this.isSessionOpen = false;
-        this.isSegmentOpen = !this.isSegmentOpen;
-        el = this.segmentItemsEl;
-      }
-      if (this.isSlideOutOpen ||
-        this.isLanguageOpen ||
-        this.isContactOpen ||
-        this.isSegmentOpen ||
-        this.isSessionOpen ||
-        this.openMenu) {
-        const drawer = this.element.querySelector("duet-notification-drawer");
-        if (drawer) {
-          drawer.close(false);
-        }
-        // Focus in the new menu when opened to make them more accessible
-        setTimeout(() => {
-          el.querySelector("a").focus();
-        }, 300);
-      }
-    };
-    this.emitDuetEvent = (ev, data) => {
-      this.duetEvent.emit({
-        component: "duet-header",
-        data,
-        originalEvent: ev,
-      });
-    };
-    this.isContactOpen = false;
-    this.isLanguageOpen = false;
-    this.isSessionOpen = false;
-    this.isSlideOutOpen = false;
-    this.isSegmentOpen = false;
-    this.openMenu = null;
-    this.closedActives = null;
-    this.processedItems = null;
-    this.processedLanguageItems = null;
-    this.processedContactItems = null;
-    this.processedSession = null;
-    this.processedSearch = null;
-    this.processedUser = null;
-    this.processedBack = null;
-    this.renderDesktopNav = Build.isServer ? true : (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
-    this.theme = "";
-    this.language = getLanguage();
-    this.accessibleI18nLabelsDefaults = {
-      fi: {
-        skipLabel: "Siirry pääsisältöön",
-        changeLanguage: "Vaihda kieltä",
-        activeLanguage: "Suomi valittuna",
-      },
-      sv: {
-        skipLabel: "Gå till huvudinnehåll",
-        changeLanguage: "Ändra Språk",
-        activeLanguage: "Svenska valt",
-      },
-      en: {
-        skipLabel: "Skip to main content",
-        changeLanguage: "Change language",
-        activeLanguage: "English selected",
-      },
-    };
-    this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefaults);
-    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-    this.accessibleLabelDefaults = {
-      fi: "Valikko",
-      sv: "Meny",
-      en: "Menu",
-    };
-    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
-    this.user = undefined;
-    this.logoHref = "/";
-    this.currentHref = "/";
-    this.skipToId = "";
-    this.items = undefined;
-    this.region = "";
-    this.session = undefined;
-    this.search = undefined;
-    this.back = undefined;
-    this.contact = "";
-    this.contactItems = undefined;
-    this.languageItems = undefined;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.refresh();
-  }
-  connectedCallback() {
-    for (let i = 0; i < this.mql.length; i++) {
-      // addEventListener is not available in Stencil hydrate
-      if (this.mql[i].addEventListener) {
-        const bound = this.refresh.bind(this);
-        this.mql[i].addEventListener("change", bound);
-        this.boundMqlFunctions[i] = bound;
-      }
-    }
-    connectLanguageChangeObserver(this, [
-      { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" },
-      { prop: "accessibleI18nLabels", defaults: "accessibleI18nLabelsDefaults" },
-      { prop: "accessibleLabelExternal", defaults: "accessibleLabelExternalDefaults" },
-    ]);
-  }
-  disconnectedCallback() {
-    if (this.navigationEl) {
-      enableBodyScroll(this.navigationEl);
-    }
-    for (let i = 0; i < this.mql.length; i++) {
-      // addEventListener is not available in Stencil hydrate
-      if (this.mql[i].removeEventListener) {
-        this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-      }
+        this.openMenu = null;
+        this.closedActives = null;
+        this.processedItems = null;
+        this.processedLanguageItems = null;
+        this.processedContactItems = null;
+        this.processedSession = null;
+        this.processedSearch = null;
+        this.processedUser = null;
+        this.processedBack = null;
+        this.renderDesktopNav = Build.isServer ? true : (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
+        this.theme = "";
+        this.language = getLanguage();
+        this.accessibleI18nLabelsDefaults = {
+            fi: {
+                skipLabel: "Siirry pääsisältöön",
+                changeLanguage: "Vaihda kieltä",
+                activeLanguage: "Suomi valittuna",
+            },
+            sv: {
+                skipLabel: "Gå till huvudinnehåll",
+                changeLanguage: "Ändra Språk",
+                activeLanguage: "Svenska valt",
+            },
+            en: {
+                skipLabel: "Skip to main content",
+                changeLanguage: "Change language",
+                activeLanguage: "English selected",
+            },
+        };
+        this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefaults);
+        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        this.accessibleLabelDefaults = {
+            fi: "Valikko",
+            sv: "Meny",
+            en: "Menu",
+        };
+        this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+        this.user = undefined;
+        this.logoHref = "/";
+        this.currentHref = "/";
+        this.skipToId = "";
+        this.items = undefined;
+        this.region = "";
+        this.session = undefined;
+        this.search = undefined;
+        this.back = undefined;
+        this.contact = "";
+        this.contactItems = undefined;
+        this.languageItems = undefined;
     }
-    this.boundMqlFunctions = [];
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Component event handling.
-   */
-  handleKeyUp(ev) {
-    // When Esc is pressed
-    if (isEscapeKey(ev)) {
-      this.closeMenus(true);
-      this.closeMobileNavigation(true);
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.refresh();
     }
-  }
-  handleKeyDown(ev) {
-    if (this.isContactOpen || this.isLanguageOpen || this.isSegmentOpen) {
-      const activeElement = this.element.shadowRoot.activeElement;
-      // When Space is pressed
-      if (isSpaceKey(ev) && activeElement) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        if (this.isContactOpen) {
-          this.closeMenus();
+    connectedCallback() {
+        for (let i = 0; i < this.mql.length; i++) {
+            // addEventListener is not available in Stencil hydrate
+            if (this.mql[i].addEventListener) {
+                const bound = this.refresh.bind(this);
+                this.mql[i].addEventListener("change", bound);
+                this.boundMqlFunctions[i] = bound;
+            }
         }
-        else if (this.isLanguageOpen) {
-          this.closeMenus(true);
+        connectLanguageChangeObserver(this, [
+            { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" },
+            { prop: "accessibleI18nLabels", defaults: "accessibleI18nLabelsDefaults" },
+            { prop: "accessibleLabelExternal", defaults: "accessibleLabelExternalDefaults" },
+        ]);
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        if (this.navigationEl) {
+            enableBodyScroll(this.navigationEl);
         }
-        else if (this.isSegmentOpen) {
-          this.closeMenus();
+        for (let i = 0; i < this.mql.length; i++) {
+            // addEventListener is not available in Stencil hydrate
+            if (this.mql[i].removeEventListener) {
+                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+            }
         }
-        else if (this.openMenu) {
-          this.closeMenus();
+        this.boundMqlFunctions = [];
+        disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
+    }
+    /**
+     * Component event handling.
+     */
+    handleKeyUp(ev) {
+        // When Esc is pressed
+        if (isEscapeKey(ev)) {
+            this.closeMenus(true);
+            this.closeMobileNavigation(true);
         }
-        activeElement.click();
-      }
     }
-  }
-  handleDocumentClick() {
-    this.closeMenus();
-    this.closeMobileNavigation();
-  }
-  handleLanguageClick(ev, data) {
-    this.language = data.country;
-    this.hasLanguageChanged = true;
-    const e = createEvent(ev, data);
-    this.handleClick(e, true);
-    this.duetLanguageSelect.emit(e);
-  }
-  handleContactClick(ev, data) {
-    const e = createEvent(ev, data);
-    this.handleClick(e);
-    this.duetContactClick.emit(e);
-  }
-  handleItemClick(ev, data) {
-    const e = createEvent(ev, data);
-    this.handleClick(e);
-    this.duetItemClick.emit(e);
-  }
-  /**
-   * Local methods.
-   */
-  async refresh() {
-    var _a, _b;
-    if (this.renderDesktopNav !== Build.isServer ? true : (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches) {
-      this.renderDesktopNav = Build.isServer ? true : (_b = this.mql[0]) === null || _b === void 0 ? void 0 : _b.matches;
-      this.openMenu = null;
-      if (this.isSlideOutOpen) {
-        this.toggleMenu(document.createEvent("UIEvents"), "mobile");
-      }
+    handleKeyDown(ev) {
+        if (this.isContactOpen || this.isLanguageOpen || this.isSegmentOpen) {
+            const activeElement = this.element.shadowRoot.activeElement;
+            // When Space is pressed
+            if (isSpaceKey(ev) && activeElement) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                if (this.isContactOpen) {
+                    this.closeMenus();
+                }
+                else if (this.isLanguageOpen) {
+                    this.closeMenus(true);
+                }
+                else if (this.isSegmentOpen) {
+                    this.closeMenus();
+                }
+                else if (this.openMenu) {
+                    this.closeMenus();
+                }
+                activeElement.click();
+            }
+        }
     }
-    this.processedItems = parsePossibleJSON(this.items);
-    this.processedLanguageItems = parsePossibleJSON(this.languageItems);
-    this.processedContactItems = parsePossibleJSON(this.contactItems);
-    this.processedSession = parsePossibleJSON(this.session);
-    this.processedSearch = parsePossibleJSON(this.search);
-    this.processedUser = parsePossibleJSON(this.user);
-    this.processedBack = parsePossibleJSON(this.back);
-  }
-  /**
-   * Closes mobile menu in header when called.
-   */
-  async closeMobileNavigation(moveFocusToButton = false) {
-    if (this.isSlideOutOpen) {
-      this.isSlideOutOpen = false;
-      enableBodyScroll(this.navigationEl);
-      if (moveFocusToButton) {
-        this.navigationElButton.focus({
-          preventScroll: true,
-        });
-      }
+    handleDocumentClick() {
+        this.closeMenus();
+        this.closeMobileNavigation();
     }
-  }
-  /**
-   * Closes all dropdown menus in header when called.
-   */
-  async closeMenus(moveFocusToButton = false) {
-    if (this.isContactOpen || this.isLanguageOpen || this.isSegmentOpen || this.isSessionOpen || this.openMenu) {
-      if (this.isContactOpen && moveFocusToButton) {
-        this.contactItemsButtonEl.focus({
-          preventScroll: true,
-        });
-      }
-      if (this.isLanguageOpen && moveFocusToButton) {
-        this.languageItemsButtonEl.focus({
-          preventScroll: true,
-        });
-      }
-      if (this.isSegmentOpen && moveFocusToButton) {
-        this.segmentItemsButtonEl.focus({
-          preventScroll: true,
-        });
-      }
-      if (this.isSessionOpen && moveFocusToButton) {
-        this.sessionItemsButtonEl.focus({
-          preventScroll: true,
-        });
-      }
-      if (this.openMenu && moveFocusToButton) {
-        this.subMenuButtonRefs[this.openMenu].focus({
-          preventScroll: true,
-        });
-      }
-      this.isContactOpen = false;
-      this.isLanguageOpen = false;
-      this.isSegmentOpen = false;
-      this.isSessionOpen = false;
-      this.openMenu = null;
+    handleLanguageClick(ev, data) {
+        this.language = data.country;
+        this.hasLanguageChanged = true;
+        const e = createEvent(ev, data);
+        this.handleClick(e, true);
+        this.duetLanguageSelect.emit(e);
     }
-  }
-  /**
-   * Sets focus on the specified `duet-header`. Use this method instead of the global
-   * `header.focus()`.
-   */
-  async setFocus(options) {
-    this.logoEl.setFocus(options);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const { skipLabel, changeLanguage, activeLanguage } = this.accessibleI18nLabels;
-    const skipToLabel = () => this.skipToId ? (h("a", { href: this.skipToId, class: "duet-header-skip", onClick: this.handleSkipClick }, skipLabel)) : null;
-    const logo = () => (h("duet-logo", { href: this.logoHref, size: "medium", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
-    const largeLogo = () => (h("duet-logo", { href: this.logoHref, size: "large", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
-    const contactDropdown = () => this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" }, item.label, Build.isBrowser && item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-header-link-external" }, h("duet-icon", { name: "action-new-window-small", size: "xx-small", margin: "none", color: this.theme === "turva" ? "primary-turva" : "primary" }))))))))) : null;
-    const languageDropdown = () => this.language && this.processedLanguageItems ? (h(DuetHeaderDropdown, { id: "duet-header-language", label: this.language, icon: languageIcon.svg, accessibleText: `${changeLanguage}${this.hasLanguageChanged ? `, ${activeLanguage}` : ""}`, active: this.isLanguageOpen, isOpen: this.isLanguageOpen, badge: false, toggleRef: el => (this.languageItemsButtonEl = el), itemsRef: el => (this.languageItemsEl = el), onToggle: event => this.toggleMenu(event, "language") }, this.processedLanguageItems.map(item => (h("a", { class: { active: this.language === item.country }, "aria-selected": this.language === item.country, role: "menuitem", id: item.id, lang: item.country, href: item.href || "#", onClick: event => this.handleLanguageClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))))) : null;
-    const processedUserWithLink = () => this.processedUser && this.processedUser.href ? (h("a", { href: this.processedUser.href || "#", id: this.processedUser.id, class: "duet-header-user duet-header-button", onClick: this.handleUserClick }, h(DuetHeaderIcon, { icon: userIcon.svg }), h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
-    const processedUserWithoutLink = () => this.processedUser && !this.processedUser.href ? (h("span", { id: this.processedUser.id, class: "duet-header-user duet-header-button duet-header-no-action" }, h(DuetHeaderIcon, { icon: userIcon.svg }), h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
-    const processedSession = () => this.processedSession ? (h("a", { href: this.processedSession.href || "#", id: this.processedSession.id, class: "duet-header-logout duet-header-button", onClick: this.handleSessionClick }, h(DuetHeaderIcon, { class: "desktop", icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, iconSize: "x-small" }), h(DuetHeaderIcon, { class: "mobile", icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, iconSize: "small" }), h("span", { class: "duet-header-button-label" }, this.processedSession.label))) : null;
-    const processedSessionDropdown = () => this.processedSession && this.processedSession.sessionItems ? (h(DuetHeaderDropdown, { className: "duet-header-session", id: "duet-header-session", label: this.processedSession.label, icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, active: this.isSessionOpen, isOpen: this.isSessionOpen, badge: false, toggleRef: el => (this.sessionItemsButtonEl = el), itemsRef: el => (this.sessionItemsEl = el), onToggle: event => this.toggleMenu(event, "session") }, this.processedSession.sessionItems.map((sessionItem, index) => (h(Fragment, null, sessionItem.label && h("span", { class: "duet-header-session-label" }, sessionItem.label), h("duet-spacer", { size: "small", "aria-hidden": "true" }), sessionItem.items.map(item => (h("a", { role: "menuitem", "aria-label": sessionItem.label ? `${sessionItem.label} ${item.label}` : item.label, id: item.id, href: item.href || "#", onClick: event => this.handleSessionItemClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))), index !== this.processedSession.sessionItems.length - 1 && (h(Fragment, null, h("duet-spacer", { size: "x-small", "aria-hidden": "true" }), h("duet-divider", { margin: "none", "aria-hidden": "true" })))))))) : null;
-    const processedSearch = () => this.processedSearch ? (h("a", { href: this.processedSearch.href || "#", id: this.processedSearch.id, class: "duet-header-search duet-header-button", onClick: this.handleSearchClick }, h(DuetHeaderIcon, { icon: searchIcon.svg }), h("span", { class: "duet-header-button-label" }, this.processedSearch.label))) : null;
-    // Back variation
-    if (this.processedBack) {
-      return (h(Host, { class: "duet-header-back-variation" }, h("div", { class: "duet-header-reserved-space" }, h("header", { class: {
-          "duet-header": true,
-          "duet-theme-turva": this.theme === "turva",
-          "duet-header-back": true,
-          "duet-header-inactive": true,
-        }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), h("duet-button", { url: this.processedBack.href, id: this.processedBack.id, theme: this.theme, variation: "plain", color: this.theme === "turva" ? "secondary-turva" : "secondary", icon: "navigation-arrow-left", iconSize: "large", onClick: this.handleBackClick }, this.processedBack.label), logo(), h("slot", { name: "logo-utility" }))))));
+    handleContactClick(ev, data) {
+        const e = createEvent(ev, data);
+        this.handleClick(e);
+        this.duetContactClick.emit(e);
     }
-    const itemsHaveSubItems = this.processedItems && this.processedItems.some(item => item.items && item.items.length > 0);
-    const isSecondLevelActive = this.processedItems &&
-      this.processedItems.some(item => item.items && item.items.some(secondLevelItem => secondLevelItem.active === true));
-    const isThirdLevelActive = this.processedItems &&
-      this.processedItems.some(item => item.items &&
-        item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
-    const defaultVariationContent = (h("div", { class: {
-        "duet-header-reserved-space": true,
-        "duet-with-links": !!this.processedItems,
-        "duet-header-second-level-active": isSecondLevelActive,
-        "duet-header-third-level-active": isThirdLevelActive,
-        "duet-header-items-have-sub-items": itemsHaveSubItems,
-      } }, h("header", { class: {
-        "duet-header": true,
-        "duet-theme-turva": this.theme === "turva",
-        "duet-header-inactive": !this.processedItems,
-      }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), logo(), h("slot", { name: "logo-utility" }, this.region && h("div", { class: "duet-header-region" }, this.region)), (this.processedItems ||
-      languageDropdown() ||
-      contactDropdown() ||
-      this.processedSession ||
-      this.processedUser) && (h("button", { ref: el => (this.navigationElButton = el), class: { "duet-header-toggle": true, active: this.isSlideOutOpen }, onClick: event => this.toggleMenu(event, "mobile"), type: "button", "aria-controls": "duet-header-bottom", "aria-expanded": this.isSlideOutOpen ? "true" : "false" }, h("duet-visually-hidden", null, this.accessibleLabel), h(DuetHeaderHamburger, null)))), h("div", { ref: el => (this.navigationEl = el), id: "duet-header-bottom", class: {
-        "duet-header-bottom": true,
-        active: this.isSlideOutOpen,
-        inactive: !this.processedItems,
-      } }, h("nav", { class: "duet-header-items", role: "navigation" }, this.processedItems &&
-      this.processedItems.map((item, itemIndex) => (h("div", { class: "duet-header-item-container" }, h("a", { class: {
-          "duet-header-first-level": true,
-          "duet-header-item": true,
-          active: (!itemsHaveSubItems && this.currentHref === item.href) ||
-            (item.active === true &&
-              !this.openMenu &&
-              this.closedActives &&
-              this.closedActives.length === 1) ||
-            (item.active === true &&
-              !this.openMenu &&
-              item.items &&
-              !item.items.some(s => s.active === true)),
-        }, href: item.href || "#", id: item.id || `header-item-${itemIndex}`, onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.badge && h("div", { class: "duet-header-badge" })), item.items &&
-        item.items
-          .filter(secondLevelitem => secondLevelitem.items && secondLevelitem.items.length > 0)
-          .map((secondLevelItem, secondLevelItemIndex) => {
-          const id = secondLevelItem.id || `header-item-${itemIndex}-${secondLevelItemIndex}`;
-          const active = (!this.openMenu &&
-            secondLevelItem.active === true &&
-            !(this.closedActives && !!this.closedActives.find(i => i === id))) ||
-            this.openMenu === id;
-          const activeBar = active && !(secondLevelItem.items && secondLevelItem.items.some(s => s.active === true));
-          return (h(DuetHeaderDropdown, { id: id, className: "duet-header-second-level", label: secondLevelItem.label, icon: `${secondLevelItem.icon}.svg`, active: activeBar, isOpen: active, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id, secondLevelItem.active === true) }, h("div", { class: "duet-header-third-level" }, secondLevelItem.items &&
-            secondLevelItem.items.map(thirdLevelItem => (h("a", { class: {
-                "duet-header-item": true,
-                active: thirdLevelItem.active === true,
-              }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, thirdLevelItem), onTouchStart: event => this.emitDuetEvent(event, thirdLevelItem), target: thirdLevelItem.external ? "_blank" : "_self" }, thirdLevelItem.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))), h("span", null, thirdLevelItem.label), thirdLevelItem.badge && h("div", { class: "duet-header-badge" })))))));
-        }))))), h("div", { class: "duet-header-bottom-utils" }, h("slot", { name: "utility" })), h("div", { class: "duet-header-utils" }, !itemsHaveSubItems && contactDropdown(), languageDropdown(), !itemsHaveSubItems && (h(Fragment, null, processedUserWithLink(), processedUserWithoutLink())), processedSearch(), processedSession())))));
-    // multi level variation
-    if (itemsHaveSubItems) {
-      const activeSegment = this.processedItems.find(item => item.active);
-      const isThirdLevelActive = this.processedItems &&
-        this.processedItems.some(item => item.items &&
-          item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
-      const segmentId = "duet-header-segment";
-      return (h(Host, { class: "duet-header-multi-level-variation" }, h("div", { class: {
-          "duet-header-multi-level": true,
-          "duet-header-multi-level-third-level-is-open": isThirdLevelActive,
-        } }, h("header", { class: {
-          "duet-header": true,
-          "duet-theme-turva": this.theme === "turva",
-          "duet-header-inactive": !this.processedItems,
-        }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), h("div", { class: "logo-and-segment" }, h("div", null, largeLogo()), this.processedItems && (h(DuetHeaderDropdown, { id: segmentId, label: activeSegment.label, active: this.isSegmentOpen, isOpen: this.isSegmentOpen, badge: false, toggleRef: el => (this.segmentItemsButtonEl = el), itemsRef: el => (this.segmentItemsEl = el), onToggle: event => this.toggleMenu(event, "segment") }, this.processedItems.map(item => (h("a", { class: { active: activeSegment === item }, role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleItemClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item), target: item.external ? "_blank" : "_self" }, item.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "x-small", name: item.icon, color: "currentColor" }))), h("span", null, item.label), item.badge && h("div", { class: "duet-header-badge" }))))))), h("nav", { class: "duet-header-multi-level-nav" }, activeSegment.items &&
-        activeSegment.items
-          .filter(secondLevelItem => secondLevelItem.items && secondLevelItem.items.length > 0)
-          .map((secondLevelItem, secondLevelItemIndex) => {
-          const id = secondLevelItem.id || `segment-item-${secondLevelItemIndex}`;
-          return (h(DuetHeaderDropdown, { id: id, label: secondLevelItem.label, active: (!this.openMenu && secondLevelItem.active === true) || this.openMenu === id, isOpen: this.openMenu === id, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id) }, secondLevelItem.items &&
-            secondLevelItem.items.map(thirdLevelItem => (h("a", { class: { active: thirdLevelItem.active }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, thirdLevelItem), onTouchStart: event => this.emitDuetEvent(event, thirdLevelItem), target: thirdLevelItem.external ? "_blank" : "_self" }, thirdLevelItem.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))), h("span", null, thirdLevelItem.label), thirdLevelItem.badge && h("div", { class: "duet-header-badge" }))))));
-        })), h("div", { class: "duet-header-multi-level-utils" }, processedSearch(), languageDropdown(), processedSessionDropdown() != null ? processedSessionDropdown() : processedSession()), h("slot", { name: "utility" })))), defaultVariationContent));
+    handleItemClick(ev, data) {
+        const e = createEvent(ev, data);
+        this.handleClick(e);
+        this.duetItemClick.emit(e);
     }
-    // Default variation
-    return (h(Host, { class: {
-        "duet-header-default-variation": true,
-      } }, defaultVariationContent));
-  }
-  static get is() { return "duet-header"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-header.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-header.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the header."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "language": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetLanguage",
-          "resolved": "\"en\" | \"fi\" | \"sv\"",
-          "references": {
-            "DuetLanguage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLanguage"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
-            }, {
-              "name": "default",
-              "text": "\"fi\""
-            }],
-          "text": "The currently active language. This setting also changes the logo to match\nthe chosen language."
-        },
-        "attribute": "language",
-        "reflect": false,
-        "defaultValue": "getLanguage()"
-      },
-      "accessibleI18nLabelsDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| string\n    | Record<DuetLanguage, I18nText>",
-          "resolved": "string | { fi: I18nText; en: I18nText; sv: I18nText; }",
-          "references": {
-            "Record": {
-              "location": "global",
-              "id": "global::Record"
-            },
-            "DuetLanguage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLanguage"
-            },
-            "I18nText": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::I18nText"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{\nfi: {\nskipLabel: \"Siirry p\u00E4\u00E4sis\u00E4lt\u00F6\u00F6n\",\nchangeLanguage: \"Vaihda kielt\u00E4\",\nactiveLanguage: \"Suomi valittuna\",\n},\nsv: {\nskipLabel: \"Hoppa till huvudinneh\u00E5ll\",\nchangeLanguage: \"\u00C4ndra Spr\u00E5k\",\nactiveLanguage: \"Svenska valt\",\n},\nen: {\nskipLabel: \"Skip to main content\",\nchangeLanguage: \"Change language\",\nactiveLanguage: \"English selected\",\n},\n}"
-            }],
-          "text": "Default strings for accessibleI18nLabels"
-        },
-        "attribute": "accessible-labels-default",
-        "reflect": false,
-        "defaultValue": "{\n    fi: {\n      skipLabel: \"Siirry p\u00E4\u00E4sis\u00E4lt\u00F6\u00F6n\",\n      changeLanguage: \"Vaihda kielt\u00E4\",\n      activeLanguage: \"Suomi valittuna\",\n    },\n    sv: {\n      skipLabel: \"G\u00E5 till huvudinneh\u00E5ll\",\n      changeLanguage: \"\u00C4ndra Spr\u00E5k\",\n      activeLanguage: \"Svenska valt\",\n    },\n    en: {\n      skipLabel: \"Skip to main content\",\n      changeLanguage: \"Change language\",\n      activeLanguage: \"English selected\",\n    },\n  }"
-      },
-      "accessibleI18nLabels": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "I18nText",
-          "resolved": "I18nText",
-          "references": {
-            "I18nText": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::I18nText"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{\nfi: {\nskipLabel: \"Siirry p\u00E4\u00E4sis\u00E4lt\u00F6\u00F6n\",\nchangeLanguage: \"Vaihda kielt\u00E4\",\nactiveLanguage: \"Suomi valittuna\",\n},\nsv: {\nskipLabel: \"Hoppa till huvudinneh\u00E5ll\",\nchangeLanguage: \"\u00C4ndra Spr\u00E5k\",\nactiveLanguage: \"Svenska valt\",\n},\nen: {\nskipLabel: \"Skip to main content\",\nchangeLanguage: \"Change language\",\nactiveLanguage: \"English selected\",\n},\n}"
-            }],
-          "text": "Adds i18n translations of all internally used textStrings"
-        },
-        "defaultValue": "getLocaleString(\n    this.accessibleI18nLabelsDefaults\n  )"
-      },
-      "accessibleLabelExternalDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
-            }],
-          "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelExternal when needed"
-        },
-        "attribute": "accessible-label-external-default",
-        "reflect": false,
-        "defaultValue": "DuetStringsExternalDefaults"
-      },
-      "accessibleLabelExternal": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
-            }],
-          "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
-        },
-        "attribute": "accessible-label-external",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
-      },
-      "accessibleLabelDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Property to change accessibleLabel defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabel when needed"
-        },
-        "attribute": "accessible-label-default",
-        "reflect": false,
-        "defaultValue": "{\n    fi: \"Valikko\",\n    sv: \"Meny\",\n    en: \"Menu\",\n  }"
-      },
-      "accessibleLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{\nfi: \"Valikko\",\nsv: \"Meny\",\nen: \"Menu\",\n}"
-            }],
-          "text": "Accessible label that is shown for screen reader users in the mobile\nnavigation toggle. Not visible for normal users."
-        },
-        "attribute": "accessible-label",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
-      },
-      "user": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An object that includes mandatory \"label\" and \"href\" fields for the user\nprofile link. Additionally, you can pass an \"id\" that is added as an HTML\nidentifier for the element. If nothing is passed, user won\u2019t be shown.\nNote: not available in multilevel headers."
-        },
-        "attribute": "user",
-        "reflect": false
-      },
-      "logoHref": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "URL that the logo link points to."
-        },
-        "attribute": "logo-href",
-        "reflect": false,
-        "defaultValue": "\"/\""
-      },
-      "currentHref": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The href of the current page item that is shown as \u201Cactive\u201D.\nNote: not available in multilevel headers."
-        },
-        "attribute": "current-href",
-        "reflect": false,
-        "defaultValue": "\"/\""
-      },
-      "skipToId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The ID of the element where \"skip to content\" link should take the user.\nIf empty, the functionality won\u2019t be rendered in the DOM."
-        },
-        "attribute": "skip-to-id",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "items": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An array of items for the main navigation. Items have to include mandatory\n\"label\" and \"href\" fields to work. Additionally, you can pass an \"id\" that is\nadded as an HTML identifier for the element, \"active\" boolean that makes item active,\n\"badge\" boolean to add notification badge next to the item and\n\"items\" array consisting of sub items that are allowed up to three levels.\nTwo and three level menus are deprecated and you should instead use\nNav component to create multilevel navigations."
-        },
-        "attribute": "items",
-        "reflect": false
-      },
-      "region": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Region that is shown next to the logo. If empty, region will be hidden.\nNote: not available in multilevel header."
-        },
-        "attribute": "region",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "session": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An object that includes mandatory \"label\", \"href\" and \"type\" fields for the\nsession login/logout link. Additionally, you can pass an \"id\" that is added\nas an HTML identifier for the element.\nIf nothing is passed, this link won\u2019t be shown."
-        },
-        "attribute": "session",
-        "reflect": false
-      },
-      "search": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An object that includes mandatory \"label\" and \"href\" fields for the\nsearch link. Additionally, you can pass an \"id\" that is added\nas an HTML identifier for the element. If nothing is passed, this link won\u2019t\nbe shown."
-        },
-        "attribute": "search",
-        "reflect": false
-      },
-      "back": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An object that includes mandatory \"label\" and \"href\" fields for the back link.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for the\nelement. If nothing is passed, back link won\u2019t be shown. **NOTE: The back link\nshould be ONLY used in combination with language and logoHref props.**"
-        },
-        "attribute": "back",
-        "reflect": false
-      },
-      "contact": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label of the contact menu. If empty, contact menu will be hidden.\nNote: not available in multilevel headers."
-        },
-        "attribute": "contact",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "contactItems": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An array of items for the contact menu. \"label\" and \"href\" are mandatory.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for\nthe element, and pass an \"external\" flag if the link is to open in a new window."
-        },
-        "attribute": "contact-items",
-        "reflect": false
-      },
-      "languageItems": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An array of items for the language menu. If empty, the language menu will\nbe hidden. \"label\", \"country\" and \"href\" are mandatory. Additionally you\ncan pass an \"id\" that is added as an HTML identifier for the element."
-        },
-        "attribute": "language-items",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isContactOpen": {},
-      "isLanguageOpen": {},
-      "isSessionOpen": {},
-      "isSlideOutOpen": {},
-      "isSegmentOpen": {},
-      "openMenu": {},
-      "closedActives": {},
-      "processedItems": {},
-      "processedLanguageItems": {},
-      "processedContactItems": {},
-      "processedSession": {},
-      "processedSearch": {},
-      "processedUser": {},
-      "processedBack": {},
-      "renderDesktopNav": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetChange",
-        "name": "duetChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "in favour of more specific events like duetLogoClick.\nCallback for when a user is about to navigate to another page. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
-            }
-          }
-        }
-      }, {
-        "method": "duetSessionClick",
-        "name": "duetSessionClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event for when a user has clicked the session link. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
-            }
-          }
-        }
-      }, {
-        "method": "duetSearchClick",
-        "name": "duetSearchClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event for when a user has clicked the search link. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
-            }
-          }
-        }
-      }, {
-        "method": "duetUserClick",
-        "name": "duetUserClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when a user has clicked the user link. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
-            }
-          }
-        }
-      }, {
-        "method": "duetLanguageSelect",
-        "name": "duetLanguageSelect",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when a user has selected a language from the language dropdown. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+    /**
+     * Local methods.
+     */
+    async refresh() {
+        var _a, _b;
+        if (this.renderDesktopNav !== Build.isServer ? true : (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches) {
+            this.renderDesktopNav = Build.isServer ? true : (_b = this.mql[0]) === null || _b === void 0 ? void 0 : _b.matches;
+            this.openMenu = null;
+            if (this.isSlideOutOpen) {
+                this.toggleMenu(document.createEvent("UIEvents"), "mobile");
             }
-          }
         }
-      }, {
-        "method": "duetLogoClick",
-        "name": "duetLogoClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when a user has clicked the logo. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+        this.processedItems = parsePossibleJSON(this.items);
+        this.processedLanguageItems = parsePossibleJSON(this.languageItems);
+        this.processedContactItems = parsePossibleJSON(this.contactItems);
+        this.processedSession = parsePossibleJSON(this.session);
+        this.processedSearch = parsePossibleJSON(this.search);
+        this.processedUser = parsePossibleJSON(this.user);
+        this.processedBack = parsePossibleJSON(this.back);
+    }
+    /**
+     * Closes mobile menu in header when called.
+     */
+    async closeMobileNavigation(moveFocusToButton = false) {
+        if (this.isSlideOutOpen) {
+            this.isSlideOutOpen = false;
+            enableBodyScroll(this.navigationEl);
+            if (moveFocusToButton) {
+                this.navigationElButton.focus({
+                    preventScroll: true,
+                });
             }
-          }
         }
-      }, {
-        "method": "duetBackClick",
-        "name": "duetBackClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when a user has clicked the back button. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+    }
+    /**
+     * Closes all dropdown menus in header when called.
+     */
+    async closeMenus(moveFocusToButton = false) {
+        if (this.isContactOpen || this.isLanguageOpen || this.isSegmentOpen || this.isSessionOpen || this.openMenu) {
+            if (this.isContactOpen && moveFocusToButton) {
+                this.contactItemsButtonEl.focus({
+                    preventScroll: true,
+                });
             }
-          }
-        }
-      }, {
-        "method": "duetContactClick",
-        "name": "duetContactClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when a user has clicked an option from the contact dropdown. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+            if (this.isLanguageOpen && moveFocusToButton) {
+                this.languageItemsButtonEl.focus({
+                    preventScroll: true,
+                });
             }
-          }
-        }
-      }, {
-        "method": "duetItemClick",
-        "name": "duetItemClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when a user has clicked a menu item. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+            if (this.isSegmentOpen && moveFocusToButton) {
+                this.segmentItemsButtonEl.focus({
+                    preventScroll: true,
+                });
             }
-          }
-        }
-      }, {
-        "method": "duetSkipClick",
-        "name": "duetSkipClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when a user has clicked the \"skip to content\" button. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+            if (this.isSessionOpen && moveFocusToButton) {
+                this.sessionItemsButtonEl.focus({
+                    preventScroll: true,
+                });
             }
-          }
-        }
-      }, {
-        "method": "duetAnalytics",
-        "name": "duetAnalytics",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when an items with an associated analytics ID is clicked. Analytics ID can be\naccessed via **event.detail.analyticsId**"
-        },
-        "complexType": {
-          "original": "DuetHeaderAnalyticsEvent",
-          "resolved": "{ analyticsId: string; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderAnalyticsEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderAnalyticsEvent"
+            if (this.openMenu && moveFocusToButton) {
+                this.subMenuButtonRefs[this.openMenu].focus({
+                    preventScroll: true,
+                });
             }
-          }
+            this.isContactOpen = false;
+            this.isLanguageOpen = false;
+            this.isSegmentOpen = false;
+            this.isSessionOpen = false;
+            this.openMenu = null;
         }
-      }, {
-        "method": "duetMobileNavToggle",
-        "name": "duetMobileNavToggle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised mobile navigation is toggled. **event.detail.open** shows the current status of the navigation."
-        },
-        "complexType": {
-          "original": "DuetHeaderMobileNavToggleEvent",
-          "resolved": "{ originalEvent: Event; open: boolean; }",
-          "references": {
-            "DuetHeaderMobileNavToggleEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderMobileNavToggleEvent"
-            }
-          }
+    }
+    /**
+     * Sets focus on the specified `duet-header`. Use this method instead of the global
+     * `header.focus()`.
+     */
+    async setFocus(options) {
+        this.logoEl.setFocus(options);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const { skipLabel, changeLanguage, activeLanguage } = this.accessibleI18nLabels;
+        const skipToLabel = () => this.skipToId ? (h("a", { href: this.skipToId, class: "duet-header-skip", onClick: this.handleSkipClick }, skipLabel)) : null;
+        const logo = () => (h("duet-logo", { href: this.logoHref, size: "medium", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
+        const largeLogo = () => (h("duet-logo", { href: this.logoHref, size: "large", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
+        const contactDropdown = () => this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" }, item.label, Build.isBrowser && item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-header-link-external" }, h("duet-icon", { name: "action-new-window-small", size: "xx-small", margin: "none", color: this.theme === "turva" ? "primary-turva" : "primary" }))))))))) : null;
+        const languageDropdown = () => this.language && this.processedLanguageItems ? (h(DuetHeaderDropdown, { id: "duet-header-language", label: this.language, icon: languageIcon.svg, accessibleText: `${changeLanguage}${this.hasLanguageChanged ? `, ${activeLanguage}` : ""}`, active: this.isLanguageOpen, isOpen: this.isLanguageOpen, badge: false, toggleRef: el => (this.languageItemsButtonEl = el), itemsRef: el => (this.languageItemsEl = el), onToggle: event => this.toggleMenu(event, "language") }, this.processedLanguageItems.map(item => (h("a", { class: { active: this.language === item.country }, "aria-selected": this.language === item.country, role: "menuitem", id: item.id, lang: item.country, href: item.href || "#", onClick: event => this.handleLanguageClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))))) : null;
+        const processedUserWithLink = () => this.processedUser && this.processedUser.href ? (h("a", { href: this.processedUser.href || "#", id: this.processedUser.id, class: "duet-header-user duet-header-button", onClick: this.handleUserClick }, h(DuetHeaderIcon, { icon: userIcon.svg }), h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
+        const processedUserWithoutLink = () => this.processedUser && !this.processedUser.href ? (h("span", { id: this.processedUser.id, class: "duet-header-user duet-header-button duet-header-no-action" }, h(DuetHeaderIcon, { icon: userIcon.svg }), h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
+        const processedSession = () => this.processedSession ? (h("a", { href: this.processedSession.href || "#", id: this.processedSession.id, class: "duet-header-logout duet-header-button", onClick: this.handleSessionClick }, h(DuetHeaderIcon, { class: "desktop", icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, iconSize: "x-small" }), h(DuetHeaderIcon, { class: "mobile", icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, iconSize: "small" }), h("span", { class: "duet-header-button-label" }, this.processedSession.label))) : null;
+        const processedSessionDropdown = () => this.processedSession && this.processedSession.sessionItems ? (h(DuetHeaderDropdown, { className: "duet-header-session", id: "duet-header-session", label: this.processedSession.label, icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, active: this.isSessionOpen, isOpen: this.isSessionOpen, badge: false, toggleRef: el => (this.sessionItemsButtonEl = el), itemsRef: el => (this.sessionItemsEl = el), onToggle: event => this.toggleMenu(event, "session") }, this.processedSession.sessionItems.map((sessionItem, index) => (h(Fragment, null, sessionItem.label && h("span", { class: "duet-header-session-label" }, sessionItem.label), h("duet-spacer", { size: "small", "aria-hidden": "true" }), sessionItem.items.map(item => (h("a", { role: "menuitem", "aria-label": sessionItem.label ? `${sessionItem.label} ${item.label}` : item.label, id: item.id, href: item.href || "#", onClick: event => this.handleSessionItemClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))), index !== this.processedSession.sessionItems.length - 1 && (h(Fragment, null, h("duet-spacer", { size: "x-small", "aria-hidden": "true" }), h("duet-divider", { margin: "none", "aria-hidden": "true" })))))))) : null;
+        const processedSearch = () => this.processedSearch ? (h("a", { href: this.processedSearch.href || "#", id: this.processedSearch.id, class: "duet-header-search duet-header-button", onClick: this.handleSearchClick }, h(DuetHeaderIcon, { icon: searchIcon.svg }), h("span", { class: "duet-header-button-label" }, this.processedSearch.label))) : null;
+        // Back variation
+        if (this.processedBack) {
+            return (h(Host, { class: "duet-header-back-variation" }, h("div", { class: "duet-header-reserved-space" }, h("header", { class: {
+                    "duet-header": true,
+                    "duet-theme-turva": this.theme === "turva",
+                    "duet-header-back": true,
+                    "duet-header-inactive": true,
+                }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), h("duet-button", { url: this.processedBack.href, id: this.processedBack.id, theme: this.theme, variation: "plain", color: this.theme === "turva" ? "secondary-turva" : "secondary", icon: "navigation-arrow-left", iconSize: "large", onClick: this.handleBackClick }, this.processedBack.label), logo(), h("slot", { name: "logo-utility" }))))));
         }
-      }, {
-        "method": "duetEvent",
-        "name": "duetEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "General event stream for the following events:\nitem: onMouseEnter, onTouchDown;\nmenuItem: onMouseEnter, onTouchDown;.\nYou can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetHeaderChangeEvent",
-          "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
-          "references": {
-            "DuetHeaderChangeEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
-              "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
-            }
-          }
+        const itemsHaveSubItems = this.processedItems && this.processedItems.some(item => item.items && item.items.length > 0);
+        const isSecondLevelActive = this.processedItems &&
+            this.processedItems.some(item => item.items && item.items.some(secondLevelItem => secondLevelItem.active === true));
+        const isThirdLevelActive = this.processedItems &&
+            this.processedItems.some(item => item.items &&
+                item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
+        const defaultVariationContent = (h("div", { class: {
+                "duet-header-reserved-space": true,
+                "duet-with-links": !!this.processedItems,
+                "duet-header-second-level-active": isSecondLevelActive,
+                "duet-header-third-level-active": isThirdLevelActive,
+                "duet-header-items-have-sub-items": itemsHaveSubItems,
+            } }, h("header", { class: {
+                "duet-header": true,
+                "duet-theme-turva": this.theme === "turva",
+                "duet-header-inactive": !this.processedItems,
+            }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), logo(), h("slot", { name: "logo-utility" }, this.region && h("div", { class: "duet-header-region" }, this.region)), (this.processedItems ||
+            languageDropdown() ||
+            contactDropdown() ||
+            this.processedSession ||
+            this.processedUser) && (h("button", { ref: el => (this.navigationElButton = el), class: { "duet-header-toggle": true, active: this.isSlideOutOpen }, onClick: event => this.toggleMenu(event, "mobile"), type: "button", "aria-controls": "duet-header-bottom", "aria-expanded": this.isSlideOutOpen ? "true" : "false" }, h("duet-visually-hidden", null, this.accessibleLabel), h(DuetHeaderHamburger, null)))), h("div", { ref: el => (this.navigationEl = el), id: "duet-header-bottom", class: {
+                "duet-header-bottom": true,
+                active: this.isSlideOutOpen,
+                inactive: !this.processedItems,
+            } }, h("nav", { class: "duet-header-items", role: "navigation" }, this.processedItems &&
+            this.processedItems.map((item, itemIndex) => (h("div", { class: "duet-header-item-container" }, h("a", { class: {
+                    "duet-header-first-level": true,
+                    "duet-header-item": true,
+                    active: (!itemsHaveSubItems && this.currentHref === item.href) ||
+                        (item.active === true &&
+                            !this.openMenu &&
+                            this.closedActives &&
+                            this.closedActives.length === 1) ||
+                        (item.active === true &&
+                            !this.openMenu &&
+                            item.items &&
+                            !item.items.some(s => s.active === true)),
+                }, href: item.href || "#", id: item.id || `header-item-${itemIndex}`, onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.badge && h("div", { class: "duet-header-badge" })), item.items &&
+                item.items
+                    .filter(secondLevelitem => secondLevelitem.items && secondLevelitem.items.length > 0)
+                    .map((secondLevelItem, secondLevelItemIndex) => {
+                    const id = secondLevelItem.id || `header-item-${itemIndex}-${secondLevelItemIndex}`;
+                    const active = (!this.openMenu &&
+                        secondLevelItem.active === true &&
+                        !(this.closedActives && !!this.closedActives.find(i => i === id))) ||
+                        this.openMenu === id;
+                    const activeBar = active && !(secondLevelItem.items && secondLevelItem.items.some(s => s.active === true));
+                    return (h(DuetHeaderDropdown, { id: id, className: "duet-header-second-level", label: secondLevelItem.label, icon: `${secondLevelItem.icon}.svg`, active: activeBar, isOpen: active, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id, secondLevelItem.active === true) }, h("div", { class: "duet-header-third-level" }, secondLevelItem.items &&
+                        secondLevelItem.items.map(thirdLevelItem => (h("a", { class: {
+                                "duet-header-item": true,
+                                active: thirdLevelItem.active === true,
+                            }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, thirdLevelItem), onTouchStart: event => this.emitDuetEvent(event, thirdLevelItem), target: thirdLevelItem.external ? "_blank" : "_self" }, thirdLevelItem.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))), h("span", null, thirdLevelItem.label), thirdLevelItem.badge && h("div", { class: "duet-header-badge" })))))));
+                }))))), h("div", { class: "duet-header-bottom-utils" }, h("slot", { name: "utility" })), h("div", { class: "duet-header-utils" }, !itemsHaveSubItems && contactDropdown(), languageDropdown(), !itemsHaveSubItems && (h(Fragment, null, processedUserWithLink(), processedUserWithoutLink())), processedSearch(), processedSession())))));
+        // multi level variation
+        if (itemsHaveSubItems) {
+            const activeSegment = this.processedItems.find(item => item.active);
+            const isThirdLevelActive = this.processedItems &&
+                this.processedItems.some(item => item.items &&
+                    item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
+            const segmentId = "duet-header-segment";
+            return (h(Host, { class: "duet-header-multi-level-variation" }, h("div", { class: {
+                    "duet-header-multi-level": true,
+                    "duet-header-multi-level-third-level-is-open": isThirdLevelActive,
+                } }, h("header", { class: {
+                    "duet-header": true,
+                    "duet-theme-turva": this.theme === "turva",
+                    "duet-header-inactive": !this.processedItems,
+                }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), h("div", { class: "logo-and-segment" }, h("div", null, largeLogo()), this.processedItems && (h(DuetHeaderDropdown, { id: segmentId, label: activeSegment.label, active: this.isSegmentOpen, isOpen: this.isSegmentOpen, badge: false, toggleRef: el => (this.segmentItemsButtonEl = el), itemsRef: el => (this.segmentItemsEl = el), onToggle: event => this.toggleMenu(event, "segment") }, this.processedItems.map(item => (h("a", { class: { active: activeSegment === item }, role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleItemClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item), target: item.external ? "_blank" : "_self" }, item.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "x-small", name: item.icon, color: "currentColor" }))), h("span", null, item.label), item.badge && h("div", { class: "duet-header-badge" }))))))), h("nav", { class: "duet-header-multi-level-nav" }, activeSegment.items &&
+                activeSegment.items
+                    .filter(secondLevelItem => secondLevelItem.items && secondLevelItem.items.length > 0)
+                    .map((secondLevelItem, secondLevelItemIndex) => {
+                    const id = secondLevelItem.id || `segment-item-${secondLevelItemIndex}`;
+                    return (h(DuetHeaderDropdown, { id: id, label: secondLevelItem.label, active: (!this.openMenu && secondLevelItem.active === true) || this.openMenu === id, isOpen: this.openMenu === id, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id) }, secondLevelItem.items &&
+                        secondLevelItem.items.map(thirdLevelItem => (h("a", { class: { active: thirdLevelItem.active }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, thirdLevelItem), onTouchStart: event => this.emitDuetEvent(event, thirdLevelItem), target: thirdLevelItem.external ? "_blank" : "_self" }, thirdLevelItem.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))), h("span", null, thirdLevelItem.label), thirdLevelItem.badge && h("div", { class: "duet-header-badge" }))))));
+                })), h("div", { class: "duet-header-multi-level-utils" }, processedSearch(), languageDropdown(), processedSessionDropdown() != null ? processedSessionDropdown() : processedSession()), h("slot", { name: "utility" })))), defaultVariationContent));
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "closeMenus": {
-        "complexType": {
-          "signature": "(moveFocusToButton?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        // Default variation
+        return (h(Host, { class: {
+                "duet-header-default-variation": true,
+            } }, defaultVariationContent));
+    }
+    static get is() { return "duet-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the header."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetLanguage",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {
+                        "DuetLanguage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLanguage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+                        }, {
+                            "name": "default",
+                            "text": "\"fi\""
+                        }],
+                    "text": "The currently active language. This setting also changes the logo to match\nthe chosen language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "getLanguage()"
+            },
+            "accessibleI18nLabelsDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| string\n    | Record<DuetLanguage, I18nText>",
+                    "resolved": "string | { fi: I18nText; en: I18nText; sv: I18nText; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "DuetLanguage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLanguage"
+                        },
+                        "I18nText": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::I18nText"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{\nfi: {\nskipLabel: \"Siirry p\u00E4\u00E4sis\u00E4lt\u00F6\u00F6n\",\nchangeLanguage: \"Vaihda kielt\u00E4\",\nactiveLanguage: \"Suomi valittuna\",\n},\nsv: {\nskipLabel: \"Hoppa till huvudinneh\u00E5ll\",\nchangeLanguage: \"\u00C4ndra Spr\u00E5k\",\nactiveLanguage: \"Svenska valt\",\n},\nen: {\nskipLabel: \"Skip to main content\",\nchangeLanguage: \"Change language\",\nactiveLanguage: \"English selected\",\n},\n}"
+                        }],
+                    "text": "Default strings for accessibleI18nLabels"
+                },
+                "attribute": "accessible-labels-default",
+                "reflect": false,
+                "defaultValue": "{\n    fi: {\n      skipLabel: \"Siirry p\u00E4\u00E4sis\u00E4lt\u00F6\u00F6n\",\n      changeLanguage: \"Vaihda kielt\u00E4\",\n      activeLanguage: \"Suomi valittuna\",\n    },\n    sv: {\n      skipLabel: \"G\u00E5 till huvudinneh\u00E5ll\",\n      changeLanguage: \"\u00C4ndra Spr\u00E5k\",\n      activeLanguage: \"Svenska valt\",\n    },\n    en: {\n      skipLabel: \"Skip to main content\",\n      changeLanguage: \"Change language\",\n      activeLanguage: \"English selected\",\n    },\n  }"
+            },
+            "accessibleI18nLabels": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "I18nText",
+                    "resolved": "I18nText",
+                    "references": {
+                        "I18nText": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::I18nText"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{\nfi: {\nskipLabel: \"Siirry p\u00E4\u00E4sis\u00E4lt\u00F6\u00F6n\",\nchangeLanguage: \"Vaihda kielt\u00E4\",\nactiveLanguage: \"Suomi valittuna\",\n},\nsv: {\nskipLabel: \"Hoppa till huvudinneh\u00E5ll\",\nchangeLanguage: \"\u00C4ndra Spr\u00E5k\",\nactiveLanguage: \"Svenska valt\",\n},\nen: {\nskipLabel: \"Skip to main content\",\nchangeLanguage: \"Change language\",\nactiveLanguage: \"English selected\",\n},\n}"
+                        }],
+                    "text": "Adds i18n translations of all internally used textStrings"
+                },
+                "defaultValue": "getLocaleString(\n    this.accessibleI18nLabelsDefaults\n  )"
+            },
+            "accessibleLabelExternalDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelExternal when needed"
+                },
+                "attribute": "accessible-label-external-default",
+                "reflect": false,
+                "defaultValue": "DuetStringsExternalDefaults"
+            },
+            "accessibleLabelExternal": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+                },
+                "attribute": "accessible-label-external",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
+            },
+            "accessibleLabelDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property to change accessibleLabel defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabel when needed"
+                },
+                "attribute": "accessible-label-default",
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"Valikko\",\n    sv: \"Meny\",\n    en: \"Menu\",\n  }"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{\nfi: \"Valikko\",\nsv: \"Meny\",\nen: \"Menu\",\n}"
+                        }],
+                    "text": "Accessible label that is shown for screen reader users in the mobile\nnavigation toggle. Not visible for normal users."
+                },
+                "attribute": "accessible-label",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
+            },
+            "user": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An object that includes mandatory \"label\" and \"href\" fields for the user\nprofile link. Additionally, you can pass an \"id\" that is added as an HTML\nidentifier for the element. If nothing is passed, user won\u2019t be shown.\nNote: not available in multilevel headers."
+                },
+                "attribute": "user",
+                "reflect": false
+            },
+            "logoHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL that the logo link points to."
+                },
+                "attribute": "logo-href",
+                "reflect": false,
+                "defaultValue": "\"/\""
+            },
+            "currentHref": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The href of the current page item that is shown as \u201Cactive\u201D.\nNote: not available in multilevel headers."
+                },
+                "attribute": "current-href",
+                "reflect": false,
+                "defaultValue": "\"/\""
+            },
+            "skipToId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the element where \"skip to content\" link should take the user.\nIf empty, the functionality won\u2019t be rendered in the DOM."
+                },
+                "attribute": "skip-to-id",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "items": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of items for the main navigation. Items have to include mandatory\n\"label\" and \"href\" fields to work. Additionally, you can pass an \"id\" that is\nadded as an HTML identifier for the element, \"active\" boolean that makes item active,\n\"badge\" boolean to add notification badge next to the item and\n\"items\" array consisting of sub items that are allowed up to three levels.\nTwo and three level menus are deprecated and you should instead use\nNav component to create multilevel navigations."
+                },
+                "attribute": "items",
+                "reflect": false
+            },
+            "region": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Region that is shown next to the logo. If empty, region will be hidden.\nNote: not available in multilevel header."
+                },
+                "attribute": "region",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "session": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An object that includes mandatory \"label\", \"href\" and \"type\" fields for the\nsession login/logout link. Additionally, you can pass an \"id\" that is added\nas an HTML identifier for the element.\nIf nothing is passed, this link won\u2019t be shown."
+                },
+                "attribute": "session",
+                "reflect": false
+            },
+            "search": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An object that includes mandatory \"label\" and \"href\" fields for the\nsearch link. Additionally, you can pass an \"id\" that is added\nas an HTML identifier for the element. If nothing is passed, this link won\u2019t\nbe shown."
+                },
+                "attribute": "search",
+                "reflect": false
+            },
+            "back": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An object that includes mandatory \"label\" and \"href\" fields for the back link.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for the\nelement. If nothing is passed, back link won\u2019t be shown. **NOTE: The back link\nshould be ONLY used in combination with language and logoHref props.**"
+                },
+                "attribute": "back",
+                "reflect": false
+            },
+            "contact": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the contact menu. If empty, contact menu will be hidden.\nNote: not available in multilevel headers."
+                },
+                "attribute": "contact",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "contactItems": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of items for the contact menu. \"label\" and \"href\" are mandatory.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for\nthe element, and pass an \"external\" flag if the link is to open in a new window."
+                },
+                "attribute": "contact-items",
+                "reflect": false
+            },
+            "languageItems": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of items for the language menu. If empty, the language menu will\nbe hidden. \"label\", \"country\" and \"href\" are mandatory. Additionally you\ncan pass an \"id\" that is added as an HTML identifier for the element."
+                },
+                "attribute": "language-items",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Closes all dropdown menus in header when called.",
-          "tags": []
-        }
-      },
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "isContactOpen": {},
+            "isLanguageOpen": {},
+            "isSessionOpen": {},
+            "isSlideOutOpen": {},
+            "isSegmentOpen": {},
+            "openMenu": {},
+            "closedActives": {},
+            "processedItems": {},
+            "processedLanguageItems": {},
+            "processedContactItems": {},
+            "processedSession": {},
+            "processedSearch": {},
+            "processedUser": {},
+            "processedBack": {},
+            "renderDesktopNav": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetChange",
+                "name": "duetChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "in favour of more specific events like duetLogoClick.\nCallback for when a user is about to navigate to another page. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetSessionClick",
+                "name": "duetSessionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event for when a user has clicked the session link. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetSearchClick",
+                "name": "duetSearchClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event for when a user has clicked the search link. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetUserClick",
+                "name": "duetUserClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when a user has clicked the user link. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetLanguageSelect",
+                "name": "duetLanguageSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when a user has selected a language from the language dropdown. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetLogoClick",
+                "name": "duetLogoClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when a user has clicked the logo. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetBackClick",
+                "name": "duetBackClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when a user has clicked the back button. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetContactClick",
+                "name": "duetContactClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when a user has clicked an option from the contact dropdown. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetItemClick",
+                "name": "duetItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when a user has clicked a menu item. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetSkipClick",
+                "name": "duetSkipClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when a user has clicked the \"skip to content\" button. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetAnalytics",
+                "name": "duetAnalytics",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when an items with an associated analytics ID is clicked. Analytics ID can be\naccessed via **event.detail.analyticsId**"
+                },
+                "complexType": {
+                    "original": "DuetHeaderAnalyticsEvent",
+                    "resolved": "{ analyticsId: string; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderAnalyticsEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderAnalyticsEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetMobileNavToggle",
+                "name": "duetMobileNavToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised mobile navigation is toggled. **event.detail.open** shows the current status of the navigation."
+                },
+                "complexType": {
+                    "original": "DuetHeaderMobileNavToggleEvent",
+                    "resolved": "{ originalEvent: Event; open: boolean; }",
+                    "references": {
+                        "DuetHeaderMobileNavToggleEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderMobileNavToggleEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetEvent",
+                "name": "duetEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "General event stream for the following events:\nitem: onMouseEnter, onTouchDown;\nmenuItem: onMouseEnter, onTouchDown;.\nYou can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**."
+                },
+                "complexType": {
+                    "original": "DuetHeaderChangeEvent",
+                    "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+                    "references": {
+                        "DuetHeaderChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "closeMenus": {
+                "complexType": {
+                    "signature": "(moveFocusToButton?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "moveFocusToButton",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes all dropdown menus in header when called.",
+                    "tags": []
+                }
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the specified `duet-header`. Use this method instead of the global\n`header.focus()`.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the specified `duet-header`. Use this method instead of the global\n`header.focus()`.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "user",
-        "methodName": "refresh"
-      }, {
-        "propName": "items",
-        "methodName": "refresh"
-      }, {
-        "propName": "session",
-        "methodName": "refresh"
-      }, {
-        "propName": "back",
-        "methodName": "refresh"
-      }, {
-        "propName": "contactItems",
-        "methodName": "refresh"
-      }, {
-        "propName": "languageItems",
-        "methodName": "refresh"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keyup",
-        "method": "handleKeyUp",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focus",
-        "method": "handleDocumentClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "handleDocumentClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "user",
+                "methodName": "refresh"
+            }, {
+                "propName": "items",
+                "methodName": "refresh"
+            }, {
+                "propName": "session",
+                "methodName": "refresh"
+            }, {
+                "propName": "back",
+                "methodName": "refresh"
+            }, {
+                "propName": "contactItems",
+                "methodName": "refresh"
+            }, {
+                "propName": "languageItems",
+                "methodName": "refresh"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleKeyUp",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focus",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }