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

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

@@ -107,7 +107,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '5b2a34f02ed87be75e3d9936ee3bc5efb2a5d005', ref: element => {
+        return (h("div", { key: '6903bcdb8e3fa5178b6238ccdcf4f028a85a1cf2', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -116,7 +116,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: '1f14a0bf9212299ec43715fa30ca6007d5cf1544' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: '6629dc6968129353f9daa96cc26a4c9f23dc384d' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -278,13 +278,13 @@ export class DuetTabGroup {
                 [`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: '882dd5db21c1a0292fe2ba9acafda0d03cf620bc', class: {
+        return (h("div", { key: 'd96e791cdd488611f7d63128408d9347a290728e', 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: '24e84289ec2cd7a7236b28da392fbaafd75f75c9', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'b65cc9f6446fa3d2f6847a2ace6d9abdfd04b337', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
@@ -295,11 +295,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: 'd3171e77784aba10bb8a27d9611c1bb04139d922', 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: '91e042386356d5c7c7584ee8b93d1b65df78e41b', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'd75584ed1f08a43e27faccc277650413247c10b3' }))));
+            } }, h("slot", { key: 'a3cfe437f448fcaa8baf7c801814da9bf1eb744f' }))));
     }
     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: '52bdb799d5e83d8e2f38a51fb578a2c475b2e883', class: {
+        return (h(Host, { key: '67be51f9c66e5e52789ede10d31aaa34da556e3b', 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: 'dda5e816d883214664bf28678a9be84297111dc0' })));
+            } }, h("slot", { key: 'f20fd89d6078307f21e60a3c772e0719e78a94f7' })));
     }
     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: '84fa1856edf85c2f4266c1fbffc3e4002681aed0', class: {
+        return (h(Host, { key: 'f5f89ec4deb6832fb80b077eca0401ceae4f8bf8', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '1ee2474f35b1b3223bd77e4a370f617ff6671d35', class: {
+            } }, h("div", { key: '36131b2417d7eed326112df08c9736814bc90b8d', 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: '129932c05cc7bd90808342d9da9a7b860843687c', 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: 'f7070a57171efeff0dcb19a6d803282cf7756aed', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '0081e7824998f27ba18eb38a794a7fad1caf44fa', name: "tooltip" }), this.caption && (h("duet-caption", { key: '4ab51bd1ad187a0b47d7b8e54def36f6841491b8', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '64ba93b403939c828d1278aa5a2e53e89ca7634f', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'b974a74933562bc464d72e6cbd901b70dbe9b7ea', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '76f9639838ba65f5662b5be53eeefbb906109520', 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: '80bd838085f0b659858b7229f2db2e75a18cbd49', alignment: "stretch" }, h("duet-grid-item", { key: 'a868c30775a2d39fd7377c9cf5a91013cf92ac39', margin: "none", fill: true }, h("div", { key: '682752ef2d4767af14636641cff2bfe3e0ef1f92', 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: '8fab83fa5eb36ac059e1aa41faa3da8ca1876237' }, this.error))), h("duet-grid-item", { key: 'e9ecf42d53c87bd07da6b8d910ae48ef9c026773', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: 'dbd058fcc26d10405dad2520dcc510b799e91682', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '0b96916a3a51b798c6700adbefde2af8b8d63b8c', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, 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 => {
                 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: '4dd91fdff342a011c53aa8388b70f01a7f3e0718', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '0e3f1033d6ef64744a72dda51f6a5c54754951bc', class: {
+        return (h(Host, { key: '1dd080e2157b99e6fa5b08148203be1318d2b842', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'c75404887077682a10ab2c936730230b67fbfd60', 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: 'f19dd8febb52d804b99366403cf1011facd346aa', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '5ef299e4e8ae4267b78382f32c6c1cf4ddaaef35', class: "duet-switch" }, h("input", { key: '4cb77c516c9fe0d1f251652206308014fa2838db', 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: 'bea5da4c02a844bf4b0f99c813fdc87f0dfe8d46', class: "duet-slider" })))));
+            } }, 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" })))));
     }
     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: '7aff9d26246442226a860046ad6d014a08aa6c76' }, h("nav", { key: '19079cdb9549232dfdc702fd977e2849ee79e8ca', class: {
+        return (h(Host, { key: 'd09fa625eaa0a62a319e2ce34e24dfd33007b353' }, h("nav", { key: 'e0cefc23438745c64618d52fb2a7a842f65a8087', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '7ee83aa822b796e1a53cae7ffc125f1fea77ae9f', class: "container" }, h("div", { key: 'bcb6e4c5697022626e667668e278c87345b27818', class: "list", role: "list" }, h("slot", { key: 'ec7431ce75918e738428ea84df15b37b0d677a1a', name: "left" })), h("div", { key: '63383dea0804d123a38543cd5f24155f39aac829', class: "list", role: "list" }, h("slot", { key: 'e1743a0c9c978c06a7728d32af604ed2754ddb0c', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '0f9047f89f861b03b53c9f7b24c975af3a846f0e', class: "container" }, h("div", { key: '3476fceb8e8be124a473f4c959763c1da9aa27a5', class: "list", role: "list" }, h("slot", { key: 'a18d367ca5aa63a9dfc969e3b6951bb63e45d1e9', name: "left" })), h("div", { key: '6cc9f7958b933bc2ccd91b9d4711c0b4a446b469', class: "list", role: "list" }, h("slot", { key: 'c850cff27a2b664300cc468c5bc255cb030db51c', name: "right" }))))));
     }
     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: '5540d826d84a55649e5e1d0983101fce6b134040', role: "listitem" }, h("div", { key: 'e422eebb802623388c5bb3873b5628911679d71a', class: {
+        return (h(Host, { key: 'fa64118228a1c141fa9456b15e614613ed5ec29a', role: "listitem" }, h("div", { key: 'cbb037e5087481045cd3563c550d870e882cbd87', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '25841febc4f2bf11f2999831f19f4267670f8072', 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: '7f6abecc182ebcbc6f1942de14c523846750119f', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'ee1e081d6757bcdf3133ce26b8cad180bf4a5c2a', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '434f1dfd94a6f6e32057d94b6a96bcd905742c43', class: "label" }, h("slot", { key: '34b373e6759fbb6c7e883dcf12c195ca4a38a4f4', name: "label" }), h("duet-icon", { key: 'f2e8cd5e94ddbe31dbe36f6dcfa9779b3afd8898', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'a0b47c74a997bafa871bf2dc15df2ec8de554531', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '35525346c9e8c24119fafa21f73438e99c74e17d', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'df334ca08fccecb1daaaf2e84b3a4c1fc355e3d5', class: "label" }, h("slot", { key: '4ff5128d48d41cf7dae8bd1a6fc59b134621fc02', name: "label" }), h("duet-icon", { key: '5292898bab697b524543d9a6285ba7a1d88f01d2', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '980dde4c37021bfff8c9f0d82efe3b647807f2c6', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'b155986089c44579afd4fe1c5ec3b25356d9a5fc' })))));
+            } }, h("slot", { key: 'de67c7723de372d3250c9933a1572f329b32314c' })))));
     }
     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: '769b1e1b185c93454e931c3e51fa1ea3a48d4b55' }, h("a", { key: '8341038a790d2a21afd084a4b4d7d177a4d86204', class: {
+        return (h(Host, { key: '2bf85e25fb52ce14c4379309850230fa5763014f' }, h("a", { key: '6ae67ccccb29c4daac6b2b107a2b6c1ff9b1d554', 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: 'e9531e1ea659e6e00c31f603fc24339469547e87', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '473174db55c41f8ea41aff89541d9123da486469', class: "label" }, h("slot", { key: 'c3a86fc29a9a9cf20c715b184795d2d8a9f4c95a' })), this.active && (h("duet-icon", { key: 'cef1ee81e4f2b59b405e77cd51e53fe0ccc390c9', 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: 'ffde6abcd4d9e925623445cacf0c5996c4b35a20', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '24d31392d95a52029a75119c3f835e4915d214c7', class: "label" }, h("slot", { key: '920ba82ac8e9c23acff11015c9ba336cc4a699e0' })), this.active && (h("duet-icon", { key: '2b6f96f89947c64504220ce22f347aaaac32d7b1', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,17 +86,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'ec86ba2465fe76a65d80d7a52553e273d064ed77', role: "listitem" }, h(TagName, { key: 'afd7261efc6be227f86875eb25d7d1c26e58ea76', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '162cf805e05ccc2afbe436132c6eea801ade6d91', role: "listitem" }, h(TagName, { key: '56ade7a57f34340591df7e1b040a8478de805ae1', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "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: 'dc119bc9a12507b87b8a375baacc70675cc992f9', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'f1c50c83ecf964d56a1cda05ea0401974b9c7c02', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '430286e1e31296e2d07169ec164870d74c7d8628', class: "duet-toolbar-badge" }))), h("slot", { key: '4db049840c10f1139836bae10c40c60ee0bc4173' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'dc737e1c43a2b7143ab917bd8668ada9114352c2', class: "duet-toolbar-icon" }, h("duet-icon", { key: '050b121bc59671d5bc0e763fd6088c26b4554616', 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: '5ad00f6ebd929f86345eff8d567dca3c47e6b724', class: "duet-toolbar-icon" }, h("duet-icon", { key: '7d876e02c1fa8c0702f497487fdc63fa28c9f19c', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'c23c6b7e24652198ee4bfa23b83dbbd769238ef8', class: "duet-toolbar-badge" }))), h("slot", { key: 'e8e49955cbcee9ef19d74bb6a2bbe315504dd54e' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '89abb2ae15dad5cc0775ffe3e432be5e35f20751', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'dcd41089541238143d30e109bdc28c6b03c20cbb', class: {
                 "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: '7eca984af7467f210857ca876374d69840d1b3be', 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: '0cfca44b60f68a885d83b230411954dc5fc42b5e', 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: 'c214fa4fa47b5c8073b9407dfc1822c0edf03365', role: "listitem" }, h("a", { key: '69c83eff8cd8e1241877496ee6e8eeacd62e7b0f', class: {
+        return (h(Host, { key: '3892831234a833b4a247d3de3f9a66c30135e5a2', role: "listitem" }, h("a", { key: '7f8a8e206d7775ed92ab5936304cc4c4aea4147a', 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: '38796101a4e6e08f1a5987db11a0a7c633399280', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '1c477d047a03d6bfa6360adb614c98d663129014' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '8c58a04f9ee135ee12d4b32aee1c43d5b0e9f18b', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'c6a1605ebb2b6d099a87e430792730aceeb9230a' }))));
     }
     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: '05cc9ea78b5caa093266a90d400dd3ca8cb0a70a' }, this.accessibleLabel);
-        return (h(Host, { key: 'ff8839a4986d0f80a371aacad148802b726c9b7b' }, h("button", { key: 'c70ec530311c5c4b4b19b72b0582a72ff5469103', 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: '70a82f2c22f0f4f4550e15b1e7ec8c526e3c122e' }, this.accessibleLabel);
+        return (h(Host, { key: '19556e89ed879d642f95db9e14dfe6350af14858' }, h("button", { key: '2b2fab3108b3575da91c00ad81a763d776476b28', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "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: '55c98f94be074132bae914e0ca5a13b851d0ec68', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '649c4954b5edc720fab6cb124f4d2bedb5386f75', 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: '96b5fe3105c8c06b1be575b7c53f9ba6a65d3f25', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '1094160bd88a4af58a048e1588cc51cdeae17e21', 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: 'b665bf9fc4f777eed4e4e152c394adce11fc4f4e', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2f25f9fefa3c82c6f182507c79d3a9cf904fa009', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: '2b0bea40ebef849a5faf6958f2d6da457180eaa1', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '44744f79a997b131473388d0e02347277d04c42e', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label, visuallyHidden)) : (visuallyHidden))));
     }
     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: '38a05ef584ad3a6f76b895d5226168459aa4d7ed' }, h("div", { key: '3acf325a340b4d6c7d5671b3c0a1be7c6405963e', class: {
+        return (h(Host, { key: 'cf44855d08d69141e629987f9ba2fdccdcdc21d7' }, h("div", { key: 'bf7580b8ecdf58b6c93c3c21cbb362234cc699b4', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '4e618b4a36c888d88f7b705c5ed7a6ab2c24c14d', moveFocusTo: this.buttonEl }), h("div", { key: '90d30e1d5b9c73a680fa46f9f7b0d798024cf101', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: '1cadc7dc0c62bb384bae2bf22958897f4babceca' })), h("div", { key: '7d72b927a2531d17e14ab6d11ce6ec53b9632142', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'bde1edfe4b17531fc6aef3b374e2f0f6ba7dd295', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'fa7ea20f79a9bcd9106fbb0825388b792f45ed10', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'feec33ea5ec335bc8d0fbbcdf1ac00884915fa0a', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '65be9c72dc5e078c86b89128ac9938cb14aaaffe' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '4cc06f2205100dae0a706858961d7672d8769c67', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '6f5a516e23035e8e0b9c2951ef4a10243b564d17', moveFocusTo: this.buttonEl }), h("div", { key: 'c41a0c3b305e6b7a2378ef026e62cf2317dafbae', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: '52b6fdbfbdcbcc8862deef3747e757c264d3ab48' })), h("div", { key: '0d4dfae3f19140c33f0f3fb3d809fb4040709482', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '7d6908f726db2eccbc469cd001f90eda504f2a81', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '781903abe2564af32ae934ac36932d472c0f931a', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '093d2ef20e77164379ca8fbd684c8df2a3b1b2a6', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '75dd3160901c07c32af93259975321284e62bc90' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '9f838f645eff92ea829befb3acb4816d160179f3', moveFocusTo: this.contentEl }))));
     }
     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: '25b30f52b9228f2b1f491ac1ae9e7cccb13d9223', class: {
+        return (h("div", { key: '4feb3ea8d6067ec6d82c6eaf9225fe6728bd4acc', 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: '86a467458eb8db95a6503803b9dd24c399851660', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '51e8e98c56b2206ad76159ea583d3c8a47577a84' })), this.hasAdditionalContent && (h(Fragment, { key: '1af8d079300d83275a748a4d39c66df0359fffaf' }, h("button", { key: 'e396a480a4b510e1d73b5e0872a539dfd2574917', "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: '786f854314041bcc60b7154f403906c883d1c561', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '5c483e2f74e6a66db9aecb1fdb41fc8f70417616' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'f126e8fcf670d21af39c059819262c94743698bd', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '234320206dc11a982e5aa5c3ce150fe2b8513658', class: "duet-tray-expandable-content" }, h("slot", { key: 'c1296cede298062c1b6d2c7e80a5bd34c428a166', name: "additional" })))))));
+            } }, h("div", { key: 'c51904bcc9f3d0297da08c32952be7ea690bafc8', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '52e8b11bdf354f65b34fb1d6d2facbf636a01758' })), this.hasAdditionalContent && (h(Fragment, { key: '86e6560df02094fcc7b7df9146c34c47923d89eb' }, h("button", { key: '000c5472ff2f7f1a0ffe6e796817a51fcaecd856', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '02489a52896b40ce4916a3b6dfcdd40d36212251', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '866528d950899fe557f6023f8f9ca79e9545fd15' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'c3400e3dda10617ffd45395e46247ef88a2157a8', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'f2176a2e171dfae93254cba98d31e13855c3b0e5', class: "duet-tray-expandable-content" }, h("slot", { key: '21d7e1276815c885a9832fcdb87ffbd96fe8a03c', name: "additional" })))))));
     }
     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: '67ce8650ccb26f83672ee2fb0979922345e249d8', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: 'a66f32471d548c1594f3449f4161b6f1cc3fa234', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '9963433f43a7bea142953a31fe6ce164c4e5efd9', name: "header" }), !this.files.size && (h("duet-empty-state", { key: 'e0f03edb638ba54d5aed32a75e662211d3d28536', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'ee372985736bd818f9c0737dcff99be64400350b', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '643675366e8eb41765b17b55ef917923a461a5f0', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: 'f1c91849239849a81f2ca0dde5f212c92c37616d', 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: '96de7e0e22163d2ca2ae2b021e640106e5b106df', name: "filefooter" }), h("slot", { key: 'a933faf918955b63fc45dce2f41e66273619ad2c', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: '0eb366857d00fa343ffc03932130074341dc31ed', margin: "none", size: "small" }, h("div", { key: '4dc82344413749ac68ec2c7557d5b657a043e447', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'ad8ccf3d4dc404d433550064db9a0f205c8280cd', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '6e1cd511cd1da85e556615ab7a28838a10cf7d23' }, h("duet-spacer", { key: 'b7a07bd13eafacb3e2aad658755bc282affe7f81', size: "large" }), h("duet-button", { key: '44a60488620305572bbc9ea3ffda9e0b79fad785', 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: '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 ||
             this.bytesMaxReached ||
             this.filesToUploadExceedsLimit ||
-            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '8f34a26b171ec21a97576f2b17e583f3e5a48483' }, h("duet-spacer", { key: '36d4412df03357e5e5f7a524ee121ca4da542d8a', size: "medium" }), h("duet-alert", { key: 'c474907bef968ec6c5e3b0be9ddd185d91681bec', 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: '72a6a7bb529c1c5779ff1757109a6c4c70bdf0c3', "aria-hidden": "true" }, h("input", { key: '6a516877ca4b9d6bce4aef70af3673f92f15150f', ref: input => {
+            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.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: '796d8589e49778ab5baa4b710663ab3c9e6cc64e', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '41377848effb06b8af1e8ca0e1c4654ad54af61a' }, this.statusMessage)));
+        return (h(Host, { key: '2084d67e27f201170cb0915e97235481a8f42ff6', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: 'f774f8926c1f2500866e4b50781cf83a1263b0c2' }, 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: 'fac8ea3d6872d5b6f123df5030959ad629654733', class: {
+        return (h("div", { key: 'd5e5d2db3667a4f6011411a27fef2f9b45108f8e', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { key: '0b051a0b3da66a4775a4d01d9c47a15613795263', class: "item-categories" }, h("duet-heading", { key: '88eb1bd91f7c72342609fed5104295d2fb9243b1', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '681f140acd44639a2924a528cc2ace96f22c6c09', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '099ae53872abc0e85e1d5817201aa3f2fa7b5a62', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '39e32c056e631a2217d05ed9c7cd001217bbf046', class: "item-actions" }, this.actions.map(actionItem => {
+            } }, 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 => {
             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: '698e0c8e15e0429422835dbb99c1152cb6c07e98', class: "duet-visually-hidden" }, h("slot", { key: 'de50c072e8544e08de3f0d2766be1ba7c918c0db' })));
+        return (h(Host, { key: '2ac2536c5fb762954d328da1080105d92292c8b4', class: "duet-visually-hidden" }, h("slot", { key: '4f58c2bdca5f9d629586174be225448f22662155' })));
     }
     static get is() { return "duet-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,8 +2,16 @@
  * Built with Duet Design System
  */
 import * as tokens from "@duetds/tokens";
+import turva2ColorTokens from "./turva2-color-tokens";
 const allowedThemes = ["turva"];
 const MATCH_CAPITAL_CASE = /[A-Z]/g;
+function isTurva2() {
+    var _a;
+    if (typeof document === "undefined") {
+        return false;
+    }
+    return !!((_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2"));
+}
 export function isCamelCase(str) {
     const camel = MATCH_CAPITAL_CASE.test(str);
     const barredString = !str.includes("_") && !str.includes("-") && !str.includes(" ");
@@ -54,18 +62,62 @@ function addTheme(str, theme) {
     }
     return str;
 }
+/**
+ * Add "-turva" to color names (or "Turva" to camelCase color names)
+ */
+export function postfixTheme(name, theme) {
+    if (!name) {
+        return undefined;
+    }
+    if (["", "default"].includes(theme)) {
+        return name;
+    }
+    if ((isDashCase(name) && name.endsWith(`-${theme}`)) || (isCamelCase(name) && name.endsWith(capitalize(theme)))) {
+        return name;
+    }
+    if (tokens[`color${camelize(name)}${capitalizeFirstLetter(theme)}`]) {
+        return !isCamelCase(name) ? `${name}-${theme}` : `${name}${capitalize(theme)}`;
+    }
+    return name;
+}
 export function getColorByName(name, theme = "") {
     if (!name) {
         return undefined;
     }
-    const defaultColor = convertToColorName(name);
-    const themedColor = convertToColorName(name, theme);
-    // lets just try to get the color first to save some cycles
-    let resolvedToken = tokens[themedColor];
-    if (!resolvedToken) {
-        resolvedToken = tokens[defaultColor];
+    if ((theme === "turva" || name.endsWith("-turva")) && isTurva2()) {
+        switch (name.replace(/-turva$/, "")) {
+            case "primary-lightest":
+                return turva2ColorTokens["color-turva2-nude-00"];
+            case "primary-lighter":
+                return turva2ColorTokens["color-turva2-nude-50"];
+            case "primary-light":
+                return turva2ColorTokens["color-turva2-nude-200"];
+            case "primary":
+                return turva2ColorTokens["color-turva2-red-600"];
+            case "primary-darker":
+                return turva2ColorTokens["color-turva2-red-700"];
+            case "primary-dark":
+                return turva2ColorTokens["color-turva2-red-800"];
+            case "secondary":
+                return turva2ColorTokens["color-turva2-gray-900"];
+            case "gray-lighter":
+                return turva2ColorTokens["color-turva2-gray-00"];
+            case "gray-light":
+                return turva2ColorTokens["color-turva2-gray-100"];
+            case "gray":
+                return turva2ColorTokens["color-turva2-gray-200"];
+            case "gray-dark":
+                return turva2ColorTokens["color-turva2-gray-400"];
+            case "gray-darker":
+                return turva2ColorTokens["color-turva2-gray-500"];
+            default:
+            // carry on to old turva colors
+        }
     }
-    return resolvedToken;
+    const defaultColor = convertToColorName(name);
+    const themedColor = theme && convertToColorName(name, theme);
+    // return themed color if it exists
+    return tokens[themedColor] || tokens[defaultColor];
 }
 export function convertToColorName(name = "", theme = "") {
     let colorResolution = name;

package/lib/collection/utils/turva2-color-tokens.js

@@ -0,0 +1,42 @@
+/*!
+ * Built with Duet Design System
+ */
+const turva2ColorTokens = {
+    "color-turva2-red-00": "#fff2f2",
+    "color-turva2-red-50": "#ffecec",
+    "color-turva2-red-100": "#ffe5e6",
+    "color-turva2-red-200": "#ffc9cc",
+    "color-turva2-red-300": "#f9a4ac",
+    "color-turva2-red-400": "#f37785",
+    "color-turva2-red-500": "#ec4560",
+    "color-turva2-red-600": "#e61740",
+    "color-turva2-red-700": "#b90329",
+    "color-turva2-red-800": "#8c001e",
+    "color-turva2-red-900": "#600014",
+    "color-turva2-red-1000": "#33000a",
+    "color-turva2-gray-00": "#f5f6f7",
+    "color-turva2-gray-50": "#e4e9ed",
+    "color-turva2-gray-100": "#d4dde2",
+    "color-turva2-gray-200": "#b2c2cd",
+    "color-turva2-gray-300": "#94a9b9",
+    "color-turva2-gray-400": "#7891a4",
+    "color-turva2-gray-500": "#5f7a8f",
+    "color-turva2-gray-600": "#48647a",
+    "color-turva2-gray-700": "#354f65",
+    "color-turva2-gray-800": "#253c50",
+    "color-turva2-gray-900": "#172a3b",
+    "color-turva2-gray-1000": "#061726",
+    "color-turva-nude-00": "#fdf7f2",
+    "color-turva-nude-50": "#fbebe1",
+    "color-turva-nude-100": "#fbe1d1",
+    "color-turva-nude-200": "#f1cab2",
+    "color-turva-nude-300": "#d8ae96",
+    "color-turva-nude-400": "#be937c",
+    "color-turva-nude-500": "#a57a65",
+    "color-turva-nude-600": "#8c624f",
+    "color-turva-nude-700": "#724c3c",
+    "color-turva-nude-800": "#59382b",
+    "color-turva-nude-900": "#40261c",
+    "color-turva-nude-1000": "#26150f",
+};
+export default turva2ColorTokens;