@duetds/components 10.3.1 → 10.5.0

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

@@ -48,11 +48,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6d31641d480353ee7f924029a31c94dc1747f1ed' }, h("a", { key: 'ea374446994ad7ea0780b8f4320247c718f08219', class: {
+        return (h(Host, { key: '44c02bb0c92ca03579e70dc6f79178099f38de61' }, h("a", { key: '26b45ac19043800a070894afec67517d051b6ccc', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '486173db589cdbf851d3a5dd9171990af84707bb', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'd284cabdff17ad2590e80ed02894fe87425507b0' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4d481450931bbf089d2f6d5ee7076aca7c3978f1', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'b47043814429787c833949bac92bae95b2001419' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,11 +71,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'd968cd5ac488d7cc0fea66408de412524dc88b35', role: "listitem" }, h(TagName, { key: '143da0db925d6a45f69a6defcc0d96710d395cbf', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '9feca792c6d12ed05344d17db4a5076ad037994e', role: "listitem" }, h(TagName, { key: '5ab6813f5290c5f323713e6015a46330089d555a', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '22ef7c16eb08f2a24bbd902c1e702103a8319621', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '9560bccb8d749a945592866e33279c9e1686f9af' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c152621621d193d9d80cc0984fe36d230a2b7a63', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '7b6541e7b7cab53fedf815feebc683b9f122e323', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'ab89cf87285d10e52798cd123c404acb69d6bf91' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '6bc587bed959b634caf6b25db7f3374ed538151c', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -33,11 +33,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd150209d2395822ac0ba4b0d6372bdc0ba5532fd', role: "listitem" }, h("a", { key: '46070813f893e645146a7ca8ea798fa455df11e9', class: {
+        return (h(Host, { key: '044fd632f4ea61ecd3bbbb77e3c2d0eda50f16a4', role: "listitem" }, h("a", { key: 'b910e6d15c696910ab231b49facb9cd3250d66c4', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'bac5752b20258b49e6b3210f071578154de8d8d8', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'efec03fcc7a033a4f9df871a4a087d7c9a04a0e8' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '46ede326e61111856df4318b018a4128b7743658', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '774a0d744c12e5d43783123c2d07d450a0ad0472' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -338,14 +338,14 @@ export class DuetModal {
         var _a, _b;
         const iconColor = postfixTheme("primary", this.theme);
         const closeColor = postfixTheme("secondary", this.theme);
-        const closingButton = (h("div", { key: '8152ba7d3c2f727e6ff706f2d9d0ffcc7163f1f1', class: "duet-modal-close" }, h("duet-button", { key: 'bca02a5a5b1baf6c3f875428bc937a7ca723e111', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
-        return (h("div", { key: '0afd4adbeb161abdf0e802f8d0f9aaf397ff45e9', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        const closingButton = (h("div", { key: 'b61aef40272ef152a04b32009608462e6edbef70', class: "duet-modal-close" }, h("duet-button", { key: '33eaf633dc95c400fc36c3d3c492ab09d4669eb5', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        return (h("div", { key: '90cf02b79031ce0131f2dec7e4d92557de03678f', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: '89056e2989c21985e3817e72f2baf7c6d4d81ab3', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'a2a015019a798028a1a0cea8fd952cc1428eb136', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '8a3e89ba3597519bb8db927cf22e104ae4673de6', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'b6bb8c2df5b032e0c0ac71938735caa11ad2533f', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -356,22 +356,22 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '15713c0a5ee05cf5fc82a3135f08bc3cea40da88', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
+            } }, h("div", { key: '155d1d6da0f2606cb31ef316f097852d7cdb7025', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'abdc98a5d8b3dcb63eacf67363bff0590343a577' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: 'ad50d422bf25439e3ba99e69079895ef64e2492d', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'acb1064c87210fd405931e54f517a74fffd1f838' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '602e0ef7ab4dcfb571b492b000d9287583462376', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '26292796644643c6e284a44ffe4e715e9c31e082', class: "duet-modal-header" }, h("span", { key: '684cc3976d13705d8316641c7967f3d3b913182d', class: "duet-modal-inner-slot-top" }, h("slot", { key: '744445f8cf06310430db406ca80fd33268701808', name: "top" })), this.icon && h("duet-icon", { key: '06964e8ee4ce265badcd709a94ad153307876f41', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'a5865fae767dc9c4d58f4f8569277af880ed5ce2', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '579b4d36a487ae61e60ba3f73504b8c8817b59eb', class: "duet-modal-spinner" }, h("duet-spinner", { key: '9350f333da39299c937fda0ef711f1f30a8c365d', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: 'f5d5789af558d4332a0683a7db5892f8442a37b4', "aria-live": this.variation === "loader"
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '17b2404b57b5a363c9e75a3c1d0c803805c9f124', class: "duet-modal-header" }, h("span", { key: 'aad3dc7341703d4b5e1820e5560086a09ea01d73', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'f2704ee80a6a925a0ac2dba6f7ca5ffb66725d5c', name: "top" })), this.icon && h("duet-icon", { key: '127d2a74dcecbc31a452318d8b491b8b720ed69d', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'f7c9cd02320985bb5ede9e1bb87415349986e62c', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'e6078337de87fc1f449347b1b8164a03b397efc9', class: "duet-modal-spinner" }, h("duet-spinner", { key: '08ded544a2c7cd799d0492beacd599df3b7be785', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: 'bf23f204e215b36e9a0ebf752e52d850d5b62e24', "aria-live": this.variation === "loader"
                 ? "assertive"
                 : this.accessibleAnnounceChanges === "body"
                     ? "polite"
-                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '509127555382cf321b5eeacfcd3b1a7f33bb99ca' })))))));
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: 'a9cae84bfc443ad938f202e5760a5dbae540bc84' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -216,10 +216,10 @@
   background: rgb(255, 255, 255) !important;
 }
 .duet-multiselect[disabled] {
-  color: rgb(127, 150, 165) !important;
+  color: rgb(98, 121, 138) !important;
   cursor: not-allowed !important;
   outline: none !important;
-  background: rgb(245, 248, 250) !important;
+  background: rgb(228, 236, 239) !important;
   border-color: rgb(181, 198, 208) !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
@@ -365,6 +365,15 @@
   color: rgb(23, 42, 59);
   border-color: rgb(120, 145, 164);
 }
+.duet-theme-turva .duet-multiselect[disabled] {
+  color: rgb(95, 122, 143) !important;
+  cursor: not-allowed !important;
+  outline: none !important;
+  background: rgb(228, 233, 237) !important;
+  border-color: rgb(178, 194, 205) !important;
+  opacity: 1 !important;
+  -webkit-text-fill-color: rgb(23, 42, 59) !important;
+}
 .duet-theme-turva .duet-multiselect svg {
   color: rgb(23, 42, 59);
 }

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

@@ -273,23 +273,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '745ae2dcace9c47a7ef0d12543fdeef0466cda02', class: {
+        return (h(Host, { key: '2347a9fc6542af294322242041d6881e7d46705a', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '392e8386b1ae4453c31049f6933621f02c0438ae', class: {
+            } }, h("div", { key: '956a141db6a505bace52938e5fe4806494f45159', 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(DuetInternalLabel, { key: 'db2bbe8e401ee1481fcb23a51a11579ed2e9731a', 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: '52abf8dc3ff55b51c1ae16184bcc9dc50702129c', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '55be043c566987567c55c3d2314b2d07c0577f39', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'a265ab223cdd9967ed589daec9141580a4ff3f84', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'cb0357b1b09b6910f52d620361c0460ab15a49ab', class: "duet-multiselect-wrapper" }, h("button", { key: 'e13a3b63a5bbae2b4a4e6c950819f2352c842bf4', 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: 'a44743618e01129e8ff089fd33468777a1094f4a', 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: '965fa8a9e214acc2a36ddfbe18cfc0b01f545c46', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '184f27527b7434414311eb106a448002013c5a45' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '180cc865574bb3d05cbeb09ff297789f699a4a4f', 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: 'be284edc78d0f0a72af1c1e13a99743ade09491a', 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: 'bd304ff02f89a093e0ec88c25543e96ae9895296', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '2f23d51d3671879786ba1407b56ae3222f9a5bf5', 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: '85a8c563721a63f0a34cce7cc459dd18d6280194', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '56a2689eeda397d20a42b167ddb099b920107e26', name: "tooltip" }), this.caption && (h("duet-caption", { key: '0c8e2c9a01b16cd4dcfa46d4e9ad7a656d5a3c74', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '4436df38933bbd41698bd155d710c0d2216d1f6d', class: "duet-multiselect-wrapper" }, h("button", { key: '99022f18da86f4373ff64c74a52dace5a2bd7d60', 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: 'e64ce99653325421f0618ad642a840e4b0cd3695', 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: 'ead81f383496a853979310009d9899727eca2585', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '34142a17a4b013c56292dff2eb224f6544afa95e' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '0608e4eb2995dcc8f02a1c92c35b5cbf545f7ad5', 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: '0b9a5d56df9e428d036f77c886fce63855aeae12', 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: 'ae5eb2b331307f54eeab1c6728f289dcda6b3f27', 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: 'c19292136aa2a2b0e9cfaeee91be6feed9b1fad5', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '30e71bff9bfce27f52025c9937f5346cd21d1a09', 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: '54e2bbd5a20208fe357972a728e46c25b19d571b', 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: 'd5883b8ebe1c051efd79ddb1f79dc78e5fddeb47', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '24482082ed2715da5f7c57cce55e2c68da043f07', 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: '5c900fa9f95cf21ca22c498212ec6cbd72e23139', 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: '321e1473d7c585419fb4e92e6d68817b0e369bb7', 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: '74ceeb2d368b87d7abc142ef277c7f3462c0dc50' }, this.error)))));
+            })))))), h("span", { key: '733dfa1e852f5b450de3e11e7d9bd9516c1c6284', 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: '4535a77dbbb418ceb1c63d423e390324f5d0f18d' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'fff23e9c9f994ed80cebebdf7bb16d05a0b13281' }, h("div", { key: 'bf9f4a0d164a27073a8f3be2fc14e7f14f39e479', class: { container: true, sticky: this.sticky } }, h("slot", { key: '4fa7cc506db4c4b6fa9ff5219ba7b7e56107a8da' }), h("slot", { key: 'e9e8c0e724f76feb3aa320207f5a3ef7a7ab5ac9', name: "mobile" }), h("slot", { key: '49e37c33533e3ba9c733660c0420d85a3a63e80f', name: "desktop" }))));
+        return (h(Host, { key: '7e22b4d7023564579ca7e937ea9b3e1c41383217' }, h("div", { key: 'cbd604f24c3d48b16771529aaf84590fbe2c349e', class: { container: true, sticky: this.sticky } }, h("slot", { key: '6d354508134cf4f829922e1d12b9163ed8796753' }), h("slot", { key: '2cde080603a8252ec4015dedd7166b3d3c59b945', name: "mobile" }), h("slot", { key: '9654b2dfc61dbbb9833a8b5df624bdb92adadc15', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,11 +79,11 @@ export class DuetNotification {
         return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
     }
     render() {
-        return (h("div", { key: '7dc46b88a1d5fb69c339262f5ef2cf5a8017b886', role: "listitem", class: {
+        return (h("div", { key: '0c265034a28ae5591df26cf2603ab3d045b45478', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'a75c52e0336ffbf56b1c852fe67f315816f75559', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: 'e0b83c432a0ff4c12f63516e0418596671270f52', class: "duet-notification-container" }, h("div", { key: '20e4d22bd11670b325e3130e255bf0596d2a43b0', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: '34975b80502bf22b225e78231721a6d800c1c5ee', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '326cc9425c9bf45adc67c51174773105414a5f3e', class: "duet-notification-content" }, h("slot", { key: 'c1f7f01a44a74f55bc2642e368095af65cce28db' })), h("div", { key: '3b5b190da2388e94e91a43490ff816a406c2fb66', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '8f26b04ba38b69dcb86b0ab8b6820ad63453c831', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: 'e573dfed62263051b2841cb36cfe1b3c00db8e50', class: "duet-notification-container" }, h("div", { key: '0e4d1b7fec55b7c69043f3beebefff071f2d1e04', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'e9086498a4ef7534f5a68956dad0a811486b41b1', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: 'd02944064c8c7842fb5556f2eadef2fc11aad3bd', class: "duet-notification-content" }, h("slot", { key: 'f4de0aed88ff1f2545d2d630c299fa7e73e62a67' })), h("div", { key: '8486cd8ac2797612ceae89c720b184c3e2f52805', 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.js

@@ -126,13 +126,13 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '9f4089715c79f3098cbddd19ecb0fe9f625e60dc', class: {
+        return (h("div", { key: '8e97a8e6a2058296cc10026f42860f3bb895b2a3', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '5fe36e672d516fc490643ee5c5141111ea68188d', ref: el => (this.drawerButtonEl = el), type: "button", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'b13ac8ee8dab57c43589f2a07ce1c3093aa19b8c', ref: el => (this.drawerButtonEl = el), type: "button", class: {
                 "duet-drawer-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '69aede6500156038fe894b681c4a06be6761a9a2', class: "duet-drawer-icon" }, h("duet-icon", { key: '1b9cdf160b899552f2ef1db63a1abd2d2cc7da0a', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '76fdbf1f66da5ce3516dcc73b198463776b82934', variation: "change" }))), h("span", { key: '45ca00e1fb494cea8fd4f275c511ba9b15b16891', class: "duet-drawer-label" }, this.label), h("div", { key: 'e069a59c71d16a47da7bd6b73266b9b919e8048c', class: "duet-drawer-caret" }, h("duet-icon", { key: '4a43d6c80a971e1ed468384a9a2b3e52a49177b4', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '94fa21716202a038ed322b705b4acff582c6cb00', id: "duet-drawer-content", class: {
+            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'bd4969fcb3d1f150d6a90b6c51a30c6be85edc75', class: "duet-drawer-icon" }, h("duet-icon", { key: 'd5ff03e6dc3d7149488ec7c2de6377ee31ddbd16', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: 'f79d92d82b2d2d60b4df0e272d0d394d61fd63db', variation: "change" }))), h("span", { key: '1199f0cd40d583e1c01df562f08bcf60b4698526', class: "duet-drawer-label" }, this.label), h("div", { key: '2e37bb3393dbae08571b683c09b674d7bc3e1e86', class: "duet-drawer-caret" }, h("duet-icon", { key: 'ec6d5078dfdfe96c112b9116518cfd0a61d03852', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'c09a322633b12ba12e6cc18a9bec6a8a96590dc2', 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-number-input/duet-number-input.js

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocale, getLocaleString, } from "../../utils/language-utils";
-import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
+import { clamp, isInteger, roundTo, SafeParseFloat } from "../../utils/math.utils";
 import { checkNamedSlotElement, proxyInputToSlot } from "../../utils/slot-utils";
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
@@ -142,7 +142,8 @@ export class DuetNumberInput {
          */
         this.tooltip = "";
         /**
-         * Step amount.
+         * Step amount. Note that decimal values as step (e.g. 0.01) may produce unexpected results and thus are strongly
+         * discouraged (but for backwards compatibility still accepted).
          */
         this.step = 5000;
         /**
@@ -294,7 +295,7 @@ export class DuetNumberInput {
             // handle cases where value is not multiple of step
             // e.g. if someone enters 199, with a step of 100, add should go to 200
             // and if someone enters 101, add should also go to 200
-            if (newValue % this.step !== 0) {
+            if (isInteger(this.step) && newValue % this.step !== 0) {
                 const adjustment = newValue % this.step;
                 newValue -= adjustment;
             }
@@ -317,7 +318,7 @@ export class DuetNumberInput {
             // handle cases where value is not multiple of step
             // if someone enters 199, with a step of 100, subtract should go to 100
             // and if someone enters 101, subtract should also go to 100
-            if (newValue % this.step !== 0) {
+            if (isInteger(this.step) && newValue % this.step !== 0) {
                 const adjustment = this.step - (newValue % this.step);
                 newValue += adjustment;
             }
@@ -393,15 +394,15 @@ export class DuetNumberInput {
         const identifier = this.identifier || this.inputId;
         const maxlength = `${this.localizeValue(this.max)}${this.getUnitString()}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (h(Host, { key: '2f0bce422783a7da27a9750a185bd55e5845528b', class: {
+        return (h(Host, { key: '81daee26177116322c1048713a28d09d8a36afe3', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '7c89eb8dfc7a08b0bdf2c83acbb0fafb80626b9d', class: "duet-number-container" }, h("duet-input", { key: 'b105894b4934b2fcbc87df94ac2d47556809f4e6', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '7e215203a35180b356101f9fd7ff7d4a31915194', name: "tooltip" }), h("div", { key: 'e37e08e25c08f8e8103b1c837e2a28dc50030ff3', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'a31ef07fda57ddd4732b228fa535a2236cd32c67', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: '9212db5abcfa94ffdd16ffd0e71ec775dc8f7471' }, this.accessibleSubtract
+            } }, h("div", { key: 'f7ff1854e40887b3b3aa14be2d350c23ec364c7a', class: "duet-number-container" }, h("duet-input", { key: 'a05dd4922337179d6fbc1b84cc0fbcd1c168f508', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '45828645242ce4779aeae9368f0631de124e855b', name: "tooltip", slot: "tooltip" }), h("div", { key: '229d18fbba76520c64109a4300dec29378432aac', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: '49918d06cee7e8878266d3f3ed9295d9fbf31102', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: '894e200f0b7ee004486e07d5a7f4c59640066da3' }, this.accessibleSubtract
             .replace(/\{\s*step\s*\}/, `${this.step}`)
-            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: 'ba380fee34a9923858cb8c4ed7cebb1e7155b69e', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: 'd168f42728f6841303e7a3663fb9ee54fa8c13c4', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '07a4f0464663edb651840f2f3ad716f2064404e2' }, this.accessibleAdd
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: 'eee91808ec61039f59fd9c7df8fba1c7f0c558cd', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: 'f146b62278677f506fa9c047bcf759432e3bd6c9', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '8f0efec2146187d6b3781d635c8445ee3673f032' }, this.accessibleAdd
             .replace(/\{\s*step\s*\}/, `${this.step}`)
-            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: '6e2a4ccac6b0be2c3f4d6da7b8c9dada5ca78701', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '03970396f2bc5e1acc1fafaa6e63ba2550cd2f8d', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: '12e8a56782a15e7788e7a087a46aff0535991517', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: 'cd675e89f9f78297f98bf0ec110d0013ccf0354b', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1082,7 +1083,7 @@ export class DuetNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Step amount."
+                    "text": "Step amount. Note that decimal values as step (e.g. 0.01) may produce unexpected results and thus are strongly\ndiscouraged (but for backwards compatibility still accepted)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -59,7 +59,7 @@ export class DuetOverlay {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0a1b75439ac03c39c17153b13ea97858f68b6045', "aria-hidden": "true" }, h("div", { key: '4690d5c28e640e90125ceb6280adbefb19c01301', style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { key: 'd947da491d318a4bb83befcfc756e140c9531881', "aria-hidden": "true" }, h("div", { key: 'afaa04313e1d9cb640378e12084495ffb3d35409', 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.css

@@ -82,10 +82,16 @@
   max-width: 744px;
   padding: 48px 90px 16px 0;
 }
+.duet-page-heading .heading.has-back-button {
+  padding-top: 72px;
+}
 @media (min-width: 48em) {
   .duet-page-heading .heading {
     padding: 72px 150px 40px 0;
   }
+  .duet-page-heading .heading.has-back-button {
+    padding-top: 94px;
+  }
 }
 .duet-page-heading:not(.has-icon) .heading {
   padding-right: 0;
@@ -172,11 +178,14 @@
   width: 60px;
   height: 85px;
   height: 60px;
-  background: rgba(0, 119, 179, 0.75);
+  background: rgba(0, 119, 179, 0.9);
   border-radius: 25%;
   mix-blend-mode: normal;
   transform: rotate(7deg);
 }
+.duet-page-heading .background .brand-shaped-icon.secondary-background {
+  background: rgba(8, 42, 77, 0.85);
+}
 @media (min-width: 48em) {
   .duet-page-heading .background .brand-shaped-icon {
     right: 36px;
@@ -209,6 +218,16 @@
 .duet-page-heading .progress-step.active {
   background-color: rgb(0, 119, 179);
 }
+.duet-page-heading .button-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+}
+@media (min-width: 48em) {
+  .duet-page-heading .button-container {
+    top: 36px;
+  }
+}
 
 .duet-page-heading.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

@@ -3,19 +3,30 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
 /**
  * @slot heading - This is a slot for heading content.
+ * @slot button - This is a slot for button visually above the heading. Use only variation "plain" button.
  */
 export class DuetPageHeading {
     constructor() {
+        this.hasButtonSlot = false;
         /**
          * Theme of the hero area.
          */
         this.theme = "";
+        /**
+         * LähiTapiola theme includes a brand shape at the top by default. Set to "none" to omit it. Has no effect for Turva.
+         */
+        this.shape = "auto";
         /**
          * Icon.
          */
         this.icon = "";
+        /**
+         * With LähiTapiola theme the icon can have secondary background instead of default. This has no effect on Turva theme.
+         */
+        this.iconBackground = "default";
         /**
          * Layout.
          * Values narrow and fluid are deprecated.
@@ -27,6 +38,8 @@ export class DuetPageHeading {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
+        this.hasButtonSlot = hasSlot(this.element, "button");
+        checkNamedSlotElement(this.element, "button", "duet-button[variation=plain]");
     }
     progressIndicator() {
         return (h("div", { class: "progress-indicator" }, Array.from({ length: Math.ceil(this.progressTotalSteps) }, (_, i) => {
@@ -43,12 +56,15 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '5cf22cfc2c34017d8c7467fe36becf60ba78bc75', class: {
+        return (h("div", { key: 'ea4be735731e17f47330bab5ecb5e9d65795a539', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: 'e9ccfced6335c96af6d7baa92a53db59d45b8b30', class: "background" }, this.theme === "turva" && h("div", { key: '830e60d9e2fdf9918b743766ae94353be9e85993', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'ea055759c169167bec0e0096e3c5ba6c7233b756', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '62ee3252ea809756e6a7de1f18017dc62b14d3ba', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '29ec53ff4adad92e0f2dd7d93c7046dfbb2d6c7b', class: "brand-shaped-icon" }, h("duet-icon", { key: 'a09e043d17d4f9c4c3ab8aaa7aaae33126df0d77', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '913c970c7ae47d0a56416b0102dd4a65648b0bbe', class: "heading" }, h("slot", { key: 'f573503b294909f8119d8d3f66d265c737570cd8', name: "heading" }), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: 'f2b0ab3aad8acc8071ace37653fbfb8243681056' }, h("duet-spacer", { key: 'ffca4d17364920c928844b6872d399ac2cd29303', size: "large" }), h("div", { key: '7a2c5f9eddb7eb0acc1187303e67dae2f5683e23', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: 'e159d4b2942446b90f8e09a492f57a6fa974d51f', class: "background" }, this.theme === "turva" && h("div", { key: '4f268e0c0adead476a918f94a41e9c6bd6fbe40e', class: "background-mask" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: 'daf14331254bc8f0b5181e0a803f0057f169e629', class: "brand-shape" }), this.theme !== "turva" && this.shape !== "none" && h("div", { key: 'a663ecceca1b90420088f692cb8bda12d579537d', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '9ea7885cc662e52f2df4d8a42557797280ba3ca3', class: {
+                "brand-shaped-icon": true,
+                "secondary-background": this.iconBackground === "secondary" && this.theme !== "turva",
+            } }, h("duet-icon", { key: '7edd9a52e8a515d9b946db7d3fdb95fa62ffa058', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '85a7494fc13886d24677ee09bf86ccca61ee31cd', class: { heading: true, "has-back-button": this.hasButtonSlot } }, h("slot", { key: '8c25416fc8f80c50830e36a2e2b1f47b609d0798', name: "heading" }), this.hasButtonSlot && (h("div", { key: '198528161f296ee1a0bfedbd1e567dde1b552783', class: "button-container" }, h("slot", { key: 'effe866326f9b75d678775a643d1e05f266b36fa', name: "button" }))), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: 'ab91a8ea60a18ad94a053b4d0e1ac1259cd1fbb9' }, h("duet-spacer", { key: '6f8e47579eeb1a2b3450dab080fb93ec8ad9a2da', size: "large" }), h("div", { key: '0602fe82a2bbf284687559d342c8b6589070f196', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -90,6 +106,26 @@ export class DuetPageHeading {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "shape": {
+                "type": "string",
+                "attribute": "shape",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"none\"",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "L\u00E4hiTapiola theme includes a brand shape at the top by default. Set to \"none\" to omit it. Has no effect for Turva."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
             "icon": {
                 "type": "string",
                 "attribute": "icon",
@@ -116,6 +152,26 @@ export class DuetPageHeading {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "iconBackground": {
+                "type": "string",
+                "attribute": "icon-background",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"default\" | \"secondary\"",
+                    "resolved": "\"default\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "With L\u00E4hiTapiola theme the icon can have secondary background instead of default. This has no effect on Turva theme."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
             "layout": {
                 "type": "string",
                 "attribute": "layout",

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

@@ -242,14 +242,13 @@ export class DuetPagination {
     calculatePageTake() {
         this.totalPages = Math.ceil(this.total / this.take);
     }
-    //set update current when mouse click on page number
+    // Update current when mouse click on arrow buttons
     async onMouseHandler(e, dir) {
         if (this.disabled) {
             return;
         }
         if (!this.processedPageLinks) {
             e.preventDefault();
-            e.stopPropagation();
             this.current = this.current + dir;
         }
         this.emitPageEvent(e);
@@ -394,32 +393,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '593c48b276e6b36bff6f78dc731f956c3aaedb82', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '446532b79dd77af3e71a152ae7dc208d45cc6ec5', 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: '7aae3263adf71d77b03be07c9ad260a4f4754159', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'ad020bd94ffb14b4b41fe139ab7e377deeeead12', 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: 'ca5700930cd45ccf48ac1d55603266219183b028', "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: '53c449d054bee784544f24ab8afb6273ac5cb870', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '986f34a0664b6dc0517824b88f996342d9f7116b', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '599cfcdc99c0f726f838efb59a5d18def811fec3', "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: '2376939fe48f1501856eabe413317653defbb0e0', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '0763fd9a3261cded9a37c556ee63d55fea0beec5', 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: '1ccc38d06b7a79f9de8ee762a9b9ab959010a436', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'b9779196cb93bee395de3583880280c988db2891', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8a0f11e5cd9f5de4a967cc56b0c1816a4de15229', 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: '830cc19f3a5580f96cef9cc9650221d19fc5ed95', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'fb1e5c5aa1262fa16b1723ec810757d830f62738', 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: '90fbdfd8f5c54e45a73e354771a2f3661467b1bb', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'bd02a81bf5945b1ebfb5eacf1a29f85f859e297e', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '93ebdbe18cdfca563aa5e6dc12a4a4fd6f68f639', 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: '9d0fa1e1e3567d5ba912861620b0d05f17a592fd' }, h("li", { key: 'e8789887f488d6445e3d2653abcf5564eab8afc2', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'd7e98b1d702e30e935d3dd1c52ad8c4bb187b0fa', 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: '997822a5c36dbe6c2ded94fbee6728bfa0d64f03', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '91d5668412f906d7c35702b7c2c28473d2928768', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '3a2113ad718394fa6365a41aaeea306b91f1431e', 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: '3fbc0fc4b9fa8b0c4595991f39e6266efd7e3481', 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: '1f324dd16a9b57aefbe62e60e56e5fe3d5af72ce' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'd8c3b8f2db2a2c642a63cc8781f56480d2c0d409', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '9117fbb075c437646e64eceb0316ad702c5fe8b2', 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: 'b80ed14f62fee001b600d720a7719174da3d0958', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '8059714abaf60464fda99e46b5f364e94ce75385', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'f9f4f6868664e410d8e0177afaf816328bce46a7', 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: '8b2dbe89ac7c1684e82ee77a43f0f2ca8d9b89a8' }, h("li", { key: '4f3ebacb88d1f21b2f358d443328bd59eec10264', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ab65423e15d3a7cbd4c4fddf42f976e3c0ba9ea2', 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: '469b36535535c82356ae0aa5bb58dd1771d47dd2', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '222dcd79d07ae767593df35766d0ebb1686e16ee', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'cf4ec1ba0cb36a0c2cd00b8a388f472a58a2e326', 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: '4a9496ccdfdc6475a581a76b618897cd8e81c175', 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: '7168d8184d99f05d1ceb390687004810f43cf957' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'f2497085cb58ccb9c65db6f9699ff4b0d45e881d', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '9eb3a7eb684367f52a0bb31681402cf357b41493', 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: '30e54f85dc44e0ab900c5ee84e1e581658fa625e', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '86a7ea35747c42719c394062da51a74f147a8f0e', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '136b42193fd165e8845aa55cbbfdc4c2234063ec', 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: '5bb0466c1c108b1dedf6a0e2d5d67f0408037c85', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '4c8e76afbdf203f29a8a4096bf4870b15bd9f930', class: {
+                : undefined }, h("div", { key: '84e6618b71439ceea94b5be66dfc9ca935dee2df', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '5cc6fc85a3cc763f9b5bb3f5bd7c2383e273f09d', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '1f3f2dc875d130ddd2e01643fe0b69a6c32325c6', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'd84bd849c47769f4863cb38218e8851e7ff88291', 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: 'a5c496cb09c9be08249bee069439a3395e7897ad', 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: '339d7f334ac903a87caa8699b31761b411a50c9d', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '2e6eb9240c1d90bef1028d0b6eabf8d74a178b17', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '3179b9a09fec7d31c2830b91a6958dfa2cdad21f', 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 })))))));
     }