@duetds/components 9.16.1 → 9.18.0

package/lib/collection/components/duet-popup-menu/duet-popup-menu.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;
 }
 
 .duet-popup-menu-list {
@@ -27,20 +27,20 @@
   top: 0;
   left: 0;
   z-index: 950;
+  visibility: hidden !important;
   width: max-content;
   min-width: 175px;
   padding: 8px;
   margin: 0;
   color: rgb(8, 42, 77);
   list-style: none;
-  visibility: hidden !important;
   background: rgb(255, 255, 255);
   border-radius: 8px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
   opacity: 0;
-  transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
   transform: scaleY(0);
   transform-origin: top center;
+  transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
 }
 .duet-popup-menu-list.open {
   visibility: visible !important;
@@ -68,5 +68,5 @@ slot {
 }
 
 :host(.duet-theme-turva2) .duet-popup-menu-list.duet-theme-turva {
-  color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
 }

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,19 +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 {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.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: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-popup-menu-item.active.duet-theme-turva {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-popup-menu-item:hover.duet-theme-turva {
-  background: #fbebe1;
+  background: rgb(251, 235, 225);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
   height: inherit;
 }
@@ -28,11 +28,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;
   display: block;
   width: 100%;
   min-height: 1px;
@@ -68,12 +68,12 @@
   min-height: 1px;
   /* For IE10 */
   color: rgb(0, 119, 179);
-  /* Get rid of default border in Firefox. */
-  border: 0 none;
   /* Reset the default appearance */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  /* Get rid of default border in Firefox. */
+  border: 0 none;
 }
 .duet-progress progress[value]::-webkit-progress-bar {
   background-color: rgb(240, 247, 250);
@@ -103,20 +103,20 @@
 }
 
 .duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar {
-  background-color: #fdf7f2;
+  background-color: rgb(253, 247, 242);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar > span {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva progress[value] {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
-  background-color: #fdf7f2;
+  background-color: rgb(253, 247, 242);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }
 .duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-moz-progress-bar {
-  background-color: #fdf7f2;
+  background-color: rgb(253, 247, 242);
 }

package/lib/collection/components/duet-promo-card/duet-promo-card.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;
   margin-right: 4px !important;
   margin-bottom: 2px !important;
   display: block;
@@ -56,24 +56,30 @@
   height: 100%;
   color: inherit;
   text-decoration: none;
+  border-radius: 20px;
 }
 .duet-promo-card .content-wrapper:focus {
-  border-radius: 20px;
-  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-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 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-promo-card .image {
   position: relative;
   width: 100%;
   overflow: hidden;
+  object-fit: cover;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
-  object-fit: cover;
 }
 .duet-promo-card .content {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   gap: 8px;
   padding: 20px;
 }
@@ -97,9 +103,6 @@
 .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.duet-theme-turva .content-wrapper:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 
 .duet-promo-card-link {
   transition: box-shadow 300ms ease;

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

@@ -58,7 +58,7 @@ export class DuetPromoCard {
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: '6c2f3bc4656a8fdace5aa5c9d871dafe76f36484', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '5b937c96ac8b623cbeb5e6c280dba1e19744d67c', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '7dddf830e713a82cfed044e9846cfbaaed422d76', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '8aa7b7e2c6781e15d2a4a6bdbba72fbd1135384f', class: "pre-heading" }, h("slot", { key: 'cb0fa806c7517362d4da2ab9870de84dfcbc8c16', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'a6a86cd4c7d75b2c0649d416bf286c04e4e28dbf', class: "heading" }, h("duet-heading", { key: 'eac343c0aa5b97e8d708be8f60893caa961cda4d', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '0b25be163809e467df3efe5c4803ba29cb548297' }, h("slot", { key: '7a054f1b24cd8d813da34c62911c6b22bfd52613', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'ae147d63613bfb30bcd55188741a88817a6268b9', class: "description" }, h("duet-paragraph", { key: 'fcdd8b0f8c9863ee1fde670de8689464b093aa48', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'cae433f1bc9c9483bec0e92076e2b137ed489001' }, h("slot", { key: '8b26833d0c320e0df13b6f47170914c604e6a0a1', name: "description" }))))), this.hasActionSlot && (h("div", { key: '718dbe99fd6852116a62a6fdda6b23059fe2911d', class: "action" }, h("slot", { key: '2524edf69cde6300e52045a9069637465658623f', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'b2e8ca1f06923cab98d7336c7062c071bcfc261f', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '0a8ce33fc1051205cac9d8d2ac24bfa073848343', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '5cc34aee907a48571fef7d7702940c56a456f109', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'a832b2964afdbc503fe20c3b1cc9e06ad503639e', class: "pre-heading" }, h("slot", { key: 'cd32235d60380db53c044df70c45ae0fab54ab92', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '01d5f808a6d8df027cce500a243244a77f22d4bd', class: "heading" }, h("duet-heading", { key: '432e098ec916ea2cfb50f5c3b227ccbc79cb46ae', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'c21c360ec6e50de46c62b62e8719588296ce48bf' }, h("slot", { key: '8643c8b20cb1d3aa6bb48c0bcf79f4bcdf7626f9', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '8220fc6e3a21f9434d962321afc9ba95d6095de8', class: "description" }, h("duet-paragraph", { key: '3cfd920c2aaed2185d3869e0f22a5b8c79dcc830', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '83121871c669e008e8e66cfc3235b5e2a9bfa774' }, h("slot", { key: 'ace270926c69c31b27b91abae993671179aad975', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'de50b7e248230d0497635d62ca93c98a6bb25391', class: "action" }, h("slot", { key: '31ccf2f4a58b5b5cc025ca3c6598cebea6391947', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-radio/duet-radio.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;
   margin-right: 28px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -74,9 +74,9 @@
   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: 1rem;
   font-weight: 400;
-  hyphens: auto;
   line-height: 1.5;
   color: rgb(8, 42, 77);
+  hyphens: auto;
   word-break: break-word;
   overflow-wrap: break-word;
   cursor: pointer;
@@ -97,8 +97,8 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 .duet-radio-container {
@@ -133,10 +133,17 @@
   border-color: rgb(23, 28, 58);
 }
 .duet-radio:focus + label::before {
-  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-radio:focus + label::before, .duet-radio:focus + label::before.duet-theme-turva, .duet-theme-turva2 .duet-radio:focus + label::before, .duet-radio:focus + label::before.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva .duet-radio:focus + label::before {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-radio:checked + label::after {
   position: absolute;
@@ -180,21 +187,21 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-label {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio + label::before {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio:checked + label::after {
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label {
-  color: #7891a4;
+  color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label::before {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled]:checked + label::after {
-  background: #7891a4;
-  border-color: #7891a4;
+  background: rgb(120, 145, 164);
+  border-color: rgb(120, 145, 164);
 }

package/lib/collection/components/duet-radio-group/duet-radio-group.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: block;
   width: 100%;
 }

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

@@ -233,7 +233,7 @@ export class DuetRadioGroup {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "tooltip": {

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

@@ -4,29 +4,29 @@
   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: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
   width: 100%;
   max-width: 100%;
-  text-align: left;
   vertical-align: bottom;
+  text-align: left;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
@@ -81,6 +81,17 @@
   background: rgb(181, 198, 208);
   border-radius: 4px;
 }
+.duet-range:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-range:focus {
+  outline: 2px solid;
+  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 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-theme-turva .duet-range {
   background: rgb(199, 202, 207);
 }
@@ -92,24 +103,18 @@
 }
 .duet-range::-moz-range-track {
   height: 1px;
+  -moz-appearance: none;
   background: transparent !important;
   border: 0;
-  -moz-appearance: none;
 }
 .duet-range::-ms-track {
   color: transparent;
   background: transparent;
   border: 0;
 }
-.duet-range:focus, .duet-range:active {
+.duet-range:active {
   outline: 0;
 }
-:host(.user-is-tabbing) .duet-range:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75);
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-range:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75);
-}
 .duet-range::-webkit-slider-runnable-track {
   background: transparent;
 }
@@ -117,12 +122,12 @@
   position: relative;
   width: 24px;
   height: 24px;
+  -webkit-appearance: none;
   cursor: -webkit-grab;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(127, 150, 165);
   border-radius: 50%;
   transition: box-shadow 300ms ease;
-  -webkit-appearance: none;
 }
 .duet-theme-turva .duet-range::-webkit-slider-thumb {
   border-color: rgb(143, 147, 158);
@@ -134,11 +139,11 @@
   position: relative;
   width: 24px;
   height: 24px;
+  appearance: none;
   cursor: -moz-grab;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(127, 150, 165);
   border-radius: 50%;
-  appearance: none;
 }
 .duet-theme-turva .duet-range::-moz-range-thumb {
   border-color: rgb(143, 147, 158);
@@ -214,43 +219,43 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-output {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-range-disabled.duet-theme-turva .duet-output {
-  color: #7891a4;
+  color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range {
-  background: #b2c2cd;
+  background: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range::-webkit-slider-thumb {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range::-moz-range-thumb {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-thumb {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled {
-  background: #b2c2cd !important;
+  background: rgb(178, 194, 205) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-webkit-slider-thumb {
-  background: #b2c2cd;
+  background: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-moz-range-thumb {
-  background: #b2c2cd;
+  background: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-ms-thumb {
-  background: #b2c2cd;
+  background: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-fill-lower {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-fill-upper {
-  background: #b2c2cd;
+  background: rgb(178, 194, 205);
 }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.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: inline-block;
   margin: 0 auto;
 }
@@ -49,5 +49,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-range-step-counter {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }