@duetds/components 10.2.3 → 10.3.0

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

@@ -76,12 +76,7 @@ export class DuetPopupMenu {
                 addClickListener = false;
             }
             else {
-                if (typeof this.controller === "string") {
-                    element = typeof this.controller === "string" ? document.getElementById(this.controller) : undefined;
-                }
-                else {
-                    element = this.controller;
-                }
+                element = typeof this.controller === "string" ? document.getElementById(this.controller) : this.controller;
                 if (element && this.openButton === element) {
                     return;
                 }
@@ -195,7 +190,12 @@ export class DuetPopupMenu {
             return;
         }
         this.teleport.observeDeletion();
-        this.setOpenButton();
+        if (this.controller && typeof this.controller !== "string") {
+            this.setOpenButton(this.controller);
+        }
+        else {
+            this.setOpenButton();
+        }
     }
     disconnectedCallback() {
         if (this.autoUpdateCleanup) {
@@ -406,17 +406,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '38d773eb5b1edc25cd44868b2dbd1266c91a89ed', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: '91ceb69caae39a31363ad719d005dccd3b1c8ee2', ref: element => {
+        return (h(Host, { key: '3534adf5c6abb308f55859ca8825f540149c4365', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: '8df3cd5cf367bc4bc8fe2414450f2b609ebc8d8b', 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: '8d88b2ea6b9530a3447e4a453e8bb8b7309db2da' }, h("duet-input", { key: '254c2fe75f20cfa1af4154f31091f547ba034971', 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: 'cf6b107594e63b231df20558506b2a3b024b4731' }, h("span", { key: 'b4f212123e9d319d2dfcf7b8d57e5f6e63d92e64', role: "status" }, `
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '1f455934a4ccc2124488b60ff8f04d82b3200cec' }, h("duet-input", { key: 'b763609a5d22ff87ad82cc7874bda7adf64956ec', 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: '91e60fbfc9d747551489af0cc9c5ebdd13d4eba9' }, h("span", { key: '605812e1cb2866eb2c71804a089ad6df771d57d1', role: "status" }, `
                   ${this.filterResultCount}/${this.itemElements.length}
                   ${this.filterResultCountLabel[this.language]}
-                `)), h("duet-spacer", { key: 'e123ca800b6c0ecd7f64099afde69f76ba837235', size: "xx-small" }))), h("slot", { key: '5fe85d5c618f5256a29d3d46155b2ea23e00525d' }))));
+                `)), h("duet-spacer", { key: '50d88c6e45d84d5ca864155420c736df12d5f188', size: "xx-small" }))), h("slot", { key: 'b25f422c968d1b9179a547cc7b022f77d0db0ce3' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,28 +51,18 @@
   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, .duet-theme-turva2 .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva, .duet-theme-turva .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva {
   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 {
-  background: rgb(245, 247, 250);
-}
 .duet-popup-menu-item:hover {
   background: rgb(228, 241, 247);
 }
-.duet-popup-menu-item:hover.duet-theme-turva {
-  background: rgb(222, 224, 228);
-}
 .duet-popup-menu-item .duet-popup-menu-item-label {
   flex-grow: 1;
 }
@@ -85,16 +75,19 @@
   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 {
+.duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva, .duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 
-:host(.duet-theme-turva2) .duet-popup-menu-item.duet-theme-turva {
+.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, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-popup-menu-item.active.duet-theme-turva {
+
+.duet-popup-menu-item.active.duet-theme-turva {
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-popup-menu-item:hover.duet-theme-turva {
+
+.duet-popup-menu-item:hover.duet-theme-turva {
   background: rgb(251, 235, 225);
 }

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

@@ -48,9 +48,6 @@
   border-radius: 0;
   box-shadow: none;
 }
-.duet-theme-turva .duet-progress .progress-bar {
-  background-color: rgb(255, 241, 241);
-}
 .duet-progress .progress-bar > span {
   display: block;
   height: inherit;
@@ -58,9 +55,6 @@
   background-color: rgb(0, 119, 179);
   border-radius: 0;
 }
-.duet-theme-turva .duet-progress .progress-bar > span {
-  background-color: rgb(198, 12, 48);
-}
 .duet-progress progress[value] {
   display: flex;
   width: 100%;
@@ -89,34 +83,27 @@
 .duet-progress progress[value] ::-moz-progress-bar {
   background-color: rgb(240, 247, 250);
 }
-.duet-progress.duet-theme-turva progress[value] {
-  color: rgb(198, 12, 48);
-}
-.duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
-  background-color: rgb(255, 241, 241);
-}
-.duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
-  background-color: rgb(198, 12, 48);
-}
-.duet-progress.duet-theme-turva progress[value] ::-moz-progress-bar {
-  background-color: rgb(255, 241, 241);
-}
 
-.duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar {
+.duet-progress.duet-theme-turva .progress-bar {
   background-color: rgb(253, 247, 242);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar > span {
+
+.duet-progress.duet-theme-turva .progress-bar > span {
   background-color: rgb(230, 23, 64);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value] {
+
+.duet-progress.duet-theme-turva progress[value] {
   color: rgb(230, 23, 64);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
+
+.duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
   background-color: rgb(253, 247, 242);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
+
+.duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
   background-color: rgb(230, 23, 64);
 }
-.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-moz-progress-bar {
+
+.duet-progress.duet-theme-turva progress[value]::-moz-progress-bar {
   background-color: rgb(253, 247, 242);
 }

package/lib/collection/components/duet-promo-card/duet-promo-card.css

@@ -66,7 +66,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-promo-card .content-wrapper:focus, .duet-promo-card .content-wrapper:focus.duet-theme-turva, .duet-theme-turva2 .duet-promo-card .content-wrapper:focus, .duet-promo-card .content-wrapper:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-promo-card .content-wrapper:focus, .duet-promo-card .content-wrapper:focus.duet-theme-turva, .duet-theme-turva .duet-promo-card .content-wrapper:focus, .duet-promo-card .content-wrapper:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -103,9 +103,6 @@
 .duet-promo-card.no-bg-color .image {
   border-radius: 16px;
 }
-.duet-promo-card.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";
-}
 
 .duet-promo-card-link {
   transition: box-shadow 300ms ease;
@@ -113,6 +110,10 @@
 .duet-promo-card-link:hover {
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1);
 }
-.duet-promo-card-link:hover.duet-theme-turva {
+
+.duet-theme-turva.duet-promo-card {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-theme-turva.duet-promo-card-link:hover {
   box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15);
 }

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

@@ -88,10 +88,6 @@
   cursor: pointer;
   background: transparent;
 }
-.duet-theme-turva .duet-label {
-  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-label .duet-label-content {
   flex-grow: 1;
   font-size: 1rem;
@@ -124,20 +120,12 @@
   border: 1px solid rgb(8, 42, 77);
   border-radius: 50%;
 }
-.duet-theme-turva .duet-label::before {
-  border-color: rgb(23, 28, 58);
-}
 .duet-label.focus::before {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-label.focus::before, .duet-label.focus::before.duet-theme-turva, .duet-theme-turva2 .duet-label.focus::before, .duet-label.focus::before.duet-theme-turva2 {
-  outline-color: rgba(53, 79, 101, 0.8);
-}
-.duet-theme-turva .duet-label.focus::before {
-  outline: 2px solid;
-  outline-offset: 2px;
+.duet-theme-turva .duet-label.focus::before, .duet-label.focus::before.duet-theme-turva, .duet-theme-turva .duet-label.focus::before, .duet-label.focus::before.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-label.checked::after {
@@ -152,31 +140,18 @@
   background: rgb(0, 119, 179);
   border-radius: 50%;
 }
-.duet-theme-turva .duet-label.checked::after {
-  background: rgb(23, 28, 58);
-}
 .duet-label.disabled {
   color: rgb(98, 121, 138);
 }
-.duet-theme-turva .duet-label.disabled {
-  color: rgb(143, 147, 158);
-}
 .duet-label.disabled::before {
   border-color: rgb(181, 198, 208);
 }
-.duet-theme-turva .duet-label.disabled::before {
-  border-color: rgb(143, 147, 158);
-}
 .duet-label.disabled.checked::before {
   border: 1px solid rgb(127, 150, 165);
 }
 .duet-label.disabled.checked::after {
   background: rgb(127, 150, 165);
 }
-.duet-theme-turva .duet-label.disabled.checked::after {
-  background: rgb(143, 147, 158);
-  border-color: rgb(143, 147, 158);
-}
 
 *::slotted([slot=input]) {
   padding: 14px !important;
@@ -194,22 +169,49 @@
   cursor: default;
 }
 
-:host(.duet-theme-turva2) .duet-theme-turva .duet-label {
+.duet-theme-turva .duet-label {
+  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, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-radio + label::before {
+
+.duet-theme-turva .duet-radio + label::before {
   border-color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-radio:checked + label::after {
+
+.duet-theme-turva .duet-label.focus::before {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+
+.duet-theme-turva .duet-label.checked::after {
+  background: rgb(23, 42, 59);
+}
+
+.duet-theme-turva .duet-label.disabled {
+  color: rgb(120, 145, 164);
+}
+.duet-theme-turva .duet-label.disabled::before {
+  border-color: rgb(120, 145, 164);
+}
+.duet-theme-turva .duet-label.disabled.checked::after {
+  background: rgb(120, 145, 164);
+  border-color: rgb(120, 145, 164);
+}
+
+.duet-theme-turva .duet-radio:checked + label::after {
   background: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label {
+
+.duet-theme-turva .duet-radio[disabled] + label {
   color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label::before {
+
+.duet-theme-turva .duet-radio[disabled] + label::before {
   border-color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled]:checked + label::after {
+
+.duet-theme-turva .duet-radio[disabled]:checked + label::after {
   background: rgb(120, 145, 164);
   border-color: rgb(120, 145, 164);
 }

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

@@ -182,16 +182,17 @@ export class DuetRadio {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '69aaca2996b0d03551927a1d506a506a64cbc513', onClick: this.onClick, class: {
+        return (h(Host, { key: '6319832bf6574e9cbcca45ccf509563abc980527', onClick: this.onClick, class: {
+                vertical: this.groupDirection === "vertical",
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '66ea6a60a14b7f41d420ea8c55d0a1a72b829eb3', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: 'f0984e840d5d981d22380562c3e62aee9c39e3e3', name: "input" }), h("label", { key: '64131c520a668b265a4e6269824578c93f435b51', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, h("div", { key: '63a09ea5033fb6170e0b84145861ef5516af6579', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: 'e9032f840a22530acceb3fd467eeb2fd16ff3293', name: "input" }), h("label", { key: '0b07703e6b12480fbbcad9ba33feb75a8d94848b', inert: true, ref: element => (this.labelElement = element), class: {
                 "duet-label": true,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.disabled || this.groupDisabled,
-            } }, h("div", { key: '46ede7327f4250759b61d19bb423aafedaf2f0db', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, h("div", { key: 'a9454ff3922c41c394a758d57be3c23e231122da', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
     }
     static get is() { return "duet-radio"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-range-slider/duet-range-slider.css

@@ -133,16 +133,9 @@
   color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
 }
-.duet-theme-turva .duet-output {
-  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-range-disabled .duet-output {
   color: rgb(127, 150, 165);
 }
-.duet-range-disabled.duet-theme-turva .duet-output {
-  color: rgb(143, 147, 158);
-}
 
 .duet-range {
   position: relative;
@@ -160,12 +153,9 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-range:focus, :host(.user-is-tabbing) .duet-range:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-range:focus, :host(.user-is-tabbing) .duet-range:focus.duet-theme-turva2 {
+.duet-theme-turva :host(.user-is-tabbing) .duet-range:focus, :host(.user-is-tabbing) .duet-range:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-range:focus, :host(.user-is-tabbing) .duet-range:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
-.duet-theme-turva .duet-range {
-  background: rgb(199, 202, 207);
-}
 .duet-ie .duet-range {
   display: block;
   width: auto;
@@ -200,9 +190,6 @@
   border-radius: 50%;
   transition: box-shadow 300ms ease;
 }
-.duet-theme-turva .duet-range::-webkit-slider-thumb {
-  border-color: rgb(143, 147, 158);
-}
 .duet-range:active::-webkit-slider-thumb {
   cursor: -webkit-grabbing;
 }
@@ -216,9 +203,6 @@
   border: 1px solid rgb(127, 150, 165);
   border-radius: 50%;
 }
-.duet-theme-turva .duet-range::-moz-range-thumb {
-  border-color: rgb(143, 147, 158);
-}
 .duet-range:active::-moz-range-thumb {
   cursor: -moz-grabbing;
 }
@@ -231,56 +215,32 @@
   border: 1px solid rgb(127, 150, 165);
   border-radius: 50%;
 }
-.duet-theme-turva .duet-range::-ms-thumb {
-  border-color: rgb(143, 147, 158);
-}
 .duet-range:disabled {
   background: rgb(181, 198, 208) !important;
 }
-.duet-theme-turva .duet-range:disabled {
-  background: rgb(199, 202, 207) !important;
-}
 .duet-range:disabled::-webkit-slider-thumb {
   cursor: default;
   background: rgb(181, 198, 208);
   border-color: transparent;
 }
-.duet-theme-turva .duet-range:disabled::-webkit-slider-thumb {
-  background: rgb(199, 202, 207);
-  border-color: transparent;
-}
 .duet-range:disabled::-moz-range-thumb {
   cursor: default;
   background: rgb(181, 198, 208);
   border-color: transparent;
 }
-.duet-theme-turva .duet-range:disabled::-moz-range-thumb {
-  background: rgb(199, 202, 207);
-  border-color: transparent;
-}
 .duet-range:disabled::-ms-thumb {
   cursor: default;
   background: rgb(181, 198, 208);
   border-color: transparent;
 }
-.duet-theme-turva .duet-range:disabled::-ms-thumb {
-  background: rgb(199, 202, 207);
-  border-color: transparent;
-}
 .duet-range::-ms-fill-lower {
   height: 4px;
   background: rgb(0, 119, 179);
 }
-.duet-theme-turva .duet-range::-ms-fill-lower {
-  background: rgb(198, 12, 48);
-}
 .duet-range::-ms-fill-upper {
   height: 4px;
   background: rgb(181, 198, 208);
 }
-.duet-theme-turva .duet-range::-ms-fill-upper {
-  background: rgb(199, 202, 207);
-}
 
 .duet-label-hidden .duet-internal-label,
 .duet-label-hidden output {
@@ -294,39 +254,54 @@
   clip: rect(0 0 0 0);
 }
 
-:host(.duet-theme-turva2) .duet-theme-turva .duet-output {
+.duet-theme-turva .duet-output {
+  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, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-range-disabled.duet-theme-turva .duet-output {
+
+.duet-range-disabled.duet-theme-turva .duet-output {
   color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range {
+
+.duet-theme-turva .duet-range {
   background: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-webkit-slider-thumb {
+
+.duet-theme-turva .duet-range::-webkit-slider-thumb {
   border-color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-moz-range-thumb {
+
+.duet-theme-turva .duet-range::-moz-range-thumb {
   border-color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-thumb {
+
+.duet-theme-turva .duet-range::-ms-thumb {
   border-color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled {
+
+.duet-theme-turva .duet-range:disabled {
   background: rgb(178, 194, 205) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-webkit-slider-thumb {
+
+.duet-theme-turva .duet-range:disabled::-webkit-slider-thumb {
   background: rgb(178, 194, 205);
+  border-color: transparent;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-moz-range-thumb {
+
+.duet-theme-turva .duet-range:disabled::-moz-range-thumb {
   background: rgb(178, 194, 205);
+  border-color: transparent;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-ms-thumb {
+
+.duet-theme-turva .duet-range:disabled::-ms-thumb {
   background: rgb(178, 194, 205);
+  border-color: transparent;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-fill-lower {
+
+.duet-theme-turva .duet-range::-ms-fill-lower {
   background: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-fill-upper {
+
+.duet-theme-turva .duet-range::-ms-fill-upper {
   background: rgb(178, 194, 205);
 }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.css

@@ -48,6 +48,6 @@
   border: 0;
 }
 
-:host(.duet-theme-turva2) .duet-theme-turva .duet-range-step-counter {
+.duet-theme-turva .duet-range-step-counter {
   color: rgb(23, 42, 59);
 }

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

@@ -99,19 +99,10 @@
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
   border-color: rgb(0, 119, 179);
   border-width: 2px;
-  /* stylelint-disable */
-  /* too deep nesting */
-  /* stylelint-enable */
-}
-.duet-theme-turva :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
-  border-color: rgb(113, 118, 132);
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden] {
   display: none !important;
 }
-:host .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
-  border-color: rgb(113, 118, 132);
-}
 :host .duet-scrollable-items .duet-scrollable-list {
   display: flex;
   flex-wrap: nowrap;
@@ -210,9 +201,10 @@
   transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
 }
 
-:host(.duet-theme-turva2) .duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+.duet-theme-turva .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
   border-color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+
+.duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
   border-color: rgb(120, 145, 164);
 }