@duetds/components 10.3.1 → 10.5.0

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

@@ -30,14 +30,14 @@ export class DuetPanel {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: 'b3dc7fe74cdf89d0b2216283a5250b81bc7dac7c', class: { "duet-m-0": this.margin === "none" } }, h("section", { key: 'c49f7aecda72185d245ae77bd177fe3abb999023', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+        return (h(Host, { key: 'f245a3e1001c22a202f3568c3bb787d0733d6d06', class: { "duet-m-0": this.margin === "none" } }, h("section", { key: '8a2b28280d033811f77acd9160442b740f998394', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
                 "duet-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation.split("-")[0]]: true,
                 [this.variation.split("-")[1]]: true,
                 [`padding-${this.padding}`]: true,
                 border: this.border,
-            } }, h("slot", { key: '846efa69e68b7e7f672d4441877af8c72221e713' }))));
+            } }, h("slot", { key: '9d8fedee8a1747268476e62d802987401074f89f' }))));
     }
     static get is() { return "duet-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,7 +52,7 @@ export class DuetParagraph {
         const color = getColorByName(this.color);
         // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
         // are not announced when placed inside duet-modal
-        return (h(Host, { key: 'b0db3004861f5dfe17d4927087ba6301bc607f5d', "aria-describedby": this.id }, h("p", { key: 'f74e4f0206012d316417ea743d72cc0b76b92ee5', id: this.id, class: {
+        return (h(Host, { key: 'c9571d612085644c30e1f218b12682df1c290b0c', "aria-describedby": this.id }, h("p", { key: 'bd24c521e2c48f5cc8bd221b94e21f6fe4cd6f8d', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -61,7 +61,7 @@ export class DuetParagraph {
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-inherit-color": !this.color && this.inheritingParents.some(p => this.element.closest(p)),
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '86d18dc5cd6ed9610a477fa09b2776d4f2037346' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '8b9f20872deb8cdc33aa95afdde6e492aa2d21d9' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-phone-input/duet-phone-input.js

@@ -18,6 +18,11 @@ export class DuetPhoneInput {
             fi: "Valitse maatunnus",
             sv: "Välj landskod",
         };
+        this.buttonAriaLabelSelected = {
+            en: "Now selected",
+            fi: "Nyt valittu",
+            sv: "Nu vald",
+        };
         this.language = getLanguage();
         /**
          * Theme of the input.
@@ -285,6 +290,13 @@ export class DuetPhoneInput {
         }
         return this.renderFlag(this.currentCountry.isoCode, true);
     }
+    getAccessibleLabelForButton() {
+        const select = this.buttonAriaLabel[this.language];
+        const selected = this.currentCountry
+            ? ` ${this.buttonAriaLabelSelected[this.language]}, ${this.currentCountry[this.language]}.`
+            : "";
+        return `${select}.${selected}`;
+    }
     render() {
         if (Build.isServer) {
             return;
@@ -297,7 +309,7 @@ export class DuetPhoneInput {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => country.isoCode === lastListFirstCode ? (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")"))), h("duet-divider", null))) : (h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")")))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, error: this.error, name: this.name, minlength: this.minlength, maxlength: this.maxlength, component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.buttonAriaLabel[this.language], onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
+            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => country.isoCode === lastListFirstCode ? (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")"))), h("duet-divider", null))) : (h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")")))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, error: this.error, name: this.name, minlength: this.minlength, maxlength: this.maxlength, autoComplete: "tel", component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.getAccessibleLabelForButton(), onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
     }
     static get is() { return "duet-phone-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -212,6 +212,11 @@ export class DuetPopupMenu {
      * Component event handling.
      */
     handleKeyUp(evt) {
+        var _a;
+        if (((_a = this.openButton) === null || _a === void 0 ? void 0 : _a.role) === "combobox") {
+            // Comboboxes handles this on their own
+            return;
+        }
         if (this.open) {
             // When Esc is pressed the menu should be closed
             if (isEscapeKey(evt)) {
@@ -258,6 +263,11 @@ export class DuetPopupMenu {
         }
     }
     handleClick(evt) {
+        var _a;
+        if (((_a = this.openButton) === null || _a === void 0 ? void 0 : _a.role) === "combobox") {
+            // Comboboxes handles this on their own
+            return;
+        }
         const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.openButton);
         if (this.open && isClickOutside) {
             this.hide();
@@ -408,17 +418,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '4ba8c544fd10ae2157f9f57f4ea668fba9982b39', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: '8167c05e3cbcc2240210eda963d1d0eeece5b15e', ref: element => {
+        return (h(Host, { key: 'faa607d185d31d39be849eaf1bc2e04a18dc6844', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: '30e8fda181937ec87b45753e11407752b9cb8bdb', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'bdfb595523f97e6ba3157f6b74ce07ade4b1fc83' }, h("duet-input", { key: '85251d071a3bf62fc5fcd986196b0a904280b889', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '410bd62c0d3621d294b3deb724803a104e46b85e' }, h("span", { key: 'a2036427c7785993ae0d632887855779e1437ce1', role: "status" }, `
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '63a51a1dade7d51632c7cc03dcc5889943c06384' }, h("duet-input", { key: '0afe720395fbe6388ce6fb8fa106540671768f10', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '8dafb4aa2cec51336c1ac0ce62fc7d55aa8950e6' }, h("span", { key: '172e686cfd6f5cbaab6e64a49ab86ad9ef6f860d', role: "status" }, `
                   ${this.filterResultCount}/${this.itemElements.length}
                   ${this.filterResultCountLabel[this.language]}
-                `)), h("duet-spacer", { key: '289e215aaa765f00794710b8f309a3cd6d082468', size: "xx-small" }))), h("slot", { key: '6d149b93858d2437e7eb684c33e4ed55af7659a3' }))));
+                `)), h("duet-spacer", { key: '01b48e3d5918af7980363bb2256e65e9e109bfa3', size: "xx-small" }))), h("slot", { key: 'd2dec433d6eb6720850805950182ff9edeaa4dc3' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,11 +101,11 @@ export class DuetPopupMenuItem {
         };
         // Without the role ternary Safari/iPhone wouldn't announce the label for role menuitem.
         // This is a tradeoff and now Safari announces these items as buttons and links with the label.
-        return (h(Host, { key: 'eb6acbbfccced4c0c5bdc00642932696d4664dfd', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'e94bf11c073da949474e06d550e077df94bd8bb1', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, 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, "aria-current": this.active ? "true" : undefined }, this.leadingIcon && (h("duet-icon", { key: '4083d9ff9034800978d924bc764ab10f3064ed26', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'dbfcd31c2fff06c014e86f4df2c832e9e424599f', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ad0150c3fc13b2a43afaaecc3f75b99b7a2041db' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'f4a9ee09f5c6ac0d7c7a4f79dfe8eeef13f2cf26', name: this.url && this.external
+        return (h(Host, { key: 'e4d908ef580f7a4b7f6c73b005df3024376394cf', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '9a8c95e7192879c5ef1d7c8bd8b4a1af4042f4bf', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, 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, "aria-current": this.active ? "true" : undefined }, this.leadingIcon && (h("duet-icon", { key: '7483b06d6477b2901f37bc6ac5d0c73c74fcc0ac', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '29946d960923b123aab68ac401922cb29aaa4cd8', class: "duet-popup-menu-item-label" }, h("slot", { key: '9994e35a66c58296c3af45cd40f477bc23f460f8' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '29a0b6a25a8376d41f5279bebebd208e65ce4640', name: this.url && this.external
                 ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '89bfa872c8e0a00165bf1d591c29c0ed41b7e2a0', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '6d6c1681d4e0551b89bd15d461d14d583fd12b93', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,12 +74,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'd36e73e86f96e7825e96c7730b330afa8a23c14e', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '50c45ed20c3dd5c321f20cac8f98d2ec87848f18', class: {
+        return (h(Host, { key: '15914a069765b4badeec5e42bc0c4be98528f197', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '3c097de3be0174444157d849d6d7352d60e8b4fc', 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, { key: '3e564c0bcfda6680953b88b4c8d78462bf938046', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: 'd29c458cefa1d508258c17b8ceffeb7739519bf5', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: '994fb32775e2da22e3d3d28b0b7d95f115c083ec', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'cf3d737104fabdf6f04deef643fd06e0e0032db4', class: "pre-heading" }, h("slot", { key: 'd92602ce7cfc2b1f3c5779be9d6e735077a1deea', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'a23103a88fe437d4627a1f417e3bea353ad04851', class: "heading" }, h("duet-heading", { key: '762f79431019baecae385b2220c5dffecc326592', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '0233f85fb7b39558f901ebbdd2beda46f9679e7c' }, h("slot", { key: '57286a6f7d2527c6fa38fb8d5292b760d308ce44', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '70031569694cdefd28fb439fd790d067b56c3757', class: "description" }, h("duet-paragraph", { key: '5859eb0737fad1711d6013ce1350cb45831c3660', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'dd12525a9e8f185d607933fe4d58dd6ff2a71651' }, h("slot", { key: '0056201e47bede4761bea53b47fa621330d6fef7', name: "description" }))))), this.hasActionSlot && (h("div", { key: '2299fa55f537af1056c84adccbe7b876d7252434', class: "action" }, h("slot", { key: '3744426783f605338d6da2911e3d4bb83e899151', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '5510d811615bbb7a172f03b40aaf4062073cb7f2', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: 'bc7545b847d9d9e71d0be0572fcbc999ee6c80c3', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: '82dc0d7269104f81e37d47c5b48f0d43b9000434', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'de1578879478be3a3f9cc115acb46a19446110a8', class: "pre-heading" }, h("slot", { key: '08cd0e79ddf0fd865a244147adbe208c8fa3f9fa', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'f2317874c4af8c13e932f3eb87b371f1d1b57237', class: "heading" }, h("duet-heading", { key: '250310892874b2a50739c52399ea26e9c1d551f1', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'b07fc7401b5246d73a9685ce0c3ed066de23d72f' }, h("slot", { key: '8de2f4b07d14e7eee8f0c8babef852ae187fc134', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'ddf9ce95776e1bd3c55e9dff3d0d116681f61896', class: "description" }, h("duet-paragraph", { key: '1decf80a64e37486c1475437c34894025ae0f021', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'db6124d5ef91014ccbc9693880921dde31157030' }, h("slot", { key: 'fe4c6a624551185cd748d69a451006710ed08558', name: "description" }))))), this.hasActionSlot && (h("div", { key: '4386f1dadb0f8311fa9c21c7a47a872a08ab2b63', class: "action" }, h("slot", { key: 'c5f4a3ce3b4ca1fdad040b95d883ec74f9a93904', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,7 +74,9 @@ export class DuetRadio {
             radioInput.disabled = this.disabled || this.groupDisabled ? true : undefined;
             radioInput.id = this.identifier || this.radioId;
             radioInput.type = "radio";
-            radioInput.name = this.name;
+            if (radioInput.name !== this.name) {
+                radioInput.name = this.name;
+            }
             radioInput.value = this.value;
             radioInput.checked = this.checked;
             if (this.accessibleIndex) {
@@ -122,9 +124,6 @@ export class DuetRadio {
         /**
          * Component event handling.
          */
-        this.onClick = (ev) => {
-            ev.stopPropagation();
-        };
         this.onChange = (ev) => {
             const input = this.focusableElement;
             const inputChecked = input.checked;
@@ -182,17 +181,17 @@ export class DuetRadio {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '14b930b9947070108e2a4e3a9f1bcc22f06383c8', onClick: this.onClick, class: {
+        return (h(Host, { key: '538a0bdaa3132fcfbd68a8f970f1dc9b8c2f1198', class: {
                 vertical: this.groupDirection === "vertical",
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: 'e51255f8e4a3c72fd4082e255434783ce8163b97', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: 'a60e1e5175ba93732f3e95ecdefb9df7211d9d9d', name: "input" }), h("label", { key: '37a000f2aced8a9aa8355f355d05ba2328e77cc7', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, h("div", { key: '0e11d68ec02df3163c3dc1524cff2bbff950a496', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: 'fdf09172f67232d5b2a689b1f1368bb5da931319', name: "input" }), h("label", { key: '516d9ba003ab05b3f7069b46ecfd471df3e4de3e', inert: true, ref: element => (this.labelElement = element), class: {
                 "duet-label": true,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.disabled || this.groupDisabled,
-            } }, h("div", { key: '58d87e1f398147f4a03b992cb9a208f2c104d217', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, h("div", { key: 'b525b0a79e22eeb0b4fa8bdfdb854733d66acf2b', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
     }
     static get is() { return "duet-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,7 +158,7 @@ export class DuetRadioGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f15d2c9272252a6f0c9b3f49adf1e6c7fa608531', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '84ae5b2b3bc30b7612b8acca406af2fb49be5b7c', label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '5c23fba85c54397cf80a52af07fb82c183dd236e', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'e7469dd55b94bad35a5efc44b12f905396d70199', name: "tooltip", slot: "tooltip" }), h("div", { key: '08a75f0ab6dbdd7db89ca850e92cac18123ca6d5', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '2b9cfb92c3098f91bd7464fd6f2cf383a986c5c0' })))));
+        return (h(Host, { key: 'bcae2d75b5843767deb9fc0900ee68751331a011', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '41c1b4a25bef2baac49fc5abef7713582a2e8f1b', label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'af6c3a5dca20b7665e51bd0bf20923779bfd09bb', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '6e970de16b4e67c79ab27d45a223ec5989dfb51e', name: "tooltip", slot: "tooltip" }), h("div", { key: '4b6385af491f148c5122dd990db0ef05ae8c7c6f', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '4d79f47f0f3ab231307045a4c3bfbff89df1b75d' })))));
     }
     static get is() { return "duet-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -156,13 +156,13 @@ export class DuetRangeSlider {
         const rangeStyles = {
             background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
         };
-        return (h(Host, { key: '4081e812cc9da18aa9183b15de5a3197d7542c27', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: 'c1943246db143f1991069550aae9fb29814f303f', class: {
+        return (h(Host, { key: '140a9aa52dabb7c79226006b962df8988b32d11a', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '57c79380ecfdc00894e732406b9f461d673a7511', class: {
                 "duet-range-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-ie": isInternetExplorer(),
                 "duet-range-disabled": this.disabled,
-            } }, h(DuetInternalLabel, { key: '9ad5374d0f942c064be6015a6797a8544c6dba96', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: '02b62d9bd8d03d9ee52d77ff6ed040f02c848fea', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '420137f14758cefed168d359c3c70520cc4b3137', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
+            } }, h(DuetInternalLabel, { key: '0bd37479e4b671590fd4dd0b63cd3750ca08ebdc', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: '5e4d188ee952a06e3e25e06ec2d946563aed1ad8', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '5929028f235380be743b2937b400c4100b42640e', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
     }
     static get is() { return "duet-range-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -196,10 +196,10 @@ export class DuetRangeStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'fdd61bd5ec23d7ed03aa172dc1f6d1255c7bae28', class: {
+        return (h("div", { key: '7a19673ab541ea98696cdf665d1f37b8ac025f80', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: 'fc99dd6ce60fc4217c08bb2e6caee86af03ce0ef', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '26a0071c03bbe09f805729d62eb29f5242e8e3e1', 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: '92a518ce2e805c268afd621a058db60721f27c82', 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: 'c26de19d4c0bdae85dbaa9c5d0c4dca7118cbd59', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '780c748f25da231b4d32473c2404737516dea44c', 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: '2883d256e795c2357edcfdd7515bc3242f754698', 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"; }

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

@@ -284,18 +284,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '16f256474e4e15cf219acd7edf26401ca3a99ea6', class: {
+        return (h(Host, { key: '8df51170513077145592d25caa62ba1ad2e85321', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '7fa6f84d8f02d4e8b816eda4631bcad05167223f', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'eb436b00c138655bb63089831b85d1e9bb320aae', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'f8675f4274380f1a463ca4a868151eb76dc721b0', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'f259fcf694c93dc3759a4e1dcbf119e7db86e75b', name: "collapse-button-label" })))), h("div", { key: '01b0c8a9e4ba8eda9bacbc00702eda03f01cf683', class: {
+            } }, h("duet-button", { key: '7ee25c87ce3da3160b9ceb73730715becad219bf', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'bf4e7d6a981c5544251df380c5b4eef49545fd01', name: "collapse-button-label" })))), h("div", { key: 'cd9bea12be8aecb83efce14f2ee153896f64c7cd', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: 'a6f3a782485f864dad9e40ddc032f982c6c7073b', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '243fe2e1dab3b9eae761f971dbc92eb0a14baa9e', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -303,7 +303,7 @@ export class DuetScrollable {
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
                 "duet-scrollable-stretch": this.stretch,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'e17345b0845d35318c50ee82b7133b0f81bbac42' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '5e49e03f90b17bbb89b5b4f5ea55d6bbd93ec53e' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,13 +24,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9e09c3c920b112b5c93c5ad6d7fa58c9c72d2bc5', class: {
+        return (h(Host, { key: '675bb0f1357f695ee2d80ae2a0a33f375191aaec', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '1610e2a09eab2ce70922b6ad5c636acc12a8791a', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '8a76c865f526d670f1fb859adcdb84832479d9c6', class: {
+            } }, h("div", { key: 'cfa957d4604cbb8a0a824633dd4bf8c17cd144ae', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'afe01f3fb8d78adf63965e56f4aa1bbece5a50f3', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: '0f91daf6934b0c2d52ede50277a47885e80ede10', class: "duet-main" }, h("slot", { key: '6998a473041513c5adbf796fe5c2ecaa3e436887' }))))));
+            } }, h("section", { key: 'a749242dc5645d0c22f8d3db2b3f798f1cb864f1', class: "duet-main" }, h("slot", { key: 'fc73c99e0e9750dcfe65ab40e4affc2f1fe1dd9e' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -249,10 +249,10 @@ duet-tooltip,
   cursor: default !important;
 }
 .duet-select-wrapper select[disabled] + .duet-select {
-  color: rgb(127, 150, 165) !important;
+  color: rgb(98, 121, 138) !important;
   cursor: not-allowed !important;
   outline: none !important;
-  background: rgb(245, 248, 250) !important;
+  background: rgb(228, 236, 239) !important;
   border-color: rgb(181, 198, 208) !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
@@ -362,6 +362,15 @@ duet-tooltip,
 .duet-theme-turva .duet-select-wrapper {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
+.duet-theme-turva .duet-select-wrapper select[disabled] + .duet-select {
+  color: rgb(95, 122, 143) !important;
+  cursor: not-allowed !important;
+  outline: none !important;
+  background: rgb(228, 233, 237) !important;
+  border-color: rgb(178, 194, 205) !important;
+  opacity: 1 !important;
+  -webkit-text-fill-color: rgb(23, 42, 59) !important;
+}
 .duet-theme-turva .duet-select-wrapper select:focus + .duet-select .duet-select-icon {
   color: rgb(23, 42, 59);
 }

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

@@ -197,23 +197,23 @@ export class DuetSelect {
      */
     render() {
         const identifier = this.identifier || this.selectId;
-        return (h(Host, { key: '6937ee7615e75fb35ef3b6f1f43a4ac91fe13147', class: {
+        return (h(Host, { key: '6bbba69df6d714d95582b920dcd6704e872c1fef', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 [`duet-select-variation-${this.variation}`]: true,
-            } }, h("div", { key: 'df3ab43299a88a3560e41ac9efa1049f8cf472c6', class: {
+            } }, h("div", { key: '9c89cfab0838693f6ae93ed0c6999196ed046018', class: {
                 "duet-select-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-select-variation-${this.variation}`]: true,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: 'eed7661618d92026e2080a232a08acfc6bbb9286', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '6c32da93490aa3bd28ed7c9dbc5c93f4ef7509b8', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'cbf1942699874feda3b94159477533fc722f9736', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'bf4bfd734e9a973d14d98c96985d46c7dd1c5ceb', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '251e263a892f221b586587aefbe55fe725ac2301', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'c55fc0f969e5fff221ff765b1a85aa81a6949ca8', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: 'a2eec6e452861fcceff707f25d390a04db8a36c8' }), h("select", { key: '3048fa80ccd46b95236fe4dfa2ce96571bcc3aed', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: 'cd9c69cc0437ec1201fee0a2ce5a401597e5fae9', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+            } }, h(DuetInternalLabel, { key: 'bb1b08004476e4c91a526e189d59b26c06628f0d', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '242f060046569b43a16a590fc61ac16fa7dd182b', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '7ebd1a36c092a298330bb5de020c67977c33607c', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'a53a8b9a16ef888449c6f544c0dd649c9e871d28', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'c706535ed2ab42090d1fa1a7ecaea348dd1bbb43', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'c2252184677717fb9dc1174d804fc961ece7b7df', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: '3998a6027e75a35f26a2806b2f763cacd93d352a' }), h("select", { key: 'eeea5188dac3f4ffa04f16f73b00422ef8fe00df', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: 'cfd9f517dbf8ce0c71191bf6e1223f0e8685a29f', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
-        }))), h("div", { key: 'af172a36f2e54f6ffe90e83d561258cc8aa91d6e', class: {
+        }))), h("div", { key: '96657339d7fb34f8978eda641539e72dec7b224a', class: {
                 "duet-select": true,
                 [`duet-select-variation-${this.variation}`]: true,
-            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: 'd8ff427b3fd8eb4d5605a7fc103f74757088364d', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5a6494284c14a3b4d35df44cb3250a827f17532d', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: 'ac74f1f426f66a3908be1444c828a321e4e45db2', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: 'e947148f3aa7b0d0f2da4db20b59d3d9be2aac44', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: '39dc9f995207b67e9910b02768c532cdfbb05385', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '160c339a192e1941339eb15f1d127049b896bd9b', class: "duet-select-error" }, this.error)))));
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: '11f2c494a1a3194d9e59f314bac8db237f8344b5', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '27492e3b9f53ec44100bbbe780f4aa464d4a9263', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: '3586a25ad9cb318b6565d17786f7e426f46d7768', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: 'ebd9af0776d3462414fff4ad4df8af165f6ac4b6', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: 'b9644fc1fbb467bfc7312029141323b743be8d30', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '572d61055aac43567212efc7c2ded45999d2d386', class: "duet-select-error" }, this.error)))));
     }
     static get is() { return "duet-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,9 +33,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: 'a3b54614560cad8b7ebfab7fcdcd281d5cf2698d', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '70fabf21da7e7198739b45dece77a4c45ee9b297', class: {
+        return (h(Host, { key: '020b3d5e11c9cbc503711861dd206686d799a4e3', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '296b4c2f04267b0d782923ae2e68d4ef6cb0561f', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '01d1367bf5fa537aa2c6bd76499f304338cae661', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'd57e561e61e250d305d8c7ab3b4cf2bb973dafc8', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '7dc1daa1ef4e816a866dbe1f9106d27d79ba0f80', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '3471561d23efb71e7ffbd03964a87fc79b4a1630', 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-share-chart/duet-share-chart.js

@@ -63,12 +63,12 @@ export class DuetShareChart {
         this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
     }
     render() {
-        return (h(Host, { key: '41d1aab509a8e28586ffb62a223378a3c2d97552' }, h("div", { key: '22552a2eae668cc0a293e61b46a10655188e2ef8', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
+        return (h(Host, { key: '76dcdb711e01b723ebfc6a7ac917640566d3c519' }, h("div", { key: '0e33db2ae8dbd50fcca75bfc44780e47f540b35c', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
             .filter(i => !!i.value)
             .map(item => (h("span", { class: "duet-share-chart-share", style: {
                 width: `${(item.value / this.itemsTotalValue) * 100}%`,
                 backgroundColor: getColorByName(item.color, this.theme),
-            } })))), h("ul", { key: '72a0977595b3a0145eea22372114b18be3a24a0c', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '36c475fc18913c91bb22e3eda0aa5f0c76b02cde' })));
+            } })))), h("ul", { key: 'af7cc163b43b67f726f90a32bd8bebb172a65ddd', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '4648ee2e833c07161de6ceb6179678b978e07741' })));
     }
     static get is() { return "duet-share-chart"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart-item/duet-share-chart-item.js

@@ -10,7 +10,7 @@ export class DuetShareChartItem {
         this.value = 0;
     }
     render() {
-        return (h(Host, { key: 'cfc906f48f161844e43f30fa14e0ff41939f38c6' }, h("div", { key: '526a5bf599b352d289abf6057991d0407e7a7ff6', hidden: true }, h("slot", { key: '8c8b501ea1fc3e556214a8b43afca95d24aae001' }))));
+        return (h(Host, { key: '5b9263e8f4daf50f566738052822cc63a935d7a6' }, h("div", { key: 'd79e1ab4daabd5fd6dc314a33c7608c1cdd8c3f2', hidden: true }, h("slot", { key: 'e9ff46324b7dea7138cfcce138d57c08c851626f' }))));
     }
     static get is() { return "duet-share-chart-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -136,12 +136,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: '514e5c439744a2960e711811f696d2ee9e49dba3' }, h("div", { key: '40788025130f4b8570cbacfa6371b11ea4bbdb42', class: {
+        return (h(Host, { key: '63b3a492707e1a57c1611b073e6b663f3b3f5550' }, h("div", { key: '663d694dedf732ed665fdd22ac8bfbb609aa4ba2', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '42f30cd3ffc5c33651d4d0c7e36c913eab6d8147', ref: ref => (this.contentElement = ref), class: { content: true, "duet-theme-turva": this.theme === "turva" }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'a319d301f1ed7130671aa529592270c4b708b7f9', class: { "slotted-content": true } }, h("slot", { key: '81b3e98809cee2a52c358af50383272ddebd8ee6' }))), h("duet-button", { key: '9789882dceda992bd6107cc84fa92ca4289f3679', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, 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" }, h("span", { key: '9d664617e12985187968c239189df78e3ce87a40' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '035ca78df910e7b4c7266e94ce54011f73197274', ref: ref => (this.contentElement = ref), class: { content: true, "duet-theme-turva": this.theme === "turva" }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '6a41aea8c1bd21d5112e1d0fadb83de9c25b99a2', class: { "slotted-content": true } }, h("slot", { key: '7cbe45659e187d12579f798c9019be8aa6c40c83' }))), h("duet-button", { key: 'fb2e655522a81a79a288db8a6ba720e3ada41a5d', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, 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" }, h("span", { key: '5cb30295ce5968c5d7a87185652db0640ab42839' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -296,17 +296,17 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '15926d51d888fbafb80d0c06a903dd7dda144588' }, h("div", { key: '137390c821f9878bde46d7c2ac728649efebd957', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'ecd721dba56b60c66d6f275c727c955d62cd1e3d', visible: this.open, zIndex: "600" }), h("div", { key: 'b7a642e04eed19e4fd7e36b1835d6e4c74aec27c', 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: '4967e4765890d5a1fc428a6da2917e5423728b8f' }, h("div", { key: '019469e0d6a0b7115a2739d19c4db7643912ed0d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '1ab0ab05de7bef08b4f9907c3588c4ae1b27a1d6', visible: this.open, zIndex: "600" }), h("div", { key: 'a36de0bbaa226512b8fc62ec92912b0d9ea48fbe', 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,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: 'b77f1894f5398ba5a2cb46f0e03bf61b62316375', moveFocusTo: this.closeButton }), h("div", { key: '1ed24174eedb22702423e2360902d86bb5d88130', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'a5c52f4c5699fdf82e6032db15a59952c699da21', class: "top" }, h("button", { key: 'c12113cdf3c775016253f6372e5acad37e06b552', 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: 'f8cd5d6bf0a93a2ec39783b9660a7fe7d666f631', moveFocusTo: this.closeButton }), h("div", { key: '4599d8a89db4503856c93ae476044d0f8b58a6e8', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '3b9e1c5b2de674864a0570a94eaccc0d2b1fd444', class: "top" }, h("button", { key: '8c68434c8e735aee3a92cbd41dcdfdfdaabda9d3', 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,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'e19e950ae4db64d0dd6a1f5423849e4825da08f9', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '87c7d146ca56c79f17bfae9d658bf6b161724b6e', class: "sticky-header" }, h("slot", { key: 'cfe4f5cba7c3fc4e69b9d0934be5cc9062f15669', name: "sticky-header" }))), h("div", { key: 'decd4a9a7d6ebd9468f1c6b3572985120e83fabd', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'a65c83b73256734cf30bb76d70a585f7396e91e7', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '2cd42bbba1aae10f8ea951af29fd111ffc145ecc', class: "sticky-header" }, h("slot", { key: 'c0c2c759bf1f9190a5bcb845d868210801792553', name: "sticky-header" }))), h("div", { key: '9da45e60847db54c0ed5baf6e87d8526c54db02c', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '895e292fa85f1ec87523600aba207a414997c32f' })), h(FocusGuard, { key: 'ead70e05106da19d4ca705b9716b1f9257563373', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '812379a9042a1a79781f4378a0c2b256676d12d8' })), h(FocusGuard, { key: 'a2aeac2c61dbc0b9839144613d999de4dc8edb36', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '6236540dfcccb46cc3a8c843bb55a41f53778097' }, h("div", { key: 'a3599eb69fdf0503f8171faca040233b9bdfed06', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '414eb1bcd9833eb5c86f133a3f0755a33549f1d5', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: 'b747ac7d3d69368b38dbc39d794ee4aea592d3d6' }))));
+        return (h(Host, { key: '34f0930dcf8021c6864fb605ea004dc58e6b8c9b' }, h("div", { key: '9433641622ace86c08d679f5de5a06c065bc24cd', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: 'bc6f8729f8011ff306198f5e6a6c050145199d03', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: 'a1608d54cdb7ec066e5757e46ec943db0aeb3eed' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,12 +77,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '11544751fda9c0d6dd5f84af34e2f87b732d42a4' }, h("a", { key: '0a773bdb78c74a758242bd8bdfeaf3b4b9aa5b60', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: '8af50d9b7ac2dff34a22383644c26bc271feb186' }, h("a", { key: '2331800cc3a3541998250f6e0d77989311da783d', target: !this.href ? null : this.external ? "_blank" : "_self", 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.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: '1861478a046aef9645f066fb23d1f4c912f1ef0c', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: '1dd2d3ef5f287cd454ddf9b6612e97d473b82ba9', class: "label" }, h("span", { key: '5a90dffe20806ee7b52e790f7dced30ebfb904e5' }, h("span", { key: '8ba44b556e13a4aa99d59650cfdd0e896c826111', class: "label-container" }, h("span", { key: '768831387964eaead94ddca5d1f1782bfb12223b', class: "label-content" }, h("slot", { key: 'd202274b8de9e89862986f27d070010b161a1efa' })), this.external && (h("duet-icon", { key: '6dfa5809ad21343f1b8a705406b6a436ddc0e93f', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '8222d3a0078e850548ee64ead0b4d0030e37aa3f', name: "description" })), this.caret && (h("duet-icon", { key: 'f0dd79d575afa645415a239c2a1d545d079edc84', 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.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'ce90f34daf34e3fad2b5ad7b3b5e37dad9c1fd20', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: 'a5fc2cc4c2a7c166b57b529ff62d133775b8dc51', class: "label" }, h("span", { key: '49dc50b3f9fccbca74e22a2a62d8b8037484f386' }, h("span", { key: '732a205ac37b15f4f242c827b90600ff15194c74', class: "label-container" }, h("span", { key: 'cc338ec61125f8695556d8ecc08d9d75d2ded84e', class: "label-content" }, h("slot", { key: '9eacab150163fb2dba6e373a4a3b8ca05346916d' })), this.external && (h("duet-icon", { key: '6420a54645299ae8b19bfcc8626a929b6cc4f5cb', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '9546111ca2eb2084ee09d4d48ad60eae283fad70', name: "description" })), this.caret && (h("duet-icon", { key: '8d9d92137460efafad759509121e6dae57165a72', 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

@@ -174,25 +174,25 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: 'b7ca9da2d68d44f8c144355d8b42e9b822129768' }, h("div", { key: '1cd22b150660a032f6307460a5394f9bdd2f8356', class: {
+        return (h(Host, { key: '8a4dddd16156e7e26f2d90d27e4135baef9d7f7f' }, h("div", { key: 'cfed35efbcbf9502380c2b19e452447d64c0590a', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, this.badge && h("duet-indicator", { key: '6343757ff3eee8a8c6965b4709958f65b784876c', variation: "change" }), h("button", { key: '9c9deae0fcf64337dcf2a5ffc10b90cd1805f726', 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: {
+            } }, this.badge && h("duet-indicator", { key: '4a1de84e3b6ea4ffb2a1e01631f0a1739771e13e', variation: "change" }), h("button", { key: '0663a7f9b6b1f5f779313be946f44fb0c8e00504', 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,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'e713cc239aaee89e8e57d2d0fbd5f5c03f75a932', class: "duet-slideout-icon" }, h("duet-icon", { key: '647a923e7b9a57135779172c56a9ce3f4784eca5', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '0efd846db68b6ddec41deb3b98e95b578f600c9b', class: "label" }, h("span", { key: '35be3389257b208d50bfc51d9aed16149d01a927', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'cc261654761ea7dce912746e520042d05c534fc8', name: "label" })), h("duet-icon", { key: '634184d119a894c2eda07e6c474d058e125f6257', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'adc63cfa083c247dfb0053c0628a34036bb1c6cc', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '871f1fcb5709c43089b627de26a80a8a7eecd519', class: "duet-slideout-icon" }, h("duet-icon", { key: 'f1666ba453de11810cc1b1a5ce9d45faed10c193', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '051ce78454689a7a379a9abd4a75e9a6495afcfa', class: "label" }, h("span", { key: 'a22d205208a777b52b62e0d116a5db0998e3a79d', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '6b817eb49b69b5fe02cd3355fa045fad80bc7692', name: "label" })), h("duet-icon", { key: '0b397ce8f1de51dd50007ab3311e5ad59a7aa428', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'c7665a664268fbd5c4d01e152788ea70445814b8', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: 'c2f8a9ba339619c3c0f17e925e43ac421da03fde', moveFocusTo: this.closeButton }), h("div", { key: 'ea23a8d999173132d21ef23e83835c89b892ec9e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '883f2a295c1e8450973a2c69f533fba8352c6b5b', class: "top" }, h("button", { key: '5d51c88ad14f8e0cd711e653378ac9901ad9334b', 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: 'c05cc6d5b0da41bedee7978f01d6f7c90ecfcf43', moveFocusTo: this.closeButton }), h("div", { key: '8ba7873500abd185fe735632b574279157c8a707', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '042cbf7c5c36e7a477a64ef184452817030a1fe9', class: "top" }, h("button", { key: 'f327d356b8de850e432f515a4c1a6dc9e003d6f8', 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,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, h("duet-icon", { key: 'da662ca8ebf14ed3a2d4157ff900884a111fa52a', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'd3faed89bc59ca1c0ba2623e7a8e162bdaa4e326' }, this.label.innerHTML), h("button", { key: 'b90b5a03a91f92b65f1b06f9fea40fcbfff799b5', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'fe6676540e447c796bb2b38cc704a5a753a48e0b', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '8b1965807e40adc74947c170d8ad50172829f4da', class: "sticky-header" }, h("slot", { key: 'a51428e89962c2e10cf96ab92f462df6c20b05f2', name: "sticky-header" }))), h("div", { key: '4e4f74bac3d36949a9fd193ee9989c2ba757468b', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: '504fac50c5194735f7da38fd9034f28a39418192', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '274ca7fdd2c19790c60a7652a7733b41589709d0' }, this.label.innerHTML), h("button", { key: '8aadd95055653e4125015bde99188315d0c2e8cc', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '183d96aae0264a7b83f1aa77bdfb63778f173c74', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '7861b5f725b0711c2b7cd7509c8a9a413e28564b', class: "sticky-header" }, h("slot", { key: '2c16e97d5eb0d661158a567b6a07fb89ef1414f2', name: "sticky-header" }))), h("div", { key: 'd6e922e2a37b2ab0ae519dda40afb32d5b56e554', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'dab429efe653f73142b8cd615311c5a8953c6343' })), h(FocusGuard, { key: '70c7027c0f655e46753addde7928facb096b0481', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'af607556495101c55d23a7365f7ad3e661f7fc23' })), h(FocusGuard, { key: 'f2f4d91ef8062f83bbd6099bedccff41d4a144ab', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }