@duetds/components 10.0.0-alpha.25 → 10.0.0-alpha.27

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

@@ -157,7 +157,7 @@ export class DuetTabGroup {
             });
             this.mutationO.observe(this.element, {
                 attributes: true,
-                attributeFilter: ["label"],
+                attributeFilter: ["label", "selected"],
                 childList: true,
                 characterData: true,
                 subtree: true,
@@ -236,24 +236,27 @@ export class DuetTabGroup {
         return description;
     }
     async updateTabs() {
-        this.selected = undefined;
+        let selected;
         this.tabs = this.getTabs();
         this.tabs.forEach((tab, index) => {
             tab.id = this.getTabId(index);
             if (tab.selected) {
-                if (this.selected === undefined) {
-                    this.selected = index;
+                if (selected === undefined) {
+                    // keep first selected
+                    selected = index;
                 }
                 else {
+                    // unselect the rest
                     tab.selected = false;
                 }
             }
         });
-        if (this.selected === undefined) {
-            this.selected = 0;
+        // select first tab if none were selected
+        if (selected === undefined) {
+            selected = 0;
             this.tabs[0].selected = true;
         }
-        return;
+        this.selected = selected;
     }
     /**
      * To support text-align: center;
@@ -275,16 +278,15 @@ export class DuetTabGroup {
                 "duet-tab-button": true,
                 "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
                 selected: element.selected,
-                [`duet-notification-mark-${element.notificationMark}`]: !!element.notificationMark,
                 [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
-            }, 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))));
-        return (h("div", { key: 'd96e791cdd488611f7d63128408d9347a290728e', class: {
+            }, 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), element.indicator && (h("duet-indicator", { variation: element.indicator, "accessible-label": element.indicatorAccessibleLabel })))));
+        return (h("div", { key: '825b9d7dcb582ff4f97f5d28a840ecc73a2eecd0', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'b65cc9f6446fa3d2f6847a2ace6d9abdfd04b337', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'b6c9dbefb1560a3e5c6c4bfe934b1c5f647b4a21', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
@@ -295,11 +297,11 @@ export class DuetTabGroup {
             } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
                 "duet-tab-group-scrollable-wrapper": true,
                 "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
-            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '91e042386356d5c7c7584ee8b93d1b65df78e41b', class: {
+            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '1452eb49358c1531712a04b2da03822e59ab1715', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'a3cfe437f448fcaa8baf7c801814da9bf1eb744f' }))));
+            } }, h("slot", { key: 'dabdab53e662fc855275970752b71965f60aed1c' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: '67be51f9c66e5e52789ede10d31aaa34da556e3b', class: {
+        return (h(Host, { key: 'f7fa5871fe4bbfc89ec3683ad0d4d9824fb9347a', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -153,7 +153,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: 'f20fd89d6078307f21e60a3c772e0719e78a94f7' })));
+            } }, h("slot", { key: '0bdd203be920ca5f48f82473ce69f63d0ee3aa86' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -230,17 +230,17 @@ export class DuetTextarea {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: 'f5f89ec4deb6832fb80b077eca0401ceae4f8bf8', class: {
+        return (h(Host, { key: '5de3b072ca14484736893df5d510e5bbfc83fab3', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '36131b2417d7eed326112df08c9736814bc90b8d', class: {
+            } }, h("div", { key: 'aff76643e853e701fc4d5bb82580f91161b61375', 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: '0120ce299715ef884c1cc2f1e42373e5bcb0e7a7', 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: '1b729cb1128299e33c70671aa55d5125ffcdc18a', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '9072f184bc0244ec5fb2a2fe6719696028bb7d0b', name: "tooltip" }), this.caption && (h("duet-caption", { key: '848706df1a73ce054a2b06f7c6e5510a21ff4a11', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '11ede29273d13f5ecb0ce24264096f387ec78c84', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '07ac46dc00428b32d11b7d5e3e5a1b3c4f2aad05', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '936fdccf8c2ad06a96579c790f044db2f5d9b17d', 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", { key: '5b42e4e2f4f76d45c40aa36caec99eaaa242586a', alignment: "stretch" }, h("duet-grid-item", { key: '59fd223682e940aeefdf807a2cdfd724a503b8e5', margin: "none", fill: true }, h("div", { key: '01d99f1d11d978925155a9d4856920780df240bf', 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: '5da5cc08fb85900d797232142167ce3be0f1cbb0' }, this.error))), h("duet-grid-item", { key: '5124866d99a9a381afcb045edf709ae6df2f342b', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: 'eed9f6583984587452c6f0825dcfa801295f4c74', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '3dd2f6aee58742d3ad84b9f213ee26a1d17c04ba', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h(DuetInternalLabel, { key: '05ece6fdbb675493b3eb4ca8ad23b65b5a07abd6', 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: '7649e1a035c610ebf038b6eeae9fc72b672603da', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'cc8b32f11e16c20e61baf2c4b80c57becd7435a2', name: "tooltip" }), this.caption && (h("duet-caption", { key: '647dc96b065a3de10b195bfa5ee7f033f5fda717', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: 'ecad9b2c7e3bae1f853660bd0f36f1123eb0758e', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '54e5f14b0c0b0c4a9b9c869fced72e22c88f2a54', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '8572767a273e22ecc50a8858185afe4b683a3be7', 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", { key: '20bb80d0199f477611c01b57fbe61861358c0dd1', alignment: "stretch" }, h("duet-grid-item", { key: '559786ddcf40c4867db4aa02678e56b73cd3e507', margin: "none", fill: true }, h("div", { key: 'dd7d4333c82c41b1314be95669994ed269e1abb0', 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: '903d46b5d1c83e3a989ebd7240291c7c7b91bebf' }, this.error))), h("duet-grid-item", { key: '9507d71aa07f732f1c4f49193b6cde0fb45f5601', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: '8e583eba57239e54aac444d8d86f9da2546f39a8', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: 'eb71dba8a8524302d3b1733a57ddcbcf04b16f74', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }

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

@@ -105,12 +105,12 @@ export class DuetToggle {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: '1dd080e2157b99e6fa5b08148203be1318d2b842', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'c75404887077682a10ab2c936730230b67fbfd60', class: {
+        return (h(Host, { key: '5dd02994122156506b124c5fc5b34369770653ee', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd9ecee8e94677b861f8bdd075a116e4e294ea197', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
                 "duet-reverse-label": this.labelPosition === "right",
-            } }, h(DuetInternalLabel, { key: '729c25fde1456d487e6f469fb8fb9fb1f45a5bb9', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '7a551eb3640c2ff849c18fa6d257cb8787e056e1', class: "duet-switch" }, h("input", { key: '30c8f85f4938c0ee3b258d02446ce24c03664897', 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, ref: input => (this.nativeInput = input) }), h("div", { key: 'fe4a68e81538ba476056ee0aa98c50b7fbccbe98', class: "duet-slider" })))));
+            } }, h(DuetInternalLabel, { key: '5c5a5ee2c5ac9e772c2bb8f2aaa822503af728dd', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '811421a233717397e31a4f3242c92197be133ed3', class: "duet-switch" }, h("input", { key: '1e2fce505e70caf118d61d53d08b0aaff69f3ac3', 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, ref: input => (this.nativeInput = input) }), h("div", { key: 'ca394aa66c3b8be2ad8b5c056ec7c737fcb93c44', class: "duet-slider" })))));
     }
     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: 'd09fa625eaa0a62a319e2ce34e24dfd33007b353' }, h("nav", { key: 'e0cefc23438745c64618d52fb2a7a842f65a8087', class: {
+        return (h(Host, { key: 'fe9cc8e718b52ddc3152c84ffc1ab5d4460935ba' }, h("nav", { key: 'a790b620e9b15d3546f88a9d7216d57269a05a6c', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '0f9047f89f861b03b53c9f7b24c975af3a846f0e', class: "container" }, h("div", { key: '3476fceb8e8be124a473f4c959763c1da9aa27a5', class: "list", role: "list" }, h("slot", { key: 'a18d367ca5aa63a9dfc969e3b6951bb63e45d1e9', name: "left" })), h("div", { key: '6cc9f7958b933bc2ccd91b9d4711c0b4a446b469', class: "list", role: "list" }, h("slot", { key: 'c850cff27a2b664300cc468c5bc255cb030db51c', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'd1074c8c4ab3245f11ad5364c91cb1a3c193b833', class: "container" }, h("div", { key: 'ca7672dd9a66e35aa4acc360fc2221633c75cea4', class: "list", role: "list" }, h("slot", { key: '6c88cdcfca3282db04370a377a106ed7b69f115b', name: "left" })), h("div", { key: 'c67d455a9e59976bea3405b30ccdbc8823d7976f', class: "list", role: "list" }, h("slot", { key: 'd430749d17f22d1fb24c72c74eb27f5ceb31a5ae', 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: 'fa64118228a1c141fa9456b15e614613ed5ec29a', role: "listitem" }, h("div", { key: 'cbb037e5087481045cd3563c550d870e882cbd87', class: {
+        return (h(Host, { key: '7af8e188b72d1dd79f3445c543736d3c18d694e4', role: "listitem" }, h("div", { key: '128c0412da716469ad79877951bf5b81f7987515', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '7f6abecc182ebcbc6f1942de14c523846750119f', 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: 'efc3cbf2c159c3b8a528e8ee58312bc9546b561e', 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: '35525346c9e8c24119fafa21f73438e99c74e17d', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'df334ca08fccecb1daaaf2e84b3a4c1fc355e3d5', class: "label" }, h("slot", { key: '4ff5128d48d41cf7dae8bd1a6fc59b134621fc02', name: "label" }), h("duet-icon", { key: '5292898bab697b524543d9a6285ba7a1d88f01d2', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '980dde4c37021bfff8c9f0d82efe3b647807f2c6', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '502ded69ce168a1de15bd937aa8c1995f2b5df88', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '8c4851a8137ab50f524c9d24618f612834f38669', class: "label" }, h("slot", { key: 'eebb0b4107c2060e48b334f35cff1458fc7b4d7c', name: "label" }), h("duet-icon", { key: '961bcc314c446a4b85ae1259b67d5566a0dd0656', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '843d1e28eb1a821021ff4e6c96269bb437980de7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'de67c7723de372d3250c9933a1572f329b32314c' })))));
+            } }, h("slot", { key: '60c2a9af5229e10192605b60f2aaf8d65e136d42' })))));
     }
     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: '2bf85e25fb52ce14c4379309850230fa5763014f' }, h("a", { key: '6ae67ccccb29c4daac6b2b107a2b6c1ff9b1d554', class: {
+        return (h(Host, { key: '34a5369d2806e4474bbb32400d5563fddcc3590a' }, h("a", { key: 'b16d10c8be40329d90136c486d568fb9511524d7', 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: 'ffde6abcd4d9e925623445cacf0c5996c4b35a20', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '24d31392d95a52029a75119c3f835e4915d214c7', class: "label" }, h("slot", { key: '920ba82ac8e9c23acff11015c9ba336cc4a699e0' })), this.active && (h("duet-icon", { key: '2b6f96f89947c64504220ce22f347aaaac32d7b1', 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: 'cce54b8721ad1d017e32ac331ebcc54d53fbd88c', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '515f4c68a3917e3403e59f938fc2a2ba296e1f63', class: "label" }, h("slot", { key: '43e7eddd00dc07766e9842a4070f09e908021551' })), this.active && (h("duet-icon", { key: 'e69da314290045e523944a6d3554158627151d48', 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.css

@@ -61,20 +61,6 @@
   line-height: normal;
   vertical-align: baseline;
 }
-.duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
-  position: absolute;
-  top: 0;
-  left: 11px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: rgb(247, 178, 40);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px #c18b1f;
-}
-.duet-theme-turva .duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
-  background: rgb(247, 178, 40);
-}
 .duet-toolbar-item .trailing-icon {
   width: 16px;
   height: 16px;
@@ -182,6 +168,15 @@
   background: rgba(23, 28, 58, 0.2);
 }
 
+duet-indicator {
+  top: 4px;
+  left: 16px;
+  z-index: 1;
+}
+duet-indicator:has(+ .duet-toolbar-item .duet-toolbar-icon) {
+  left: 36px;
+}
+
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:not(.primary) {
   color: #172a3b;
 }

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: '162cf805e05ccc2afbe436132c6eea801ade6d91', role: "listitem" }, h(TagName, { key: '56ade7a57f34340591df7e1b040a8478de805ae1', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'eb26d2d4b6bca30e6ca4f6badc1235aba9bceba5', role: "listitem" }, this.badge && h("duet-indicator", { key: '06e7cc4489109e59e3a86c4ba511ca82c92c81ac', variation: "change" }), h(TagName, { key: '294b46d5c03f9e4468a109de050f6f5d5e6db5ae', 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: '5ad00f6ebd929f86345eff8d567dca3c47e6b724', class: "duet-toolbar-icon" }, h("duet-icon", { key: '7d876e02c1fa8c0702f497487fdc63fa28c9f19c', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'c23c6b7e24652198ee4bfa23b83dbbd769238ef8', class: "duet-toolbar-badge" }))), h("slot", { key: 'e8e49955cbcee9ef19d74bb6a2bbe315504dd54e' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '89abb2ae15dad5cc0775ffe3e432be5e35f20751', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'dcd41089541238143d30e109bdc28c6b03c20cbb', 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: 'cfb375b91d12501eb3bb14c0d8dab4898c225b1b', class: "duet-toolbar-icon" }, h("duet-icon", { key: '2d4505d93051cc291345aaa8f7fd75254e0f9f13', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '6d4deb63928fa9484fd2d36bb3b63bc31ca09de0', class: "duet-toolbar-badge" }))), h("slot", { key: '487e4a04766617cac63c99949c3900049358fec9' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'bf9cb805c54b16cb6fa0f0c4d79af8214efcdbb7', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'ea4fb89649c146496bbc68c383483851fa9ea171', 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: '0cfca44b60f68a885d83b230411954dc5fc42b5e', 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: '6faf269ca79bd58c526ec509fad3fad42791c660', 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: '3892831234a833b4a247d3de3f9a66c30135e5a2', role: "listitem" }, h("a", { key: '7f8a8e206d7775ed92ab5936304cc4c4aea4147a', class: {
+        return (h(Host, { key: '37bc6a6543039418aa1450349f23f7eba45adadb', role: "listitem" }, h("a", { key: '55cc4a44d00c2d228ab14686063417d471beec5d', 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: '8c58a04f9ee135ee12d4b32aee1c43d5b0e9f18b', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'c6a1605ebb2b6d099a87e430792730aceeb9230a' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '363fec506c3668d762b5a706b720f4ab8efb0bb5', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '086cbb4a926a01fcee0ce4d7ca417ad031c60110' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,13 +36,13 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        const visuallyHidden = h("duet-visually-hidden", { key: '70a82f2c22f0f4f4550e15b1e7ec8c526e3c122e' }, this.accessibleLabel);
-        return (h(Host, { key: '19556e89ed879d642f95db9e14dfe6350af14858' }, h("button", { key: '2b2fab3108b3575da91c00ad81a763d776476b28', 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: 'bf8e82beb39bca3f67c6ffcdbaf684671f551ffa' }, this.accessibleLabel);
+        return (h(Host, { key: 'c014d004ab6a355f122447e806b5c12f62aba277' }, h("button", { key: 'eda0bd6c55287d8ac393c2af3f65cbb910cd8c50', 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,
-            } }, h("svg", { key: 'b665bf9fc4f777eed4e4e152c394adce11fc4f4e', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2f25f9fefa3c82c6f182507c79d3a9cf904fa009', 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: '2b0bea40ebef849a5faf6958f2d6da457180eaa1', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '44744f79a997b131473388d0e02347277d04c42e', 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: 'f6d4082627cb5a653bdd3668cc899bb885d204a1', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '21df01e868e6f304a33a50d4ac2442d6f43376aa', 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: 'ba4e4c5cb1bf9f5e91e5ab8746485ca140b9a597', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '0a3e24ec139b2442be22ebc85c663c891a050c08', 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,11 +53,11 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: 'cf44855d08d69141e629987f9ba2fdccdcdc21d7' }, h("div", { key: 'bf7580b8ecdf58b6c93c3c21cbb362234cc699b4', class: {
+        return (h(Host, { key: '63f303082985a668ae51759122ae462ae25404e0' }, h("div", { key: 'e3da6a6995872c70fb5d690ea87cf240240a2d0d', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '6f5a516e23035e8e0b9c2951ef4a10243b564d17', moveFocusTo: this.buttonEl }), h("div", { key: 'c41a0c3b305e6b7a2378ef026e62cf2317dafbae', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: '52b6fdbfbdcbcc8862deef3747e757c264d3ab48' })), h("div", { key: '0d4dfae3f19140c33f0f3fb3d809fb4040709482', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '7d6908f726db2eccbc469cd001f90eda504f2a81', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '781903abe2564af32ae934ac36932d472c0f931a', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '093d2ef20e77164379ca8fbd684c8df2a3b1b2a6', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '75dd3160901c07c32af93259975321284e62bc90' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '9f838f645eff92ea829befb3acb4816d160179f3', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '428ef9ad1157017747e93d3b0f6b45e6dd4d8854', moveFocusTo: this.buttonEl }), h("div", { key: '28ce9b1d024d91bab1ac7af6db333d1d1775e908', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: '56d9eda1be312a281c52a61b6b84c2305b9ce1a2' })), h("div", { key: '9d066d667b47bb9df4e9381c1a197bbcd77ce2c7', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '6c538ccbe0b07edb774ba32eea5469c00711acc4', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'd91f29b8ca30a2d47ba8076e225df778d9edd44b', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'a8a7db77b6704d554dec98260e2ea01010d01769', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '854e0be682bc2a61ffa1ae6e2ac1355225184f7b' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '185c9ca3637fce42ff0d5c6f3c4e4bf6656218d1', 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: '4feb3ea8d6067ec6d82c6eaf9225fe6728bd4acc', class: {
+        return (h("div", { key: 'f214ce1bc33434f910d47ad3eb6c32f9def079a6', 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: 'c51904bcc9f3d0297da08c32952be7ea690bafc8', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '52e8b11bdf354f65b34fb1d6d2facbf636a01758' })), this.hasAdditionalContent && (h(Fragment, { key: '86e6560df02094fcc7b7df9146c34c47923d89eb' }, h("button", { key: '000c5472ff2f7f1a0ffe6e796817a51fcaecd856', "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: '02489a52896b40ce4916a3b6dfcdd40d36212251', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '866528d950899fe557f6023f8f9ca79e9545fd15' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'c3400e3dda10617ffd45395e46247ef88a2157a8', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'f2176a2e171dfae93254cba98d31e13855c3b0e5', class: "duet-tray-expandable-content" }, h("slot", { key: '21d7e1276815c885a9832fcdb87ffbd96fe8a03c', name: "additional" })))))));
+            } }, h("div", { key: '4b233933831bb971fdfcbcfeb1a45a24376c9334', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'dd4e32bc8ac1287203ae396fe8c21184971ed452' })), this.hasAdditionalContent && (h(Fragment, { key: '978f4eac8618d6e6806c2b949e61555881739314' }, h("button", { key: '733c5973d36830c6c93d80e74d943f89d6cc02ea', "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: '84843a2d3b1481545f27f6dd15854e7382f712ea', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'c071fa18c128c620dd838dd8a0d6fce553bb60aa' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '85ae38a4a6b17d8acec9bbd7948eba44ed6bf28c', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '3cf4e3889f982c47287b962430c62596aad7f81c', class: "duet-tray-expandable-content" }, h("slot", { key: 'ea85e6c58ed79bc61d885f859d296ec9a6a590d3', 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: '778bd75c9be94d65bb9722e49f919ebe96d0232d', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '86cb01a83aaa8b07b30a0dea14df211cba69f3ab', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '4bde3430f3d36cb1220fc12bbb801eafe70c4e91', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '3427abd455392d8063bd85a3396a831efc5f099e', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '5c46fc6e79ad3427d705d237cbb7cbc271179c3f', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'bd7345b68ba7339c2163a07055bcd0195be06974', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '3d4316e1a725d9c76b077d6f7af8f7e555070aa3', 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: '37e2422249ea697845dc47e1e793feef29927186', name: "filefooter" }), h("slot", { key: '0056e0dd3847319978358fee188d82398c06c9a1', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: '962a0485219f6a4a0d983d362860aa9caaecdd9c', margin: "none", size: "small" }, h("div", { key: 'c0e53f5f8e508406eb2b79bc3aca2e6d9c91ac42', class: "upload-bottom-caption" }, caption))), h("slot", { key: '7476632f57f0516caff8967a08d7c011c4859c21', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '3f7e814dd7256beee8db3e8393b837be7da1f8a8' }, h("duet-spacer", { key: '8ef3e7422cfa406c721cdc843ad2625c64dd4f7b', size: "large" }), h("duet-button", { key: 'b3af8fa02fea6339f92b3e5fe46b4259392357fa', 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: '855e27e55645747625669bf080e6f65423b9bbf0', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '89d6b1b88260ccb7ffa2f4a3130fdf74d904e048', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '10b9cdc44bd94871f538a9299ea6252f4375a864', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '924905b1aafa76175b93f12dd6e7d7ac8ac5b5e3', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'f744c2afdb520cd0e69a15c0a942f6ecd8e30b75', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'da55dafcb732e24b895185995040decfe40382c6', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '199e78733f262f857124540bbd055e7c6cbcaf6a', 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: 'd6327694548a1ee39188af3935c67d0a6eaead79', name: "filefooter" }), h("slot", { key: '718e1e5d1f7041d2d596ada75a717942b74999f6', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'd15f3fd09b07de11dc1f725bc9ee344889b6445f', margin: "none", size: "small" }, h("div", { key: '1e4e1c3a29338fa3339cd2de701ba3c776c1166a', class: "upload-bottom-caption" }, caption))), h("slot", { key: '90f1e8de4c8359df2b8dded1bf5211857ce48a79', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '431fb04536068eefdf974fc34f89f56e712674c9' }, h("duet-spacer", { key: 'c98d3f3e0f06d17b1b86ab40486a663ef8c6a75e', size: "large" }), h("duet-button", { key: '1f057848bdacb5e69ef63e2bfdc81e216271f455', 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: '51436c684d7830dac19f0cfac75b85b85945aaa9' }, h("duet-spacer", { key: '5d32c83854ace51e13433bd001d936d61ffd2a3c', size: "medium" }), h("duet-alert", { key: '97960577cf5e708740f6b68d6a7e242b696e7378', 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: 'd1063962b250be5515cf9e98738b0b2ddb437d80', "aria-hidden": "true" }, h("input", { key: 'b7e46fbc27706de8c6159467c471c81834663b65', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '8169162805d7ec3a093344e09a4bd9241c1b9c58' }, h("duet-spacer", { key: '0f6500a4ada6c4b3c73f6524bf224ee1d79f0ae6', size: "medium" }), h("duet-alert", { key: '8bbc63eb777fa98ff0f797d970d66835ac6155a5', 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: '5fb70459ca757cc24041ce6e01414165ba6497b5', "aria-hidden": "true" }, h("input", { key: '808b15c23e12cf691f85e48e1a03106409b81565', 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: '2084d67e27f201170cb0915e97235481a8f42ff6', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: 'f774f8926c1f2500866e4b50781cf83a1263b0c2' }, this.statusMessage)));
+        return (h(Host, { key: 'dfba0ccef69bd34b3c4f8980caa95375ed480f83', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '20bd47d50fbc2097aae0656ffb367299284ff441' }, 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: 'd5e5d2db3667a4f6011411a27fef2f9b45108f8e', class: {
+        return (h("div", { key: 'af4b480a7c50c90ebf35c2744a0c6d301c026ee9', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { key: '1ab11fe55d884a902497e0e3af8126f4b007af5f', class: "item-categories" }, h("duet-heading", { key: 'f035ab2fdb44c04d6e2d8747caee034db92325bc', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: 'e9eebcc83bcaac3a8eeb8fd441f6663cd43be213', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '4e18a21c1e78c6af26e4728635930b83de247593', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '3b1ee538c1f5e43ff3cd35f99bcb2a565e5e68e2', class: "item-actions" }, this.actions.map(actionItem => {
+            } }, this.showCategory && (h("div", { key: '4717379f9f4b5848066dd29975972f19b46e2ca2', class: "item-categories" }, h("duet-heading", { key: '629de4c001a31d3ac9e509f4d8c4e48453b861bb', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '0bab4d7664d6f2032dac1ea95b2b608297ab4d2a', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '65d2a44a4b4b3353766658557242ad53c357236e', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '5e5cce5f36a34f4b24c21a1055874ba9bc59493b', 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: '2ac2536c5fb762954d328da1080105d92292c8b4', class: "duet-visually-hidden" }, h("slot", { key: '4f58c2bdca5f9d629586174be225448f22662155' })));
+        return (h(Host, { key: '0b6d7c8ffd99088d9679558cf45fd682f17754b8', class: "duet-visually-hidden" }, h("slot", { key: 'a1fd4a31404091a50c989a4ccbe6ea9b8233fa73' })));
     }
     static get is() { return "duet-visually-hidden"; }
     static get encapsulation() { return "shadow"; }