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

package/lib/collection/components/duet-list-item/duet-list-item.js

@@ -2,12 +2,17 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 /**
  * @slot label - The list item component’s label content. Use this to put content into description list’s dt element.
  * @slot value - The list item component’s value content. Use this to put content into description list’s dd element.
  */
 export class DuetListItem {
     constructor() {
+        /**
+         * Theme.
+         */
+        this.theme = "";
         /**
          * @internal
          * Enable or disable the automatic responsive behaviour of the list item.
@@ -21,19 +26,23 @@ export class DuetListItem {
          */
         this.breakpoint = "small";
     }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ea57f0d2a2803d9f9f0f178c784b26532b94ff2e', class: {
+        return (h(Host, { key: '8b3943e8c6c0ff91b8405bfedb46b4612da7451b', class: {
+                "duet-theme-turva": this.theme === "turva",
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
                 "duet-list-item-breakpoint-small": this.breakpoint === "small",
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: '06fdc40c1a205aa3ff2cff0427e42f5d2df4296b' }, h("slot", { key: 'fa97ca272f09a94d00a0301c7fb56420b6939c90', name: "label" })), h("dd", { key: '464b077e52879084b3b5406e43e7dc449b0c2344' }, h("slot", { key: '9a6232fd2b40641c2a0a25f72df72072e4a2671b', name: "value" }))));
+            } }, h("dt", { key: '587ef41965121757aa51fc12391e17fd7f5563fd' }, h("slot", { key: '466137ac7d5182f8d0223429f0c5159677d4330b', name: "label" })), h("dd", { key: '4f85ab7cd34ecf8d528857c07e214dbd023d0465' }, h("slot", { key: '3d270b99641b4b152556402d5818216f6d34c5fa', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -49,6 +58,32 @@ export class DuetListItem {
     }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "responsive": {
                 "type": "boolean",
                 "attribute": "responsive",
@@ -103,4 +138,5 @@ export class DuetListItem {
             }
         };
     }
+    static get elementRef() { return "element"; }
 }

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

@@ -105,7 +105,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '45aadc48c1486983e2e7fb1ab40ed4dec5538805', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '0b8ef04de15bd3ec00a0882a33c657191710723c', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '1908da4cc561ca347e983052f2b3e062d16d00db', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '8e459889882f39c5e7b5aff75bbde8de1a778bae', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

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

@@ -200,4 +200,11 @@
 .duet-theme-turva .right {
   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 .center {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .right {
+  color: rgb(35, 46, 61);
 }

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

@@ -167,14 +167,14 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '21fc312d35aaa7deb3f4158b0b6d5bf61e90c5df' }, h("nav", { key: '9fa69bcebbba04c2ed12cf254e9452d76c5ac1f3', class: {
+        return (h(Host, { key: '349581a9e41fcb410d37770ed09d2311de7d38a5' }, h("nav", { key: '96ed53773cd355d673a2b3977b40286d67985810', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '4566523b16eab120b9f619b747193fe9e137e82f', class: "top" }), h("div", { key: 'd411603d91e00213cec5c9f80d352ec4c3364d5a', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '84871b19397758ab1283208e1cda3cc0a8c35f9b' }, h("duet-logo", { key: '8eb00c572b3d97891b54ad3a0b896933f616dd7b', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '7b7e356b1b733d9a873dc843071491bfd9b8cbaa', class: "list center", role: "list" }, h("div", { key: '413672e655afea426497dea6f1034ecd2ec2c0f6', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '6caad3db53aa0ae9dcf20bb99bf359a6b849e13e', name: "center" }), h("div", { key: 'aebd2a3d449bd576f90711455378ed4d485d3aee', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '6030dc0c9e9f65628e56b7311b56adf93e8e5adf', class: "list right", role: "list" }, h("slot", { key: '21d2c8706ce2ecf7694465f7213655d912be612a', name: "right" }))), h("div", { key: '22889d929f8602111932ef87ff8b59f532b4b84f', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '93a3b7f680dfc2f998274c56a380e29332b24f90', class: "top" }), h("div", { key: 'a8d14b711a83aee7ea63fa39f5be9d6d61929a37', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '306ad41f64eaecd20cc98bbe2b9d490912c6820c' }, h("duet-logo", { key: '5a91055e192e1214c7bd921c2ff300510594c47b', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '7fea1e39256f5847358f2533607ac26f53fc35d3', class: "list center", role: "list" }, h("div", { key: '4c953fc8762eadafb6e4a41534676021e4fb0675', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'ee961cf16f11a62fdef74f7ab57cf4bf653ba8ab', name: "center" }), h("div", { key: '1f66cfd1c1fea5f9c1764ff8b3a697c0459a653b', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '3d7cb50a008c1ce893a3ad504b186dbb3965a130', class: "list right", role: "list" }, h("slot", { key: '7ff47fae8ea6f7d49fcfe5e53d43491994741f26', name: "right" }))), h("div", { key: '8bc982c15ce030ae88966fe1646914b6bf295960', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.css

@@ -75,4 +75,10 @@
   .duet-menu-bar-button:hover.duet-theme-turva {
     color: rgb(198, 12, 48);
   }
+}
+
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-button.duet-theme-turva:hover {
+    color: rgb(197, 29, 65);
+  }
 }

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

@@ -49,10 +49,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '38bfc8b020483ea1619da061faa8b650c887667d', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'ce2dd048048dfe5b93679eb8e76df1d0c9535f95', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '6e69fa56fa86d15fd577b1147cb564053c9e8c9e', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'd2baf734d37ebd5183628f2cf789651a7627da3d', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '15757e0e80d1d038485ec36bce95ff4c4fae05e5', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '3d80006b8f95eea5f830a456b9a986490875d8af' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '17e4032b4ce67707c6694b1e7ab25ee15070f1fc', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'acc459e8b86197b65b2db8e43ff6b72aff63b516' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.css

@@ -151,4 +151,17 @@
 }
 .duet-menu-bar-dropdown.duet-theme-turva .items {
   background: rgb(255, 255, 255);
+}
+
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button:hover {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active::after {
+  background: rgb(197, 29, 65);
 }

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

@@ -62,17 +62,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a43589ddb7b2a061c18b414dd65bc3f51f285711', role: "listitem" }, h("div", { key: '2f223f45a89ef906763f8a3bf92b860162f31e4e', class: {
+        return (h(Host, { key: 'bd58e1dff54dcb742f71d79a3f4ac926698d8be4', role: "listitem" }, h("div", { key: '5e2ecae92d1714eb9fd29b2ad9c288f0acb022f7', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: '99e5e3ad6be32480a2c94ce50ab71b6d66fca5f5', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'bca33875be854118e12277bf022757f89deac664', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '0992e1d334008b2020283e401bfe79e8ca9b9cdd', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'e5891bffb51f49298f04019e573ff265a9c94630', class: "label" }, h("slot", { key: '68f31e63dac8f239d931e44b2ae703656380008b', name: "label" }), h("duet-icon", { key: '8b3eef3e47c1008ad65b4dc26ac82a360fca2c60', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'e6f60f826a36ee47b41d1be994b2aa51606a7232', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '8b2139cbecc402ef2475876525963e51923f8e36', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4ef57ea2a1222ba117d6a0ec160c42e5eb01684c', class: "label" }, h("slot", { key: 'e81fd8db1ce93315bc5bdb466026c170d16141b6', name: "label" }), h("duet-icon", { key: '9f01bcc4114618806fa680c3c813ef9a88e760ab', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'b9877d928d13f438e0cee0fe159f43923932417d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '81c31db440ca83dd6207e4d3ebfa9c1ef585babe' })))));
+            } }, h("slot", { key: 'aa50757464cf5184b8bda091e87010c8e0d58b41' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,4 +56,11 @@
 }
 .duet-menu-bar-dropdown-link:hover.duet-theme-turva {
   background: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva:hover {
+  background: rgb(248, 229, 217);
 }

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: '3b1594a79e3d1fe88e179e683df893d3e83c407e' }, h("a", { key: '10724f053d791def92e9fe21773b4a65f20926de', class: {
+        return (h(Host, { key: '94cfab99d4f458ac36c33cf98a8878fdb0ec4893' }, h("a", { key: '282dd002e0715e81d26680884c5c445dd7babc73', 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: '6658417e520a3d6347859fa434fb527f8f376fbe', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'd8f728e9d507f4a3ccdda23ed33a958ec5e4e98c' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '546189e81f3a44ca198026d4fb856b65120b3c50', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'ec0f06a5ab23e770da10f3b22ee8576cf7276da2' }))));
     }
     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.css

@@ -125,4 +125,19 @@
   .duet-menu-bar-item:hover.duet-theme-turva {
     color: rgb(198, 12, 48);
   }
+}
+
+:host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva[aria-expanded=true] {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva::after {
+  background: rgb(197, 29, 65);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva:hover {
+    color: rgb(197, 29, 65);
+  }
 }

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: '049740f5f7ecee03a95b3aa3f393836d675475af', role: "listitem" }, h(TagName, { key: '12b182c9e98d6763aedd2310e3324858a5bbcc5e', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'f974d8d652cd213c89d81ead0f2048f1d109caa2', role: "listitem" }, h(TagName, { key: 'd7ead167979db9405ffbf213ad8f38bd63b0be77', 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: '98d966613955a36b5f2c22bc405aa963090d9683', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'dc0d5063412c40b2fddd24d9000fea90c11ec332' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '173a233033d814c8540513760bc110528e06cb23', 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: '62660a414dab1ad3892c2466ff6550665a6bdbbb', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '63610a02057061d8dbd192e8f29fb80d602b8f62' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '118ed1bb4814e4b1f89f45322ee5ef4afedd798b', 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.css

@@ -103,4 +103,16 @@
   .duet-menu-bar-link:hover.duet-theme-turva {
     color: rgb(198, 12, 48);
   }
+}
+
+:host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva::after {
+  background: rgb(197, 29, 65);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-link.duet-theme-turva:hover {
+    color: rgb(197, 29, 65);
+  }
 }

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: '6c072dcf75770dd53c45c4089e9fd2823822ff71', role: "listitem" }, h("a", { key: '376c4c2a49ea9ccb1b368f600cdddb0246445d9c', class: {
+        return (h(Host, { key: 'c00780c565b538d20ff204a3f9f52dd2cb2bc4d7', role: "listitem" }, h("a", { key: '64c3be1bc38f176f7de7431b6c934685b30e9ee2', 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: '9d8e4d367f30b4eb980dede30df2afe745b64caf', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'c20f32e09eee237b92615ad99e43657b5d127e62' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'c1602e9610415be0eecb03ab05e972ed4b19bbc6', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '321c5f2123e2eb98ab9cd89bffedb027fc412e26' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -293,8 +293,8 @@
 
 .duet-modal-close {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: 8px;
+  right: 8px;
 }
 
 .duet-modal-heading {
@@ -318,4 +318,12 @@
 }
 .duet-modal-heading.duet-m-0 {
   margin: 0 !important;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-modal {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-modal-sticky-header {
+  background: rgb(253, 247, 242);
+  border-bottom: 1px solid rgb(248, 229, 217);
 }

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: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect[disabled] {
+  color: rgb(35, 46, 61) !important;
+  background: rgb(253, 247, 242) !important;
+  border-color: rgb(253, 247, 242) !important;
+  -webkit-text-fill-color: rgb(35, 46, 61) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect svg {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect .duet-multiselect-badge {
+  color: rgb(35, 46, 61);
+  background: #e9eaec;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes {
+  border-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
+  color: rgb(35, 46, 61);
 }

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: rgb(35, 46, 61);
+  border-bottom-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
+  background: rgb(197, 29, 65);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
+    background: rgb(253, 247, 242);
+  }
 }

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,16 @@
     opacity: 1;
     transform: scale(1) translateZ(0) translateY(0);
   }
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle {
+  color: rgb(35, 46, 61);
+  border-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after {
+  background: rgb(197, 29, 65);
+}
+: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 {
+  border-color: rgb(253, 247, 242);
 }

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(244, 213, 193, 0.2) 0%, rgba(244, 213, 193, 0.2) 1px, rgba(244, 213, 193, 0.1) 1px, rgba(244, 213, 193, 0) 100%);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:last-of-type::before {
+  background: rgb(248, 229, 217);
 }

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"; }