@duetds/components 10.0.0-alpha.8 → 10.0.0

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: '6f75ab90994003945faaf606213177956d65b5a7', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '259db22bec0d03f4c8f68529b35927af44655cec', 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: 'c2182470252c2c09577655c562a32e2515383c4f', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '18d7084e040b500c7558ea574bc5a6cf43a036d0' }))));
+            }, "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);
 }

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

@@ -6,6 +6,18 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetMenuBarDropdown {
     constructor() {
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
         this.onClick = () => {
             this.open = !this.open;
         };
@@ -20,10 +32,6 @@ export class DuetMenuBarDropdown {
                     return "right";
             }
         };
-        this.accessibleLabel = undefined;
-        this.theme = "";
-        this.open = false;
-        this.icon = undefined;
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -54,17 +62,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f2ae6a8b45e78de018708287c1ec61b7648af786', role: "listitem" }, h("div", { key: 'af551d08605c82f1f1cda7b81c99081152dd4678', class: {
+        return (h(Host, { key: '549451747b5d958dcac03314e5571631ddb5681c', role: "listitem" }, h("div", { key: '91c7c1f71d878251370fd14fbe8a5f7e53a4d8bd', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: 'c98ba81cf3d27c93922378a1ed42c6795e5560f7', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'a1bc6d43c28b9070c8f351111312cf436b02b3a2', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '68312f16c0510c96693965ebdee514b9ab58ae29', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'f877d5f7298eaae83f061306be1e61b358017e47', class: "label" }, h("slot", { key: '1e9e1ddda50dd7be9204235502c5541477d2b26c', name: "label" }), h("duet-icon", { key: '60a75a216d897ae68c78146adaa4b17fa7220ea5', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'ac48d2e83152837d5865559c85987640751033b7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '612895f551ed8c5045b2a5946b3528948fb34468', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '92d067edbc9fd30ed9113f20153943cfe99030fa', class: "label" }, h("slot", { key: '2dc4b402f56b0e45f4590a563bdbff368bf9e761', name: "label" }), h("duet-icon", { key: '97c55f40d40e52c267bdc2f0edf127c8868b91d2', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '625909f147e2f0d3ac7d74197d787621afd5ad5e', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'c423d7b527bc674cc8fcf895ef228ab3dcc14c27' })))));
+            } }, h("slot", { key: '927e1629164029ae374bf2a0828246865e682f21' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -82,6 +90,7 @@ export class DuetMenuBarDropdown {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -96,11 +105,11 @@ export class DuetMenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -121,12 +130,12 @@ export class DuetMenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -141,12 +150,12 @@ export class DuetMenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -161,7 +170,6 @@ export class DuetMenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-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%;
 }
@@ -37,15 +37,18 @@
   font-weight: 400;
   line-height: 1.5;
   color: rgb(8, 42, 77);
-  text-align: center;
+  text-align: left;
   text-decoration: none;
 }
 .duet-menu-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-menu-bar-dropdown-link:focus, .duet-menu-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-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-dropdown-link.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -56,4 +59,11 @@
 }
 .duet-menu-bar-dropdown-link:hover.duet-theme-turva {
   background: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva:hover {
+  background: rgb(251, 235, 225);
 }

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

@@ -6,6 +6,18 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetMenuBarDropdownLink {
     constructor() {
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Href
+         */
+        this.href = "#";
+        /**
+         * Icon
+         */
+        this.icon = undefined;
         this.getVariant = () => {
             const slot = this.element.parentElement.parentElement.getAttribute("slot");
             switch (slot) {
@@ -17,10 +29,6 @@ export class DuetMenuBarDropdownLink {
                     return "right";
             }
         };
-        this.theme = "";
-        this.href = "#";
-        this.icon = undefined;
-        this.accessibleLabel = undefined;
     }
     /**
      * Component lifecycle events.
@@ -40,11 +48,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b39d6abeefb119284682cca93010dbe3de43db7c' }, h("a", { key: '74baeaeef4fd9523c156b10c62e4fd783869b541', class: {
+        return (h(Host, { key: '4f66b37f78e3221d96cc0189a2a8592e6b6f8fc6' }, h("a", { key: 'd6ad6af753be198a1601d09e82478a0e1d9ee172', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '9893a49e6d869071ab120a38392e6d8b192a3ba4', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '4cf3bc62d7951ed784aae771602e15f03e4d2e92' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4834a4159934c0525ed9e7b7d6ac28132ba2cf03', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'e3f4ac467c7e84ec2c9f0d8ac7f36800a299540f' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }
@@ -62,6 +70,7 @@ export class DuetMenuBarDropdownLink {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -82,12 +91,12 @@ export class DuetMenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -102,12 +111,12 @@ export class DuetMenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -122,12 +131,12 @@ export class DuetMenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -142,7 +151,6 @@ export class DuetMenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.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%;
 }
 
@@ -36,16 +36,19 @@
   font-weight: inherit;
   color: inherit;
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
 }
 .duet-menu-bar-item: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-item:focus, .duet-menu-bar-item: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-item:focus, .duet-menu-bar-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-item .leading-icon,
 .duet-menu-bar-item .trailing-icon {
@@ -103,8 +106,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-item.active::after {
@@ -125,4 +128,19 @@
   .duet-menu-bar-item:hover.duet-theme-turva {
     color: rgb(198, 12, 48);
   }
+}
+
+:host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva[aria-expanded=true] {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva::after {
+  background: rgb(230, 23, 64);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva:hover {
+    color: rgb(230, 23, 64);
+  }
 }