@duetds/components 5.3.5 → 5.4.2

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 = "";
     /**
@@ -418,8 +418,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 +493,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 +504,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 +536,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) },
+                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())))));
+    // 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,15 +641,15 @@ 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),
+                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" },
                   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) => {
@@ -579,96 +661,17 @@ export class DuetHeader {
                       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 +980,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,

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

@@ -8,8 +8,11 @@ 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
  * @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 +28,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.
@@ -196,7 +200,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" },
@@ -213,7 +217,7 @@ export class DuetHero {
         h("div", { class: "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),
+          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 +234,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 +280,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-input/duet-input.js

@@ -30,6 +30,11 @@ export class DuetInput {
       fi: "Tyhjennä",
       sv: "Rensa",
     });
+    this.timeAnnouncement = getLocaleString({
+      en: "Time",
+      fi: "Aika",
+      sv: "Tid",
+    });
     /**
      * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
      */
@@ -281,14 +286,26 @@ export class DuetInput {
     else if (!this.pattern && this.type === "tel") {
       inputProps.pattern = "[0-9+ ]+";
     }
+    let selectedTime;
+    if (this.value) {
+      selectedTime = new Date();
+      try {
+        selectedTime.setHours(Number(this.value.slice(0, 2)), Number(this.value.slice(3, 5)), 0, 0);
+      }
+      catch (e) {
+        selectedTime = undefined;
+      }
+    }
     return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) },
+      this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement} ${selectedTime.toLocaleTimeString()}` : "")),
       h("div", { class: {
           "duet-input-container": true,
           "duet-theme-turva": this.theme === "turva",
           [`duet-input-variation-${this.variation}`]: true,
           "duet-label-hidden": this.labelHidden,
           "duet-input-top-caption-shown": this.isCaptionVisible,
-          "has-icon": !!this.icon || (this.type !== "text" && this.type !== "tel" && this.type !== "password"),
+          "has-icon": !!this.icon ||
+            (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time"),
           "has-error": !!this.error,
           "has-clear": this.clear,
         } },
@@ -296,7 +313,7 @@ export class DuetInput {
         this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
         h("div", { class: "duet-input-relative" },
-          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)),
+          this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)),
           h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
               "duet-input": true,
               disabled: this.disabled,
@@ -309,6 +326,7 @@ export class DuetInput {
             this.type !== "text" &&
             this.type !== "tel" &&
             this.type !== "password" &&
+            this.type !== "time" &&
             this.variation !== "button" && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))),
           this.clear && this.value && (h("div", { class: "duet-input-clear-icon" },
@@ -697,7 +715,7 @@ export class DuetInput {
       "mutable": false,
       "complexType": {
         "original": "DuetInputType",
-        "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\"",
+        "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\"",
         "references": {
           "DuetInputType": {
             "location": "local"

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { getLocaleString, sanitizeString } from "../../utils/language-utils";
@@ -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

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

@@ -35,7 +35,7 @@ export function getTheme(theme = "") {
   }
   return "";
 }
-function capitalizeFirstLetter(string) {
+export function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 function hasType(t, str = "") {