@duetds/components 8.6.9 → 8.7.0

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -63,7 +63,7 @@ export class DuetPopupMenuItem {
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
         };
-        return (h(Host, { role: this.accessibleRole }, h(TagName, { ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), (this.trailingIcon || this.active) && (h("duet-icon", { name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, { key: '6117171a46a997c303162325d0b92af293a3a5c9', role: this.accessibleRole }, h(TagName, { key: '24ef77094f37e7afcc91b445a6e5c58b82ed379e', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '268d7aa84d1688afe8c5e3646dd7c5619166634d', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '25c35efb455d04d71b66c8766cf375d4ba9869a8', class: "duet-popup-menu-item-label" }, h("slot", { key: '228661a99b2f825c5563bc1779689cc352fd728b' })), (this.trailingIcon || this.active) && (h("duet-icon", { key: '6718babaa66231e6914d33bbef66810bb0f46db2', name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '0d7fffcfc385c0c11045390120f1fcd9f6a4bf67', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -341,7 +341,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }
@@ -362,7 +362,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -53,12 +53,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("aside", { class: {
+        return (h(Host, { key: 'dd179e38966112c037a1a97bf8a2e158915e5bf2', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '904758e37acfcb134dcb8a85937c6959930773de', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "description" }))))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'ce81250935a84ea5a126443cb21ffb6eb65ae078', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'f3ba86ae2af7b012879d54c15b57a6c58926431a', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'a7035d2e3aeed02908acc329ac4dbca0f7b3d044', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'b7455d6f02facdd6b75f5cb0e8a2f045480027d3', class: "pre-heading" }, h("slot", { key: 'bf56763d2469a30a790e150e9553573cf931bfbd', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '69b837dc53ebcdad4a3be557ea21ffdc5dab34e8', class: "heading" }, h("duet-heading", { key: '20090fa0c42004ae0e0b67253b0382c53d1621ca', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '45d5069071ee05529e70fd3dd1c6671f926c4048' }, h("slot", { key: 'ba5349565ba963ee7a3c9ea0fafca05c1c6b1f66', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '9cec68f2befb06183a118b3b7474258ebfb64ef5', class: "description" }, h("duet-paragraph", { key: '1fbb4c62a657cbc7aa743e7434a8454aa900cf97', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '4337ddb5fc7a59313c054862208f012135890cda' }, h("slot", { key: '9e248444c7c071156e2502343d79e98b874d9484', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'debf6f99e39d7020982dbac8f0f130d99b8fcd63', class: "action" }, h("slot", { key: '836e7a342d3b8b44e4ce5958a516d16755bc081c', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -546,7 +546,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -567,7 +567,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -567,7 +567,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -169,10 +169,10 @@ export class DuetRangeStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { class: {
+        return (h("div", { key: '111693be22f93e2ca3e4850484ae8121ee67dd56', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
+            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '9497c2ddcc19d707e8db8064178b20d9d590ba5d', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '0f99efec9db613dcb7fe9a1e512f321e5757946f', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: 'a517133428ccb97769aa5e3ae906babd2e012932', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
     }
     static get is() { return "duet-range-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -379,7 +379,7 @@ export class DuetRangeStepper {
                     "references": {
                         "DuetRangeStepperUpdateEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
                             "id": "src/components/duet-range-stepper/duet-range-stepper.tsx::DuetRangeStepperUpdateEvent"
                         }
                     }

package/lib/collection/components/duet-scrollable/duet-scrollable.css

@@ -71,6 +71,7 @@
   position: relative;
   flex: 0 0 auto;
   flex-basis: 40px;
+  height: 100%;
   padding: 10px;
   cursor: pointer;
 }

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

@@ -165,36 +165,36 @@ export class DuetScrollable {
     render() {
         const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
         const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
-        return (h(Host, { class: {
+        return (h(Host, { key: '4fcbcaecb236d22e3d81a6d2269dcb564aeee649', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'dfe6ad7c7d152f899bddbca6f8ae4564abc65f66', class: {
                 collapse: true,
                 hide: !this.isScrollPaneContentSmallerThanWrapper && !this.collapsed,
-            } }, h("duet-button", { variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { name: "collapse-button-label" })))), h("div", { class: {
+            } }, h("duet-button", { key: '3402503fbbcc184c193518fdbc60bb2118c038cb', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '40cce68dae00f3724cabbd691f665b72fc39f193', name: "collapse-button-label" })))), h("div", { key: '181cc8c335be1c8a5cb5bbb0992650d0401aa60f', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
-            } }, h("div", { class: {
+            } }, h("div", { key: '1f639ddf0e5818d4b14d5b5d677fd70021150732', class: {
                 "duet-scrollable-button-container": true,
                 left: true,
                 "duet-scrollable-button-container--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            } }, h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
+            } }, h("button", { key: '39dbfb43d7048347804b5d35a2a174cc0dc38070', part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--left": true,
-            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { color: this.scrollPaneAtStart ? arrowColorDisabled : arrowColor, name: "action-arrow-left", size: "small", margin: "none" }))), h("div", { class: {
+            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: '9a183412d07974d452858ab9d7e4f3fa1e1ca239', color: this.scrollPaneAtStart ? arrowColorDisabled : arrowColor, name: "action-arrow-left", size: "small", margin: "none" }))), h("div", { key: '6befc01423321a62ebb54e54edc9f3734d435887', class: {
                 "duet-scrollable-list": true,
                 collapsed: this.collapsed,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", null)), h("div", { class: {
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'b857a63d05c43c84d58b66847835b14adea92671' })), h("div", { key: 'dff2e6af23b3201d89433c110189c72cded05227', class: {
                 "duet-scrollable-button-container": true,
                 right: true,
                 "duet-scrollable-button-container--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            } }, h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+            } }, h("button", { key: 'ec0e6149990950c3f9f92597af6123b8bc1aa903', part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--right": true,
-            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { color: this.scrollPaneAtEnd ? arrowColorDisabled : arrowColor, name: "action-arrow-right", size: "small", margin: "none" }))))));
+            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: 'c234e9218a01017220da205292d69fd20ce2985f', color: this.scrollPaneAtEnd ? arrowColorDisabled : arrowColor, name: "action-arrow-right", size: "small", margin: "none" }))))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -13,13 +13,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'f5c45c26ed1d22d93699ed794836c0946a846b90', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { class: {
+            } }, h("div", { key: '9d567d59d6d1762ca63e359e56cedf5fa9b264a6', class: {
                 "duet-layout": true,
                 "duet-m-0": this.margin === "none",
-            } }, h("section", { class: "duet-main" }, h("slot", null)))));
+            } }, h("section", { key: '20de320e97dd1c56727d90166fa750cf45588eb2', class: "duet-main" }, h("slot", { key: 'd78061d48e1b8480ee184297e09aa346e5f94ecc' })))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -194,7 +194,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectVariation"
                         }
                     }
@@ -510,7 +510,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectItems": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectItems"
                         }
                     }
@@ -701,7 +701,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }
@@ -722,7 +722,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }
@@ -743,7 +743,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -25,9 +25,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { class: {
+        return (h(Host, { key: '8ead01568c296258869626437f5216e403e31583', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '1cb0e51d54e12692aa3675ffd0e971ea7a268fb4', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { class: "shaped-image-mask", role: "presentation" }, h("span", { class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'aab0e0ee894d1fac79d13fb3c733b89b849e8b4e', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '4f53551cbf381bc3a2ec3986f42442c8e099c9fe', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -90,12 +90,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: '2cd3a66448b7881b67531aa4430f8e43861fa9fd' }, h("div", { key: '17a15de8f5f025b64c1cfd98e8917d67f569277f', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { class: { "slotted-content": true } }, h("slot", null))), h("duet-button", { id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, this.open ? this.showLessLabel : this.showMoreLabel))));
+            } }, h("div", { key: 'e23d42bf6e56b2def82bbf56f7dcb5dd7451b318', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { key: '5a38ad325305548cf5eb56496a011c02ae6fdea1', class: { "slotted-content": true } }, h("slot", { key: '28accb673aa7cc76b4b863e28af8a6eaeb10310d' }))), h("duet-button", { key: 'e035788f95d720cd37d0f3aa458f36d4e5f341da', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, this.open ? this.showLessLabel : this.showMoreLabel))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }
@@ -439,7 +439,7 @@ export class DuetShowMore {
                     "references": {
                         "DuetShowMoreToggleEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-show-more/duet-show-more.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx",
                             "id": "src/components/duet-show-more/duet-show-more.tsx::DuetShowMoreToggleEvent"
                         }
                     }

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

@@ -213,15 +213,15 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-overlay", { onClick: this.bgOnClick, visible: this.open, "display-device": "large" }), h("div", { ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: 'c9ea26fdce6a34534f6d72c0fb5393194d6e4135' }, h("div", { key: '5d00e39e995fe0e44228041e579f93cd7c2b9277', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-overlay", { key: 'b73c4a7a13e3cfc3ee13e88327420d4bc48fe441', onClick: this.bgOnClick, visible: this.open, "display-device": "large" }), h("div", { key: '947939e3e91119c6415d443245fc5a02f7b7b2ca', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: 'f9395d0c89a79bd3d8cc91f1558c0d890671be89', moveFocusTo: this.closeButton }), h("div", { key: '568a1b8d04b0b58fa702f6b52185d9cb54e15510', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '679f685f87266cbbd373846bf3fe16d4b3d536a4', class: "top" }, h("button", { key: '2d906478f7e804d00969ecc0d3a4eba35469a233', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { class: "sticky-header" }, h("slot", { name: "sticky-header" }))), h("div", { id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '1a66270885f0b416ad49840e7aba57695ec95a34', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'efba4d7f2ce14397f17f184395c44ce353525b2b', class: "sticky-header" }, h("slot", { key: 'e974b4cf33304dcd69518073c7471e37853c0fe3', name: "sticky-header" }))), h("div", { key: 'e7b7a5da675cb0382dc35d01e2400091770cce2b', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '3221532a87925cb0e71b4f34394b69898d1d9cb8' })), h(FocusGuard, { key: 'b38ad84aff4ba27042cf81205a6350b786c21288', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }
@@ -364,7 +364,7 @@ export class DuetSlideout {
                     "references": {
                         "DuetSlideoutEventDetails": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx",
                             "id": "src/components/duet-slideout/duet-slideout.tsx::DuetSlideoutEventDetails"
                         }
                     }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -35,7 +35,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, null, h("div", { class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { name: "navigation-language", margin: "none", color: "secondary" }), h("slot", null))));
+        return (h(Host, { key: 'bdcde4baca4555b243033eda46925a238fe4629e' }, h("div", { key: '9c609ae8ee5797889022d841dcc6394cdba85a0c', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: 'b8c1b8cf451f56abf9e745ed5b09e4a9e504d8a8', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '96de4be7042a59f6e099e3cfa9fe03ec75eb9e55' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,12 +26,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("a", { class: {
+        return (h(Host, { key: 'a26a869ada04663dc584baeae852954a072dc5db' }, h("a", { key: 'd52194edb1e8406a3fe11a67dfc99ea666d21706', class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { class: "label" }, h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && (h("duet-icon", { name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '341d70309ece5eaafc3c0ce0c8830fce3bfa7964', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '020f4f51ca3697274ae4b0fad16df6edfb146d21', class: "label" }, h("span", { key: '541c8c284a4d4ac55f4e9db0b8a8053017c4a9c8' }, h("slot", { key: 'fc62442b08d2e8809d0a833df718dd60289b50d6' }), h("slot", { key: 'a040efb23922687543e407c80da059b180d2e06a', name: "description" })), this.caret && (h("duet-icon", { key: 'd328bc1b731e7487b84cae25e2148f2dda2a39dc', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -119,21 +119,21 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: '7529b480d84acd0e49ce7e92fb8e4488215c3749' }, h("div", { key: '77e4a2159276f44637e749660d8e9e2f301c85f4', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { ref: element => (this.openButton = 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: 'aea9d1b65df491e46ca20aaa7af214bacc61aa38', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { class: "label" }, h("span", { class: { "label-text": true, [this.labelSize]: true } }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && h("duet-icon", { key: '5854660f90117f71d39c3552031f5ecddd5c37f7', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'de0f367ea64efa2492d44018c7e76a2d5bc0b724', class: "label" }, h("span", { key: '67613d87ac2ae308b15992c922b62a1903249cd1', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '7e4ecca7ac16709706bd12fb8479a2361fb9f6d4', name: "label" })), h("duet-icon", { key: 'b8aed24115d3594d7c4023139ec6f5b7be086ab3', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'ed53b528049a8cb19f68a8c18524e6f8f61b61a6', class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '024ed93d2ef1aef7016039b41aaf87fa50f3bbf3', moveFocusTo: this.closeButton }), h("div", { key: 'd474af16d3a888aecec5d0c1bbac591c4bfe7716', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'ea0e7598563bc86dba97778019afc4483d72ae74', class: "top" }, h("button", { key: '3eec2cc80641990d05698cbee70698e12a8ba505', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", null, this.label.innerHTML), h("button", { class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { class: "sticky-header" }, h("slot", { name: "sticky-header" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, h("duet-icon", { key: '020444a802639800bca5fe83c1179f638b80936b', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '5b2fd1f0f5e7b456c5ff04a9f8aebd0ffb37e504' }, this.label.innerHTML), h("button", { key: 'fd93a8eab4ebbbc691a0d75da55d4c82f8932d8a', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '31e874d3a9bbe8252f14a787ed5f9dc524a8d333', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '736c6220467deaefcb63b1794bc120540d6870c6', class: "sticky-header" }, h("slot", { key: '15192f0e98aa36fbbaf3f8a59fe0803cc3edc246', name: "sticky-header" }))), h("div", { key: '517dbf8a12c8519fb67890ede52fcb44734a04cb', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '3b2f8ebb1ef036156fec177d4cdab3b9abaa765e' })), h(FocusGuard, { key: '4237bce2b04484e60b1f74ce4a7637ba30fcf311', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -40,16 +40,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: 'f8bbbf107b9cb72539f3174c6ef5e0087eba3d52' }, h("div", { key: '2c35501d67d1593d45aef2289a0205a4b71c88ba', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, 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: '625cd8bddc12068a97cf1cf1fe34722bf25f3f94', 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: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '088ee3f0c467b5414c95edc9efb10c7faa15af24', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '43f0bb0b57b77b5f6a4794266e5e0492f32073ce', class: "label" }, h("slot", { key: '1dc41ee147e812d5dc3b2d406e04a97b5647c2bf', name: "label" }), h("duet-icon", { key: '35c3bd45fde0779c2ab1882918fda2a10c8fdf6b', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '9a732433c97c56f7010045c91de5dc9e7ef6e281', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", null)))));
+            } }, h("slot", { key: '68925a69d3dd8f7f54dda0312963fc211184d822' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '560e7ad5451c97ac65ee8a4ba14aa0fcf45a7f6b', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",
@@ -49,7 +49,7 @@ export class DuetSpacer {
                     "references": {
                         "DuetSpacerSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
                             "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerSize"
                         }
                     }
@@ -97,7 +97,7 @@ export class DuetSpacer {
                     "references": {
                         "DuetSpacerBreakpoint": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
                             "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerBreakpoint"
                         }
                     }

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

@@ -23,11 +23,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'ceac3f63045824ecaa2a12eabf60584359b68e89', class: {
                 "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
                 "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
                 "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { class: {
+            } }, h("div", { key: '8a202bab9dfced5467cd6d90715c88cd3381d1ee', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));
@@ -96,7 +96,7 @@ export class DuetSpinner {
                     "references": {
                         "DuetSpinnerSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spinner/duet-spinner.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx",
                             "id": "src/components/duet-spinner/duet-spinner.tsx::DuetSpinnerSize"
                         }
                     }

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

@@ -202,7 +202,7 @@ export class DuetStep {
                     "references": {
                         "DuetStepState": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx",
                             "id": "src/components/duet-step/duet-step.tsx::DuetStepState"
                         }
                     }
@@ -280,7 +280,7 @@ export class DuetStep {
                     "references": {
                         "DuetStepClickEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx",
                             "id": "src/components/duet-step/duet-step.tsx::DuetStepClickEvent"
                         }
                     }

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

@@ -88,7 +88,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", null))));
+        return (h(Host, { key: 'f013786f1cbfdb3aaf08c8e92d992d4c9369487f', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '47977abfb90d5b16e3280b6969d30265f7c12e6d', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '0a4054021d62f0e5110ca19130666e5de17ac1a2', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'e1b26fe38f5ea73070cb553686a65faa9c0a5283' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -225,7 +225,7 @@ export class DuetStepper {
                     "references": {
                         "DuetStepChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-stepper/duet-stepper.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx",
                             "id": "src/components/duet-stepper/duet-stepper.tsx::DuetStepChangeEvent"
                         }
                     }

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

@@ -107,15 +107,15 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        return (h(Host, { key: '69317e4ee80209eac5d1a870e8f6fa121945c731' }, h("nav", { key: 'adfbdb06ac08c851a0f69104dbe0a8a09fcdbfee', class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '5cce21788254d2bc5e8e69c4f3b3519becc5a2a4', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { class: {
+            }, onClick: this.onClick }, h("span", { key: '2881e9809d7ad8e35ee4a2d02282528b6f54ae53', class: "label" }, h("slot", { key: '1644f2923274be19458855ba0bf118a451c53c36', name: "label" }), h("duet-icon", { key: '3856e2a363483d51c309d5945592be82874b9e21', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'b197d0e782dfba29f74d85a0f2e068167973055e', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: '419fdb636dcd7c22a6edddf39c1b03455e82a286', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", null), h("div", { class: "list-padding" }))), h("duet-overlay", { "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'dc84a18900ea3ea4c20ef22e97fd156689db8fc7', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'dfca01628d0ad873462277662227fc9a3f46b295' }), h("div", { key: 'ae2577bcd57b05ab149d069fb45193ae9218f80f', class: "list-padding" }))), h("duet-overlay", { key: '835e3cc04e688ea5205699931476a500cc9f9f8e', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }

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"; }