@duetds/components 10.0.0-alpha.26 → 10.0.0-alpha.28

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

@@ -79,6 +79,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() {
@@ -107,7 +110,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'b4bd4852c9b69f58d223d3c9f4abe99b6657eb1e', ref: element => {
+        return (h("div", { key: 'a022a330a4f4eef2664a452c8f0df2b84e46c429', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -116,7 +119,7 @@ export class DuetTab {
                 "duet-tab": true,
                 selected: this.selected,
                 "has-content-id": !!this.contentId,
-            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: '18c22a0a004cf4c7e38b88aaa2abbffcc2145baa' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'fcb609d847cf496ada314f386a9b82dab58a7c19' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -226,14 +229,61 @@ export class DuetTab {
                 },
                 "required": false,
                 "optional": false,
+                "docs": {
+                    "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,
+                "reflect": true
+            },
+            "indicator": {
+                "type": "string",
+                "attribute": "indicator",
+                "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": "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."
+                    "text": "Indicator to show in the tab button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true
             },
+            "indicatorAccessibleLabel": {
+                "type": "string",
+                "attribute": "indicator-accessible-label",
+                "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,
+                "reflect": false
+            },
             "accessibleDescriptionDefault": {
                 "type": "string",
                 "attribute": "accessible-description-defaults",

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

@@ -278,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: '826170daba42dde6a2c0cb9c9a4a61edebe73185', 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: '4726322a99036852035af473957765866d515a41', 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,
@@ -298,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: '76e60e6a65004b9c27f167a8defcab3a326789f2', 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: '184ae2f3e46544c39f2fa28e72941af72e06fd4f' }))));
+            } }, 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: '845e0bcc5bb460928ee219debef072b816e21662', 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: 'f0baf26a61a35e0faf5363a8e7d24e3080af3180' })));
+            } }, 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: '05fd002169efa5a30698c5bcabc292ee2baa6377' }, h("nav", { key: '35cf1fcaa7ebd3fd4eb4c61f80afb95be4111ce1', 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: '3e0a970290f9762ac54ab968bf2fe8e446da4403', class: "container" }, h("div", { key: 'b7145d3c5f00d42208349b2dc6782b88e00d9ec5', class: "list", role: "list" }, h("slot", { key: 'a230928fe78000b31a25459171a45cba1dbdadea', name: "left" })), h("div", { key: '8ed6891a00fb0afe984540e03b5d15a2836ebfef', class: "list", role: "list" }, h("slot", { key: '32d442b55918d5cc5b83c6dd0499433aace9c916', 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: 'ad32c005cc4dfece39976408ec731ad96297e4db', role: "listitem" }, h("div", { key: 'b791f09d2801543fc704d595a30e139a7ff93dbb', 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: 'c77108abfcb29f2fb804ddde58c00f0a4b59838c', 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: '4636794b744877564dfdb08ff12bd10ec0d86ff1', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '8c92356b5a4bbfbc26eb3b061e2324c5a9828d34', class: "label" }, h("slot", { key: 'edc193a859a685dafdb910a5cd10c54f3161e3fe', name: "label" }), h("duet-icon", { key: 'd9e79f77afa7c940153f98fe723ee8b4478a5bd5', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '87f9a96e7c40f3c20063ebe7b1c5bb82789eef9b', 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: 'e9c7f62984e135b28c8b43c0d3aea88f77eb5d29' })))));
+            } }, 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: 'd0137e5350105ae59b5e03faaf4f7d8e7776f632' }, h("a", { key: 'b10ffca862b2d9166b7811e812f3d41d1fc567c6', 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: 'c858922116de7e062ec8af31796174818ad1e4b1', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '78da92d5c6814abff7a08866b6d146571d060656', class: "label" }, h("slot", { key: 'ec452b4938fae6ee2b0b5fab9de4fe87b650366a' })), this.active && (h("duet-icon", { key: 'a28714381b97051e25df09fe6179b430acd51779', 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: '6e4eb217aa669a64d985c1890b1cb1f9e5cbfab1', role: "listitem" }, h(TagName, { key: '50fa9a7295a14f093cbd6141ac54abf11b41d392', 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: '3628348a1512edf58911b056b8568342a366ac30', class: "duet-toolbar-icon" }, h("duet-icon", { key: '42f263d6a3e6afb0a9138f29f26b19031074a3d4', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'b6dade4311e7350ba175e3643dff8b2f59ed52e3', class: "duet-toolbar-badge" }))), h("slot", { key: 'cb85f2d32dd19b24af351cdd9f79ce4fd3fdcd15' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '32f6a2b9bd0da55bb075209fd435080e3f75b74e', class: "duet-toolbar-icon" }, h("duet-icon", { key: '93618bcdd91c8405b3359514bd24ad9dc82d13d0', 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: '5d380d254863d03f5e7df7e07c0bafebfcdf3ff8', 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: '1eabc147aca4fae095ac6d30a02d7945b85d0360', role: "listitem" }, h("a", { key: 'e470e9bab29f2bf9b4d966289dd8aff81faa4313', 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: 'd2847c5bb7219a8910b5389a61e14f72496b3983', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '4d3b7ea36e57824bd934cd1a2bfb7acf6085c522' }))));
+            }, 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: 'd7f9bd7543527fcc24c5a87734b06e433bc4f911' }, this.accessibleLabel);
-        return (h(Host, { key: '7435172c19c5e7415c325ce0f8f1b1318862b284' }, h("button", { key: '99a53c5a669b62ee63d5c00d41d7811b9525af69', 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: '3d843e440d7cfc958e4944d1a49211a8e7d48c5f', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '64cf65349c9b83b6daaebc44f443c460861f28d2', 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: 'd07181ecde0771c63f172097403b65eb419ce832', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: 'bec8531db6c080a8b1ff6a301479aa0c7f49f328', 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: '45c3a95797c3e9c7550a82e6fd60d10132ae8f62' }, h("div", { key: '380cb318509eb85adfef3ce71c6bf6644f0b7b6b', 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: '857a45f310c93184cd82740af4f0f5bf82242f9a', moveFocusTo: this.buttonEl }), h("div", { key: 'bd80a3ab570d36bda9ddfea47e17e64bf917977a', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: 'd8757e126145a0c3672a6cc381ff508c0059ea95' })), h("div", { key: 'f4c5c6a434c572b8e01eb20aa07899c81063cb76', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '2333884d098cbb81583a44504587cf96d6093d30', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '1963817cd01361ba77ee107ac936654ae125f8c0', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'ad35ab147f093a0f4397e284b6d4ee85acace0cb', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '2eadca556e9fe940e0dff808ec02107ebf182c8a' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'afad7dc8804fa5f300a93f9a9497658928adff7b', 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: '4c0914013c1c96e92cdd301499abddf24663af65', 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: 'bd62b82c81cfd1064965c504962df3e1d9cec32a', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'c16cd026132f96e58dcfc44b4047183b2c86b518' })), this.hasAdditionalContent && (h(Fragment, { key: '41e73f4d582af1f87dbcf8178a6139c09df9748f' }, h("button", { key: 'e5529d076bb9bd90a22c6b4fafb8bc42a0b14e3b', "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: 'e58b775cc578dae594f24126e4fb9340e61bf352', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '10826f7f2711529595cfb0a0a2ae7f027e880e07' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '3c71df7f296686978f3d69d5eb2d06c1492d4e22', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '37d4c6199048e02a80d8a84f1d9ea49c921427b6', class: "duet-tray-expandable-content" }, h("slot", { key: 'ff619c71df2d9f7f49a18d82ba0c1aeb0fc24e49', 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: '1517704341df38ba10e11dd0b2094e6bb9eb6649', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: 'b760da550813b4c8ce4a3214aa86707c1cdcf133' }, 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: 'e47f8bed18de6dae30530e82af44fe043d18a5f3', class: "duet-visually-hidden" }, h("slot", { key: '1cb1034114f5c5f5626ede98f1cacfc68a200250' })));
+        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"; }

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":