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

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

@@ -394,32 +394,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0a70358ce0f093e096e1dbbb1d5d8cdfe9767d69', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'ceccfac31b9f41448ce5eca46838898d914cb04a', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+        return (h(Host, { key: '4538c13203031ba738afe31bf944d5e5cf0822d0', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'f74353d0266706e3e98ba2eb0ffd427e17dd7d32', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
                 "duet-pagination-nav": true,
                 [`duet-pagination-variation-${this.variation}`]: true,
-            } }, this.numbersStore !== "" && (h("div", { key: '92cbdd700b88123610e781217175f508bea468f2', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: 'b006f1470134d68ac4851a60a897ea2b72c1f504', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'd08269283c6af3331e90f1793ee4407d6452c462', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: 'ef1c5623374551a2f397f3af374da758f18d32fc', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '952121198f2ef45be88514aadec01a5c96f3533d', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'a20aba22fa8fb86c7f85d2f53806d1ca4617f7a2', id: this.listId, class: {
                 "duet-pagination": true,
                 "duet-pagination-is-dimmed": this.numbersStore !== "",
-            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '1b3c4f778862c5880011076f8c9f75b535e6b3cd', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '9a3b326a61e687c37098498586030cb657abfe50', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '9b83bfe8deff8790d0cb1e1a35b0ec7c7f1d3b0b', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: '5c27b7649f0eb55d1d0d62d900b232004f004504', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'd09d305229036887195250ff68758d8ababcba46', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: 'd894e457eb0d8a85407e2ff58336c515efc36b32', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '083ece272410b52d311ba5059d01c5b551f2f95a', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '608048896bdefbda08da9a074e885be4619213a5', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
                 (this.current <= 1 && this.processedPageLinks) ||
-                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '332242feaa14df10ee1b67dbebc767fe366c34c4' }, h("li", { key: 'b03d55993042862a51c456d0a65958f33794fbee', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '5eb8e18454bf78af277bc43286fb12d28af4e5f5', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '4631477be8ebc0c294f0aadec56efd0dc56c727f', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '67268023a93c95fa305033c938cda65456f1bdf0', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'e9fe07279987c58857d72d70008998f859d7b531', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: 'b01ec5da3a5355fb19d810bb67c25f5063fd3c3e', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
-            this.shouldDisplayNavigation() && (h(Fragment, { key: '93b37ef102d9d74bf259b0da952e249df751806f' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '49a99877b3ef31c365edcd87ad3853ff0bdd2e06', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '7a61e3153910f73b9b5ca458c84c0b5690c37a7a', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: '54230cb78461870c410262951dea3591979e476f', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '6a218768ef3d2f4f19bc763704ca4ecf640ac953', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '13b446158c56459c4193f8a56915e393a32e85bd', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
+                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: 'c61298ec08d9d456084704599138fa6947b90f5a' }, h("li", { key: '353c539572913f5c79da697cbbe5904424b66451', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '3fc0820a55c18784babaa94cc582742d7f7ce81d', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: 'b4f8be4468d0c1fb1e45eefe35d0d25a8e35cee5', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '3d2bcf407aff2366deac05bdbc9e02162a1634ea', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'cb9ae00667627845552094b399840bf08a76c63c', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: '39ef13340bc1908984d40d1f428e0e541a346a38', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
+            this.shouldDisplayNavigation() && (h(Fragment, { key: '3c2d5586ebf42d2c8fd8f651bae865e4bb7a61bf' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '3ff93a876610de4018caa32e8a0836bc93174408', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '6febe996395f01852e2fde2c454f5a296e395141', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: 'd010e340fc4dd341ca566109f5a1c38a89857411', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '984d35d520c9b995ed48c7fbc7a58bfd8c89357d', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '5bb07665b261db54475de478bf2f5fb974ee4047', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
                 ? this.processedPageLinks[this.processedPageLinks.length - 1]
-                : undefined }, h("div", { key: '372d0d315cbc8ac6edc3bfae39220c446c6d6a98', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '0638ff6dfc64a693f0595137ad8cd393489d4a8d', class: {
+                : undefined }, h("div", { key: '559d8dd4a0f63d440523de1ff4879cbcd8bca408', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '9c986c1207ec4918758a931d009d48708818e736', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'd7595281e09ac50160ce945f85bea6315e01621d', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'c8f4048dcf9cb28c6bd4d43c1d1945c2da15ce50', disabled: !!((this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
-                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'f2c14e79716cbd0e8876b4f3a41d96f6e4c93003', class: {
+                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'f605fc50e28b58a780fa938885031353088d1fc5', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '96c1da12be49a1062bf008da7829eb6bb030ae66', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'da162ed3e9a0bb469be3670395bccda489aeb97a', disabled: (this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
                 this.disabled, accessibleLabel: this.accessibleLabels.last_page, title: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
     }

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

@@ -1,3 +1,4 @@
+/* stylelint-disable scss/at-rule-no-unknown */
 :host {
   box-sizing: border-box;
   padding: 0;
@@ -12,7 +13,7 @@
   width: 100%;
   margin: 8px 0 20px 0;
 }
-@media (min-width: 36em) {
+@container (width > 36em) {
   :host {
     margin: 12px 0 28px 0;
   }
@@ -37,7 +38,7 @@
   padding: 16px;
   border-radius: 12px;
 }
-@media (min-width: 36em) {
+@container (width > 36em) {
   .duet-panel.padding-small {
     padding: 20px;
   }
@@ -45,7 +46,7 @@
 .duet-panel.padding-medium {
   padding: 20px;
 }
-@media (min-width: 36em) {
+@container (width > 36em) {
   .duet-panel.padding-medium {
     padding: 28px;
   }
@@ -53,7 +54,7 @@
 .duet-panel.padding-large {
   padding: 28px;
 }
-@media (min-width: 36em) {
+@container (width > 36em) {
   .duet-panel.padding-large {
     padding: 36px;
   }

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

@@ -30,7 +30,7 @@ export class DuetPanel {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: 'ce2c9ad02ea4b482491120c4564322a7ab1b97c8' }, h("section", { key: '058ae2c34b915888645f0a0fbce8c905f9a99330', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+        return (h(Host, { key: 'ba9383fe5d683d44e90c7e3d9f3539365dfbe497' }, h("section", { key: '149796219e3ea56f5fdeab2e2aeaa8ddb3d1fb7e', "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,
@@ -38,7 +38,7 @@ export class DuetPanel {
                 [`padding-${this.padding}`]: true,
                 border: this.border,
                 "duet-m-0": this.margin === "none",
-            } }, h("slot", { key: 'eabfa138724309e78227fb8e48507a2a065c5822' }))));
+            } }, h("slot", { key: '8291e9635f7795c4e54dfef34239dcda4dbdb33a' }))));
     }
     static get is() { return "duet-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,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: '844328a8133f4abbbbd2424b38cc14b019fd23d4', "aria-describedby": this.id }, h("p", { key: 'dfd78aa829ee142323997f6bebde60ac47bb98e7', id: this.id, class: {
+        return (h(Host, { key: '99168fa787b98f3c65146d539ac5a1c391254a95', "aria-describedby": this.id }, h("p", { key: '9b4fb9eb7525804fd786ca72c13bafdfb4c9dfc8', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -59,7 +59,7 @@ export class DuetParagraph {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: 'f014b5496f1b791cc2879b09bd12dd85649fb0e3' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '2cc4063866d09f9fc1569bbf3d26661472485147' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,6 +81,11 @@ export class DuetPhoneInput {
          * Tooltip to display next to the label of the input.
          */
         this.tooltip = "";
+        /**
+         * If the value is set above before the component has rendered, the ref to duetInputElement has not yet been set.
+         * In these cases we set the value to this.pendingValue and after the first render pass it on to this.duetInputElement.
+         */
+        this.pendingValue = undefined;
         /**
          * Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes.
          * @default ["FI", "SE"]
@@ -189,8 +194,13 @@ export class DuetPhoneInput {
         return (_c = (_b = (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.replace(/\s/g, "")) !== null && _c !== void 0 ? _c : "";
     }
     set value(val) {
-        this.duetInputElement.value = `${val}`.replace(/[^\d+ ]/g, "");
-        this.handleInput();
+        if (!this.duetInputElement) {
+            this.pendingValue = val;
+        }
+        else {
+            this.duetInputElement.value = `${val}`.replace(/[^\d+ ]/g, "");
+            this.handleInput();
+        }
     }
     /**
      * This is a proxy for the enclosed native inputs validity
@@ -207,6 +217,11 @@ export class DuetPhoneInput {
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         this.setListFirstCountries();
     }
+    componentDidLoad() {
+        if (this.pendingValue) {
+            this.duetInputElement.value = this.pendingValue;
+        }
+    }
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "label", defaults: "labelDefaults" });
         subscribeTabbingChange(this);
@@ -282,7 +297,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, 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, 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" })))));
     }
     static get is() { return "duet-phone-input"; }
     static get encapsulation() { return "shadow"; }
@@ -684,6 +699,44 @@ export class DuetPhoneInput {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "maxlength": {
+                "type": "number",
+                "attribute": "maxlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use maxlength to specify the maximum length of the value that can be entered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "attribute": "minlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use minlength to specify the minimum length of the value that can be entered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "attribute": "value",

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: '8e31b4732e423f363115f217c220217f85a3899a', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '4c9a0b3966b5b11b3f8286fdc7bbe83ce93f5df9', 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 }, this.leadingIcon && (h("duet-icon", { key: 'decd1fdc669965de735b9538d8256ea34b7d12b7', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'bd28f3d116506e2168fc3e5530d086fa0dd0edcd', class: "duet-popup-menu-item-label" }, h("slot", { key: '0aebe6bcf50f8fbbd7d89bbdc0c4f484f67adb6d' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '616a80b13b29eb90f003a163bbcded07a551b58c', name: this.url && this.external
+        return (h(Host, { key: '69c44a1d58780969eb4ac52879cd12d91f138a54', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'b4a7e9fc9c862bd2ef7e82abde09d9454e9b1585', 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 }, this.leadingIcon && (h("duet-icon", { key: '8a4412f1d2aa25c099780b3441d4ed06699fe987', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'a08f5aef8339a1c96e16c05f87cf60bf0fda3a0e', class: "duet-popup-menu-item-label" }, h("slot", { key: '1ccdab3f89ce6fc1ce8222e7219c6d68f99ab61e' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '0f2158f8bbbda5ef74e8b559d9c7399c15ec67b2', 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: '74e587e4cc5c0c431f068bb7974ee8c385cf4259', 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: 'bdce9e7ce0ae1db78450e59113a6a48de13ef306', 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

@@ -70,12 +70,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'dcfc9fe0c01bdd6a3c127d33e73c786dfe34403d', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '08e0c5687e205a7b69e0c9ce9c874061a5c77158', class: {
+        return (h(Host, { key: 'dc2cca9861a1e0c15b93ea6f29247986eb98d268', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'b0bf8b66f35c1edc6a61dbea64f18e3617ec2a11', 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: 'c44a877377e4e16e1cf651165ada068712de8a1d', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'e9349820426a672f8e7106f0376e5b5ca9be639c', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '7a79c417f607e37608dee33ea1a463ca87ed8736', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'fce0bc86243d0fe8174b4e1b5e0aeaca9e2fa285', class: "pre-heading" }, h("slot", { key: '55ea16147dbd175071917cee3beda6db4679a6fe', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'f5298df0419f9dda577c8ee5632a15e1860f8cf8', class: "heading" }, h("duet-heading", { key: '608bb6c15a2cb6abf5e4f175581738db58fe24ec', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '42abfd8c2e6d350602767b60f3491e0fd575322e' }, h("slot", { key: '4048b41700d0a54a11df20e4c1a180d662424b76', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'dc7662d900140f51c633ece8abcc46cc1187f5ef', class: "description" }, h("duet-paragraph", { key: 'c61e556777f7dc382d06c913e7e1990304aa5740', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '610970b31c93d2fe14c1d967a43105e3fe7737f3' }, h("slot", { key: 'c38b144ab61f06d8b8df9d072a89acc5c7357a3c', name: "description" }))))), this.hasActionSlot && (h("div", { key: '8206bdc5367fd9cca9eab63539ac488cc8233c14', class: "action" }, h("slot", { key: '162fa1fe7c8ead96253bc3e43bb0d663054a4c37', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '8e479735705a8fc5cbe67b78dc74d63eb351abb1', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'ca59fe0d082b54c7fcb3725d7ab17d9bcbdea992', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'bb932a867cca710efa77488065fea73293daddab', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '642577f6fcd203efd73700e4c553502aa2d56733', class: "pre-heading" }, h("slot", { key: '153d63289a49239bc9aecdba096675757d4a1630', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '6a7cad0fc8841e0e65ddacd5d482d8df246923f6', class: "heading" }, h("duet-heading", { key: '5262b84f2429bc6c7e47876f24bc7139a8f1b46f', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '3cf56a75df5349003df143f2aa22cf439847a842' }, h("slot", { key: 'e6879565328b3898ee569cd7a13ad064da0686f7', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '1b6ce64573256914244b57f7a68297915846404c', class: "description" }, h("duet-paragraph", { key: '23e88abdcecce551c435aee9f927d64ec0e9ad61', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e4e17be56c742e06ecafce3b10245e4a8fbeac5c' }, h("slot", { key: '87a1787857492630ca860582bd92d967899e6b41', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'd24d4f1279e861f01dd9b36bd8bf6d2a765b9321', class: "action" }, h("slot", { key: '9abdd9f8370819e8d49ae68e7ee944d7bd970bdf', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -182,16 +182,16 @@ export class DuetRadio {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '173f8f9bee06f6f1fce187b223c661a737e724a5', onClick: this.onClick, class: {
+        return (h(Host, { key: '5b1a38835b8478e9e31e2893f654d4a7da0de880', onClick: this.onClick, class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: 'c234b7ed5eb36bcce5c89ebe92b3347245136267', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '064045eefce1bcd83621abeba85129b345867a9e', name: "input" }), h("label", { key: '28efb57846fef34d8be372c9d9ac351120efa58d', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, h("div", { key: '7397b43b1104dbdc870ec0ad65793bd372062eaf', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '8daf569056a859f5362236e546a61e958ba4bcaf', name: "input" }), h("label", { key: '3acd012b17207cf38a15085d2cc868b3e4cc8c1c', 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: '1f6a2376b2c34c7f5479eac3817b3f3c92b7ca42', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, h("div", { key: '5fb433fd2fe57f3e560fdefcabff68999301596a', 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: 'ce0d325f055e68197bbdfc9f84f2b1f318483134', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '8f73fa5457e7e95a5e86c5c69875c10ead9e703a', 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: 'd6d6455b725d087219d8aa4aa261530ef6e00d16', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '26c388eeed2a7782327e859bc08f6cdd17a22515', name: "tooltip" }), h("div", { key: '7ebf921fb7de9817005aa82317f2cd21736baa48', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '8d0088c7a3b3951fcede92d7da5aae7a1eb8dc41' })))));
+        return (h(Host, { key: '75281a29a3832c1cb7da47661917bfafc9c62417', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '2901f0bea0d5dfc88cf8294e6327eae318126730', 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: '678ff82e3e50fcce19e728f2de3e6e5afdbab92b', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '9e6ab1dae2009df95255f36f15c81fffcfbf2550', name: "tooltip" }), h("div", { key: 'b5cafc4677568d85eb02dcd9db30a05415beabb7', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '7f6b9bf1351b7d2133068f7039aea53d8a8d51a3' })))));
     }
     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: '8ae2f8b801002f2d7f36a1f6f2c5d9de5e52d480', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '3faa6f6b699d012b9d6ff43f0f5255dee1842fe8', class: {
+        return (h(Host, { key: 'b314e267c1ad480ad5bde17e9dcee976fd141e43', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '87813c3a581e46540a20e21013e121db45cb7f5c', 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: '330e765a6f42437f0ec80c8fd12f02aa9c8f564d', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: '91a85bd1d5816c694a32882bbe3bce178afe76ba', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '9ccf4115591954ca7123216d7fda90ca24a3a06d', 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: 'b5d4bd9d56df7b88df2bdde8c28f1b01009e8821', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: '6c30c88731245730cfcf47e2d00a823147708e7d', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '3e72fea4ee736546b6eee5aa15e70c80d73ee4de', 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: '1b5b22965b01d2a7ae85b7339ee8645f8349f4b6', class: {
+        return (h("div", { key: '2a89e50996cd8e4042f3346509ddfa57d0bd52f1', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '54b38991bc5f22f1834a911aab5adcb3f5564728', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '1f0e154e3dc32e14ebf7ec696182b11915045b5a', 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: '2531345ee7783cc6b6c2e742abdf6240aea88bb9', 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: 'aaf1114df81cf75124d221b335b34836eab22c02', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'b1b61bd073925f8bb4ecbbe04a90ed652f029254', 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: 'de3659fcb369d0501251878bf6a9edaa334893cf', 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

@@ -265,18 +265,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0052e12de4aea5e4a3f67e031c90f4f6d9ad53d7', class: {
+        return (h(Host, { key: '08bd619c649c87a18350a6482f12d1e4f5faa74f', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '9aa2cbde134aa4bdfe60c540cea270c5db2487a2', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'bf374209112d29e4af9efff12abdf32d54b68b7b', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '10acabde835061194bee92f32e954d2912d768d2', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'be354ed8ac0f0f5f6e51a64764d311498a90f3a4', name: "collapse-button-label" })))), h("div", { key: '7c9a6efbf372a908873364f1140e57c8e085ea28', class: {
+            } }, h("duet-button", { key: '436c9918ceb503be3611af38dc0513ab300891af', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '64504fe187f7ce121654dbf25597dd06ef23fbb1', name: "collapse-button-label" })))), h("div", { key: '10852d822fc4164466dfe48b2ccf33904cae5e14', 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: '228646dca94886c735c18f35755b30d67cb3e082', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '119261686c6a1e4511d4ed3ba74d3c5795f83b34', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -284,7 +284,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: '4453deb9090c1ad53469a85232d2c188f9f2556f' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'dd02f8d349e59303232b4338d115fd192cb31f9b' })), 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: '092586b7c997c6c850a1e6c3af1379765d077b2f', class: {
+        return (h(Host, { key: '1423181d3efb8f77211a81db6dc7a415457b23f4', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '125c4e3f67f73ee0eed48dcb561349e28587aefd', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'e1786b2d7a0c258bdd3d92bb8132ea0c2371ab36', class: {
+            } }, h("div", { key: '3b08e02d99ce4d269a90522f896ecfb43608c79f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '1c60dd6abba084bdf4b29b9cb4b6e94d137517e3', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'cabd2f501a9c6826a30beb2bf40993d0942a1415', class: "duet-main" }, h("slot", { key: 'ee9b8efe014ed27a0e6838028d5060590444ee42' }))))));
+            } }, h("section", { key: 'be58aa5ae79e61f3ba8e2bbadb119d169ab51d59', class: "duet-main" }, h("slot", { key: '43f94baf777b2626fefaa2a85d752f3e4652ed94' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,23 +200,23 @@ export class DuetSelect {
      */
     render() {
         const identifier = this.identifier || this.selectId;
-        return (h(Host, { key: '3d3bc7d84000806ae8fab973ba04c08a25dc0c2f', onClick: this.onClick, class: {
+        return (h(Host, { key: '12696ad891ed3aac656379150b4fb42ee9b438eb', onClick: this.onClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 [`duet-select-variation-${this.variation}`]: true,
-            } }, h("div", { key: 'fe0f4b2d68a812713191449693d63fa56513164e', class: {
+            } }, h("div", { key: '48c83de632dfb790e5cde841fd86e518806ab9d0', 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: 'a44feea69dd179e6c27685de9074cf3fa966b571', 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: '7a3d46b3f60d283ecfa474b05a918fa8c505d1aa', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '3566d83ece8668e83b0ccde241ed49418ed941e4', name: "tooltip" }), this.caption && (h("duet-caption", { key: '709ed39dea050b314217f5de4190535166a82f3c', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'cf8a14439328e37ccc1d41c38190c18414b894ea', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '1b439a475ac5a6220bbab2d93f827c089a7a5c7b', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: '15182f28fa38955377dc822ab7d8ff61238cb4d8' }), h("select", { key: '99ca572fb0b31f28659712b18accef2b30225d4a', 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: '8e7c047411a37cd3a8a82415566d6f73e71a5533', 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: '58a180baf718e83ccd6afc154b0986098c378041', 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: 'e569b839a9c0c2e02624ec892239f94f84c0d2b5', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'd6d7c011dfb11ddadbaf95b5391c124d1e7a76f1', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'eeff5cb9ef75a161020d0c3ed5d7c4bc22cc2f75', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'b483936049468a651634c5d5e075c860d1ddbc91', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'eb3c277270c2177dfd2a2381d137815d22681d4f', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: 'b6a901c14de9ba56540e08e685b1ae4bd95bfde3' }), h("select", { key: '19653ed57dce9ee8ebb05c92530e49940e72dd4c', 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: '61d96c9c682e4789d6ee1c38c7e77683851aea20', 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: '05ac432d89ce773e077f01f7b272484f110f10db', class: {
+        }))), h("div", { key: 'c54b8f6526bdb4c98ea68c129515f218d0f6d72d', 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: '3c6969c19468b5a26e8cc95ec2947442dcebc42a', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '36c334a0f8ce00a2b0099d3941570f8526d15dbb', 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: 'f0698dcc03bf523766986c548fa5cad2a6b1875c', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: 'ae2878e5f962708b0a8cdcf15e22c79e9b26f9d5', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: '9f818a79660ccb1e79c0b5160541da183d5b371e', class: "duet-select-help duet-select-error", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '38b9169e9a7418f193b97512f6303a8e90215e06' }, this.error)))));
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: '975172b711f315f369710ab9999b4923e8fd2e6c', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4ad21d1d0deb94b461d329c447165357d6c3fe41', 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: '69d1a79414b3f6a979f5f949f16c386e79c92014', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: 'da0790b7bc5ef09391ac1b111b168e0ea4a699e5', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: 'ff0bd43faa6dee4142d0ae21c780becd40a73e8f', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '7b5256e5baf684112fc012ac735261731e128bb2', 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: 'dcc19a1624a88154af7cf3c3c895bde83dc28d15', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'e1a1750e828b0b337433d0cfcc2377be44a03642', class: {
+        return (h(Host, { key: '27f36b3527731cc1d47a65655e150c963b9a23d9', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'b3d7bf5649da0a77e9bee42baab54840e47f9505', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'a75be0a31d3bcef5b7c0191aa5da4235f8f9b548', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '19a03a8a14b1ec7a15c8938e031d73d78819bf00', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '84fe60ad6ee4fdcc2544b07c5c07a214cf5efb15', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'edb1df30260d26bb87ef59a97aa031c97e4dce6d', 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: '3ada6920466227b32ee18d3bdee2fb8762a555ea' }, h("div", { key: 'f2abaf3b3e3e631e48c4df538c397953f133c357', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
+        return (h(Host, { key: 'c22523d7e91ce5ef59f5553ed847309cc45c9499' }, h("div", { key: '9aa4f2e4c117c5f7c30bce27585c7abc4d5568ea', 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: '47cc62dfd72a9fd17cfd34e42ddefc84368f8277', 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: '0dd9f58d3af51af5179e5a93dc18a4ab34c519f3' })));
+            } })))), h("ul", { key: '428d17dde9185b071455325d5d2195618f4a0267', 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: '2f394e013dfe0a533524bef6f0649f57d1c2d957' })));
     }
     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: '9b3c4881b8b8c51625dd470b88b67988841b2ca1' }, h("div", { key: '9394034bdf632e6c75848d95faec2ab3ffd75ba8', hidden: true }, h("slot", { key: 'd0341130c130271d932639f4d5dc0678432272ad' }))));
+        return (h(Host, { key: 'fb5eafa552f0f72600a3cec4b325ce891073f5bb' }, h("div", { key: 'b982b99b868fee7e0211a9b0dba7306eb2615874', hidden: true }, h("slot", { key: 'e8501789a378faa695408b024dd6d7c83aa3c1c9' }))));
     }
     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: 'a43de6a4bae0a8c38852a11a7b384b7f104ec024' }, h("div", { key: '74f8d429039d38ea1151aeab159f34cfed375df6', class: {
+        return (h(Host, { key: '5a2691671f8db729580e5e163f0a4172065b60a1' }, h("div", { key: 'd00e9ad7eec18c34b53f35be55000cc238e96d41', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '1e7b359e2ec056100a22d4fcdf12a9afd3432f36', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'd56eb046a4f700defffcefd1c279149ab85b68ae', class: { "slotted-content": true } }, h("slot", { key: '4978e6989abb32797fd956d5bb35d1e860b63f71' }))), h("duet-button", { key: 'ba557d00ed023a0b31efcf3480e1b30b326e6799', 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: '106762507a1b6c28e334d0c383ff481b9a4bf8aa' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '4db263318b4e7dd0a0b79d2ce7db9708194246c4', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'e3a7ffd7b7acf798ecbcbacd26e721471c48c447', class: { "slotted-content": true } }, h("slot", { key: 'db2dbe58ad4f75648f0e98c80dd00a1909f745f9' }))), h("duet-button", { key: '9ece7898fa0ad9effd08cc728b38d580aad8e906', 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: '4f697ac0915ece52e0edb022923f05e2c2812cb1' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }