@duetds/components 8.7.5 → 9.0.0

package/hydrate/index.js

@@ -3429,9 +3429,9 @@ class DuetAlert {
         this.isDismissed = false;
         this.timeoutID = undefined;
         this.accessibleLabelDefaults = {
-            fi: "Sulje viesti",
-            sv: "Stäng meddelandet",
-            en: "Close the message",
+            fi: "Painike viestin sulkemiseen",
+            sv: "Knapp för att stänga meddelandet",
+            en: "Button to close the message",
         };
         this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
         this.announcements = true;
@@ -3499,17 +3499,17 @@ class DuetAlert {
      */
     render() {
         const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
-        return (hAsync(Host, { key: 'e448c7c0ab12102094a5af854e0b1020db575020', class: {
+        return (hAsync(Host, { key: 'd3c53bc46ae4d9f94d286a8ca55a1891afaec2d1', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-alert-is-dismissed": this.isDismissed,
-            }, role: this.announcements ? "alert" : undefined }, hAsync("div", { key: '1dec4d58cb1c31c9ab47f87553e14a80685c70b5', class: {
+            }, role: this.announcements ? "alert" : undefined }, hAsync("div", { key: '9b7c2ede2a81e5459214b3262c08f5a096251f50', class: {
                 "duet-alert-wrapper": true,
                 "duet-p-0": this.padding === "none",
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 [this.position]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, hAsync("div", { key: '568a5ef9e4e08f0c352b00b8ddb99ba13556980d', class: {
+            } }, hAsync("div", { key: 'c372501af01265a0e962d41b0aeefa1b0803dc7a', class: {
                 "duet-alert": true,
                 "duet-alert-has-icon": !!this.icon || this.position === "below-nav",
                 "duet-alert-has-show-more": this.hasShowMoreSlot,
@@ -3518,9 +3518,9 @@ class DuetAlert {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, hAsync("div", { key: '26cef0f80aa3dcd578e3ff66ff6d0c0f7f69c73b', class: "duet-alert-container", ref: element => {
+            } }, hAsync("div", { key: '6a00f96245f482fa280c5618d1ab3e3d61ae57bf', class: "duet-alert-container", ref: element => {
                 this.alertContainer = element;
-            }, tabindex: this.focusable ? "0" : undefined }, this.icon && this.position !== "below-nav" && (hAsync("div", { key: '3bf20fbbb13c4aa2e60c06b21a82b707cfd07723', class: "duet-alert-icon" }, hAsync("duet-icon", { key: '3f18cff3b0bcac74e62a1c4de8bf3fdd35b88d42', size: "auto", name: this.icon, color: "currentColor" }))), this.position === "below-nav" && (hAsync("div", { key: '33e4ccb19c6b7d25e55cd59fad69bdc2570d7c63', class: "duet-alert-icon below-nav" }, hAsync("duet-icon", { key: '9cf06d3ae7a3939ad0c14fb24ee41539a04ba175', size: "auto", name: this.iconVariationMap[this.variation], color: this.variation === "default" ? "currentColor" : this.variation }))), hAsync("span", { key: 'aced3bd1bcfc8f6cfff4a7d5a024fc326363c912', id: this.descriptiveId }, hAsync("slot", { key: '6d51d76b80bc5f18113e7f4350da10556fa83e06' }))), this.hasShowMoreSlot && (hAsync("duet-show-more", { key: '4dece9683763396bc933a59e24658fae870ee055', margin: "none", class: "duet-alert-show-more" }, hAsync("slot", { key: '276f8ccb5fef3518daa39ab736f57bd4a2a7e315', name: "show-more" }))), this.dismissible && (hAsync("div", { key: '764114bc7107a685d2b6fd7c977c9d6d1885eb13', class: "duet-alert-dismiss" }, hAsync("duet-button", { key: 'b6b3b5909c1eab78a171d141335700620f9ea70c', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
+            }, tabindex: this.focusable ? "0" : undefined }, this.icon && this.position !== "below-nav" && (hAsync("div", { key: '3993720ebce31589b986f5441c9f8f48719f6c97', class: "duet-alert-icon" }, hAsync("duet-icon", { key: 'fc93bdce332702991e0dedf6eba0276c5d9c3e6d', size: "auto", name: this.icon, color: "currentColor" }))), this.position === "below-nav" && (hAsync("div", { key: 'e469d1feb00ce1b223b7977a1b87228933556823', class: "duet-alert-icon below-nav" }, hAsync("duet-icon", { key: '8e3407af6309c0107a6e78107c965cf28cadbec3', size: "auto", name: this.iconVariationMap[this.variation], color: this.variation === "default" ? "currentColor" : this.variation }))), hAsync("span", { key: 'e4e8494c19f24f7da051b98cef3c3efcdeb47031', id: this.descriptiveId }, hAsync("slot", { key: '1ce9a6e6c13e76f6fbf1317fa867d5400c79f41e' }))), this.hasShowMoreSlot && (hAsync("duet-show-more", { key: '2106929166ce1b954dff45ed25b218ddce15f4d9', margin: "none", class: "duet-alert-show-more" }, hAsync("slot", { key: '331aa9d74f0b995b55b6b119e569411a07673c3e', name: "show-more" }))), this.dismissible && (hAsync("div", { key: '9cfd9e835660d246540ca7452de22bcd324d4682', class: "duet-alert-dismiss" }, hAsync("duet-button", { key: 'fe950cf6c3d775160bd97b34e88ca71603a47d19', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
     }
     get element() { return getElement(this); }
     static get style() { return DuetAlertStyle0; }
@@ -5976,14 +5976,16 @@ class DuetCollapsible {
     }; }
 }
 
-const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(0, 41, 77)}.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(0, 41, 77);transition:none}.duet-theme-turva.sc-duet-combobox-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(116, 116, 117)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.selected.sc-duet-combobox{background:rgb(244, 207, 214)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);z-index:700;margin:8px 0 0;visibility:hidden;background:rgb(255, 255, 255);border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1);opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}.duet-combobox-list.open.sc-duet-combobox{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:rgb(205, 229, 241)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}";
+const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(0, 41, 77)}.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(0, 41, 77);transition:none}.duet-theme-turva.sc-duet-combobox-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(116, 116, 117)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.selected.sc-duet-combobox{background:rgb(244, 207, 214)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);z-index:700;margin:8px 0 0;visibility:hidden;background:rgb(255, 255, 255);border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1);opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}.duet-combobox-list.open.sc-duet-combobox{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:rgb(205, 229, 241)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}";
 var DuetComboboxStyle0 = duetComboboxCss;
 
 class DuetCombobox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.duetChange = createEvent$2(this, "duetChange", 3);
+        var _a, _b;
         this.listBoxId = createID("duet-combobox-list-element");
+        this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.resizeObserver = new ResizeObserver(debounce(entries => {
             var _a, _b;
             // otherwise, something is wrong, expecting 1 element only
@@ -6091,18 +6093,18 @@ class DuetCombobox {
         this.accessibleLabelDefaults = {
             en: {
                 heading: "Select:",
-                item: "{name}, ({current} of {total})",
-                itemFiltered: "{name}, ({current} of {total}, {hiddenItems} filtered)",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtered",
             },
             fi: {
                 heading: "Valitse:",
-                item: "{name}, ({current}/{total})",
-                itemFiltered: "{name}, ({current}/{total}, {hiddenItems} suodatettu)",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} suodatettu",
             },
             sv: {
                 heading: "Välj:",
-                item: "{name}, ({current} av {total})",
-                itemFiltered: "{name}, ({current} av {total}, {hiddenItems} filtrerade)",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtrerade",
             },
         };
         this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
@@ -9678,7 +9680,7 @@ function isInternetExplorer() {
     return "documentMode" in document || /Edge/.test(ua);
 }
 
-const duetLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=page-heading]){width:calc(100% + 32px);margin:0 -16px 0 -16px}@media (min-width: 36em){::slotted([slot=page-heading]){width:calc(100% + 56px);margin:0 -28px 0 -28px}}@media (min-width: 62em){::slotted([slot=page-heading]){width:calc(100% + 112px);margin:0 -56px 0 -56px}}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-middle) .heading-wrapper{padding:0 !important}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (max-width: 20.5em){.duet-layout.padding-xxx-small{padding:0}}@media (max-width: 22.5em){.duet-layout.padding-xx-small{padding:0}}@media (max-width: 35.9375em){.duet-layout.padding-x-small{padding:0}}@media (min-width: 36em){.duet-layout.padding-small{padding:0}}@media (min-width: 48em){.duet-layout.padding-medium{padding:0}}@media (min-width: 62em){.duet-layout.padding-large{padding:0}}@media (min-width: 64.0625em){.duet-layout.padding-x-large{padding:0}}@media (min-width: 76.25em){.duet-layout.padding-xx-large{padding:0}}@media (min-width: 106.25em){.duet-layout.padding-xxx-large{padding:0}}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";
+const duetLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=page-heading]){width:calc(100% + 32px);margin:0 -16px 0 -16px}@media (min-width: 36em){::slotted([slot=page-heading]){width:calc(100% + 56px);margin:0 -28px 0 -28px}}@media (min-width: 62em){::slotted([slot=page-heading]){width:calc(100% + 112px);margin:0 -56px 0 -56px}}:host(.center) ::slotted([slot=page-heading]){width:calc(100% + 32px);margin:0 -16px 0 -16px}@media (min-width: 36em){:host(.center) ::slotted([slot=page-heading]){width:calc(100% + 96px);margin:0 -48px 0 -48px}}@media (min-width: 48em){:host(.center) ::slotted([slot=page-heading]){width:calc(100% + 144px);margin:0 -72px 0 -72px}}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-middle) .heading-wrapper{padding:0 !important}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (max-width: 20.5em){.duet-layout.padding-xxx-small{padding:0}}@media (max-width: 22.5em){.duet-layout.padding-xx-small{padding:0}}@media (max-width: 35.9375em){.duet-layout.padding-x-small{padding:0}}@media (min-width: 36em){.duet-layout.padding-small{padding:0}}@media (min-width: 48em){.duet-layout.padding-medium{padding:0}}@media (min-width: 62em){.duet-layout.padding-large{padding:0}}@media (min-width: 64.0625em){.duet-layout.padding-x-large{padding:0}}@media (min-width: 76.25em){.duet-layout.padding-xx-large{padding:0}}@media (min-width: 106.25em){.duet-layout.padding-xxx-large{padding:0}}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";
 var DuetLayoutStyle0 = duetLayoutCss;
 
 /**
@@ -9711,6 +9713,7 @@ class DuetLayout {
         this.hasSidebar = !!this.element.querySelector("[slot='sidebar']");
         this.hasTop = !!this.element.querySelector("[slot='top']");
         this.hasPageHeading = !!this.element.querySelector("[slot='page-heading']");
+        checkNamedSlotElement(this.element, "page-heading", "duet-page-heading", 1, true);
         if (!this.element.querySelector("[slot='main']")) {
             console.warn("[DUET WARNING]: Nothing passed to <duet-layout> named slots. Please use one of 'main', 'sidebar' or 'top' to display contents.");
         }
@@ -9720,26 +9723,27 @@ class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (hAsync(Host, { key: 'd7002353acb1bf62a3881852a8224c893da5c029', class: {
+        return (hAsync(Host, { key: '815cf46b505a58a4f1db64f0737eb2461fffe1b4', class: {
+                center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, this.hasTop && (hAsync("div", { key: '09ca28f93b730e8b95e76e7bb83f4561312eb0ab', class: {
+            } }, this.hasTop && (hAsync("div", { key: '97f256b275cea1d8303d3c2b2fafcbc83ab17227', class: {
                 "duet-layout-top": true,
                 "duet-m-0": this.margin === "none",
                 "duet-center": this.center,
-            } }, hAsync("div", { key: 'fe4e537e589205f6a1c024605356ea3d0396164f', class: "duet-layout-top-wrapper" }, hAsync("slot", { key: 'd9495c85dcda3042c1f783d4c6b3435690d57d5c', name: "top" })))), hAsync("div", { key: '3733c28fc043441b5ceb782c9035312bf5ef718d', class: {
+            } }, hAsync("div", { key: 'e08dfb887503e2db0e2d315bce69c4243ca0a368', class: "duet-layout-top-wrapper" }, hAsync("slot", { key: 'a0a214dab158a6228b6d8e69a4ae77b51dc3da68', name: "top" })))), hAsync("div", { key: '37a6738ab3a9695408026c8d83bbc1dbeb17490e', class: {
                 "duet-layout": true,
                 "duet-layout-has-top": this.hasTop,
                 "has-sidebar": this.hasSidebar,
                 "duet-m-0": this.margin === "none",
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, hAsync("main", { key: 'cc3d3a4f6c7a5cfc7375430ab0920f8ef0e9adc3', class: "duet-main" }, this.hasPageHeading && hAsync("slot", { key: '8ae7d75fc38bd7b60aa9cab63e0aaa68e7007685', name: "page-heading" }), hAsync("slot", { key: '46db410f500910c52f95766dd82bb40426450006', name: "main" })), this.hasSidebar && (hAsync("aside", { key: '6447d8390b3915d02d47ead19852278ed2371ae3', class: "duet-sidebar" }, hAsync("div", { key: '0841703c5f1ce1a549ff865f45adfff33f826fee', class: {
+            } }, hAsync("main", { key: '9250e251d618850e3ca2a16c7e15f0d921b1cc0f', class: "duet-main" }, this.hasPageHeading && hAsync("slot", { key: '6bd2301fc4f57c18bab92ce7278ec037f38971d4', name: "page-heading" }), hAsync("slot", { key: 'd37514f4cc602e46ecbc78e87647076c9e550c94', name: "main" })), this.hasSidebar && (hAsync("aside", { key: '6ad7bd59e98bfe3123a1cccce343fb0f158387e0', class: "duet-sidebar" }, hAsync("div", { key: '6476ae186902b93bac02f5512c33ca2419202d8a', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, hAsync("slot", { key: '1e131d9c0fc743fec8aeb42a68df278a718b80a0', name: "sidebar" })))))));
+            } }, hAsync("slot", { key: '4406fe27dbd20dd18448aa76800be82b3333c306', name: "sidebar" })))))));
     }
     get element() { return getElement(this); }
     static get style() { return DuetLayoutStyle0; }
@@ -10197,7 +10201,7 @@ class DuetLogo {
     }; }
 }
 
-const duetMenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;width:100%}.duet-menu-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07)}@media (min-width: 62em){.duet-menu-bar{box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}.duet-menu-bar .top{display:none}.duet-menu-bar .bottom{display:none}.duet-menu-bar.horizontal-nav{position:relative}.duet-menu-bar.horizontal-nav .top{position:absolute;top:0;left:3.5%;display:block;width:93%;height:1px;background:rgb(245, 248, 250)}.duet-menu-bar.horizontal-nav .bottom{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:rgb(225, 227, 230)}.duet-menu-bar.horizontal-nav .more-left{position:absolute;top:0;left:-1px;z-index:1;width:56px;height:49px;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-left{display:none}}.duet-menu-bar.horizontal-nav .more-right{position:absolute;top:0;right:-1px;z-index:1;width:56px;height:49px;background:linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-right{display:none}}@media (pointer: fine){.duet-menu-bar.horizontal-nav{display:none}}@media (pointer: fine) and ((min-width: 62em)){.duet-menu-bar.horizontal-nav{display:flex}}.duet-menu-bar .container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:100%;height:3.25rem;padding:0 8px 0 20px;overflow-x:auto;scrollbar-width:none}.duet-menu-bar .container::-webkit-scrollbar{width:0;height:0}@media (min-width: 62em){.duet-menu-bar .container{height:5rem;padding:0 28px;overflow-x:visible}}.duet-menu-bar .container .list{height:100%;list-style-type:none}.duet-menu-bar .container ::slotted(*){height:100%}.duet-menu-bar .container>*{display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar .container>:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}.duet-menu-bar .container>:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}.duet-menu-bar .container ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar.duet-theme-turva{background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-menu-bar.duet-theme-turva{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}.center{font-size:1rem;font-weight:600;line-height:1.25;color:rgb(0, 41, 77)}.duet-theme-turva .center{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.right{font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 77, 128)}.duet-theme-turva .right{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}";
+const duetMenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;width:100%}.duet-menu-bar{position:relative;top:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);transition:top 0.3s}.duet-menu-bar.hidden{top:-200px}.duet-menu-bar.bottom{z-index:1}@media (min-width: 62em){.duet-menu-bar{box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}.duet-menu-bar .top{display:none}.duet-menu-bar .bottom{display:none}.duet-menu-bar.horizontal-nav{position:relative}.duet-menu-bar.horizontal-nav .top{position:absolute;top:0;left:3.5%;display:block;width:93%;height:1px;background:rgb(245, 248, 250)}.duet-menu-bar.horizontal-nav .bottom{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:rgb(225, 227, 230)}.duet-menu-bar.horizontal-nav .more-left{position:absolute;top:0;left:-1px;z-index:1;width:56px;height:49px;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-left{display:none}}.duet-menu-bar.horizontal-nav .more-right{position:absolute;top:0;right:-1px;z-index:1;width:56px;height:49px;background:linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-right{display:none}}@media (pointer: fine){.duet-menu-bar.horizontal-nav{display:none}}@media (pointer: fine) and ((min-width: 62em)){.duet-menu-bar.horizontal-nav{display:flex}}.duet-menu-bar .container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:100%;height:3.25rem;padding:0 8px 0 20px;overflow-x:auto;scrollbar-width:none}.duet-menu-bar .container::-webkit-scrollbar{width:0;height:0}@media (min-width: 62em){.duet-menu-bar .container{height:5rem;padding:0 28px;overflow-x:visible}}.duet-menu-bar .container .list{height:100%;list-style-type:none}.duet-menu-bar .container ::slotted(*){height:100%}.duet-menu-bar .container>*{display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar .container>:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}.duet-menu-bar .container>:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}.duet-menu-bar .container ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar.duet-theme-turva{background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-menu-bar.duet-theme-turva{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}.center{font-size:1rem;font-weight:600;line-height:1.25;color:rgb(0, 41, 77)}.duet-theme-turva .center{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.right{font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 77, 128)}.duet-theme-turva .right{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}";
 var DuetMenuBarStyle0 = duetMenuBarCss;
 
 /**
@@ -10216,6 +10220,7 @@ class DuetMenuBar {
             window.matchMedia(media_query_xx_large.replace(/'/g, "")),
         ];
         this.boundMqlFunctions = [];
+        this.previousYScroll = 0;
         this.scrollbarCheck = () => {
             this.leftMoreVisible = this.container.scrollLeft > 0;
             this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
@@ -10253,6 +10258,8 @@ class DuetMenuBar {
                 originalEvent: e,
             });
         };
+        this.hidden = false;
+        this.onBottom = false;
         this.logoSize = "large";
         this.leftMoreVisible = false;
         this.rightMoreVisible = false;
@@ -10262,6 +10269,32 @@ class DuetMenuBar {
         this.logoHref = undefined;
         this.logoLinkAccessibleLabel = undefined;
         this.accessibleLabel = undefined;
+        this.hideOnScroll = false;
+    }
+    checkScroll() {
+        if (!this.hideOnScroll) {
+            return;
+        }
+        if (window.scrollY > this.previousYScroll) {
+            if (window.scrollY > 100) {
+                if (this.hideOnScroll) {
+                    clearTimeout(this.zindexTimer);
+                    this.onBottom = true;
+                }
+                this.hidden = true;
+            }
+        }
+        else {
+            if (window.scrollY < 150) {
+                if (this.hideOnScroll) {
+                    this.zindexTimer = setTimeout(() => {
+                        this.onBottom = false;
+                    }, 300);
+                }
+                this.hidden = false;
+            }
+        }
+        this.previousYScroll = window.scrollY;
     }
     /**
      * Component lifecycle events.
@@ -10307,11 +10340,13 @@ class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (hAsync(Host, { key: '967d5c3a2b52d99336f77c65189b5e458166e20a' }, hAsync("nav", { key: '0269eca4392db3aee049ba6341719c4c6bd728bc', class: {
+        return (hAsync(Host, { key: '6772191fb52ef833296d4591848722cdd716fd8a' }, hAsync("nav", { key: 'bbfd138c4487382bf33cd2a27a11abae07c1cd84', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
-            }, "aria-label": this.accessibleLabel }, hAsync("div", { key: 'f0714cac1580d0dad6109ce810a30cb9b8e31ea7', class: "top" }), hAsync("div", { key: '6e2b8a7aeb95bd4edc59c71d6fd600c64668ca00', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (hAsync("div", { key: '7b719a3581ec0aeb360c3968ac32f7e0bfef2f8d' }, hAsync("duet-logo", { key: 'f195dc3f95e3b8c46e51921ec9097687a01482cd', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), hAsync("div", { key: 'cedfe9fd7cfd8b81fdc2192b29536842e86164cd', class: "list center", role: "list" }, hAsync("div", { key: '1b47f13f17f7215107307a48aebf3af6eae98ceb', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), hAsync("slot", { key: '7ecd7b75b1e971dd03b5fa5c420d1482b106e37e', name: "center" }), hAsync("div", { key: '57d6a671dc39903ae6feca1bc1e2d4296b67cd5f', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), hAsync("div", { key: '58cfdf2175cfa15f900ebb368a57e2c66afcef19', class: "list right", role: "list" }, hAsync("slot", { key: 'cce27bba83ad382ee7721085cf231dc229f19375', name: "right" }))), hAsync("div", { key: 'dd61b57a21d74369d9b5d3a3bf33eb2079406a62', class: "bottom" }))));
+                hidden: this.hidden && this.hideOnScroll,
+                bottom: this.onBottom,
+            }, "aria-label": this.accessibleLabel }, hAsync("div", { key: '0e76aa9cf8e2088809c32ffb889ea7bd0e65f328', class: "top" }), hAsync("div", { key: '3e0e929ab2dabd44122c86b3d89690084d49ee8c', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (hAsync("div", { key: 'daf3d473577d75062dbbdd2f4d277aecffddb806' }, hAsync("duet-logo", { key: 'e560ec5ffbd0ab8c03a2284c6f5c24be44304595', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), hAsync("div", { key: 'f90de1dde38ffad772fd1db9ef1949bd69651a17', class: "list center", role: "list" }, hAsync("div", { key: 'e21ef580e08ebefe3ff5a23da0a6df2d2714c2b0', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), hAsync("slot", { key: 'fbfd2e2f6a9d69d0e5f0843d30f723beadde4c1b', name: "center" }), hAsync("div", { key: '6d232d47954eb7590982353aa05a869353cd5103', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), hAsync("div", { key: '14d79bc82134dd5449172dadccdd94e39508e3ce', class: "list right", role: "list" }, hAsync("slot", { key: '383cc225f16923f7538daf24ef5f5592ace15ece', name: "right" }))), hAsync("div", { key: '5042a82358354e9a77e5f7d022d47bf46e9c6250', class: "bottom" }))));
     }
     get element() { return getElement(this); }
     static get style() { return DuetMenuBarStyle0; }
@@ -10325,11 +10360,14 @@ class DuetMenuBar {
             "logoHref": [1025, "logo-href"],
             "logoLinkAccessibleLabel": [1025, "logo-link-accessible-label"],
             "accessibleLabel": [1, "accessible-label"],
+            "hideOnScroll": [4, "hide-on-scroll"],
+            "hidden": [32],
+            "onBottom": [32],
             "logoSize": [32],
             "leftMoreVisible": [32],
             "rightMoreVisible": [32]
         },
-        "$listeners$": [[9, "resize", "onWindowResize"]],
+        "$listeners$": [[9, "scroll", "checkScroll"], [9, "resize", "onWindowResize"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -11254,7 +11292,7 @@ class DuetMultiselect {
     }; }
 }
 
-const duetNavCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}.container{position:relative;z-index:400}::slotted(*[slot=mobile]){display:inherit}::slotted(*[slot=desktop]){display:none}@media (min-width: 62em){::slotted(*[slot=mobile]){display:none}::slotted(*[slot=desktop]){display:inherit}}";
+const duetNavCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}:host([sticky]){position:relative;z-index:300}.container{position:relative;z-index:400}::slotted(*[slot=mobile]){display:inherit}::slotted(*[slot=desktop]){display:none}@media (min-width: 62em){::slotted(*[slot=mobile]){display:none}::slotted(*[slot=desktop]){display:inherit}}.sticky{position:sticky;top:0}@media (min-width: 62em){.sticky{position:relative;top:unset}}";
 var DuetNavStyle0 = duetNavCss;
 
 /**
@@ -11266,6 +11304,7 @@ class DuetNav {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.theme = "";
+        this.sticky = false;
     }
     /**
      * Component lifecycle events.
@@ -11278,7 +11317,7 @@ class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (hAsync(Host, { key: '6f01a96aa430eb180dd010f28ef4510d15a7564b' }, hAsync("div", { key: '1eaf8169259e16ce14ff53ce9f6de59e9c8da036', class: "container" }, hAsync("slot", { key: '222156a46dd91ca689a508b26b14d20d698fcab5' }), hAsync("slot", { key: 'da966bf777c9f8f6e06234113664f6334eb96c33', name: "mobile" }), hAsync("slot", { key: '7979d5fef702cbad5f26fa4db2c9835a48762cec', name: "desktop" }))));
+        return (hAsync(Host, { key: 'a92a1ddaae09ce96b5e5d11f75b90e890e405494' }, hAsync("div", { key: '5ff997d4da49fc082af18866b7e19ded4d64566c', class: { container: true, sticky: this.sticky } }, hAsync("slot", { key: 'e18cbf0c99d69c3457eda1ff7f291161f10547d4' }), hAsync("slot", { key: '70b3b0456c5e4e3307b12ad9a44f87c4861b98a5', name: "mobile" }), hAsync("slot", { key: '2ad5781a32b89b6857505c0bb6bfba2c95422dbe', name: "desktop" }))));
     }
     get element() { return getElement(this); }
     static get style() { return DuetNavStyle0; }
@@ -11286,7 +11325,8 @@ class DuetNav {
         "$flags$": 9,
         "$tagName$": "duet-nav",
         "$members$": {
-            "theme": [1025]
+            "theme": [1025],
+            "sticky": [4]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -15152,7 +15192,7 @@ class DuetScrollable {
     }; }
 }
 
-const duetSectionLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main{display:block;width:100%}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}";
+const duetSectionLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (max-width: 20.5em){.duet-layout.padding-xxx-small{padding:0}}@media (max-width: 22.5em){.duet-layout.padding-xx-small{padding:0}}@media (max-width: 35.9375em){.duet-layout.padding-x-small{padding:0}}@media (min-width: 36em){.duet-layout.padding-small{padding:0}}@media (min-width: 48em){.duet-layout.padding-medium{padding:0}}@media (min-width: 62em){.duet-layout.padding-large{padding:0}}@media (min-width: 64.0625em){.duet-layout.padding-x-large{padding:0}}@media (min-width: 76.25em){.duet-layout.padding-xx-large{padding:0}}@media (min-width: 106.25em){.duet-layout.padding-xxx-large{padding:0}}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main{display:block;width:100%}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}";
 var DuetSectionLayoutStyle0 = duetSectionLayoutCss;
 
 class DuetSectionLayout {
@@ -15160,19 +15200,21 @@ class DuetSectionLayout {
         registerInstance(this, hostRef);
         this.margin = "auto";
         this.middle = false;
+        this.paddingBreakpoint = undefined;
     }
     /**
      * render() function.
      * Always the last one in the class.
      */
     render() {
-        return (hAsync(Host, { key: '84860259acf32befb4dc83a1b84e58c49dffaaa9', class: {
+        return (hAsync(Host, { key: '3eae73081b51390b86a3a85e507afe1f88da9d3c', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, hAsync("div", { key: '8a91d29eb630fa72ac779644ff2c2df3c1e7b173', class: {
+            } }, hAsync("div", { key: '2a40eedc09186d064eea410ea5235ba9ae257468', class: {
                 "duet-layout": true,
                 "duet-m-0": this.margin === "none",
-            } }, hAsync("section", { key: '68c01ac54249408439dfab1d053533a01e868be1', class: "duet-main" }, hAsync("slot", { key: '6b7df39ead8e612c0fcc1d67945e4f4b3b195536' })))));
+                [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
+            } }, hAsync("section", { key: '1ad05f9fb04d37b682658463384fbb787990a432', class: "duet-main" }, hAsync("slot", { key: '54c91da8da32c38aaae149c9279216d7e4c83820' })))));
     }
     get element() { return getElement(this); }
     static get style() { return DuetSectionLayoutStyle0; }
@@ -15181,7 +15223,8 @@ class DuetSectionLayout {
         "$tagName$": "duet-section-layout",
         "$members$": {
             "margin": [1],
-            "middle": [4]
+            "middle": [4],
+            "paddingBreakpoint": [1, "padding-breakpoint"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -16447,7 +16490,7 @@ class DuetStepper {
     }; }
 }
 
-const duetSubmenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;z-index:1;background:rgb(243, 249, 252)}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(205, 229, 241)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 41, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(243, 249, 252);border-bottom:1px solid rgb(207, 210, 212)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(207, 210, 212)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar.duet-theme-turva .items{background:rgb(245, 245, 247)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
+const duetSubmenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;top:0;z-index:1;background:rgb(243, 249, 252);transition:top 0.4s}.duet-submenu-bar.hidden{top:-200px}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(205, 229, 241)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 41, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(243, 249, 252);border-bottom:1px solid rgb(207, 210, 212)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(207, 210, 212)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar.duet-theme-turva .items{background:rgb(245, 245, 247)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
 var DuetSubmenuBarStyle0 = duetSubmenuBarCss;
 
 class DuetSubmenuBar {
@@ -16455,6 +16498,7 @@ class DuetSubmenuBar {
         registerInstance(this, hostRef);
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
+        this.previousYScroll = 0;
         this.handleMobileView = () => {
             if (this.mql[0].matches) {
                 this.mobile = false;
@@ -16492,9 +16536,11 @@ class DuetSubmenuBar {
             const hasItems = !!this.element.querySelector("duet-submenu-bar-item");
             return hasDropdownLinks || hasLinks || hasItems;
         };
+        this.hidden = false;
         this.mobile = true;
         this.bodyScroll = true;
         this.theme = "";
+        this.hideOnScroll = false;
         this.open = false;
         this.accessibleLabel = undefined;
     }
@@ -16544,20 +16590,40 @@ class DuetSubmenuBar {
     async setFocus(options) {
         this.button.focus(options);
     }
+    checkScroll() {
+        if (!this.hideOnScroll) {
+            return;
+        }
+        if (window.scrollY > this.previousYScroll) {
+            if (window.scrollY > 100) {
+                this.hidden = true;
+            }
+        }
+        else {
+            if (window.scrollY < 150) {
+                this.hidden = false;
+            }
+        }
+        this.previousYScroll = window.scrollY;
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (hAsync(Host, { key: '993291b7d514d441a2877ba1b1d91bca382b47e8' }, hAsync("nav", { key: '310d933ae6697e4d63fb144e3fa6e422065d0581', class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (hAsync("button", { key: '151ed9a1623c2236e5bcd54f3e3867e6af389172', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        return (hAsync(Host, { key: '5e92e1ecd485d3d9fcccc551830ab0048f4da4a5' }, hAsync("nav", { key: '643b7b42e0a205886aabcc787e8f0c9b67b069f6', class: {
+                "duet-submenu-bar": true,
+                "duet-theme-turva": this.theme === "turva",
+                hidden: this.hidden,
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (hAsync("button", { key: 'd42069edb21dd9ffb3c5047dde1731c51ff1f703', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, hAsync("span", { key: 'a2c08baef8703ed21db5144947c6e49d526fe5a5', class: "label" }, hAsync("slot", { key: 'a9ed7880eb13671d773e05be1fe0687a43b0084d', name: "label" }), hAsync("duet-icon", { key: '2ca5f860e1a18749afc203ad5a1af41ad8b9f15a', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), hAsync("div", { key: 'b7bbe3dff583f47338066cb04f21ce9284f30f3a', class: {
+            }, onClick: this.onClick }, hAsync("span", { key: '7a92ee474b86be9117955083e72ca1a1e5645f62', class: "label" }, hAsync("slot", { key: '606947cb035e7735c67747c43aae35ccc7841f5c', name: "label" }), hAsync("duet-icon", { key: '2315dc51a812eb5b24d68876465dba0cc7d446cd', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), hAsync("div", { key: '2b8d170c424e1fc3f540e2bcbfde7ba36d05a196', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, hAsync("div", { key: 'd6f65370ba46b6670031520fea6c2bafa73c9314', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, hAsync("div", { key: 'bef9521e8a2a8797fda836db3c6098f0ac5a669c', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, hAsync("div", { key: '3756cf919ec1acaf5ede5db401f177f2e79ed140', class: "list", role: this.mobile ? "presentation" : "list" }, hAsync("slot", { key: '594cfb2081aa5c0a9511bbdca95898dc488077e9' }), hAsync("div", { key: '01ef003bef8fa1549957dfc4815036f480474b12', class: "list-padding" }))), hAsync("duet-overlay", { key: '9aad33941c7c06e071c2d2033e43297d3f1e7b1a', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, hAsync("div", { key: '6760e457a9210522418dd07ff7275a6d8decec4b', class: "list", role: this.mobile ? "presentation" : "list" }, hAsync("slot", { key: '2540ec6e2801b5bc8ee84df0e7a06792aeed2930' }), hAsync("div", { key: '03993868de8dd80f325aa082c4838dfec1c65237', class: "list-padding" }))), hAsync("duet-overlay", { key: 'e14ba08dd0ac6de076e8d74bf4adb4464fc9f315', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -16569,13 +16635,15 @@ class DuetSubmenuBar {
         "$tagName$": "duet-submenu-bar",
         "$members$": {
             "theme": [1025],
+            "hideOnScroll": [4, "hide-on-scroll"],
             "open": [1540],
             "accessibleLabel": [1, "accessible-label"],
+            "hidden": [32],
             "mobile": [32],
             "bodyScroll": [32],
             "setFocus": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[9, "scroll", "checkScroll"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["open", "open"]]
     }; }
@@ -17713,7 +17781,11 @@ class DuetToolbar {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "default";
-        return (hAsync(Host, { key: 'c5df9ceff6286d32e3a36f6c1a15da1bc72134d9' }, hAsync("nav", { key: '14b077c64faf7ab00df4ef30be2238e47fa11237', class: { "duet-toolbar": true, "duet-theme-turva": this.theme === "turva", [variation]: true }, "aria-label": this.accessibleLabel }, hAsync("div", { key: '198dab0024637a43dc25b0b262f69dbb5c7211c1', class: "container" }, hAsync("div", { key: '6dd0c0844a50a82e79fd501778200f0a25bc147c', class: "list", role: "list" }, hAsync("slot", { key: '66bd5d880189f5ce04f5396be8800ed3a6abdcec', name: "left" })), hAsync("div", { key: '1d2880011584339889133310cca592ce02099b73', class: "list", role: "list" }, hAsync("slot", { key: '572d0e97a6c358302e80fb424f6d60e6a8c4d8f3', name: "right" }))))));
+        return (hAsync(Host, { key: '4facdd60bf2770ac4d23b3a197abd0922439a81e' }, hAsync("nav", { key: 'a06f660682e41dfb2ab07f9035312d1ac69a37a7', class: {
+                "duet-toolbar": true,
+                "duet-theme-turva": this.theme === "turva",
+                [variation]: true,
+            }, "aria-label": this.accessibleLabel }, hAsync("div", { key: 'eb4ad22e5e60557d5352b613e8f0997f410b8d6b', class: "container" }, hAsync("div", { key: '6f61b75507ec89330908509fe11a74c0ee2828ad', class: "list", role: "list" }, hAsync("slot", { key: '0e5058eec8df0653a688a21eada26a54e68c4cc8', name: "left" })), hAsync("div", { key: '52218682d3a0daee51db5a199d905ed19e3f5904', class: "list", role: "list" }, hAsync("slot", { key: 'ace123ab65ae117b0025a415bbdc35626e2d4233', name: "right" }))))));
     }
     get element() { return getElement(this); }
     static get style() { return DuetToolbarStyle0; }

package/lib/cjs/{app-globals-d1a7f669.js → app-globals-facb1a52.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-7354b546.js');
+require('./index-194c257f.js');
 
 const setupLoggers = () => {
     {

package/lib/cjs/duet-action-button.cjs.entry.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7354b546.js');
+const index = require('./index-194c257f.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
 const createId = require('./create-id-1f8c438f.js');
 const jsUtils = require('./js-utils-92e24ba1.js');
 const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const languageUtils = require('./language-utils-83b499ff.js');
+const languageUtils = require('./language-utils-1742f9aa.js');
 const tokenUtils = require('./token-utils-2a219fda.js');
 require('./string-utils-053749ff.js');
 require('./tokens.module-3e57c188.js');

package/lib/cjs/duet-alert.cjs.entry.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7354b546.js');
+const index = require('./index-194c257f.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
 const createId = require('./create-id-1f8c438f.js');
 const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const languageUtils = require('./language-utils-83b499ff.js');
-const slotUtils = require('./slot-utils-90b6ce2c.js');
+const languageUtils = require('./language-utils-1742f9aa.js');
+const slotUtils = require('./slot-utils-ad766f8a.js');
 require('./string-utils-053749ff.js');
 
 const duetAlertCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;max-height:999px;border-radius:4px;transition:opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease}:host(:focus){outline:0}:host(.user-is-tabbing:focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-alert-is-dismissed){max-height:0;overflow:hidden;visibility:hidden !important;opacity:0;transform:scale(0.98)}:host(.duet-alert-is-dismissed) .duet-alert{margin:0 !important}.duet-alert-wrapper{margin-bottom:16px !important;position:relative;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(0, 41, 77);background:#f2f8fb;border:1px solid rgb(0, 119, 179);border-radius:4px;transition:margin 100ms 300ms ease}.duet-alert-wrapper.duet-p-0{padding:0 !important}.duet-alert-wrapper.duet-m-0{margin:0 !important}.duet-alert-wrapper.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);background:#f3f4f5;border-color:rgb(23, 28, 58)}.duet-alert-wrapper.warning{background:#fffbf4;border-color:rgb(247, 178, 40)}.duet-alert-wrapper.warning.duet-theme-turva{background:#fffaf3;border-color:rgb(250, 164, 15)}.duet-alert-wrapper.danger{background:#fdf4f7;border-color:rgb(222, 35, 98)}.duet-alert-wrapper.danger.duet-theme-turva{background:#fdf4f3;border-color:rgb(224, 42, 13)}.duet-alert-wrapper.success{background:#f2f9f7;border-color:rgb(0, 135, 90)}.duet-alert-wrapper.success.duet-theme-turva{background:#f3f9f6;border-color:rgb(8, 135, 78)}.duet-alert-wrapper.below-nav{margin-bottom:0 !important;border:0;border-bottom:1px solid rgb(225, 227, 230)}.duet-alert-wrapper .duet-alert{position:relative;width:100%;max-width:1384px;padding:16px;margin:0 auto}.duet-alert-wrapper .duet-alert.duet-alert-is-dismissible{padding:16px 48px 16px 16px;text-align:left}.duet-alert-wrapper .duet-alert.duet-alert-is-dismissible .duet-alert-container{text-align:left}.duet-alert-wrapper .duet-alert.duet-alert-has-show-more{padding-bottom:0}.duet-alert-wrapper .duet-alert.duet-alert-has-icon .duet-alert-show-more{margin-left:36px}.duet-alert-dismiss{position:absolute;top:2px;right:2px}.duet-alert-container{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 auto !important}.duet-alert-container span{width:100%}.duet-alert-has-icon .duet-alert-container{margin-top:2px !important}.duet-alert-icon{display:inline-block;align-self:center;width:20px;min-width:20px;height:20px;margin:0 16px 0 0 !important}.duet-alert-icon.below-nav{align-self:flex-start}.duet-alert-icon duet-icon{width:20px;height:20px}";
@@ -47,9 +47,9 @@ const DuetAlert = class {
         this.isDismissed = false;
         this.timeoutID = undefined;
         this.accessibleLabelDefaults = {
-            fi: "Sulje viesti",
-            sv: "Stäng meddelandet",
-            en: "Close the message",
+            fi: "Painike viestin sulkemiseen",
+            sv: "Knapp för att stänga meddelandet",
+            en: "Button to close the message",
         };
         this.accessibleLabel = languageUtils.getLocaleString(this.accessibleLabelDefaults);
         this.announcements = true;
@@ -117,17 +117,17 @@ const DuetAlert = class {
      */
     render() {
         const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
-        return (index.h(index.Host, { key: 'e448c7c0ab12102094a5af854e0b1020db575020', class: {
+        return (index.h(index.Host, { key: 'd3c53bc46ae4d9f94d286a8ca55a1891afaec2d1', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-alert-is-dismissed": this.isDismissed,
-            }, role: this.announcements ? "alert" : undefined }, index.h("div", { key: '1dec4d58cb1c31c9ab47f87553e14a80685c70b5', class: {
+            }, role: this.announcements ? "alert" : undefined }, index.h("div", { key: '9b7c2ede2a81e5459214b3262c08f5a096251f50', class: {
                 "duet-alert-wrapper": true,
                 "duet-p-0": this.padding === "none",
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 [this.position]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, index.h("div", { key: '568a5ef9e4e08f0c352b00b8ddb99ba13556980d', class: {
+            } }, index.h("div", { key: 'c372501af01265a0e962d41b0aeefa1b0803dc7a', class: {
                 "duet-alert": true,
                 "duet-alert-has-icon": !!this.icon || this.position === "below-nav",
                 "duet-alert-has-show-more": this.hasShowMoreSlot,
@@ -136,9 +136,9 @@ const DuetAlert = class {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, index.h("div", { key: '26cef0f80aa3dcd578e3ff66ff6d0c0f7f69c73b', class: "duet-alert-container", ref: element => {
+            } }, index.h("div", { key: '6a00f96245f482fa280c5618d1ab3e3d61ae57bf', class: "duet-alert-container", ref: element => {
                 this.alertContainer = element;
-            }, tabindex: this.focusable ? "0" : undefined }, this.icon && this.position !== "below-nav" && (index.h("div", { key: '3bf20fbbb13c4aa2e60c06b21a82b707cfd07723', class: "duet-alert-icon" }, index.h("duet-icon", { key: '3f18cff3b0bcac74e62a1c4de8bf3fdd35b88d42', size: "auto", name: this.icon, color: "currentColor" }))), this.position === "below-nav" && (index.h("div", { key: '33e4ccb19c6b7d25e55cd59fad69bdc2570d7c63', class: "duet-alert-icon below-nav" }, index.h("duet-icon", { key: '9cf06d3ae7a3939ad0c14fb24ee41539a04ba175', size: "auto", name: this.iconVariationMap[this.variation], color: this.variation === "default" ? "currentColor" : this.variation }))), index.h("span", { key: 'aced3bd1bcfc8f6cfff4a7d5a024fc326363c912', id: this.descriptiveId }, index.h("slot", { key: '6d51d76b80bc5f18113e7f4350da10556fa83e06' }))), this.hasShowMoreSlot && (index.h("duet-show-more", { key: '4dece9683763396bc933a59e24658fae870ee055', margin: "none", class: "duet-alert-show-more" }, index.h("slot", { key: '276f8ccb5fef3518daa39ab736f57bd4a2a7e315', name: "show-more" }))), this.dismissible && (index.h("div", { key: '764114bc7107a685d2b6fd7c977c9d6d1885eb13', class: "duet-alert-dismiss" }, index.h("duet-button", { key: 'b6b3b5909c1eab78a171d141335700620f9ea70c', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
+            }, tabindex: this.focusable ? "0" : undefined }, this.icon && this.position !== "below-nav" && (index.h("div", { key: '3993720ebce31589b986f5441c9f8f48719f6c97', class: "duet-alert-icon" }, index.h("duet-icon", { key: 'fc93bdce332702991e0dedf6eba0276c5d9c3e6d', size: "auto", name: this.icon, color: "currentColor" }))), this.position === "below-nav" && (index.h("div", { key: 'e469d1feb00ce1b223b7977a1b87228933556823', class: "duet-alert-icon below-nav" }, index.h("duet-icon", { key: '8e3407af6309c0107a6e78107c965cf28cadbec3', size: "auto", name: this.iconVariationMap[this.variation], color: this.variation === "default" ? "currentColor" : this.variation }))), index.h("span", { key: 'e4e8494c19f24f7da051b98cef3c3efcdeb47031', id: this.descriptiveId }, index.h("slot", { key: '1ce9a6e6c13e76f6fbf1317fa867d5400c79f41e' }))), this.hasShowMoreSlot && (index.h("duet-show-more", { key: '2106929166ce1b954dff45ed25b218ddce15f4d9', margin: "none", class: "duet-alert-show-more" }, index.h("slot", { key: '331aa9d74f0b995b55b6b119e569411a07673c3e', name: "show-more" }))), this.dismissible && (index.h("div", { key: '9cfd9e835660d246540ca7452de22bcd324d4682', class: "duet-alert-dismiss" }, index.h("duet-button", { key: 'fe950cf6c3d775160bd97b34e88ca71603a47d19', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
     }
     get element() { return index.getElement(this); }
 };