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

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

@@ -220,6 +220,7 @@ button {
 }
 
 .duet-link.button,
+.duet-link.list-button,
 .duet-link.card {
   display: flex;
   gap: 12px;
@@ -237,10 +238,12 @@ button {
   transition: all 300ms ease;
 }
 .duet-link.button > *,
+.duet-link.list-button > *,
 .duet-link.card > * {
   flex-shrink: 0;
 }
 .duet-link.button .duet-link-content,
+.duet-link.list-button .duet-link-content,
 .duet-link.card .duet-link-content {
   flex-grow: 1;
   flex-shrink: 1;
@@ -250,24 +253,28 @@ button {
   text-align: left;
 }
 .duet-link.button .icon-wrap,
+.duet-link.list-button .icon-wrap,
 .duet-link.card .icon-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .duet-link.button .icon-wrap duet-icon,
+.duet-link.list-button .icon-wrap duet-icon,
 .duet-link.card .icon-wrap duet-icon {
   width: 24px;
   height: 24px;
 }
 @media (min-width: 48em) {
   .duet-link.button .icon-wrap duet-icon,
+  .duet-link.list-button .icon-wrap duet-icon,
   .duet-link.card .icon-wrap duet-icon {
     width: 30px;
     height: 30px;
   }
 }
 .duet-link.button.duet-link-has-icon-background,
+.duet-link.list-button.duet-link-has-icon-background,
 .duet-link.card.duet-link-has-icon-background {
   min-height: 60px;
   padding: 12px;
@@ -275,60 +282,105 @@ button {
   line-height: 1.5;
 }
 .duet-link.button.duet-link-has-icon-background .icon-wrap,
+.duet-link.list-button.duet-link-has-icon-background .icon-wrap,
 .duet-link.card.duet-link-has-icon-background .icon-wrap {
   width: 36px;
   height: 36px;
   border-radius: 8px;
 }
 .duet-link.button:hover,
+.duet-link.list-button:hover,
 .duet-link.card:hover {
   border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
 }
 @media (min-width: 48em) {
   .duet-link.button,
+  .duet-link.list-button,
   .duet-link.card {
     min-height: 50px;
   }
   .duet-link.button.duet-link-has-icon-background,
+  .duet-link.list-button.duet-link-has-icon-background,
   .duet-link.card.duet-link-has-icon-background {
     gap: 16px;
     min-height: 72px;
     border-radius: 16px;
   }
   .duet-link.button.duet-link-has-icon-background .icon-wrap,
+  .duet-link.list-button.duet-link-has-icon-background .icon-wrap,
   .duet-link.card.duet-link-has-icon-background .icon-wrap {
     width: 48px;
     height: 48px;
     border-radius: 12px;
   }
   .duet-link.button.duet-link-has-icon-background .duet-link-content,
+  .duet-link.list-button.duet-link-has-icon-background .duet-link-content,
   .duet-link.card.duet-link-has-icon-background .duet-link-content {
     font-size: 1.1rem;
   }
 }
 .duet-link.button.duet-theme-turva,
+.duet-link.list-button.duet-theme-turva,
 .duet-link.card.duet-theme-turva {
   border-color: rgb(199, 202, 207);
 }
 .duet-link.button.duet-theme-turva .duet-link-content,
+.duet-link.list-button.duet-theme-turva .duet-link-content,
 .duet-link.card.duet-theme-turva .duet-link-content {
   color: rgb(23, 28, 58);
 }
 .duet-link.button.duet-theme-turva:hover,
+.duet-link.list-button.duet-theme-turva:hover,
 .duet-link.card.duet-theme-turva:hover {
   border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
 }
 .duet-link.button .block__chevron-icon,
+.duet-link.list-button .block__chevron-icon,
 .duet-link.card .block__chevron-icon {
   transition: 300ms ease;
 }
 .duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon,
+.duet-link.list-button:not(.duet-link-is-external):hover .block__chevron-icon,
 .duet-link.card:not(.duet-link-is-external):hover .block__chevron-icon {
   transform: translateX(4px);
 }
 
+.duet-link.list-button {
+  padding: 20px 12px 20px 4px;
+  margin-top: -1px;
+  border: solid 1px rgb(181, 198, 208);
+  border-width: 1px 0;
+  border-radius: 0;
+}
+.duet-link.list-button .icon-wrap duet-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 48em) {
+  .duet-link.list-button .icon-wrap duet-icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+.duet-link.list-button:hover {
+  border-color: rgb(181, 198, 208);
+  outline: 0;
+}
+.duet-link.list-button:hover .duet-link-content {
+  color: rgb(0, 119, 179);
+}
+.duet-link.list-button.duet-theme-turva .duet-link-content {
+  color: rgb(23, 28, 58);
+}
+.duet-link.list-button.duet-theme-turva:hover {
+  border-color: rgb(199, 202, 207);
+}
+.duet-link.list-button.duet-theme-turva:hover .duet-link-content {
+  color: rgb(198, 12, 48);
+}
+
 .duet-link.card {
   border-color: rgb(228, 236, 239);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);
@@ -376,4 +428,26 @@ button {
   .duet-link.card.duet-link-has-icon .chevron-wrap {
     height: 62px;
   }
+}
+
+:host(.duet-theme-turva2) .duet-tab-to-link.duet-theme-turva {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva,
+:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva {
+  border-color: #b2c2cd;
+}
+:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva .duet-link-content,
+:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva .duet-link-content {
+  color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva:hover {
+  border-color: #e61740;
+  outline-color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva:hover {
+  border-color: #b2c2cd;
+}
+:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva:hover .duet-link-content {
+  color: #e61740;
 }

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

@@ -168,6 +168,7 @@ export class DuetLink {
             case "block-center":
                 return this.renderBlockContent();
             case "button":
+            case "list-button":
             case "card":
                 return this.renderButtonCardContent();
         }
@@ -179,10 +180,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: '8f01f9c4cc9e7242a910402e67ace7f75ad05ac2', class: {
+        return (h(Host, { key: 'a9fddd138f64a17b494e02bcefc679cd1a0d4051', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '751c0abc3dc61b616825c965881d539af885baa5', href: this.url, class: {
+            } }, h(Tag, { key: 'c8cbf018a9ab3660f0c32053503c82fe725d41cd', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -216,7 +217,7 @@ export class DuetLink {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLinkVariation",
-                    "resolved": "\"block\" | \"block-center\" | \"button\" | \"card\" | \"default\"",
+                    "resolved": "\"block\" | \"block-center\" | \"button\" | \"card\" | \"default\" | \"list-button\"",
                     "references": {
                         "DuetLinkVariation": {
                             "location": "import",
@@ -744,6 +745,12 @@ export class DuetLink {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "download",
+                "methodName": "setAriaLabel"
+            }, {
+                "propName": "external",
+                "methodName": "setAriaLabel"
+            }, {
                 "propName": "language",
                 "methodName": "setAriaLabel"
             }];

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

@@ -101,7 +101,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '052db668e7054a16f24d65594ef92c4c298f4551', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'd23d4564a79d36010fadd74de603023cfd189759' })));
+        return (h("dl", { key: '82930dea1fe1193f295b5888ed5f06a85693faaa', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '44602efe41782f5dc0221b0fe2dd2ac6dc905ae3' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -431,4 +431,24 @@
   :host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dd {
     flex-basis: 35%;
   }
+}
+:host(.duet-theme-turva2.duet-theme-turva) {
+  color: #172a3b;
+}
+
+:host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,
+:host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dd {
+  background: #f5f6f7;
+}
+
+:host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva) {
+  border-block-start: 1px solid #d4dde2;
+}
+
+:host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva:last-child) {
+  border-block-end: 1px solid #d4dde2;
+}
+
+:host(.duet-theme-turva2.duet-list-inner-bordered.duet-theme-turva:not(:last-child)) {
+  border-block-end: 1px solid #d4dde2;
 }

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.css

@@ -76,4 +76,13 @@
 .duet-logo.large.duet-theme-turva {
   width: 149.6px;
   height: 54.4px;
+}
+
+:host(.duet-theme-turva2) .duet-logo {
+  width: 92px;
+  height: 22.2px;
+}
+:host(.duet-theme-turva2) .duet-logo.large {
+  width: 124.3243243243px;
+  height: 30px;
 }

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

@@ -7,9 +7,12 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 const TurvaLogo = ({ inverse, logoId }) => {
+    var _a;
     const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
     const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;
-    return (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 305 111" }, h("title", { id: logoId }, "Turva"), h("path", { fill: logoColor, d: "M79 90.1A40.5 40.5 0 0 0 98.3 58H79v32.2z" }), h("path", { fill: logoColor, d: "M45.1 57.9V46.4h52.3a40.5 40.5 0 1 0-30 48.5V58H45z" }), h("path", { fill: textColor, d: "M278.9 80.3v-9.8l-7.4.4c-2.4.3-4.3.6-5.7 1-1.7.4-4 1.3-5 2.3-1 1-2.3 2.8-2.3 4.6 0 2 .8 3.8 2 4.8s3.3 2 5.7 2a22 22 0 0 0 12.7-5.3zm4.2 8H279v-4.1l-3 1.9-2.8 1.5a17.4 17.4 0 0 1-7.4 1.6c-3 0-6.3-.7-8-2.3a9.6 9.6 0 0 1-3.4-7.2 9 9 0 0 1 1.8-5.9c1.1-1.6 3.1-3.3 5.2-4.2 2.1-1 4.7-1.6 7.7-1.9 3.4-.4 6.8-.6 9.8-.7v-1.1a6 6 0 0 0-.7-3.3 8 8 0 0 0-2.6-2.5c-.8-.5-2.2-1-3.4-1.1a25.7 25.7 0 0 0-8.8.4c-1.9.4-3.3 1-5.4 1.7h-.3v-4.3c1.2-.3 2.3-.7 4.5-1a37.7 37.7 0 0 1 12.8 0c1.8.4 2.9 1 4.2 2 1.3 1 2.3 2.3 3 3.8.7 1.5 1 3.2 1 4.7v22zM250.1 56l-14 32.4h-4.8L217.4 56h4.5l12 27.7L245.6 56zM137.7 88.2l-2.7.7c-.9.2-2 .4-4.2.4a9 9 0 0 1-7.2-3c-1.9-1.8-2.6-5-2.6-9.3V60.2h-5.2V56h5.2V47h4.2v9h12.6v4.2h-12.6v14.2c0 1.8 0 4.3.2 5.4 0 1 .3 2.5.8 3.4.5.8 1.4 1.4 2.2 1.8.8.4 2.7.5 4.1.5 1-.1 1.7-.2 2.7-.5l2.2-.6h.3v3.8zM176.4 88.4h-4.2v-3.9c-2 1.6-4.5 2.8-6.3 3.6-1.8.8-3.8 1.3-6 1.3-3.6 0-6-1.2-8-3.4s-2.5-5.5-2.5-9.9v-20h4.2V74c0 1.8.1 3.8.3 5 .2 1.3.5 3 1 3.8a5 5 0 0 0 2.2 2c1 .5 2.2.7 4 .7 1.5 0 3.1-.4 5-1.2 1.7-.8 4.5-2.4 6-3.6V56.1h4.3v32.3zM210.4 61h-.3a21.6 21.6 0 0 0-5.4-.7c-1.9 0-3.6.4-5.3 1.2a31 31 0 0 0-5.4 3.7v23.2h-4.3V56h4.3v5.2c2.3-1.9 5-3.2 6.7-4 1.8-.8 3.6-1.2 5.5-1.2a22.3 22.3 0 0 1 4.2.4v4.4z" })));
+    const turva2LogoColor = inverse ? colorGrayLightest : "#e61740"; // turva2-red-600 - hard coded as not yet available as token
+    const isTurva2 = (_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2");
+    return isTurva2 ? (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 460 111" }, h("path", { fill: turva2LogoColor, d: "M376.31,6.532L353.12,6.532C351.181,6.585 348.968,6.454 348.169,8.504L335.005,45.585C335.005,45.585 332.621,52.566 331.6,56.371C330.84,59.194 327.113,59.305 326.432,56.299C325.588,52.559 323.119,45.637 323.119,45.637L311.311,9.316C310.439,6.572 308.979,6.539 306.53,6.539L279.678,6.539C277.262,6.539 277.537,7.803 277.963,8.884L313.177,98.22C314.323,101.049 315.633,101.455 317.945,101.455L338.98,101.455C341.869,101.455 342.707,99.195 343.132,98.22L378.425,9.715C378.773,8.818 379.362,6.539 376.297,6.539L376.31,6.532Z" }), h("path", { fill: turva2LogoColor, d: "M459.516,96.346C454.277,83.268 433.732,31.15 425.821,9.722C424.662,6.821 423.686,6.539 421.689,6.539L399.651,6.539C397.647,6.539 396.783,7.541 395.885,9.925C387.024,33.495 362.341,94.31 361.535,96.346C360.704,98.455 360.717,101.455 363.277,101.455L387.358,101.455C389.52,101.455 389.827,100.63 391.032,98.22C391.36,97.558 394.097,91.461 395.034,89.103C395.329,88.357 396.049,87.872 396.848,87.872L422.298,87.813C423.084,87.813 423.791,88.271 424.099,88.992C425.225,91.605 428.598,98.815 428.932,99.621C429.574,101.167 430.235,101.455 432.095,101.455L457.768,101.455C460.328,101.455 460.341,98.455 459.51,96.346L459.516,96.346ZM417.916,66.253L402.559,66.286C401.144,66.286 400.463,65.075 400.974,63.529C401.308,62.52 408.224,43.574 408.551,42.611C408.551,42.592 408.571,42.579 408.584,42.559C408.925,41.485 409.272,40.365 409.501,39.507C409.809,38.354 411.452,38.387 411.714,39.553C411.898,40.352 412.376,41.937 412.52,42.408C413.064,44.209 419.449,63.313 419.508,63.49C420.019,65.035 419.344,66.247 417.923,66.247L417.916,66.253Z" }), h("path", { fill: turva2LogoColor, d: "M162.312,28.57L162.312,27.3C162.312,25.734 163.838,24.719 165.122,25.44C168.953,27.575 173.662,29.389 178.96,30.843C179.432,30.974 179.897,30.613 179.897,30.129L179.897,9.748C179.897,7.148 179.327,6.46 176.616,6.46L153.15,6.46C150.432,6.46 149.869,7.148 149.869,9.748L149.869,60.327C149.869,75.547 142.207,78.356 136.457,78.356C130.707,78.356 123.031,74.99 123.031,60.327L123.031,9.748C123.031,7.148 122.461,6.46 119.75,6.46L96.311,6.46C93.593,6.46 93.03,7.148 93.03,9.748L93.03,65.599C93.03,99.621 125.493,104.618 136.496,104.618C149.057,104.618 179.897,100.158 179.897,65.599L179.897,51.511C179.897,50.974 179.602,50.483 179.13,50.215C169.019,44.504 162.306,36.553 162.306,28.563L162.312,28.57Z" }), h("path", { fill: turva2LogoColor, d: "M282.593,98.252C279.561,93.989 261.976,67.203 261.976,67.203C258.662,62.213 263.967,65.854 271.472,55.546C283.497,39.022 275.684,11.68 252.166,7.823C244.025,6.153 235.492,6.467 231.025,6.467L199,6.467C196.282,6.467 195.719,7.155 195.719,9.755L195.719,33.338C195.719,33.718 196.001,34.039 196.381,34.078C201.371,34.628 206.558,34.91 211.817,34.91C230.174,34.91 247.771,31.432 258.512,25.446C259.795,24.732 261.321,25.741 261.321,27.306L261.321,28.577C261.321,43.666 237.417,58.604 211.817,58.604C206.623,58.604 201.502,57.989 196.63,56.882C196.165,56.777 195.719,57.124 195.719,57.602L195.719,98.174C195.719,100.774 196.289,101.461 199,101.461L221.739,101.461C224.457,101.461 225.02,100.774 225.02,98.174L225.039,71.047C225.039,69.954 229.44,70.111 230.776,71.702C235.086,76.843 242.899,92.928 246.547,96.857C248.852,99.346 253.011,101.461 260.287,101.461L278.958,101.461C281.231,101.461 283.765,99.916 282.586,98.265L282.593,98.252Z" }), h("path", { fill: turva2LogoColor, d: "M77.377,6.388L3.281,6.388C0.563,6.388 0,7.076 0,9.676L0,31.556C0,33.809 0,34.7 2.331,34.7L24.297,34.7C26.432,34.7 26.491,35.46 26.491,37.359L26.504,98.174C26.504,100.774 27.074,101.461 29.785,101.461L51.24,101.461C53.958,101.461 54.521,100.774 54.521,98.174L54.521,37.221C54.521,35.427 54.632,34.7 56.715,34.7L78.026,34.7C80.161,34.7 80.665,33.665 80.665,31.936L80.665,9.682C80.665,7.083 80.095,6.395 77.384,6.395L77.377,6.388Z" }))) : (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 305 111" }, h("title", { id: logoId }, "Turva"), h("path", { fill: logoColor, d: "M79 90.1A40.5 40.5 0 0 0 98.3 58H79v32.2z" }), h("path", { fill: logoColor, d: "M45.1 57.9V46.4h52.3a40.5 40.5 0 1 0-30 48.5V58H45z" }), h("path", { fill: textColor, d: "M278.9 80.3v-9.8l-7.4.4c-2.4.3-4.3.6-5.7 1-1.7.4-4 1.3-5 2.3-1 1-2.3 2.8-2.3 4.6 0 2 .8 3.8 2 4.8s3.3 2 5.7 2a22 22 0 0 0 12.7-5.3zm4.2 8H279v-4.1l-3 1.9-2.8 1.5a17.4 17.4 0 0 1-7.4 1.6c-3 0-6.3-.7-8-2.3a9.6 9.6 0 0 1-3.4-7.2 9 9 0 0 1 1.8-5.9c1.1-1.6 3.1-3.3 5.2-4.2 2.1-1 4.7-1.6 7.7-1.9 3.4-.4 6.8-.6 9.8-.7v-1.1a6 6 0 0 0-.7-3.3 8 8 0 0 0-2.6-2.5c-.8-.5-2.2-1-3.4-1.1a25.7 25.7 0 0 0-8.8.4c-1.9.4-3.3 1-5.4 1.7h-.3v-4.3c1.2-.3 2.3-.7 4.5-1a37.7 37.7 0 0 1 12.8 0c1.8.4 2.9 1 4.2 2 1.3 1 2.3 2.3 3 3.8.7 1.5 1 3.2 1 4.7v22zM250.1 56l-14 32.4h-4.8L217.4 56h4.5l12 27.7L245.6 56zM137.7 88.2l-2.7.7c-.9.2-2 .4-4.2.4a9 9 0 0 1-7.2-3c-1.9-1.8-2.6-5-2.6-9.3V60.2h-5.2V56h5.2V47h4.2v9h12.6v4.2h-12.6v14.2c0 1.8 0 4.3.2 5.4 0 1 .3 2.5.8 3.4.5.8 1.4 1.4 2.2 1.8.8.4 2.7.5 4.1.5 1-.1 1.7-.2 2.7-.5l2.2-.6h.3v3.8zM176.4 88.4h-4.2v-3.9c-2 1.6-4.5 2.8-6.3 3.6-1.8.8-3.8 1.3-6 1.3-3.6 0-6-1.2-8-3.4s-2.5-5.5-2.5-9.9v-20h4.2V74c0 1.8.1 3.8.3 5 .2 1.3.5 3 1 3.8a5 5 0 0 0 2.2 2c1 .5 2.2.7 4 .7 1.5 0 3.1-.4 5-1.2 1.7-.8 4.5-2.4 6-3.6V56.1h4.3v32.3zM210.4 61h-.3a21.6 21.6 0 0 0-5.4-.7c-1.9 0-3.6.4-5.3 1.2a31 31 0 0 0-5.4 3.7v23.2h-4.3V56h4.3v5.2c2.3-1.9 5-3.2 6.7-4 1.8-.8 3.6-1.2 5.5-1.2a22.3 22.3 0 0 1 4.2.4v4.4z" })));
 };
 const i18n = {
     fi: {
@@ -105,7 +108,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: '79e576b071b49326a95d2d5ab7c6e113d1688670', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '41f68531196f1418719916208cd9a223f98813b7', 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: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .right {
+  color: #172a3b;
 }

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: #e61740;
+  }
 }

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: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button:hover {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active::after {
+  background: #e61740;
 }

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: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva:hover {
+  background: #fbebe1;
 }

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: #e61740;
+}
+:host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva::after {
+  background: #e61740;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva:hover {
+    color: #e61740;
+  }
 }

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: #e61740;
+}
+:host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva::after {
+  background: #e61740;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-link.duet-theme-turva:hover {
+    color: #e61740;
+  }
 }

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: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-modal-sticky-header {
+  background: #fdf7f2;
+  border-bottom: 1px solid #d4dde2;
 }