@duetds/components 6.9.1 → 6.9.2

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;

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
       }
     };
   }

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

@@ -24,6 +24,7 @@ export class DuetMenuBarLink {
     this.active = false;
     this.href = "#";
     this.icon = undefined;
+    this.accessibleLabel = undefined;
   }
   /**
    * Component lifecycle events.
@@ -60,7 +61,7 @@ export class DuetMenuBarLink {
         "duet-menu-bar-link": true,
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
-      }, 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))));
+      }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, 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"; }
@@ -152,6 +153,23 @@ export class DuetMenuBarLink {
         "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
       }
     };
   }

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

@@ -94,6 +94,19 @@ export class DuetMultiselect {
     this.getOptionIdentifier = (key) => {
       return `${this.identifier}-option-${key}`;
     };
+    this.getDescribedBy = () => {
+      const describedBy = [];
+      if (this.isCaptionVisible && this.topCaptionId) {
+        describedBy.push(this.topCaptionId);
+      }
+      if (this.accessibleDescribedBy) {
+        describedBy.push(this.accessibleDescribedBy);
+      }
+      if (this.error) {
+        describedBy.push(this.errorId);
+      }
+      return describedBy.length > 0 ? describedBy.join(" ") : null;
+    };
     this.processedItems = [];
     this.checkboxesVisible = false;
     this.activeDescendant = "";
@@ -110,6 +123,7 @@ export class DuetMultiselect {
     this.items = undefined;
     this.disabled = false;
     this.label = "label";
+    this.accessibleDescribedBy = undefined;
     this.tooltip = "";
     this.tooltipDirection = "auto";
   }
@@ -162,7 +176,7 @@ export class DuetMultiselect {
         "duet-theme-turva": this.theme === "turva",
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-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-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-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-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
         "duet-multiselect-checkboxes": true,
         "duet-multiselect-checkboxes-active": this.checkboxesVisible,
       }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems &&
@@ -417,6 +431,23 @@ export class DuetMultiselect {
         "reflect": false,
         "defaultValue": "\"label\""
       },
+      "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 input."
+        },
+        "attribute": "accessible-described-by",
+        "reflect": false
+      },
       "tooltip": {
         "type": "string",
         "mutable": false,

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

@@ -56,6 +56,19 @@ export class DuetSelect {
         component: "duet-select",
       });
     };
+    this.getDescribedBy = () => {
+      const describedBy = [];
+      if (this.isCaptionVisible && this.topCaptionId) {
+        describedBy.push(this.topCaptionId);
+      }
+      if (this.accessibleDescribedBy) {
+        describedBy.push(this.accessibleDescribedBy);
+      }
+      if (this.error) {
+        describedBy.push(this.errorId);
+      }
+      return describedBy.length > 0 ? describedBy.join(" ") : null;
+    };
     this.processedItems = null;
     this.variation = "default";
     this.accessibleActiveDescendant = undefined;
@@ -140,7 +153,7 @@ export class DuetSelect {
         "duet-select-variation-tiny": this.variation === "tiny",
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-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-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-errormessage": this.error ? this.errorId : null, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required, "aria-describedby": this.accessibleDescribedBy }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-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-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
       return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
     }))), h("div", { class: {
         "duet-select": true,

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -30,6 +30,20 @@ export class DuetTabGroup {
         button.focus();
       }
     };
+    this.onTabSelect = (tabIndex) => {
+      if (this.tabChangeConfirm) {
+        if (tabIndex !== this.selected) {
+          const event = {
+            value: tabIndex,
+            component: "duet-tab-group",
+          };
+          this.duetTabChangeRequested.emit(event);
+        }
+      }
+      else {
+        this.openTab(tabIndex);
+      }
+    };
     this.scrollToActive = () => {
       if (this.variation === "checked" || this.variation === "plain-scrolling") {
         setTimeout(() => {
@@ -47,7 +61,7 @@ export class DuetTabGroup {
             "duet-tab-button": true,
             "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
             selected: element.selected,
-          }, onClick: () => this.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
+          }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
       });
       if (this.scrolls) {
         return (h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
@@ -73,6 +87,7 @@ export class DuetTabGroup {
     this.margin = "auto";
     this.padding = "auto";
     this.setTabIndex = false;
+    this.tabChangeConfirm = false;
   }
   /**
    * Component lifecycle events.
@@ -179,7 +194,7 @@ export class DuetTabGroup {
         "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
         "duet-tab-group-scrolls": this.scrolls,
         "duet-tab-group-collapses": this.collapses,
-      }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+      }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
         return { label: tab.label, value: index.toString() };
       }) })), h("div", { role: "tablist", class: {
         "duet-m-0": this.margin === "none" || this.variation === "checked",
@@ -483,6 +498,24 @@ export class DuetTabGroup {
         "attribute": "set-tab-index",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "tabChangeConfirm": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If this property is set to true, tab won't change immediately after clicking it.\nComponent will emit \"duetTabChangeRequested\" event, and it needs to be handled manually in order to change tab."
+        },
+        "attribute": "tab-change-confirm",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -536,6 +569,26 @@ export class DuetTabGroup {
             }
           }
         }
+      }, {
+        "method": "duetTabChangeRequested",
+        "name": "duetTabChangeRequested",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event raised when new tab is clicked and \"tabChangeConfirm\" property is set to true"
+        },
+        "complexType": {
+          "original": "DuetTabGroupEvent",
+          "resolved": "{ component: \"duet-tab-group\"; value: number; }",
+          "references": {
+            "DuetTabGroupEvent": {
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -62,6 +62,19 @@ export class DuetTextarea {
         component: "duet-textarea",
       });
     };
+    this.getDescribedBy = () => {
+      const describedBy = [];
+      if (this.isCaptionVisible && this.topCaptionId) {
+        describedBy.push(this.topCaptionId);
+      }
+      if (this.accessibleDescribedBy) {
+        describedBy.push(this.accessibleDescribedBy);
+      }
+      if (this.error) {
+        describedBy.push(this.errorId);
+      }
+      return describedBy.length > 0 ? describedBy.join(" ") : null;
+    };
     this.margin = "auto";
     this.accessibleActiveDescendant = undefined;
     this.accessibleAutocomplete = undefined;
@@ -136,9 +149,7 @@ export class DuetTextarea {
         "duet-label-hidden": this.labelHidden,
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy
-        ? `${this.errorId} ${this.labelId} ${this.accessibleLabelledBy}`
-        : `${this.errorId} ${this.labelId} `, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-errormessage": this.error ? this.errorId : null, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
   }
   static get is() { return "duet-textarea"; }
   static get encapsulation() { return "scoped"; }

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

@@ -9,6 +9,7 @@ export class DuetToolbarLink {
     this.active = false;
     this.href = "#";
     this.icon = undefined;
+    this.accessibleLabel = undefined;
   }
   /**
    * Component lifecycle events.
@@ -21,7 +22,7 @@ export class DuetToolbarLink {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("a", { class: { "duet-toolbar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null))));
+    return (h(Host, null, h("a", { class: { "duet-toolbar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-toolbar-link"; }
   static get encapsulation() { return "shadow"; }
@@ -113,6 +114,23 @@ export class DuetToolbarLink {
         "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
       }
     };
   }

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

@@ -159,6 +159,12 @@ export class DuetTooltip {
       }
     }, 100);
   }
+  handleWindowResize() {
+    clearTimeout(this.resizeTimer);
+    this.resizeTimer = setTimeout(() => {
+      this.handleHorizontalVisibility();
+    }, 100);
+  }
   handleDocumentClick(e) {
     if (!this.active) {
       return;
@@ -531,6 +537,12 @@ export class DuetTooltip {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "resize",
+        "method": "handleWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
       }, {
         "name": "click",
         "method": "handleDocumentClick",

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

@@ -35,7 +35,7 @@
 }
 
 ::slotted([slot=uploadfooter]) {
-  margin-top: 28px;
+  margin-top: 20px;
 }
 
 .duet-upload {
@@ -120,6 +120,7 @@ duet-editable-table tfoot {
 .items-header {
   display: none;
   flex-direction: row;
+  margin-bottom: 0;
 }
 @media (min-width: 36em) {
   .items-header {
@@ -142,7 +143,7 @@ duet-editable-table tfoot {
 .upload-item-row {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 16px;
   align-content: center;
   align-items: center;
   padding: 16px 0 16px 0;
@@ -151,6 +152,7 @@ duet-editable-table tfoot {
 @media (min-width: 36em) {
   .upload-item-row {
     flex-direction: row;
+    gap: 10px;
   }
 }
 .upload-item-row .item-categories {
@@ -187,13 +189,14 @@ duet-editable-table tfoot {
 }
 .upload-item-row .item-actions {
   width: 100%;
-  padding-top: 6px;
+  margin-left: -8px;
   text-align: left;
 }
 @media (min-width: 36em) {
   .upload-item-row .item-actions {
     width: 15%;
     padding-top: 0;
+    margin-left: auto;
     text-align: right;
   }
 }

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

@@ -696,7 +696,7 @@ export class DuetUpload {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, h("duet-spacer", { size: "large" }), h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached || this.bytesMaxReached) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, h("duet-spacer", { size: "large" }), h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached || this.bytesMaxReached) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
         this.nativeInput = input;
       }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
         "duet-upload": true,

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

@@ -4,5 +4,5 @@
 import { h } from "@stencil/core";
 import { getLocaleString } from "../../utils/language-utils";
 export const UploadItemHeader = ({ label, categoryLabel }) => {
-  return (h("div", { class: "items-header" }, categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, getLocaleString(categoryLabel))), h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, getLocaleString(label))));
+  return (h("div", { class: "items-header" }, categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none" }, getLocaleString(categoryLabel))), h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none" }, getLocaleString(label))));
 };

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-c57eccd3.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-29b0c53d.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-c272c5d5.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-cf8e064c.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-94df5d2c.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-6b75d471.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-11fbe397.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-d0a476fa.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-51307fda.js';
+import { d as defineCustomElement$2 } from './p-fb9ea1e2.js';
 
 const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;color:rgb(0, 41, 77);text-decoration:none}.duet-breadcrumb:hover{color:rgb(0, 77, 128)}.duet-breadcrumb.duet-theme-turva{color:rgb(23, 28, 58)}.duet-breadcrumb.duet-theme-turva:hover{color:rgb(148, 9, 37)}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{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-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-breadcrumb.duet-breadcrumb-without-href:hover{color:rgb(0, 41, 77)}.duet-breadcrumb.duet-breadcrumb-without-href.duet-theme-turva:hover{color:rgb(23, 28, 58)}.duet-breadcrumb.duet-breadcrumb-without-href:active{opacity:1}";
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-11fbe397.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-d0a476fa.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLocaleString } from './p-076452be.js';
-import { d as defineCustomElement$2 } from './p-51307fda.js';
+import { d as defineCustomElement$2 } from './p-fb9ea1e2.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};