@duetds/components 6.8.2 → 6.8.4

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

@@ -595,7 +595,7 @@ export class DuetHeader {
             },
             "I18nText": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         },
@@ -621,7 +621,7 @@ export class DuetHeader {
           "references": {
             "I18nText": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         },
@@ -977,7 +977,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -997,7 +997,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1017,7 +1017,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1037,7 +1037,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1057,7 +1057,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1077,7 +1077,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1097,7 +1097,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1117,7 +1117,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1137,7 +1137,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1157,7 +1157,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1177,7 +1177,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderAnalyticsEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1197,7 +1197,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderMobileNavToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }
@@ -1217,7 +1217,7 @@ export class DuetHeader {
           "references": {
             "DuetHeaderChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx"
             }
           }
         }

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

@@ -150,7 +150,7 @@ export class DuetHeading {
           "references": {
             "DuetHeadingWeight": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-heading/duet-heading.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-heading/duet-heading.tsx"
             }
           }
         },

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

@@ -335,7 +335,7 @@ export class DuetHero {
           "references": {
             "DuetHeroIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         },
@@ -552,7 +552,7 @@ export class DuetHero {
           "references": {
             "DuetHeroButtonData": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         },
@@ -626,7 +626,7 @@ export class DuetHero {
           "references": {
             "DuetHeroVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         },
@@ -735,7 +735,7 @@ export class DuetHero {
           "references": {
             "DuetHeroClickEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         }
@@ -755,7 +755,7 @@ export class DuetHero {
           "references": {
             "DuetHeroAnalyticsEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         }

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

@@ -269,7 +269,7 @@ export class DuetIcon {
           "references": {
             "DuetIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-icon/duet-icon.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-icon/duet-icon.tsx"
             }
           }
         },

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

@@ -716,7 +716,7 @@ export class DuetInput {
           "references": {
             "DuetInputType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -739,7 +739,7 @@ export class DuetInput {
           "references": {
             "DuetVariationType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -919,7 +919,7 @@ export class DuetInput {
           "references": {
             "DuetInputComponentType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -1092,7 +1092,7 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1112,7 +1112,7 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1132,7 +1132,7 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1152,7 +1152,7 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1172,7 +1172,7 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }

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

@@ -92,7 +92,7 @@ export class DuetLabel {
           "references": {
             "DuetLabelMargin": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx"
             }
           }
         },
@@ -115,7 +115,7 @@ export class DuetLabel {
           "references": {
             "DuetLabelSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx"
             }
           }
         },

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

@@ -123,7 +123,7 @@ export class DuetLayout {
           "references": {
             "DuetLayoutStickyDistance": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-layout/duet-layout.tsx"
             }
           }
         },

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

@@ -6,7 +6,7 @@ import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 /**
  * @part duet-link - piercing selector for styling the link
  */
@@ -25,12 +25,23 @@ export class DuetLink {
     this.icon = undefined;
     this.padding = "auto";
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-link`. Use this method instead of the global
    * `link.focus()`.
@@ -145,7 +156,7 @@ export class DuetLink {
           "text": "The currently active language. This setting changes the external link\naccessible label to match the chosen language."
         },
         "attribute": "language",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "getLanguage()"
       },
       "accessibleLabelExternalDefaults": {
@@ -176,7 +187,7 @@ export class DuetLink {
       },
       "accessibleLabelExternal": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -362,4 +373,10 @@ export class DuetLink {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }];
+  }
 }

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

@@ -165,7 +165,7 @@ export class DuetList {
           "references": {
             "DuetListMobileAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -188,7 +188,7 @@ export class DuetList {
           "references": {
             "DuetListBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -211,7 +211,7 @@ export class DuetList {
           "references": {
             "DuetListVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -234,7 +234,7 @@ export class DuetList {
           "references": {
             "DuetListLabelWidth": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },

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

@@ -168,7 +168,7 @@ export class DuetLogo {
           "references": {
             "DuetLogoSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-logo/duet-logo.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-logo/duet-logo.tsx"
             }
           }
         },

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

@@ -3,7 +3,7 @@
  */
 import { media_query_large, media_query_xx_large } from "@duetds/tokens/lib/tokens.json";
 import { Build, h, Host } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { inheritGlobalTheme } from "../../common";
 /**
  * @slot center - Slot for content in center.
  * @slot right - Slot for content in right side.
@@ -96,6 +96,12 @@ export class DuetMenuBar {
       this.scrollToActive();
     }, 0);
   }
+  onWindowResize() {
+    clearTimeout(this.resizeTimer);
+    this.resizeTimer = setTimeout(() => {
+      this.scrollToActive();
+    }, 100);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -207,11 +213,20 @@ export class DuetMenuBar {
           "references": {
             "DuetMenuBarChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx"
             }
           }
         }
       }];
   }
   static get elementRef() { return "element"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "onWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.css

@@ -41,6 +41,13 @@
 .duet-menu-bar-button.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
+.duet-menu-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-menu-bar-button:focus.duet-theme-turva {
+  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-menu-bar-button {
     padding: 0 16px;

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

@@ -68,6 +68,10 @@
 .duet-menu-bar-dropdown button:hover {
   color: rgb(0, 119, 179);
 }
+.duet-menu-bar-dropdown button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
 .duet-menu-bar-dropdown button .label {
   display: flex;
   gap: 0.5rem;
@@ -122,6 +126,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-menu-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);
+}
 .duet-menu-bar-dropdown.duet-theme-turva button:hover {
   color: rgb(198, 12, 48);
 }

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-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 DuetMenuBarDropdown {
   constructor() {
     /**
@@ -71,6 +72,18 @@ export class DuetMenuBarDropdown {
     }
     this.boundMqlFunctions = [];
   }
+  handleEscape(e) {
+    if (isEscapeKey(e)) {
+      this.open = false;
+      this.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.
@@ -81,9 +94,9 @@ export class DuetMenuBarDropdown {
         "duet-theme-turva": this.theme === "turva",
         active: this.open,
         [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-      } }, h("button", { "aria-label": this.accessibleLabel, "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-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
-      }, onClick: this.onClick }, 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: {
+      }, 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("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)))));
@@ -185,6 +198,32 @@ export class DuetMenuBarDropdown {
       "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-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.css

@@ -50,6 +50,13 @@
 .duet-menu-bar-dropdown-link--slot-right:hover.duet-theme-turva {
   background: rgb(228, 228, 230);
 }
+.duet-menu-bar-dropdown-link--slot-right:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
+.duet-menu-bar-dropdown-link--slot-right: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-menu-bar-dropdown-link--slot-below:hover {
   color: rgb(0, 77, 128);
   background: rgb(243, 249, 252);

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetMenuBarDropdownLink {
   constructor() {
     this.getVariant = () => {
@@ -26,6 +27,13 @@ export class DuetMenuBarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  handleEscape(e) {
+    if (isEscapeKey(e)) {
+      const dropdown = this.element.closest("duet-menu-bar-dropdown");
+      dropdown.open = false;
+      dropdown.setFocus();
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -35,7 +43,7 @@ export class DuetMenuBarDropdownLink {
         "duet-menu-bar-dropdown-link": true,
         [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
         "duet-theme-turva": this.theme === "turva",
-      }, href: this.href, role: "menuitem" }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", null))));
+      }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-dropdown-link"; }
   static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.css

@@ -50,6 +50,13 @@
     padding: 0 28px;
   }
 }
+.duet-menu-bar-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-menu-bar-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-menu-bar-link.active {
   color: rgb(0, 119, 179);
 }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -60,7 +60,7 @@ export class DuetMenuBarLink {
         "duet-menu-bar-link": true,
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
-      }, href: this.href }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
+      }, href: this.href, "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-link"; }
   static get encapsulation() { return "shadow"; }