@duetds/components 5.4.0 → 6.0.0

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

@@ -25,7 +25,7 @@ const createEvent = (ev, data) => ({
 });
 /**
  * @slot utility - A slot for utilities, such as a notification drawer or shopping basket.
- * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop. Note: not available in desktop multilevel header.
+ * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop. Note: not available in multilevel header.
  * @part header - piercing selector for styling the header element.
  */
 export class DuetHeader {
@@ -57,7 +57,7 @@ export class DuetHeader {
     this.processedSearch = null;
     this.processedUser = null;
     this.processedBack = null;
-    this.renderDesktopNav = (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
+    this.renderDesktopNav = Build.isServer ? true : (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
     /**
      * Theme of the header.
      */
@@ -173,7 +173,7 @@ export class DuetHeader {
     this.skipToId = "";
     /**
      * Region that is shown next to the logo. If empty, region will be hidden.
-     * Note: not available in desktop multilevel header.
+     * Note: not available in multilevel header.
      */
     this.region = "";
     /**
@@ -330,6 +330,13 @@ export class DuetHeader {
         }, 300);
       }
     };
+    this.emitDuetEvent = (ev, data) => {
+      this.duetEvent.emit({
+        component: "duet-header",
+        data,
+        originalEvent: ev,
+      });
+    };
   }
   /**
    * Component lifecycle events.
@@ -418,8 +425,9 @@ export class DuetHeader {
    * Local methods.
    */
   async refresh() {
-    if (this.renderDesktopNav !== this.mql[0].matches) {
-      this.renderDesktopNav = this.mql[0].matches;
+    var _a, _b;
+    if (this.renderDesktopNav !== Build.isServer ? true : (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches) {
+      this.renderDesktopNav = Build.isServer ? true : (_b = this.mql[0]) === null || _b === void 0 ? void 0 : _b.matches;
       this.openMenu = null;
       if (this.isSlideOutOpen) {
         this.toggleMenu(document.createEvent("UIEvents"), "mobile");
@@ -492,10 +500,10 @@ export class DuetHeader {
    */
   render() {
     const { skipLabel, changeLanguage, activeLanguage } = this.accessibleI18nLabels;
-    const skipToLabel = this.skipToId ? (h("a", { href: this.skipToId, class: "duet-header-skip", onClick: this.handleSkipClick }, skipLabel)) : null;
-    const logo = (h("duet-logo", { href: this.logoHref, size: "medium", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
-    const largeLogo = (h("duet-logo", { href: this.logoHref, size: "large", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
-    const contactDropdown = this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" },
+    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,
@@ -503,25 +511,25 @@ export class DuetHeader {
           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 },
+    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" },
+    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 processedSessionIconSize = this.renderDesktopNav ? "x-small" : "small";
-    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, { icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, iconSize: processedSessionIconSize }),
+    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,
+    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 },
+    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
@@ -535,23 +543,104 @@ export class DuetHeader {
               "duet-header-inactive": true,
             }, part: "header" },
             h("div", { class: "duet-header-top" },
-              skipToLabel,
+              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,
+              logo(),
               h("slot", { name: "logo-utility" }))))));
     }
-    // multi level desktop variation
     const itemsHaveSubItems = this.processedItems && this.processedItems.some(item => item.items && item.items.length > 0);
-    if (this.renderDesktopNav && itemsHaveSubItems) {
+    const isSecondLevelActive = this.processedItems &&
+      this.processedItems.some(item => item.items && item.items.some(secondLevelItem => secondLevelItem.active === true));
+    const isThirdLevelActive = this.processedItems &&
+      this.processedItems.some(item => item.items &&
+        item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
+    const defaultVariationContent = (h("div", { class: {
+        "duet-header-reserved-space": true,
+        "duet-with-links": !!this.processedItems,
+        "duet-header-second-level-active": isSecondLevelActive,
+        "duet-header-third-level-active": isThirdLevelActive,
+        "duet-header-items-have-sub-items": itemsHaveSubItems,
+      } },
+      h("header", { class: {
+          "duet-header": true,
+          "duet-theme-turva": this.theme === "turva",
+          "duet-header-inactive": !this.processedItems,
+        }, part: "header" },
+        h("div", { class: "duet-header-top" },
+          skipToLabel(),
+          logo(),
+          h("slot", { name: "logo-utility" }, this.region && h("div", { class: "duet-header-region" }, this.region)),
+          (this.processedItems ||
+            languageDropdown() ||
+            contactDropdown() ||
+            this.processedSession ||
+            this.processedUser) && (h("button", { 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" })),
+              item.items &&
+                item.items
+                  .filter(secondLevelitem => secondLevelitem.items && secondLevelitem.items.length > 0)
+                  .map((secondLevelItem, secondLevelItemIndex) => {
+                  const id = secondLevelItem.id || `header-item-${itemIndex}-${secondLevelItemIndex}`;
+                  const active = (!this.openMenu &&
+                    secondLevelItem.active === true &&
+                    !(this.closedActives && !!this.closedActives.find(i => i === id))) ||
+                    this.openMenu === id;
+                  const activeBar = active && !(secondLevelItem.items && secondLevelItem.items.some(s => s.active === true));
+                  return (h(DuetHeaderDropdown, { id: id, className: "duet-header-second-level", label: secondLevelItem.label, icon: `${secondLevelItem.icon}.svg`, active: activeBar, isOpen: active, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id, secondLevelItem.active === true) },
+                    h("div", { class: "duet-header-third-level" }, secondLevelItem.items &&
+                      secondLevelItem.items.map(thirdLevelItem => (h("a", { class: {
+                          "duet-header-item": true,
+                          active: thirdLevelItem.active === true,
+                        }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, thirdLevelItem), onTouchStart: event => this.emitDuetEvent(event, thirdLevelItem), target: thirdLevelItem.external ? "_blank" : "_self" },
+                        thirdLevelItem.icon && (h("div", { class: "duet-header-icon" },
+                          h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))),
+                        h("span", null, thirdLevelItem.label),
+                        thirdLevelItem.badge && h("div", { class: "duet-header-badge" })))))));
+                }))))),
+          h("div", { class: "duet-header-bottom-utils" },
+            h("slot", { name: "utility" })),
+          h("div", { class: "duet-header-utils" },
+            !itemsHaveSubItems && contactDropdown(),
+            languageDropdown(),
+            !itemsHaveSubItems && (h(Fragment, null,
+              processedUserWithLink(),
+              processedUserWithoutLink())),
+            processedSearch(),
+            processedSession())))));
+    // multi level variation
+    if (itemsHaveSubItems) {
       const activeSegment = this.processedItems.find(item => item.active);
       const isThirdLevelActive = this.processedItems &&
         this.processedItems.some(item => item.items &&
           item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
       const segmentId = "duet-header-segment";
-      return (h(Host, { class: "duet-header-multi-level-desktop-variation" },
+      return (h(Host, { class: "duet-header-multi-level-variation" },
         h("div", { class: {
-            "duet-header-multi-level-desktop": true,
-            "duet-header-multi-level-desktop-third-level-is-open": isThirdLevelActive,
+            "duet-header-multi-level": true,
+            "duet-header-multi-level-third-level-is-open": isThirdLevelActive,
           } },
           h("header", { class: {
               "duet-header": true,
@@ -559,116 +648,37 @@ export class DuetHeader {
               "duet-header-inactive": !this.processedItems,
             }, part: "header" },
             h("div", { class: "duet-header-top" },
-              skipToLabel,
+              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), target: item.external ? "_blank" : "_self" },
+                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-desktop-nav" }, activeSegment.items &&
+              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), target: thirdLevelItem.external ? "_blank" : "_self" },
+                    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-desktop-utils" },
-                processedSearch,
-                languageDropdown,
-                processedSessionDropdown != null ? processedSessionDropdown : processedSession),
-              h("slot", { name: "utility" }))))));
+              h("div", { class: "duet-header-multi-level-utils" },
+                processedSearch(),
+                languageDropdown(),
+                processedSessionDropdown() != null ? processedSessionDropdown() : processedSession()),
+              h("slot", { name: "utility" })))),
+        defaultVariationContent));
     }
     // Default variation
-    const isSecondLevelActive = this.processedItems &&
-      this.processedItems.some(item => item.items && item.items.some(secondLevelItem => secondLevelItem.active === true));
-    const isThirdLevelActive = this.processedItems &&
-      this.processedItems.some(item => item.items &&
-        item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
     return (h(Host, { class: {
         "duet-header-default-variation": true,
-      } },
-      h("div", { class: {
-          "duet-header-reserved-space": true,
-          "duet-with-links": !!this.processedItems,
-          "duet-header-second-level-active": isSecondLevelActive,
-          "duet-header-third-level-active": isThirdLevelActive,
-        } },
-        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) },
-                  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), 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))))));
+      } }, defaultVariationContent));
   }
   static get is() { return "duet-header"; }
   static get encapsulation() { return "shadow"; }
@@ -977,7 +987,7 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Region that is shown next to the logo. If empty, region will be hidden.\nNote: not available in desktop multilevel header."
+        "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,
@@ -1335,6 +1345,25 @@ export class DuetHeader {
           }
         }
       }
+    }, {
+      "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": {

package/lib/collection/components/duet-heading/duet-heading.css

@@ -237,6 +237,10 @@
 .duet-heading.h6.duet-heading-border {
   padding-bottom: 16px;
 }
+.duet-heading.duet-normal, .duet-heading.duet-theme-turva.duet-normal {
+  font-style: normal !important;
+  font-weight: 400 !important;
+}
 .duet-heading.duet-semibold, .duet-heading.duet-theme-turva.duet-semibold {
   font-style: normal !important;
   font-weight: 600 !important;

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

@@ -20,7 +20,7 @@ export class DuetHeading {
      */
     this.border = false;
     /**
-     * This property allows you to set semibold font weight for all sizes
+     * This property allows you to set normal or semibold font weight for all sizes
      * when needed.
      */
     this.weight = "auto";
@@ -55,6 +55,7 @@ export class DuetHeading {
         "duet-heading": true,
         "duet-heading-border": this.border !== false,
         "duet-heading-border-solid": this.border === "solid",
+        "duet-normal": this.weight === "normal",
         "duet-semibold": this.weight === "semibold",
         "duet-heading-hyphenate": this.hyphenate,
         "duet-m-0": this.margin === "none",
@@ -163,7 +164,7 @@ export class DuetHeading {
       "mutable": false,
       "complexType": {
         "original": "DuetHeadingWeight",
-        "resolved": "\"auto\" | \"semibold\"",
+        "resolved": "\"auto\" | \"normal\" | \"semibold\"",
         "references": {
           "DuetHeadingWeight": {
             "location": "local"
@@ -174,7 +175,7 @@ export class DuetHeading {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This property allows you to set semibold font weight for all sizes\nwhen needed."
+        "text": "This property allows you to set normal or semibold font weight for all sizes\nwhen needed."
       },
       "attribute": "weight",
       "reflect": false,

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

@@ -8,8 +8,12 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
+ * @part duet-hero - piercing selector for styling the hero container
+ * @part duet-hero-text - piercing selector for styling the hero text container
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.
+ * @slot bottom - This is a slot for content under the main hero content.
+ * @slot heading - This is a slot for heading content inside the hero component.
  */
 export class DuetHero {
   constructor() {
@@ -25,6 +29,7 @@ export class DuetHero {
      */
     this.theme = "";
     /**
+     * @deprecated please use heading slot instead.
      * The heading of the hero area, rendered in an H1 tag. P.S. you can control
      * the level of the HTML heading by using “level” prop. If empty, heading
      * will be hidden.
@@ -132,6 +137,7 @@ export class DuetHero {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
     this.refresh();
   }
   /**
@@ -196,7 +202,7 @@ export class DuetHero {
         "duet-hero-gray-with-back": !!this.processedBack,
         "duet-hero-text-center": this.textCenter && !this.leftAlign,
         "duet-hero-left-align": this.leftAlign,
-      } },
+      }, part: "duet-hero" },
       h("div", { class: "duet-hero-wrapper" },
         this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" },
           h("div", { class: "duet-hero-image-wrapper" },
@@ -210,10 +216,10 @@ export class DuetHero {
               analyticsId: this.processedBack.analyticsId,
             }) }, this.processedBack.label))),
         (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })),
-        h("div", { class: "duet-hero-text" },
+        h("div", { class: "duet-hero-text", part: "duet-hero-text" },
           this.preHeading && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)),
           h("slot", { name: "badge" }),
-          h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading),
+          (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading ? this.heading : h("slot", { name: "heading" }))),
           this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)),
           (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null,
             h("span", { slot: "label" }, item.label),
@@ -230,7 +236,8 @@ export class DuetHero {
             this.accessibleLabelExternal),
           item.external && (h("div", { class: "duet-hero-action-arrow" },
             h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))),
-        this.image && this.variation !== "image" && h("div", { class: "duet-hero-image", style: styles }))));
+        this.image && this.variation !== "image" && h("div", { class: "duet-hero-image", style: styles }),
+        h("slot", { name: "bottom" }))));
   }
   static get is() { return "duet-hero"; }
   static get encapsulation() { return "shadow"; }
@@ -275,8 +282,11 @@ export class DuetHero {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "The heading of the hero area, rendered in an H1 tag. P.S. you can control\nthe level of the HTML heading by using \u201Clevel\u201D prop. If empty, heading\nwill be hidden."
+        "tags": [{
+            "name": "deprecated",
+            "text": "please use heading slot instead.\nThe heading of the hero area, rendered in an H1 tag. P.S. you can control\nthe level of the HTML heading by using \u201Clevel\u201D prop. If empty, heading\nwill be hidden."
+          }],
+        "text": ""
       },
       "attribute": "heading",
       "reflect": false,

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

@@ -323,14 +323,6 @@ export class DuetUpload {
      * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
      */
     this.groups = [
-      {
-        id: this.DefaultGroups.inprogress,
-        label: {
-          fi: "Kesken olevat tiedostot",
-          sv: "Filer inprogress",
-          en: "Files inprogress",
-        },
-      },
       {
         id: this.DefaultGroups.pending,
         label: {
@@ -355,6 +347,14 @@ export class DuetUpload {
           en: "Files with errors",
         },
       },
+      {
+        id: this.DefaultGroups.inprogress,
+        label: {
+          fi: "Kesken olevat tiedostot",
+          sv: "Filer inprogress",
+          en: "Files inprogress",
+        },
+      },
     ];
     this.kick = debounce(() => {
       this.tick = Date.now();
@@ -736,17 +736,17 @@ export class DuetUpload {
         }
       });
       return {
-        inprogress,
         pending,
         failure,
         success,
+        inprogress,
       };
     };
     this.getColumns = (group) => {
       return [
         {
           sort_order: 1,
-          direction: 1,
+          direction: -1,
           index: 0,
           key: group.id,
           label: group.label,
@@ -1894,7 +1894,7 @@ export class DuetUpload {
           }],
         "text": "Array of group names that you want the editable table to use to display files"
       },
-      "defaultValue": "[\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n    {\n      id: this.DefaultGroups.pending,\n      label: {\n        en: \"Files to upload\",\n        sv: \"Filer att ladda\",\n        fi: \"Ladattavat tiedostot\",\n      },\n    },\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n  ]"
+      "defaultValue": "[\n    {\n      id: this.DefaultGroups.pending,\n      label: {\n        en: \"Files to upload\",\n        sv: \"Filer att ladda\",\n        fi: \"Ladattavat tiedostot\",\n      },\n    },\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n  ]"
     }
   }; }
   static get states() { return {

package/lib/collection/components/duet-upload/upload-validators.js

@@ -40,7 +40,12 @@ export const validateFile = (item, validators, errorCodes) => {
   if (item) {
     const { name, type, size } = item;
     const mime = validateFileMime(type, allowedMimetypes);
-    const ext = validateFileExtension(name.toLowerCase(), allowedExtensions);
+    const ext = allowedExtensions === "all" ||
+      allowedExtensions === "" ||
+      allowedExtensions === " " ||
+      allowedExtensions === undefined
+      ? true
+      : validateFileExtension(name.toLowerCase(), allowedExtensions);
     const bytes = validateFileSize(size, maxBytes);
     if (!mime) {
       errorMessage = getError("duet-upload-101", errorCodes);

package/lib/collection/utils/js-utils.js

@@ -10,6 +10,17 @@ export const debounce = (func, timeout = 250) => {
     }, timeout);
   };
 };
+/**
+ * The fieldSorter function is a helper function that takes an array of objects and returns
+ * a function that can be used to sort those objects. The returned sorting function takes two
+ * parameters, which are compared using the field values in the object. If one object's field value is greater than another's, then 1 is returned; if they're equal, 0 is returned; and if one object's field value is less than another's, - 1 will be returned. This allows for easy sorting by multiple fields in any order desired (e.g., first by name ascending and then by age descending).
+ *
+ *
+ * @param fields Sort the table
+ *
+ * @return A function that takes two objects and returns an integer
+ *
+ */
 export function fieldSorter(fields) {
   return function (a, b) {
     return fields