@duetds/components 6.2.12 → 6.3.1

package/hydrate/index.js

@@ -12144,7 +12144,7 @@ class DuetLogo {
   }; }
 }
 
-const duetMenuBarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-menu-bar,*.sc-duet-menu-bar::after,*.sc-duet-menu-bar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-menu-bar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-menu-bar*/.duet-menu-bar.sc-duet-menu-bar{display:flex;align-items:center;justify-content:center;background:white;border-top:1px solid #e1e3e6;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}/*!@.duet-menu-bar .container*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:100%;height:5rem;padding:0 8px 0 20px}@media ((min-width: 62em)){/*!@.duet-menu-bar .container*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar{padding:0 28px}}/*!@.duet-menu-bar .container > **/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>*.sc-duet-menu-bar{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-menu-bar .container > :first-child*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>.sc-duet-menu-bar:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}/*!@.duet-menu-bar .container > :last-child*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>.sc-duet-menu-bar:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}/*!@.duet-menu-bar .container ::slotted(*)*/.duet-menu-bar .container .sc-duet-menu-bar-s>*{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-menu-bar.duet-theme-turva*/.duet-menu-bar.duet-theme-turva.sc-duet-menu-bar{background:white}";
+const duetMenuBarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-menu-bar,*.sc-duet-menu-bar::after,*.sc-duet-menu-bar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-menu-bar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-menu-bar*/.duet-menu-bar.sc-duet-menu-bar{display:flex;align-items:center;justify-content:center;background:white;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07)}@media (min-width: 62em){/*!@.duet-menu-bar*/.duet-menu-bar.sc-duet-menu-bar{box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}/*!@.duet-menu-bar .top*/.duet-menu-bar.sc-duet-menu-bar .top.sc-duet-menu-bar{display:none}/*!@.duet-menu-bar .bottom*/.duet-menu-bar.sc-duet-menu-bar .bottom.sc-duet-menu-bar{display:none}/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{position:relative}/*!@.duet-menu-bar.horizontal-nav .top*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .top.sc-duet-menu-bar{position:absolute;top:0;left:3.5%;display:block;width:93%;height:1px;background:#f5f8fa}/*!@.duet-menu-bar.horizontal-nav .bottom*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .bottom.sc-duet-menu-bar{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:#e1e3e6}/*!@.duet-menu-bar.horizontal-nav .more-left*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-left.sc-duet-menu-bar{position:absolute;top:0;left:-1px;z-index:1;width:36px;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*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-left.sc-duet-menu-bar{display:none}}/*!@.duet-menu-bar.horizontal-nav .more-right*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-right.sc-duet-menu-bar{position:absolute;top:0;right:-1px;z-index:1;width:36px;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*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-right.sc-duet-menu-bar{display:none}}@media (pointer: fine){/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{display:none}}@media (pointer: fine) and ((min-width: 62em)){/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{display:flex}}/*!@.duet-menu-bar .container*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar{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*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar::-webkit-scrollbar{width:0;height:0}@media (min-width: 62em){/*!@.duet-menu-bar .container*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar{height:5rem;padding:0 28px;overflow-x:visible}}/*!@.duet-menu-bar .container > **/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>*.sc-duet-menu-bar{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-menu-bar .container > :first-child*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>.sc-duet-menu-bar:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}/*!@.duet-menu-bar .container > :last-child*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>.sc-duet-menu-bar:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}/*!@.duet-menu-bar .container ::slotted(*)*/.duet-menu-bar .container .sc-duet-menu-bar-s>*{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-menu-bar.duet-theme-turva*/.duet-menu-bar.duet-theme-turva.sc-duet-menu-bar{background:white}";
 
 /**
  * @slot center - Slot for content in center.
@@ -12161,6 +12161,18 @@ class DuetMenuBar$1 {
       window.matchMedia(media_query_xx_large.replace(/'/g, "")),
     ];
     this.boundMqlFunctions = [];
+    this.scrollbarCheck = () => {
+      this.leftMoreVisible = this.container.scrollLeft > 0;
+      this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
+    };
+    this.scrollToActive = () => {
+      const active = this.element.querySelector("[active]");
+      if (active && active.offsetLeft) {
+        if (active.offsetLeft > 50) {
+          this.container.scrollLeft = active.offsetLeft;
+        }
+      }
+    };
     this.changeLogoSize = () => {
       if (this.mql[1].matches) {
         this.logoSize = "large";
@@ -12170,7 +12182,10 @@ class DuetMenuBar$1 {
       }
     };
     this.logoSize = "large";
+    this.leftMoreVisible = false;
+    this.rightMoreVisible = false;
     this.theme = "";
+    this.logo = true;
     this.logoHref = undefined;
   }
   /**
@@ -12199,12 +12214,23 @@ class DuetMenuBar$1 {
     }
     this.boundMqlFunctions = [];
   }
+  componentDidLoad() {
+    {
+      return;
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, null, hAsync("div", { class: { "duet-menu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, hAsync("div", { class: "container" }, hAsync("duet-logo", { size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref }), hAsync("slot", { name: "center" }), hAsync("slot", { name: "right" })))));
+    const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
+    const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
+    return (hAsync(Host, null, hAsync("div", { class: {
+        "duet-menu-bar": true,
+        "duet-theme-turva": this.theme === "turva",
+        "horizontal-nav": isUsedAsAdditionalHorizontalNav,
+      }, role: "menubar" }, hAsync("div", { class: "top" }), hAsync("div", { class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (hAsync("duet-logo", { size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref })), hAsync("div", { class: "center" }, hAsync("div", { class: "more-left", hidden: !this.leftMoreVisible }), hAsync("slot", { name: "center" }), hAsync("div", { class: "more-right", hidden: !this.rightMoreVisible })), hAsync("slot", { name: "right" })), hAsync("div", { class: "bottom" }))));
   }
   get element() { return getElement(this); }
   static get style() { return duetMenuBarCss; }
@@ -12213,8 +12239,11 @@ class DuetMenuBar$1 {
     "$tagName$": "duet-menu-bar",
     "$members$": {
       "theme": [1025],
+      "logo": [1028],
       "logoHref": [1025, "logo-href"],
-      "logoSize": [32]
+      "logoSize": [32],
+      "leftMoreVisible": [32],
+      "rightMoreVisible": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -12222,7 +12251,7 @@ class DuetMenuBar$1 {
   }; }
 }
 
-const duetNavCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-nav,*.sc-duet-nav::after,*.sc-duet-nav::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-nav-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}";
+const duetNavCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-nav,*.sc-duet-nav::after,*.sc-duet-nav::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-nav-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@slot[name=mobile]*/slot[name=mobile].sc-duet-nav{display:inherit}/*!@slot[name=desktop]*/slot[name=desktop].sc-duet-nav{display:none}@media ((min-width: 62em)){/*!@slot[name=mobile]*/slot[name=mobile].sc-duet-nav{display:none}/*!@slot[name=desktop]*/slot[name=desktop].sc-duet-nav{display:inherit}}";
 
 class DuetMenuBar {
   constructor(hostRef) {
@@ -12240,7 +12269,7 @@ class DuetMenuBar {
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, null, hAsync("nav", null, hAsync("slot", null))));
+    return (hAsync(Host, null, hAsync("nav", null, hAsync("slot", { name: "mobile" }), hAsync("slot", { name: "desktop" }))));
   }
   get element() { return getElement(this); }
   static get style() { return duetNavCss; }
@@ -12379,11 +12408,24 @@ class DuetMenuBarDropdownLink {
   }; }
 }
 
-const duetMenuBarLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-menu-bar-link,*.sc-duet-menu-bar-link::after,*.sc-duet-menu-bar-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-menu-bar-link-h{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*/.duet-menu-bar-link.sc-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\";text-align:center;text-decoration:none}@media (min-width: 62em){/*!@.duet-menu-bar-link*/.duet-menu-bar-link.sc-duet-menu-bar-link{padding:0 20px}}@media (min-width: 64.0625em){/*!@.duet-menu-bar-link*/.duet-menu-bar-link.sc-duet-menu-bar-link{padding:0 28px}}/*!@.duet-menu-bar-link.active*/.duet-menu-bar-link.active.sc-duet-menu-bar-link{color:#0077b3}/*!@.duet-theme-turva .duet-menu-bar-link.active*/.duet-theme-turva.sc-duet-menu-bar-link .duet-menu-bar-link.active.sc-duet-menu-bar-link{color:#c60c30}/*!@.duet-menu-bar-link.active::after*/.duet-menu-bar-link.active.sc-duet-menu-bar-link::after{position:absolute;top:auto;bottom:2px;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(2px)}/*!@.duet-menu-bar-link--slot-center*/.duet-menu-bar-link--slot-center.sc-duet-menu-bar-link{font-size:1rem;font-weight:600;line-height:1.25;color:#00294d}/*!@.duet-menu-bar-link--slot-center.duet-theme-turva*/.duet-menu-bar-link--slot-center.duet-theme-turva.sc-duet-menu-bar-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#940925}/*!@.duet-menu-bar-link--slot-center.active.duet-theme-turva::after*/.duet-menu-bar-link--slot-center.active.duet-theme-turva.sc-duet-menu-bar-link::after{background:#c60c30}/*!@.duet-menu-bar-link--slot-center:hover*/.duet-menu-bar-link--slot-center.sc-duet-menu-bar-link:hover{color:#0077b3}/*!@.duet-menu-bar-link--slot-center:hover.duet-theme-turva*/.duet-menu-bar-link--slot-center.sc-duet-menu-bar-link:hover.duet-theme-turva{color:#c60c30}/*!@.duet-menu-bar-link--slot-right*/.duet-menu-bar-link--slot-right.sc-duet-menu-bar-link{font-size:0.875rem;font-weight:400;line-height:1.25;color:#004d80}/*!@.duet-menu-bar-link--slot-right.duet-theme-turva*/.duet-menu-bar-link--slot-right.duet-theme-turva.sc-duet-menu-bar-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#940925}/*!@.duet-menu-bar-link--slot-right:hover*/.duet-menu-bar-link--slot-right.sc-duet-menu-bar-link:hover{color:#0077b3}/*!@.duet-menu-bar-link--slot-right:hover.duet-theme-turva*/.duet-menu-bar-link--slot-right.sc-duet-menu-bar-link:hover.duet-theme-turva{color:#c60c30}";
+const duetMenuBarLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-menu-bar-link,*.sc-duet-menu-bar-link::after,*.sc-duet-menu-bar-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-menu-bar-link-h{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*/.duet-menu-bar-link.sc-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\";text-align:center;text-decoration:none}@media (min-width: 62em){/*!@.duet-menu-bar-link*/.duet-menu-bar-link.sc-duet-menu-bar-link{padding:0 20px}}@media (min-width: 64.0625em){/*!@.duet-menu-bar-link*/.duet-menu-bar-link.sc-duet-menu-bar-link{padding:0 28px}}/*!@.duet-menu-bar-link.active*/.duet-menu-bar-link.active.sc-duet-menu-bar-link{color:#0077b3}/*!@.duet-theme-turva .duet-menu-bar-link.active*/.duet-theme-turva.sc-duet-menu-bar-link .duet-menu-bar-link.active.sc-duet-menu-bar-link{color:#c60c30}/*!@.duet-menu-bar-link.active::after*/.duet-menu-bar-link.active.sc-duet-menu-bar-link::after{position:absolute;top:auto;bottom:2px;left:0;z-index:1;display:block;width:100%;height:1px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(2px)}@media (min-width: 64.0625em){/*!@.duet-menu-bar-link.active::after*/.duet-menu-bar-link.active.sc-duet-menu-bar-link::after{z-index:auto;height:2px}}/*!@.duet-menu-bar-link--slot-center*/.duet-menu-bar-link--slot-center.sc-duet-menu-bar-link{font-size:1rem;font-weight:600;line-height:1.25;color:#00294d}/*!@.duet-menu-bar-link--slot-center.duet-theme-turva*/.duet-menu-bar-link--slot-center.duet-theme-turva.sc-duet-menu-bar-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#940925}/*!@.duet-menu-bar-link--slot-center.active.duet-theme-turva::after*/.duet-menu-bar-link--slot-center.active.duet-theme-turva.sc-duet-menu-bar-link::after{background:#c60c30}@media (min-width: 62em){/*!@.duet-menu-bar-link--slot-center:hover*/.duet-menu-bar-link--slot-center.sc-duet-menu-bar-link:hover{color:#0077b3}/*!@.duet-menu-bar-link--slot-center:hover.duet-theme-turva*/.duet-menu-bar-link--slot-center.sc-duet-menu-bar-link:hover.duet-theme-turva{color:#c60c30}}/*!@.duet-menu-bar-link--slot-right*/.duet-menu-bar-link--slot-right.sc-duet-menu-bar-link{font-size:0.875rem;font-weight:400;line-height:1.25;color:#004d80}/*!@.duet-menu-bar-link--slot-right.duet-theme-turva*/.duet-menu-bar-link--slot-right.duet-theme-turva.sc-duet-menu-bar-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#940925}@media (min-width: 62em){/*!@.duet-menu-bar-link--slot-right:hover*/.duet-menu-bar-link--slot-right.sc-duet-menu-bar-link:hover{color:#0077b3}/*!@.duet-menu-bar-link--slot-right:hover.duet-theme-turva*/.duet-menu-bar-link--slot-right.sc-duet-menu-bar-link:hover.duet-theme-turva{color:#c60c30}}";
 
 class DuetMenuBarLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * Own Properties.
+     */
+    this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+    this.boundMqlFunctions = [];
+    this.changeIconSize = () => {
+      if (this.mql[0].matches) {
+        this.iconSize = "x-small";
+      }
+      else {
+        this.iconSize = "small";
+      }
+    };
     this.getVariant = () => {
       const slot = this.element.parentElement.getAttribute("slot");
       switch (slot) {
@@ -12397,6 +12439,7 @@ class DuetMenuBarLink {
           return "center";
       }
     };
+    this.iconSize = "x-small";
     this.theme = "";
     this.active = false;
     this.href = "#";
@@ -12408,6 +12451,26 @@ class DuetMenuBarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    this.changeIconSize();
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].addEventListener) {
+        const bound = this.changeIconSize.bind(this);
+        this.mql[i].addEventListener("change", bound);
+        this.boundMqlFunctions[i] = bound;
+      }
+    }
+  }
+  disconnectedCallback() {
+    for (let i = 0; i < this.mql.length; i++) {
+      // removeEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+      }
+    }
+    this.boundMqlFunctions = [];
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -12418,7 +12481,7 @@ class DuetMenuBarLink {
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
         [`duet-menu-bar-link--slot-${this.getVariant()}`]: true,
-      }, href: this.href }, this.icon && hAsync("duet-icon", { size: "x-small", name: this.icon, margin: "none" }), hAsync("slot", null))));
+      }, href: this.href }, this.icon && hAsync("duet-icon", { size: this.iconSize, name: this.icon, margin: "none" }), hAsync("slot", null))));
   }
   get element() { return getElement(this); }
   static get style() { return duetMenuBarLinkCss; }
@@ -12429,7 +12492,8 @@ class DuetMenuBarLink {
       "theme": [1025],
       "active": [1028],
       "href": [1025],
-      "icon": [1537]
+      "icon": [1537],
+      "iconSize": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -14805,6 +14869,407 @@ class DuetSelect {
   }; }
 }
 
+const duetSlideoutCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout,*.sc-duet-slideout::after,*.sc-duet-slideout::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@:host slot::slotted(*)*/.sc-duet-slideout-h slot.sc-duet-slideout-s>*{position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}/*!@:host([open]) slot::slotted(*)*/.sc-duet-slideout-h[open] slot.sc-duet-slideout-s>*{top:0;opacity:1}/*!@.hamburger*/.hamburger.sc-duet-slideout{position:relative;width:24px;height:24px;margin-top:8px !important;pointer-events:none;transition:0.4s ease-in-out;backface-visibility:hidden}/*!@.hamburger .bar*/.hamburger.sc-duet-slideout .bar.sc-duet-slideout{position:absolute;left:0;display:block;width:100%;height:2px;background:#00294d;border-radius:20rem}/*!@.duet-theme-turva .hamburger .bar*/.duet-theme-turva.sc-duet-slideout .hamburger.sc-duet-slideout .bar.sc-duet-slideout{background:#171c3a}/*!@.hamburger .bar:nth-child(1)*/.hamburger.sc-duet-slideout .bar.sc-duet-slideout:nth-child(1){top:0}/*!@.hamburger .bar:nth-child(2), .hamburger .bar:nth-child(3)*/.hamburger.sc-duet-slideout .bar.sc-duet-slideout:nth-child(2),.hamburger.sc-duet-slideout .bar.sc-duet-slideout:nth-child(3){top:7px}/*!@.hamburger .bar:nth-child(4)*/.hamburger.sc-duet-slideout .bar.sc-duet-slideout:nth-child(4){top:14px}/*!@.duet-slideout*/.duet-slideout.sc-duet-slideout{display:flex;align-items:center;height:100%;padding:0 8px}/*!@.duet-slideout .dialog*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout{position:fixed;top:0;bottom:0;left:0;z-index:400;width:100%;height:100%;overflow-y:auto;background:white;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}/*!@.duet-slideout .dialog .top*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout{display:flex;align-items:center;justify-content:flex-end;padding:4px}/*!@.duet-slideout .dialog .top duet-icon*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout duet-icon.sc-duet-slideout{padding:16px}/*!@.duet-slideout .dialog .items*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .items.sc-duet-slideout{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}/*!@.duet-slideout .dialog.hidden*/.duet-slideout.sc-duet-slideout .dialog.hidden.sc-duet-slideout{visibility:hidden}/*!@.duet-slideout.duet-theme-turva button*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.sc-duet-slideout{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}/*!@.duet-slideout.duet-theme-turva button.active*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.active.sc-duet-slideout{color:#c60c30}/*!@.duet-slideout.duet-theme-turva button.active::after*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.active.sc-duet-slideout::after{background:#c60c30}/*!@.duet-slideout.duet-theme-turva .items*/.duet-slideout.duet-theme-turva.sc-duet-slideout .items.sc-duet-slideout{background:white}/*!@::slotted(*)*/.sc-duet-slideout-s>*{width:100%}";
+
+class DuetSlideout {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetSlideoutEvent = createEvent$2(this, "duetSlideoutEvent", 7);
+    this.toggleMenu = (e) => {
+      const toggle = !this.open;
+      this.open = toggle;
+      this.duetSlideoutEvent.emit({
+        originalEvent: e,
+        data: { element: this.element, open: this.open },
+        component: "duet-slideout",
+      });
+      if (toggle) {
+        setTimeout(() => {
+          this.closeButton.focus();
+        }, 200);
+      }
+      else {
+        setTimeout(() => {
+          this.openButton.focus();
+        }, 200);
+      }
+    };
+    this.onClick = (e) => {
+      this.toggleMenu(e);
+    };
+    this.theme = "";
+    this.open = false;
+  }
+  /**
+   * Toggles the slideout.
+   */
+  async toggle() {
+    const event = new CustomEvent("toggle");
+    this.toggleMenu(event);
+    setTimeout(() => {
+      this.openButton.focus();
+    }, 200);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, null, hAsync("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, hAsync("button", { ref: element => (this.openButton = element), "aria-haspopup": "dialog", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.open,
+      }, onClick: this.onClick }, hAsync("div", { class: "hamburger" }, hAsync("span", { class: "bar" }), hAsync("span", { class: "bar" }), hAsync("span", { class: "bar" }), hAsync("span", { class: "bar" }))), hAsync("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
+        dialog: true,
+        hidden: !this.open,
+      } }, hAsync(FocusGuard, { moveFocusTo: this.closeButton }), hAsync("div", { class: "top" }, hAsync("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+        "slideout-close": true,
+        active: this.open,
+      }, onClick: this.onClick }, hAsync("duet-icon", { name: "navigation-close", size: "small", margin: "none" }))), hAsync("div", { id: "menubar", role: "menubar", class: {
+        items: true,
+      } }, hAsync("slot", null)), hAsync(FocusGuard, { moveFocusTo: this.closeButton })))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetSlideoutCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-slideout",
+    "$members$": {
+      "theme": [1025],
+      "open": [1540],
+      "toggle": [64]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["open", "open"]]
+  }; }
+}
+
+const duetSlideoutLangCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout-lang,*.sc-duet-slideout-lang::after,*.sc-duet-slideout-lang::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-lang-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-slideout-lang*/.duet-slideout-lang.sc-duet-slideout-lang{display:flex;gap:20px;align-items:center;justify-content:flex-start}/*!@::slotted(*)*/.sc-duet-slideout-lang-s>*{position:relative}/*!@::slotted(:not(:first-child))*/.sc-duet-slideout-lang-s>:not(:first-child){padding-right:0;padding-left:0.5rem}/*!@::slotted(:not(:last-child))::after*/.sc-duet-slideout-lang-s>:not(:last-child)::after{position:absolute;top:15%;right:-16px;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:16px;font-weight:600;line-height:150%;color:#00294d;content:\"|\"}/*!@.duet-theme-turva ::slotted(:not(:last-child))::after*/.duet-theme-turva .sc-duet-slideout-lang-s>:not(:last-child)::after{color:#171c3a}";
+
+class DuetSlideoutLang {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Own Properties.
+     */
+    this.chooseLangObject = {
+      en: "Choose language",
+      fi: "Valitse kieli",
+      sv: "Välj språk",
+    };
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const langTranslation = getLocaleString(this.chooseLangObject);
+    return (hAsync(Host, null, hAsync("div", { class: "duet-slideout-lang" }, hAsync("duet-visually-hidden", null, langTranslation), hAsync("duet-icon", { name: "navigation-language", margin: "none" }), hAsync("slot", null))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetSlideoutLangCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-slideout-lang",
+    "$members$": {
+      "theme": [1025]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
+const duetSlideoutLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout-link,*.sc-duet-slideout-link::after,*.sc-duet-slideout-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-slideout-link*/.duet-slideout-link.sc-duet-slideout-link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";line-height:1.25;color:#00294d;text-align:center;text-decoration:none}/*!@.duet-slideout-link.duet-theme-turva*/.duet-slideout-link.duet-theme-turva.sc-duet-slideout-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#940925}/*!@.duet-slideout-link.active span*/.duet-slideout-link.active.sc-duet-slideout-link span.sc-duet-slideout-link{position:relative}/*!@.duet-slideout-link.active span::after*/.duet-slideout-link.active.sc-duet-slideout-link span.sc-duet-slideout-link::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;transform:translateY(2px)}/*!@.duet-slideout-link.active.duet-theme-turva span::after*/.duet-slideout-link.active.duet-theme-turva.sc-duet-slideout-link span.sc-duet-slideout-link::after{background:#c60c30}/*!@.duet-slideout-link.small*/.duet-slideout-link.small.sc-duet-slideout-link{font-size:1rem;font-weight:600}/*!@.duet-slideout-link.small span::after*/.duet-slideout-link.small.sc-duet-slideout-link span.sc-duet-slideout-link::after{height:1px;transform:translateY(1px)}/*!@.duet-slideout-link.medium*/.duet-slideout-link.medium.sc-duet-slideout-link{font-size:1.25rem;font-weight:600}/*!@.duet-slideout-link.large*/.duet-slideout-link.large.sc-duet-slideout-link{font-size:1.5rem;font-weight:800}";
+
+class DuetSlideoutLink {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = "";
+    this.active = false;
+    this.href = "#";
+    this.icon = undefined;
+    this.size = "medium";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, null, hAsync("a", { class: {
+        "duet-slideout-link": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.active,
+        [this.size]: true,
+      }, href: this.href }, this.icon && hAsync("duet-icon", { size: "medium", name: this.icon, margin: "none" }), hAsync("span", null, hAsync("slot", null)))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetSlideoutLinkCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-slideout-link",
+    "$members$": {
+      "theme": [1025],
+      "active": [1028],
+      "href": [1025],
+      "icon": [1537],
+      "size": [1537]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["icon", "icon"], ["size", "size"]]
+  }; }
+}
+
+const duetSlideoutPanelCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout-panel,*.sc-duet-slideout-panel::after,*.sc-duet-slideout-panel::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-panel-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@:host slot::slotted(duet-slideout-panel-dropdown),\n:host slot::slotted(duet-slideout-panel-link)*/.sc-duet-slideout-panel-h slot.sc-duet-slideout-panel-s>duet-slideout-panel-dropdown,.sc-duet-slideout-panel-h slot.sc-duet-slideout-panel-s>duet-slideout-panel-link{position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}/*!@:host([open]) slot::slotted(duet-slideout-panel-link),\n:host([open]) slot::slotted(duet-slideout-panel-dropdown)*/.sc-duet-slideout-panel-h[open] slot.sc-duet-slideout-panel-s>duet-slideout-panel-link,.sc-duet-slideout-panel-h[open] slot.sc-duet-slideout-panel-s>duet-slideout-panel-dropdown{top:0;opacity:1}/*!@.duet-slideout-panel*/.duet-slideout-panel.sc-duet-slideout-panel{position:relative;height:100%}/*!@.duet-slideout-panel .link*/.duet-slideout-panel.sc-duet-slideout-panel .link.sc-duet-slideout-panel{position:relative;display:flex;gap:8px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 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:1.5rem;font-weight:800;line-height:1.25;color:#00294d;text-align:center;text-decoration:none;cursor:pointer}/*!@.duet-slideout-panel .link .label*/.duet-slideout-panel.sc-duet-slideout-panel .link.sc-duet-slideout-panel .label.sc-duet-slideout-panel{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}/*!@.duet-slideout-panel .link.active .label-text*/.duet-slideout-panel.sc-duet-slideout-panel .link.active.sc-duet-slideout-panel .label-text.sc-duet-slideout-panel{position:relative}/*!@.duet-slideout-panel .link.active .label-text::after*/.duet-slideout-panel.sc-duet-slideout-panel .link.active.sc-duet-slideout-panel .label-text.sc-duet-slideout-panel::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;transform:translateY(2px)}/*!@.duet-slideout-panel .dialog*/.duet-slideout-panel.sc-duet-slideout-panel .dialog.sc-duet-slideout-panel{position:fixed;top:0;left:0;z-index:600;width:100%;height:100%;overflow-y:auto;visibility:visible;background:#f3f9fc}/*!@.duet-slideout-panel .dialog.hidden*/.duet-slideout-panel.sc-duet-slideout-panel .dialog.hidden.sc-duet-slideout-panel{visibility:hidden}/*!@.duet-slideout-panel .dialog.hidden .top .back,\n.duet-slideout-panel .dialog.hidden .top span*/.duet-slideout-panel.sc-duet-slideout-panel .dialog.hidden.sc-duet-slideout-panel .top.sc-duet-slideout-panel .back.sc-duet-slideout-panel,.duet-slideout-panel.sc-duet-slideout-panel .dialog.hidden.sc-duet-slideout-panel .top.sc-duet-slideout-panel span.sc-duet-slideout-panel{opacity:0}/*!@.duet-slideout-panel .top*/.duet-slideout-panel.sc-duet-slideout-panel .top.sc-duet-slideout-panel{display:flex;align-items:center;justify-content:space-between;padding:4px}/*!@.duet-slideout-panel .top .back*/.duet-slideout-panel.sc-duet-slideout-panel .top.sc-duet-slideout-panel .back.sc-duet-slideout-panel{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}/*!@.duet-slideout-panel .top duet-icon*/.duet-slideout-panel.sc-duet-slideout-panel .top.sc-duet-slideout-panel duet-icon.sc-duet-slideout-panel{padding:16px}/*!@.duet-slideout-panel .top span*/.duet-slideout-panel.sc-duet-slideout-panel .top.sc-duet-slideout-panel span.sc-duet-slideout-panel{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:600;line-height:1.5;color:#00294d;opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}/*!@.duet-slideout-panel .items*/.duet-slideout-panel.sc-duet-slideout-panel .items.sc-duet-slideout-panel{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:#00294d}/*!@.duet-slideout-panel.duet-theme-turva .link*/.duet-slideout-panel.duet-theme-turva.sc-duet-slideout-panel .link.sc-duet-slideout-panel{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#940925}/*!@.duet-slideout-panel.duet-theme-turva .link.active .label-text::after*/.duet-slideout-panel.duet-theme-turva.sc-duet-slideout-panel .link.active.sc-duet-slideout-panel .label-text.sc-duet-slideout-panel::after{background:#c60c30}/*!@.duet-slideout-panel.duet-theme-turva .dialog*/.duet-slideout-panel.duet-theme-turva.sc-duet-slideout-panel .dialog.sc-duet-slideout-panel{background:#f5f5f7}/*!@.duet-slideout-panel.duet-theme-turva .top span*/.duet-slideout-panel.duet-theme-turva.sc-duet-slideout-panel .top.sc-duet-slideout-panel span.sc-duet-slideout-panel{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}/*!@.duet-slideout-panel.duet-theme-turva .items*/.duet-slideout-panel.duet-theme-turva.sc-duet-slideout-panel .items.sc-duet-slideout-panel{background:#f5f5f7}";
+
+class DuetSlideoutPanel {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.exitLangObject = {
+      en: "Exit the dialog",
+      fi: "Poistu dialogista",
+      sv: "Stäng dialogrutan",
+    };
+    this.updateLabel = () => {
+      const labelSlotElement = this.element.querySelector("[slot='label']");
+      this.label = labelSlotElement;
+    };
+    this.onToggleClick = () => {
+      const toggle = !this.open;
+      this.open = toggle;
+      if (toggle) {
+        setTimeout(() => {
+          this.closeButton.focus();
+        }, 200);
+      }
+      else {
+        setTimeout(() => {
+          this.openButton.focus();
+        }, 200);
+      }
+    };
+    this.onCloseClick = () => {
+      this.open = false;
+      const parentElement = this.element.parentElement;
+      if (parentElement.tagName === "DUET-SLIDEOUT") {
+        const slideout = this.element.parentElement;
+        slideout.toggle();
+      }
+    };
+    this.label = undefined;
+    this.theme = "";
+    this.active = false;
+    this.open = false;
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.updateLabel();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const exitTranslation = getLocaleString(this.exitLangObject);
+    return (hAsync(Host, null, hAsync("div", { class: {
+        "duet-slideout-panel": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.open,
+      } }, hAsync("button", { ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        link: true,
+        active: this.active,
+      }, onClick: this.onToggleClick }, this.icon && hAsync("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), hAsync("div", { class: "label" }, hAsync("span", { class: "label-text" }, hAsync("slot", { name: "label" })), hAsync("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small" }))), hAsync("div", { class: {
+        dialog: true,
+        hidden: !this.open,
+      } }, hAsync(FocusGuard, { moveFocusTo: this.closeButton }), hAsync("div", { class: "top" }, hAsync("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+        back: true,
+      }, onClick: this.onToggleClick }, hAsync("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small" })), hAsync("span", null, this.label.innerHTML), hAsync("button", { type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, hAsync("duet-icon", { name: "navigation-close", size: "small", margin: "none" }))), hAsync("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+        items: true,
+      } }, hAsync("slot", null)), hAsync(FocusGuard, { moveFocusTo: this.closeButton })))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetSlideoutPanelCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-slideout-panel",
+    "$members$": {
+      "theme": [1025],
+      "active": [1540],
+      "open": [1540],
+      "icon": [1537],
+      "label": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["active", "active"], ["open", "open"], ["icon", "icon"]]
+  }; }
+}
+
+const duetSlideoutPanelDropdownCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout-panel-dropdown,*.sc-duet-slideout-panel-dropdown::after,*.sc-duet-slideout-panel-dropdown::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-panel-dropdown-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}/*!@:host slot::slotted(duet-slideout-panel-dropdown-link)*/.sc-duet-slideout-panel-dropdown-h slot.sc-duet-slideout-panel-dropdown-s>duet-slideout-panel-dropdown-link{position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}/*!@:host([open]) slot::slotted(duet-slideout-panel-dropdown-link)*/.sc-duet-slideout-panel-dropdown-h[open] slot.sc-duet-slideout-panel-dropdown-s>duet-slideout-panel-dropdown-link{top:0;opacity:1}/*!@.duet-slideout-panel-dropdown*/.duet-slideout-panel-dropdown.sc-duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}/*!@.duet-slideout-panel-dropdown button*/.duet-slideout-panel-dropdown.sc-duet-slideout-panel-dropdown button.sc-duet-slideout-panel-dropdown{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 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:1.25rem;font-weight:800;line-height:1.25;color:#00294d;text-align:center;text-decoration:none;cursor:pointer}/*!@.duet-slideout-panel-dropdown button .label*/.duet-slideout-panel-dropdown.sc-duet-slideout-panel-dropdown button.sc-duet-slideout-panel-dropdown .label.sc-duet-slideout-panel-dropdown{display:flex;gap:0.5rem;align-items:center;justify-content:center}/*!@.duet-slideout-panel-dropdown .items*/.duet-slideout-panel-dropdown.sc-duet-slideout-panel-dropdown .items.sc-duet-slideout-panel-dropdown{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:0 0 16px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in}/*!@.duet-slideout-panel-dropdown .items.hidden*/.duet-slideout-panel-dropdown.sc-duet-slideout-panel-dropdown .items.hidden.sc-duet-slideout-panel-dropdown{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding 0.3s ease-out}/*!@.duet-slideout-panel-dropdown.duet-theme-turva button*/.duet-slideout-panel-dropdown.duet-theme-turva.sc-duet-slideout-panel-dropdown button.sc-duet-slideout-panel-dropdown{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#940925}";
+
+class DuetSlideoutPanelDropdown {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onClick = () => {
+      this.open = !this.open;
+    };
+    this.theme = "";
+    this.open = false;
+    this.icon = undefined;
+  }
+  handleFocus(e) {
+    const isClickOutside = e.composedPath().every(node => node !== this.element);
+    if (isClickOutside) {
+      this.open = false;
+    }
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, null, hAsync("div", { class: {
+        "duet-slideout-panel-dropdown": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.open,
+      } }, hAsync("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.open,
+      }, onClick: this.onClick }, this.icon && hAsync("duet-icon", { name: this.icon, size: "medium", margin: "none" }), hAsync("div", { class: "label" }, hAsync("slot", { name: "label" }), hAsync("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small" }))), hAsync("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+        items: true,
+        hidden: !this.open,
+      } }, hAsync("slot", null)))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetSlideoutPanelDropdownCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-slideout-panel-dropdown",
+    "$members$": {
+      "theme": [1025],
+      "open": [1540],
+      "icon": [1537]
+    },
+    "$listeners$": [[8, "click", "handleFocus"]],
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["open", "open"], ["icon", "icon"]]
+  }; }
+}
+
+const duetSlideoutPanelDropdownLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout-panel-dropdown-link,*.sc-duet-slideout-panel-dropdown-link::after,*.sc-duet-slideout-panel-dropdown-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-panel-dropdown-link-h{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-slideout-panel-dropdown-link*/.duet-slideout-panel-dropdown-link.sc-duet-slideout-panel-dropdown-link{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 20px 8px 44px;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.125rem;font-weight:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none}/*!@.duet-slideout-panel-dropdown-link.duet-theme-turva*/.duet-slideout-panel-dropdown-link.duet-theme-turva.sc-duet-slideout-panel-dropdown-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}";
+
+class DuetSlideoutPanelDropdownLink {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = "";
+    this.href = "#";
+    this.icon = undefined;
+    this.caret = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, null, hAsync("a", { class: {
+        "duet-slideout-panel-dropdown-link": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, href: this.href, role: "menuitem" }, this.icon && hAsync("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), hAsync("slot", null))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetSlideoutPanelDropdownLinkCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-slideout-panel-dropdown-link",
+    "$members$": {
+      "theme": [1025],
+      "href": [1025],
+      "icon": [1537],
+      "caret": [1028]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["icon", "icon"]]
+  }; }
+}
+
+const duetSlideoutPanelLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout-panel-link,*.sc-duet-slideout-panel-link::after,*.sc-duet-slideout-panel-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-panel-link-h{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-slideout-panel-link*/.duet-slideout-panel-link.sc-duet-slideout-panel-link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 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:1.25rem;font-weight:800;line-height:1.25;color:#00294d;text-align:center;text-decoration:none}/*!@.duet-slideout-panel-link.duet-theme-turva*/.duet-slideout-panel-link.duet-theme-turva.sc-duet-slideout-panel-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#940925}";
+
+class DuetSlideoutPanelLink {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = "";
+    this.active = false;
+    this.href = "#";
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, null, hAsync("a", { class: {
+        "duet-slideout-panel-link": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, href: this.href }, this.icon && hAsync("duet-icon", { size: "medium", name: this.icon, margin: "none" }), hAsync("span", null, hAsync("slot", null)))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetSlideoutPanelLinkCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-slideout-panel-link",
+    "$members$": {
+      "theme": [1025],
+      "active": [1028],
+      "href": [1025],
+      "icon": [1537]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["icon", "icon"]]
+  }; }
+}
+
 const duetSpacerCss = "/*!@:host*/.sc-duet-spacer-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){/*!@:host*/.sc-duet-spacer-h{width:16px;min-width:16px;height:16px}}/*!@:host(.duet-spacer-horizontal)*/.duet-spacer-horizontal.sc-duet-spacer-h{display:inline-block;height:100% !important}/*!@:host(.duet-spacer-horizontal.xx-small)*/.duet-spacer-horizontal.xx-small.sc-duet-spacer-h{width:4px;min-width:4px;height:100%}@media (min-width: 36em){/*!@:host(.duet-spacer-horizontal.xx-small)*/.duet-spacer-horizontal.xx-small.sc-duet-spacer-h{width:4px;min-width:4px}}/*!@:host(.duet-spacer-horizontal.x-small)*/.duet-spacer-horizontal.x-small.sc-duet-spacer-h{width:4px;min-width:4px;height:100%}@media (min-width: 36em){/*!@:host(.duet-spacer-horizontal.x-small)*/.duet-spacer-horizontal.x-small.sc-duet-spacer-h{width:8px;min-width:8px}}/*!@:host(.duet-spacer-horizontal.small)*/.duet-spacer-horizontal.small.sc-duet-spacer-h{width:8px;min-width:8px;height:100%}@media (min-width: 36em){/*!@:host(.duet-spacer-horizontal.small)*/.duet-spacer-horizontal.small.sc-duet-spacer-h{width:12px;min-width:12px}}/*!@:host(.duet-spacer-horizontal.medium)*/.duet-spacer-horizontal.medium.sc-duet-spacer-h{height:100%}/*!@:host(.duet-spacer-horizontal.large)*/.duet-spacer-horizontal.large.sc-duet-spacer-h{width:16px;min-width:16px;height:100%}@media (min-width: 36em){/*!@:host(.duet-spacer-horizontal.large)*/.duet-spacer-horizontal.large.sc-duet-spacer-h{width:20px;min-width:20px}}/*!@:host(.duet-spacer-horizontal.x-large)*/.duet-spacer-horizontal.x-large.sc-duet-spacer-h{width:20px;min-width:20px;height:100%}@media (min-width: 36em){/*!@:host(.duet-spacer-horizontal.x-large)*/.duet-spacer-horizontal.x-large.sc-duet-spacer-h{width:28px;min-width:28px}}/*!@:host(.duet-spacer-horizontal.xx-large)*/.duet-spacer-horizontal.xx-large.sc-duet-spacer-h{width:28px;min-width:28px;height:100%}@media (min-width: 36em){/*!@:host(.duet-spacer-horizontal.xx-large)*/.duet-spacer-horizontal.xx-large.sc-duet-spacer-h{width:36px;min-width:36px}}/*!@:host(.duet-spacer-horizontal.xxx-large)*/.duet-spacer-horizontal.xxx-large.sc-duet-spacer-h{width:36px;min-width:36px;height:100%}@media (min-width: 36em){/*!@:host(.duet-spacer-horizontal.xxx-large)*/.duet-spacer-horizontal.xxx-large.sc-duet-spacer-h{width:48px;min-width:48px}}/*!@:host(.duet-spacer-horizontal.xxxx-large)*/.duet-spacer-horizontal.xxxx-large.sc-duet-spacer-h{width:48px;min-width:48px;height:100%}@media (min-width: 36em){/*!@:host(.duet-spacer-horizontal.xxxx-large)*/.duet-spacer-horizontal.xxxx-large.sc-duet-spacer-h{width:72px;min-width:72px}}/*!@:host(.duet-spacer-vertical.xx-small)*/.duet-spacer-vertical.xx-small.sc-duet-spacer-h{width:100%;height:4px;min-height:4px}/*!@:host(.duet-spacer-vertical.x-small)*/.duet-spacer-vertical.x-small.sc-duet-spacer-h{width:100%;height:4px;min-height:4px}@media (min-width: 36em){/*!@:host(.duet-spacer-vertical.x-small)*/.duet-spacer-vertical.x-small.sc-duet-spacer-h{height:8px;min-height:8px}}/*!@:host(.duet-spacer-vertical.small)*/.duet-spacer-vertical.small.sc-duet-spacer-h{width:100%;height:8px;min-height:8px}@media (min-width: 36em){/*!@:host(.duet-spacer-vertical.small)*/.duet-spacer-vertical.small.sc-duet-spacer-h{height:12px;min-height:12px}}/*!@:host(.duet-spacer-vertical.medium)*/.duet-spacer-vertical.medium.sc-duet-spacer-h{width:100%}/*!@:host(.duet-spacer-vertical.large)*/.duet-spacer-vertical.large.sc-duet-spacer-h{width:100%;height:16px;min-height:16px}@media (min-width: 36em){/*!@:host(.duet-spacer-vertical.large)*/.duet-spacer-vertical.large.sc-duet-spacer-h{height:20px;min-height:20px}}/*!@:host(.duet-spacer-vertical.x-large)*/.duet-spacer-vertical.x-large.sc-duet-spacer-h{width:100%;height:20px;min-height:20px}@media (min-width: 36em){/*!@:host(.duet-spacer-vertical.x-large)*/.duet-spacer-vertical.x-large.sc-duet-spacer-h{height:28px;min-height:28px}}/*!@:host(.duet-spacer-vertical.xx-large)*/.duet-spacer-vertical.xx-large.sc-duet-spacer-h{width:100%;height:28px;min-height:28px}@media (min-width: 36em){/*!@:host(.duet-spacer-vertical.xx-large)*/.duet-spacer-vertical.xx-large.sc-duet-spacer-h{height:36px;min-height:36px}}/*!@:host(.duet-spacer-vertical.xxx-large)*/.duet-spacer-vertical.xxx-large.sc-duet-spacer-h{width:100%;height:36px;min-height:36px}@media (min-width: 36em){/*!@:host(.duet-spacer-vertical.xxx-large)*/.duet-spacer-vertical.xxx-large.sc-duet-spacer-h{height:48px;min-height:48px}}/*!@:host(.duet-spacer-vertical.xxxx-large)*/.duet-spacer-vertical.xxxx-large.sc-duet-spacer-h{width:100%;height:48px;min-height:48px}@media (min-width: 36em){/*!@:host(.duet-spacer-vertical.xxxx-large)*/.duet-spacer-vertical.xxxx-large.sc-duet-spacer-h{height:72px;min-height:72px}}/*!@:host(.duet-spacer-xx-small)*/.duet-spacer-xx-small.sc-duet-spacer-h{display:none}@media (max-width: 22.5em){/*!@:host(.duet-spacer-xx-small)*/.duet-spacer-xx-small.sc-duet-spacer-h{display:block}}/*!@:host(.duet-spacer-x-small)*/.duet-spacer-x-small.sc-duet-spacer-h{display:none}@media (max-width: 35.9375em){/*!@:host(.duet-spacer-x-small)*/.duet-spacer-x-small.sc-duet-spacer-h{display:block}}/*!@:host(.duet-spacer-small)*/.duet-spacer-small.sc-duet-spacer-h{display:none}@media (min-width: 36em){/*!@:host(.duet-spacer-small)*/.duet-spacer-small.sc-duet-spacer-h{display:block}}/*!@:host(.duet-spacer-medium)*/.duet-spacer-medium.sc-duet-spacer-h{display:none}@media (min-width: 48em){/*!@:host(.duet-spacer-medium)*/.duet-spacer-medium.sc-duet-spacer-h{display:block}}/*!@:host(.duet-spacer-large)*/.duet-spacer-large.sc-duet-spacer-h{display:none}@media (min-width: 62em){/*!@:host(.duet-spacer-large)*/.duet-spacer-large.sc-duet-spacer-h{display:block}}/*!@:host(.duet-spacer-x-large)*/.duet-spacer-x-large.sc-duet-spacer-h{display:none}@media (min-width: 64.0625em){/*!@:host(.duet-spacer-x-large)*/.duet-spacer-x-large.sc-duet-spacer-h{display:block}}/*!@:host(.duet-spacer-xx-large)*/.duet-spacer-xx-large.sc-duet-spacer-h{display:none}@media (min-width: 76.25em){/*!@:host(.duet-spacer-xx-large)*/.duet-spacer-xx-large.sc-duet-spacer-h{display:block}}";
 
 class DuetSpacer {
@@ -15118,12 +15583,16 @@ class DuetStepper {
   }; }
 }
 
-const duetSubmenuBarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar,*.sc-duet-submenu-bar::after,*.sc-duet-submenu-bar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-submenu-bar*/.duet-submenu-bar.sc-duet-submenu-bar{display:flex;align-items:center;justify-content:center;background:#f3f9fc;border-bottom:1px solid #cde5f1}/*!@.duet-submenu-bar.duet-theme-turva*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar{background:#f5f5f7;border-bottom:1px solid #e4e4e6}";
+const duetSubmenuBarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar,*.sc-duet-submenu-bar::after,*.sc-duet-submenu-bar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@:host slot::slotted(duet-submenu-bar-link),\n:host slot::slotted(duet-submenu-bar-dropdown)*/.sc-duet-submenu-bar-h slot.sc-duet-submenu-bar-s>duet-submenu-bar-link,.sc-duet-submenu-bar-h slot.sc-duet-submenu-bar-s>duet-submenu-bar-dropdown{position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}/*!@:host([open]) slot::slotted(duet-submenu-bar-link),\n:host([open]) slot::slotted(duet-submenu-bar-dropdown)*/.sc-duet-submenu-bar-h[open] slot.sc-duet-submenu-bar-s>duet-submenu-bar-link,.sc-duet-submenu-bar-h[open] slot.sc-duet-submenu-bar-s>duet-submenu-bar-dropdown{top:0;opacity:1}@media (min-width: 62em){/*!@:host slot::slotted(duet-submenu-bar-link),\n:host slot::slotted(duet-submenu-bar-dropdown)*/.sc-duet-submenu-bar-h slot.sc-duet-submenu-bar-s>duet-submenu-bar-link,.sc-duet-submenu-bar-h slot.sc-duet-submenu-bar-s>duet-submenu-bar-dropdown{position:relative;top:auto;opacity:1;transition:none}}/*!@.duet-submenu-bar*/.duet-submenu-bar.sc-duet-submenu-bar{position:relative;background:#f3f9fc}@media (min-width: 62em){/*!@.duet-submenu-bar*/.duet-submenu-bar.sc-duet-submenu-bar{border-bottom:1px solid #cde5f1}}/*!@.duet-submenu-bar button*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar{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:#00294d}/*!@.duet-submenu-bar button.active .caret*/.duet-submenu-bar.sc-duet-submenu-bar button.active.sc-duet-submenu-bar .caret.sc-duet-submenu-bar{transform:rotate(180deg)}/*!@.duet-submenu-bar button .label*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar .label.sc-duet-submenu-bar{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){/*!@.duet-submenu-bar button*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar{display:none}}/*!@.duet-submenu-bar .items*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar{position:absolute;z-index:400;width:100%;max-height:1000px;visibility:visible;background:#f3f9fc;border-bottom:1px solid #cfd2d4;transition:max-height 0.3s ease-in, border-width 0.3s linear}/*!@.duet-submenu-bar .items.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .items.hidden.sc-duet-submenu-bar{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid #cfd2d4;transition:max-height 0.3s ease-out, border-width 0.3s linear}@media (min-width: 62em){/*!@.duet-submenu-bar .items, .duet-submenu-bar .items.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar,.duet-submenu-bar.sc-duet-submenu-bar .items.hidden.sc-duet-submenu-bar{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;max-height:unset;overflow:visible;visibility:visible;border:0;transition:none}}/*!@.duet-submenu-bar.duet-theme-turva*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar{background:#f5f5f7;border-bottom:1px solid #e4e4e6}/*!@.duet-submenu-bar.duet-theme-turva .items*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .items.sc-duet-submenu-bar{background:#f5f5f7}";
 
 class DuetSubmenuBar {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.onClick = () => {
+      this.open = !this.open;
+    };
     this.theme = "";
+    this.open = false;
   }
   /**
    * Component lifecycle events.
@@ -15136,7 +15605,12 @@ class DuetSubmenuBar {
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, null, hAsync("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, hAsync("slot", null))));
+    return (hAsync(Host, null, hAsync("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, hAsync("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.open,
+      }, onClick: this.onClick }, hAsync("div", { class: "label" }, hAsync("slot", { name: "label" }), hAsync("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), hAsync("div", { role: "menu", id: "menu", "aria-labelledby": "button", "aria-expanded": this.open ? "true" : "false", class: {
+        items: true,
+        hidden: !this.open,
+      } }, hAsync("slot", null)))));
   }
   get element() { return getElement(this); }
   static get style() { return duetSubmenuBarCss; }
@@ -15144,22 +15618,37 @@ class DuetSubmenuBar {
     "$flags$": 9,
     "$tagName$": "duet-submenu-bar",
     "$members$": {
-      "theme": [1025]
+      "theme": [1025],
+      "open": [1540]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
+    "$attrsToReflect$": [["open", "open"]]
   }; }
 }
 
-const duetSubmenuBarDropdownCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-dropdown,*.sc-duet-submenu-bar-dropdown::after,*.sc-duet-submenu-bar-dropdown::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-dropdown-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-submenu-bar-dropdown*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown{position:relative;height:100%}/*!@.duet-submenu-bar-dropdown button*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{position:relative;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;height:100%;padding:12px 1.5rem;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:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none;cursor:pointer}/*!@.duet-submenu-bar-dropdown button .label*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown .label.sc-duet-submenu-bar-dropdown{display:flex;gap:5px;align-items:center;justify-content:center}/*!@.duet-submenu-bar-dropdown button .caret*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown .caret.sc-duet-submenu-bar-dropdown{position:absolute;right:12px}/*!@.duet-submenu-bar-dropdown button:hover*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover{color:#004d80;background:#e6f2f8}/*!@.duet-submenu-bar-dropdown button:hover.active*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover.active{color:#0077b3}/*!@.duet-submenu-bar-dropdown button.active*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:#0077b3}/*!@.duet-submenu-bar-dropdown button.active .caret*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .caret.sc-duet-submenu-bar-dropdown{transform:rotate(180deg)}/*!@.duet-theme-turva .duet-submenu-bar-dropdown button.active*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:#c60c30}/*!@.duet-submenu-bar-dropdown button.active::after*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after{position:absolute;top:auto;bottom:2px;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(2px)}/*!@.duet-theme-turva .duet-submenu-bar-dropdown button.active::after*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after{background:#c60c30}/*!@.duet-submenu-bar-dropdown .items*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{position:absolute;top:101%;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:320px;color:#00294d;background:white;border-radius:0 0 4px 4px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1)}/*!@.duet-submenu-bar-dropdown .items.hidden*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.hidden.sc-duet-submenu-bar-dropdown{display:none}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button:hover*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover{color:#940925;background:#e4e4e6}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button.active*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:#c60c30}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button.active::after*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after{background:#c60c30}/*!@.duet-submenu-bar-dropdown.duet-theme-turva .items*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{background:#f5f5f7}";
+const duetSubmenuBarDropdownCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-dropdown,*.sc-duet-submenu-bar-dropdown::after,*.sc-duet-submenu-bar-dropdown::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-dropdown-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){/*!@:host*/.sc-duet-submenu-bar-dropdown-h{width:auto}}/*!@.duet-submenu-bar-dropdown*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown{position:relative;height:100%}/*!@.duet-submenu-bar-dropdown button*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{position:relative;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:12px 1.5rem;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:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown button*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:#004d80}}/*!@.duet-submenu-bar-dropdown button .label*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown .label.sc-duet-submenu-bar-dropdown{display:flex;gap:5px;align-items:center;justify-content:center}/*!@.duet-submenu-bar-dropdown button.active .caret*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .caret.sc-duet-submenu-bar-dropdown{transform:rotate(180deg)}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown button .caret*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown .caret.sc-duet-submenu-bar-dropdown{position:absolute;right:12px}/*!@.duet-submenu-bar-dropdown button:hover*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover{color:#00294d;background:#e6f2f8}/*!@.duet-submenu-bar-dropdown button:hover.active*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover.active{color:#0077b3}/*!@.duet-submenu-bar-dropdown button.active*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:#0077b3}/*!@.duet-theme-turva .duet-submenu-bar-dropdown button.active*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:#c60c30}/*!@.duet-submenu-bar-dropdown button.active::after*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(1px)}/*!@.duet-theme-turva .duet-submenu-bar-dropdown button.active::after*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after{background:#c60c30}}/*!@.duet-submenu-bar-dropdown .items*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:0 0 16px;overflow-y:auto;color:#00294d;visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown .items*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{position:absolute;top:102%;z-index:600;min-width:320px;padding:0;background:white;border-radius:0 0 4px 4px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1);transition:none}}/*!@.duet-submenu-bar-dropdown .items.hidden*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.hidden.sc-duet-submenu-bar-dropdown{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding 0.3s ease-out}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown.duet-theme-turva button*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{color:#940925}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button:hover*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover{color:#171c3a;background:#e4e4e6}}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button.active*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:#c60c30}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button.active::after*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after{background:#c60c30}/*!@.duet-submenu-bar-dropdown.duet-theme-turva .items*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{background:#f5f5f7}";
 
 class DuetSubmenuBarDropdown {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * Own Properties.
+     */
+    this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+    this.boundMqlFunctions = [];
+    this.changeIconSize = () => {
+      if (this.mql[0].matches) {
+        this.iconSize = "x-small";
+      }
+      else {
+        this.iconSize = "small";
+      }
+    };
     this.onClick = () => {
       this.open = !this.open;
     };
+    this.iconSize = "small";
     this.theme = "";
     this.open = false;
     this.icon = undefined;
@@ -15176,6 +15665,26 @@ class DuetSubmenuBarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    this.changeIconSize();
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].addEventListener) {
+        const bound = this.changeIconSize.bind(this);
+        this.mql[i].addEventListener("change", bound);
+        this.boundMqlFunctions[i] = bound;
+      }
+    }
+  }
+  disconnectedCallback() {
+    for (let i = 0; i < this.mql.length; i++) {
+      // removeEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+      }
+    }
+    this.boundMqlFunctions = [];
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -15183,7 +15692,7 @@ class DuetSubmenuBarDropdown {
   render() {
     return (hAsync(Host, null, hAsync("div", { class: { "duet-submenu-bar-dropdown": true, "duet-theme-turva": this.theme === "turva", active: this.open } }, hAsync("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
-      }, onClick: this.onClick }, this.icon && hAsync("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), hAsync("div", { class: "label" }, hAsync("slot", { name: "label" }), hAsync("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), hAsync("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+      }, onClick: this.onClick }, this.icon && hAsync("duet-icon", { name: this.icon, size: this.iconSize, margin: "none" }), hAsync("div", { class: "label" }, hAsync("slot", { name: "label" }), hAsync("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), hAsync("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
         hidden: !this.open,
       } }, hAsync("slot", null)))));
@@ -15196,7 +15705,8 @@ class DuetSubmenuBarDropdown {
     "$members$": {
       "theme": [1025],
       "open": [1540],
-      "icon": [1537]
+      "icon": [1537],
+      "iconSize": [32]
     },
     "$listeners$": [[8, "click", "handleFocus"]],
     "$lazyBundleId$": "-",
@@ -15204,7 +15714,7 @@ class DuetSubmenuBarDropdown {
   }; }
 }
 
-const duetSubmenuBarDropdownLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-dropdown-link,*.sc-duet-submenu-bar-dropdown-link::after,*.sc-duet-submenu-bar-dropdown-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-dropdown-link-h{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-submenu-bar-dropdown-link*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:0.5rem;align-items:center;justify-content:flex-start;height:100%;padding:0.675rem 16px;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:#00294d;text-align:center;text-decoration:none}/*!@.duet-submenu-bar-dropdown-link.duet-theme-turva*/.duet-submenu-bar-dropdown-link.duet-theme-turva.sc-duet-submenu-bar-dropdown-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}/*!@.duet-submenu-bar-dropdown-link:hover*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:hover{color:#004d80;background:#f3f9fc}/*!@.duet-submenu-bar-dropdown-link:hover.duet-theme-turva*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}/*!@.duet-submenu-bar-dropdown-link.highlight*/.duet-submenu-bar-dropdown-link.highlight.sc-duet-submenu-bar-dropdown-link{color:#0077b3}/*!@.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva*/.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva.sc-duet-submenu-bar-dropdown-link{color:#c60c30}";
+const duetSubmenuBarDropdownLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-dropdown-link,*.sc-duet-submenu-bar-dropdown-link::after,*.sc-duet-submenu-bar-dropdown-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-dropdown-link-h{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-submenu-bar-dropdown-link*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:0.5rem;align-items:center;justify-content:flex-start;height:100%;padding:8px 20px 8px 60px;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:#00294d;text-align:center;text-decoration:none}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown-link*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link{padding:0.675rem 16px;font-size:0.875rem}}/*!@.duet-submenu-bar-dropdown-link.duet-theme-turva*/.duet-submenu-bar-dropdown-link.duet-theme-turva.sc-duet-submenu-bar-dropdown-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown-link:hover*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:hover{color:#004d80;background:#f3f9fc}/*!@.duet-submenu-bar-dropdown-link:hover.duet-theme-turva*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}}/*!@.duet-submenu-bar-dropdown-link.highlight*/.duet-submenu-bar-dropdown-link.highlight.sc-duet-submenu-bar-dropdown-link{color:#0077b3}/*!@.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva*/.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva.sc-duet-submenu-bar-dropdown-link{color:#c60c30}";
 
 class DuetSubmenuBarDropdownLink {
   constructor(hostRef) {
@@ -15250,11 +15760,25 @@ class DuetSubmenuBarDropdownLink {
   }; }
 }
 
-const duetSubmenuBarLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-link,*.sc-duet-submenu-bar-link::after,*.sc-duet-submenu-bar-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-submenu-bar-link*/.duet-submenu-bar-link.sc-duet-submenu-bar-link{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;height:100%;padding:12px 1.5rem;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:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none}/*!@.duet-submenu-bar-link.duet-theme-turva*/.duet-submenu-bar-link.duet-theme-turva.sc-duet-submenu-bar-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}/*!@.duet-submenu-bar-link:hover*/.duet-submenu-bar-link.sc-duet-submenu-bar-link:hover{color:#004d80;background:#e6f2f8}/*!@.duet-submenu-bar-link:hover.duet-theme-turva*/.duet-submenu-bar-link.sc-duet-submenu-bar-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}";
+const duetSubmenuBarLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-link,*.sc-duet-submenu-bar-link::after,*.sc-duet-submenu-bar-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){/*!@:host*/.sc-duet-submenu-bar-link-h{width:auto}}/*!@.duet-submenu-bar-link*/.duet-submenu-bar-link.sc-duet-submenu-bar-link{display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;height:100%;padding:12px 1.5rem;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:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none}@media (min-width: 62em){/*!@.duet-submenu-bar-link*/.duet-submenu-bar-link.sc-duet-submenu-bar-link{flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:0.875rem;color:#004d80}}/*!@.duet-submenu-bar-link.duet-theme-turva*/.duet-submenu-bar-link.duet-theme-turva.sc-duet-submenu-bar-link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}@media (min-width: 62em){/*!@.duet-submenu-bar-link.duet-theme-turva*/.duet-submenu-bar-link.duet-theme-turva.sc-duet-submenu-bar-link{color:#940925}}@media (min-width: 62em){/*!@.duet-submenu-bar-link:hover*/.duet-submenu-bar-link.sc-duet-submenu-bar-link:hover{color:#00294d;background:#e6f2f8}/*!@.duet-submenu-bar-link:hover.duet-theme-turva*/.duet-submenu-bar-link.sc-duet-submenu-bar-link:hover.duet-theme-turva{color:#171c3a;background:#e4e4e6}}";
 
 class DuetSubmenuBarLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * Own Properties.
+     */
+    this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+    this.boundMqlFunctions = [];
+    this.changeIconSize = () => {
+      if (this.mql[0].matches) {
+        this.iconSize = "x-small";
+      }
+      else {
+        this.iconSize = "small";
+      }
+    };
+    this.iconSize = "small";
     this.theme = "";
     this.href = "#";
     this.icon = undefined;
@@ -15265,12 +15789,32 @@ class DuetSubmenuBarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    this.changeIconSize();
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].addEventListener) {
+        const bound = this.changeIconSize.bind(this);
+        this.mql[i].addEventListener("change", bound);
+        this.boundMqlFunctions[i] = bound;
+      }
+    }
+  }
+  disconnectedCallback() {
+    for (let i = 0; i < this.mql.length; i++) {
+      // removeEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+      }
+    }
+    this.boundMqlFunctions = [];
+  }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, null, hAsync("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href, role: "menuitem" }, this.icon && hAsync("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), hAsync("slot", null))));
+    return (hAsync(Host, null, hAsync("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href, role: "menuitem" }, this.icon && hAsync("duet-icon", { name: this.icon, size: this.iconSize, margin: "none" }), hAsync("slot", null))));
   }
   get element() { return getElement(this); }
   static get style() { return duetSubmenuBarLinkCss; }
@@ -15280,7 +15824,8 @@ class DuetSubmenuBarLink {
     "$members$": {
       "theme": [1025],
       "href": [1025],
-      "icon": [1537]
+      "icon": [1537],
+      "iconSize": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -15913,7 +16458,7 @@ class DuetToggle {
   }; }
 }
 
-const duetToolbarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-toolbar,*.sc-duet-toolbar::after,*.sc-duet-toolbar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-toolbar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-toolbar*/.duet-toolbar.sc-duet-toolbar{display:flex;align-items:center;justify-content:center;background:white}/*!@.duet-toolbar .container*/.duet-toolbar.sc-duet-toolbar .container.sc-duet-toolbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:36px;padding:0 28px}/*!@.duet-toolbar ::slotted(*)*/.duet-toolbar .sc-duet-toolbar-s>*{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-toolbar.duet-theme-turva*/.duet-toolbar.duet-theme-turva.sc-duet-toolbar{background:white}";
+const duetToolbarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-toolbar,*.sc-duet-toolbar::after,*.sc-duet-toolbar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-toolbar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-toolbar*/.duet-toolbar.sc-duet-toolbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;background:white}/*!@.duet-toolbar .container*/.duet-toolbar.sc-duet-toolbar .container.sc-duet-toolbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:36px;padding:0 28px;border-bottom:1px solid #e1e3e6}/*!@.duet-toolbar ::slotted(*)*/.duet-toolbar .sc-duet-toolbar-s>*{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-toolbar.duet-theme-turva*/.duet-toolbar.duet-theme-turva.sc-duet-toolbar{background:white}/*!@.duet-toolbar.duet-theme-turva .container*/.duet-toolbar.duet-theme-turva.sc-duet-toolbar .container.sc-duet-toolbar{border-bottom:1px solid #e4e4e6}";
 
 /**
  * @slot left - Slot for content in left side.
@@ -17817,6 +18362,13 @@ registerComponents([
   DuetScrollable,
   DuetSectionLayout,
   DuetSelect,
+  DuetSlideout,
+  DuetSlideoutLang,
+  DuetSlideoutLink,
+  DuetSlideoutPanel,
+  DuetSlideoutPanelDropdown,
+  DuetSlideoutPanelDropdownLink,
+  DuetSlideoutPanelLink,
   DuetSpacer,
   DuetSpinner,
   DuetStep,