@duetds/components 8.3.1 → 8.4.1

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

@@ -32,13 +32,13 @@
   max-height: 100vh;
   overflow-y: auto;
   visibility: hidden;
-  background: rgba(0, 41, 77, 0.85);
+  background: rgba(0, 41, 77, 0.3);
   opacity: 0;
   transition: 300ms ease;
   transition-delay: 200ms;
 }
 .duet-modal-overlay.duet-theme-turva {
-  background: rgba(23, 28, 58, 0.85);
+  background: rgba(23, 28, 58, 0.3);
 }
 .duet-modal-overlay.duet-modal-active {
   visibility: visible;

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

@@ -44,14 +44,14 @@
   background: rgb(243, 249, 252);
 }
 .duet-notification.duet-notification-highlight.duet-theme-turva {
-  background: rgb(252, 243, 244);
+  background: rgb(245, 245, 247);
 }
 @media (min-width: 62em) {
   .duet-notification:hover {
     background: rgb(243, 249, 252);
   }
   .duet-notification:hover.duet-theme-turva {
-    background: rgb(252, 243, 244);
+    background: rgb(245, 245, 247);
   }
 }
 .duet-notification a {

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

@@ -2,18 +2,34 @@
  * Built with Duet Design System
  */
 import { computePosition, flip, offset } from "@floating-ui/dom";
-import { Build, h, Host } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { Teleport } from "../../utils/teleport";
 export class DuetPopupMenu {
     constructor() {
+        this.setOpenButton = (element) => {
+            if (!element) {
+                return;
+            }
+            try {
+                const button = element;
+                button.accessiblePopup = "true";
+                button.accessibleExpanded = false;
+                button.setAttribute("trailing-icon", "action-arrow-down-small");
+                this.openButton = button;
+            }
+            catch (_e) { }
+        };
+        this.openButtonEventListener = () => {
+            this.toggle();
+        };
         this.updatePlacement = async () => {
-            if (!this.controller) {
+            if (!this.openButton) {
                 return;
             }
-            const coordinates = await computePosition(this.controller, this.menuElement, {
+            const coordinates = await computePosition(this.openButton, this.menuElement, {
                 middleware: [offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }), flip()],
                 placement: this.placement,
                 strategy: this.position,
@@ -45,6 +61,15 @@ export class DuetPopupMenu {
             this.updatePlacement();
         }
     }
+    connectedCallback() {
+        this.handleControllerChange(this.controller, null);
+    }
+    disconnectedCallback() {
+        if (this.openButton) {
+            this.openButton.removeEventListener("click", this.openButtonEventListener);
+            this.openButton.removeAttribute("trailing-icon");
+        }
+    }
     /**
      * Component event handling.
      */
@@ -52,7 +77,7 @@ export class DuetPopupMenu {
         if (this.open) {
             // When Esc is pressed the menu should be closed
             if (isEscapeKey(evt)) {
-                this.focusController();
+                this.focusOpenButton();
                 this.hide();
             }
         }
@@ -90,7 +115,7 @@ export class DuetPopupMenu {
         }
     }
     handleClick(evt) {
-        const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.controller);
+        const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.openButton);
         if (this.open && isClickOutside) {
             this.hide();
         }
@@ -106,23 +131,12 @@ export class DuetPopupMenu {
      */
     async show() {
         this.open = true;
-        this.teleport.go();
-        if (this.accessibleRole === "menu") {
-            this.itemElements[0].setFocus();
-        }
-        this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-        this.updatePlacement();
     }
     /**
      * Hide.
      */
     async hide() {
         this.open = false;
-        this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-        if (this.accessibleRole === "menu") {
-            this.focusController();
-        }
-        this.teleport.resume(200);
     }
     /**
      * Toggle.
@@ -135,9 +149,53 @@ export class DuetPopupMenu {
             this.show();
         }
     }
-    focusController() {
-        if (this.controller) {
-            focusElement(this.controller);
+    handleControllerChange(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        if (typeof this.controller === "string") {
+            this.setOpenButton(document.getElementById(this.controller));
+            if (this.openButton) {
+                this.openButton.addEventListener("click", this.openButtonEventListener);
+            }
+        }
+        else {
+            this.setOpenButton(this.controller);
+        }
+    }
+    handleOpenChange(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        if (this.open && !oldValue) {
+            if (this.openButton) {
+                this.openButton.accessibleExpanded = true;
+            }
+            this.teleport.go(true);
+            this.updatePlacement();
+            setTimeout(() => {
+                if (this.accessibleRole === "menu") {
+                    this.itemElements[0].setFocus();
+                }
+                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+            }, 200);
+        }
+        else if (!this.open && oldValue) {
+            if (this.openButton) {
+                this.openButton.accessibleExpanded = false;
+            }
+            setTimeout(() => {
+                if (this.accessibleRole === "menu") {
+                    this.focusOpenButton();
+                }
+                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+                this.teleport.resume();
+            }, 200);
+        }
+    }
+    focusOpenButton() {
+        if (this.open) {
+            focusElement(this.openButton);
         }
     }
     get itemElements() {
@@ -156,8 +214,9 @@ export class DuetPopupMenu {
         const positionStyles = {
             top: `${this.menuY}px`,
             left: `${this.menuX}px`,
+            position: this.position,
         };
-        return (h(Host, { class: this.position }, h("div", { ref: element => (this.menuElement = element), style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", null))));
+        return (h(Host, null, h("div", { ref: element => (this.menuElement = element), style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", null))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -233,11 +292,11 @@ export class DuetPopupMenu {
                 "defaultValue": "\"\""
             },
             "controller": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "HTMLElement & FocusableComponent & OpenerComponent",
-                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent",
+                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -260,7 +319,9 @@ export class DuetPopupMenu {
                 "docs": {
                     "tags": [],
                     "text": "Element controlling the opening and closing of the popup menu."
-                }
+                },
+                "attribute": "controller",
+                "reflect": false
             },
             "placement": {
                 "type": "string",
@@ -282,7 +343,7 @@ export class DuetPopupMenu {
             },
             "position": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "\"absolute\" | \"fixed\"",
                     "resolved": "\"absolute\" | \"fixed\"",
@@ -440,6 +501,15 @@ export class DuetPopupMenu {
         };
     }
     static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "controller",
+                "methodName": "handleControllerChange"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keyup",

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -30,6 +30,7 @@ export class DuetPopupMenuItem {
         this.theme = "";
         this.url = undefined;
         this.external = false;
+        this.targetLanguage = undefined;
         this.value = undefined;
         this.leadingIcon = undefined;
         this.leadingIconColor = undefined;
@@ -62,7 +63,7 @@ export class DuetPopupMenuItem {
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
         };
-        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"} ${this.accessibleRole}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, { role: this.accessibleRole }, h(TagName, { ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), (this.trailingIcon || this.active) && (h("duet-icon", { name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -172,6 +173,24 @@ export class DuetPopupMenuItem {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "targetLanguage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"en\" | \"fi\" | \"sv\"",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the link. Use this only for language selection links."
+                },
+                "attribute": "target-language",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
             "value": {
                 "type": "string",
                 "mutable": false,

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

@@ -67,19 +67,19 @@
     width: 100%;
     height: 100%;
     visibility: hidden;
-    background: rgba(0, 41, 77, 0.6);
+    background: rgb(0, 41, 77);
     opacity: 0;
     transition: 600ms ease;
   }
   .duet-slideout .desktop-bg:not(.hidden) {
     visibility: visible;
-    opacity: 1;
+    opacity: 0.3;
     transition: 600ms ease;
   }
 }
 @media (min-width: 62em) {
   .duet-slideout.duet-theme-turva .desktop-bg {
-    background: rgba(23, 28, 58, 0.6);
+    background: rgb(23, 28, 58);
   }
 }
 .duet-slideout .dialog {

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

@@ -141,7 +141,8 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: rgba(0, 41, 77, 0.6);
+  background: rgb(0, 41, 77);
+  opacity: 0.3;
 }
 @media (min-width: 62em) {
   .duet-submenu-bar .mobile-background {
@@ -159,7 +160,7 @@
   background: rgb(245, 245, 247);
 }
 .duet-submenu-bar.duet-theme-turva .mobile-background {
-  background: rgba(23, 28, 58, 0.6);
+  background: rgb(23, 28, 58);
 }
 .duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
   box-shadow: 0 2px 6px 0 rgba(23, 28, 58, 0.07);

package/lib/collection/components/duet-toolbar/duet-toolbar.a11y.e2e.js

@@ -5,23 +5,74 @@ import { formatViolations, options as axeRunOptions, testWithAxe } from "../../u
 describe("[a11y] duet-toolbar", () => {
     it("should render an accessible component", async () => {
         const result = await testWithAxe(`
-        <duet-toolbar>
+        <duet-toolbar accessible-label="Secondary">
           <div slot="left">
-            <duet-toolbar-link active>Henkilöasiakkaat</duet-toolbar-link>
-            <duet-toolbar-link href="#yritysasiakkaat">Yritysasiakkaat</duet-toolbar-link>
-            <duet-toolbar-dropdown icon="navigation-language">
-              <span slot="label">Yhtiöryhmä</span>
-              <duet-toolbar-dropdown-link>Valinta</duet-toolbar-dropdown-link>
-              <duet-toolbar-dropdown-link>Valinta</duet-toolbar-dropdown-link>
-            </duet-toolbar-dropdown>
+            <duet-toolbar-item url="#henkiloasiakkaat" active>Henkilöasiakkaat</duet-toolbar-item>
+            <duet-toolbar-item url="#yritysasiakkaat">Yritysasiakkaat</duet-toolbar-item>
+            <duet-toolbar-item url="#maatila-asiakkaat">Maatila-asiakkaat</duet-toolbar-item>
+            <duet-toolbar-item leading-icon="navigation-language" id="toolbar-item-yhtioryhma">Yhtiöryhmä</duet-toolbar-item>
+            <duet-popup-menu controller="toolbar-item-yhtioryhma" accessible-role="list" skip-teleport>
+              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
+              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
+              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
+            </duet-popup-menu>
           </div>
           <div slot="right">
-            <duet-toolbar-link id="search" href="#search" icon="form-search">Hae</duet-toolbar-link>
-            <duet-toolbar-dropdown icon="navigation-language">
-              <span slot="label">FI</span>
-              <duet-toolbar-dropdown-link active>Suomeksi</duet-toolbar-dropdown-link>
-              <duet-toolbar-dropdown-link>På Svenska</duet-toolbar-dropdown-link>
-            </duet-toolbar-dropdown>
+            <duet-toolbar-item id="desktop-search-opener" url="#search" icon="form-search">Hae</duet-toolbar-item>
+            <duet-slideout opener="desktop-search-opener" accessible-role="generic">
+              <div slot="sticky-header">
+                <duet-grid alignment="center" style="gap: var(--space-small)">
+                  <duet-icon name="form-search" size="medium" margin="none"></duet-icon>
+                  <duet-heading visual-level="h3" fixed-size margin="none">Haku</duet-heading>
+                </duet-grid>
+                <duet-spacer></duet-spacer>
+                <duet-input type="text" expand label="Haku" label-hidden clear="true"></duet-input>
+              </div>
+              <duet-spacer size="x-small"></duet-spacer>
+              <div>
+                <duet-heading level="h3" visual-level="h6">Usein haettua</duet-heading>
+                <div role="list">
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Autovakuutus</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Lapsiturva</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Rahastosäästäminen</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Henkivakuutus</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Varainhoito</duet-popup-menu-item>
+                </div>
+              </div>
+              <duet-divider></duet-divider>
+              <div>
+                <duet-heading level="h3" visual-level="h6" color="gray-darker">Ehdotetut haut</duet-heading>
+                <div role="list">
+                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>vakuutus</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem">sähkö<b>auto</b>n vakuutus</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>maattinen korvauskäsittely</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>tie</duet-popup-menu-item>
+                </div>
+              </div>
+              <duet-spacer size="large"></duet-spacer>
+              <div>
+                <duet-heading level="h3" visual-level="h6" color="gray-darker">Hakutulokset termillä 'auto' (93)</duet-heading>
+                <ul style="list-style: none; padding: 0;">
+                  <li style="padding: var(--space-medium) 0;">
+                    <duet-button url="#" variation="plain" margin="none" padding="none" fixed>Autovakuutus</duet-button>
+                    <duet-paragraph margin="none">Halvin autovakuutus ei aina ole järkevin vaihtoehto. Suosittelemme vakuutusten sisällön vertailua ja huomioimaan erityisesti...</duet-paragraph>
+                    <duet-spacer size="xx-small"></duet-spacer>
+                    <duet-breadcrumbs variation="plain" color="gray-darker">
+                      <span><duet-breadcrumb icon="">Henkilöasiakas</duet-breadcrumb></span>
+                      <span><duet-breadcrumb >Vakuutukset</duet-breadcrumb></span>
+                      <span><duet-breadcrumb>Ajoneuvot</duet-breadcrumb></span>
+                      <span><duet-breadcrumb>Autovakuutus</duet-breadcrumb></span>
+                    </duet-breadcrumbs>
+                  </li>
+                </ul>
+              </div>
+            </duet-slideout>
+            <duet-toolbar-item accessible-label="Valitse kieli" leading-icon="navigation-language" id="toolbar-item-language">FI</duet-toolbar-item>
+            <duet-popup-menu controller="toolbar-item-language" accessible-role="list" skip-teleport>
+              <duet-popup-menu-item accessible-role="listitem" accessible-label="Vaihda kieli suomeksi" active>Suomeksi</duet-popup-menu-item>
+              <duet-popup-menu-item accessible-role="listitem" accessible-label="Byt språk till svenska" target-language="sv">På Svenska</duet-popup-menu-item>
+              <duet-popup-menu-item accessible-role="listitem" accessible-label="Change language to English" target-language="en">In English</duet-popup-menu-item>
+            </duet-popup-menu>
           </div>
         </duet-toolbar>
       `, axeRunOptions);

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

@@ -20,6 +20,7 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  position: relative;
   width: 100%;
 }
 

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

@@ -18,19 +18,6 @@ export class DuetToolbar {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        const children = Array.from(this.element.children);
-        for (const child of children) {
-            if (child.getAttribute("slot") === "left") {
-                for (const slotChild of Array.from(child.children)) {
-                    slotChild.setAttribute("role", "listitem");
-                }
-            }
-            else if (child.getAttribute("slot") === "right") {
-                for (const slotChild of Array.from(child.children)) {
-                    slotChild.setAttribute("role", "listitem");
-                }
-            }
-        }
     }
     /**
      * render() function

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -50,7 +50,7 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { role: "listitem" }, h("div", { class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js

@@ -35,7 +35,7 @@ export class DuetToolbarDropdownLink {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("span", { class: "label" }, h("slot", null)), this.active && (h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("span", { class: "label" }, h("slot", null)), this.active && (h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.css

@@ -0,0 +1,122 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 100%;
+}
+
+.duet-toolbar-item {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 16px;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: rgb(0, 77, 128);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.duet-toolbar-item:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+.duet-toolbar-item[aria-expanded=true] .trailing-icon.rotate {
+  transform: rotate(180deg);
+}
+.duet-toolbar-item.negative {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-item.negative duet-icon {
+  color: rgb(205, 229, 241);
+}
+.duet-toolbar-item.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";
+  color: rgb(23, 28, 58);
+}
+.duet-toolbar-item.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-item.duet-theme-turva.negative duet-icon {
+  color: rgb(244, 207, 214);
+}
+.duet-toolbar-item:hover {
+  color: rgb(0, 41, 77);
+  background: rgb(243, 249, 252);
+}
+.duet-toolbar-item:hover.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(0, 41, 77, 0.2);
+}
+.duet-toolbar-item:hover.duet-theme-turva {
+  color: rgb(23, 28, 58);
+  background: rgb(245, 245, 247);
+}
+.duet-toolbar-item:hover.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
+.duet-toolbar-item.active {
+  color: rgb(0, 41, 77);
+}
+.duet-toolbar-item.active.negative {
+  font-weight: 600;
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
+.duet-toolbar-item.active.negative::after {
+  display: none;
+}
+.duet-toolbar-item.active::after {
+  position: absolute;
+  top: auto;
+  bottom: 1px;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 1px;
+  content: "";
+  background: rgb(0, 119, 179);
+  transition: 300ms ease;
+  transform: translateY(1px);
+}
+.duet-toolbar-item.active::after.duet-theme-turva {
+  background: rgb(198, 12, 48);
+}
+.duet-toolbar-item.active.duet-theme-turva {
+  color: rgb(23, 28, 58);
+}
+.duet-toolbar-item.active.duet-theme-turva::after {
+  background: rgb(198, 12, 48);
+}
+.duet-toolbar-item.active.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}