@duetds/components 10.6.0 → 10.8.0

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

@@ -77,6 +77,11 @@ export class DuetTextarea {
          * technologies.
          */
         this.disabled = false;
+        /**
+         * Makes the textarea component not mutable, meaning the user cannot edit the control.
+         * The user can otherwise interact, e.g. by selecting the content and copying it.
+         */
+        this.readonly = false;
         /**
          * Set whether the textarea is required or not. Please note that this is required for
          * accessible inputs when the user is required to fill them. When using this property
@@ -98,7 +103,8 @@ export class DuetTextarea {
          */
         this.echoPlaceholder = false;
         /**
-         * Display the textarea in error state along with an error message.
+         * Display the textarea in error state along with an error message. If the textarea is disabled
+         * or readonly, the error is ignored.
          */
         this.error = "";
         /**
@@ -234,23 +240,26 @@ export class DuetTextarea {
     async setFocus(options) {
         this.nativeInput.focus(options);
     }
+    get writable() {
+        return !this.disabled && !this.readonly;
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: 'a84e87889b86103cfb25a6fb62d5ae9fc921dde3', class: {
+        return (h(Host, { key: 'f667e15959599e11fba7779a062513b430c237f4', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '1cac0725d91c47a8539a3a915e033ff98dbcefeb', class: {
+            } }, h("div", { key: '3017c39ed8485d0c4cd5cbff373e5795b315e239', class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
-                "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: '902dadd1b95a410ed378ce38e71644138e3aae28', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'db32f6f507a45acaeb0c1a5128544855ae8e0e31', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '40464ec1d95d3880de8197f5780865cdff77233d', name: "tooltip" }), this.caption && (h("duet-caption", { key: '818b2b3294cca406e31397dfb2a77110891bd4ee', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '515635119956e32aba3bf1949f183bd37dcbbf63', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '040fe7c9caaa720aa2b2ae9124252da85d083ceb', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '39f181d89675a7c0cdd6a0492108c61aa8a66779', 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, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '4cefb97e18df23468e25743c4f62e4df7e5d9257', alignment: "stretch" }, h("duet-grid-item", { key: 'bb2d8ca91b5478ceb814090fe1c24e48704f5747', margin: "none", fill: true }, h("div", { key: '208c4ddda91e2b97459815079c7b9a552366d4ab', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '9957ee1bbb21233d09e116992fa88f14185f043a' }, this.error))), h("duet-grid-item", { key: '99713afc0205b671f95297e3991ed28a55a73b73', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '855bec2958e7aa564ec9ca5958881ad1d597fd2b', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: 'd76477f0c64de79265740ae7a6bb251bdba9dd0f', id: this.characterCountId, class: "visually-hidden-counter", "aria-live": "polite" }, this.visuallyHiddenCounterText)))));
+                "has-error": !!this.error && this.writable,
+            } }, h(DuetInternalLabel, { key: 'b62e9c27cf13789036b04f320bda685083796517', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '24dcec9860bfc8bbfb0547e924f8d4319cd18064', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '5a197f095df7dd625df5b6f9b0b40a2f8d61bb52', name: "tooltip" }), this.caption && (h("duet-caption", { key: '08a5a97579b9614b1e1e059f0975885c8ff4030f', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '78ece66c1cfdbe778fe3e3293ddf5343842dcc21', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '326ce34b3e142f2a7676067fc13452d02cd63d05', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '994ac4a61ba288bd72d73a504f8a7721fa1c0389', 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, readonly: this.readonly, "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, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '0b61766a90b3b6e76cab85dfd55b81cc487e77c9', alignment: "stretch" }, h("duet-grid-item", { key: '9bc9ee00a5268f80e0b9c01cb99099f98ea59fde', margin: "none", fill: true }, h("div", { key: '18eb1c48ea7cf5a44ab21477b6a68bc7b7baccc5', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && this.writable && h("span", { key: 'a76db4119e297a2451e2c6ffa6894cf044a1aeaa' }, this.error))), h("duet-grid-item", { key: '020dc157342b1572a54c82726d88d14ef17c6dcb', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '495d71bfc1a80ce1709014843a81cb2e96fb6021', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: 'b682416e87e7ad792b67cc3b6d754495f94b351f', id: this.characterCountId, class: "visually-hidden-counter", "aria-live": "polite" }, this.visuallyHiddenCounterText)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -533,6 +542,26 @@ export class DuetTextarea {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the textarea component not mutable, meaning the user cannot edit the control.\nThe user can otherwise interact, e.g. by selecting the content and copying it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "identifier": {
                 "type": "string",
                 "attribute": "identifier",
@@ -803,7 +832,7 @@ export class DuetTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display the textarea in error state along with an error message."
+                    "text": "Display the textarea in error state along with an error message. If the textarea is disabled\nor readonly, the error is ignored."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -118,11 +118,11 @@ export class DuetToggle {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: 'ba421a50fdc02e229fa28f85ff056b7871a49622', onClick: this.disabled || this.loading ? undefined : this.onClick, class: {
+        return (h(Host, { key: 'c1f8b026ca2f0eaf39a54127c1f69d22694a46d2', onClick: this.disabled || this.loading ? undefined : this.onClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-toggle-is-disabled": this.disabled,
                 "duet-toggle-is-loading": this.loading,
-            } }, h("div", { key: '81bcd7c487268f6f79e227a5964049c31c50537e', class: {
+            } }, h("div", { key: '13c89c2abc235e07e99e671d73e4561eb0f83cc8', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
@@ -130,7 +130,7 @@ export class DuetToggle {
                 "duet-label-hidden": this.labelHidden,
                 "duet-toggle-is-disabled": this.disabled,
                 "duet-toggle-is-loading": this.loading,
-            } }, h(DuetInternalLabel, { key: '9a9c911786434d7324b8e88a8d908102a433b4f6', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: 'de416640cd8c34241f9f8f014c71f0ec664a16a7', class: "duet-switch" }, h("input", { key: 'd420b3d44b53e0daf276c9a7cabde816bff13fa2', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled || this.loading, ref: input => (this.nativeInput = input) }), h("div", { key: '5def29eef95fba6e68134ce1c9061404bd390760', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: '1bf177270fc0d8e66aae450110abe9ca2340c156', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: '101bf2c1752bbd1a263128aa1501b63938fee3d3', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: 'd1e8b6bf58b301f82fee88b83a5591e146a16d86', "aria-live": "polite" }, this.accessibleLabelComplete || DuetStringsCompleteDefaults[getLanguage()]))));
+            } }, h(DuetInternalLabel, { key: 'ee03e1def14f4be0d469081e28e6dd34f622ff29', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: '46af0389473f5f8d9f509472b24b92eef985b98e', class: "duet-switch" }, h("input", { key: '864dbbeaffc9cea78be34939de9c6d349c88cae2', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled || this.loading, ref: input => (this.nativeInput = input) }), h("div", { key: '0493bd3ec7da36a97706b3950c28d98b723d1979', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: 'd484ef05401a121a7ed665c35cc466ad06ed933b', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: '489d5f94a8f46f6c1acefece45eda231d9c786c9', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: '7c3d367d72ff5cecae77d9ca0e8a9d5ed43e0a39', "aria-live": "polite" }, this.accessibleLabelComplete || DuetStringsCompleteDefaults[getLanguage()]))));
     }
     static get is() { return "duet-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,11 +36,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '810537e117ab39b71cb7722178846736f3cb0b85' }, h("nav", { key: '12bad772d5ab1ff3e4adfca687da6c4d46ce93f0', class: {
+        return (h(Host, { key: 'a37f1935a900c25d98ec68adf41051ba262b8382' }, h("nav", { key: '2902f5f92017c5d24c9d402f1e15a987e015ee39', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c4dc60b980cfaa54fed8a7578a766e9f7fe01825', class: "container" }, h("div", { key: 'cc4af5be82d76864f8160d04419533a13223fa28', class: "list", role: "list" }, h("slot", { key: 'e23afafe23ac2a9d8025e2239421e4a3c033d667', name: "left" })), h("div", { key: '28bc42be2ee3cbfda1a9645ad8b66e8dec71977b', class: "list", role: "list" }, h("slot", { key: '2f304cb81562a3bd030d5d2398a0516a6491d4e5', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '83f64d72ba0fb5f452c002eaf87c5fe549665730', class: "container" }, h("div", { key: '81ca721a0ef1c7f5251611645bb4bd1bad34c154', class: "list", role: "list" }, h("slot", { key: '67dc75314e0816f603cd8a377641f353d809f35d', name: "left" })), h("div", { key: 'd4d812cb4a537406f4bd1763df1ecb1dbcc4c36d', class: "list", role: "list" }, h("slot", { key: 'fd698d64dcd063a8aac4d85a89100a35108ae52d', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,18 +64,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '537cb902a5fa3e679997e4e794d3335d0400caf6', role: "listitem" }, h("div", { key: '8ff38e056a74dcd7a30e1ab09bfa7b757e0e224f', class: {
+        return (h(Host, { key: 'aafd01e336e6bc1037a016fbffba1ae619434b15', role: "listitem" }, h("div", { key: '8620d663e3c022d08b0daa55dda118d493244188', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: 'ed4415937f60d79cdff2794e8d0c9e32e2144ada', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: '1bcde327fae00ec8f8dcdbc34bd2af817394901a', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '9b594c5aa508947d9cfe551cb9c9add1bcc95a7f', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '3f23e7a0c570956fbcaff50417cc79869b04c122', class: "label" }, h("slot", { key: '51bdc6f723e217d090f4b611eaac211611e952e6', name: "label" }), h("duet-icon", { key: 'e3ffbfb325327902cc56f9684f879164f4b3a659', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'dfcc391bafb75c326a62c89ac9d4221508e00efd', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '1b7b369f990d99d15c37ce70162d3148bca43324', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'bc284f69d58f2e4c4dc426aafe9e6f0683752d32', class: "label" }, h("slot", { key: '1a2892fad84bce88372d8217504315d0d268d3ed', name: "label" }), h("duet-icon", { key: 'd3ba7796bcf62e9a1bafc0d69fbe77f7b5efc031', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'e81d20d35970fd47f5e0999a48746863a282a980', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '946f25dc7587b757fbdb11125b9aade9501c6d91' })))));
+            } }, h("slot", { key: '4e1918ec2fe0c4c33248f10ffca23c9fa12a175a' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,11 +45,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5503edc925ef9f59d266699d49f280d803d96b1a' }, h("a", { key: '78cfd5795087aa0668130fcd1aef9af8f6afe74d', class: {
+        return (h(Host, { key: '8afa16142be5af1ab49de317f14695be29cb76a7' }, h("a", { key: '17139e958d8b5bd8b2c9a8b272e8faaf844b3b6b', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '94cbf93524f24784189c22358378e2c0c21d6cc6', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '61d5272e3b2670262dabd167c898f160b9c3c751', class: "label" }, h("slot", { key: 'ce66bfda77a5f5e8292b1b05a3aac6e55f37a43b' })), this.active && (h("duet-icon", { key: 'b6ae3a0972462f8034fceda49f652477849c555d', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '0953a2ad108b8f7c7705bff8b946cc065ae64369', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '4187f1ee1ec2f028643715c47719354d45842ffe', class: "label" }, h("slot", { key: '35b9dc036dba71cda8d9f25077fa638fd2e15e86' })), this.active && (h("duet-icon", { key: '00cc11661aa635747fe4d1029c0fbac4f96c8dea', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,17 +86,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '862f45e9efe5b3b54645c3a9627456ab5f723263', role: "listitem" }, this.badge && h("duet-indicator", { key: '29d7bdff76bcf999e4ecff6e3eedd10e006bc968', variation: "change" }), h(TagName, { key: 'b3c0820e95170ce048b75d7e02a2f2e6b7264301', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '73b6913f425eb535964ae3ae588815d7d69548f5', role: "listitem" }, this.badge && h("duet-indicator", { key: 'fb04ed3b79c12c89dce6c4cc42e53ffc6a25b9a7', variation: "change" }), h(TagName, { key: '34f42a96b15efdd18605a81134d12790585b1b5d', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: '52d2726d3619462ac9fa1ed0b3444675a3965d6d', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'f4cf50d1e5dddaaf3cebd50a4271ebb8060d2aaa', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '545d508631827013ae6062243f7cd07e37361f1f', class: "duet-toolbar-badge" }))), h("slot", { key: 'ccf3f266976067a8dcfaeb78310ea0e9e4b740cc' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'f589e763aa5474a3a0dfcfbada1672d3fbb0862a', class: "duet-toolbar-icon" }, h("duet-icon", { key: '288b80450871df0f784182e1f0802cfbad4daeed', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: '9289fe0fd7d3cba9769923352564e54ccd6bdb15', class: "duet-toolbar-icon" }, h("duet-icon", { key: '7a68a52ec75a0cb94658292ec2888a41cfe6af55', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '5dd3b5ede328e883a64141fde15a1dd6eca5fe4c', class: "duet-toolbar-badge" }))), h("slot", { key: '3a7913d7f34b57b85720813018e2b122ef38b9d7' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '62a9d4853e8b77c6197624c58edd4aed4a60748f', class: "duet-toolbar-icon" }, h("duet-icon", { key: '48819424506ca2fbde8b1510c4f68bdc323b7a99', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: '7853154ae4ebb785a34b1de3ce36d7b1a23f304b', class: "duet-toolbar-badge" }))))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: 'fa960663370b85e48492736a9cd6cba8c62b5732', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,12 +38,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '07041c0aec0959d4d85042618c07a5c6c5e7a80a', role: "listitem" }, h("a", { key: '5c422ec1435313ecad17c03eafaecdb42444c847', class: {
+        return (h(Host, { key: '05a4f64c0670e5cd2739b4c48604b3b66f4f66f6', role: "listitem" }, h("a", { key: '3c7e34e171e59a1d33a5f38f130b76305da9d838', class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4a127553bf1f1e27ebb5787f7b736cc7a80cf9fe', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '97573b5159185b7aae35dc962560e707de1a28b2' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '091c6f6380417c2580fd39ea6a75a1ca84c3f62d', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '734f21e042064ae86b54ddeb767a58909a5af1f7' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tooltip/duet-tooltip-button.css

@@ -108,6 +108,12 @@
 .duet-theme-turva.duet-tooltip-button.duet-tooltip-button-in-badge {
   color: inherit;
 }
+.duet-theme-turva.duet-tooltip-button.duet-tooltip-button-negative {
+  color: rgb(255, 255, 255);
+}
+.duet-theme-turva.duet-tooltip-button.duet-tooltip-button-negative:hover {
+  color: rgb(255, 255, 255);
+}
 .duet-theme-turva .duet-tooltip-label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }

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

@@ -37,14 +37,14 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        const visuallyHidden = h("duet-visually-hidden", { key: '0feec5f01a66092aeb84f7d046b784dc3751530b' }, this.accessibleLabel);
-        return (h(Host, { key: 'db94478bf79285a1393bb6c9f670a9e866c30bec' }, h("button", { key: 'c3799f4bd23520384035f33845c6ddf0c1675b2b', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        const visuallyHidden = h("duet-visually-hidden", { key: '635d9f636534191031bbefe82d1efe3bb0ca1be3' }, this.accessibleLabel);
+        return (h(Host, { key: 'f4ac65122f13177047aeb77c0861d58738546509' }, h("button", { key: 'e6b356569faeb652df1aa80feb023ab4cff1e621', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-button-negative": this.negative,
                 "duet-tooltip-button-in-badge": this.inBadge,
-            } }, h("svg", { key: 'cd8ae6afbe8856114e6acfd5f238ccdef96bf5ec', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ee341df24b231902d95a09634d155f1f3f90bd0c', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: '5b0878e6e0b20c1bb40f14578cf8e75597b27bb1', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '85e8d046ab8d8de4eebb29c345d0a706484c3a0d', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label, visuallyHidden)) : (visuallyHidden))));
+            } }, h("svg", { key: '78594fe2105d48e470ea27e1c776e3be260d05a3', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '889a195a1409d4bc11fee456c8bedd3cc9c9f104', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: '6b321e4d4880ac85bf1c4a4cdbb9578cd8ed3637', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '1a13066394a6acb5b62cf8fae650a79104b91a21', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label, visuallyHidden)) : (visuallyHidden))));
     }
     static get is() { return "duet-tooltip-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,14 +53,14 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: '9deff2cfd70a65940c7ab5ccb4e0ef20f8242205' }, h("div", { key: 'f602ad4390d1a2c739dd40ae286cb4f681b7c0d3', class: {
+        return (h(Host, { key: '778391de6847a5b7b639a09443e9dec0621a8796' }, h("div", { key: '9b0d4cb9978cf2d304de748b9a87828379ea12b1', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '636c36bd6510ea79aafc2b00cafe8554f0b13293', moveFocusTo: this.buttonEl }), h("div", { key: '0b7bc86af9aee1f48ace5549ff30a0b613c9441e', ref: element => (this.contentEl = element), class: {
+            } }, h(FocusGuard, { key: '71184f23e8382d5825458029532f2a405f218110', moveFocusTo: this.buttonEl }), h("div", { key: 'a401f946fc3c88268557b0ce35eae3d839179ee6', ref: element => (this.contentEl = element), class: {
                 "duet-tooltip-content-area": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, tabindex: -1, id: this.tooltipId }, h("slot", { key: 'f7d35e94bca2a7d45eb37b1dfa98bb95003e601d' })), h("div", { key: 'd34a92246923a554c6fa9997b6f5cc81033cfb93', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'd77b4f9b62211f1bc657143a42be59009b30b74f', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '0c24b8f406b74f4ffc3334b53319ca43404236c3', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '313ebabda3b0c3720434e6b620c23d65b5d9cecd', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'f494b2c6cef9b38a872153474cc5880dbc07e9e4' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'a12f546822ce65cf3c23fde365389dcdf01952e9', moveFocusTo: this.contentEl }))));
+            }, tabindex: -1, id: this.tooltipId }, h("slot", { key: '26863da248c5b4a88ccc62322feb440cd3b0c1b0' })), h("div", { key: 'cd0499889d2a77c78accd98e43c779d094763621', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'cec22b52e115faf80fc4fe5e718194adc703b186', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'e94d9ea886d69e78317113bd1cbdee3b4c384b5e', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'cb959efca9b977153343d3f1fc94eed0b08c71d6', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '7ddb28ae6bac6673c73b92378d2298746f2f2631' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '707fc931ad2d467dc590b8752b939d8a854af30c', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -129,14 +129,14 @@ export class DuetTray {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'b61dd691c3f9aa656b3561879fa32316b75d32a8', class: {
+        return (h("div", { key: 'fd50cc2b8b3ef5655eea859837b7d777e643ed8b', class: {
                 "duet-tray": true,
                 "duet-tray-is-active": this.active,
                 "duet-tray-is-hidden": this.hiddenState,
                 "duet-tray-is-responsive": this.responsive,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tray-is-expandable": this.hasAdditionalContent,
-            } }, h("div", { key: '03161a80eb3c11cd5825830827633be3b0ff13e0', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'b8f6995244f5d395cd8ee53923466dac43158c56' })), this.hasAdditionalContent && (h(Fragment, { key: 'e6698c1b607ce8531a07b0aecb5c21e43eb1675e' }, h("button", { key: 'c22d5dd724b08d03dee467e88d5a567a4ab38813', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '40ecef7b962408021a3366de1622f67274c043bd', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'fae082943ef437bac9e8cf627f5591376d32f135' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '90b5db0741a93877341df58d3d940ed2d5e4abcc', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '8d4c2d660ce015567c2b1af4a1830df54e2687a5', class: "duet-tray-expandable-content" }, h("slot", { key: '3dd3fe954e0304e64b64bf7d19a3ca8d481b547f', name: "additional" })))))));
+            } }, h("div", { key: '6f4920fc46ec9ca16fffde76491332f8c4347ca1', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '86015d1b7a5c5f2fa233def31e8f827d7d087e16' })), this.hasAdditionalContent && (h(Fragment, { key: '8a60cf5da72a7a7c5fe879a616d71c82381c4585' }, h("button", { key: 'b1276c9c3c7758191345196f93f17edbae8b1b0f', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '24fcfa99098667d6e75caaa51e77032cf8dc9ad1', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '423a4e0bc8d2ca2984f406f2f392f88bd9602dc2' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '8f3e1506edebd49b0c7f867bdc4aa109ed8f0f2e', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'd904e8635cc16b23ce73280b6df8db7254f4256e', class: "duet-tray-expandable-content" }, h("slot", { key: 'e18df7f7b85e8d19c5910c76b026535a5d478dd7', name: "additional" })))))));
     }
     static get is() { return "duet-tray"; }
     static get encapsulation() { return "shadow"; }

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

@@ -953,10 +953,10 @@ export class DuetUpload {
             this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
         }
         // @ts-ignore
-        return (h(Host, { key: '56a66fb13e2d5b1e975502e6c02e0374b464dab1', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '402d0cd0bfc53a1fd6d981227186277cf58ef428', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '2e9c7748bbd2e39175cb19e2d3fa2a6c5b5e0d90', name: "header" }), !this.files.size && (h("duet-empty-state", { key: 'a7c200b271571a9758bbc92c91d0c0d761a8383f', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '5bd08aa838e2b2fe41c7cda3895dea43ad14cdc2', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '1e874d98480606d31435b4e8c18e78b5562d5af3', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '2093949b2d42328009e91051a6c8e2cd3c8d66cb', 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", { key: '7f5376e608450c72e17e44360074667501fab26f', name: "filefooter" }), h("slot", { key: '0786ed3f222fea600dbe962f9fc8567de54fc612', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'c2a67358020739bb490e36f573fd9bf7f60cbb48', margin: "none", size: "small" }, h("div", { key: 'fdd83feb31ce19b351e40e28005c3081d69e0a6c', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'bf1265497a10a890adc43104eebf251f1876cc32', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '3e1d242d5a44cac89bf099556b2323a249d615b4' }, h("duet-spacer", { key: '664591d6c28c59f626e14e691fcdc9434c37a23b', size: "large" }), h("duet-button", { key: 'b688f7277f2d77bcc7bac03bb357b6a71302b1bf', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "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 ||
+        return (h(Host, { key: '7a152217f20a5952f3fb56a19e7a023ee4d819cd', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '795450ef207fe4bdcb4a20420dab7a31157b9212', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: 'bd126d24ef5606b3679f71efd8050269ec03df54', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '3792437017508549add030634c569b1244900b7d', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '3ea6db36be8d73603e76f60edace6861cbd5744c', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '53028d4e767022b6f6b3febf0d5df6e7d32a00a9', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: 'e3ac3ea0554fef9c565d5b4c1836c6a8d065f38a', 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", { key: 'cb5adc8146b9e74da3605a0d14a8804f82596a4e', name: "filefooter" }), h("slot", { key: '7abf37dd8db76b7c9f4d8912903f5dbe5b12ec3e', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: '57a1b68a1fd251dc605854edd693adf797ca49ea', margin: "none", size: "small" }, h("div", { key: '284d2854de5ab0e07c1745ba505964506644a162', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'f61599602e2867e2d4d99f2d651f5a59f6a1b69d', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '4aa652f38046eba11567fcaab4afb284b7663d0c' }, h("duet-spacer", { key: '61b878fca646add83750e7f5443e83641404c73a', size: "large" }), h("duet-button", { key: '51dd54c0c592bcc16ad74e30cbce94b4410c152d', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "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 ||
             this.filesToUploadExceedsLimit ||
-            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '1d525d949fe3b1f16cbad102b17ccb1662b6ebda' }, h("duet-spacer", { key: '0f9192d41feeb38243181a24cd8282f88f1c8615', size: "medium" }), h("duet-alert", { key: '6ff272d122f622205262c116a25a99dc889ffa6f', 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), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '9c819c3fa17b4954699fe60bd343ff32188ae5da', "aria-hidden": "true" }, h("input", { key: 'bb9d9c02d82c35b46c9ed91a8f7340aeb6f69fb1', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: 'bc998642add4334e430abac07ab486962e549bce' }, h("duet-spacer", { key: '007476fd81b90e2cbf53c30801159e3b418a02f2', size: "medium" }), h("duet-alert", { key: 'be4c38fd16bbd10e02a084c978b5f18e66e69d4b', 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), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '479c3dbc81d4d0105339b0139884681b519e9350', "aria-hidden": "true" }, h("input", { key: 'f48b8a20c1cf9f97251fa02eaba68731f18ec909', 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-aria-status/duet-upload-aria-status.js

@@ -85,7 +85,7 @@ export class DuetUploadAriaStatus {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5287943c19687aeea0e9b06a40e5650ff04cac6d', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '642e4b4e31d449ef0fb6ad1ec988d6e5d175f179' }, this.statusMessage)));
+        return (h(Host, { key: '4fca4f32ff28bded94b942cc2b8f148e0d95fd29', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '5af42f3e8747936597131b1bcca491dfd3e244bb' }, this.statusMessage)));
     }
     static get is() { return "duet-upload-aria-status"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,9 +73,9 @@ export class DuetUploadItem {
         const { uid, meta, item } = this.data;
         const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
         const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${item.name}`;
-        return (h("div", { key: 'a1edd9a770aa019bd6604d67b2cd4fc5ec1ff7a1', class: {
+        return (h("div", { key: 'c2b1fa02e7a76fcbdd4007dffed433137c10e7fe', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { key: '2e74eca5c89a77975cba75685acbdb4f517da81c', class: "item-categories" }, h("duet-heading", { key: '90dc1251073ef07085b355c82f17f7f6aa5aff72', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '75ab96c30689b58829224123ac875d567f882b47', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '52b7124f793247f2b4d55873c4c47f8d2682660b', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '2430a9c7e24ea14056ba78c3ddd672cbc86bae40', class: "item-actions" }, this.actions.map(actionItem => {
+            } }, this.showCategory && (h("div", { key: '5dcff0e0c23116550d6a6f45329bf4d4a0e2fa8f', class: "item-categories" }, h("duet-heading", { key: '1f2ead94635bc38a7d2aadb863d8f98d63cb1afc', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: 'e018839c73a7e879b643560f026c9a0a7ceb8181', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '128801bc7d77a9b0f8e6d116306d9cd0c4ec8a6c', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '18a62c6ba81fc952b6aa0b397e6287460abb2b39', class: "item-actions" }, this.actions.map(actionItem => {
             return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: this.getActionButtonTitle(actionItem), ref: button => (this.actionButton = button) }));
         }))));
     }

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.js

@@ -8,7 +8,7 @@ export class DuetVisuallyHidden {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4404c44b59f635d9165c960341fbdd957d8f451c', class: "duet-visually-hidden" }, h("slot", { key: 'caa2aef6f4faf8ca34300b885d2de0772e272ad3' })));
+        return (h(Host, { key: '3b08520661ce7817a247cdc1574d2e17934a7e17', class: "duet-visually-hidden" }, h("slot", { key: 'fb9e14e593da0a47c7946ed385c3cbd711dc2ce7' })));
     }
     static get is() { return "duet-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/utils/picture-utils.js

@@ -3,6 +3,11 @@
  */
 import { h } from "@stencil/core";
 export const DuetPicture = ({ img, sources }) => {
+    const imgAttrs = Object.assign({}, img);
+    if (!img.alt) {
+        imgAttrs.alt = "";
+        imgAttrs.role = "presentation";
+    }
     return (h("picture", null, sources &&
-        sources.map(source => (h("source", { srcSet: source.srcset, media: source.media, type: source.type, sizes: source.sizes }))), h("img", Object.assign({}, img))));
+        sources.map(source => (h("source", { srcSet: source.srcset, media: source.media, type: source.type, sizes: source.sizes }))), h("img", Object.assign({}, imgAttrs))));
 };