@duetds/components 6.2.3 → 6.2.5

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

@@ -8,7 +8,7 @@ import loginIcon from "@duetds/icons/lib/assets/navigation-login";
 import logoutIcon from "@duetds/icons/lib/assets/navigation-logout";
 import userIcon from "@duetds/icons/lib/assets/navigation-user";
 import { media_query_large } from "@duetds/tokens/lib/tokens.json";
-import { Build, Component, Element, Event, Fragment, h, Host, Listen, Method, Prop, State, Watch, } from "@stencil/core";
+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";
@@ -39,148 +39,6 @@ export class DuetHeader {
     this.hasLanguageChanged = false;
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
     this.boundMqlFunctions = [];
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    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;
-    /**
-     * Theme of the header.
-     */
-    this.theme = "";
-    /**
-     * The currently active language. This setting also changes the logo to match
-     * the chosen language.
-     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
-     * @default "fi"
-     */
-    this.language = getLanguage();
-    /**
-     * Default strings for accessibleI18nLabels
-     * @default {
-      fi: {
-        skipLabel: "Siirry pääsisältöön",
-        changeLanguage: "Vaihda kieltä",
-        activeLanguage: "Suomi valittuna",
-      },
-      sv: {
-        skipLabel: "Hoppa till huvudinnehåll",
-        changeLanguage: "Ändra Språk",
-        activeLanguage: "Svenska valt",
-      },
-      en: {
-        skipLabel: "Skip to main content",
-        changeLanguage: "Change language",
-        activeLanguage: "English selected",
-      },
-    }
-     */
-    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",
-      },
-    };
-    /**
-     * Adds i18n translations of all internally used textStrings
-     * @default {
-      fi: {
-        skipLabel: "Siirry pääsisältöön",
-        changeLanguage: "Vaihda kieltä",
-        activeLanguage: "Suomi valittuna",
-      },
-      sv: {
-        skipLabel: "Hoppa 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);
-    /**
-     * Property to change accessibleLabelExternal defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
-    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    /**
-     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-    /**
-     * Property to change accessibleLabel defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabel when needed
-     */
-    this.accessibleLabelDefaults = {
-      fi: "Valikko",
-      sv: "Meny",
-      en: "Menu",
-    };
-    /**
-     * Accessible label that is shown for screen reader users in the mobile
-     * navigation toggle. Not visible for normal users.
-     * @default {
-      fi: "Valikko",
-      sv: "Meny",
-      en: "Menu",
-    }
-     */
-    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
-    /**
-     * URL that the logo link points to.
-     */
-    this.logoHref = "/";
-    /**
-     * The href of the current page item that is shown as “active”.
-     * Note: not available in multilevel headers.
-     */
-    this.currentHref = "/";
-    /**
-     * The ID of the element where "skip to content" link should take the user.
-     * If empty, the functionality won’t be rendered in the DOM.
-     */
-    this.skipToId = "";
-    /**
-     * Region that is shown next to the logo. If empty, region will be hidden.
-     * Note: not available in multilevel header.
-     */
-    this.region = "";
-    /**
-     * Label of the contact menu. If empty, contact menu will be hidden.
-     * Note: not available in multilevel headers.
-     */
-    this.contact = "";
     this.handleClick = (event) => {
       if (event.data.analyticsId) {
         this.duetAnalytics.emit({
@@ -337,6 +195,61 @@ export class DuetHeader {
         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.
@@ -503,50 +416,21 @@ export class DuetHeader {
     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 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;
+    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" }))))));
+      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" }))))));
     }
     const itemsHaveSubItems = this.processedItems && this.processedItems.some(item => item.items && item.items.length > 0);
     const isSecondLevelActive = this.processedItems &&
@@ -560,76 +444,47 @@ export class DuetHeader {
         "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", { class: { "duet-header-toggle": true, active: this.isSlideOutOpen }, onClick: event => this.toggleMenu(event, "mobile"), type: "button" },
-            h("duet-visually-hidden", null, this.accessibleLabel),
-            h(DuetHeaderHamburger, null)))),
-        h("div", { ref: el => (this.navigationEl = el), 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" })),
+      } }, 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", { class: { "duet-header-toggle": true, active: this.isSlideOutOpen }, onClick: event => this.toggleMenu(event, "mobile"), type: "button" }, h("duet-visually-hidden", null, this.accessibleLabel), h(DuetHeaderHamburger, null)))), h("div", { ref: el => (this.navigationEl = el), 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
-                  .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())))));
+              !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);
@@ -637,43 +492,21 @@ export class DuetHeader {
         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));
+      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));
     }
     // Default variation
     return (h(Host, { class: {
@@ -682,775 +515,791 @@ export class DuetHeader {
   }
   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"
-          }
-        }
-      },
-      "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"
+  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"
+            }
           }
-        }
-      },
-      "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"
-          },
-          "DuetLanguage": {
-            "location": "import",
-            "path": "../../common-types"
-          },
-          "I18nText": {
-            "location": "local"
+        },
+        "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"
+            }
           }
-        }
-      },
-      "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": false,
-      "complexType": {
-        "original": "I18nText",
-        "resolved": "I18nText",
-        "references": {
-          "I18nText": {
-            "location": "local"
+        },
+        "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"
+            },
+            "DuetLanguage": {
+              "location": "import",
+              "path": "../../common-types"
+            },
+            "I18nText": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "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"
+        },
+        "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": false,
+        "complexType": {
+          "original": "I18nText",
+          "resolved": "I18nText",
+          "references": {
+            "I18nText": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "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": false,
-      "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"
+        },
+        "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"
+            }
           }
-        }
-      },
-      "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": false,
-      "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."
-      },
-      "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"
+        },
+        "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": false,
+        "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"
+            }
           }
-        }
+        },
+        "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": false,
+        "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."
+        },
+        "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
       }
-    }, {
-      "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"
+    };
+  }
+  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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "closeMenus": {
-      "complexType": {
-        "signature": "(moveFocusToButton?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }, {
+        "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"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "closeMenus": {
+        "complexType": {
+          "signature": "(moveFocusToButton?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Closes all dropdown menus in header when called.",
+          "tags": []
+        }
       },
-      "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"
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the specified `duet-header`. Use this method instead of the global\n`header.focus()`.",
-        "tags": []
+        "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 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
+      }];
+  }
 }