@duetds/components 6.9.0 → 6.9.2

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

@@ -248,23 +248,26 @@
 .duet-card-image-mask + .duet-card-heading {
   border-radius: 0;
 }
-.duet-card-heading[role=button] {
-  -webkit-user-select: none;
-  user-select: none;
+.duet-card-heading.duet-card-heading--collapsible {
+  cursor: pointer;
+}
+.duet-card-heading.duet-card-heading--collapsible button {
+  width: 100%;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-align: left;
   cursor: pointer;
-  border-radius: 4px;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  appearance: none;
 }
-.duet-card-heading[role=button]:focus {
+.duet-card-heading.duet-card-heading--collapsible button:focus {
   outline: 0;
 }
-:host(.user-is-tabbing) .duet-card-heading[role=button]:focus {
+:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus {
   border-radius: 4px;
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-card-heading[role=button]:focus {
+:host(.user-is-tabbing) .duet-theme-turva .duet-card-heading.duet-card-heading--collapsible button:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 .duet-card-collapsed .duet-card-heading {

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

@@ -63,20 +63,16 @@ export class DuetCard {
   renderHeading() {
     const safeHeadingLevel = sanitizeString(this.headingLevel);
     const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";
-    const headingProps = this.collapsible
-      ? {
-        role: "button",
-        tabindex: "0",
-        "aria-controls": this.cardId,
-        "aria-expanded": this.open ? "true" : "false",
-        onClick: this.togglePanel,
-        onKeyDown: this.handleKeyDown,
-      }
-      : {};
     const headingStyles = {
       backgroundColor: getColorByName(this.headingBackground),
     };
-    return (h(HeadingTag, Object.assign({ style: headingStyles, class: "duet-card-heading" }, headingProps), h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
+    const headingContent = (h(Fragment, null, h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
+    if (this.collapsible) {
+      return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading duet-card-heading--collapsible", onClick: this.togglePanel, onKeyDown: this.handleKeyDown }, h("button", { "aria-controls": this.cardId, "aria-expanded": this.open ? "true" : "false" }, headingContent)));
+    }
+    else {
+      return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading" }, headingContent));
+    }
   }
   /**
    * Sets focus on the specified `duet-card`. Use this method instead of the global

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

@@ -5,7 +5,7 @@ import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetComboBoxSelect } from "./duet-combobox-select";
 export class DuetCombobox {
@@ -26,6 +26,7 @@ export class DuetCombobox {
     this.listOpen = false;
     this.selectedItems = new Set();
     this.activeItem = undefined;
+    this.language = getLanguage();
     this.accessibleLabelDefaults = {
       en: {
         heading: "Select:",
@@ -56,6 +57,12 @@ export class DuetCombobox {
   activeItemHandler(state) {
     this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue &&
+      this.accessibleLabels === getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), oldValue)) {
+      this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), newValue);
+    }
+  }
   handleDocumentClick(e) {
     //we want to remove all user text if they have NOT selected from the dropdown
     const path = e.composedPath();
@@ -94,6 +101,7 @@ export class DuetCombobox {
       }
     });
     this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    connectLanguageChangeObserver(this);
     //add correct aria attributes to the input element
     this.input.accessibleAutocomplete = "list";
     this.input.accessibleControls = "duet-combobox-list-element";
@@ -109,6 +117,7 @@ export class DuetCombobox {
       e.stopPropagation();
     });
     this.resizeObserver.disconnect();
+    disconnectLanguageChangeObserver(this);
   }
   componentDidLoad() {
     // observe resize events to dynamically adjust size of dropdown area
@@ -380,7 +389,7 @@ export class DuetCombobox {
       },
       "accessibleLabels": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "Record<string, string>",
           "resolved": "{ [x: string]: string; }",
@@ -567,7 +576,8 @@ export class DuetCombobox {
       "selectionMsg": {},
       "listOpen": {},
       "selectedItems": {},
-      "activeItem": {}
+      "activeItem": {},
+      "language": {}
     };
   }
   static get events() {
@@ -631,6 +641,9 @@ export class DuetCombobox {
     return [{
         "propName": "activeItem",
         "methodName": "activeItemHandler"
+      }, {
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
       }];
   }
   static get listeners() {

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { fieldSorter } from "../../utils/js-utils";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { TableData } from "./duet-editable-table-tabledata";
 export class DuetEditableTable {
   constructor() {
@@ -41,6 +41,7 @@ export class DuetEditableTable {
         this.toggleColumn(column, e);
       }
     };
+    this.language = getLanguage();
     this.margin = "auto";
     this.variation = "striped";
     this.sticky = false;
@@ -63,6 +64,12 @@ export class DuetEditableTable {
     this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
     this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   createLabel(column) {
     const { sort_order, direction, index, label } = column;
     const i18nLabel = getLocaleString(label);
@@ -81,7 +88,7 @@ export class DuetEditableTable {
       }
       return "action-subtract-small";
     };
-    return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": getLocaleString(this.sortableDefaultLabel), variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
+    return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": this.sortableDefaultLabel[this.language], variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
   }
   getSortedColumns() {
     //create a new array from sort instead of mutating original
@@ -110,7 +117,7 @@ export class DuetEditableTable {
         const label = this.createLabel(column);
         return label !== "" ? h("th", { scope: "col" }, label) : h("td", null);
       }
-    }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, getLocaleString(this.actionColumnLabel))))));
+    }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, this.actionColumnLabel[this.language])))));
   }
   renderActions(rowItem, index) {
     // escape early
@@ -448,6 +455,11 @@ export class DuetEditableTable {
       }
     };
   }
+  static get states() {
+    return {
+      "language": {}
+    };
+  }
   static get events() {
     return [{
         "method": "duetTableToggle",

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

@@ -35,7 +35,11 @@ export class DuetFieldset {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { "aria-labelledby": `${this.errorId} ${this.labelId}`, "aria-errormessage": this.error ? this.errorId : null, class: {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+      // NVDA and VoiceOver do not yet support aria-errormessage
+      // once they do, we can remove errors from the aria-describedby
+      // aria-errormessage={this.error ? this.errorId : null}
+      class: {
         "duet-fieldset": true,
         "duet-theme-turva": this.theme === "turva",
       } }, h("legend", { id: this.labelId }, h("span", null, this.label), this.caption && h("span", null, this.caption)), h("div", { class: {

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

@@ -19,6 +19,9 @@
 :host(.duet-grid-breakpoint-x-small) {
   flex-direction: row !important;
 }
+:host(.duet-grid-breakpoint-x-small).duet-grid-row-reverse {
+  flex-direction: row-reverse !important;
+}
 @media (max-width: 22.5em) {
   :host(.duet-grid-breakpoint-x-small) {
     flex-direction: column !important;
@@ -29,24 +32,36 @@
   :host(.duet-grid-breakpoint-small) {
     flex-direction: row !important;
   }
+  :host(.duet-grid-breakpoint-small).duet-grid-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 }
 
 @media (min-width: 48em) {
   :host(.duet-grid-breakpoint-medium) {
     flex-direction: row !important;
   }
+  :host(.duet-grid-breakpoint-medium).duet-grid-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 }
 
 @media (min-width: 62em) {
   :host(.duet-grid-breakpoint-large) {
     flex-direction: row !important;
   }
+  :host(.duet-grid-breakpoint-large).duet-grid-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 }
 
 @media (min-width: 64.0625em) {
   :host(.duet-grid-breakpoint-x-large) {
     flex-direction: row !important;
   }
+  :host(.duet-grid-breakpoint-x-large).duet-grid-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 }
 
 :host(.duet-grid-wrap) {
@@ -56,6 +71,9 @@
 :host(.duet-no-stacking) {
   flex-direction: row !important;
 }
+:host(.duet-no-stacking).duet-grid-row-reverse {
+  flex-direction: row-reverse !important;
+}
 
 :host(.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
   flex-direction: column !important;

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

@@ -18,6 +18,7 @@ export class DuetGrid {
     this.responsive = false;
     this.breakpoint = "small";
     this.direction = "horizontal";
+    this.rowReverse = false;
     this.alignment = "top";
     this.distribution = "default";
     this.mobile = "";
@@ -140,6 +141,7 @@ export class DuetGrid {
         "duet-grid-breakpoint-medium": this.breakpoint === "medium",
         "duet-grid-breakpoint-large": this.breakpoint === "large",
         "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
+        "duet-grid-row-reverse": this.rowReverse,
       } }));
   }
   static get is() { return "duet-grid"; }
@@ -220,6 +222,24 @@ export class DuetGrid {
         "reflect": false,
         "defaultValue": "\"horizontal\""
       },
+      "rowReverse": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reverse the order of the grid items when horizontal. Usefull when we want the primary item\nto be on bottom right on desktop, but on top on mobile and the first for screen readers."
+        },
+        "attribute": "row-reverse",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "alignment": {
         "type": "string",
         "mutable": false,

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

@@ -13,7 +13,7 @@ import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodySc
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
@@ -251,6 +251,17 @@ export class DuetHeader {
     this.contactItems = undefined;
     this.languageItems = undefined;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
+      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
+    }
+    if (newValue !== oldValue && this.accessibleI18nLabels === this.accessibleI18nLabelsDefaults[oldValue]) {
+      this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefaults, newValue);
+    }
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -267,6 +278,7 @@ export class DuetHeader {
         this.boundMqlFunctions[i] = bound;
       }
     }
+    connectLanguageChangeObserver(this);
   }
   disconnectedCallback() {
     if (this.navigationEl) {
@@ -279,6 +291,7 @@ export class DuetHeader {
       }
     }
     this.boundMqlFunctions = [];
+    disconnectLanguageChangeObserver(this);
   }
   /**
    * Component event handling.
@@ -614,7 +627,7 @@ export class DuetHeader {
       },
       "accessibleI18nLabels": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "I18nText",
           "resolved": "I18nText",
@@ -664,7 +677,7 @@ export class DuetHeader {
       },
       "accessibleLabelExternal": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -708,7 +721,7 @@ export class DuetHeader {
       },
       "accessibleLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -1271,6 +1284,9 @@ export class DuetHeader {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "user",
         "methodName": "refresh"
       }, {

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

@@ -5,6 +5,9 @@ import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { sanitizeString } from "../../utils/string-utils";
 import { getColorByName } from "../../utils/token-utils";
+/**
+ * @part duet-heading - piercing selector for styling the heading element that should be used only in special circumstances
+ */
 export class DuetHeading {
   constructor() {
     this.level = "h2";
@@ -39,7 +42,7 @@ export class DuetHeading {
         "duet-m-0": this.margin === "none",
         [this.visualLevel ? this.visualLevel : this.level]: true,
         "duet-theme-turva": this.theme === "turva",
-      }, style: { color } }, h("slot", null)));
+      }, style: { color }, part: "duet-heading" }, h("slot", null)));
   }
   static get is() { return "duet-heading"; }
   static get encapsulation() { return "shadow"; }

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

@@ -227,7 +227,7 @@
 }
 @media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
-    top: 155px;
+    top: 160px;
     width: 450px;
     height: 450px;
   }
@@ -266,6 +266,19 @@
 .duet-hero.duet-hero-campaign .duet-hero-text, .duet-hero.duet-hero-section .duet-hero-text {
   width: 100%;
 }
+.duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-heading::part(duet-heading), .duet-hero.duet-hero-section .duet-hero-text .duet-hero-heading::part(duet-heading) {
+  font-size: 36px;
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-heading::part(duet-heading), .duet-hero.duet-hero-section .duet-hero-text .duet-hero-heading::part(duet-heading) {
+    font-size: 48px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-heading::part(duet-heading), .duet-hero.duet-hero-section .duet-hero-text .duet-hero-heading::part(duet-heading) {
+    font-size: 64px;
+  }
+}
 .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
 .duet-hero.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section .duet-hero-text .duet-hero-subheading,
 .duet-hero.duet-hero-section .duet-hero-text duet-paragraph {
@@ -351,7 +364,7 @@
   background: none;
 }
 .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-  top: 115px;
+  top: 125px;
   left: -10px;
   width: 350px;
   height: 350px;
@@ -364,7 +377,7 @@
 }
 @media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-    top: 140px;
+    top: 143px;
     left: -30px;
     width: 450px;
     height: 450px;
@@ -468,6 +481,7 @@
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product {
+    min-height: 375px;
     padding-top: 0;
   }
   .duet-hero.duet-hero-product.duet-hero-narrow {
@@ -485,6 +499,9 @@
   .duet-hero.duet-hero-product .background-area {
     top: -112px;
   }
+  .duet-hero.duet-hero-product .background-area.narrow {
+    top: 0;
+  }
 }
 .duet-hero.duet-hero-product .background-container {
   position: absolute;
@@ -497,6 +514,9 @@
   .duet-hero.duet-hero-product .background-container {
     top: -48px;
   }
+  .duet-hero.duet-hero-product .background-container.narrow {
+    top: -160px;
+  }
 }
 .duet-hero.duet-hero-product .background {
   position: absolute;

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

@@ -5,7 +5,7 @@ import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { h } 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";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -60,6 +60,11 @@ export class DuetHero {
     this.actions = undefined;
     this.layout = "narrow";
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -69,6 +74,12 @@ export class DuetHero {
     this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
     this.refresh();
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Local methods.
    */
@@ -155,7 +166,7 @@ export class DuetHero {
         "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
         "duet-hero-left-align": this.leftAlign && !campaignOrSection,
         "duet-hero-narrow": this.layout === "narrow",
-      }, 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-area" }, h("div", { class: "background-container" }, 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-area" }, 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-area": true, [this.layout]: true } }, h("div", { class: { "background-container": true, [this.layout]: true } }, 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-area" }, 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,
@@ -492,7 +503,7 @@ export class DuetHero {
       },
       "accessibleLabelExternal": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -768,6 +779,9 @@ export class DuetHero {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "back",
         "methodName": "refresh"
       }, {

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

@@ -103,20 +103,17 @@ export class DuetInput {
      * Private functions
      */
     this.getDescribedBy = () => {
-      let describedBy = "";
+      const describedBy = [];
       if (this.isCaptionVisible && this.topCaptionId) {
-        describedBy = this.topCaptionId;
-        if (this.accessibleDescribedBy) {
-          describedBy += " " + this.accessibleDescribedBy;
-        }
+        describedBy.push(this.topCaptionId);
       }
-      else if (this.accessibleDescribedBy.length > 0) {
-        describedBy = this.accessibleDescribedBy;
+      if (this.accessibleDescribedBy) {
+        describedBy.push(this.accessibleDescribedBy);
       }
-      else {
-        describedBy = undefined;
+      if (this.error) {
+        describedBy.push(this.errorId);
       }
-      return describedBy;
+      return describedBy.length > 0 ? describedBy.join(" ") : null;
     };
     this.handleClearClick = event => {
       const clearing = this.clearInput();
@@ -317,9 +314,7 @@ export class DuetInput {
         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.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: {
+      }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "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,

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

@@ -66,6 +66,9 @@
   height: 20px;
   margin-left: -15px;
 }
+.duet-theme-turva .duet-link-external {
+  margin-left: -12px;
+}
 
 .duet-tab-to-link {
   padding: 15px 28px 16px !important;

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

@@ -20,6 +20,7 @@ export class DuetMenuBarDropdownLink {
     this.theme = "";
     this.href = "#";
     this.icon = undefined;
+    this.accessibleLabel = undefined;
   }
   /**
    * Component lifecycle events.
@@ -43,7 +44,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", 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))));
+      }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, 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"; }
@@ -117,6 +118,23 @@ export class DuetMenuBarDropdownLink {
         "attribute": "icon",
         "reflect": true,
         "defaultValue": "undefined"
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
       }
     };
   }