@duetds/components 9.15.0 → 9.16.1

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

@@ -223,23 +223,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '5b6e1d90d6ac55b6572f755b273359a4942de03c', class: {
+        return (h(Host, { key: 'b8cb97bc0d21e85be3db01ef83438fcf7b4b5923', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '42c64faf69c0e05c608d915ef295c7f04507de3e', class: {
+            } }, h("div", { key: 'd93b323c2643eac8e8c20914bbf67fe08d7bb117', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { key: '62a7becf4dc2411071c59ba7aa11ac8ffe59d10f', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '1af019df96ed925e720df2185ce8550e17bc3d13', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '12aca2ebbc428087ff72677118ed94b3937626a1', name: "tooltip" }), this.caption && (h("duet-caption", { key: '019a13573c4f09327bb85d19d78fd62df2a19ec5', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '6be290abbd25957f4849d67b2027cc8be3bd3d5f', class: "duet-multiselect-wrapper" }, h("button", { key: '97d828de6991623f141f37b096cfacd3f2d71893', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '84fae0748a4ad41ad9acdd9f84914f8cb6d86a73', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '1099b73e404bff6a29affe5a9ac8d274b3043635', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'd3ffa065cbdb21c570d090ab5e00bb66d7f61e5b' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: '36d83fe06bdeb6fb2ec527ee00d0b4dbf516d2b4', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fe716d3a1dd834f3e0ffa400adf5c6c739c597b4', 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("div", { key: 'e8a2854bf90c63117909679f114a33b05e90d875', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { key: '943b19c37d249d61065e1a61efb7641a2abf3f38', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'c6cd56b231fdbe547f7ca92aea632eefa550f748', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '1141d203347bf35375928fa88e20cf47ba9c7140', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'e1634b690e6ac67235b4720571d0ea596ba7e414', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'b2d231bd277ea192e338aa42274665642bef854e', class: "duet-multiselect-wrapper" }, h("button", { key: '807718e802825096cbc1cef4597d8cd2f44ffd71', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'b33e295a375ecae8c1a0f59af9fa1ac0e3a3a829', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '1f835b434209839e7f47d9c87815987f96a6e30a', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '45b265df57cdc72a40695cd01fcf78c47dd5ddb1' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: 'dd061d5dda63d16eb39f113f78cd0c5b6b3e0158', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '759232c06c78ac2c73bddc2afad5f4fce57f6667', 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("div", { key: '7a4d4b2de7f4baac9066570471fdae9fa2bead13', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '6caec2f7891c084ce21925e0e88c89b3fb8003ad', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'e6d0bb2f3dda58a1f067f25d29f51a39a1fbacf2', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '44ed480da7790492fb59104916824512823db17b', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '69a2110105193b7a9b82c75ed856e6d8a9e8913e', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'ce760b620c954a99a9fe0fa65957d8601ad066c5', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '3901f1df01f58804fd5d76a83198b514fd0afdf9', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: '24258b589cff6e202daaea401563647f8521ba3d', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'edbe9b532e550088d66073eeca1a521ffe478ad7' }, this.error)))));
+            })))))), h("span", { key: 'cb7b91a522d2bf121f1f140298aea0c00920c24d', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '6070367e449abc5319b659fb95abb83fa0ee06e9' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,6 +31,10 @@
 .container {
   position: relative;
   z-index: 400;
+  pointer-events: none;
+}
+.container * {
+  pointer-events: auto;
 }
 
 ::slotted(*[slot=mobile]) {

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

@@ -24,7 +24,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '399e510569b42fa52d9461dcf6e935858bbaa763' }, h("div", { key: '93717d9be84024edba4544c474b225f4c150ec61', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'e49c0ec868a936a63599023d6853b2eb0ccbfd9e' }), h("slot", { key: '91564d4869ec5966bd1e6f412543a793985fd5e2', name: "mobile" }), h("slot", { key: 'f26f92f774eecd3513fe969235c6bea01e08586f', name: "desktop" }))));
+        return (h(Host, { key: '5288d0cbb1acf6d59f658b73f1807cc212a44aca' }, h("div", { key: '70f52d50f07ec33a748e05d621fea44ba4ee70df', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'c614632726b0e7b71226eefdad8d56885c63941a' }), h("slot", { key: '9d3136d7a82f76fc96297bd541e6fc8a814219af', name: "mobile" }), h("slot", { key: 'b000616360f4e56c0ff447b855f323cfe50cf2e9', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,22 +83,11 @@
   border-bottom: 1px solid rgb(212, 223, 229);
 }
 
-.duet-notification-badge-container {
+.duet-indicator-container {
   position: relative;
-  width: 16px;
-}
-
-.duet-notification-badge {
-  position: absolute;
-  top: 6px;
-  left: -2px;
-  width: 8px;
-  height: 8px;
-  background: rgb(0, 119, 179);
-  border-radius: 50%;
-}
-.duet-theme-turva .duet-notification-badge {
-  background: rgb(198, 12, 48);
+  width: 10px;
+  margin-top: 6px;
+  margin-left: 6px;
 }
 
 .duet-notification-content {

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

@@ -43,11 +43,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '22f2597d7f520c03d164b9612b1f619486745a09', role: "listitem", class: {
+        return (h("div", { key: 'd277f46ce75b675a1b2dc80863ab5c6e79608d77', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '825bb432d6d6402df953b5a1a1f67cfddfa00931', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '669563019a7dda0a692965ee8fb616692c3be343', class: "duet-notification-container" }, h("div", { key: 'fa7b5612cf3b5a172385a915d09e23a1b12258a1', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '21a94b09ee6ef41da16349b53c39c66ccc744db3', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '89a22cdefb3ad8530b55a1a22dc44cb51547a9ec' }, this.accessibleLabelUnread, ":")))), h("div", { key: '6c08f36593b743d1b28dfef6ff96e60c1f0a5f2f', class: "duet-notification-content" }, h("slot", { key: '74584952dedc2d734b8c04626fb0377c34d3d183' })), h("div", { key: '4f6feeebc9b918683300bd434eec573912291a82', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '64c9209bdab15027121f6c52ef86327ce415f685', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '9fa32762c6c1805a3c15d1a57f5882c82d36607d', class: "duet-notification-container" }, h("div", { key: '80bb71a20d0c3f7c23d455758025b080e128ca35', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '4ea88060a28ed5abad5ff09dbf9fcdbab758bdf9', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: 'b3c53a5318b7dae17185948ba480ee2665e8f67e', class: "duet-notification-content" }, h("slot", { key: '88463f9aeca48107382f18f377132015ef037115' })), h("div", { key: 'cac28a3e91a692ae7ad32bdb95768b1c39141c54', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.css

@@ -184,21 +184,6 @@
   transform: translateY(-50%) rotate(180deg);
 }
 
-.duet-drawer-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: rgb(247, 178, 40);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px #c18b1f;
-}
-.duet-theme-turva .duet-drawer-badge {
-  background: rgb(247, 178, 40);
-}
-
 .duet-drawer-content {
   display: none;
   background-color: rgb(255, 255, 255);

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -96,10 +96,10 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '8ef9649e5f79d548b8ea459e702e8cfac4fcfff4', class: {
+        return (h("div", { key: '469b8f1022a88519a9f0aa400d56641c29e11b88', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '88f5571a59e721e77c275927ba134edf616f8c2b', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'ae96c1156e5f3533c6cfe14f71cb06e3d5f37dcd', class: "duet-drawer-icon" }, h("duet-icon", { key: '25623fed9e75f768b6617506af5f24d47cf491a4', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: 'b2ebd4178aa5680e97f5ff9f0b12fb6cb92b1e33', class: "duet-drawer-badge" }))), h("span", { key: '9f8446b2cbbd5041e0431b3e724364364493e773', class: "duet-drawer-label" }, this.label), h("div", { key: '162eea01bfbd402f5325b4428ca0e75d51cf1ab1', class: "duet-drawer-caret" }, h("duet-icon", { key: '93086f79bf7f637b9933ed53999718cd2797d2c2', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '106c804293207a14600e49af7f996cce568d0b5c', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '00b263a2e4980db5c31e03994c347871b024b588', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '2cde7596baa2aa3ab9465213d5e5b500c33310f3', class: "duet-drawer-icon" }, h("duet-icon", { key: '220c78141beee80d57077b270e8521b633128201', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '25ccfdf0643a4e7d41a36479cf43dc94db12df4f', variation: "change" }))), h("span", { key: '9b416e1ddcbc0acaab40f5c8bc6c5f9885037c8f', class: "duet-drawer-label" }, this.label), h("div", { key: '157c0eeaf53edadea7ee8f8c6f4a526d055960ac', class: "duet-drawer-caret" }, h("duet-icon", { key: '8f0e4deafa0f3550173266e0934dae7fb2dfcc99', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'e77866382b60d4c6bdf4d2526f9913a333e563b8', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",

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

@@ -35,7 +35,7 @@ export class DuetOverlay {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1e8d70b0f9dec6f2f735f297d0a7383c56846292', "aria-hidden": "true" }, h("div", { key: '467d95faee164cb8945fb2c5ffe076a5a0b4ee8e', style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { key: '5e3e90d9cc500a686dc0a5a0d1437af1404b2bc0', "aria-hidden": "true" }, h("div", { key: 'f61a112560e9a09393cd1f092201fe39b992b460', style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -35,12 +35,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '4bf323f7f3880de300ec37bf1cad195a8cbc5be6', class: {
+        return (h("div", { key: '2875eb37016d827e7cd1e0f8d371444b7c76c3bb', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: 'ba9e048853e596861f47f1d7a53bbda463cf3e93', class: "background" }, this.theme === "turva" && h("div", { key: 'e91b82c9756f702b8511585e96a16b756a8bf010', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '457b0dfb63e20cd8f67193625f073f7d77d74468', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'd28811c585280049f3e7d5160b7306c5dc3e6bf0', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '2fe96fc8b40c2384570ea7d0ea3dd968f7c30c34', class: "brand-shaped-icon" }, h("duet-icon", { key: 'a2ffb32d52eadfa643b80433d39d49d90fcdfc77', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '1fe6bd4221110dc7fbc3d04715edc6497e4b82d7', class: "heading" }, h("slot", { key: 'bd46a7403fe998b860885f6fa89e984c37d8dc76', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '3cf7edbd42680a200cf99c59e1e448cd8d64c6e0' }, h("duet-spacer", { key: 'f86c8309c76219962a4044a3164f48061a24c668', size: "large" }), h("div", { key: '0b0616b9650b9d98d5150152bbe9914a31e8b7d3', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: '47e1dbf1c820a033dbda5ab2947eb24579dd9b10', class: "background" }, this.theme === "turva" && h("div", { key: '287e0066733158363e3874a95817a762e809da1f', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'f027b1ec25e9cdac8567c3ead047915886179621', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '8bf49eda00cde3160850bde060081207d43137b4', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '8c32dee388c499ec6bc26efe8bf82917f72539f4', class: "brand-shaped-icon" }, h("duet-icon", { key: '4d59ed320390cc69707e761c981ac471a6e7553b', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'd9673f6ff5e27fc94b0bc35ff1baed4d8a259f8f', class: "heading" }, h("slot", { key: 'f4d9a0248685888feba270f120dbeb90d10f8676', name: "heading" }), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: '6bc7886ae809c319e50005d6bc4ec44552c48256' }, h("duet-spacer", { key: '1792cc877c99c71d244b6180e9b95a0c1d79bf29', size: "large" }), h("div", { key: '2330bdd54dcf3eae2f7f34b97d81769da8138971', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -342,32 +342,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '550a0fc5ef320fe167a76073ac541e5c7d5fc906', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '7276d529426c05ac4586f1111615893e89192ca3', 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: 'c9fe96fc3da1353342e9b864e7ad2fcf711dc17c', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'ef4ca286ceae883a08fde9768c168d54d9e3b251', 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: '6c876ae7965c0db70dfc9d4bb38185b3400fd980', "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: '491ab26e71e2274ec1f3ae9f9fa807c96c26988f', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'b044281e69261b30b387c5511bac3ff44cceffd3', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: 'f8786d74f5cfc028016b66efc34c6a248b0b3795', "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: '79781be8b7faa9eb353efcf74864c83602de956b', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '8ddba22cf4f5ecd14ee57316062fdccb9fc92096', 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: 'a6255e0ba8858f57f18821a3b1586d069e668c60', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '9ed42f129f8f0c87da06196b110c8d556aeb279a', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8497e8b2e090635cf36df9342a57bd69f6c0ca3e', 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: '63c11bc55792509810011a9b5998e28b806af088', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '00d898898b26870fb0aa71e5003cee8e322d6e53', 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: 'fea77adade297e5dd4421b10c951ae0a9c008d9b', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '785127577a59b664ac24dd84ba49fa4ff766b12f', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8f433ca73a21d2593b5993c33a9921f1773eec76', 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: '2e20e28716d50f15ff6b3d0155503885c6d4b1f9' }, h("li", { key: 'e7ca743b6441e11f4e7ca05f2d70bd51e0d8249f', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '0ca7e2d7f9b372f7e8159b415f65bb0e034b4412', 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: 'd962fe9e611a86d7a920a79844e4f218f612f2e0', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '0c98e2881a6a27df7c04f39885fdb0091e576e63', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '60657c4c2e7d780ba28f043a8bdb4cdd2bbe056e', 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: '04541316f789326e8beab65643257d6163dc7862', 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: 'fd65168afa2ec2fda465bbc67f65fbbb7ef82fad' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '16f9aaa144f051f8b69d077c82c7b1373df20533', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'cb8a5a9c94e69471f20a34674e70e5033461f6ca', 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: 'f0f2535ec2b567e905d09e8b53ecb0c8c8356a3c', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '0b55a14d5c021e0287574d8b0087d539286d0aa2', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ffbcc148424ed5780261538630d9bf3838fd004d', 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: '189f029ec26aec1ef07fbcb690c58bce6189188c' }, h("li", { key: '32959efe57c7ff493a1d3fb1f75c7c6f2826eb10', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ec984a6771777da0459f194833dd6bd50ca94d7d', 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: '2962bb3d7451604a3baa097b6f3ffe624a28b25c', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'ac310350a88731d6f20e86177f80c23e4ec132c1', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '06a7f463a2fb478763233c6a30c57a5f52186b82', 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: '05ae094e5f561fbc52a573bc98166902fca7a8a8', 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: 'cf4913427876f3f02fb1dd5a52e64cad8c826725' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '5261de2729dd37d92bb70e67ab076640f6d59b84', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '7013a952e25adacaad0c563e842e08c63029007f', 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: 'f85a76e62df9db2edea74f9b4ff399b534b98b24', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'c6f67eb82e7d7d0d293a855ab9f78db120c8db28', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '39e8d8a0ed0c6ba16e690671d8d614a5b5bd7586', 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: 'e3555c707cce955ffa25c1a0a0f69e87b00aa930', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: 'afe74ceb64b04457870df86a203cead270c0a576', class: {
+                : undefined }, h("div", { key: 'e506d8d9edd2a2c3405724feec0f171e0acacac2', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: 'd62d774a158f0bda48c574a9717e7a42f357bab2', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '2349f3eefaa6ffd9a681fe51fd4897e96087758e', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'e90288259fd328203b00c05f92682d44d5842e82', 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: 'b2b64a21aebddfe74abbba43fa76cc3dcbd1c1e9', 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: 'b47b3e1145ab9acec968a959eb2dede859183893', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '0d0a88080e449b5b36f8c5ac22bff1482f5bf2ac', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'f216759c8c8a85ddfd5b503ade45223c157baef8', 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

@@ -21,7 +21,7 @@ export class DuetPanel {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '13228863e0bd8364a1624863047eecc22101529e' }, h("section", { key: '0548dea2315bd39b2f55b3796ebb9f7c0d29240c', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+        return (h(Host, { key: '8b846b25b51818d64ede169d7eb7a178e7620658' }, h("section", { key: '9825b3985ca00766d50876ba21a7cf4fc8aa1e64', "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,
@@ -29,7 +29,7 @@ export class DuetPanel {
                 [`padding-${this.padding}`]: true,
                 border: this.border,
                 "duet-m-0": this.margin === "none",
-            } }, h("slot", { key: 'f83407ac8d792c512b5df894f066adefa37bf3a4' }))));
+            } }, h("slot", { key: 'c5470707b941b16e0ea79c1a13b6b9b6056f4e22' }))));
     }
     static get is() { return "duet-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,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: 'e0a1fc0374987c1390c1139195f8dc69bb497da2', "aria-describedby": this.id }, h("p", { key: '89978d42d63df315736996c9bb4c264098d46fe3', id: this.id, class: {
+        return (h(Host, { key: '6c38dc5fb6f87779ecd9ea5b619940c7f867f52d', "aria-describedby": this.id }, h("p", { key: '8f022c00f776608c4f37b84de10e7fe8224552d9', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -40,7 +40,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: 'befa3faf8f7b1f565f1a17d2ae668c49b7694db2' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '0a60d3f54e35dc856a508c399dfe965695761324' }))));
     }
     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",
         };
+        /**
+         * 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;
         this.setListFirstCountries = () => {
             const listFirstCodes = (typeof this.listFirst === "string" ? this.listFirst.split(",") : this.listFirst).map(c => c.trim().toUpperCase());
             const listFirstCountries = Object.values(countries).filter(c => listFirstCodes.includes(c.isoCode));
@@ -91,6 +96,8 @@ export class DuetPhoneInput {
         this.name = undefined;
         this.error = "";
         this.tooltip = "";
+        this.maxlength = undefined;
+        this.minlength = undefined;
         this.listFirst = ["FI", "SE"];
     }
     /**
@@ -145,8 +152,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
@@ -163,6 +175,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);
@@ -238,7 +255,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"; }
@@ -640,6 +657,44 @@ export class DuetPhoneInput {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "maxlength": {
+                "type": "number",
+                "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,
+                "attribute": "maxlength",
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "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,
+                "attribute": "minlength",
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "mutable": false,

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

@@ -69,11 +69,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: 'eade853d9656feba3f1c183a9d496b056b1efab1', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '390261bc354ca208b61e9d653478dc2a9d6db956', 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: '0e33f555ecced822df70e017274ef9b2a05806b3', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '7223f5c991169e250db10d39513a14379e8a328c', class: "duet-popup-menu-item-label" }, h("slot", { key: '0ef37ea3f2a8246a7fcc4d611cae5792fedc6588' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'c79c060559a1fe3698b321ba3f91a95949cf0320', name: this.url && this.external
+        return (h(Host, { key: 'd62c7b684bbf98e2ff38ae6303e7aaad03942ff9', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '171d91b4a5f612c2b60a7c908ca0da3a0824e2fd', 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: '37db0ce85c42bb23dd33c522a5ebcaa174df58fa', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '8af23f7a78dc25f8d1d05adfdd8dc3bd1d489af8', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ef86e949a4bacdc7755e6e49f5814d554584a9be' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'e20daf8a4e639ab2369cc9b8f5a1c725480f60ad', 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: 'bef480bed8100c06a5f8acf0e059dab3896f94d5', 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: 'e2dd555bf026bf0197428aec002bb0d49f532bb5', 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

@@ -53,12 +53,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'b3cf1ece939303bd018e7867fd778f5a87ee3cd8', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0092deba7be1b2919449ad5dfd8dded164e87f05', class: {
+        return (h(Host, { key: '8f689b5d1894c5e0662f73aea0aed2b93d693d72', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0eddae7614061bf37233ab26b7c5ce7960961cc6', 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: '7e1fb4a4ea214ab7e20adc52f39bfb32ed8e2a1c', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'b5a0b853b6acadae7c97d6fb4797227c2a7ae28e', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '14e1ac388a095ef0c8a8ead34110ec359347362e', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'd5fbab6b6a608b6e73bc99ffe0491e712d75086a', class: "pre-heading" }, h("slot", { key: '5e9f652880fce32993f4706a1a161e0a6ead70b7', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '3bf90e8da8519381d513cfdedab8ed05812c6234', class: "heading" }, h("duet-heading", { key: '2d7fddfc7c1ca3ea3f2404bab4c61c9403482982', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '7478054b7ce3217ddac0c125bf03d026b19a49e5' }, h("slot", { key: '4c8bab71593cfcbb330e1bb2f5b903fe4825ddc4', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'febc65d2b2194bb72ce1c8fabd590a1f4f4103f6', class: "description" }, h("duet-paragraph", { key: '7d486fcff20946fe85ebe4d52aa0583e75edb1fa', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '7492391b20821a6804d420fe4edcb15955dc0495' }, h("slot", { key: '5e18314dfa768889fcbd6e1516ab509eb5436c15', name: "description" }))))), this.hasActionSlot && (h("div", { key: '9b12685d626e2ee470edd33c00fd9a17c5c450d3', class: "action" }, h("slot", { key: '2b00177a0bda18642f776e2ce56eca6c826e267c', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '6c2f3bc4656a8fdace5aa5c9d871dafe76f36484', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '5b937c96ac8b623cbeb5e6c280dba1e19744d67c', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '7dddf830e713a82cfed044e9846cfbaaed422d76', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '8aa7b7e2c6781e15d2a4a6bdbba72fbd1135384f', class: "pre-heading" }, h("slot", { key: 'cb0fa806c7517362d4da2ab9870de84dfcbc8c16', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'a6a86cd4c7d75b2c0649d416bf286c04e4e28dbf', class: "heading" }, h("duet-heading", { key: 'eac343c0aa5b97e8d708be8f60893caa961cda4d', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '0b25be163809e467df3efe5c4803ba29cb548297' }, h("slot", { key: '7a054f1b24cd8d813da34c62911c6b22bfd52613', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'ae147d63613bfb30bcd55188741a88817a6268b9', class: "description" }, h("duet-paragraph", { key: 'fcdd8b0f8c9863ee1fde670de8689464b093aa48', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'cae433f1bc9c9483bec0e92076e2b137ed489001' }, h("slot", { key: '8b26833d0c320e0df13b6f47170914c604e6a0a1', name: "description" }))))), this.hasActionSlot && (h("div", { key: '718dbe99fd6852116a62a6fdda6b23059fe2911d', class: "action" }, h("slot", { key: '2524edf69cde6300e52045a9069637465658623f', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -169,10 +169,10 @@ export class DuetRangeStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '0d213325a438908c6fbb5ef3be056baf2dd9a9cc', class: {
+        return (h("div", { key: '38130851d0d8f6035593e95652d33059ee2887d0', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '2fcef9d93303d111aa7de17a44614ae8a7be97b9', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '8cb9d3c298a12c9b4e539676020702d346731b76', 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: 'f53a8b31d7f5d5fa9df56765fefe8096d08eea44', 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: 'd37af09c95ad4ddbee42896b59b605e0582b1395', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '7045f2fd9e678036cb7d20d1877f60405198e1fd', 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: '312372ac0a265b90b2e30a0fab64e4b4a8738398', 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

@@ -228,18 +228,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b83340472bd0299ef946a14d98cca2c05dbde0b2', class: {
+        return (h(Host, { key: '3858f9356ec3ea38a7c475ce2d2fff6485827f82', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '60f4c2b0a0c9042965e8b2ed5f84dc0643b04e58', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'b142496c0e6686103983b537b53ccdc7e8cae7c0', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'e838bec53c6b51ae8bddb5632ad6571aec939faf', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '7f29fd420848f2ced7b844ebd51e707e120ddb5e', name: "collapse-button-label" })))), h("div", { key: 'a993a456f32f2f7a3e87fc8c0737b68969899225', class: {
+            } }, h("duet-button", { key: '50d5f6266a0f0432cd1dd752a00260d5246890d3', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '5c05fd2e927df5ebd7b5c2cec3112013b58cec01', name: "collapse-button-label" })))), h("div", { key: '33f0efaf3fcc09241a9e75fa75b86ef093bc811f', 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: 'b2a6a9f2553d32e89ac185915c85ab5c5888b2f1', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '6b0f1e40aa5c8406b448e93bcecb8343a0a883a3', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -247,7 +247,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: '8e376adf402c2d4b3788c6fd43b247b296feed13' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '77747e312df865dc66478dd32fcf87507bde8016' })), 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

@@ -14,13 +14,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '7243686dd34b2a76a253f9d9e8961daa0649da26', class: {
+        return (h(Host, { key: 'f512bf9741608c9c04847ad772f19788feee6431', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '9d44e3bc9ca4c7f662006425eb97a5bf0964edbb', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '3796d5bdee3c678105506cb6975bba6bfa309381', class: {
+            } }, h("div", { key: '9020dcc8f511fd02b4a9d19663ae65696107d20e', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '16617879cac9b9b1ff776187bf4a3fcc8dd5f8eb', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'd41ca54533dc53ef39df66aa4725b958dfa46677', class: "duet-main" }, h("slot", { key: '870419b7ca6283a06b39aeb75d7b9cea8b1f49d1' }))))));
+            } }, h("section", { key: 'a62bcb0c68b4104b40babe31e3113d457c784414', class: "duet-main" }, h("slot", { key: 'ae6241e0135d468cc3a4a22b4c1cb8c52c64d23a' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -169,7 +169,7 @@ export class DuetSelect {
         }))), h("div", { 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", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", { theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { 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", null, this.error)))));
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", { theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-select-error" }, this.error)))));
     }
     static get is() { return "duet-select"; }
     static get encapsulation() { return "scoped"; }