@duetds/components 9.10.0 → 9.12.0

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

@@ -43,24 +43,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '939cedfacbeb6cc0069fdca4c80909580937143f', class: {
+        return (h(Host, { key: '376bffdd22734d1e233f8a906270acc682a0db52', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '04e36c83cf0d51f536377f6679e455765e98c837', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '316f74d7dbf89cd2da0122cf0c169af3c1abca94', class: {
+            } }, h("div", { key: '5437c66a202aaf3458e53f23eaba2d02801c880c', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '8ecf0ad715d8bc1443fd9f67d67d6b449efae927', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '4ab63842f267fca4adadd6bed7c88a5509e6b792', class: "duet-layout-top-wrapper" }, h("slot", { key: 'c512f4e7f30bb6a1e7159a79d3bc24ba05cf3640', name: "top" })))), h("div", { key: '9d6a034aa4a5e0a1c4e5293b2755be1d304be851', class: {
+            } }, h("div", { key: '1e2286c3ea76089553cc640991f53948fe76f503', class: "duet-layout-top-wrapper" }, h("slot", { key: 'dd52cd74039333a2b0e8999607bfb0915f79b0e0', name: "top" })))), h("div", { key: '1c84e875cb4e7cb26f1f5aff42e48d74fbdd9d6b', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: '5d98c6a1feb7e641bf95140b957f1c23add97d4e', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '3f321ec210469b09507b8d1f3f457a4486912eba', name: "page-heading" }), h("slot", { key: 'df7d9350f8cfcaadde996fb8507570e80a4b542f', name: "main" })), this.hasSidebar && (h("aside", { key: 'ab2cde3f205725d4e4994aa68a93ab79a5df2b7e', class: "duet-sidebar" }, h("div", { key: '66865fbd9febf8a642c39db1b1f37a915bef1a1a', class: {
+            } }, h("main", { key: '3fb3163e1e05265a89670331ea7f86181891eb2b', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '69225380f33a6e6499d8097f1019554d5b349c6b', name: "page-heading" }), h("slot", { key: 'b0ca93c6015b2d8912c7e2eaddb665c9e7f18619', name: "main" })), this.hasSidebar && (h("aside", { key: 'd63d88c4cfba1e62c2f18502fbd6da81be905d9d', class: "duet-sidebar" }, h("div", { key: 'c94f8fe0a8269aae4a410790cf72ec620b1c5c28', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '4869dd5a533b2adb3d166e27a81820df7b6a7692', name: "sidebar" }))))))));
+            } }, h("slot", { key: '91b0c48b39c04a2546814d246a9828d442abea0f', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -131,7 +131,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-layout/duet-layout.tsx",
                             "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
                         }
                     }

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

@@ -428,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: #171c3a;
+}
+:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva,
+:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva {
+  border-color: #fbe4d6;
+}
+: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: #171c3a;
+}
+: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: #fbe4d6;
+}
+: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

@@ -122,10 +122,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: 'cf0f91e0e16826f9bd0dd8817ab155bedb50875b', class: {
+        return (h(Host, { key: '4a88142674554658affc1d30f3768a219fe6cf81', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '8f514ae4a3711e9e7690bcf84c48c894b1716a6c', href: this.url, class: {
+            } }, h(Tag, { key: 'af4ce006460b99458976ab723981aeefc1cd0c84', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -687,6 +687,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

@@ -72,7 +72,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '9e004e8a4752dd9ebcb4faf2881a2520823e231b', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'c7678a8d8ad217e33c8c69398cdbe18f23f5fa1d' })));
+        return (h("dl", { key: 'c812a1b444858b533f9c34f809cea2c9ba67d841', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '177fb7013132331584b126edb4b11cca3723bfc9' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }
@@ -175,7 +175,7 @@ export class DuetList {
                     "references": {
                         "DuetListMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListMobileAlignment"
                         }
                     }
@@ -227,7 +227,7 @@ export class DuetList {
                     "references": {
                         "DuetListVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListVariation"
                         }
                     }
@@ -253,7 +253,7 @@ export class DuetList {
                     "references": {
                         "DuetListLabelWidth": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListLabelWidth"
                         }
                     }

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: #171c3a;
+}
+
+: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: #fcf7f3;
+}
+
+:host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva) {
+  border-block-start: 1px solid #ffefe5;
+}
+
+:host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva:last-child) {
+  border-block-end: 1px solid #ffefe5;
+}
+
+:host(.duet-theme-turva2.duet-list-inner-bordered.duet-theme-turva:not(:last-child)) {
+  border-block-end: 1px solid #ffefe5;
 }

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

@@ -2,28 +2,34 @@
  * 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() {
+        this.theme = "";
         this.responsive = false;
         this.breakpoint = "small";
     }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dbea429576ed1f52ed1c3fc26b2ad7d235a0a413', class: {
+        return (h(Host, { key: '6c13dd9dfcc83c4c21a09accb3d1263e51ef7685', 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: '21f820ef81ada72e006b22a14634b2ba57fe9ce3' }, h("slot", { key: '3650e03253950a189ca684b374220b0edd9f6e37', name: "label" })), h("dd", { key: '9e704a02a57e3d1809b3ee7895ffb554a37e24c0' }, h("slot", { key: '8bd4afe4da261e270cfa9dd2b946946dd4cb12ad', name: "value" }))));
+            } }, h("dt", { key: 'db16f474643cbb2a074de19ed7a4a4ccfb302e4f' }, h("slot", { key: '1ca0f7fe8ac90882c0835df5e8d907eeb743fb47', name: "label" })), h("dd", { key: 'f4d207347f0995fe1188503a13b45adcacc39ad5' }, h("slot", { key: 'dbbcde25c28d4c8f5019c5a6ff90af3e3254965b', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -39,6 +45,32 @@ export class DuetListItem {
     }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "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,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "responsive": {
                 "type": "boolean",
                 "mutable": false,
@@ -93,4 +125,5 @@ export class DuetListItem {
             }
         };
     }
+    static get elementRef() { return "element"; }
 }

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

@@ -79,7 +79,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '8028936edab2ebf0d354511650b7fee94fd47a1a', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'dab66b31a829a45902377e958bda7fc5de27bdf2', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '32845f8239d631a8b0544f6fe493e0ae557f89f5', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'b9b3dea6548f30a977ccb4a9fadfe3aae7090aca', 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",
@@ -182,7 +182,7 @@ export class DuetLogo {
                     "references": {
                         "DuetLogoSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-logo/duet-logo.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-logo/duet-logo.tsx",
                             "id": "src/components/duet-logo/duet-logo.tsx::DuetLogoSize"
                         }
                     }

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: #171c3a;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .right {
+  color: #171c3a;
 }

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

@@ -154,14 +154,14 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: 'ba51ccb8c54c3fe7671eddff8378534eb0aa4503' }, h("nav", { key: '77477660c912b5e361daedbcf8dce77d85e1fdaa', class: {
+        return (h(Host, { key: '664846aed5fa5418883aa8e7d285f43bca31b9b7' }, h("nav", { key: '67eb2be48aa07d8839de507ac2e7a3d549a7bf1b', 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: 'b78519eb96e7fce14819a328e80794bdaaeb4614', class: "top" }), h("div", { key: '569571f9f4fea275f14d8cf27bed3d9c9ebaccfe', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '204c1ae8618cfdb39f1e05e23375a10e2872c194' }, h("duet-logo", { key: 'b0175b7ed2254da32ad9495cb1b089d72ad0f3e4', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'a1dfa3d10da3c0f2d0b999dffbd24366d6285128', class: "list center", role: "list" }, h("div", { key: '60d126975451f170fc5c38d1804fff0ac95c3037', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'ea4b5d602de4baf6ebea7142e3d9617eda1c8cff', name: "center" }), h("div", { key: 'd0b27d21ad85f447011cbdde964b255bcb9c1375', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'd7b1e7dbbf01436ab09d792ce9c47736cdc9fe52', class: "list right", role: "list" }, h("slot", { key: 'd0ff87de435ef2a5e3c4f96d6992704957542c84', name: "right" }))), h("div", { key: 'c5ac242c2634edc9c46423f4051d98a47bac300a', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'e4cb471892ccd3b07e2ba137cfe5f09d2aede935', class: "top" }), h("div", { key: 'a3956e49657add3b004a7f48c1039c95e768cf3f', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'daa83bf253d89d2691a128d4449ec3bd27a0fd1c' }, h("duet-logo", { key: '519732ee4b3a9e8db70315d561859b569c3acf9d', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '7baa6a6cfbfcfe80e4965d9a2ba8fbd5c2e908fb', class: "list center", role: "list" }, h("div", { key: '214ec3b02204a0ff8f09f5ebe8545b3b52e4b27a', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '8f039e09a7b69764151356d5697a2ab65e7b5a2e', name: "center" }), h("div", { key: '25fb60d81a3cb648049e51f9497282feddf24d48', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'b86943b205d836a309c61260e20599ff95bf1a1a', class: "list right", role: "list" }, h("slot", { key: '16eaaf4fb82ae25c9fd3d8324134f100b0b77c19', name: "right" }))), h("div", { key: '637eb362a07458d226c916447385262fb2b0c32d', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -361,7 +361,7 @@ export class DuetMenuBar {
                     "references": {
                         "DuetMenuBarChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
                             "id": "src/components/duet-menu-bar/duet-menu-bar.tsx::DuetMenuBarChangeEvent"
                         }
                     }

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

@@ -38,10 +38,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0f70c9bf0735937ee494cce289b4c7c328004e55', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '5cfdeebb375e5e684b85846a22dcbdb0d643fc95', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '50f598983e907d97ef1316160ee05bfd3fa162d4', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '1107dec87cb815440ec64f4a87cb16d256a9d35a', 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: '9ad195dc758838b1b924da7c78f1b64f9cee8db6', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'c15fb81cfbfaecfad8eb0132b14f5390a301cd29' }))));
+            }, "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: 'abe6328ef09cfb22c2901b72b93b3cdf7b4b5471', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'e2f0498c80acf9f4047b46566fc9d68f70f59726' }))));
     }
     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: #171c3a;
+}
+: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

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b7fd730a9ca29fe66b3fb47968d97882881dc46c', role: "listitem" }, h("div", { key: '8375747f96bce65f0079f3a9e32f597ebfdea259', class: {
+        return (h(Host, { key: 'edccb5f70ded057833cc2daa2a9e5122fcf693b0', role: "listitem" }, h("div", { key: 'd40f575e077c90cf83800312ee3ab06ac9562dd2', 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: '216c022acdd13b07237e09675ca2a3e5619d8945', 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: 'be04861fb3c8c5e3f0fe82672151e7a194115a66', 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: '8f871b50abc91e0d0cbe53d7ce94eb975926c893', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '99691e6483647ec36e53d362eb63f67a77c5e86d', class: "label" }, h("slot", { key: 'b875b758547563e0b9f4c64540b8893a06172f87', name: "label" }), h("duet-icon", { key: '241cebbb03717f5a56aaf6299742ef72c4d1d03f', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'f6e8d54ef1e4cfa3512485a136d52dbe386d0755', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'a7f63c0c5c011afaec3755be92610be9cbf13000', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '62b2d4b3c6adc5aba4f07d628305d375ad079d82', class: "label" }, h("slot", { key: '89466557605d586e66bc4425cc60b9ca69436c02', name: "label" }), h("duet-icon", { key: '04c5c890603c2f2627e92efc3348addcd462799e', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '310c646170237d500ed801356fe24891e6101803', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '059b1fa4eb5ccb1e4adbbb775c4d8cd9c9f2fb93' })))));
+            } }, h("slot", { key: 'cc9c367154155a88ca285bb85e71f4da4f1aea99' })))));
     }
     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: #171c3a;
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva:hover {
+  background: #ffefe5;
 }

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

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6068b6651363acfa5a38ce76f97eef97c617ae40' }, h("a", { key: '7181016d9299aae44bfabcb59504bc1cb839d794', class: {
+        return (h(Host, { key: '6b17eecb66ad5162a6848b2f88445fa4fd72bb10' }, h("a", { key: '3b3d5c0b9e51f2186e3f9dd6c3fc9847555c543d', 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: 'd188538d34c86debcdcea72edb4453b58ce86bb7', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '4dc908e75b92425aa98d33349389a063c96d6417' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'a79948b652be6b2ed15d4ad8728c1658bc1c061d', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'abe75d54c989cfcca99640f4f54bbb79869fa052' }))));
     }
     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

@@ -48,11 +48,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'df9bbe4dc4bf8f4e51209669b9d338d294a9eeaa', role: "listitem" }, h(TagName, { key: '549949b05fc9290ade7bd94fff4cfbee0bae8f04', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '78cb2d5a9f36203918418ade091de2156c3a290e', role: "listitem" }, h(TagName, { key: '90b92ad5dc5b77d425d19471f115aa94179428c4', 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: '2bf91a8c0f70bc9a0a4dff411757e41900c049b7', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '3d72b9e811d6caeb973f5e21ac995d21da6444a6' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '81b25dce0c79f0b71cc832e7ac6da9197c69e1f9', 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: '69d0ae59d451360c14945e1517c26e9d017f4d7a', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'a7903797ed84cb566185ca79f8bacfae5d88bb28' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c300697850a2cd3bd6b9236e29be7433fcec7e45', 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

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1dc7db637e4e3d95dfde93025a2e7a9b8f9bb800', role: "listitem" }, h("a", { key: '5bf081aadd270657505210b7b12189e6b9abda64', class: {
+        return (h(Host, { key: 'a253a92fe5b3c7bd02870ef60733f31208778829', role: "listitem" }, h("a", { key: '6cc592290262edf3bf027c15be55aea0d05b2185', 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: '8a98386d15f2e32cb70769c1b92ac2a92cf124df', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'efd02f3e67a3480cc42cb47b9155983163c35b77' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '8a6c8ee57536ab2a5edee32c75c86988277a7b49', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'f8c916a98522baae5e70febed4316c6cd3daa3dc' }))));
     }
     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: #171c3a;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-modal-sticky-header {
+  background: #fcf7f3;
+  border-bottom: 1px solid #ffefe5;
 }

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

@@ -249,18 +249,18 @@ export class DuetModal {
         var _a, _b;
         let iconColor = "primary";
         let closeColor = "secondary";
-        const closingButton = (h("div", { key: '9bd3048e4d9313e5c9af47dbc33af4eb66ed3a5a', class: "duet-modal-close" }, h("duet-button", { key: 'ab6131730c34219274154937f6f57aca53dbbdb5', 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: '675dc50327ab1e0f8033a2befcdf37cd4d3e0bf2', class: "duet-modal-close" }, h("duet-button", { key: '4184913dd9b92a9b95f1d5e773800766530b97cf', 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: '3161f0487179b9f75ec61b82ce3b6c5faa246539', 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: '0751e3ddbaa09c8c1abc7986e3fabd97dba82be6', 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: 'b81c8fe6ffd00fa450ed6cc3f752e55ad337892c', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'dca19f7447b771f47b47e976f73544b47b2b736d', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: 'c1e924fd65887cf4378aab5b0a8a240ed48eb04a', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'a9e7ab02f299be796797683d7f1ba696bc5c884f', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -271,18 +271,18 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: 'e21d68503cd3507f94b63280f1b8fda4333e3a58', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: '86107c52f7cdb102f409586020bdeb116c041720', 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: '27491137eba94ef6a4f244dc0f89bae403048f9e' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: 'ae43c8158067a7111ebaf5fb712e5f35dda5fcea', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'c728a3caf6df68ed0c97baf1425c2ddab6a98f5b' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '36b15d0c3595fdcecc6f14abb3578eefef74a8c9', 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: '76fec413d37c3b45fde13b208024a3abb3f6fb44', class: "duet-modal-header" }, h("span", { key: 'a013002e8b1471967659999a6cec3c26020c2850', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'a1b38d58fcffb2b67b15ea27b831109144235773', name: "top" })), this.icon && h("duet-icon", { key: '909e82f5051f2118d366ffc2d7d6387250d995e3', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '3b5de36ab65d6025941ddbd822da4296422756a1', "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: 'a46059a4b80c8551d56d8848b75f2823711a3c3b', class: "duet-modal-spinner" }, h("duet-spinner", { key: '6e3e934c35c7be05854d7fe19d26b1d8fa082167', size: "large", color: "primary" }))), h("div", { key: 'b94e2c9f6f7995f2bb66d9738dd1a22636359455', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: 'a3d455bffeae35e973dd16cda76c36f3a6370f48' })))))));
+            } }, h("div", { key: '5dfb5b08e6593777e82f58c9a8d4db36cd3efbbc', class: "duet-modal-header" }, h("span", { key: '0a95f7b53f47eb9e75ea99a007b0951b9a0fe11a', class: "duet-modal-inner-slot-top" }, h("slot", { key: '56cbb6d090f309f66c7e79f90b3b8b4920501fca', name: "top" })), this.icon && h("duet-icon", { key: '1918983d8ba93e09a80ab19f9dd2d5d88b9c483e', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '7e77994203cb473aa15b6e7356660278bad02d57', "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: 'cb74816a66ac5eb67938c8a4358d0ecb2f7769f3', class: "duet-modal-spinner" }, h("duet-spinner", { key: '70156c240cc4d32e660349992be704be48d55c54', size: "large", color: "primary" }))), h("div", { key: '7d20cd4b16628ed66118f41c9f2cb626cb87fd6b', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '229d35cca36167acf3d262376b3d11a6473d5635' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -385,7 +385,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
                         }
                     }
@@ -508,7 +508,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalVariation"
                         }
                     }
@@ -534,7 +534,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
                         }
                     }
@@ -809,7 +809,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalCloseEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalCloseEvent"
                         }
                     }