@duetds/components 8.7.4 → 8.7.6

package/lib/dist-custom-elements/duet-layout.js

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-ddf8ca53.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f775dd32.js';
 import { i as isInternetExplorer } from './p-43b89e38.js';
+import { c as checkNamedSlotElement } from './p-fc9b988f.js';
 
-const duetLayoutCss = "*,*::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-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)}}";
 const DuetLayoutStyle0 = duetLayoutCss;
 
 const DuetLayout$1 = /*@__PURE__*/ proxyCustomElement(class DuetLayout extends H {
@@ -17,6 +18,7 @@ const DuetLayout$1 = /*@__PURE__*/ proxyCustomElement(class DuetLayout extends H
          */
         this.hasSidebar = false;
         this.hasTop = false;
+        this.hasPageHeading = false;
         this.sticky = false;
         this.margin = "auto";
         this.stickyDistance = "with-links";
@@ -31,6 +33,8 @@ const DuetLayout$1 = /*@__PURE__*/ proxyCustomElement(class DuetLayout extends H
     componentWillLoad() {
         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.");
         }
@@ -40,26 +44,27 @@ const DuetLayout$1 = /*@__PURE__*/ proxyCustomElement(class DuetLayout extends H
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0647cb148ef8d6e27dfc8733854bdece644a2f11', class: {
+        return (h(Host, { key: '815cf46b505a58a4f1db64f0737eb2461fffe1b4', class: {
+                center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, this.hasTop && (h("div", { key: '93b8d11681cdcd0e063e08f62f3e8d9c4682ef69', class: {
+            } }, this.hasTop && (h("div", { key: '97f256b275cea1d8303d3c2b2fafcbc83ab17227', class: {
                 "duet-layout-top": true,
                 "duet-m-0": this.margin === "none",
                 "duet-center": this.center,
-            } }, h("div", { key: 'acf886364c56f0ac0a979a680ebe9a3548f15b5f', class: "duet-layout-top-wrapper" }, h("slot", { key: '8c3ecc05c8ecfe7485e44fb30c9b3edea98acf3e', name: "top" })))), h("div", { key: 'f3f54254dc431cc83eea2e7a1d7f208f28bda58e', class: {
+            } }, h("div", { key: 'e08dfb887503e2db0e2d315bce69c4243ca0a368', class: "duet-layout-top-wrapper" }, h("slot", { key: 'a0a214dab158a6228b6d8e69a4ae77b51dc3da68', name: "top" })))), h("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,
-            } }, h("main", { key: 'b676f67b4cd446ca21d9ba571715a1591ccbb6af', class: "duet-main" }, h("slot", { key: 'efeb3b727f88ac03a86630677877b2f4a3df5544', name: "main" })), this.hasSidebar && (h("aside", { key: '0e327c7aab74483c878fe944e9a186932400a1cb', class: "duet-sidebar" }, h("div", { key: '0bbda350b036b27ddf5dca11635fd8022eed54a8', class: {
+            } }, h("main", { key: '9250e251d618850e3ca2a16c7e15f0d921b1cc0f', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '6bd2301fc4f57c18bab92ce7278ec037f38971d4', name: "page-heading" }), h("slot", { key: 'd37514f4cc602e46ecbc78e87647076c9e550c94', name: "main" })), this.hasSidebar && (h("aside", { key: '6ad7bd59e98bfe3123a1cccce343fb0f158387e0', class: "duet-sidebar" }, h("div", { key: '6476ae186902b93bac02f5512c33ca2419202d8a', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '3527bcf06aeff1bb118f6f5901807a694439b688', name: "sidebar" })))))));
+            } }, h("slot", { key: '4406fe27dbd20dd18448aa76800be82b3333c306', name: "sidebar" })))))));
     }
     get element() { return this; }
     static get style() { return DuetLayoutStyle0; }

package/lib/dist-custom-elements/duet-link.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetLink$1, d as defineCustomElement$1 } from './p-9235bfa6.js';
+import { D as DuetLink$1, d as defineCustomElement$1 } from './p-bea6b3d1.js';
 
 const DuetLink = DuetLink$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-list-item.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetListItem$1, d as defineCustomElement$1 } from './p-73dbf206.js';
+import { D as DuetListItem$1, d as defineCustomElement$1 } from './p-ce9b2f1f.js';
 
 const DuetListItem = DuetListItem$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-list.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetList$1, d as defineCustomElement$1 } from './p-6252238d.js';
+import { D as DuetList$1, d as defineCustomElement$1 } from './p-8a49ebed.js';
 
 const DuetList = DuetList$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-logo.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetLogo$1, d as defineCustomElement$1 } from './p-c78481a5.js';
+import { D as DuetLogo$1, d as defineCustomElement$1 } from './p-bfd62839.js';
 
 const DuetLogo = DuetLogo$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-menu-bar-button.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-ddf8ca53.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f775dd32.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-3de90233.js';
+import { d as defineCustomElement$2 } from './p-0c27489b.js';
 
 const duetMenuBarButtonCss = "*,*::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;height:100%}.duet-menu-bar-button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;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:inherit;color:inherit;text-align:center;text-decoration:none;cursor:pointer}.duet-menu-bar-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-menu-bar-button:focus,.duet-menu-bar-button:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-menu-bar-button .menu-bar-button-icon{width:20px;height:20px}@media (min-width: 62em){.duet-menu-bar-button .menu-bar-button-icon{width:16px;height:16px}}.duet-menu-bar-button.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\"}@media (min-width: 62em){.duet-menu-bar-button{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-button{padding:0 28px}}@media (min-width: 62em){.duet-menu-bar-button:hover{color:rgb(0, 119, 179)}.duet-menu-bar-button:hover.duet-theme-turva{color:rgb(198, 12, 48)}}";
 const DuetMenuBarButtonStyle0 = duetMenuBarButtonCss;
@@ -46,10 +46,10 @@ const DuetMenuBarButton$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarBu
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2d7d290b93ece34e74dbecb9b7d30a3a899b37b0', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '99cb1fbd3aab73f4c75484ee7755c00fdf521965', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '9206620e16533fa13b7b84f47b8543a70a7b2410', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'e172b1d487ac1b425e26b56485f03b6ee2453110', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '811e8d68347707cf1011a541db3e857ec947e8d4', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '543ce298b12035fd8ebe69dfa5ca25f4c431a277' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '46afda060d34d192871f0601c64c188236389aed', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '61ead72d9ec280bc7a757582c62d7028ce400d22' }))));
     }
     get element() { return this; }
     static get style() { return DuetMenuBarButtonStyle0; }

package/lib/dist-custom-elements/duet-menu-bar-dropdown-link.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-ddf8ca53.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f775dd32.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { b as isEscapeKey } from './p-785686e3.js';
-import { d as defineCustomElement$2 } from './p-3de90233.js';
+import { d as defineCustomElement$2 } from './p-0c27489b.js';
 
 const duetMenuBarDropdownLinkCss = "*,*::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%;height:100%}.duet-menu-bar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:0.5rem 8px;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.5;color:rgb(0, 41, 77);text-align:center;text-decoration:none}.duet-menu-bar-dropdown-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-menu-bar-dropdown-link:focus,.duet-menu-bar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-menu-bar-dropdown-link.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)}.duet-menu-bar-dropdown-link:hover{background:rgb(230, 242, 248)}.duet-menu-bar-dropdown-link:hover.duet-theme-turva{background:rgb(228, 228, 230)}";
 const DuetMenuBarDropdownLinkStyle0 = duetMenuBarDropdownLinkCss;
@@ -48,11 +48,11 @@ const DuetMenuBarDropdownLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetMen
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f7702f6502c6ec2bed8ef4d87146a6523456a5e4' }, h("a", { key: '5923a9d404aaa1b183edef94c7f66e305a0d4a46', class: {
+        return (h(Host, { key: 'e3310b8dfef57c95572f69574ab3f2844f0a8fd2' }, h("a", { key: '0bc7dc99b57576902aa56cf53e0f0a092d7d1606', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '29ac748920ac962f47fd43548ccdedb42b8517e1', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '6e1f0d21b27a696c4bc2ba6369d884e7acc77db4' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '0434d95f76ea5e61047da18bac14f7261626a161', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '8b32a81bdf0bd30bb14486a8593e31f1cd86632e' }))));
     }
     get element() { return this; }
     static get style() { return DuetMenuBarDropdownLinkStyle0; }

package/lib/dist-custom-elements/duet-menu-bar-dropdown.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-ddf8ca53.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f775dd32.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { b as isEscapeKey } from './p-785686e3.js';
-import { d as defineCustomElement$2 } from './p-3de90233.js';
+import { d as defineCustomElement$2 } from './p-0c27489b.js';
 
 const duetMenuBarDropdownCss = "*,*::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;height:100%}@media (min-width: 62em){:host(:last-child) .duet-menu-bar-dropdown button{padding:0 16px 0 16px}}@media (min-width: 76.25em){:host(:last-child) .duet-menu-bar-dropdown button{padding:0 16px 0 28px}}.duet-menu-bar-dropdown{position:relative;height:100%}.duet-menu-bar-dropdown button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;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, 77, 128);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-menu-bar-dropdown button{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-dropdown button{padding:0 28px}}.duet-menu-bar-dropdown button:hover{color:rgb(0, 119, 179)}.duet-menu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-menu-bar-dropdown button .label{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-menu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-menu-bar-dropdown button.active .caret{transform:rotate(180deg)}.duet-theme-turva .duet-menu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-menu-bar-dropdown button.active::after{position:absolute;top:auto;bottom:2px;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(2px)}.duet-theme-turva .duet-menu-bar-dropdown button.active::after{background:rgb(198, 12, 48)}.duet-menu-bar-dropdown .menu-bar-dropdown-icon{width:20px;height:20px}@media (min-width: 62em){.duet-menu-bar-dropdown .menu-bar-dropdown-icon{width:16px;height:16px}}.duet-menu-bar-dropdown .items{position:absolute;top:70%;right:0%;left:auto;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:225px;padding:8px;color:rgb(0, 41, 77);background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15)}.duet-menu-bar-dropdown .items.hidden{display:none}.duet-menu-bar-dropdown.duet-theme-turva button{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-menu-bar-dropdown.duet-theme-turva button:hover{color:rgb(198, 12, 48)}.duet-menu-bar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-menu-bar-dropdown.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-menu-bar-dropdown.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-menu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}";
 const DuetMenuBarDropdownStyle0 = duetMenuBarDropdownCss;
@@ -62,17 +62,17 @@ const DuetMenuBarDropdown$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f7cb616fbeb0e89cd04e89f7a19b73e4f6305b57', role: "listitem" }, h("div", { key: 'a3f4701b11e9317377629b5fe2148530dab3c0a7', class: {
+        return (h(Host, { key: 'b7505ee892ea3ee2d0e0f37e3638b7d2b783712a', role: "listitem" }, h("div", { key: '751e646811727d6f6a24a416df10f1c543940879', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: '928feac0a153bab46435694b95f4b0cbb2930874', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'fef18c42d08e89e0db82ca29c0aacf1cb9ff5326', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '7bd089cdec793c5853d3a2fb50c3f5c4ba579a4a', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'baf4943655e0fd4ec680eec5ecf523828ddb2584', class: "label" }, h("slot", { key: '726942f2da202ad37393a7979a5ee49d3c830561', name: "label" }), h("duet-icon", { key: '68c1eb71b7c4112ebc3ea30d62324c7c1b0aea4e', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '0f1c939e3cc1b537f176ca076a2e20bc38f804d7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '76888e1deea9cbb8e7bb3bdf5336669e2ae413e5', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'd6d0c4bd9426aa41b4ba68b222669c922943150b', class: "label" }, h("slot", { key: '6478ad4df0cc0f954ef1a2ea8c4d7d6379e3ee83', name: "label" }), h("duet-icon", { key: '4118eec0a8f4d17b22aeab5efb9e7af3d9c6d096', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'd7026456d474f327320675a3174ec3eb1caf706d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '62b2f301e57348d2308017ceaff0f22b8858eaef' })))));
+            } }, h("slot", { key: 'da2e4f2687f3aa80426a260df734e79cdb69c48a' })))));
     }
     get element() { return this; }
     static get style() { return DuetMenuBarDropdownStyle0; }

package/lib/dist-custom-elements/duet-menu-bar-item.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-ddf8ca53.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f775dd32.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-3de90233.js';
+import { d as defineCustomElement$2 } from './p-0c27489b.js';
 
 const duetMenuBarItemCss = "*,*::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;height:100%}.duet-menu-bar-item{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;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:inherit;font-weight:inherit;color:inherit;color:inherit;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.duet-menu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-menu-bar-item:focus,.duet-menu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-menu-bar-item .leading-icon,.duet-menu-bar-item .trailing-icon{width:20px;height:20px}@media (min-width: 62em){.duet-menu-bar-item .leading-icon,.duet-menu-bar-item .trailing-icon{width:16px;height:16px}}.duet-menu-bar-item .trailing-icon.trailing-icon-arrow{width:7px;height:7px}.duet-menu-bar-item[aria-expanded=true]{color:rgb(0, 119, 179)}.duet-menu-bar-item[aria-expanded=true] .trailing-icon.rotate{transform:rotate(180deg)}.duet-menu-bar-item.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\"}.duet-menu-bar-item.duet-theme-turva[aria-expanded=true]{color:rgb(198, 12, 48)}@media (min-width: 62em){.duet-menu-bar-item{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-item{padding:0 28px}}.duet-menu-bar-item.active{color:rgb(0, 119, 179)}.duet-menu-bar-item.active::after{position:absolute;top:auto;bottom:2px;left:0;z-index:1;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(2px)}@media (min-width: 62em){.duet-menu-bar-item.active::after{z-index:auto;height:2px}}.duet-menu-bar-item.active.duet-theme-turva{color:rgb(198, 12, 48)}.duet-menu-bar-item.active.duet-theme-turva::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-menu-bar-item:hover{color:rgb(0, 119, 179)}.duet-menu-bar-item:hover.duet-theme-turva{color:rgb(198, 12, 48)}}";
 const DuetMenuBarItemStyle0 = duetMenuBarItemCss;
@@ -40,11 +40,11 @@ const DuetMenuBarItem$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarItem
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'a8d19e16b23cd70c744f29a603093db8846d522d', role: "listitem" }, h(TagName, { key: '84e76a7bc574e20f77c1e8a09531e40c80d3d7f1', ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'd2a4ae5947cf7b820de11d1c92be082aefa72e3f', role: "listitem" }, h(TagName, { key: 'bb5eef2f76aed3e48357bc4cc399794df49ca320', ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: '4a80b815a0d9ee32e7ab84210bfd0f004a754bd6', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '334e9b3d14cf86e8b3757f34953b047219b23a98' }), this.trailingIcon && (h("duet-icon", { key: '8faee80d1e563ad7abca96c635f193a203ae44c2', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: 'f0a8e147fe0b4e6beb3e9c0e68d73d17d8903179', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '290f322579d4af32f271ae21d86be07e4938dced' }), this.trailingIcon && (h("duet-icon", { key: 'a34778af006706400452949461d96ab1dece7608', class: {
                 "trailing-icon": true,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,

package/lib/dist-custom-elements/duet-menu-bar-link.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-ddf8ca53.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f775dd32.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-3de90233.js';
+import { d as defineCustomElement$2 } from './p-0c27489b.js';
 
 const duetMenuBarLinkCss = "*,*::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;height:100%}.duet-menu-bar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:inherit;text-align:center;text-decoration:none;white-space:nowrap}.duet-menu-bar-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-menu-bar-link:focus,.duet-menu-bar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-menu-bar-link .menu-bar-link-icon{width:20px;height:20px}@media (min-width: 62em){.duet-menu-bar-link .menu-bar-link-icon{width:16px;height:16px}}.duet-menu-bar-link.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\"}@media (min-width: 62em){.duet-menu-bar-link{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-link{padding:0 28px}}.duet-menu-bar-link.active{color:rgb(0, 119, 179)}.duet-menu-bar-link.active::after{position:absolute;top:auto;bottom:2px;left:0;z-index:1;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(2px)}@media (min-width: 62em){.duet-menu-bar-link.active::after{z-index:auto;height:2px}}.duet-menu-bar-link.active.duet-theme-turva{color:rgb(198, 12, 48)}.duet-menu-bar-link.active.duet-theme-turva::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-menu-bar-link:hover{color:rgb(0, 119, 179)}.duet-menu-bar-link:hover.duet-theme-turva{color:rgb(198, 12, 48)}}";
 const DuetMenuBarLinkStyle0 = duetMenuBarLinkCss;
@@ -30,11 +30,11 @@ const DuetMenuBarLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarLink
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '094d7e86967446a1b42ad3c0bd117815807d119c', role: "listitem" }, h("a", { key: '0b7f1206828ff009f5470b77f6bfbf35cea8a096', class: {
+        return (h(Host, { key: '570640efc7db1d51c8ec33f775b2b13ffd8fd909', role: "listitem" }, h("a", { key: '62ed2f6bf339d40211f56ff0e78ab61aa71a6c9a', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '38082080f6bc0ac1ba5bb01a007424ed85c681ad', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'c1b71a2b6af96adb50d6b47daaff277e4d369527' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '45e66a513cff3cda4b8f4ab51fc0d404391265a1', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '144d7755346f5dc042b2ad7836a3020d954b6648' }))));
     }
     get element() { return this; }
     static get style() { return DuetMenuBarLinkStyle0; }

package/lib/dist-custom-elements/duet-menu-bar.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ddf8ca53.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f775dd32.js';
 import { a as media_query_large, c as media_query_xx_large } from './p-d5c03b61.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { a as getLanguage } from './p-44837462.js';
-import { d as defineCustomElement$2 } from './p-c78481a5.js';
+import { a as getLanguage } from './p-c3f95284.js';
+import { d as defineCustomElement$2 } from './p-bfd62839.js';
 
-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)}";
 const DuetMenuBarStyle0 = duetMenuBarCss;
 
 const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends H {
@@ -24,6 +24,7 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
             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;
@@ -61,6 +62,8 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
                 originalEvent: e,
             });
         };
+        this.hidden = false;
+        this.onBottom = false;
         this.logoSize = "large";
         this.leftMoreVisible = false;
         this.rightMoreVisible = false;
@@ -70,6 +73,32 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
         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.
@@ -116,11 +145,13 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '9386904e22c17ede07fce421b4ececdcc4462311' }, h("nav", { key: 'ba224a6339f5402655e10937fb21812c7c174dc8', class: {
+        return (h(Host, { key: '6772191fb52ef833296d4591848722cdd716fd8a' }, h("nav", { key: 'bbfd138c4487382bf33cd2a27a11abae07c1cd84', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c0da13104e0e312f453ba493cebc3d523635e2b2', class: "top" }), h("div", { key: '03aaa19f264070866cc7e6536a7679972d53e3f5', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '72234559418bbf0fbe2749343faa2e0d7cb07f46' }, h("duet-logo", { key: 'dbbf0ecca199c2a470390441038c014ac147a7c9', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '55048a334800842fbd6b6cf55917d10f8eea6642', class: "list center", role: "list" }, h("div", { key: '6934aeb5d219dd31d7ad22993b08fd025e0c0e37', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'edf21f84609df58a98fca817a3a5f25b4128bfb0', name: "center" }), h("div", { key: '30d07068be15b133106e2ab6e6953029e08ca792', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'ead4201e0e8df9a2e1ec43254c3a63d167ff09da', class: "list right", role: "list" }, h("slot", { key: '66cb29f7147b514d6944de416aacaa15b21fc730', name: "right" }))), h("div", { key: '4e99473e810bac89400b9493887e9289340d0bdf', class: "bottom" }))));
+                hidden: this.hidden && this.hideOnScroll,
+                bottom: this.onBottom,
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '0e76aa9cf8e2088809c32ffb889ea7bd0e65f328', class: "top" }), h("div", { key: '3e0e929ab2dabd44122c86b3d89690084d49ee8c', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'daf3d473577d75062dbbdd2f4d277aecffddb806' }, h("duet-logo", { key: 'e560ec5ffbd0ab8c03a2284c6f5c24be44304595', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'f90de1dde38ffad772fd1db9ef1949bd69651a17', class: "list center", role: "list" }, h("div", { key: 'e21ef580e08ebefe3ff5a23da0a6df2d2714c2b0', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'fbfd2e2f6a9d69d0e5f0843d30f723beadde4c1b', name: "center" }), h("div", { key: '6d232d47954eb7590982353aa05a869353cd5103', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '14d79bc82134dd5449172dadccdd94e39508e3ce', class: "list right", role: "list" }, h("slot", { key: '383cc225f16923f7538daf24ef5f5592ace15ece', name: "right" }))), h("div", { key: '5042a82358354e9a77e5f7d022d47bf46e9c6250', class: "bottom" }))));
     }
     get element() { return this; }
     static get style() { return DuetMenuBarStyle0; }
@@ -131,10 +162,13 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
         "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]
-    }, [[9, "resize", "onWindowResize"]]]);
+    }, [[9, "scroll", "checkScroll"], [9, "resize", "onWindowResize"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/lib/dist-custom-elements/duet-modal.js

@@ -1,22 +1,22 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-ddf8ca53.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-f775dd32.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './p-8354d1f1.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as DuetStringsPleaseWaitDefaults } from './p-9df4cfa4.js';
-import { f as focusElement } from './p-b0d57d02.js';
+import { f as focusElement } from './p-c3854d56.js';
 import { b as isEscapeKey } from './p-785686e3.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-44837462.js';
-import { h as hasSlot } from './p-f9f0bae0.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-c3f95284.js';
+import { h as hasSlot } from './p-fc9b988f.js';
 import { T as Teleport } from './p-ca3cb21e.js';
-import { d as defineCustomElement$8 } from './p-82944400.js';
-import { d as defineCustomElement$7 } from './p-d83bae6a.js';
-import { d as defineCustomElement$6 } from './p-3de90233.js';
-import { d as defineCustomElement$5 } from './p-e5c55500.js';
-import { d as defineCustomElement$4 } from './p-00c553b0.js';
-import { d as defineCustomElement$3 } from './p-e2f8dc0c.js';
-import { d as defineCustomElement$2 } from './p-e37f787b.js';
+import { d as defineCustomElement$8 } from './p-866149bf.js';
+import { d as defineCustomElement$7 } from './p-2712b694.js';
+import { d as defineCustomElement$6 } from './p-0c27489b.js';
+import { d as defineCustomElement$5 } from './p-56785ef4.js';
+import { d as defineCustomElement$4 } from './p-1dd06f89.js';
+import { d as defineCustomElement$3 } from './p-5491b752.js';
+import { d as defineCustomElement$2 } from './p-d3ae0195.js';
 
 const duetModalCss = "*,*::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}.duet-modal-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;max-height:100vh;overflow-y:auto;visibility:hidden;opacity:0;transition:300ms ease;transition-delay:200ms}.duet-modal-container.duet-modal-active{visibility:visible;opacity:1;transition:300ms ease;transition-delay:0s}.duet-modal-container.duet-disable-transitions{transition:none}.duet-modal-container.duet-modal-slide-up{overflow:hidden}::slotted(img){width:100%}.duet-modal-inner{display:flex;align-items:center;width:100%;min-height:100%;padding:20px 16px}@media (min-width: 36em){.duet-modal-inner{padding:48px 16px}}.duet-modal-inner.duet-modal-slide-up{align-items:stretch;justify-content:center;height:100%;padding-top:48px;padding-bottom:0;overflow:hidden}.duet-modal-inner.duet-modal-slide-up::after{position:absolute;bottom:0;z-index:300;display:block;width:100%;max-width:686px;height:48px;margin:auto;pointer-events:none;content:\"\";background:linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))}.duet-modal-inner.duet-modal-slide-up::after.small{max-width:545px}.duet-modal-inner.duet-modal-slide-up::after.large{max-width:100%}@media (min-width: 36em){.duet-modal-inner.duet-modal-slide-up::after.large{max-width:1110px}}@media (max-width: 35.9375em){.duet-modal-inner.large{padding-right:0;padding-left:0}.duet-modal-inner.duet-modal-slide-up{padding:0;padding-top:28px}}.duet-modal{position:relative;width:100%;max-width:686px;margin:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:rgb(0, 41, 77);background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:300ms ease;transition-delay:0ms;transform:scale(0.96)}.duet-theme-turva .duet-modal{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-modal-active .duet-modal{opacity:1;transition:300ms ease;transition-delay:200ms;transform:none}.duet-modal-active .duet-modal.slide-up{top:0;transition:top 600ms ease}.duet-modal.loader{text-align:center;background:transparent}.duet-modal.loader .duet-modal-close{display:none}.duet-modal.loader .duet-modal-spinner{position:relative;height:120px}.duet-modal.loader .duet-modal-inner-slot-default{position:relative;backdrop-filter:blur(10px)}.duet-modal.loader duet-paragraph.duet-loader-message{position:absolute;opacity:0;transition:all 300ms ease;transform:scaleY(0);transform-origin:top}.duet-modal.loader duet-paragraph.duet-loader-message.show{opacity:1;transform:scaleY(1);transform-origin:bottom}.duet-modal.loader duet-paragraph.duet-loader-message.show::part(duet-paragraph){backdrop-filter:blur(10px)}.duet-disable-transitions .duet-modal{transition:none}.duet-modal.small{max-width:545px}.duet-modal.large{max-width:100%}@media (min-width: 36em){.duet-modal.large{max-width:1110px}}.duet-modal.slide-up{top:100vh;margin:0;overflow:auto;border-radius:4px 4px 0 0;opacity:1;transition:top 600ms ease}@media (max-width: 35.9375em){.duet-modal.slide-up{border-radius:16px 16px 0 0}}.duet-modal.duet-modal-has-sticky-header{height:100%;overflow:auto}.duet-modal:focus{outline:0}.duet-modal-body,.duet-modal-sticky-header{width:100%;padding:36px 28px}.duet-modal-body.duet-modal-gutter-none,.duet-modal-sticky-header.duet-modal-gutter-none{padding:0 !important}.duet-modal-body.duet-modal-gutter-small,.duet-modal-sticky-header.duet-modal-gutter-small{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:48px 36px}@media (max-width: 22.5em){.duet-modal-body,.duet-modal-sticky-header{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:48px 28px}}@media (max-width: 35.9375em){.duet-modal-body,.duet-modal-sticky-header{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:48px 36px}}@media (min-width: 36em){.duet-modal-body,.duet-modal-sticky-header{padding:36px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:28px 72px}}@media (min-width: 48em){.duet-modal-body,.duet-modal-sticky-header{padding:36px 72px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:36px 72px}}@media (min-width: 76.25em){.duet-modal-body,.duet-modal-sticky-header{padding:36px 48px 48px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:48px 94px}.small .duet-modal-body,.small .duet-modal-sticky-header{padding:36px 48px}}.duet-modal-header{text-align:center}.duet-modal-sticky-header{position:sticky;top:0;z-index:300;display:block;padding-bottom:12px;text-align:left;background:rgb(243, 249, 252);border-bottom:1px solid rgb(225, 227, 230);border-radius:4px 4px 0 0}@media (max-width: 35.9375em){.duet-modal-sticky-header{border-radius:16px 16px 0 0}}.duet-theme-turva .duet-modal-sticky-header{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-modal-close{position:absolute;top:12px;right:12px}.duet-modal-heading{width:100%;padding-right:60px;overflow:hidden;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:1.25rem;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(0, 41, 77);text-decoration:none;text-overflow:ellipsis;letter-spacing:-0.01rem;white-space:nowrap}.duet-modal-heading.duet-p-0{padding:0 !important}.duet-modal-heading.duet-m-0{margin:0 !important}";
 const DuetModalStyle0 = duetModalCss;
@@ -257,18 +257,18 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class DuetModal extends H {
         var _a, _b;
         let iconColor = "primary";
         let closeColor = "secondary";
-        const closingButton = (h("div", { key: '919650935aa4eeda6fdbd32b3b9e8ade646dce61', class: "duet-modal-close" }, h("duet-button", { key: 'd63e1614e6cfbece69ee14ee4e66dfdcd206ed92', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        const closingButton = (h("div", { key: '1dbe12d292a5d852cc15d465a9a66f5965af9430', class: "duet-modal-close" }, h("duet-button", { key: '468e6a8ffbaebd63b3b4a8ee7af2a56adc95ca33', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
         if (this.theme === "turva") {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
         }
-        return (h("div", { key: '6cf795d42036a300a518234bc2ff864b7a49e0df', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        return (h("div", { key: '71d788e920473696ea1178fd1f4d531332c0278d', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: 'abe4d11f4ffd56854a1c154367d9aec78cdd2342', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '6787e4231b2445db8609d02c4ea8fa160d77240b', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: 'dc0d466574cf07bd5b2442a969e2309d1f4c3b84', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '9412b5b6e861150f01c81fbd495a1deca1576301', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -279,18 +279,18 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class DuetModal extends H {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '217b97b31fad9f7c42f822ea6c52e70f4cf77260', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: 'cd7f79907611d3f5d06c95b9288d3d078e12c825', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '6424067a77dafb42a1f6820f03c1055ba5b9e14b' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '785f42e4d9754dbdff90f029c7e1ac3ad3bc8f51', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '7836985c408c6f18fc389f3965a4b41d6eb59b3d' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '9d54f33d50e94607e2ef8517670f723e6602b628', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { key: '28eb6178c09c9619494a43463dee36faba7dcc2e', class: "duet-modal-header" }, h("span", { key: '81466134ab4039ab15d2f1983457ce9b7c496341', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'cff6cfbd5513068771b04ce531c3b86e7928b567', name: "top" })), this.icon && h("duet-icon", { key: '5c65f1d03d7bc57d36041c5042f55296007d5703', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'f6bd1c56f9d6e6f18382298d974493454b0b9bd7', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '4eb30ba1d0d1ec753584876752340b10c8f355bf', class: "duet-modal-spinner" }, h("duet-spinner", { key: '24306eda556c8d93816eee3196ed7c8f11e22bd6', size: "large", color: "primary" }))), h("div", { key: '228110c5826cbd520dd841e6518ff9e66d6e2d93', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '23075fb010a30dbaf69f30d04f17fd8ec7e75b62' })))))));
+            } }, h("div", { key: 'ad9468551b2c57c08c2a4a0e412de18472d59795', class: "duet-modal-header" }, h("span", { key: '9c6269ee1ca066e75d630a033692daa3d7e45e2c', class: "duet-modal-inner-slot-top" }, h("slot", { key: '59df4f56690160cbf5540000a4df88079d934cdb', name: "top" })), this.icon && h("duet-icon", { key: '686b798b952df7dbc87a678bc20a46d2856bd047', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'd54b10219d4a823f7d60ace3ee304e920578ed19', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '86418e12b9d65d5812eb3ced0f08a9d1cd9d3427', class: "duet-modal-spinner" }, h("duet-spinner", { key: '3aeda44a3313984a91ec59d3f9455408aa4b7fe7', size: "large", color: "primary" }))), h("div", { key: 'f130a5ad99bade63e75eb33a6e52d65d5e2267c0', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '38d1e37735093ca54cefb2c0fcea95bcf5031e7d' })))))));
     }
     get element() { return this; }
     static get watchers() { return {