@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   position: relative;
   z-index: 100;
@@ -72,22 +72,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;
   margin-right: 8px !important;
   margin-bottom: 12px !important;
   -webkit-user-select: none;
@@ -100,6 +100,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -136,8 +139,8 @@ duet-label {
   height: 1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
   border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }
 .duet-switch input:checked + .duet-slider {
   background-color: rgb(0, 119, 179);
@@ -184,10 +187,12 @@ duet-label {
   background: #e38698;
 }
 :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75);
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-switch input:focus + .duet-slider {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75);
+.duet-theme-turva :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-slider {
@@ -219,4 +224,15 @@ duet-label {
 .duet-theme-turva .duet-slider::before {
   background-color: rgb(255, 255, 255);
   box-shadow: 1px 0 2px 0 #00334d;
+}
+
+:host(.duet-theme-turva2) .duet-switch input:checked + .duet-slider {
+  background-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-switch input:checked + .duet-slider::before {
+  box-shadow: -1px 0 2px #890e26;
+  transform: translateX(20px);
+}
+:host(.duet-theme-turva2) .duet-switch input:disabled:checked + .duet-slider {
+  background: #f38ba0;
 }

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

@@ -15,33 +15,57 @@ export class DuetToggle {
         this.toggleId = createID("DuetToggle");
         this.proxyId = createID("DuetToggle");
         /**
-         * Component event handling.
+         * Theme of the card.
          */
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            this.setFocus();
-            this.checked = !this.checked;
-        };
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
+        /**
+         * Aria 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;
+        /**
+         * Label for the toggle.
+         */
         this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
+        /**
+         * Position of the label
+         */
         this.labelPosition = "top";
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
         this.required = false;
+        /**
+         * Makes the input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
         this.disabled = false;
+        /**
+         * Check state of the checkbox.
+         */
         this.checked = false;
-        this.value = undefined;
-        this.identifier = undefined;
-        this.name = undefined;
-        this.role = undefined;
+        /**
+         * Component event handling.
+         */
+        this.onClick = (ev) => {
+            ev.preventDefault();
+            this.setFocus();
+            this.checked = !this.checked;
+        };
     }
     checkedChanged(isChecked) {
         this.duetChange.emit({
@@ -81,12 +105,12 @@ export class DuetToggle {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: 'c1edf3dfb5cbfb78c92aafd481e9c5bfec83b095', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'f5d071cde0463aab8f5ea4a1985b912c35b526e6', class: {
+        return (h(Host, { key: '5dd02994122156506b124c5fc5b34369770653ee', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd9ecee8e94677b861f8bdd075a116e4e294ea197', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
                 "duet-reverse-label": this.labelPosition === "right",
-            } }, h(DuetInternalLabel, { key: '7a8b09989ee8413b4ea78a863fb692f12fe58ebb', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '513ed78cb68458866b35d94f96163fe61cb6dcb1', class: "duet-switch" }, h("input", { key: '8f83040ad1ca990a02209381eac63b2eece87c0e', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: 'b7faad01c27eb015dde5051f7dba9dee1503398e', class: "duet-slider" })))));
+            } }, h(DuetInternalLabel, { key: '5c5a5ee2c5ac9e772c2bb8f2aaa822503af728dd', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '811421a233717397e31a4f3242c92197be133ed3', class: "duet-switch" }, h("input", { key: '1e2fce505e70caf118d61d53d08b0aaff69f3ac3', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: 'ca394aa66c3b8be2ad8b5c056ec7c737fcb93c44', class: "duet-slider" })))));
     }
     static get is() { return "duet-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -104,6 +128,7 @@ export class DuetToggle {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -124,12 +149,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -150,12 +175,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -170,11 +195,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -189,11 +214,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -208,11 +233,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -227,11 +252,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -246,12 +271,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -266,12 +291,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -286,12 +311,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -306,12 +331,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "labelColor": {
                 "type": "string",
+                "attribute": "label-color",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -326,11 +351,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-color",
                 "reflect": false
             },
             "labelWeight": {
                 "type": "string",
+                "attribute": "label-weight",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTextFontWeight",
@@ -351,11 +376,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-weight",
                 "reflect": false
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"right\" | \"left\"",
@@ -370,12 +395,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-position",
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -390,12 +415,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -410,12 +435,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -430,12 +455,12 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -450,11 +475,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -469,11 +494,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -488,11 +513,11 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -507,7 +532,6 @@ export class DuetToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-toolbar/duet-toolbar.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;
   position: relative;
   width: 100%;
 }
@@ -78,4 +78,11 @@
 }
 .duet-toolbar.duet-theme-turva.primary .container {
   border-bottom: 0;
+}
+
+:host(.duet-theme-turva2) .duet-toolbar.duet-theme-turva .container {
+  border-bottom-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-toolbar.duet-theme-turva.primary {
+  background: rgb(230, 23, 64);
 }

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

@@ -9,9 +9,14 @@ import { inheritGlobalTheme } from "../../common";
  */
 export class DuetToolbar {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Variation. Secondary is not supported for Turva theme. Negative is deprecated.
+         */
         this.variation = "default";
-        this.accessibleLabel = undefined;
     }
     /**
      * Component lifecycle events.
@@ -31,11 +36,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'fba71bd458248491214c3aab4243df4e105fdb5b' }, h("nav", { key: '42fa26ad6a3ffea27ec62722a3f55f1c0d8ea0f1', class: {
+        return (h(Host, { key: '2434866ef0b95d7b07a2248edc89a4f473d9ecc6' }, h("nav", { key: '9938a3cd11e5230013027cb613c8aa81f95e5bf7', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c19fc58652bd52d9c6f7755a01b266a7f77d1949', class: "container" }, h("div", { key: 'a0fef6ef853fc353a374b7bcd2fa632f5176ae60', class: "list", role: "list" }, h("slot", { key: 'a2b2896ec5ebf46253f3e05e1b8ac44582161abf', name: "left" })), h("div", { key: '11cb17b0024f1b6a84d91fb04f8d3be806b49af7', class: "list", role: "list" }, h("slot", { key: 'cd1c67c9f98bf8cb3607965c715d9974e6c17f93', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '9c915e9ffe872ec9b253bf9c7b7ca58ac5c39bee', class: "container" }, h("div", { key: '7a1ce3f543e9b908638de889a1b6b8270f73d830', class: "list", role: "list" }, h("slot", { key: '396f255c2694dbff16ae2f2584be49e4f5d4fdf5', name: "left" })), h("div", { key: '975122519f64947d2fc01d8a5c9fa63c3052097a', class: "list", role: "list" }, h("slot", { key: '8d070c2c7e5a168d7c426df35a4b742a95696383', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +58,7 @@ export class DuetToolbar {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -73,12 +79,12 @@ export class DuetToolbar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": true,
                 "complexType": {
                     "original": "\"default\" | \"primary\" | \"negative\" | \"secondary\"",
@@ -93,12 +99,12 @@ export class DuetToolbar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -113,7 +119,6 @@ export class DuetToolbar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-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%;
 }
 
@@ -44,6 +44,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-toolbar-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-toolbar-dropdown button .label {
   display: flex;
   gap: 0.5rem;
@@ -57,10 +67,6 @@
 .duet-toolbar-dropdown button.open .caret {
   transform: rotate(180deg);
 }
-.duet-toolbar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-toolbar-dropdown button.active, .duet-toolbar-dropdown button.open {
   color: rgb(8, 42, 77);
 }
@@ -74,8 +80,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-dropdown .items {
   position: absolute;
@@ -109,9 +115,6 @@
   color: rgb(23, 28, 58);
   background: rgb(245, 247, 250);
 }
-.duet-toolbar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open {
   color: rgb(23, 28, 58);
 }
@@ -158,4 +161,31 @@
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon {
   color: rgb(255, 185, 190);
+}
+
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button:hover {
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.active::after,
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.open::after {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.active,
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.open {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button:hover,
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active,
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+  background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button:hover, :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active, :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+  color: rgb(255, 255, 255);
 }