@duetds/components 8.0.6 → 8.1.1

package/lib/cjs/duet-submenu-bar-dropdown.cjs.entry.js

@@ -5,122 +5,122 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2cce7b13.js');
+const index = require('./index-2dc54a15.js');
 const tokens = require('./tokens-cecc0f2f.js');
-const themeableComponent = require('./themeable-component-0be6d1f4.js');
-const keyboardUtils = require('./keyboard-utils-02441bc5.js');
+const themeableComponent = require('./themeable-component-83a2a0d4.js');
+const keyboardUtils = require('./keyboard-utils-7248dd0a.js');
 
 const duetSubmenuBarDropdownCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{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:rgb(0, 41, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-submenu-bar-dropdown button{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 77, 128)}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar-dropdown button.open{background:rgb(230, 242, 248)}}.duet-submenu-bar-dropdown button.open .caret{transform:rotate(180deg)}.duet-submenu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar-dropdown button.active .label-text{position:relative}.duet-submenu-bar-dropdown button.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-dropdown button.active .label-text::after{display:none}}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:rgb(0, 41, 77);background:rgb(230, 242, 248)}.duet-submenu-bar-dropdown button:hover.active{color:rgb(0, 41, 77)}.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active{color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-submenu-bar-dropdown button.active::after,.duet-submenu-bar-dropdown button.open::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after,.duet-theme-turva .duet-submenu-bar-dropdown button.open::after{background:rgb(198, 12, 48)}}.duet-submenu-bar-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(0, 41, 77);visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-submenu-bar-dropdown .items::-webkit-scrollbar{display:none}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{position:absolute;top:102%;z-index:600;min-width:320px;padding:4px 0 0;background:rgb(255, 255, 255);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{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.duet-submenu-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)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(228, 228, 230)}}.duet-submenu-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-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.active,.duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(148, 9, 37)}}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:rgb(148, 9, 37)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.open{background:rgb(228, 228, 230)}}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
 
 const DuetSubmenuBarDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Own Properties.
-     */
-    this.mql = [window.matchMedia(tokens.media_query_large.replace(/'/g, ""))];
-    this.boundMqlFunctions = [];
-    this.checkIsDesktop = () => {
-      if (this.mql[0].matches) {
-        this.isDesktop = true;
-        this.iconSize = "x-small";
-      }
-      else {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Own Properties.
+         */
+        this.mql = [window.matchMedia(tokens.media_query_large.replace(/'/g, ""))];
+        this.boundMqlFunctions = [];
+        this.checkIsDesktop = () => {
+            if (this.mql[0].matches) {
+                this.isDesktop = true;
+                this.iconSize = "x-small";
+            }
+            else {
+                this.isDesktop = false;
+                this.iconSize = "small";
+            }
+        };
+        this.onClick = () => {
+            const open = this.open;
+            if (!this.isDesktop) {
+                const dropdowns = Array.from(this.element.parentElement.querySelectorAll("duet-submenu-bar-dropdown"));
+                for (const dropdown of dropdowns) {
+                    dropdown.open = false;
+                }
+            }
+            if (open) {
+                this.open = false;
+            }
+            else {
+                this.open = true;
+            }
+        };
         this.isDesktop = false;
         this.iconSize = "small";
-      }
-    };
-    this.onClick = () => {
-      const open = this.open;
-      if (!this.isDesktop) {
-        const dropdowns = Array.from(this.element.parentElement.querySelectorAll("duet-submenu-bar-dropdown"));
-        for (const dropdown of dropdowns) {
-          dropdown.open = false;
-        }
-      }
-      if (open) {
+        this.theme = "";
+        this.active = false;
         this.open = false;
-      }
-      else {
-        this.open = true;
-      }
-    };
-    this.isDesktop = false;
-    this.iconSize = "small";
-    this.theme = "";
-    this.active = false;
-    this.open = false;
-    this.icon = undefined;
-  }
-  handleFocus(e) {
-    const isClickOutside = e.composedPath().every(node => node !== this.element);
-    if (isClickOutside && this.isDesktop) {
-      this.open = false;
+        this.icon = undefined;
     }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-  }
-  connectedCallback() {
-    this.checkIsDesktop();
-    for (let i = 0; i < this.mql.length; i++) {
-      // addEventListener is not available in Stencil hydrate
-      if (this.mql[i].addEventListener) {
-        const bound = this.checkIsDesktop.bind(this);
-        this.mql[i].addEventListener("change", bound);
-        this.boundMqlFunctions[i] = bound;
-      }
+    handleFocus(e) {
+        const isClickOutside = e.composedPath().every(node => node !== this.element);
+        if (isClickOutside && this.isDesktop) {
+            this.open = false;
+        }
     }
-  }
-  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]);
-      }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
     }
-    this.boundMqlFunctions = [];
-  }
-  handleEscape(e) {
-    if (keyboardUtils.isEscapeKey(e)) {
-      if (this.open) {
-        this.open = false;
-      }
-      else {
-        const dropdown = this.element.closest("duet-submenu-bar");
-        dropdown.open = false;
-        dropdown.setFocus();
-      }
+    connectedCallback() {
+        this.checkIsDesktop();
+        for (let i = 0; i < this.mql.length; i++) {
+            // addEventListener is not available in Stencil hydrate
+            if (this.mql[i].addEventListener) {
+                const bound = this.checkIsDesktop.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 = [];
+    }
+    handleEscape(e) {
+        if (keyboardUtils.isEscapeKey(e)) {
+            if (this.open) {
+                this.open = false;
+            }
+            else {
+                const dropdown = this.element.closest("duet-submenu-bar");
+                dropdown.open = false;
+                dropdown.setFocus();
+            }
+        }
+    }
+    /**
+     * Sets focus. Use this method instead of the global focus().
+     */
+    async setFocus(options) {
+        this.button.focus(options);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (index.h(index.Host, null, index.h("div", { class: {
+                "duet-submenu-bar-dropdown": true,
+                "duet-theme-turva": this.theme === "turva",
+                open: this.open,
+                active: this.active,
+            } }, index.h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+                open: this.open,
+                active: this.active,
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (index.h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), index.h("div", { class: "label" }, index.h("span", { class: "label-text" }, index.h("slot", { name: "label" })), index.h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), index.h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+                items: true,
+                hidden: !this.open,
+            } }, index.h("slot", null)))));
     }
-  }
-  /**
-   * Sets focus. Use this method instead of the global focus().
-   */
-  async setFocus(options) {
-    this.button.focus(options);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: {
-        "duet-submenu-bar-dropdown": true,
-        "duet-theme-turva": this.theme === "turva",
-        open: this.open,
-        active: this.active,
-      } }, index.h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
-        open: this.open,
-        active: this.active,
-      }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (index.h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), index.h("div", { class: "label" }, index.h("span", { class: "label-text" }, index.h("slot", { name: "label" })), index.h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), index.h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
-        items: true,
-        hidden: !this.open,
-      } }, index.h("slot", null)))));
-  }
-  get element() { return index.getElement(this); }
+    get element() { return index.getElement(this); }
 };
 DuetSubmenuBarDropdown.style = duetSubmenuBarDropdownCss;
 

package/lib/cjs/duet-submenu-bar-link.cjs.entry.js

@@ -5,76 +5,76 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2cce7b13.js');
+const index = require('./index-2dc54a15.js');
 const tokens = require('./tokens-cecc0f2f.js');
-const themeableComponent = require('./themeable-component-0be6d1f4.js');
-const keyboardUtils = require('./keyboard-utils-02441bc5.js');
+const themeableComponent = require('./themeable-component-83a2a0d4.js');
+const keyboardUtils = require('./keyboard-utils-7248dd0a.js');
 
 const duetSubmenuBarLinkCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.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:rgb(0, 41, 77);text-align:center;text-decoration:none}.duet-submenu-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-submenu-bar-link:focus,.duet-submenu-bar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}@media (min-width: 62em){.duet-submenu-bar-link{flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:0.875rem;color:rgb(0, 77, 128)}}@media (min-width: 62em){.duet-submenu-bar-link.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-link.active{color:rgb(198, 12, 48)}}.duet-submenu-bar-link.active .label{position:relative}.duet-submenu-bar-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-link.active .label::after{display:none}.duet-submenu-bar-link.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}}.duet-submenu-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\";color:rgb(23, 28, 58)}.duet-submenu-bar-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}.duet-submenu-bar-link.duet-theme-turva.active::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-link:hover{color:rgb(0, 41, 77);background:rgb(230, 242, 248)}.duet-submenu-bar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(228, 228, 230)}}";
 
 const DuetSubmenuBarLink = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Own Properties.
+         */
+        this.mql = [window.matchMedia(tokens.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.active = false;
+        this.href = "#";
+        this.icon = undefined;
+    }
     /**
-     * Own Properties.
+     * Component lifecycle events.
      */
-    this.mql = [window.matchMedia(tokens.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.active = false;
-    this.href = "#";
-    this.icon = undefined;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.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;
-      }
+    componentWillLoad() {
+        themeableComponent.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]);
-      }
+    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 = [];
     }
-    this.boundMqlFunctions = [];
-  }
-  handleEscape(e) {
-    if (keyboardUtils.isEscapeKey(e)) {
-      const dropdown = this.element.closest("duet-submenu-bar");
-      dropdown.open = false;
-      dropdown.setFocus();
+    handleEscape(e) {
+        if (keyboardUtils.isEscapeKey(e)) {
+            const dropdown = this.element.closest("duet-submenu-bar");
+            dropdown.open = false;
+            dropdown.setFocus();
+        }
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (index.h(index.Host, null, index.h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (index.h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), index.h("span", { class: "label" }, index.h("slot", null)))));
     }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (index.h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), index.h("span", { class: "label" }, index.h("slot", null)))));
-  }
-  get element() { return index.getElement(this); }
+    get element() { return index.getElement(this); }
 };
 DuetSubmenuBarLink.style = duetSubmenuBarLinkCss;
 

package/lib/cjs/duet-submenu-bar.cjs.entry.js

@@ -5,129 +5,129 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2cce7b13.js');
+const index = require('./index-2dc54a15.js');
 const tokens = require('./tokens-cecc0f2f.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-83f334d1.js');
-const themeableComponent = require('./themeable-component-0be6d1f4.js');
+const themeableComponent = require('./themeable-component-83a2a0d4.js');
 
 const duetSubmenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;background:rgb(243, 249, 252)}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(205, 229, 241)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 41, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(243, 249, 252);border-bottom:1px solid rgb(207, 210, 212)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(207, 210, 212)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar .mobile-background{position:absolute;width:100%;height:100%;background:rgba(0, 41, 77, 0.6)}@media (min-width: 62em){.duet-submenu-bar .mobile-background{display:none}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar.duet-theme-turva .items{background:rgb(245, 245, 247)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgba(23, 28, 58, 0.6)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
 
 const DuetSubmenuBar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.mql = [window.matchMedia(tokens.media_query_large.replace(/'/g, ""))];
-    this.boundMqlFunctions = [];
-    this.handleMobileView = () => {
-      if (this.mql[0].matches) {
-        this.mobile = false;
-        this.enableBodyScroll();
-      }
-      else {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mql = [window.matchMedia(tokens.media_query_large.replace(/'/g, ""))];
+        this.boundMqlFunctions = [];
+        this.handleMobileView = () => {
+            if (this.mql[0].matches) {
+                this.mobile = false;
+                this.enableBodyScroll();
+            }
+            else {
+                this.mobile = true;
+                if (!this.bodyScroll) {
+                    this.disableBodyScroll();
+                }
+            }
+        };
+        this.onClick = () => {
+            this.open = !this.open;
+        };
+        this.enableBodyScroll = () => {
+            if (this.nav) {
+                bodyScrollLock_es6.enableBodyScroll(this.nav);
+            }
+            if (this.itemsContainer) {
+                bodyScrollLock_es6.enableBodyScroll(this.itemsContainer);
+            }
+        };
+        this.disableBodyScroll = () => {
+            if (this.nav) {
+                bodyScrollLock_es6.disableBodyScroll(this.nav, { reserveScrollBarGap: true });
+            }
+            if (this.itemsContainer) {
+                bodyScrollLock_es6.disableBodyScroll(this.itemsContainer, { reserveScrollBarGap: true });
+            }
+        };
+        this.checkIfHasItems = () => {
+            const hasDropdownLinks = !!this.element.querySelector("duet-submenu-bar-dropdown-link");
+            const hasLinks = !!this.element.querySelector("duet-submenu-bar-link");
+            return hasDropdownLinks || hasLinks;
+        };
         this.mobile = true;
-        if (!this.bodyScroll) {
-          this.disableBodyScroll();
+        this.bodyScroll = true;
+        this.theme = "";
+        this.open = false;
+        this.accessibleLabel = undefined;
+    }
+    watchOpenStateHandler(newValue) {
+        const open = newValue;
+        if (open) {
+            this.bodyScroll = false;
+            this.disableBodyScroll();
+        }
+        else {
+            this.enableBodyScroll();
+            this.bodyScroll = true;
+        }
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+        const children = Array.from(this.element.children).filter(child => !child.hasAttribute("slot"));
+        for (const child of children) {
+            child.setAttribute("role", "listitem");
         }
-      }
-    };
-    this.onClick = () => {
-      this.open = !this.open;
-    };
-    this.enableBodyScroll = () => {
-      if (this.nav) {
-        bodyScrollLock_es6.enableBodyScroll(this.nav);
-      }
-      if (this.itemsContainer) {
-        bodyScrollLock_es6.enableBodyScroll(this.itemsContainer);
-      }
-    };
-    this.disableBodyScroll = () => {
-      if (this.nav) {
-        bodyScrollLock_es6.disableBodyScroll(this.nav, { reserveScrollBarGap: true });
-      }
-      if (this.itemsContainer) {
-        bodyScrollLock_es6.disableBodyScroll(this.itemsContainer, { reserveScrollBarGap: true });
-      }
-    };
-    this.checkIfHasItems = () => {
-      const hasDropdownLinks = !!this.element.querySelector("duet-submenu-bar-dropdown-link");
-      const hasLinks = !!this.element.querySelector("duet-submenu-bar-link");
-      return hasDropdownLinks || hasLinks;
-    };
-    this.mobile = true;
-    this.bodyScroll = true;
-    this.theme = "";
-    this.open = false;
-    this.accessibleLabel = undefined;
-  }
-  watchOpenStateHandler(newValue) {
-    const open = newValue;
-    if (open) {
-      this.bodyScroll = false;
-      this.disableBodyScroll();
     }
-    else {
-      this.enableBodyScroll();
-      this.bodyScroll = true;
+    connectedCallback() {
+        this.nav = document.querySelector("duet-nav > [slot='mobile']");
+        this.hasItems = this.checkIfHasItems();
+        this.handleMobileView();
+        for (let i = 0; i < this.mql.length; i++) {
+            // addEventListener is not available in Stencil hydrate
+            if (this.mql[i].addEventListener) {
+                const bound = this.handleMobileView.bind(this);
+                this.mql[i].addEventListener("change", bound);
+                this.boundMqlFunctions[i] = bound;
+            }
+        }
     }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-    const children = Array.from(this.element.children).filter(child => !child.hasAttribute("slot"));
-    for (const child of children) {
-      child.setAttribute("role", "listitem");
+    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 = [];
+        this.enableBodyScroll();
     }
-  }
-  connectedCallback() {
-    this.nav = document.querySelector("duet-nav > [slot='mobile']");
-    this.hasItems = this.checkIfHasItems();
-    this.handleMobileView();
-    for (let i = 0; i < this.mql.length; i++) {
-      // addEventListener is not available in Stencil hydrate
-      if (this.mql[i].addEventListener) {
-        const bound = this.handleMobileView.bind(this);
-        this.mql[i].addEventListener("change", bound);
-        this.boundMqlFunctions[i] = bound;
-      }
+    /**
+     * Sets focus. Use this method instead of the global focus().
+     */
+    async setFocus(options) {
+        this.button.focus(options);
     }
-  }
-  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]);
-      }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (index.h(index.Host, null, index.h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (index.h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+                active: this.open,
+            }, onClick: this.onClick }, index.h("div", { class: "label" }, index.h("slot", { name: "label" }), index.h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), index.h("div", { class: {
+                "menu-container": true,
+                hidden: !this.open,
+            }, role: "presentation" }, index.h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+                items: true,
+                hidden: !this.open,
+            }, ref: element => (this.itemsContainer = element) }, index.h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, index.h("slot", null), index.h("div", { class: "list-padding" }))), index.h("div", { class: "mobile-background" })))));
     }
-    this.boundMqlFunctions = [];
-    this.enableBodyScroll();
-  }
-  /**
-   * Sets focus. Use this method instead of the global focus().
-   */
-  async setFocus(options) {
-    this.button.focus(options);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (index.h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
-        active: this.open,
-      }, onClick: this.onClick }, index.h("div", { class: "label" }, index.h("slot", { name: "label" }), index.h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), index.h("div", { class: {
-        "menu-container": true,
-        hidden: !this.open,
-      }, role: "presentation" }, index.h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
-        items: true,
-        hidden: !this.open,
-      }, ref: element => (this.itemsContainer = element) }, index.h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, index.h("slot", null), index.h("div", { class: "list-padding" }))), index.h("div", { class: "mobile-background" })))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["watchOpenStateHandler"]
-  }; }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["watchOpenStateHandler"]
+    }; }
 };
 DuetSubmenuBar.style = duetSubmenuBarCss;