@duetds/components 9.15.0 → 9.16.1

package/lib/collection/components/duet-submenu-bar-item/duet-submenu-bar-item.js

@@ -57,7 +57,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: 'ba9eb4ea033a7815929691f1e510068847f4d43b', role: "listitem" }, h(TagName, { key: '5de39f2c7355d1005f4b962d7f6c7512d288f20c', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "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, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '851397fba2c325e6cbfe090d8fa4eb6e45baefe4', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '47618d6694e418a91d6712b83c77fc9811c9f859', class: "label" }, h("span", { key: '9f3964b9779a74a3ea3c198dda79cb5334134c47', class: "label-text" }, h("slot", { key: 'dfec68cf601f45e53cb18429f69c7f8f41138b3c' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '3411ce93ad9e72860c14d541738603b0dbf65ab7', class: {
+        return (h(Host, { key: 'c287dfc01f81f1f141e6737865729ed1f150393f', role: "listitem" }, h(TagName, { key: 'b3a25e1a9868133e026cc59014a92bc47b967da4', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "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, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '0155ac8b93b2da25697c0d19ea81b8b0fc12782b', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '71c2350aa20bcd4c44e2fda3789734b7571d0882', class: "label" }, h("span", { key: '177921fcf4100c4accbb883e635b0ca4e7b4a8e2', class: "label-text" }, h("slot", { key: '5bf35114d835ce7fbe1e0576fd56afce9050fa15' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '419f75603602b79929bd47fc4f50e57ba2912ed6', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -29,7 +29,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '55020aafd418a4e9d315faefc7cbf31fe9437c54', role: "listitem" }, h("a", { key: 'd99865094806811ac9d452785396a1c1cf6112f7', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: '28fc1367d49037da43ddca5b6c7654098f3a6965', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'b0f6a7d53f34aa62392a96e1e4ff955d7509209f', class: "label" }, h("slot", { key: 'e04b7f1a353d1d70be3ca6e22615995e5fba7532' })))));
+        return (h(Host, { key: '1631b8785eac1ae6b4572821e41bca2cc8301e65', role: "listitem" }, h("a", { key: '275eb5769ff90ea7bd0e2be9120dc2d8791c5c5b', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'ef4c344048e8407ef8c7cea344d613a57b530315', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '8c6ba8356f5a4ec23c0bcf3ea6f8face48e62397', class: "label" }, h("slot", { key: '19a1be178aeec7d6086db248c1cc80a276239f90' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,6 +48,8 @@ export class DuetTab {
         this.caption = undefined;
         this.selected = undefined;
         this.notificationMark = undefined;
+        this.indicator = undefined;
+        this.indicatorAccessibleLabel = undefined;
         this.accessibleDescriptionDefault = null;
         this.accessibleDescription = this
             .accessibleDescriptionDefault
@@ -65,6 +67,9 @@ export class DuetTab {
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
         subscribeTabbingChange(this);
+        if (this.notificationMark) {
+            this.indicator = this.notificationMark === "warning" ? "change" : "error";
+        }
         this.setupContentElement();
     }
     disconnectedCallback() {
@@ -215,14 +220,61 @@ export class DuetTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Notification mark to show in the tab button. Works better with plain variation, as the dark background of\nselected default button makes the mark less noticable."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use indicator property instead.\nNotification mark to show in the tab button. Works better with plain variation, as the dark background of\nselected default button makes the mark less noticable."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "notification-mark",
                 "reflect": true
             },
+            "indicator": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IndicatorVariation",
+                    "resolved": "\"change\" | \"error\" | \"new\" | \"success\"",
+                    "references": {
+                        "IndicatorVariation": {
+                            "location": "import",
+                            "path": "../duet-indicator/duet-indicator",
+                            "id": "src/components/duet-indicator/duet-indicator.tsx::IndicatorVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicator to show in the tab button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indicator",
+                "reflect": true
+            },
+            "indicatorAccessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides accessible text for the Duet Indicator. If Indicator's default is sufficient this is not needed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indicator-accessible-label",
+                "reflect": false
+            },
             "accessibleDescriptionDefault": {
                 "type": "string",
                 "mutable": false,

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

@@ -166,74 +166,19 @@
   min-width: fit-content;
   text-align: center;
 }
-.duet-tab-button.duet-notification-mark-warning::after {
+.duet-tab-button duet-indicator {
   position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(247, 178, 40);
-  box-shadow: 0 0 0 1px #dea024;
+  top: 5px;
+  right: 5px;
 }
-.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-warning::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
-}
-.duet-tab-button.duet-notification-mark-danger::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(214, 28, 82);
-  box-shadow: 0 0 0 1px #c1194a;
-}
-.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-danger::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
+.duet-tab-variation-plain .duet-tab-button duet-indicator {
+  top: calc(50% - 0.5rem - 7px);
+  right: -7px;
 }
 .duet-theme-turva .duet-tab-button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
 }
-.duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(247, 178, 40);
-  box-shadow: 0 0 0 1px #dea024;
-}
-.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
-}
-.duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(214, 28, 82);
-  box-shadow: 0 0 0 1px #c1194a;
-}
-.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
-}
 .duet-tab-button.duet-p-0 {
   padding: 0 !important;
 }

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

@@ -211,16 +211,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: 'd0221da76b9c778b6d22fea962e6964dadd64929', 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: '82bdbb06df621e50abe48e5112df78c99213c193', 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: 'aa0175a9e3fb67b01e92d0cd35755138dce2e46c', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '56bbfe2c4f72ffd7ca9f56df5df3f22bcb59ca3d', 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,
@@ -231,11 +230,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: 'f7da2ca2b11ae48bde1a50609695453bc5b46bdd', 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: 'c26feb7c39a92f1a3d44d09fb2e97a9667e54f41', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: '0ca36531417cca1068a36d6ef4e6d5eb3b29302d' }))));
+            } }, h("slot", { key: 'c6cb02cb9b42a53c57e63e9aafb505af31e9b2de' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'a4870b0cafe43e5aa7e5f2b018ec4c36a7d263a5', class: {
+        return (h(Host, { key: '147da4a8e086100e74e07d3bdb773b73b53072ec', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -122,7 +122,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: 'fdf91dd956d54023aa8600a6992dfffddb242f21' })));
+            } }, h("slot", { key: '127854a0ecfcd4b3debf08383af581e80dce62b7' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '71cf9fb61b1385f9e3cdb9b261d24693788ea0f3' }, h("nav", { key: 'b4d4182af3679982529ca44fd471f5763dbcfd1f', class: {
+        return (h(Host, { key: 'ef985ffd5d6ace34e338b68d717e0ff4ddfba289' }, h("nav", { key: 'e7ca6e1aaa3342e2422c4ad43e6a52162f1b181e', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '70b7556c67c5d914fae243ebbbfc40bcafeeb1fb', class: "container" }, h("div", { key: '1253dcf2deb5eca7b68f15abdc65bfb5f578bc20', class: "list", role: "list" }, h("slot", { key: '61e977ba9089ea74bea48572bad2cf9948d4c24a', name: "left" })), h("div", { key: '96783a831bd7c7c520be9cd1fd80fc4b03b43639', class: "list", role: "list" }, h("slot", { key: '47b4a4041f6d2bd92f01e0baeb6d212114ac6ce0', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '3c0c92fc2fdd0b5736bc9c61951d4269b24580f8', class: "container" }, h("div", { key: 'f9f17a0ed80a2c530caf8537857dfc76d51c4a50', class: "list", role: "list" }, h("slot", { key: '22cd0173e2588e554cbb8ef035da5d875b28927b', name: "left" })), h("div", { key: '28483b4d1a73201f840eb08fcbf5be41250142a1', class: "list", role: "list" }, h("slot", { key: '97e0bad5bdb1951d56d8c0bb30d031e1d0404d6c', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,18 +50,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '1f4c3ff482e27134923f4d73d5bcfba53da16689', role: "listitem" }, h("div", { key: '77e7d02ebb37cbe36013ea3b06bd497c0de6b323', class: {
+        return (h(Host, { key: '596f1d30769cfc73eff986daa58617c9a93c262b', role: "listitem" }, h("div", { key: '83887c28043e54be6a283bc56dcf4ecaf1a150d9', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '22162218e8e9b64d35edf289337033f0a2ae0505', 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: 'c26200e08162ae86a4df238749142e12bcb46bb9', 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: '5d8ec0602b127d6ef83764ca04977959e179e6a5', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '8f90c46608aec95cbe8917036a00d2a77d505e6d', class: "label" }, h("slot", { key: '821c377977df5cc1be12b952c505253e3ca16c24', name: "label" }), h("duet-icon", { key: '8dc33363d72cbf1e1bfaf056970a116236435be3', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'abe0ced5cc9619298d365e47f87b1a2b75175679', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'b771ad4e3866fd9ec5ce2b78daa6fee856581f7b', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'c7f76672e64e33c62e120a4051f37a7f55dc8462', class: "label" }, h("slot", { key: '04884aecafe96d8dba32dd276fa40b63c931f29d', name: "label" }), h("duet-icon", { key: '3b785a7dfec4e735690909bffcc7f8c25520c6b7', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '94c2c5c1847ce591dd7769e536f152362ff6821b', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '4be5fe8189090f0f0bf027ec4d5a4ef9cc21f3f0' })))));
+            } }, h("slot", { key: '30a47f3493e33d12f8b50923fea15f0a5c259b7c' })))));
     }
     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

@@ -31,11 +31,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dfeaf4d6768045033434e058ac7a22fefd0c61f3' }, h("a", { key: '204b942f38ebcf47c9a2d08df7a2cdffc5b1a6b5', class: {
+        return (h(Host, { key: 'c632f004e1b25c843e913d55c75fc9ce59261541' }, h("a", { key: '3c28f36f8f9b8aecf176de0b5b59b508e625dfad', 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: 'ff582f1caa8e86a2011d80d9e3130421fb13ab8b', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'b3697ba42a15620b16d14fe4f946ad4ede4bd318', class: "label" }, h("slot", { key: '32431748370d82d00dff02e858d42619e28908a4' })), this.active && (h("duet-icon", { key: '343f674c595c46197416109d691d28b725040bb8', 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: '759c36b6ef114a2fa7e9a72cbe3944307b7fda6d', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '2b66326e82cce5ed92f79c98d21d11b8277bc1e8', class: "label" }, h("slot", { key: '58edb19f68c081b56682e2f89057150456959f8e' })), this.active && (h("duet-icon", { key: '6fff9520d86555a4ad81465b21c8dea364218c3b', 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

@@ -57,17 +57,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '91f498617087f1ccd8491ebf7690a627d990290b', role: "listitem" }, h(TagName, { key: '50e607df470d4d85f9bd8045878e1e9be69bbd49', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '4a794a46e3a85399537b5d0e754c96023b8965bb', role: "listitem" }, this.badge && h("duet-indicator", { key: '2b7fcc59e1a6085d01e352f4588c8ec1cd9d77f6', variation: "change" }), h(TagName, { key: '75faf7f2cc4771e483596c42d4dc1618dd17ccf0', 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: 'bcd2fc09f93642ba9a110a3bddd881ced3d9fc8e', class: "duet-toolbar-icon" }, h("duet-icon", { key: '323aac653803756d74d7722101aed3854cf6c093', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '3d71181d7a06a62b2523c8bc943eeba061b4e16d', class: "duet-toolbar-badge" }))), h("slot", { key: '25f69cdd90c2734def4500e476f505b3ea6408ad' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '0fc3a9d378996699e077ebaac42fbd13987bd862', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'd462ac02e841954a22e151eeeca7cdbf1e504e15', 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: 'bcebd3cdca6ac2bd138ae887c0282bdb3a079313', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'b1fa628989fa3fe411e832a64b4db44fdebc9bca', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'cbbaa29928d65247ab5d5502e30939215845ebe3', class: "duet-toolbar-badge" }))), h("slot", { key: '584f63205dd40d32c2dec8ffcbc1c9395f7c1a7f' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'a5ebf0393700731a0962b7d7086f38253fd7af1b', class: "duet-toolbar-icon" }, h("duet-icon", { key: '5336b5e76fd461dfa557864f105814f92451b6e9', 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: 'ca240186f267085e343f7e625e496ba9d25178b4', 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: 'fe044a52349d31c7dfad3937841f29b50f90f282', 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

@@ -24,12 +24,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'ada6b9cf97f679d00342bc10e4246cd7769cb0dc', role: "listitem" }, h("a", { key: 'd066b938dab65c6bb295b1c33886d25078606ffc', class: {
+        return (h(Host, { key: 'ea2f78ced1097c2fe7e8299533f653269b7cbf97', role: "listitem" }, h("a", { key: '3d624303af389afe4d08c50756e3e0e240eb65b2', 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: 'daff82ced17069f6cddcf875c4ce87bf74a2c472', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '64c261fee1b5ea2787c91ce4c3c8567ff0e3ab04' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '075505b373aaa3dbd7103ade34ef42a6d7a07ec6', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'e78fa0abab2fe36cf44e42208b7f341041ef068b' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,13 +39,13 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        const visuallyHidden = h("duet-visually-hidden", { key: 'e455684026063de1dc9838bb0cd8cb98b10901e1' }, this.accessibleLabel);
-        return (h(Host, { key: '72042958d6bde194eb981994118b017730fa08ad' }, h("button", { key: 'f30723885692add101e2f99453834b56918b4dd6', 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: '9eb5db50b79dc2250ccf2e24dd8d260daee0344c' }, this.accessibleLabel);
+        return (h(Host, { key: '90c2f17d3ecc3d65c2eabf37bc3b9d13cb43c898' }, h("button", { key: '9daf36dd45f62c0319805cbda850d325d7fae558', 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: '80ee1608220911c1b63bbfdff73333aa1281e8c6', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '81d7510a742164802db9d3e2850c0c595060bbe7', 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: '93f6ea5c41c5433a3344c99c32d403deeddd0c9e', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '0bda03982f84533033ad43134c891c85e1713192', 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: '09b56bf7d3108b987c1d3718c3daa99f30f450ab', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1c61f6ef5e02f9c6cf82f24133b5e6ed5efe653d', 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: 'dc68127a8bcf1b9e8538ffd25362fdbadb4f631f', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '146f6ab16c918f0f88b01c2c5da82a64a51ce814', 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: '25625861a7858e924565471167aa9f993362163b' }, h("div", { key: '5cfb9c029a6e00a43a7890b3a8af59d09aa82b5d', class: {
+        return (h(Host, { key: '20c858471eb122674b6c7ac5de1b243eee925fa2' }, h("div", { key: '663db7f4fcfc622d7eacf3a688c9855299ba8cf9', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '4523ab0855d71dd5f4f13f4554f6862845c02df3', moveFocusTo: this.buttonEl }), h("div", { key: '4341d74dead24be51cbf51e385f3684115e48c9c', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: '956cd79efc0169a02ddca5c760c9fe929f42f346' })), h("div", { key: '4998d379b24b1ddb62616b59bcb7edf106ed1e96', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '272e74d112bb9430646edd655d2e1eddaef29d72', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '40b347addd467daca17911eaf589f9ab49f40e29', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '65d0509c3e63ed403945b23938ad021a4d5788ab', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'edd9504295bd1c5bf74959a1fdc3586a3c19a46f' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'fadac987b297e5cb6839785e72177f4d311f2d0a', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '7ad49fff09a690cae1a3089dc34028fbce775265', moveFocusTo: this.buttonEl }), h("div", { key: 'c5a92a166d28092b2c58ecbf3fb5f9074e254081', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: 'aa4ffe0b471baf807fcc21a4fcba7dd61872a614' })), h("div", { key: '541a8ca3aa8963840740481b632d95d31b040643', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'fdd6a17db7b4ca37ade95264d6c8024d45011af6', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '914f2a0fb4376f8033059f8c5fe34f42bb6e6672', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'ca76340b0f68ec1d424384f2adc3cea1de1d9e76', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '7a58123fa4fb824972ed724bf2ab67326f634617' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '079e18d721f95ca86e3b58818bdc4362ff5f528b', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,14 +87,14 @@ export class DuetTray {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'b58f9833c7b39ee25947a9873dc5b382ff99a6ab', class: {
+        return (h("div", { key: '1d7ecedacff4c6f944fba1cd8a8e3ead97d0bdb7', 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: '511e12c5b08dd7c6b0b804232715524552359cb1', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '6bb93f0e44ed66141d3b54a7a577e44cc167af31' })), this.hasAdditionalContent && (h(Fragment, { key: '3cdd831ef6f37b4e97698520dcbe13c811647f6a' }, h("button", { key: 'f7d2ee451d1b850c783b2caf6a7452a89e06ee53', "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: 'abf84c9a98ab282bfa2d0928c9c32225790287f6', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'e7ba1e6ff2bc3973e7b084ce9ed81d5cd7345e67' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'c34b83ca4cbdef9901f3a1d29f465846bf3dd3d5', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'c7e59c265dafac429591be3aaf9333298bb5f9fc', class: "duet-tray-expandable-content" }, h("slot", { key: '8fdb1feb8dce73ada572da08d5fdff7df273117f', name: "additional" })))))));
+            } }, h("div", { key: '975ab4626c5bf9b232bce92778d549aab452ff8c', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '2e0747c828ad43d2924a86ad0b92e530bef3fc88' })), this.hasAdditionalContent && (h(Fragment, { key: 'ea46786865bd60c5bb2e76ea53c4440e5e66b58d' }, h("button", { key: 'b2d26fdc7da5127389c579f8fd237d5ad8d86f76', "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: '100006a3739e953ac6e59b0de175a458a67f002f', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '0a573ad597411e4c05bc55f3398a266a9394f2fb' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '8f32327012fee5df11e22a02e46d75fab9c51e07', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '181ace36ed5a84c229e0af26e5b410b11456fb20', class: "duet-tray-expandable-content" }, h("slot", { key: 'a0ed8f11df760051de06207ccd8abe43bd26a7c0', name: "additional" })))))));
     }
     static get is() { return "duet-tray"; }
     static get encapsulation() { return "shadow"; }

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

@@ -753,10 +753,10 @@ export class DuetUpload {
             this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
         }
         // @ts-ignore
-        return (h(Host, { key: '2cb6006c495f141141399d81c7e6f8e7967d2abf', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: 'e3febb3aaed53ba1f63d0deaed3984233d081ff9', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '0cb5e96677cee13c2cb2748ec95182ba44542e9c', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '0b6ff2849bb502f136c3b4837ccdf19b5b2c1c18', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '69ddeab39e14da3d436467aa935f3695587547fb', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'df6739a9d4d7c5c02e72e3f430f29d854edf1a99', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: 'cbd6241618dbf7ca04c61e1d0725f4dc157e87af', 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: 'aacaa46c313c829d4e880bf7c7e1848f0ea189cf', name: "filefooter" }), h("slot", { key: '36551b5a589e7feee6077af241b9a25d297feb28', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'd04226d485cc26a193935fa8e4fb98a462a0a505', margin: "none", size: "small" }, h("div", { key: '6b45b8d84658fd393dc9522c5bc33288e39f7159', class: "upload-bottom-caption" }, caption))), h("slot", { key: '2f2b87ae68a5df22a1fd03e11616249a26be0791', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '113e78c43b0be73519c29617ab452a494f567683' }, h("duet-spacer", { key: '292f0dbbd87d637d7abf982b8e296b282ae89375', size: "large" }), h("duet-button", { key: '774bc75ffb2f90878794215e7890d592abb7acd5', 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: 'c7f1bf7d8cf499d955da5205808a3ea5428035b2', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '1460d528cb7fa48e6c6867100f4f12646eb28cf9', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: 'dcc7b2faccc425c862b51d5c1732351973e5bb35', name: "header" }), !this.files.size && (h("duet-empty-state", { key: 'cd063eb6f01f9c981e6d5489948905b6109077b6', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '6a233a0b84de2933ea96e01d3bf83a45e7a6e50c', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '3aafba5896461df3b1c8ddb13dd663c98a1983e0', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: 'f776236c6ba78c275e213a82c8c00b337f9b7594', 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: '7e8c78fb32117643609ac7cd0b984207513ab742', name: "filefooter" }), h("slot", { key: 'de74f9f77d8d78d0a738d5cb10af764c830d90a7', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: '7abd791a093afc3fb151847fc1e2ac955f0e59ee', margin: "none", size: "small" }, h("div", { key: '5f68e2b352db0e0905a791647f0dafe74063897d', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'd286427445a790dc955f7ffc96ae2b5af7cb04e7', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '055b712495e396748b320913cab77e5377e4c38d' }, h("duet-spacer", { key: 'b5f63e77e82da67f1b5b88e88b70c9b14d7dbe1a', size: "large" }), h("duet-button", { key: '11feaaf6cf24744aecc3c4c159a03841e6cba34e', 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: '7de2ffb0e3562b05cd46d1eb1d3360fc853cf601' }, h("duet-spacer", { key: 'fa336882d4bd468f1e9593946f48d73929d26f87', size: "medium" }), h("duet-alert", { key: 'd9a8cac2323b3b10d4cb5c22d0ec19c9b2082694', 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: '71318f80dd7ad1ef345bc1123be62719becdc52d', "aria-hidden": "true" }, h("input", { key: 'a68a3d1d4490e75a2968e47a681f11cea7bc4d9b', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '7ce04c54d1dc3f550c956a81f032f816fdf78b46' }, h("duet-spacer", { key: 'b4a03f6aa7757f47018a7c906807d9065d1c71e2', size: "medium" }), h("duet-alert", { key: '9bb87f4fbed6c654fc01e6b981559b71d2d84386', 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: 'd3f9fb94e17554fcec4db21a9a66cadaf98fa073', "aria-hidden": "true" }, h("input", { key: '728996468d1dd97139be322580f2475d6917eb5f', 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

@@ -64,7 +64,7 @@ export class DuetUploadAriaStatus {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3b0157268e47095dc2f0146bcee9aadebae36f57', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '6ee679966cd2ac3a64f17e4dd10ee708c458e1a9' }, this.statusMessage)));
+        return (h(Host, { key: '7ca533d944adaea769cb04e2239230858961990b', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: 'a87edd299b5ad36c33005c241c5f74ca068a9c40' }, 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

@@ -80,9 +80,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: 'a0d382c608507d07d924abb73bcbbeffa09e0aee', class: {
+        return (h("div", { key: '1412bdaaf8001dd4849c5128cc463327f4a5dd2d', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { key: '4f7b9bb8c9494e062171d29e5cfc12a9a3e1027b', class: "item-categories" }, h("duet-heading", { key: '477b02e94e76c857191fa6cd51f51bfd240bbbe7', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: 'a12f1ea980d26df9122daf3dec6a4441716c88ff', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '8cdca136f7a623a5b58fc863e02f15552ff73f0e', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '33a97bcbb4daaf167e89fed5aacae4409b982177', class: "item-actions" }, this.actions.map(actionItem => {
+            } }, this.showCategory && (h("div", { key: '635382f438d151cbf5f84b04d24ca36d80584953', class: "item-categories" }, h("duet-heading", { key: '1a8f5beb2b403297bfe5a25fb125337817848c97', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: 'b51a8872eff794722a6fbde9fad6cd77e81b036f', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: 'c423681df8f4f2c90dec48b5204090ffe7428019', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '3f0c5fc33ca3f8053b7a28190e4816aeb2354cbf', 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: 'a25d34eb4058ee4b01d11c93532438ccd0a2beed', class: "duet-visually-hidden" }, h("slot", { key: 'a5ed126a86253440a45de5397557014393438ff0' })));
+        return (h(Host, { key: '0cde507e2a8a8ec27d6865d26a1647a6a0817ec0', class: "duet-visually-hidden" }, h("slot", { key: 'fb334f7b1a33c43cfba9cdc8410ce829a7865f49' })));
     }
     static get is() { return "duet-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,11 +87,11 @@ export function getColorByName(name, theme = "") {
     if ((theme === "turva" || name.endsWith("-turva")) && isTurva2()) {
         switch (name.replace(/-turva$/, "")) {
             case "primary-lightest":
-                return turva2ColorTokens["color-turva2-nude-00"];
+                return turva2ColorTokens["color-turva-nude-00"];
             case "primary-lighter":
-                return turva2ColorTokens["color-turva2-nude-50"];
+                return turva2ColorTokens["color-turva-nude-50"];
             case "primary-light":
-                return turva2ColorTokens["color-turva2-nude-200"];
+                return turva2ColorTokens["color-turva-nude-200"];
             case "primary":
                 return turva2ColorTokens["color-turva2-red-600"];
             case "primary-darker":

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

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

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

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

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

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