@duetds/components 6.8.1 → 6.8.3

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

@@ -65,6 +65,7 @@ export class DuetCollapsible {
     this.theme = "";
     this.accessibleLabel = undefined;
     this.heading = "";
+    this.centerHeading = false;
     this.headingWeight = "semibold";
     this.headingSize = undefined;
     this.headingLevel = undefined;
@@ -98,6 +99,7 @@ export class DuetCollapsible {
     const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, null, h("button", { class: {
         "duet-collapsible-heading": true,
+        "duet-collapsible-heading-centered": this.centerHeading,
         "duet-theme-turva": this.theme === "turva",
         "duet-collapsible-normal-weight": this.headingWeight === "normal",
         "has-after-heading": this.hasAfterHeading,
@@ -175,6 +177,24 @@ export class DuetCollapsible {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "centerHeading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Centers heading inside its container"
+        },
+        "attribute": "center-heading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "headingWeight": {
         "type": "string",
         "mutable": false,

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

@@ -122,13 +122,19 @@
 .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
   padding: 0 0 48px;
   margin: 0;
-  overflow: hidden;
   background: none;
 }
-.duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
+.duet-hero.duet-hero-campaign .background-area, .duet-hero.duet-hero-section .background-area {
+  height: 1px;
+  margin-bottom: -1px;
+}
+.duet-hero.duet-hero-campaign .background-container, .duet-hero.duet-hero-section .background-container {
   position: absolute;
   right: 0;
   left: 0;
+  overflow: hidden;
+}
+.duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
   display: flex;
   align-items: flex-start;
   justify-content: center;

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

@@ -151,7 +151,7 @@ export class DuetHero {
         "duet-hero-gray-with-back": !!this.processedBack,
         "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
         "duet-hero-left-align": this.leftAlign && !campaignOrSection,
-      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", null, h("div", { class: "background" }, h("img", { src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" }))), this.variation === "product" && this.image && (h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))), this.variation === "content" && this.image && (h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles }))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))), this.variation === "content" && this.image && (h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles }))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
       this.processedBack && (h("div", { class: "duet-hero-back" }, h("duet-button", { style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
         label: this.processedBack.label,
         href: this.processedBack.href,

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.
@@ -214,4 +220,13 @@ export class DuetMenuBar {
       }];
   }
   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

@@ -38,6 +38,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.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

@@ -37,6 +37,9 @@
   text-decoration: none;
   white-space: nowrap;
 }
+.duet-menu-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";
+}
 @media (min-width: 62em) {
   .duet-menu-bar-link {
     padding: 0 16px;
@@ -47,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"; }

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

@@ -226,7 +226,7 @@ export class DuetNumberInput {
     this.duetInputElement.value = "";
   }
   formatAnnouncement() {
-    const current = SafeParseFloat(this.value, this.locale);
+    const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
     if (current == null) {
       return "";
     }
@@ -239,7 +239,7 @@ export class DuetNumberInput {
   render() {
     const identifier = this.identifier || this.inputId;
     const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
-    const cleanedValue = SafeParseFloat(this.value, this.locale);
+    const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
     return (h(Host, { class: {
         "duet-theme-turva": this.theme === "turva",
         "duet-expand": this.expand,

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

@@ -34,6 +34,10 @@
   opacity: 1;
 }
 
+:host(:not([open])) ::slotted(duet-slideout-panel) {
+  display: none;
+}
+
 .duet-slideout {
   display: flex;
   align-items: center;
@@ -98,6 +102,10 @@
 .duet-slideout .dialog .top button {
   cursor: pointer;
 }
+.duet-slideout .dialog .top 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 .dialog .top duet-icon {
   padding: 16px;
 }
@@ -123,12 +131,18 @@
   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.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.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }
 .duet-slideout.duet-theme-turva button.active::after {
   background: rgb(198, 12, 48);
 }
+.duet-slideout .dialog .top button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
 
 ::slotted(*) {
   width: 100%;
@@ -138,7 +152,7 @@ slot {
   color: rgb(0, 41, 77);
 }
 .duet-theme-turva slot {
-  color: rgb(148, 9, 37);
+  color: rgb(23, 28, 58);
 }
 
 slot[name=toggle] {

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,10 +116,10 @@ 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" }))), h("div", { id: "menubar", role: "menubar", class: {
+      }, onClick: this.onClick }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { id: "menubar", role: "menubar", class: {
         items: true,
       } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
   }
@@ -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" }), 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: this.menuItem && "currentColor", 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: "primary", 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;
 }
@@ -145,11 +154,18 @@
 }
 .duet-slideout-panel.duet-theme-turva .link {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(148, 9, 37);
+  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);
@@ -163,5 +179,5 @@ slot:not([name=label]) {
   color: rgb(0, 41, 77);
 }
 .duet-theme-turva slot:not([name=label]) {
-  color: rgb(148, 9, 37);
+  color: rgb(23, 28, 58);
 }