@duetds/components 6.8.1 → 6.8.3

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" }), 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" }))), h("div", { class: {
+      }, 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" })), 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" }))), 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;
@@ -104,7 +108,13 @@
 }
 .duet-slideout-panel-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(148, 9, 37);
+  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);
 }
 
 slot {
@@ -115,7 +125,7 @@ slot {
   color: rgb(0, 41, 77);
 }
 .duet-theme-turva slot {
-  color: rgb(148, 9, 37);
+  color: rgb(23, 28, 58);
 }
 
 slot[name=label] {

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,9 +44,9 @@ 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" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+      }, 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,
         hidden: !this.open,
       } }, h("slot", null)))));
@@ -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) {

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

@@ -4,6 +4,7 @@
 import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetSubmenuBarDropdown {
   constructor() {
     /**
@@ -24,6 +25,7 @@ export class DuetSubmenuBarDropdown {
     };
     this.iconSize = "small";
     this.theme = "";
+    this.active = false;
     this.open = false;
     this.icon = undefined;
   }
@@ -59,14 +61,38 @@ export class DuetSubmenuBarDropdown {
     }
     this.boundMqlFunctions = [];
   }
+  handleEscape(e) {
+    if (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 (h(Host, null, h("div", { class: { "duet-submenu-bar-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: {
-        active: this.open,
-      }, onClick: this.onClick }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+    return (h(Host, null, h("div", { class: {
+        "duet-submenu-bar-dropdown": true,
+        "duet-theme-turva": this.theme === "turva",
+        open: this.open,
+        active: this.active,
+      } }, 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 && (h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("span", { class: "label-text" }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
         hidden: !this.open,
       } }, h("slot", null)))));
@@ -108,6 +134,24 @@ export class DuetSubmenuBarDropdown {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "open": {
         "type": "boolean",
         "mutable": true,
@@ -151,6 +195,32 @@ export class DuetSubmenuBarDropdown {
       "iconSize": {}
     };
   }
+  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-dropdown-link/duet-submenu-bar-dropdown-link.css

@@ -46,10 +46,40 @@
     font-size: 0.875rem;
   }
 }
+.duet-submenu-bar-dropdown-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-submenu-bar-dropdown-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-submenu-bar-dropdown-link.active .label {
+  position: relative;
+}
+.duet-submenu-bar-dropdown-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-dropdown-link.active .label::after {
+    display: none;
+  }
+}
 .duet-submenu-bar-dropdown-link.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
 }
+.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after {
+  background: rgb(198, 12, 48);
+}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown-link:hover {
     color: rgb(0, 77, 128);

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

@@ -3,9 +3,11 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetSubmenuBarDropdownLink {
   constructor() {
     this.theme = "";
+    this.active = false;
     this.href = "#";
     this.icon = undefined;
     this.caret = false;
@@ -17,6 +19,13 @@ export class DuetSubmenuBarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  handleEscape(e) {
+    if (isEscapeKey(e)) {
+      const dropdown = this.element.closest("duet-submenu-bar-dropdown");
+      dropdown.open = false;
+      dropdown.setFocus();
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -26,7 +35,8 @@ export class DuetSubmenuBarDropdownLink {
         "duet-submenu-bar-dropdown-link": true,
         "duet-theme-turva": this.theme === "turva",
         highlight: this.highlight,
-      }, href: this.href, role: "menuitem" }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("slot", null), this.caret && h("duet-icon", { name: "action-arrow-right-small", size: "xxx-small", margin: "none" }))));
+        active: this.active,
+      }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { class: "label" }, h("slot", null)), this.caret && h("duet-icon", { name: "action-arrow-right-small", size: "xxx-small", margin: "none" }))));
   }
   static get is() { return "duet-submenu-bar-dropdown-link"; }
   static get encapsulation() { return "shadow"; }
@@ -65,6 +75,24 @@ export class DuetSubmenuBarDropdownLink {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "href": {
         "type": "string",
         "mutable": true,