@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -1,7 +1,6 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large, media_query_xx_large } from "@duetds/tokens/lib/tokens.json";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { getLanguage } from "../../utils/language-utils";
@@ -11,15 +10,34 @@ import { getLanguage } from "../../utils/language-utils";
  */
 export class DuetMenuBar {
     constructor() {
+        this.previousYScroll = 0;
+        this.hidden = false;
+        this.onBottom = false;
+        this.logoSize = "large";
+        this.leftMoreVisible = false;
+        this.rightMoreVisible = false;
+        this.centerSlotUsed = false;
+        this.mediaQueryMediumMatches = false;
         /**
-         * Own Properties.
+         * Theme.
          */
-        this.mql = [
-            window.matchMedia(media_query_large.replace(/'/g, "")),
-            window.matchMedia(media_query_xx_large.replace(/'/g, "")),
-        ];
-        this.boundMqlFunctions = [];
-        this.previousYScroll = 0;
+        this.theme = "";
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Logo.
+         */
+        this.logo = true;
+        /**
+         * Makes the menu bar hide on top of the window when page is scrolled down
+         * Should be used only with sticky navigation.
+         */
+        this.hideOnScroll = false;
         this.scrollbarCheck = () => {
             this.leftMoreVisible = this.container.scrollLeft > 0;
             this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
@@ -46,15 +64,6 @@ export class DuetMenuBar {
             const centerSlot = this.element.querySelector('[slot="center"]');
             this.centerSlotUsed = !!centerSlot;
         };
-        this.changeLogoSize = () => {
-            this.checkCenterSlot();
-            if (this.mql[1].matches && this.centerSlotUsed) {
-                this.logoSize = "large";
-            }
-            else {
-                this.logoSize = "medium";
-            }
-        };
         this.handleLogoClick = (e) => {
             this.duetEvent.emit({
                 name: "logoClick",
@@ -65,19 +74,6 @@ export class DuetMenuBar {
                 originalEvent: e,
             });
         };
-        this.hidden = false;
-        this.onBottom = false;
-        this.logoSize = "large";
-        this.leftMoreVisible = false;
-        this.rightMoreVisible = false;
-        this.centerSlotUsed = false;
-        this.theme = "";
-        this.language = getLanguage();
-        this.logo = true;
-        this.logoHref = undefined;
-        this.logoLinkAccessibleLabel = undefined;
-        this.accessibleLabel = undefined;
-        this.hideOnScroll = false;
     }
     checkScroll() {
         if (!this.hideOnScroll) {
@@ -111,26 +107,8 @@ export class DuetMenuBar {
         inheritGlobalTheme(this);
     }
     connectedCallback() {
-        this.changeLogoSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeLogoSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
         this.checkCenterSlot();
     }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     componentDidLoad() {
         if (Build.isServer || Build.isTesting) {
             return;
@@ -154,14 +132,17 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: 'cc4b481362cbe14d19105680da21abf7e1ab19d1' }, h("nav", { key: 'fe1efbbaeea324870ebfe2ab1016109de0032b50', class: {
+        return (h(Host, { key: '9f357dd163db230760ba15408c721b345619e369' }, h("nav", { key: '515afdd6ce472b843bb59ab038fa87b76158743d', 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: '262314a0a4c3bc112de48cebd90cc92978e04737', class: "top" }), h("div", { key: '47af4a8dbe49f0eb2fad3e2c9795c778aaa4316e', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '81831c54aad6d097544fdc473ee9ced4d03202fb' }, h("duet-logo", { key: 'c602193b93bea7b49ad089c12597ecd778720483', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'defb5267cde1feb5499d27f47b6329dc936c4ddb', class: "list center", role: "list" }, h("div", { key: 'c41bcc439bb1e6bf4d2fe4b192fa28e35dcade36', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'bdd435f059485a7fa0a83387577e6eb0d29a8532', name: "center" }), h("div", { key: '53af8993610b44bfb0b20e923402dcdea304036c', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'dbfbc72a5b6140a455f2730827a01bfde5cb3258', class: "list right", role: "list" }, h("slot", { key: '0ac7e62804751859d1d6de0dc2e4cea90ee0968b', name: "right" }))), h("div", { key: '527927e8d7408f0462f1c735b75c6c6cbc0c63ee', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'd19d82b1e1c35dd8f0ac72fc3625058f939d2b66', class: "top" }), h("div", { key: '8bd01db2edc2ab2c43e931e07288e252a6838abc', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '28a65925e1aa7a73822e398a0aaa705de521cc66' }, h("duet-logo", { key: 'f7a068293211c3e3a7c091a084ecf4e7b3c2317c', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'dcb75e146d612870f0b65295df9f33a2be699d29', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '675cb30c9aaa18f8352d2c8d84978bb291f2337d', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: '48cd2679315bb52d535c58b1b54831bcc1120bd4', class: {
+                "duet-logo-info-text": true,
+                "duet-theme-turva": this.theme === "turva",
+            } }, this.logoInfoText)))), h("div", { key: '0cc0ebfc6fe8b9582f8677ca8eba79c7fb102a97', class: "list center", role: "list" }, h("div", { key: '8ed1c963529c2ad79182293ac831fc2a5c4ba308', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'c997b17308d679e6364b79e9549600ea88307ebe', name: "center" }), h("div", { key: 'e4d05f0c17fe62eb12a4708237703d32cb8ac339', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '438911a93d2bbcfd6a1084c095611bc031636313', class: "list right", role: "list" }, h("slot", { key: 'd8b922aca72f608f7acd42e29742efa50d0b2343', name: "right" }))), h("div", { key: 'cd333a535ef8eac9c224cd6ebc6a2a4145ba20bd', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +160,7 @@ export class DuetMenuBar {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -199,12 +181,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -231,12 +213,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "logo": {
                 "type": "boolean",
+                "attribute": "logo",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -251,12 +233,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "logoHref": {
                 "type": "string",
+                "attribute": "logo-href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -271,11 +253,11 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-href",
                 "reflect": false
             },
             "logoLinkAccessibleLabel": {
                 "type": "string",
+                "attribute": "logo-link-accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -290,11 +272,30 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-link-accessible-label",
+                "reflect": false
+            },
+            "logoInfoText": {
+                "type": "string",
+                "attribute": "logo-info-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional information text to show next to the logo. Show only when the center slot is empty."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -309,11 +310,11 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "hideOnScroll": {
                 "type": "boolean",
+                "attribute": "hide-on-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -328,7 +329,6 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-on-scroll",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -341,7 +341,8 @@ export class DuetMenuBar {
             "logoSize": {},
             "leftMoreVisible": {},
             "rightMoreVisible": {},
-            "centerSlotUsed": {}
+            "centerSlotUsed": {},
+            "mediaQueryMediumMatches": {}
         };
     }
     static get events() {
@@ -361,7 +362,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/projects/lahitapiola/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

@@ -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;
   height: 100%;
 }
 
@@ -39,11 +39,14 @@
   cursor: pointer;
 }
 .duet-menu-bar-button: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: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button: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-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-button .menu-bar-button-icon {
   width: 20px;
@@ -75,4 +78,10 @@
   .duet-menu-bar-button:hover.duet-theme-turva {
     color: rgb(198, 12, 48);
   }
+}
+
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-button.duet-theme-turva:hover {
+    color: rgb(230, 23, 64);
+  }
 }

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

@@ -5,18 +5,29 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarButton {
     constructor() {
-        this.accessibleLabel = undefined;
-        this.accessibleControls = undefined;
+        /**
+         * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+         */
         this.accessiblePopup = "false";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
         this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
-        this.accessibleExpanded = undefined;
-        this.accessiblePressed = undefined;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Icon
+         */
         this.icon = undefined;
     }
     /**
@@ -38,10 +49,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '98d5de27841db07197972c3536153f1702535cfd', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'ba0f809adfd404d71d2846751761f34364c40fd8', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '0e1e537a15d9a7b7d94a2ce24a71281b4757b1d5', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'c7ab5d711a28d54af476fdf133e8f92bce25f020', 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: '602a6879bf24fde5cc3506af5fa0fae351ff1b11', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'f8268e403f02c185c2648f649650174c8ab51f45' }))));
+            }, "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: '922a6e2fa015b52aac218ce9e803c75a57465310', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'd85350f1fb803be4e524803b0bea4acc62f569fb' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }
@@ -59,6 +70,7 @@ export class DuetMenuBarButton {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -73,11 +85,11 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -92,11 +104,11 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -111,12 +123,12 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-popup",
                 "reflect": false,
                 "defaultValue": "\"false\""
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -131,11 +143,11 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -150,11 +162,11 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -169,11 +181,11 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -188,12 +200,12 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -208,12 +220,12 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -228,12 +240,12 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -248,11 +260,11 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": false
             },
             "accessiblePressed": {
                 "type": "boolean",
+                "attribute": "accessible-pressed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -267,11 +279,11 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-pressed",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -292,12 +304,12 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -312,7 +324,6 @@ export class DuetMenuBarButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-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;
   height: 100%;
 }
 
@@ -55,6 +55,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-menu-bar-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-menu-bar-dropdown button:focus, .duet-menu-bar-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-dropdown button:focus, .duet-menu-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-menu-bar-dropdown button {
     padding: 0 16px;
@@ -68,10 +78,6 @@
 .duet-menu-bar-dropdown button:hover {
   color: rgb(0, 119, 179);
 }
-.duet-menu-bar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-menu-bar-dropdown button .label {
   display: flex;
   gap: 0.5rem;
@@ -97,8 +103,8 @@
   height: 2px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 .duet-theme-turva .duet-menu-bar-dropdown button.active::after {
   background: rgb(198, 12, 48);
@@ -140,9 +146,6 @@
 .duet-menu-bar-dropdown.duet-theme-turva button:hover {
   color: rgb(198, 12, 48);
 }
-.duet-menu-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-menu-bar-dropdown.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }
@@ -151,4 +154,17 @@
 }
 .duet-menu-bar-dropdown.duet-theme-turva .items {
   background: rgb(255, 255, 255);
+}
+
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button:hover {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active::after {
+  background: rgb(230, 23, 64);
 }