@duetds/components 10.0.0-alpha.21 → 10.0.0-alpha.23

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

@@ -310,18 +310,18 @@ export class DuetModal {
         var _a, _b;
         let iconColor = "primary";
         let closeColor = "secondary";
-        const closingButton = (h("div", { key: '63c867138562671a4c5ab6e4b5ad7a811bcf942d', class: "duet-modal-close" }, h("duet-button", { key: 'b9200b1b502dfc4b93b6a12c4d82cc133b37c0b9', 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 })));
+        const closingButton = (h("div", { key: 'ec3d40550fa55963fb7593d76847c9cd88ce7d7f', class: "duet-modal-close" }, h("duet-button", { key: 'ba63577c49f70ce5a0afb069c611cc71889a1ecc', 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 })));
         if (this.theme === "turva") {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
         }
-        return (h("div", { key: 'efbc2784b7c967c93f016c81135f9518431caabd', 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: {
+        return (h("div", { key: '45ef05dd96f31c9f905e06a7fd39458e896342ec', 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: '33f82df6db25d897f767298b22eed3f8dc93c89c', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '550a0b0cc5d2a1ea142ea858793fbb51841c691e', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: 'fae07b0b15aa32b393f28bcb70a2807b67d9afc1', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'c3afda30fb6503e4f9f2a6bdfd61b5ffadf33b98', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -332,18 +332,18 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: 'dcb18769c9d3e5297039080ee55bdee2347b4caf', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: 'ed730970e831d8b6d399da50b2b7e27fb686b12c', ref: modalContentEl => (this.modalContentEl = modalContentEl), 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: '6961ea1874081c346590507c767a56281e7c8ff8' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '9e46132bd2f436d3c59a1bf1385ad73aef098b1f', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'f2ee177793bd6df80606fa4ed029cc1df3cc581c' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: 'f5a12b8a53096e75656c8d7fd879055d26da43a4', 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",
-            } }, h("div", { key: '7c0ef14145e4468a5c949e1a93e6c725ce293332', class: "duet-modal-header" }, h("span", { key: '3f38e4d83a3e9a32d67bd496adeb591c6c7b73f4', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'a6c2876bf31e403757b8c909447975cabcaf2731', name: "top" })), this.icon && h("duet-icon", { key: '2487cd371fc42958c82ae926ae583b336b8ccf2f', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '857aee79496802c62206077a1a5da9d73087a90d', "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: '468d671fd81bff661e0e04e604dd04b4f1f9a1f4', class: "duet-modal-spinner" }, h("duet-spinner", { key: '1302f267739db49e31e216900ef1132e429dfe2c', size: "large", color: "primary" }))), h("div", { key: '53c75e8377b650381a13e9a150be49c3a0081388', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '7cc8d735fd52d46a7cc40a019ed385556c8f7288' })))))));
+            } }, h("div", { key: '7580715861362da09389b987b5e40c5460c9d833', class: "duet-modal-header" }, h("span", { key: 'da33874c652058416c832a1b28219bba3113fff1', class: "duet-modal-inner-slot-top" }, h("slot", { key: '5ac1de4f0ead45d55a72603d465eeff16519a059', name: "top" })), this.icon && h("duet-icon", { key: '9c44461274fde27a1b0a58c4c18a31c49821959c', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'b9cfb51b630ec505e221b51ff98b47f87fe84ae8', "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: '205e11c6fd001742285c628707cb7758a238b65d', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'ce31836f38e2524b6748993ce45e1c4aed3e55f4', size: "large", color: "primary" }))), h("div", { key: '458d7617638b4ce61afe259a1a0f2d3eb6dca38c', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '6e85fec665aa51db0ee3ce5726e833cd798709f5' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -392,4 +392,34 @@
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect:focus,
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect.duet-multiselect-active {
+  border-color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect[disabled] {
+  color: #172a3b !important;
+  background: #f5f6f7 !important;
+  border-color: #f5f6f7 !important;
+  -webkit-text-fill-color: #172a3b !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect svg {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect .duet-multiselect-badge {
+  color: #172a3b;
+  background: #e8eaeb;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes {
+  border-color: #d4dde2;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
+  color: #172a3b;
 }

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

@@ -273,23 +273,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '48ee754bd0231a05f00d9f15a2beb729b57dc393', class: {
+        return (h(Host, { key: '9462771c3a5152e905cf83ba95ade9dda200833b', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '212fe92eabb76004eb018b36ef0dbc825a21f8be', class: {
+            } }, h("div", { key: '1235786e07d83c91d28a13462b2fa5cf8e7907e4', 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: '7530455602172e9f450cf2c51ffef4e9e8b095ee', 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: '04100890a4421ee2a24a62f33cc740f009b0e2aa', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '610363ef1c5df18e0404ecf30527ab542101b5dc', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'd227786dacc1c8de9e749445de99aa9927834c3a', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'c102e3f30f45087f11c2de41e32765174d699c45', class: "duet-multiselect-wrapper" }, h("button", { key: '2788939db68491aa050265beb0970377fa6a3c76', 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: '08ac22ccf0ede5b5594ff44d2e7a3bea6177bdd8', 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: '20a565fd927ca30250641a8d60973757faf7a3b7', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'b967c4f19809b18216a7633769365d44c35b9d2c' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '0df538e14bb2e05548305020f1deece8ca2c3eb5', 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: '3cf7cde5c4c357222200e5e8da29bc4b2195013b', 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: '8719382a8c45c297d64e21afd2e6894b4baf1d00', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '5ccd987600f461c3c9a7f7c2f46b602f169b658d', 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: 'e519c7bf79fa2214804ca502285f52a553b79ac3', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'cfc287863231de5436fc09d8cd57b53d4ef24820', name: "tooltip" }), this.caption && (h("duet-caption", { key: '28baa67909e4027ae56a35d87a4e15a5f118e703', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '2b734b81c229392334276022638d7265e23c2168', class: "duet-multiselect-wrapper" }, h("button", { key: 'd6fb96ae298ce6e3d7df71217c728f29e1550c9a', 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: '7581bf2f7629efe48e128c941beee89c4d22f709', 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: '7b747555309afe0dc4716f4335269a5dc46f17ff', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '22f9e68fe690b60dfe7e28ba5767d613e1037070' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '8058039ac3e9c6cf1fdf9b45468adc80673e7096', 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: 'ac8d3582da5151508ede09fe95ea1fe7a6b79444', 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: '0c1236ae0fad913c3e9d2fdd2d8a558467d415e8', 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: '2fdfba244f04d2a65357a2f71778ba11fab0c4b0', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '0f85adc72c37c3912907195d4401aa2e2aa07696', 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: '1c36a865118112bdb3abcfdba4191aa17f290ebc', 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: '2117b075e96a7825514769fde136f51b1ebf59f9', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'ca41c3bf1cb8dc88c6bf4c5d237e8e3cc5fccd6c', 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: '7070fc9475815328dc21256e8ddf279f182dd2ad', 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: '7cc61fa058955273a790d926301d3a6d08ee2f0b', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '299dae214efe69bea63d811aae8701e2e7ac34ed' }, this.error)))));
+            })))))), h("span", { key: '5842f53e10a3f9984cb668fa4730e7d18bb03a21', 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: 'd9ba81594560d3f2c01f50b4832736144aeafe71' }, 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: 'da435b2c67678918ad047ec518e5e7ce4248ad46' }, h("div", { key: '7fd627c796cbea3540a34b81dd33aa389f24f434', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'fa2f7460016778ef6aa8e41fa846b26d7c6f76a9' }), h("slot", { key: 'd706503a7934a3bd8bf2e0c568194c53cea0e220', name: "mobile" }), h("slot", { key: '82756ef7543bcba00695435414503b1cf1d2089b', name: "desktop" }))));
+        return (h(Host, { key: 'eba9be23a2185429204c40d8bc881d36ba4347b2' }, h("div", { key: '92a2c02b1be2e6d2422f48b4ca0ceb62599af14a', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'b7061a136c9003c794cd95a673e35e9275d57a1e' }), h("slot", { key: '27b5c3e8d84d665200d5df42b98bfc0c376324f4', name: "mobile" }), h("slot", { key: 'edf2f2ef8f2db435f9a54c41eb0992b7e0a080d0', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -154,4 +154,20 @@
 
 ::slotted(duet-paragraph) {
   margin-bottom: 2px !important;
+}
+
+:host(.duet-theme-turva2) .duet-notification.duet-theme-turva {
+  color: #172a3b;
+  border-bottom-color: #fbe1d1;
+}
+:host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
+  background: #fdf7f2;
+}
+:host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
+  background: #e61740;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
+    background: #fdf7f2;
+  }
 }

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

@@ -72,11 +72,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: 'ca3ab09712e8c37bccd234d83b8685864fe9c6e2', role: "listitem", class: {
+        return (h("div", { key: 'e9780a745bc103c0eab1387924e9382dc60bff3c', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '2042476b8c42b4cb9a4aec6057dbe563772fb9ec', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '082ba1ab481221f0954c6a9a59e07856af32898c', class: "duet-notification-container" }, h("div", { key: 'dde13f7597e7114096d5bae94ebc1b282154de8a', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '4b70454b825191fe9a40450c7739bce6cdd059b4', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '8c038435ee5b35b2d35095eafa7f4b833de4e57f' }, this.accessibleLabelUnread, ":")))), h("div", { key: '7c8f2d236a8d922e6b21f65585b00f096134a8f3', class: "duet-notification-content" }, h("slot", { key: '911e94ff943e9ace002dd0cda2579a80ae42eda1' })), h("div", { key: 'dc50e21df86731f26269d4778e18b08a19444d01', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '431b8cdff6f259708fc7ad25c2f5cd6c9392bb95', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'c8cc56cc53bb242a159aa4a03d3e60d984388630', class: "duet-notification-container" }, h("div", { key: '72bd20f9dc41cbe781591acb8b629ddd7826c332', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: 'fb2ed998c5a7389dbf0d70f475929092ef2e33f4', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '0d788165d1ad770a2debcd3efb212d5cd394f32c' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'd9831696985ad34b1bacb4cd7e0ba0466784f44b', class: "duet-notification-content" }, h("slot", { key: '1611ad31717366e3852e70a742be63ebb1283e14' })), h("div", { key: 'ef31c5774b1164e4703f15f6b8a32985b294bd7c', 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

@@ -252,4 +252,17 @@
     opacity: 1;
     transform: scale(1) translateZ(0) translateY(0);
   }
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle {
+  color: #172a3b;
+  border-color: #d4dde2;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after {
+  background: #e61740;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true],
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
+  color: #8c001e;
+  border-color: #f5f6f7;
 }

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

@@ -126,10 +126,10 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '9f4089715c79f3098cbddd19ecb0fe9f625e60dc', class: {
+        return (h("div", { key: '659136cc65a195a1de4228bd580d2368d2244a86', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '847f74b2cd54afe289a50fefd441409e3d10835d', 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: 'c887681d1b69bea0d71fdb2f9a9da04162252ba7', class: "duet-drawer-icon" }, h("duet-icon", { key: '4ff950e8cbacfe8c26b45aa84c5ca6371afa5806', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '3db0ee999568e116bff201633722e984ffaa4432', class: "duet-drawer-badge" }))), h("span", { key: '73962ec83f1a6cf91c488f06a5aef5200d4c38b0', class: "duet-drawer-label" }, this.label), h("div", { key: '4c821d69d5bd6ac7ced0b42ea8e762503db12836', class: "duet-drawer-caret" }, h("duet-icon", { key: '85e247216c488c0f39e3e1d7f47d88ed19e77c6d', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'ca5f050d99a3055e0ada249e72b08ba4a2614c54', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'abe8757b0f4db9939465b4ab6011c8625b5baf76', 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: 'a99654516249d53e1a9fd81021998c2e461365a7', class: "duet-drawer-icon" }, h("duet-icon", { key: '76b8f2f443ab22637765dfef1db4000215ef5a19', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '6efbba81b7cf33402531b445e5e297d5e48a4fc6', class: "duet-drawer-badge" }))), h("span", { key: '5b9df974799ba860b7d2d964fc22c50d18aa0282', class: "duet-drawer-label" }, this.label), h("div", { key: 'ed02df2f85e017956770c841d1882b6a6ae45280', class: "duet-drawer-caret" }, h("duet-icon", { key: '646368ab0a187e896f1110e4015a05b3bad71a9d', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '0e2cfc291004260d5f02350fd624396768c06b3b', 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.css

@@ -125,4 +125,11 @@
 }
 :host(.duet-theme-turva) .duet-number-buttons .duet-number-button:last-of-type::before {
   background: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:first-of-type::before {
+  background: linear-gradient(to left, rgba(178, 194, 205, 0.2) 0%, rgba(178, 194, 205, 0.2) 1px, rgba(178, 194, 205, 0.1) 1px, rgba(178, 194, 205, 0) 100%);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:last-of-type::before {
+  background: #d4dde2;
 }

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

@@ -386,11 +386,11 @@ export class DuetNumberInput {
         const identifier = this.identifier || this.inputId;
         const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (h(Host, { key: 'c404181a5a36be60ded0501cd754f3a370276db3', class: {
+        return (h(Host, { key: '2339fa56635a7ba8fc6edec30d3675317fcbe27f', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '674688689d6202a4b7a3778c0172af68e20b0673', class: "duet-number-container" }, h("duet-input", { key: 'f5281ca4fa9f5b26a159dc7e7b92ca9a54528bf7', 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.unit}` : "", 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: '3f1c547afcc40014095f197036f787645147bd11', name: "tooltip" }), h("div", { key: 'a868daa539f87cef017c2018287a1a45e1354cad', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'e85bd5edd04e493c634a8b73f4a5c26529fee463', 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: '514347e9e62cee33816675da9bf05e4767024cf7' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: '1bbad2c355ee306483fb5f7f24569d129a6b8550', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '8ad6cf3c4dfc1a719c1226a81fc11118f2dbb034', 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: '6235a14251c9d2e5730f4a783aee9fda6d53450d' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: '2ffc06061b4c9fcbdc4cde17c75055caba64bd10', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '8248ba0993751f21e7a33df4d70c6db8246ceed5', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { key: 'dff60647793af3de902477ed0ea4cfebe2a0b060', class: "duet-number-container" }, h("duet-input", { key: '55a832b70fd619b16560dcc8de2a11da3ae90344', 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.unit}` : "", 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: '1e4b7cc87d46de0233457c6e087217b27fb2a6df', name: "tooltip" }), h("div", { key: '5a2660b2592fd4a96172bf4ce53d5d810e9479c6', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'dddc2edb43610eed98a1db9de1ac006d6f721099', 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: 'e29c3ce840c8e2d776ed9430ed84f1a0ead9a5a3' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: 'e5eb7418c9f6711b21e6550bad87f017d97cff6e', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '688035f8fcb3f56a36d2d7b13a9d494388eafd39', 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: '8779e5d09e06ff7f63ff715d45bd72c513c1c1dc' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: 'f6548c254afa31a6346042f11113aad09baefce3', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '4e272274bdb8a1c9cc068e76e846b49647200fd6', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -104,4 +104,8 @@
 }
 .duet-overlay.transition-quickly {
   transition: 300ms ease;
+}
+
+:host(.duet-theme-turva2) .duet-overlay.duet-theme-turva {
+  background: #172a3b;
 }

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: '6587eb66353af1c4084d8c5eba44620ad4caa30a', "aria-hidden": "true" }, h("div", { key: 'f4dc3ef5134b907ebb8b089b1b33ac4fc2c0ab1b', style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { key: 'a940aabf27c88503105399e2bd8e078e6fbbce34', "aria-hidden": "true" }, h("div", { key: '73a03ee885277cf9829fe0eda10af78fa8df61ca', style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,
@@ -261,4 +261,5 @@ export class DuetOverlay {
             }
         };
     }
+    static get elementRef() { return "element"; }
 }

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

@@ -195,6 +195,20 @@
     height: 75px;
   }
 }
+.duet-page-heading .progress-indicator {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+}
+.duet-page-heading .progress-step {
+  width: 100%;
+  height: 4px;
+  background-color: rgb(181, 198, 208);
+  border-radius: 2px;
+}
+.duet-page-heading .progress-step.active {
+  background-color: rgb(0, 119, 179);
+}
 .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";
   color: rgb(8, 42, 77);
@@ -210,17 +224,19 @@
   position: relative;
   top: -3px;
 }
-.duet-page-heading .progress-indicator {
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
+.duet-page-heading.duet-theme-turva .progress-step {
+  background-color: rgb(199, 202, 207);
 }
-.duet-page-heading .progress-step {
-  width: 100%;
-  height: 4px;
-  background-color: rgb(181, 198, 208);
-  border-radius: 2px;
+.duet-page-heading.duet-theme-turva .progress-step.active {
+  background-color: rgb(198, 12, 48);
 }
-.duet-page-heading .progress-step.active {
-  background-color: rgb(0, 119, 179);
+
+:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon {
+  background: rgba(230, 23, 64, 0.9);
+}
+:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step {
+  background-color: #b2c2cd;
+}
+:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step.active {
+  background-color: #e61740;
 }

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

@@ -43,12 +43,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '63a73bb27ff696ea0968ad70a1634a31605c28ae', class: {
+        return (h("div", { key: '8f818b186229d038b98fac98c1ef02fc6bbbbd2d', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '3ac344016e732507c936589ac9bc5242160605ab', class: "background" }, this.theme === "turva" && h("div", { key: '43d0f3158fc44555bcaad471d4db7a0fd9c03cd8', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '40cc4cff7adf721f648de49afcd91e1de4f26fe5', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '0dec9ac76c10d41c3f19b04d3561458f31128cb0', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '63bf96082cab7113ec087005c35579df2fc2b264', class: "brand-shaped-icon" }, h("duet-icon", { key: 'cb260b351576cfede4e6be93105db63a70098354', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'b48cdf1b27c186d25e8a6c3f794a915f4c141297', class: "heading" }, h("slot", { key: 'bc536f6c4382075cf663bd3a17d6042ff599b607', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '624c56562aa77d3964b52563b188462d922d95b1' }, h("duet-spacer", { key: '1b32455fc50f2d860630fd9b3d4465a87121ff5b', size: "large" }), h("div", { key: '2897fd8f1d826e84ea32534ed8437068c86173e8', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: '6c42ddfcc4f65c95ccd4bceb1956b60e610e359c', class: "background" }, this.theme === "turva" && h("div", { key: '9184e6a6696c793a0060e0492c3b508c38f6afff', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '0c6f06c85f2f010bfa32f1867bc00f3f126c0304', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '744abcada9154113142f7ab873d15a6b1526e8b4', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'f83dae2fe07c0281b210f113cd79bd32b91862f4', class: "brand-shaped-icon" }, h("duet-icon", { key: '3cd1eee3628ce5819928da75d29a2d67bfeb40aa', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'af626d8cb5b1a075dd37a7431ec5bb343100d7e7', class: "heading" }, h("slot", { key: '042d9bbc8fb8c1c5dd7fe5ec65b734276117629b', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '20ebc9e86f822c59513030d34a633f68f2a188de' }, h("duet-spacer", { key: 'f8e666d65264a949ba60d896b82b457638161fbd', size: "large" }), h("div", { key: 'fe52a841e12dcf6145521a47d4349efd7f83878b', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,4 +76,8 @@
 :host(.duet-theme-turva) .duet-pagination-total-pages {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2.duet-theme-turva) .duet-pagination-total-pages {
+  color: #172a3b;
 }

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

@@ -394,32 +394,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2d201ade7a465ccdc9c838ae9bab20073e4bcecb', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '888b2365acf343cc2827df0392e0b4fe62609d4d', 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: '32fcbc1ab1d2e72c8e3f681c8b5405362be964e3', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '020a385482262cd9ea6bbd8d32e55976a95d7543', 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: 'ba5c72184ebb300e442a4b2b1becccbc19ed8423', "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: 'f9e011d5b841903bd0ae666a01702f55d781328e', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'fde01f858aaeb95ba0404fa3444ea940c4521bfe', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '953681769a2c37b202d257783517eb0a067d58a2', "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: '64b7cec76275874d10409a43c2a9268091aa63ee', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '2810f47527a6ccfbb2957495acd0c9314586b4b2', 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: '87d432d6f501f000078bbdda6bb39e82f4b7d215', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'fcee9f5f028b340bf8b20cbaeebdea80e9e0c738', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '48790021a45abdfe137b20483a06b6690d495d35', 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: '4ac0987a55fe881a53d9bc6c31d244eaa477be1b', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'aa7e10b2c1fa46f2634e15bf1c11a7b317745885', 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: 'c209b2a485ac203090db53813c9bc5b52740692f', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '02e70e026d31ab7441d9c575608f71d9d9b7f6db', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '52fe136a3fd99f42538a87c24672770197ff34fd', 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: '5886c6e74ce3e15ac790490751f51621dd57fdec' }, h("li", { key: '45e0f614f9739127af3db736511f8f2feb8ea44b', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'c5a0826c468d8dd373d888635d047df3b9cfec9d', 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: 'b5e39c58743ca5fdb18beceacd72f984810ce21c', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '76a2a84474e75823ecf3af83d8cc4d20cedd18ec', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'e0f755e9904df57b0ea6c75942860691ec4d3e03', 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: 'f272ec274436aa7b7167dbf9944d43e33925139a', 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: '8e0861e975abf48bf39308fa084c1b079a9b5739' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'd9b973b371d95a200b810909575a98accce60148', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '72dc3ed56da6648d3a0d9bc43b96c56bf1caf8d0', 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: 'd56560b3ed29d1c082d13cbe130b12f76290ce97', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'c6b2c864c5562f5061783088344ff90095ecb70e', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'de9d1fd87aca35c376c1d00fd3ed2f685ef72199', 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: '03be7831dee21cb070175cf3e50ae89b0eba49b3' }, h("li", { key: '81cee7f4767a20b952964f8ce856621caad7b1cb', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'd280492036cb4ae490d70498078e8e649fe94ee2', 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: 'e6aa3d3cc594fed23cb4d0146ebdd07c62e1cc25', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'dc4cbf113dc745b52d8787bc89429e32b68f53cb', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'dd58996ba1d6c5a32018d173150afdd995fa9b75', 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: '2d354dd1353d1a3445b585cde4659f4aa3a39733', 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: '7b20cc74d44f1b9cf952ee69fcac743ba66eda24' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'fd54712037bfcd681f00929685daeee86cf4ed69', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'd1df047e013903691bbd00c4fd495ab408f73a58', 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: 'a0a24b8be4d7b24fa7c15bd35c5f29b74ad0083e', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'e996b1229282d32e9f0fb4c0eeb1fbab748e0c8d', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'c8dc915042f3bde87bac5f0fbdfe6ba5cf6f42fd', 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: '056315d9628a50491896db4fdbe2546be9cf222c', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '610a8833a6d77befc4f138e1319d4618f7682495', class: {
+                : undefined }, h("div", { key: '01808887dfd64e716f50b336d7347e2b2b3bd40f', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '417732a79f9d070cd3ccd0dfc79bbc300c30e60c', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '441d49068bda46c7a66e21fbe6a7f9445cd5fe8c', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '0fdb57959080ef0126266df23717517b6f5be405', 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: '520c47b865d45f68dca480bded5d25da0ddcdba5', 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: 'c8d1ff36a756d28252a339e9972088d7e451f54b', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'e0f008819c6637bd8519eed4a9411a712d5b0ee5', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '7e6029710b0c761b62a21f7aabab346cfe318957', 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-paragraph/duet-paragraph.css

@@ -103,4 +103,14 @@
 ::slotted(a):active {
   opacity: 0.75;
   transition: none;
+}
+
+:host(.duet-theme-turva2) .duet-paragraph.duet-theme-turva {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) ::slotted(a).duet-theme-turva {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) ::slotted(a:hover).duet-theme-turva {
+  color: #8c001e;
 }

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

@@ -51,7 +51,7 @@ export class DuetParagraph {
         const color = getColorByName(this.color);
         // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
         // are not announced when placed inside duet-modal
-        return (h(Host, { key: '6a13b5ffe8df2d7d3fbab1a8bb419feb340da706', "aria-describedby": this.id }, h("p", { key: '80e12bf1949ea7f97ee2cc539e90ede233e6e719', id: this.id, class: {
+        return (h(Host, { key: 'b7f1df2b017984133517a2742be5e5444f1e6894', "aria-describedby": this.id }, h("p", { key: '607059f9661102231b510b5923e0c71472f22804', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -59,7 +59,7 @@ export class DuetParagraph {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '219b0fe9f531f0a930b64d7d26c556d1010d9ef3' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: 'e5e6da5cbb23f9fb7bfc3773c3b8e79666054878' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -103,9 +103,9 @@ export class DuetPhoneInput {
             //console.log(ev)
         };
         this.handleInput = () => {
-            var _a, _b;
-            const currentValue = (_a = this.duetInputElement.value) === null || _a === void 0 ? void 0 : _a.trim();
-            const currentCountryCode = (this.currentCountry !== "error" && ((_b = this.currentCountry) === null || _b === void 0 ? void 0 : _b.telephoneCountryCode)) || "";
+            var _a, _b, _c;
+            const currentValue = (_b = (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim();
+            const currentCountryCode = (this.currentCountry !== "error" && ((_c = this.currentCountry) === null || _c === void 0 ? void 0 : _c.telephoneCountryCode)) || "";
             const inputCountryCode = this.findCountryCode(currentValue) || "";
             if (!currentValue) {
                 this.currentCountry = undefined;
@@ -185,17 +185,19 @@ export class DuetPhoneInput {
      * Value of the input.
      */
     get value() {
-        var _a;
-        return (_a = this.duetInputElement.value) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "");
+        var _a, _b, _c;
+        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._value = val;
+        this.duetInputElement.value = `${val}`.replace(/[^\d+ ]/g, "");
+        this.handleInput();
     }
     /**
      * This is a proxy for the enclosed native inputs validity
      */
     get validity() {
-        return this.duetInputElement.validity;
+        var _a;
+        return (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.validity;
     }
     /**t
      * Component lifecycle events.
@@ -217,7 +219,8 @@ export class DuetPhoneInput {
      * Sets focus on the contained input element, use this instead of the native `input.focus()`.
      */
     async setFocus(options) {
-        this.duetInputElement.setFocus(options);
+        var _a;
+        (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
     }
     setInputCountryCode() {
         if (this.currentCountry === "error") {
@@ -230,7 +233,6 @@ export class DuetPhoneInput {
             return;
         }
         const oldCode = this.findCountryCode(prevValue);
-        console.log("Old code", oldCode);
         if (oldCode) {
             this.duetInputElement.value = prevValue.replace(`+${oldCode}`, newCode).replace("  ", " ");
             return;
@@ -238,7 +240,7 @@ export class DuetPhoneInput {
         this.duetInputElement.value = prevValue.replace("+", newCode);
     }
     findCountryCode(value) {
-        const normalizedValue = value.trim();
+        const normalizedValue = (value === null || value === void 0 ? void 0 : value.trim()) || "";
         if (!normalizedValue.startsWith("+")) {
             return undefined;
         }
@@ -280,7 +282,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-spacer", { size: "x-small" }), h("duet-divider", { margin: "small" }))) : (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, value: this._value, 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, 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"; }

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

@@ -61,4 +61,12 @@
 
 ::slotted(duet-notification) {
   max-width: 360px;
+}
+
+slot {
+  --divider-margin: var(--space-x-small, 8px);
+}
+
+:host(.duet-theme-turva2) .duet-popup-menu-list.duet-theme-turva {
+  color: #172a3b !important;
 }