@duetds/components 9.10.0 → 9.12.0

package/lib/collection/components/duet-share-chart/duet-share-chart.js

@@ -3,6 +3,7 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { formatNumber } from "../../utils/language-utils";
 import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetShareChart {
@@ -33,7 +34,12 @@ export class DuetShareChart {
     connectedCallback() {
         if (!Build.isServer) {
             this.childObserver = new MutationObserver(this.updateChartItems.bind(this));
-            this.childObserver.observe(this.element, { childList: true });
+            this.childObserver.observe(this.element, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                characterData: true,
+            });
         }
         this.updateChartItems();
     }
@@ -54,17 +60,17 @@ export class DuetShareChart {
     updateChartItems() {
         const children = getElementsFromDefaultSlot(this.element).filter(el => el.tagName.toLocaleLowerCase() === "duet-share-chart-item");
         this.items = children.map(child => ({
-            text: child.innerText,
+            text: child.textContent,
             value: child.value,
             color: child.color || this.pickColor(),
         }));
         this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
     }
     render() {
-        return (h(Host, { key: '230ed44d6302403fc483392a556cdd6a994ece90' }, h("div", { key: '491a97e31835484f390449c35cd21720e06b6a7a', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items.map(item => (h("span", { class: "duet-share-chart-share", style: {
+        return (h(Host, { key: '8cde787631aaefbe212629a037cf8c398cd2f083' }, h("div", { key: 'f7632b55f599164ae9dc6c8af3f70fcc7188e8a6', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items.map(item => (h("span", { class: "duet-share-chart-share", style: {
                 width: `${(item.value / this.itemsTotalValue) * 100}%`,
                 backgroundColor: getColorByName(item.color, this.theme),
-            } })))), h("ul", { key: '943e85740a3ece5878daa1138dfca90ee5798ab2', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", item.value, "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${(item.value / this.itemsTotalValue) * 100}%`)))))), h("slot", { key: '5c102cbf81beeb8b1c9f2a66508bd34d7547a2b5' })));
+            } })))), h("ul", { key: 'b7902638812b20d9afd3d5bc156e74b1ed162d8c', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '4d57f6b752926c779e6b2f52b217383cb135c236' })));
     }
     static get is() { return "duet-share-chart"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart-item/duet-share-chart-item.js

@@ -8,7 +8,7 @@ export class DuetShareChartItem {
         this.color = undefined;
     }
     render() {
-        return (h(Host, { key: '1db343b4bc9ac0287de482ea0d609049a4645d8d' }, h("div", { key: 'e75250d63d27f9501799767cb42283f664f860ea', hidden: true }, h("slot", { key: 'd480ba557649e858697129546874bae17e47135d' }))));
+        return (h(Host, { key: '0c89fc95cf25c2faf556ea7b7de8ace02d848ce9' }, h("div", { key: '8cdb7f31ae240b68eda387beb52855c36acef5e6', hidden: true }, h("slot", { key: '6858e722e101a5d677b61dada80744180b31fbe0' }))));
     }
     static get is() { return "duet-share-chart-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-show-more/duet-show-more.css

@@ -50,4 +50,8 @@
 }
 .duet-show-more.duet-theme-turva .content:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+
+:host(.duet-theme-turva2) .duet-show-more.duet-theme-turva {
+  color: #171c3a;
 }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -91,12 +91,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: 'cf001cd88b6d046f5d38edb4415fea3e14621949' }, h("div", { key: '7b3e3eb12202d72e88304e7168d92ec9775b1907', class: {
+        return (h(Host, { key: 'f3173450b4f7285549fb9eddf878c9fbb75539ac' }, h("div", { key: '6df93a8cfbb0308957ccf9755e3aa2a382f3390d', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: 'bc1f2d3525d4e5ce6b10770013aa6696822a71aa', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'b250102aac08de1604938717797afcfc7f28f624', class: { "slotted-content": true } }, h("slot", { key: '95f39f8e5abf0a79bf9f40cf34281013991cdd8b' }))), h("duet-button", { key: 'b07f00cb1d84ba412a711f7f1f37e7e3269e1984', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '33157363432909baaa57cb03d67c71c0de61b073' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: 'ef68cd495253247788c1966b5fbf0794694dcee7', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '7ef4551d4014d3767c7c5c1295cdd932b573dbe5', class: { "slotted-content": true } }, h("slot", { key: 'cb62e16a9d8397cee71e1df9d905310e8c399c69' }))), h("duet-button", { key: 'b70902ab3cdb24cb1e63fc36c143bc6e39ace4d7', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'd38229ca020c8d226fade3be4a0be3ad502cbb06' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }
@@ -468,7 +468,7 @@ export class DuetShowMore {
                     "references": {
                         "DuetShowMoreToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-show-more/duet-show-more.tsx",
                             "id": "src/components/duet-show-more/duet-show-more.tsx::DuetShowMoreToggleEvent"
                         }
                     }

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

@@ -174,4 +174,32 @@ slot {
 }
 .duet-theme-turva slot {
   color: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva {
+  color: #171c3a;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg {
+    background: #171c3a;
+  }
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button {
+  color: #171c3a;
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active {
+  color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after {
+  background: #e61740;
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
+  background: #fcf7f3;
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
+  background: #fcf7f3;
+  border-bottom-color: #ffefe5;
+}
+:host(.duet-theme-turva2) slot {
+  color: #171c3a;
 }

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

@@ -260,16 +260,16 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: 'dcefec6bb011072769a403f67849797e5fa8f3ae' }, h("div", { key: 'd498c18cb535e4750ce2b9af9d19a7e2197c8a0a', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '032de240d334b8653caab29e94d72abafa1807fc', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '48ed352b83ed43e36bc3689f5606500b549fd871', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: 'b06138095b2584f939132470fee653ef6407cfbc' }, h("div", { key: '7fe5aa734dc9d773a50f15fb1d33816d59bea675', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '058c7f9bcb9fd8a39023ce1af7928520b9256ca3', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '168dea6e198121886c481bf3cc4a5685e5e9b635', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: 'b434b224c99a059a8ac6f764eaa6a37a8aefd142', moveFocusTo: this.closeButton }), h("div", { key: 'be5f535c7ed0347040bedca4a4b4834666d6c327', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'f74dce46123f8bb14f06a5a69bea2de111f53a69', class: "top" }, h("button", { key: '1054e241cbd47253774aeb9fa51631ae94688592', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '732f5891a311e78215c6b11c16e1ed53801a685e', moveFocusTo: this.closeButton }), h("div", { key: '99a512217fa513b1ba7ef090b9d70bd82607486b', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '04e5a3a6262b6bd74a618ea7aa4d5daabcc4efd5', class: "top" }, h("button", { key: 'e65ce50234a3cfb411c6520e890119f643056f4c', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '41709242489fff542f2db4560557795af2620408', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'fa2eeb005c1d625af0c792b735128a22fb33169c', class: "sticky-header" }, h("slot", { key: 'c2754ffd21e986a6038fb5cac5fd50f8823cf933', name: "sticky-header" }))), h("div", { key: '5a42ff8d5bc2a3e3749460bc71b6792530295993', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '2e3b651ed8ddd41b52f4013c5c8ce5d5b13d2ecd', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3c94f5082d687f924775f938ef39e8ec79a2b603', class: "sticky-header" }, h("slot", { key: 'bf3757c7225a27018e664a3f2dd6a21388e5792b', name: "sticky-header" }))), h("div", { key: '43abbab29280b8cea873b84eb79bacf574016e89', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: 'ef27791ecc42176dffccc3b5aa9bab77a736d4fb' })), h(FocusGuard, { key: '94f2649dff2bcebaa1b716aa4bd15e472d1730e8', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'acfbeb5b6e39ee7fe06abf4b0cb90515fe5e88c4' })), h(FocusGuard, { key: 'b20fb123efe1d1185aa0a1d2c62175c1f86aa909', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }
@@ -491,7 +491,7 @@ export class DuetSlideout {
                     "references": {
                         "DuetSlideoutEventDetails": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-slideout/duet-slideout.tsx",
                             "id": "src/components/duet-slideout/duet-slideout.tsx::DuetSlideoutEventDetails"
                         }
                     }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.css

@@ -52,4 +52,8 @@
 
 .duet-theme-turva ::slotted(:not(:last-child))::after {
   background: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva ::slotted(:not(:last-child))::after {
+  background: #171c3a;
 }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -35,7 +35,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '848aaedd9e1c8ed6d539b69daef3a831af55b178' }, h("div", { key: '69695781b71a228e58973bd2673c7765582b6fcb', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '2305f5314bf1fb5c270d2a8eeb55f75382d2591a', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '2d7a718ac92ce21dd138e7fb71e27a02ac5ca1ae' }))));
+        return (h(Host, { key: '2ab888a7ae849f65aa6e7f707bdb9a63e74fcb1e' }, h("div", { key: 'd439f10d6618e506cded6281ec65a0247b9fb77e', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '24c14d344ce2454cde7e260044717d45a472bfc0', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '3d9e342638a8f134981efed8deadf7a3ca8f0d46' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,4 +118,14 @@ slot[name=description]::slotted(*) {
 }
 .duet-theme-turva slot[name=description]::slotted(*) {
   color: rgb(113, 118, 132);
+}
+
+:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva {
+  color: #171c3a;
+}
+:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva.active .label-content::after {
+  background: #e61740;
+}
+:host(.duet-theme-turva2) slot[name=description]::slotted(*) {
+  color: #171c3a;
 }

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

@@ -42,12 +42,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9c7e694f19f234e14ac86c900c0f7ae6f765f7ab' }, h("a", { key: 'ff3e3a23d2d1b3f56b0b994e7eeccb6f71b4c5be', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: 'a40416f8f46c552dc52f47dc5a20dd6b297e5451' }, h("a", { key: '0c1100e6fa2c94b27b1de37cf9fb7110f1b015b7', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'f7528118eb9ac1331797c4e375e5373511ed2b5a', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '7ade705aba28a34b24d53a09ec067823b94c03d6', class: "label" }, h("span", { key: '84085ddeaa526502419641aefd0cd30106b89fe0' }, h("span", { key: '792db99a27189102d713db6351e724547297670f', class: "label-container" }, h("span", { key: '1416b4f044e1320c2f71a2db1b3839e21d482979', class: "label-content" }, h("slot", { key: '7f66789e0c27b6c09309f446179cdc8e5a6dfa6d' })), this.external && (h("duet-icon", { key: 'b1e870744e89431b43907f9ca6030a075af36be7', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '3dcd61fca8f725f97ea83d397d676ede325fb624', name: "description" })), this.caret && (h("duet-icon", { key: '4bcd014bb5cd4c1d1af3d42d113407b26bcad004', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'cfa9532a3b552492020986415bf5f6f12082f2b5', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '3d388ab4d01f32217775f5ef88ad46daef148235', class: "label" }, h("span", { key: 'f75a096671d5b8f97c067cfacbda83d3bd9d8db8' }, h("span", { key: '2aec2f0aef1f95cce2d253b3b7b381d38161bcdc', class: "label-container" }, h("span", { key: '9b16b7cfe6ca4fdae793736fae5523bdf5371bd5', class: "label-content" }, h("slot", { key: '5597bac9103fd5b2e1d09e2b943d83c9e8f79d82' })), this.external && (h("duet-icon", { key: '5902a878fe378a712b9704f7a72cbd34e5386b8c', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'c017fa9fefdcdef5c3f5ce50e7814e3ad31b427f', name: "description" })), this.caret && (h("duet-icon", { key: 'ad14153a7ae8c4392a9677bd83dfa69101986e04', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.css

@@ -233,4 +233,24 @@ slot:not([name=label]) {
 }
 .duet-theme-turva slot:not([name=label]) {
   color: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link {
+  color: #171c3a;
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link.active .label-text::after {
+  background: #e61740;
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top {
+  background: #fcf7f3;
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header {
+  background: #fcf7f3;
+  border-bottom-color: #ffefe5;
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .top span {
+  color: #171c3a;
+}
+:host(.duet-theme-turva2) slot:not([name=label]) {
+  color: #171c3a;
 }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -159,23 +159,23 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: 'cb822cc9737388e773957e9167d9a3f3092a5024' }, h("div", { key: 'ecf89dccd7aaa7516815ddb1b3283dcb88561624', class: {
+        return (h(Host, { key: 'c618207a4d1f48bf3d6826e1403f814dfefab575' }, h("div", { key: '24aeed548e03a4ba674fd5273c4f702f8121db77', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '1c5d2a8c1e0ccc4d56c57c12e32f37fd2d8bdf28', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '86f88c9bbe4895bd068180e5b995b33f32d02062', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '2ed84760445304c52dc13d7d5691fa83386a3fb3', class: "duet-slideout-icon" }, h("duet-icon", { key: 'a80ea5ba954811c488852ac37d6d7239b7b33a14', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: 'a66f32d3b20af0bbad481d024da7cc5616b1c879', class: "duet-slideout-badge" }))), h("span", { key: 'da846f3815471fb3fdcd4c1319e18f1a5597cfa0', class: "label" }, h("span", { key: 'f6e260a2a4e4b97d6f724f45e1e46ab386dff47d', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'abddec9671e9c3b3a3cf43ee916ee198a06b0516', name: "label" })), h("duet-icon", { key: 'ed3ef00614b835aac2526866e71b05198dabe225', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'f004a0beebfa0aea1f9140d94f44a53def61be84', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '4c2c622204fdd0f993285435eb35d99c469deba7', class: "duet-slideout-icon" }, h("duet-icon", { key: '47471be5905639b85633ca7c078fc8a2b8b3434c', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '010cb1b61008c593fdc2ae9a75b85f4333bbf6b4', class: "duet-slideout-badge" }))), h("span", { key: '83e55977bce3226cacaddf855b620fca72b06d39', class: "label" }, h("span", { key: '9d2cab5ad2ffd23583afc55ddf53cab71f8a3774', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'd5ae73ff0c7304bf80d6a42bb58265fadadc6261', name: "label" })), h("duet-icon", { key: 'b1500d208ee1d7f73139aef3eb067d7f88bd161f', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'b4b7095bd5b8b0bf9123970308284d05910d29ff', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '141275269b60c09c78245f2cdba73e3c1556ec89', moveFocusTo: this.closeButton }), h("div", { key: '8835c47450104420f6dd3a208375dfc129fe13fc', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e26413e851f98164d3f00b4839899a7a05c57a0d', class: "top" }, h("button", { key: 'e47be55cb0d87b1031a051ce164af014ca773e17', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: 'b727beeabc7dbf3ddac34ec3bb2b83088fdd8a64', moveFocusTo: this.closeButton }), h("div", { key: 'ae27f00c16f42cdc381e039374ca60469b7e47e8', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '2247b741022af7ea503e766eb23d88317153e4be', class: "top" }, h("button", { key: 'b5845650af972cd12875faf5f7591636fb26e936', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: '6c1caa323b815ad3940991fdc7aacec7aab7f94a', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '96e9ac9d7ff5121db3d90ce76613d00db1864778' }, this.label.innerHTML), h("button", { key: '4557397517d57085b8442828c0b60164ce048a3e', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '7c00e8108b826b44fc9343d172fcda9eb700d4a9', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'b9f1ebcaf47a9635917063bec751725fd580f019', class: "sticky-header" }, h("slot", { key: 'd70c5e23758b79af9cfadfab39349bf9b71b4a76', name: "sticky-header" }))), h("div", { key: 'c87464365151093c3edca5fc7478af7b3b90e2ff', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: '9db41b0be45366ff69d05b07144ddb0e61200fef', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '3c77687dc007b4c7f2d8f64db30a512cfccb84c7' }, this.label.innerHTML), h("button", { key: 'b483ddbfbb812cd765892a1233b51ebeb609f794', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '4c752e1fae7537d84b3a4d0c5c3f49a65510129a', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '90a3a6cc8807e8d3d47532498277130ad8b06cc5', class: "sticky-header" }, h("slot", { key: 'bb9821613913f9b1698091345f6f9570a6b53c05', name: "sticky-header" }))), h("div", { key: 'efed104d95f95cfe31d0a4e785c54f089c221811', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'a0dd655320d212ccc005c3fb096b578f19f9c0a8' })), h(FocusGuard, { key: 'dafafa79bc1b13a9c9eb46379181a02ab0487aa5', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'fa57d978d819397f7b0ef84ed9e5581899d41750' })), h(FocusGuard, { key: 'b42d0431e7a6c14f457ca07a5d703dfa22039b5f', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.css

@@ -131,4 +131,17 @@ slot {
 slot[name=label] {
   font-size: 1rem;
   font-weight: 600;
+}
+
+:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button {
+  color: #171c3a;
+}
+:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after {
+  background: #e61740;
+}
+:host(.duet-theme-turva2) slot {
+  color: #171c3a;
 }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -40,16 +40,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '89618f83739daf830ec8b90e05e9f3e5f9b52f34' }, h("div", { key: 'e155beffd0996d1cace98318dc02b6a9cd6f1531', class: {
+        return (h(Host, { key: '61e8058eef36825a98bc85533bcb5f23e81fdbf6' }, h("div", { key: '613bc029822550b61c975eaff0ec1734cffbe115', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'f2aeae59fdea3ec033d49a5a5539c5d5f076394a', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '7d0ea9527674af103958a94c574fa929bf33fdc1', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'c884fa8d6236722a189b5bc384eb85000587ffa1', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '73cfdab8bb78c2504a8fc0d45d581be2161b6039', class: "label" }, h("slot", { key: '656c5d97ba82b382db0feb02003427fe41eb1767', name: "label" }), h("duet-icon", { key: 'd927fed89d4414a08391ca31fdfde8d51cd64b01', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '2292a1771bdc183cc5b4eb3836e32af3caf69397', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '59a45ada4c16c2acb57d285f0ecd174d70548a37', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'c8e5930cbece0e969fe96b9f534227b4d76fccd8', class: "label" }, h("slot", { key: '21485c8cafd5de8ce62f7eb0a23bb75cf1ac87d8', name: "label" }), h("duet-icon", { key: 'd47eb2b8e169425338c1671f41bef35a2e22e8b3', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '18622029483e38d5b07f8058aef4899f3e0289f9', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '8b5ea9880c9444c6bd3d98db753a7503813cdd21' })))));
+            } }, h("slot", { key: 'a8ff7bee4522da310d4a86916a877d626e67970a' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '8f58f01a032554c469822d7f0529e3a1a5f5bc72', class: {
+        return (h(Host, { key: '0a1ee47833e88bac28442b1bd65fc934f615be83', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",
@@ -49,7 +49,7 @@ export class DuetSpacer {
                     "references": {
                         "DuetSpacerSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-spacer/duet-spacer.tsx",
                             "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerSize"
                         }
                     }
@@ -101,7 +101,7 @@ export class DuetSpacer {
                     "references": {
                         "DuetSpacerBreakpoint": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-spacer/duet-spacer.tsx",
                             "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerBreakpoint"
                         }
                     }

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

@@ -96,4 +96,7 @@
   100% {
     transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);
   }
+}
+:host(.duet-theme-turva2) .duet-spinner {
+  color: #e61740 !important;
 }

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

@@ -1,6 +1,3 @@
-/*!
- * Built with Duet Design System
- */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
@@ -23,11 +20,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: 'dcb6140eeae0e31c85319ee668193865ba6a5e57', class: {
+        return (h(Host, { key: 'a7f033d3dc6eb117a0bc7467cabf4e5e3f8ff4b8', class: {
                 "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
                 "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
                 "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { key: 'd3d38db9f52dbd35af639463194130c6c265d24d', class: {
+            } }, h("div", { key: '4914107fd36f1a5ac9d77871ad5a0d7373e70359', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));
@@ -100,7 +97,7 @@ export class DuetSpinner {
                     "references": {
                         "DuetSpinnerSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-spinner/duet-spinner.tsx",
                             "id": "src/components/duet-spinner/duet-spinner.tsx::DuetSpinnerSize"
                         }
                     }
@@ -145,4 +142,5 @@ export class DuetSpinner {
             }
         };
     }
+    static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-status-icon/duet-status-icon.js

@@ -73,10 +73,10 @@ export class DuetStatusIcon {
         }
     }
     render() {
-        return (h(Host, { key: 'f2a27d2fd14f0521619a4a4acc078853914cb77d', class: {
+        return (h(Host, { key: 'f312ca2d2c72d562db976219a24fe72b14952ae0', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: '9fea7a807f88b0c840a4fb37ea025126edf80a3e', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, h("duet-icon", { key: 'a1a9463867f3801ab1a3b5dcbbf8d1a8df84487a', icon: this.getIcon(), size: this.size, margin: this.margin })));
     }
     static get is() { return "duet-status-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -195,4 +195,17 @@
   .duet-step-heading-slot {
     display: block;
   }
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-current .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-counter {
+  background-color: #e61740;
+}
+:host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter {
+  background-color: #b81233;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-step-content-wrapper {
+  border-color: #ffefe5;
 }

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

@@ -210,7 +210,7 @@ export class DuetStep {
                     "references": {
                         "DuetStepState": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-step/duet-step.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-step/duet-step.tsx",
                             "id": "src/components/duet-step/duet-step.tsx::DuetStepState"
                         }
                     }
@@ -294,7 +294,7 @@ export class DuetStep {
                     "references": {
                         "DuetStepClickEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-step/duet-step.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-step/duet-step.tsx",
                             "id": "src/components/duet-step/duet-step.tsx::DuetStepClickEvent"
                         }
                     }

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

@@ -101,7 +101,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'eef8866a3e7ccabbb7701657e15ec683958ea5d4', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'f5cbf491c749b26ca29bff3f024202eb5c95368b', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '8349b7f7cbe730cbc82b9b91a8b5f481ed913a61', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'c8ac270cc86273c7d75c996b9772e0585fa2fc0c' }))));
+        return (h(Host, { key: 'fe47ed64b8023aa730babf53656e72184f937483', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '88422772394488a36ea8a058393a0435fe73637c', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '0e681560769ea5572ee4d6590ef4d680856b6d30', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: '4148e310b4635d4add0a7a599e94eee69821c485' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -253,7 +253,7 @@ export class DuetStepper {
                     "references": {
                         "DuetStepChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-stepper/duet-stepper.tsx",
                             "id": "src/components/duet-stepper/duet-stepper.tsx::DuetStepChangeEvent"
                         }
                     }

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

@@ -162,4 +162,18 @@
   .duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
     box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1);
   }
+}
+
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva {
+  background: #fcf7f3;
+  border-bottom-color: #ffefe5;
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .items {
+  background: #fcf7f3;
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .mobile-background {
+  background: #171c3a;
 }

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

@@ -122,19 +122,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '417d739470c7fe9b87ddc61a9f660113df598c22' }, h("nav", { key: '139ebc35685702253a213c7105407af7a141a62c', class: {
+        return (h(Host, { key: '8d2a6b2a0b7c84afb8d61508907992f8b6bdda06' }, h("nav", { key: '98d23766ad48d99a0838520d6f67ce91b412198e', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '501638b4c30ab12368c39a05f74bb1c3b1317362', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'd7480f342588cc6a36320b77a896dcab23b6eaa6', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: '403ee71ef7c4a79e36018e751e8beb7dc48049c9', class: "label" }, h("slot", { key: 'd3c17dd11de845bb119d8f753fd358bd2c65a6d9', name: "label" }), h("duet-icon", { key: '81b28c9228a242a36202f53c9ed9fd8a8b609221', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'ba2b698fcce4246cbd779e87dfac3a6be181d926', class: {
+            }, onClick: this.onClick }, h("span", { key: '4993924e6fc711bebf1730098bfce3b03352d3a3', class: "label" }, h("slot", { key: '96d2a2598974b954d7356e30f0944a1391889b81', name: "label" }), h("duet-icon", { key: '31f715447d28b021e55472a6f0206d416ec9bfad', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'dcee976dcad422cad0659ab4660908a5a3cc199a', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: 'e76659541e9d8c28c9dad388f363d794e6d352e1', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: '06f7df5458d96f348d6ee9fd51ed36b8882b786b', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '51f96f2351bc5d0e236ce4b36f71aaa5054e5f15', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'e82358ec5faa3172b05111c5cb8b4a92af93408b' }), h("div", { key: '1dc90575c0ca00419a1a6dabc94d997a658b4d04', class: "list-padding" }))), h("duet-overlay", { key: '6a46e855d0da8c13ca1bff8f69016dfab10afa5d', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '8e176f888c84b7c1ac873f24412679426a872326', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'f4df0b6566761ccbde3d382f29a1100bfb12ad15' }), h("div", { key: '5f95cb75994341f33fe801a198c6d907c08b497c', class: "list-padding" }))), h("duet-overlay", { key: 'af3a1f80bede46a7a8aba422119493ae64fb8cf0', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -218,4 +218,35 @@
   .duet-submenu-bar-dropdown.duet-theme-turva .items {
     background: rgb(255, 255, 255);
   }
+}
+
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button {
+  color: #171c3a;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button:hover {
+    background: #ffefe5;
+  }
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after {
+  background: #e61740;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active,
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open {
+    color: #e61740;
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active::after,
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open::after {
+    background: #e61740;
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open {
+    background: #ffefe5;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva .items {
+    background: #fcf7f3;
+  }
 }

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

@@ -96,18 +96,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '76e8b37395a41c08dfb79044c9aa9e8ca5ba5274', role: "listitem" }, h("div", { key: '16c3746948dd9f622b4cb003304e22f1dc1faf9d', class: {
+        return (h(Host, { key: '78764f2fa2d385122f181df83f8aa19f28f519b1', role: "listitem" }, h("div", { key: 'b951d99383563ef459e188871d36f0de73f49ea0', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: 'e1714f05f37e793f5f83a72cf63a62a5798e0415', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'b34fbbfaa54487ccca2504b88f204665b8295f8b', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'f0e8d42456dd083616c6245a2a67f6f83a2e2553', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4a8c42c00dab9378cee591e449d27c3e313fbed2', class: "label" }, h("span", { key: 'f04bb5583ba82c58534312b22dbb86129837fba4', class: "label-text" }, h("slot", { key: '1ff407f2b05a19f13d3cdf7abc508853e9fb951c', name: "label" })), h("duet-icon", { key: '8c0911d940e05310687d92a0cacc1ef55d388475', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '30970885dfcc36d710bb0fe2eed310a71348c0d2', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '133885d52099c50ce44995b63cfecb8b57abff4e', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '04e4ca0fe30c6c22697c93d45616a9be37f518fd', class: "label" }, h("span", { key: '31af52e632b10711c32e673ec2b077595e5ed3b3', class: "label-text" }, h("slot", { key: 'a27acda9d5e996be374c51890d8ffa076ece5cca', name: "label" })), h("duet-icon", { key: '5c7b7c11b80e7da0c737d48501c90d896076ae57', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '4924c49a1deb22b6f833235b5c665b9bb2f32c0d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '19623f7c88cc36d51607272ac2e2e9e582c79654' })))));
+            } }, h("slot", { key: '324a1de65c74124df7da639f2968c59471f8511c' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }