@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -5,6 +5,7 @@ import { spaceXSmall } from "@duetds/tokens";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { setOpenerExpanded } from "../../utils/a11y-utils";
 import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { getLanguage } from "../../utils/language-utils";
@@ -16,20 +17,103 @@ export class DuetPopupMenu {
             fi: "Suodata valikkoa",
             sv: "Filtrera meny",
         };
-        this.setOpenButton = (element) => {
+        this.filterResultCountLabel = {
+            en: "items match filter",
+            fi: "kohtaa vastaa suodatinta",
+            sv: "menyalternativ matchar filtret",
+        };
+        this.disconnectController = new AbortController();
+        this.eventListenerController = new AbortController();
+        this.open = false;
+        this.language = getLanguage();
+        /**
+         * Accessible role.
+         */
+        this.accessibleRole = "menu";
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Placement of the popup menu relative to its controller.
+         * Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
+         */
+        this.placement = "bottom-start";
+        /**
+         * Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute.
+         */
+        this.forcePlacement = false;
+        /**
+         * Allow vertical flip when there is not enough space
+         * below the controller.
+         */
+        this.allowVerticalFlip = true;
+        /**
+         * Position.
+         */
+        this.position = "absolute";
+        /**
+         * Main axis positioning offset of the popup menu relative to its controller.
+         * For "top" and "bottom" placements main axis is vertical, for "left" and "right" horizontal.
+         */
+        this.mainAxisOffset = 0;
+        /**
+         * Cross axis positioning offset of the popup menu relative to its controller.
+         * For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical.
+         */
+        this.crossAxisOffset = 0;
+        /**
+         * By default Popup Menu adds "action-arrow-down-small" icon to the controller.
+         * This can be removed with controller-icon="".
+         */
+        this.controllerIcon = "action-arrow-down-small";
+        // duet-slideout has about the same code as this function
+        this.setOpenButton = (givenElement) => {
+            let element;
+            let addClickListener;
+            if (givenElement || givenElement === null) {
+                element = givenElement;
+                addClickListener = false;
+            }
+            else {
+                if (typeof this.controller === "string") {
+                    element = typeof this.controller === "string" ? document.getElementById(this.controller) : undefined;
+                }
+                else {
+                    element = this.controller;
+                }
+                if (element && this.openButton === element) {
+                    return;
+                }
+                addClickListener = true;
+            }
+            if (this.eventListenerController) {
+                this.eventListenerController.abort();
+            }
             if (!element) {
+                if (this.openButton && this.controllerIcon) {
+                    this.openButton.removeAttribute("trailing-icon");
+                }
+                this.openButton = undefined;
                 return;
             }
             try {
                 const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
+                setOpenerExpanded(button, false);
                 if (this.controllerIcon) {
                     button.setAttribute("trailing-icon", "action-arrow-down-small");
                 }
                 this.openButton = button;
+                if (addClickListener && !this.disconnectController.signal.aborted) {
+                    this.eventListenerController = new AbortController();
+                    this.openButton.addEventListener("click", this.openButtonEventListener, {
+                        signal: this.eventListenerController.signal,
+                    });
+                }
+            }
+            catch (e) {
+                console.error(e);
             }
-            catch (_e) { }
         };
         this.openButtonEventListener = () => {
             this.toggle();
@@ -59,13 +143,15 @@ export class DuetPopupMenu {
             const filterText = (_a = this.filterInput.value) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase();
             const items = this.itemElements;
             items.forEach(item => {
+                var _a;
                 item.style.display =
                     !filterText ||
                         item.textContent.toLowerCase().includes(filterText) ||
-                        item.value.toLowerCase().includes(filterText)
+                        ((_a = item.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filterText))
                         ? ""
                         : "none";
             });
+            this.filterResultCount = items.filter(i => i.style.display !== "none").length;
         };
         this.handleKeyDownOnFilter = (ev) => {
             var _a;
@@ -73,51 +159,12 @@ export class DuetPopupMenu {
                 (_a = this.getNonFilteredItems()[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
             }
         };
-        this.open = false;
-        this.menuY = undefined;
-        this.menuX = undefined;
-        this.language = getLanguage();
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menu";
-        this.theme = "";
-        this.skipTeleport = undefined;
-        this.placement = "bottom-start";
-        this.forcePlacement = false;
-        this.allowVerticalFlip = true;
-        this.position = "absolute";
-        this.mainAxisOffset = 0;
-        this.crossAxisOffset = 0;
-        this.controllerIcon = "action-arrow-down-small";
-        this.scrollLimit = undefined;
-        this.showFilterInput = undefined;
-    }
-    /**
-     * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
-     * the component automatically sets the click event listener to open and close the popup-menu.
-     */
-    get controller() {
-        return this._controller;
-    }
-    set controller(value) {
-        if (this._controller === value) {
-            return;
-        }
-        this._controller = value;
-        if (typeof value === "string") {
-            this.setOpenButton(document.getElementById(value));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
-        else {
-            this.setOpenButton(value);
-        }
     }
     /**
      * Alias for property controller.
      */
     get opener() {
-        return this._controller;
+        return this.controller;
     }
     set opener(value) {
         this.controller = value;
@@ -137,23 +184,27 @@ export class DuetPopupMenu {
         if (Build.isServer) {
             return;
         }
+        if (this.disconnectController && this.disconnectController.signal.aborted) {
+            this.disconnectController = new AbortController();
+        }
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
+        this.setOpenButton();
     }
     disconnectedCallback() {
         if (this.autoUpdateCleanup) {
             this.autoUpdateCleanup();
         }
-        if (this.openButton) {
-            this.openButton.removeEventListener("click", this.openButtonEventListener);
-            if (this.controllerIcon) {
-                this.openButton.removeAttribute("trailing-icon");
-            }
+        if (this.disconnectController) {
+            this.disconnectController.abort();
         }
+        this.setOpenButton(null);
     }
     /**
      * Component event handling.
@@ -246,17 +297,20 @@ export class DuetPopupMenu {
         if (!!newValue === !!oldValue) {
             return;
         }
+        if (this.openButton) {
+            setOpenerExpanded(this.openButton, this.open);
+        }
         if (this.open && !oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
-            }
+            const autoUpdateConfig = {
+                ancestorScroll: !this.forcePlacement,
+            };
             if (this.accessibleRole !== "listbox") {
                 this.teleport.makeSiblingsInert();
             }
             this.updatePlacement();
             // Start autoUpdate when menu is open
             if (this.menuElement && this.openButton) {
-                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement);
+                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement, autoUpdateConfig);
             }
             if (this.showFilterInput) {
                 this.filterInput.value = "";
@@ -270,9 +324,6 @@ export class DuetPopupMenu {
             }, 200);
         }
         else if (!this.open && oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
-            }
             // Clean up autoUpdate when closed
             if (this.autoUpdateCleanup) {
                 this.autoUpdateCleanup();
@@ -288,15 +339,51 @@ export class DuetPopupMenu {
             }, 200);
         }
     }
+    handleControllerChange(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        if (typeof newValue === "string") {
+            this.setOpenButton();
+        }
+        else {
+            this.setOpenButton(newValue);
+        }
+    }
     get itemElements() {
         return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
     }
+    getAllPrecedingMatchingSiblings(el, selector) {
+        const prev = el.previousElementSibling;
+        if (prev) {
+            const matches = this.getAllPrecedingMatchingSiblings(prev, selector);
+            if (prev === null || prev === void 0 ? void 0 : prev.matches(selector)) {
+                matches.push(prev);
+            }
+            return matches;
+        }
+        return [];
+    }
     get popupMenuStyleHeight() {
+        var _a;
         const selector = ":scope duet-popup-menu-item, :scope duet-notification";
         const elements = Array.from(this.element.querySelectorAll(selector));
-        if (elements.length > 0 && this.scrollLimit) {
+        // if we have filter, elements may be hidden
+        const visibleElements = elements.filter(el => el.style.display !== "none");
+        if (visibleElements.length > 0 && this.scrollLimit) {
+            // of the visible elements, we want to show at moist scrollLimit items
+            const itemsToShow = visibleElements.slice(0, this.scrollLimit - 1);
+            // use the actual heights of the items to show
+            const itemsToShowHeight = itemsToShow.reduce((acc, cur) => acc + cur.offsetHeight, 0);
+            // include possible filter input
+            const filterHeight = ((_a = this.filterInput) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+            // include all dividers that preced the last item to show
+            // as their height with margins can not be easily captured, use magic number 17, 1px height + 2 * 8px margin
+            const lastItemToShow = itemsToShow[itemsToShow.length - 1];
+            const dividerHeight = this.getAllPrecedingMatchingSiblings(lastItemToShow, "duet-divider").length * 17;
+            // popup-menu has spaceXSmall top and bottom paddings
             const paddings = Number(spaceXSmall.replace("px", "")) * 2;
-            return `${elements[0].offsetHeight * this.scrollLimit + paddings}px`;
+            return `${itemsToShowHeight + filterHeight + dividerHeight + paddings}px`;
         }
         else {
             return "auto";
@@ -319,14 +406,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: 'd44b11810713e51b35f01a1e527de4e8fbb20a94' }, h("div", { key: 'ef92e91fadf1fffee766178607e5cc6835295a56', ref: element => {
+        return (h(Host, { key: '3e4fe2a2ca40a34b5b8794f4c11051b48dc03417' }, h("div", { key: 'd9cbfb33282b072af2fef5172e6ff9c4fc3ee003', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '6c81b3737473a220d8e3f0f00a2dc8fbaeadcc5d' }, h("duet-input", { key: '8667feda1fb7b281082220a6c770847ecec7b03f', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-spacer", { key: '27190fdb00333f8f4ffd28cc6d2be99a7eb74355', size: "xx-small" }))), h("slot", { key: '08e56b30c4235a91e15d9e60a667ed351f9dc7a1' }))));
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'f9acbac0a98487efc50dd5a132fe61bb1e411979' }, h("duet-input", { key: 'c3224672751c4a30074ffa79ea873a569706b4fa', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: 'daf978e63ae05c1396da1ca3cdf84ac138e47e03' }, h("span", { key: '1fdf706c20cd1dda3a6854aad9ee8de26c847721', role: "status" }, `
+                  ${this.filterResultCount}/${this.itemElements.length}
+                  ${this.filterResultCountLabel[this.language]}
+                `)), h("duet-spacer", { key: 'fbd2399dbd35a743f2e6df12e03ff896a157dcd4', size: "xx-small" }))), h("slot", { key: 'c8b5480636559d484b8ac47e4987c0d7baa17d0d' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -344,6 +434,7 @@ export class DuetPopupMenu {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -358,11 +449,11 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleRole": {
                 "type": "string",
+                "attribute": "accessible-role",
                 "mutable": false,
                 "complexType": {
                     "original": "\"menu\" | \"listbox\" | \"list\"",
@@ -377,12 +468,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "\"menu\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -403,12 +494,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "skipTeleport": {
                 "type": "boolean",
+                "attribute": "skip-teleport",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -426,15 +517,15 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "skip-teleport",
                 "reflect": false
             },
             "controller": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "controller",
+                "mutable": true,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "| string\n    | HTMLDuetInputElement\n    | (HTMLElement & FocusableComponent & OpenerComponent)\n    | HTMLElement",
+                    "resolved": "HTMLDuetInputElement | HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLDuetInputElement": {
                             "location": "global",
@@ -462,26 +553,26 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,\nthe component automatically sets the click event listener to open and close the popup-menu."
                 },
-                "getter": true,
-                "setter": true,
-                "attribute": "controller",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "opener": {
                 "type": "string",
+                "attribute": "opener",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLDuetInputElement | HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
-                        "HTMLDuetInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLDuetInputElement"
-                        },
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
                         },
+                        "HTMLDuetInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetInputElement"
+                        },
                         "FocusableComponent": {
                             "location": "import",
                             "path": "../../common",
@@ -502,11 +593,11 @@ export class DuetPopupMenu {
                 },
                 "getter": true,
                 "setter": true,
-                "attribute": "opener",
                 "reflect": false
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "| \"top\"\n    | \"right\"\n    | \"bottom\"\n    | \"left\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"right-start\"\n    | \"right-end\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"left-start\"\n    | \"left-end\"",
@@ -521,12 +612,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "\"bottom-start\""
             },
             "forcePlacement": {
                 "type": "boolean",
+                "attribute": "force-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -537,16 +628,16 @@ export class DuetPopupMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Force placement."
+                    "text": "Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "force-placement",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "allowVerticalFlip": {
                 "type": "boolean",
+                "attribute": "allow-vertical-flip",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -561,12 +652,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allow-vertical-flip",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "\"absolute\" | \"fixed\"",
@@ -581,12 +672,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"absolute\""
             },
             "mainAxisOffset": {
                 "type": "number",
+                "attribute": "main-axis-offset",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -601,12 +692,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "main-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "crossAxisOffset": {
                 "type": "number",
+                "attribute": "cross-axis-offset",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -621,12 +712,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "cross-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "controllerIcon": {
                 "type": "string",
+                "attribute": "controller-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -641,12 +732,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "controller-icon",
                 "reflect": false,
                 "defaultValue": "\"action-arrow-down-small\""
             },
             "scrollLimit": {
                 "type": "number",
+                "attribute": "scroll-limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -661,11 +752,11 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scroll-limit",
                 "reflect": false
             },
             "showFilterInput": {
                 "type": "boolean",
+                "attribute": "show-filter-input",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -680,7 +771,6 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-filter-input",
                 "reflect": false
             }
         };
@@ -690,6 +780,7 @@ export class DuetPopupMenu {
             "open": {},
             "menuY": {},
             "menuX": {},
+            "filterResultCount": {},
             "language": {}
         };
     }
@@ -710,7 +801,7 @@ export class DuetPopupMenu {
                     "references": {
                         "DuetPopupMenuEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
                             "id": "src/components/duet-popup-menu/duet-popup-menu.tsx::DuetPopupMenuEvent"
                         }
                     }
@@ -794,6 +885,9 @@ export class DuetPopupMenu {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
+            }, {
+                "propName": "controller",
+                "methodName": "handleControllerChange"
             }];
     }
     static get listeners() {

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-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;
   display: flex;
   flex-direction: row;
   gap: 8px;
@@ -28,6 +28,8 @@
 }
 
 .duet-popup-menu-item {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-grow: 1;
   gap: 12px;
@@ -42,19 +44,24 @@
   text-align: left;
   text-decoration: none;
   cursor: pointer;
+  border-radius: 4px;
 }
 .duet-popup-menu-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: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-popup-menu-item:focus, .duet-popup-menu-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-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-popup-menu-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-popup-menu-item.active {
+  z-index: 0;
   background: rgb(240, 247, 250);
 }
 .duet-popup-menu-item.active.duet-theme-turva {
@@ -74,9 +81,20 @@
 }
 
 .active-descendant {
-  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 .active-descendant, .active-descendant.duet-theme-turva, .duet-theme-turva2 .active-descendant, .active-descendant.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+
+:host(.duet-theme-turva2) .duet-popup-menu-item.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-popup-menu-item.active.duet-theme-turva {
+  background: rgb(253, 247, 242);
 }
-.duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+:host(.duet-theme-turva2) .duet-popup-menu-item:hover.duet-theme-turva {
+  background: rgb(251, 235, 225);
 }