@duetds/components 6.5.1 → 6.5.3

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

@@ -3,7 +3,7 @@
  */
 import icon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import * as tokens from "@duetds/tokens/lib/tokens.json";
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
@@ -11,6 +11,7 @@ import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
  * @part duet-collapsible-content - piercing selector for styling the content
+ * @slot after-heading - Content after the heading can be for example badges.
  */
 export class DuetCollapsible {
   constructor() {
@@ -74,6 +75,9 @@ export class DuetCollapsible {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.hasAfterHeading = Build.isServer
+      ? Array.from(this.element.children).filter(el => el.matches("[slot='after-heading']")).length > 0
+      : !!this.element.querySelector(":scope > [slot='after-heading']");
   }
   /**
    * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
@@ -95,7 +99,8 @@ export class DuetCollapsible {
         "duet-collapsible-heading": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-collapsible-normal-weight": this.headingWeight === "normal",
-      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading)), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
+        "has-after-heading": this.hasAfterHeading,
+      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", null, h("slot", { name: "after-heading" })))), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
   }
   static get is() { return "duet-collapsible"; }
   static get encapsulation() { return "scoped"; }

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

@@ -388,4 +388,70 @@ duet-caption:not(:last-of-type) {
   border-right-width: 0 !important;
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
+}
+
+.duet-input-variation-revealable {
+  position: relative;
+  width: 100%;
+}
+.duet-input-variation-revealable ::-ms-reveal {
+  display: none;
+}
+.duet-input-variation-revealable .duet-input-relative {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  width: auto;
+  border: 1px solid #909599;
+  border-radius: 4px;
+  box-shadow: initial;
+  transition: box-shadow 150ms ease, border 150ms ease;
+}
+.duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
+  border-color: #747475;
+}
+.duet-input-variation-revealable .duet-input-relative duet-button {
+  z-index: 250;
+  margin-bottom: 0;
+}
+.duet-input-variation-revealable .duet-input-relative .duet-input {
+  border-width: 0 !important;
+}
+.duet-input-variation-revealable .duet-input-relative .duet-input:focus, .duet-input-variation-revealable .duet-input-relative .duet-input:hover {
+  border-width: 0 !important;
+  box-shadow: none !important;
+}
+.duet-input-variation-revealable.disabled .duet-input-relative {
+  background: #f5f8fa;
+  border-color: #e1e3e6;
+  box-shadow: none;
+}
+.duet-input-variation-revealable.has-error .duet-input-relative {
+  border-color: #de2362;
+}
+.duet-input-variation-revealable.duet-theme-turva.has-error .duet-input-relative {
+  border-color: #e02a0d;
+}
+.duet-input-variation-revealable.has-focus .duet-input-relative {
+  border-color: #0077b3;
+  box-shadow: 0 0 0 1px #0077b3;
+}
+.duet-input-variation-revealable.duet-theme-turva.has-focus .duet-input-relative {
+  border-color: #171c3a;
+  box-shadow: 0 0 0 1px #171c3a;
+}
+.duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #909599;
+}
+.duet-input-variation-revealable.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #747475;
+}
+.duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #de2362;
+}
+.duet-input-variation-revealable.duet-theme-turva.has-error:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #e02a0d;
 }

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

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
-import { isEscapeKey } from "../../utils/keyboard-utils";
+import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
 const icons = {
   search: searchIcon,
@@ -35,6 +35,26 @@ export class DuetInput {
       fi: "Aika",
       sv: "Tid",
     });
+    this.showPasswordLabel = getLocaleString({
+      en: "Show password",
+      fi: "Näytä salasana",
+      sv: "Visa lösenord",
+    });
+    this.hidePasswordLabel = getLocaleString({
+      en: "Hide password",
+      fi: "Piilota salasana",
+      sv: "Dölj lösenord",
+    });
+    this.passwordShownAriaAnnouncement = getLocaleString({
+      en: "Password is shown",
+      fi: "Salasana näytetään",
+      sv: "Lösenordet visas",
+    });
+    this.passwordHiddenAriaAnnouncement = getLocaleString({
+      en: "Password is hidden",
+      fi: "Salasana on piilotettu",
+      sv: "Lösenordet är dolt",
+    });
     /**
      * Component event handling.
      */
@@ -50,6 +70,14 @@ export class DuetInput {
       });
     };
     this.onBlur = (ev) => {
+      // prevent blur event when focus moves to the reveal password button or the input itself
+      if (ev.relatedTarget === this.nativeInput || ev.relatedTarget === this.togglePasswordRevealedButton) {
+        return;
+      }
+      if (this.variation === "revealable") {
+        this.isPasswordRevealed = false;
+      }
+      this.isFocused = false;
       this.duetBlur.emit({
         originalEvent: ev,
         value: this.value,
@@ -57,6 +85,7 @@ export class DuetInput {
       });
     };
     this.onFocus = (ev) => {
+      this.isFocused = true;
       this.duetFocus.emit({
         originalEvent: ev,
         value: this.value,
@@ -70,8 +99,8 @@ export class DuetInput {
         component: "duet-input",
       });
     };
-    /** Private functions
-     *
+    /**
+     * Private functions
      */
     this.getDescribedBy = () => {
       let describedBy = "";
@@ -98,8 +127,27 @@ export class DuetInput {
       if (isEscapeKey(event) && this.clear) {
         this.handleClearClick(event);
       }
+      if (isEnterKey(event) && this.variation === "revealable") {
+        if (event.target === this.togglePasswordRevealedButton) {
+          event.stopPropagation();
+        }
+        else {
+          this.isPasswordRevealed = false;
+        }
+      }
       return event;
     };
+    this.togglePasswordRevealed = () => {
+      this.isPasswordRevealed = !this.isPasswordRevealed;
+    };
+    this.getInputType = () => {
+      if (this.variation === "revealable") {
+        return this.isPasswordRevealed ? "text" : "password";
+      }
+      return this.type;
+    };
+    this.isPasswordRevealed = false;
+    this.isFocused = false;
     this.accessibleActiveDescendant = undefined;
     this.accessibleAutocomplete = undefined;
     this.accessibleControls = undefined;
@@ -173,6 +221,13 @@ export class DuetInput {
     this.disallowedPatternChange();
     this.isCaptionVisible = !!this.caption;
   }
+  componentDidLoad() {
+    if (this.variation === "revealable" && this.nativeInput.form) {
+      this.nativeInput.form.addEventListener("submit", () => {
+        this.isPasswordRevealed = false;
+      });
+    }
+  }
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
@@ -248,19 +303,21 @@ export class DuetInput {
             (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time")),
         "has-error": !!this.error,
         "has-clear": this.clear,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-label-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
+        "has-focus": this.isFocused,
+        disabled: this.disabled,
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-label-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
         "duet-input": true,
         disabled: this.disabled,
         "is-number": this.component === "number",
         "is-date": this.component === "date",
       }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy
         ? `${this.errorId} ${this.labelId}  ${this.accessibleLabelledBy}`
-        : `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-errormessage": this.error ? this.errorId : null, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
+        : `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-errormessage": this.error ? this.errorId : null, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
         "duet-input-clear-icon": true,
         "duet-input-clear-icon-single": !hasInputIcon,
         "duet-input-clear-icon-double": !!this.icon,
         "duet-input-clear-icon-button": this.variation === "button",
-      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
+      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed ? this.hidePasswordLabel : this.showPasswordLabel, margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed ? this.passwordShownAriaAnnouncement : this.passwordHiddenAriaAnnouncement))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }
@@ -666,7 +723,7 @@ export class DuetInput {
         "mutable": false,
         "complexType": {
           "original": "DuetVariationType",
-          "resolved": "\"button\" | \"default\"",
+          "resolved": "\"button\" | \"default\" | \"revealable\"",
           "references": {
             "DuetVariationType": {
               "location": "local"
@@ -677,7 +734,7 @@ export class DuetInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variation of button."
+          "text": "Variation of button. Use \"button\" to render a button element next to the input. Use \"revealable\" to render a button that reveals the password."
         },
         "attribute": "variation",
         "reflect": false,
@@ -997,6 +1054,12 @@ export class DuetInput {
       }
     };
   }
+  static get states() {
+    return {
+      "isPasswordRevealed": {},
+      "isFocused": {}
+    };
+  }
   static get events() {
     return [{
         "method": "duetInput",

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

@@ -17,6 +17,17 @@ export class DuetMenuBarButton {
       }
     };
     this.iconSize = "x-small";
+    this.accessibleLabel = undefined;
+    this.accessibleControls = undefined;
+    this.accessiblePopup = "false";
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.accessibleExpanded = undefined;
+    this.accessiblePressed = undefined;
     this.theme = "";
     this.icon = undefined;
   }
@@ -62,7 +73,7 @@ export class DuetMenuBarButton {
     return (h(Host, { onfocus: () => this.setFocus() }, h("button", { ref: button => (this.nativeButton = button), class: {
         "duet-menu-bar-button": true,
         "duet-theme-turva": this.theme === "turva",
-      } }, this.icon && h("duet-icon", { size: this.iconSize, name: this.icon, margin: "none" }), h("slot", null))));
+      }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && h("duet-icon", { size: this.iconSize, name: this.icon, margin: "none" }), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-button"; }
   static get encapsulation() { return "shadow"; }
@@ -78,6 +89,197 @@ export class DuetMenuBarButton {
   }
   static get properties() {
     return {
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "accessibleControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to add an aria-controls attribute to the button. Use\nthe attribute to point to the unique id of the content that the button manages."
+        },
+        "attribute": "accessible-controls",
+        "reflect": false
+      },
+      "accessiblePopup": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button."
+        },
+        "attribute": "accessible-popup",
+        "reflect": false,
+        "defaultValue": "\"false\""
+      },
+      "accessibleActiveDescendant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a related component\u2019s visually focused element."
+        },
+        "attribute": "accessible-active-descendant",
+        "reflect": false
+      },
+      "accessibleOwns": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component owned by the button."
+        },
+        "attribute": "accessible-owns",
+        "reflect": false
+      },
+      "accessibleDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the button."
+        },
+        "attribute": "accessible-described-by",
+        "reflect": false
+      },
+      "accessibleDetails": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Details of the component"
+        },
+        "attribute": "accessible-details",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleLabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "String of id's that indicate alternative labels elements"
+        },
+        "attribute": "accessible-labelled-by",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria description the button"
+        },
+        "attribute": "accessible-description",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleExpanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
+        },
+        "attribute": "accessible-expanded",
+        "reflect": false
+      },
+      "accessiblePressed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tells screen reader the element is pressed."
+        },
+        "attribute": "accessible-pressed",
+        "reflect": false
+      },
       "theme": {
         "type": "string",
         "mutable": true,

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

@@ -19,6 +19,7 @@ export class DuetMenuBarDropdown {
           return "right";
       }
     };
+    this.accessibleLabel = undefined;
     this.theme = "";
     this.open = false;
     this.icon = undefined;
@@ -45,7 +46,7 @@ export class DuetMenuBarDropdown {
         "duet-theme-turva": this.theme === "turva",
         active: this.open,
         [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-      } }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+      } }, h("button", { "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", { name: this.icon, size: "x-small", margin: "none" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
@@ -66,6 +67,23 @@ export class DuetMenuBarDropdown {
   }
   static get properties() {
     return {
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
       "theme": {
         "type": "string",
         "mutable": true,

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

@@ -19,7 +19,6 @@ export class DuetMenuBarDropdownLink {
     this.theme = "";
     this.href = "#";
     this.icon = undefined;
-    this.caret = false;
   }
   /**
    * Component lifecycle events.
@@ -110,24 +109,6 @@ export class DuetMenuBarDropdownLink {
         "attribute": "icon",
         "reflect": true,
         "defaultValue": "undefined"
-      },
-      "caret": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Caret"
-        },
-        "attribute": "caret",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

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

@@ -29,6 +29,11 @@
   opacity: 0;
   transition: top 0.3s ease-in, opacity 0.3s ease-in;
 }
+@media (min-width: 62em) {
+  :host slot:not([name=toggle])::slotted(*) {
+    transition: none;
+  }
+}
 
 :host([open]) slot:not([name=toggle])::slotted(*) {
   top: 0;
@@ -40,6 +45,34 @@
   align-items: center;
   height: 100%;
 }
+.duet-slideout .desktop-bg {
+  display: none;
+}
+@media (min-width: 62em) {
+  .duet-slideout .desktop-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 400;
+    display: block;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    background: rgba(0, 41, 77, 0.6);
+    opacity: 0;
+    transition: 600ms ease;
+  }
+  .duet-slideout .desktop-bg:not(.hidden) {
+    visibility: visible;
+    opacity: 1;
+    transition: 600ms ease;
+  }
+}
+@media (min-width: 62em) {
+  .duet-slideout.duet-theme-turva .desktop-bg {
+    background: rgba(23, 28, 58, 0.6);
+  }
+}
 .duet-slideout .dialog {
   position: fixed;
   top: 0;
@@ -57,15 +90,21 @@
     right: 0;
     left: auto;
     width: 500px;
-    transition: right 600ms ease;
+    transition: right 300ms ease;
+    transition-delay: 0s;
   }
 }
 .duet-slideout .dialog .top {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
 }
+.duet-slideout .dialog .top button {
+  cursor: pointer;
+}
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
 }
@@ -83,7 +122,7 @@
 @media (min-width: 62em) {
   .duet-slideout .dialog.hidden {
     right: -500px;
-    visibility: visible;
+    transition: 300ms ease;
   }
 }
 .duet-slideout.duet-theme-turva button {