@duetds/components 8.6.8 → 8.7.0

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

@@ -96,18 +96,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: '6274bd7a43f80db2274aa70401a0979067b14241' }, h("div", { key: 'a95830e26ac5c8582f6ee246f8b6aff6b584eab8', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '46b70084564934de7aa1ebd31450d3d8d801f58d', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("span", { class: "label-text" }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '93a04cbdf0406484e6f0ef74b091c2a81a5d79dc', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'da16606583842ba541aaf2635d86d3c144505822', class: "label" }, h("span", { key: 'b19e1dc0a7c08dbac4ba7934d7a963f97ff94a32', class: "label-text" }, h("slot", { key: 'f4e2bd0d75166f51371bd798c1fbf823f67b4e1c', name: "label" })), h("duet-icon", { key: 'a2ef8e75498bbfa0c0386c14a9c85d756f8ba7a8', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '6a8277495e4af7f750246f736ea4c6873a038bf8', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", null)))));
+            } }, h("slot", { key: '645c0c44b00a3a1ab2e78dcdc24b1369bb972251' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,12 +31,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("a", { class: {
+        return (h(Host, { key: '8a0279e899342bbb7cc78247029e3da1e26999aa' }, h("a", { key: 'dfb0b766d70ed1587460ca994f7d28fa589db2ba', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { class: "label-container" }, h("span", { class: "label" }, h("slot", null)), this.caret && h("duet-icon", { name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'e613bd775722dd99bfa920d878fadc7646894db6', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'a5dfde043611ce5a4d476034060128f2d66780a9', class: "label-container" }, h("span", { key: '270a140045cb7dcb5ee905637d02911176a406bd', class: "label" }, h("slot", { key: '800e324290857b3cbaccb445b8448bf78c22b953' })), this.caret && h("duet-icon", { key: '11aa7d0d718eb54806fd3449ea16eb215a2c8541', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '9256bee51ada54db092568c6c9bf3571b809b66f', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class DuetSubmenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("span", { class: "label-text" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { class: {
+        return (h(Host, { key: 'abe5b5537a889effe530e1f9deac5c5ffb7db97e' }, h(TagName, { key: 'dff0dcda980df21651e61f17bdbaf3ff043f74d9', ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: 'e11c2d8c80c483df7b879b509d830a795ae394c8', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '21349526758d043bef848e13088afd921562d7ab', class: "label" }, h("span", { key: 'c4d410336df73a2d7e604015f4d914ac48095341', class: "label-text" }, h("slot", { key: 'a33084f99de5cc4cbe1bda98368802c7de6c8108' })), this.trailingIcon && (h("duet-icon", { key: '65d46ca91857c91355a419ab5d2229df633b5f6f', class: {
                 "trailing-icon": true,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,

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

@@ -29,7 +29,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { class: "label" }, h("slot", null)))));
+        return (h(Host, { key: 'fdb4bda5a30e6c5018bc3636e2381a56ee01e4e3' }, h("a", { key: 'd9f4e02a83f4f6878c7cb31d2201e3fd4150d580', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: '59193a693a585ccd29d06c85088e9fdc67bca422', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'f0cd7c856a0f000e8d7e205d1a414454a0683d17', class: "label" }, h("slot", { key: '4ad4ae7537067cc17a906b7c2ddcabe9a278aeaa' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -203,27 +203,27 @@ export class DuetTabGroup {
     render() {
         const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
         const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
-        return (h("div", { class: {
+        return (h("div", { key: 'b25c23e9c7e9a3e5a6b522e1c200b651fb35225f', 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": this.scrolls,
                 "duet-tab-group-collapses": this.collapses,
-            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { key: '8c1717c42f63f55fd0e66c2c981076fb7ebb822b', value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
                 return { label: tab.label, value: index.toString() };
-            }) })), h("div", { role: "tablist", class: {
+            }) })), h("div", { key: 'e269e1dc5913d6d656634c19dfea91594c17a635', 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,
                 "duet-tab-group-collapses": this.collapses,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.renderTab()), h("div", { class: {
+            } }, this.renderTab()), h("div", { key: '331c2d4ec2fdb88caa5f3c0057e81292d86028d5', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", null))));
+            } }, h("slot", { key: 'a78e9aa86f7c03563db3d43eeb30e20845b0a043' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'ab8dd44a4ed7d49de8ad2f11150455407c8d3a80', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -122,7 +122,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'fe9ea56f8b1567513f3efdf1be6dbd5723e56f6e' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

@@ -25,7 +25,7 @@ export class DuetToolbar {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "default";
-        return (h(Host, null, h("nav", { class: { "duet-toolbar": true, "duet-theme-turva": this.theme === "turva", [variation]: true }, "aria-label": this.accessibleLabel }, h("div", { class: "container" }, h("div", { class: "list", role: "list" }, h("slot", { name: "left" })), h("div", { class: "list", role: "list" }, h("slot", { name: "right" }))))));
+        return (h(Host, { key: 'ca4c2dd159af6a75a64fd4559da9c58fa889abab' }, h("nav", { key: 'b895cd71a3eb9c5c5b1e6057b81571e64d5059dc', class: { "duet-toolbar": true, "duet-theme-turva": this.theme === "turva", [variation]: true }, "aria-label": this.accessibleLabel }, h("div", { key: 'ac696254f9a32fd837a9e3484d08e70648880ca2', class: "container" }, h("div", { key: 'a37926ca410b7d7cc8c78418511d8c5d05338d8d', class: "list", role: "list" }, h("slot", { key: '37bef6b5d253fe695bcf4bcfa9d277b616b7b98d', name: "left" })), h("div", { key: '3b42c69dc892c874ab6a2d737a50bc8fff4c730c', class: "list", role: "list" }, h("slot", { key: 'a1b11f4b740034718086be5efecf2353ca2389a5', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,18 +50,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { role: "listitem" }, h("div", { class: {
+        return (h(Host, { key: 'b1ab90e367e74581bb2bbbbab3efca4befdb65af', role: "listitem" }, h("div", { key: '8f911bb057a0b128bca7d7fe7d9c864fe0123f6a', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { 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: '250463f2bc27b86116406c9cc94ac3a0b2ad3dad', 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", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '79bc60e4e8e87082abce55cb552bf6ec5653bf13', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '58325e1fe660100b8e5bfb0406b039dbe6dd12a2', class: "label" }, h("slot", { key: '0e268220c2af6cbe5336502e28f4b1bd2231fda4', name: "label" }), h("duet-icon", { key: '29849c94518deae5dd1be0f1e16aff39f380aad1', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'e3b7ce6dbf6f1c38a9859f90b91ec3036a458b8a', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", null)))));
+            } }, h("slot", { key: 'c864869cbf3ac102fc2f72966bec15e294e68fd6' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("a", { class: {
+        return (h(Host, { key: 'c348732450775e0dcf44a89feb7cdb439517a1a1' }, h("a", { key: 'e4e1d391e62fdcf6a9174a44a43a60eae30424b5', 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", { name: this.icon, size: "x-small", margin: "none" }), h("span", { class: "label" }, h("slot", null)), this.active && (h("duet-icon", { 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: '518f648837a592671dcb151d34fddd9fe1d1bddf', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'ec4f57aad2690c2f393b10be6b97f3dc51923c49', class: "label" }, h("slot", { key: '606e746c11057f4b6fe522c72fb46ef812f09cbc' })), this.active && (h("duet-icon", { key: '06b05bda87ec401f58c37ebb227bf5d79dfce23b', 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

@@ -34,12 +34,12 @@ export class DuetToolbarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { role: "listitem" }, h(TagName, { ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '3e9682df2c32801eb6fe762073f655878533b2e9', role: "listitem" }, h(TagName, { key: 'bdc5ace05432994caa73e7262221cd8090b6f635', 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.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null), this.trailingIcon && (h("duet-icon", { class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: '8c263b1162d7042f9e0a128d7bc301ce3642bd22', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '4e3476e70043cf9f4abe7e317f2d59ade87e40e5' }), this.trailingIcon && (h("duet-icon", { key: '0d0effa4d7022a1737bf0cc9f7ec5c6931f11cc5', class: {
                 "trailing-icon": true,
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
             }, theme: this.theme, name: this.trailingIcon, margin: "none", size: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : "x-small", color: "currentColor" })))));

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

@@ -24,12 +24,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { role: "listitem" }, h("a", { class: {
+        return (h(Host, { key: '0b1b75540b0e76392ccc42744e179a500cd3d7ad', role: "listitem" }, h("a", { key: 'f010c63eaddd157e787951cea81ced2d0ab61957', 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", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'f6a372c0c34607f1a8e87dd710c371e61e356e2e', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '341984fa0638ea8b79c0ff55a679d673a34b6376' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,11 +38,11 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("button", { ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, { key: '5c2bf987bfba5d4b7277cf6680df0901d66b557f' }, h("button", { key: '123177d53f166dab9aafb3afe6ef7f8d6fd83bfb', 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",
-            } }, h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", { cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { 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)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
+            } }, h("svg", { key: '0b04ba67bc365f18ead61cebb4b50e779e8779d1', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '912d6476f67026dda8ad23093d3e4db76afe5b60', 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: '7d8dfe057c870df330dbd26cfdc5c1f6c3e3c632', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: 'cff746a9eb12f439da3fe2469a716631939bd69a', 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)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
     }
     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, null, h("div", { class: {
+        return (h(Host, { key: 'dc3ca4ba9ef2e919f83aca37e6341ff34395ffaa' }, h("div", { key: 'efb0386ce9c7b976bf65aaf785540fcb5f0b719e', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)), h(FocusGuard, { moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: 'd8932d7ddac08d3429c7972bfbebb070cb083f71', moveFocusTo: this.buttonEl }), h("div", { key: '3d89efd0dfe21334173ae7141616a955439eb2c6', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: 'ae21e55ab3bfb1a25eb167c1a598a264a3568121' })), h("div", { key: '88166e6bc68a62d6df21ed962d0a5a192fe27aef', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '27ec390ca052f884a69fd761d9196d29832c9160', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '21e54548f177faa13933fe6617e1ace266255d9e', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '9f1ac2403232e6aca7d25bf48b8b63632bd7ca2c', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '429898e8fa996f763fd5baf735a9b0b5301582a3' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'd42579384165f3d801045c761412e5d620103489', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,14 +87,14 @@ export class DuetTray {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { class: {
+        return (h("div", { key: 'd886cb2bdb30f527fc0cbcdc7dfdc037b7957445', 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", { class: "duet-tray-default-content", role: "status" }, h("slot", null)), this.hasAdditionalContent && (h(Fragment, null, h("button", { "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", { name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", null, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { class: "duet-tray-expandable-content" }, h("slot", { name: "additional" })))))));
+            } }, h("div", { key: '4dd01b50a8b2a1193f482ff2d6ac8faad8844598', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '3b394a2c46dd52ace13372c021386695537e45a2' })), this.hasAdditionalContent && (h(Fragment, { key: 'e1ae4eb82fddc625d018fc625050095693a0cb39' }, h("button", { key: '64946a1df75ff28b45edaeb6989365b78fa18a01', "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: '15a329f00635b0a11dbcbfaab77c075006b4368d', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'b8a54bd169d936630907459d979f5f3d812e234f' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'b70a810a085e145d87d016daf31481e720cff3be', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '06a8e71c2b515c185e842f8d98c1bbb7a8d77248', class: "duet-tray-expandable-content" }, h("slot", { key: 'a4110b6fc431f61dafec49fddcefa9802b28bcc8', name: "additional" })))))));
     }
     static get is() { return "duet-tray"; }
     static get encapsulation() { return "shadow"; }

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

@@ -753,10 +753,10 @@ export class DuetUpload {
             this.externalUploadButton.accessibleLabel = caption;
         }
         // @ts-ignore
-        return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { 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", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, h("duet-spacer", { size: "large" }), h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "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: 'fbb23e4c7dafe25f609164ab839dfe2b773e4656', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '06b9887702d76107263650313313f1a9d0da18e1', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { key: '09d08704944030cfcf9577d1e9ff5743530cb087', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '9455c1f4ec1c6f23ec1d005aa6aa1f0c902ea6d5', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '33c49028d666ce29fd441817062f5fce1d5d87df', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'ec41dfe1c379d717f4514d819118e8484feadc61', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: 'ba56e1700f6254c05f0aeebded23eb071c2712a8', 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: 'c751122858e240739f4a439b89f9ff7f7603ee65', name: "filefooter" }), h("slot", { key: '44add8b2fd77cb942db72bd83cad90cab6e3b83a', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'b788d8ba602fe61da7ff8c06509ea0521027082f', margin: "none", size: "small" }, h("div", { key: '905be51cf09c625bd19737b9fa28c85f7911a2a4', class: "upload-bottom-caption" }, caption))), h("slot", { key: '2da304d7094152a7c38607af3d74d5d8b076c711', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '74cc919f60e229c4fa1f7f8f4472c2d5cd731a6c' }, h("duet-spacer", { key: 'f60c7893de953a3551e5f0b826bc34510e205d42', size: "large" }), h("duet-button", { key: '20792f561a4a6b35ea120d6f24d5e6e49e366c7a', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "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, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { 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", { "aria-hidden": "true" }, h("input", { ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: 'dd237b355a77db2eb3c3a6bea07eae884ffce4ca' }, h("duet-spacer", { key: '0ecfd226ae4a1b30e1a3598848327c9e7d1d6cce', size: "medium" }), h("duet-alert", { key: '45e1d585869c782cd624d6c6c8bf93e819944980', 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: '3783514ca6994a7cabf2f2027c7a61f8147e633a', "aria-hidden": "true" }, h("input", { key: '6e79027a037da18e89b2dbebdb6ce3d750d11c3b', 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/mock.helpers.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import errorCodes from "./errorcodes.json";
+//import errorCodes from "./errorcodes.json"
 /** list of mock File elements to pass the duet-upload component */
-import { getI18nError } from "./errorcodes.utils";
+//import { getI18nError } from "./errorcodes.utils"
 //mock functions to show uploaded file state
 export function getBrowsedFiles() {
     return fileListFromArray([
@@ -88,8 +88,10 @@ function fileListFromArray(files) {
                 ? undefined
                 : {
                     type: obj.error,
-                    message: isValid ? undefined : getI18nError(obj.error, errorCodes),
-                    system_message: isValid ? undefined : getI18nError(obj.error, errorCodes),
+                    // todo: commented because test run failed message: isValid ? undefined : getI18nError(obj.error, errorCodes),
+                    message: isValid ? undefined : "error",
+                    // todo: commented because test run failed system_message: isValid ? undefined : getI18nError(obj.error, errorCodes),
+                    system_message: isValid ? undefined : "error",
                 },
             progress: 100,
             deleted: false,

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

@@ -64,7 +64,7 @@ export class DuetUploadAriaStatus {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", null, this.statusMessage)));
+        return (h(Host, { key: 'f107e96e1a039ff07fa07dc6d45a85240bf183d0', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: 'ea0da6ca5f4f40aae2f60f49249bbdacbc41f0aa' }, this.statusMessage)));
     }
     static get is() { return "duet-upload-aria-status"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,9 +80,9 @@ export class DuetUploadItem {
         const { uid, meta, item } = this.data;
         const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
         const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${item.name}`;
-        return (h("div", { class: {
+        return (h("div", { key: '07ddbef4ef21f02175a48736e7983a83f4b190c7', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { class: "item-actions" }, this.actions.map(actionItem => {
+            } }, this.showCategory && (h("div", { key: 'e93b519ef05ae75e0a86921fb6c56cb88407adb0', class: "item-categories" }, h("duet-heading", { key: '909a63e46f15c131d51e4809d19532a05aba87c3', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '10abceff20a434e7283dac07783f7de001b191f9', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '719f0550088c559e3361a0895c3613f6a6782379', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '1e69b28960cba2a5fed18fe09d2ea3be1925dfeb', 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) }));
         }))));
     }
@@ -312,7 +312,7 @@ export class DuetUploadItem {
                         "EventEmitter": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::EventEmitter"
+                            "id": "node_modules::EventEmitter"
                         },
                         "DuetUploadEvent": {
                             "location": "import",

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, { class: "duet-visually-hidden" }, h("slot", null)));
+        return (h(Host, { key: 'f52a0f31eb6101aee09189a09309b91db035a564', class: "duet-visually-hidden" }, h("slot", { key: '49647fc127fd4b69e0a7f668d7ff87337ba33d9e' })));
     }
     static get is() { return "duet-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/utils/axe-core-utils.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { createPage } from "./test-utils";
+import { e2eTest } from "./test-utils";
 const axeCorePath = require.resolve("axe-core");
 export const options = {
     rules: {
@@ -26,12 +26,20 @@ export function mergeRules(axeRunOptions = {}, rules) {
         }
         : axeRunOptions;
 }
-export async function testWithAxe(markup, axeRunOptions = {}) {
-    const page = await createPage(markup);
+export async function testWithAxe(html, axeRunOptions = {}) {
+    await e2eTest(html);
     await page.addScriptTag({ path: axeCorePath });
     await new Promise(process.nextTick);
     return page.evaluate(async (options) => {
         // @ts-ignore
         return await axe.run(options);
-    }, axeRunOptions);
+    }, JSON.parse(JSON.stringify(axeRunOptions)));
+}
+export async function axeTest(axeRunOptions = {}) {
+    await page.addScriptTag({ path: axeCorePath });
+    await new Promise(process.nextTick);
+    return page.evaluate(async (options) => {
+        // @ts-ignore
+        return await axe.run(options);
+    }, JSON.parse(JSON.stringify(axeRunOptions)));
 }

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

@@ -1,39 +1,89 @@
 /*!
  * Built with Duet Design System
  */
-import { newE2EPage } from "@stencil/core/testing";
-export async function createPage(optionsOrHtml) {
-    const options = typeof optionsOrHtml === "string" ? { html: optionsOrHtml, viewportWidth: 600 } : optionsOrHtml;
-    const page = (await newE2EPage());
-    const viewport = Object.assign({ height: page.viewport().height }, { width: options.viewportWidth });
-    await page.setViewport(viewport);
-    await page.setDefaultNavigationTimeout(0);
-    await page.setContent(options.html, { waitUntil: "networkidle2" });
-    await page.waitForTimeout(250);
-    await page.evaluateHandle(() => document.fonts.ready);
-    // monkey patch screenshot function to add some extra features
-    const screenshot = page.screenshot;
-    page.screenshot = async function () {
-        // get the element's height, and set viewport to that height
-        // this enables us to get full page, clipped screenshots
-        const htmlElement = await page.$("html");
-        const { width, height } = await htmlElement.boundingBox();
-        await page.setViewport({ width: page.viewport().width, height: Math.round(height) });
-        return screenshot.call(page, {
-            clip: {
-                x: 0,
-                y: 0,
-                width: Math.round(width),
-                height: Math.round(height),
-            },
-        });
-    };
-    return page;
+const e2eEvents = new Map();
+let e2eEventIds = 0;
+export async function e2eTest(html) {
+    await page.exposeFunction("sendEventToNode", (id, ev) => {
+        const e2eEvent = e2eEvents.get(id);
+        if (e2eEvent) {
+            e2eEvent.callback(ev);
+        }
+    });
+    await page.addStyleTag({ url: "http://localhost:3334/fonts/lib/localtapiola.css" });
+    await page.addStyleTag({ url: "http://localhost:3334/tokens/lib/tokens.custom-properties.css" });
+    await page.addStyleTag({ url: "http://localhost:3334/css/lib/duet.min.css" });
+    await page.setContent(html);
+    await page.addScriptTag({ url: "http://localhost:3334/build/duet.js" });
+    await page.waitForSelector("html.hydrated");
 }
-export function isFocused(element) {
-    // TODO: nice way to get this?
-    const handle = element["_elmHandle"];
-    return handle.evaluate(el => {
+export async function isFocused(element) {
+    return element.evaluate(el => {
         return el.getRootNode().activeElement === el;
     });
 }
+export const getAttribute = async (element, attribute) => {
+    return await element.evaluate((e, attribute) => {
+        return e.getAttribute(attribute);
+    }, attribute);
+};
+export const getProperty = async (element, property) => {
+    return await element.evaluate((e, property) => {
+        return e[property.toString()];
+    }, property);
+};
+export class EventSpy {
+    constructor(eventName) {
+        this.eventName = eventName;
+        this.events = [];
+        this.cursor = 0;
+        this.queuedHandler = [];
+    }
+    get length() {
+        return this.events.length;
+    }
+    get firstEvent() {
+        return this.events[0] || null;
+    }
+    get lastEvent() {
+        return this.events[this.events.length - 1] || null;
+    }
+    next() {
+        const cursor = this.cursor;
+        this.cursor++;
+        const next = this.events[cursor];
+        if (next) {
+            return Promise.resolve({ done: false, value: next });
+        }
+        else {
+            let resolve;
+            const promise = new Promise(r => (resolve = r));
+            this.queuedHandler.push(resolve);
+            return promise.then(() => ({ done: false, value: this.events[cursor] }));
+        }
+    }
+    push(ev) {
+        this.events.push(ev);
+        const next = this.queuedHandler.shift();
+        if (next) {
+            next();
+        }
+    }
+}
+export async function addE2EListener(elementHandle, eventName, callback) {
+    const id = e2eEventIds++;
+    e2eEvents.set(id, { eventName, callback });
+    await elementHandle.evaluate((elm, id, eventName) => {
+        elm.addEventListener(eventName, (ev) => {
+            ;
+            window.sendEventToNode(id, { detail: ev.detail });
+        });
+    }, id, eventName);
+}
+export async function spyOnEvent(elementHandle, eventName) {
+    const eventSpy = new EventSpy(eventName);
+    await addE2EListener(elementHandle, eventName, (ev) => {
+        eventSpy.push(ev);
+    });
+    return eventSpy;
+}

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

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

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-45ce252d.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-8fb1d873.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

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

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