@duetds/components 6.8.2 → 6.8.3

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

@@ -4,9 +4,16 @@
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
+import { isEscapeKey } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideout {
   constructor() {
+    this.exitLangObject = {
+      en: "Exit the menu",
+      fi: "Poistu valikosta",
+      sv: "Avsluta menyn",
+    };
     this.toggleMenu = (e) => {
       const toggle = !this.open;
       this.open = toggle;
@@ -17,9 +24,15 @@ export class DuetSlideout {
         component: "duet-slideout",
       });
       if (toggle) {
-        setTimeout(() => {
-          this.closeButton.focus();
-        }, 200);
+        const openPanel = this.element.querySelector("duet-slideout-panel[open]");
+        if (openPanel) {
+          openPanel.setFocus();
+        }
+        else {
+          setTimeout(() => {
+            this.closeButton.focus();
+          }, 200);
+        }
       }
       else {
         setTimeout(() => {
@@ -59,8 +72,8 @@ export class DuetSlideout {
       this.openButton = this.element.querySelector(":scope > [slot='toggle']");
     }
     if (this.openButton) {
-      this.openButton.setAttribute("aria-haspopup", "dialog");
-      this.openButton.setAttribute("aria-expanded", "false");
+      this.openButton.accessiblePopup = "true";
+      this.openButton.accessibleExpanded = false;
       this.openButton.addEventListener("click", e => {
         e.stopPropagation();
         e.preventDefault();
@@ -69,6 +82,23 @@ export class DuetSlideout {
       this.openButton = this.openButton;
     }
   }
+  /**
+   * Component event handling.
+   */
+  handleKeyUp(ev) {
+    // When Esc is pressed
+    if (isEscapeKey(ev)) {
+      if (this.open) {
+        this.toggleMenu(ev);
+      }
+    }
+  }
+  /**
+   * Sets focus. Use this method instead of the global focus().
+   */
+  async setFocus(options) {
+    this.openButton.focus(options);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -77,6 +107,7 @@ export class DuetSlideout {
     const styles = {
       background: getColorByName(this.backgroundColor, this.theme),
     };
+    const exitTranslation = getLocaleString(this.exitLangObject);
     return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { name: "toggle" }), h("div", { class: {
         "desktop-bg": true,
         hidden: !this.open,
@@ -85,7 +116,7 @@ export class DuetSlideout {
       } }), h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
         dialog: true,
         hidden: !this.open,
-      }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+      }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
         "slideout-close": true,
         active: this.open,
       }, onClick: this.onClick }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { id: "menubar", role: "menubar", class: {
@@ -212,8 +243,39 @@ export class DuetSlideout {
           "text": "Toggles the slideout.",
           "tags": []
         }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus. Use this method instead of the global focus().",
+          "tags": []
+        }
       }
     };
   }
   static get elementRef() { return "element"; }
+  static get listeners() {
+    return [{
+        "name": "keyup",
+        "method": "handleKeyUp",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -28,7 +28,7 @@ export class DuetSlideoutLang {
    */
   render() {
     const langTranslation = getLocaleString(this.chooseLangObject);
-    return (h(Host, null, h("div", { class: "duet-slideout-lang" }, h("duet-visually-hidden", null, langTranslation), h("duet-icon", { name: "navigation-language", margin: "none", color: "secondary" }), h("slot", null))));
+    return (h(Host, null, h("div", { class: "duet-slideout-lang", "aria-role": "group", "aria-label": langTranslation }, h("duet-icon", { name: "navigation-language", margin: "none", color: "secondary" }), h("slot", null))));
   }
   static get is() { return "duet-slideout-lang"; }
   static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.css

@@ -44,6 +44,13 @@
 .duet-slideout-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";
 }
+.duet-slideout-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
+.duet-slideout-link:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
 .duet-slideout-link.active span {
   position: relative;
 }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.js

@@ -31,7 +31,7 @@ export class DuetSlideoutLink {
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
         [this.size]: true,
-      }, href: this.href, role: this.menuItem && "menuitem", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { class: "label" }, h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && (h("duet-icon", { name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+      }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { class: "label" }, h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && (h("duet-icon", { name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
   }
   static get is() { return "duet-slideout-link"; }
   static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.css

@@ -76,6 +76,10 @@
   font-size: 1.5rem;
   font-weight: 800;
 }
+.duet-slideout-panel .link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
 .duet-slideout-panel .link.active .label-text {
   position: relative;
 }
@@ -122,6 +126,11 @@
   opacity: 1;
   transition: top 0.3s ease-in, opacity 0.3s ease-in;
 }
+.duet-slideout-panel .top .back:focus,
+.duet-slideout-panel .top .close:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
 .duet-slideout-panel .top duet-icon {
   padding: 16px;
 }
@@ -147,9 +156,16 @@
   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-slideout-panel.duet-theme-turva .link:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
 .duet-slideout-panel.duet-theme-turva .link.active .label-text::after {
   background: rgb(198, 12, 48);
 }
+.duet-slideout-panel.duet-theme-turva .top .back:focus,
+.duet-slideout-panel.duet-theme-turva .top .close:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
 .duet-slideout-panel.duet-theme-turva .top span {
   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);

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -9,9 +9,14 @@ import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideoutPanel {
   constructor() {
     this.exitLangObject = {
-      en: "Exit the dialog",
-      fi: "Poistu dialogista",
-      sv: "Stäng dialogrutan",
+      en: "Exit the menu",
+      fi: "Poistu valikosta",
+      sv: "Avsluta menyn",
+    };
+    this.backLangObject = {
+      en: "Back to main menu",
+      fi: "Takaisin päävalikkoon",
+      sv: "Tillbaka till huvudmenyn",
     };
     this.updateLabel = () => {
       const labelSlotElement = this.element.querySelector("[slot='label']");
@@ -54,6 +59,21 @@ export class DuetSlideoutPanel {
     inheritGlobalTheme(this);
     this.updateLabel();
   }
+  /**
+   * Sets focus. Use this method instead of the global focus().
+   */
+  async setFocus(options) {
+    if (this.open) {
+      setTimeout(() => {
+        this.closeButton.focus(options);
+      }, 200);
+    }
+    else {
+      setTimeout(() => {
+        this.openButton.focus(options);
+      }, 200);
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -68,19 +88,20 @@ export class DuetSlideoutPanel {
       background: getColorByName(defaultBackgroundColor, this.theme),
     };
     const exitTranslation = getLocaleString(this.exitLangObject);
+    const backTranslation = getLocaleString(this.backLangObject);
     return (h(Host, null, h("div", { class: {
         "duet-slideout-panel": true,
         "duet-theme-turva": this.theme === "turva",
         active: this.open,
-      } }, h("button", { ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+      } }, h("button", { ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
         link: true,
         active: this.active,
       }, onClick: this.onToggleClick }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("div", { class: "label" }, h("span", { class: { "label-text": true, [this.labelSize]: true } }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { class: {
         dialog: true,
         hidden: !this.open,
-      }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+      }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
         back: true,
-      }, onClick: this.onToggleClick }, h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", null, this.label.innerHTML), h("button", { type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+      }, onClick: this.onToggleClick }, h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", null, this.label.innerHTML), h("button", { class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
       } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
   }
@@ -223,5 +244,31 @@ export class DuetSlideoutPanel {
       "label": {}
     };
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus. Use this method instead of the global focus().",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.css

@@ -66,6 +66,10 @@
   align-items: center;
   justify-content: center;
 }
+.duet-slideout-panel-dropdown button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
 .duet-slideout-panel-dropdown button.active .label::after {
   position: absolute;
   top: auto;
@@ -85,7 +89,7 @@
   justify-content: center;
   width: 100%;
   max-height: 1000px;
-  padding: 0 20px 8px 44px;
+  padding: 4px 20px 8px 44px;
   overflow-y: auto;
   visibility: visible;
   transition: max-height 0.3s ease-in, padding-bottom 0.3s ease-in;
@@ -106,6 +110,9 @@
   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-slideout-panel-dropdown.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
 .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after {
   background: rgb(198, 12, 48);
 }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -29,6 +29,12 @@ export class DuetSlideoutPanelDropdown {
       link.menuItem = true;
     });
   }
+  /**
+   * 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.
@@ -38,7 +44,7 @@ export class DuetSlideoutPanelDropdown {
         "duet-slideout-panel-dropdown": true,
         "duet-theme-turva": this.theme === "turva",
         active: this.open,
-      } }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+      } }, 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: {
         active: this.active,
       }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
@@ -138,6 +144,32 @@ export class DuetSlideoutPanelDropdown {
       }
     };
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus. Use this method instead of the global focus().",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "element"; }
   static get listeners() {
     return [{

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css

@@ -67,6 +67,10 @@
   line-height: 1.25;
   color: rgb(0, 41, 77);
 }
+.duet-submenu-bar button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
 .duet-submenu-bar button.active .caret {
   transform: rotate(180deg);
 }
@@ -118,6 +122,9 @@
   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 rgb(23, 28, 58);
+}
 .duet-submenu-bar.duet-theme-turva .items {
   background: rgb(245, 245, 247);
 }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -1,13 +1,25 @@
 /*!
  * Built with Duet Design System
  */
+import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetSubmenuBar {
   constructor() {
+    this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+    this.boundMqlFunctions = [];
+    this.changeAriaProperties = () => {
+      if (this.mql[0].matches) {
+        this.mobile = false;
+      }
+      else {
+        this.mobile = true;
+      }
+    };
     this.onClick = () => {
       this.open = !this.open;
     };
+    this.mobile = true;
     this.theme = "";
     this.open = false;
   }
@@ -17,14 +29,40 @@ export class DuetSubmenuBar {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    this.changeAriaProperties();
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].addEventListener) {
+        const bound = this.changeAriaProperties.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 = [];
+  }
+  /**
+   * 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 (h(Host, null, h("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+    return (h(Host, null, h("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: this.mobile ? null : "menubar" }, 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 }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { role: "menu", id: "menu", "aria-labelledby": "button", "aria-expanded": this.open ? "true" : "false", class: {
+      }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), 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,
       } }, h("slot", null)))));
@@ -86,5 +124,36 @@ export class DuetSubmenuBar {
       }
     };
   }
+  static get states() {
+    return {
+      "mobile": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus. Use this method instead of the global focus().",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.css

@@ -69,9 +69,33 @@
   align-items: center;
   justify-content: center;
 }
-.duet-submenu-bar-dropdown button.active .caret {
+.duet-submenu-bar-dropdown button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
+.duet-submenu-bar-dropdown button.open .caret {
   transform: rotate(180deg);
 }
+.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;
@@ -82,7 +106,10 @@
     background: rgb(230, 242, 248);
   }
   .duet-submenu-bar-dropdown button:hover.active {
-    color: rgb(0, 119, 179);
+    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);
@@ -90,7 +117,7 @@
   .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.active::after, .duet-submenu-bar-dropdown button.open::after {
     position: absolute;
     top: auto;
     bottom: 0;
@@ -103,7 +130,7 @@
     transition: 300ms ease;
     transform: translateY(1px);
   }
-  .duet-theme-turva .duet-submenu-bar-dropdown button.active::after {
+  .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);
   }
 }
@@ -113,7 +140,7 @@
   align-items: center;
   justify-content: center;
   max-height: 1000px;
-  padding: 0 0 16px;
+  padding: 4px 0 16px;
   overflow-y: auto;
   color: rgb(0, 41, 77);
   visibility: visible;
@@ -130,7 +157,7 @@
     top: 102%;
     z-index: 600;
     min-width: 320px;
-    padding: 0;
+    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);
@@ -148,17 +175,23 @@
   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-dropdown.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px 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.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.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.active::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open::after {
   background: rgb(148, 9, 37);
 }
 @media (min-width: 62em) {