@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -4,23 +4,27 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
+  pointer-events: none;
+}
+:host * {
+  pointer-events: auto;
 }
 
 :host(:not([open])) ::slotted(duet-submenu-bar-dropdown) {
@@ -59,13 +63,19 @@
   line-height: 1.25;
   color: rgb(8, 42, 77);
 }
+.duet-submenu-bar button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-submenu-bar button:focus, .duet-submenu-bar button:focus.duet-theme-turva, .duet-theme-turva2 .duet-submenu-bar button:focus, .duet-submenu-bar button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-submenu-bar button.active .caret {
   transform: rotate(180deg);
 }
-.duet-submenu-bar button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-submenu-bar button .label {
   position: relative;
   display: flex;
@@ -84,24 +94,24 @@
   width: 100%;
 }
 .duet-submenu-bar .menu-container.hidden {
+  visibility: hidden;
   max-height: 0;
   overflow: hidden;
-  visibility: hidden;
 }
 @media (min-width: 62em) {
   .duet-submenu-bar .menu-container, .duet-submenu-bar .menu-container.hidden {
     position: static;
     z-index: auto;
+    visibility: visible;
     max-height: unset;
     overflow: visible;
-    visibility: visible;
   }
 }
 .duet-submenu-bar .items {
+  visibility: visible;
   width: 100%;
   height: 70vh;
   overflow-y: scroll;
-  visibility: visible;
   background: rgb(240, 247, 250);
   border-bottom: 1px solid rgb(181, 198, 208);
 }
@@ -109,9 +119,9 @@
   position: relative;
 }
 .duet-submenu-bar .items.hidden {
+  visibility: hidden;
   max-height: 0;
   overflow: hidden;
-  visibility: hidden;
   border-bottom: 0 solid rgb(181, 198, 208);
 }
 .duet-submenu-bar .items .list-padding {
@@ -128,13 +138,13 @@
     position: static;
     z-index: auto;
     display: flex;
+    visibility: visible;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     height: auto;
     max-height: unset;
     overflow: visible;
-    visibility: visible;
     border: 0;
   }
   .duet-submenu-bar .items .list-padding {
@@ -146,9 +156,6 @@
   background: rgb(245, 247, 250);
   border-bottom: 1px solid rgb(222, 224, 228);
 }
-.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;
-}
 .duet-submenu-bar.duet-theme-turva .items {
   background: rgb(245, 247, 250);
 }
@@ -162,4 +169,15 @@
   .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: rgb(253, 247, 242);
+  border-bottom-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .items {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .mobile-background {
+  background: rgb(23, 42, 59);
 }

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

@@ -10,6 +10,22 @@ export class DuetSubmenuBar {
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
         this.previousYScroll = 0;
+        this.hidden = false;
+        this.mobile = true;
+        this.bodyScroll = true;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Makes the submenu bar hide on top of the window when page is scrolled down
+         * Should be used only with sticky navigation.
+         */
+        this.hideOnScroll = false;
+        /**
+         * Open
+         */
+        this.open = false;
         this.handleMobileView = () => {
             if (this.mql[0].matches) {
                 this.mobile = false;
@@ -47,13 +63,6 @@ export class DuetSubmenuBar {
             const hasItems = !!this.element.querySelector("duet-submenu-bar-item");
             return hasDropdownLinks || hasLinks || hasItems;
         };
-        this.hidden = false;
-        this.mobile = true;
-        this.bodyScroll = true;
-        this.theme = "";
-        this.hideOnScroll = false;
-        this.open = false;
-        this.accessibleLabel = undefined;
     }
     watchOpenStateHandler(newValue) {
         const open = newValue;
@@ -122,19 +131,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '06a71ec0fea466655847571dc1a05651105c5ae3' }, h("nav", { key: 'c9a24b82e7fc2623e9f4b228c68784a7ca6eb1b1', class: {
+        return (h(Host, { key: '463af77c5ac9d7a775876cfc005df160c5e7fdfa' }, h("nav", { key: 'fcbdbfc332d352007b1122ffa65cd6d13012a559', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'da1f940ba0bb496c7c587a0070eaf52cc7bc8060', 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: '98fadd59813f2aae19d4cb5d4734d73a98d4bb7e', 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: '0e8dd0590760a6e944a970cde6c8743276de0fa9', class: "label" }, h("slot", { key: '3c3657af5b58af62145180b24137111c22eb7e24', name: "label" }), h("duet-icon", { key: '4d57f6aa5f74cdf524f0b5bd0a34ab3e624224b3', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'd44d6998afc2ae16770aecb85a56ebf4519db49c', class: {
+            }, onClick: this.onClick }, h("span", { key: 'dc38b3df13d3a4d1b4a9c78c53a9fc68b932152e', class: "label" }, h("slot", { key: '128302a4e4c2c6e68d9fd8cb96d1439db8daf800', name: "label" }), h("duet-icon", { key: '0d4d0b35713d68685084568f0f95f1818b8deaca', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '7396ba0b29224cfa487e725604ff50dab010cdeb', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: 'b1a1aafe3bf5524a11b2ad06257144b48d8be70d', 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: '4b5178a06a8933dfb9be60276a1a893158c62aaa', 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: 'f335ec19eff38beec4651d0668265a12b48c87ee', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '01f590e6f62cfd5e5dc1a8295f17e3a8ee8b6ae8' }), h("div", { key: 'bcba5ff19f0b623d9dd8e76cc3bad86c0062e28b', class: "list-padding" }))), h("duet-overlay", { key: 'bd1aadd52ed5259cf85555faabff82e2844dc4ec', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '71ee3de51b625b340635a30fb39292e25ddfc116', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '4baa81a1de7c328e826df2f752075a9c4b05af0f' }), h("div", { key: '38b755c720305c3627d82a5e53af380752616396', class: "list-padding" }))), h("duet-overlay", { key: '62afaa179b2175f4c4c6cd56c6773675cffc061c', "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"; }
@@ -152,6 +161,7 @@ export class DuetSubmenuBar {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -172,12 +182,12 @@ export class DuetSubmenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "hideOnScroll": {
                 "type": "boolean",
+                "attribute": "hide-on-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -192,12 +202,12 @@ export class DuetSubmenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-on-scroll",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -212,12 +222,12 @@ export class DuetSubmenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -232,7 +242,6 @@ export class DuetSubmenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             }
         };

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
   height: 100%;
 }
@@ -52,6 +52,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-submenu-bar-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-submenu-bar-dropdown button:focus, .duet-submenu-bar-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-submenu-bar-dropdown button:focus, .duet-submenu-bar-dropdown button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown button {
     flex-direction: column;
@@ -77,10 +87,6 @@
 .duet-submenu-bar-dropdown button.open .caret {
   transform: rotate(180deg);
 }
-.duet-submenu-bar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-submenu-bar-dropdown button.active .label-text {
   position: relative;
 }
@@ -132,8 +138,8 @@
     height: 1px;
     content: "";
     background: rgb(0, 119, 179);
-    transition: 300ms ease;
     transform: translateY(1px);
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-submenu-bar-dropdown button.active::after, .duet-theme-turva .duet-submenu-bar-dropdown button.open::after {
     background: rgb(198, 12, 48);
@@ -151,6 +157,7 @@
 }
 .duet-submenu-bar-dropdown .items {
   display: flex;
+  visibility: visible;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -158,10 +165,9 @@
   padding: 4px 0 16px;
   overflow-y: auto;
   color: rgb(8, 42, 77);
-  visibility: visible;
+  scrollbar-width: none;
   transition: max-height 0.3s ease-in, padding 0.3s ease-in;
   -ms-overflow-style: none;
-  scrollbar-width: none;
 }
 .duet-submenu-bar-dropdown .items::-webkit-scrollbar {
   display: none;
@@ -180,10 +186,10 @@
   }
 }
 .duet-submenu-bar-dropdown .items.hidden {
+  visibility: hidden;
   max-height: 0;
   padding: 0;
   overflow: hidden;
-  visibility: hidden;
   transition: max-height 0.3s ease-in, padding 0.3s ease-in;
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button {
@@ -195,9 +201,6 @@
     background: rgb(222, 224, 228);
   }
 }
-.duet-submenu-bar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after {
   background: rgb(198, 12, 48);
 }
@@ -218,4 +221,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: rgb(23, 42, 59);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button:hover {
+    background: rgb(251, 225, 209);
+  }
+}
+: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: rgb(230, 23, 64);
+}
+@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: rgb(140, 0, 30);
+  }
+  :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: rgb(230, 23, 64);
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open {
+    background: rgb(251, 225, 209);
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva .items {
+    background: rgb(255, 255, 255);
+  }
 }

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

@@ -12,6 +12,23 @@ export class DuetSubmenuBarDropdown {
          */
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
+        this.isDesktop = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Active
+         */
+        this.active = false;
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
         this.checkIsDesktop = () => {
             if (this.mql[0].matches) {
                 this.isDesktop = true;
@@ -35,11 +52,6 @@ export class DuetSubmenuBarDropdown {
                 this.open = true;
             }
         };
-        this.isDesktop = false;
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -96,18 +108,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '251e622a2df6de7c5309a5f85cf829864a4c4a93', role: "listitem" }, h("div", { key: '012ebfd990d6cb0daf26c6f7ed00ef3b72b40fea', class: {
+        return (h(Host, { key: 'b08d71c303bbbb5dc488ccb9df3a6606cbcee45f', role: "listitem" }, h("div", { key: 'f27808ba704701f0857e90d8c4474f11f2bd284d', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '87bb4f401952a4f9776ee3b3182fcdbdec1c7332', 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: 'da50cea3b3daea0da483dc01649345a9fcc27d55', 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: '20bbf61dd0f3d5468548896493981b9f7b972201', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '322d1e7bf90ab61077a427824e009a952d8e86c7', class: "label" }, h("span", { key: 'c817dbb4ead417770c71b1c024d8cbe871785297', class: "label-text" }, h("slot", { key: '88e8e6f3544b1fb13bde7ba698221408f910a442', name: "label" })), h("duet-icon", { key: '56447cc388c3f1b64fb53fea99cd56497864398d', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '40a3648cc2536d2abf6bc48a3c9ac1c9670ddece', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '41562541f2cf4bbe9e8d6ccb3214b8fc5b44079f', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '8b2782607b3478bc491ce2fa423257d4233968fa', class: "label" }, h("span", { key: '5b22aff9852f284416e15d60b1a262e963ff228e', class: "label-text" }, h("slot", { key: 'aec50191a12adf0fbd6f9e388c2dc09954d21f83', name: "label" })), h("duet-icon", { key: '154795bda221d38ca73b47a86c97da4c6e4d573b', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '574669c2280fa1e7e4d14666f95fbe912a068119', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '639962d848abe9a48c384dc0d165f73503138c41' })))));
+            } }, h("slot", { key: '9a69e63aae77e184049ed7d8f7f511d47eca642e' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -125,6 +137,7 @@ export class DuetSubmenuBarDropdown {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -145,12 +158,12 @@ export class DuetSubmenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -165,12 +178,12 @@ export class DuetSubmenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -185,12 +198,12 @@ export class DuetSubmenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -205,7 +218,6 @@ export class DuetSubmenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
   height: 100%;
 }
@@ -41,11 +41,14 @@
   text-decoration: none;
 }
 .duet-submenu-bar-dropdown-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-submenu-bar-dropdown-link:focus, .duet-submenu-bar-dropdown-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-submenu-bar-dropdown-link:focus, .duet-submenu-bar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-submenu-bar-dropdown-link:focus, .duet-submenu-bar-dropdown-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-submenu-bar-dropdown-link .label-container {
   display: flex;
@@ -111,4 +114,22 @@
 }
 .duet-submenu-bar-dropdown-link.highlight.duet-theme-turva {
   color: rgb(126, 2, 35);
+}
+
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after {
+  background: rgb(230, 23, 64);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active {
+    background: rgb(253, 247, 242);
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva:hover {
+    background: rgb(251, 225, 209);
+  }
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.highlight {
+  color: rgb(230, 23, 64);
 }