@duetds/components 9.16.1 → 9.18.0

package/lib/collection/components/duet-scrollable/duet-scrollable.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;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -36,12 +36,12 @@
   flex-basis: 40px;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--occluded {
-  flex-basis: 0;
+  visibility: hidden;
   flex-shrink: 1;
+  flex-basis: 0;
   width: 0;
   padding: 10px 0;
   overflow: hidden;
-  visibility: hidden;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute {
   position: absolute;
@@ -69,8 +69,8 @@
   transition: transform 300ms ease;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button:active duet-icon {
-  transition: transform 300ms ease;
   transform: scale(0.8);
+  transition: transform 300ms ease;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--left {
   left: 0;
@@ -121,25 +121,25 @@
   overflow-x: auto;
   /* We don't want vertical scrolling */
   overflow-y: hidden;
+  scroll-behavior: smooth;
   /* We don't want internal inline elements to wrap */
   white-space: nowrap;
   scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
   /* Add margin at ends to make visual appearance better */
   scroll-margin: 0 20px;
-  /* Make an auto-hiding scroller for the 3 people using a IE */
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  /* For WebKit implementations, provide inertia scrolling */
-  -webkit-overflow-scrolling: touch;
   /* Remove the default scrollbar for WebKit implementations */
   -webkit-mask: linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);
-  -webkit-mask-size: 50% 100%, 50% 100%;
-  -webkit-mask-position: left, right;
-  -webkit-mask-repeat: no-repeat;
   mask: linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);
-  mask-size: 50% 100%, 50% 100%;
-  mask-position: left, right;
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-position: left, right;
+  mask-position: left, right;
+  -webkit-mask-size: 50% 100%, 50% 100%;
+  mask-size: 50% 100%, 50% 100%;
+  /* Make an auto-hiding scroller for the 3 people using a IE */
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  /* For WebKit implementations, provide inertia scrolling */
+  -webkit-overflow-scrolling: touch;
   /* For absolutely positioned buttons, we remove the fade overlay
      and adjust padding/margin to account for tab group's 2px wide border,
      to prevent overflow. */
@@ -203,16 +203,16 @@
 ::slotted(*) {
   flex-shrink: 0;
   margin-left: 0;
+  scroll-snap-align: center;
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transition: -webkit-transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-  scroll-snap-align: center;
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
-  border-color: #7891a4;
+  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 {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }

package/lib/collection/components/duet-section-layout/duet-section-layout.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;
   flex: 1 0 auto;
   width: 100%;

package/lib/collection/components/duet-select/duet-select.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: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -125,36 +125,42 @@ duet-tooltip,
   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;
   cursor: pointer;
-  border: 0;
   outline: none;
+  border: 0;
   opacity: 0;
 }
 .duet-theme-turva .duet-select-wrapper select {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 .duet-select-wrapper select:hover + .duet-select {
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
   border-color: rgb(127, 150, 165);
-  box-shadow: 0 0 0 1px #909599;
+}
+.duet-theme-turva .duet-select-wrapper select:hover + .duet-select, .duet-select-wrapper select:hover + .duet-select.duet-theme-turva, .duet-theme-turva2 .duet-select-wrapper select:hover + .duet-select, .duet-select-wrapper select:hover + .duet-select.duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-theme-turva .duet-select-wrapper select:hover + .duet-select {
   border-color: rgb(143, 147, 158);
-  box-shadow: 0 0 0 1px #747475;
 }
 .has-error .duet-select-wrapper select:hover + .duet-select {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-select-wrapper select:hover + .duet-select {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-select-wrapper select:focus + .duet-select {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
   border-color: rgb(0, 119, 179);
-  outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
+.duet-theme-turva .duet-select-wrapper select:focus + .duet-select, .duet-select-wrapper select:focus + .duet-select.duet-theme-turva, .duet-theme-turva2 .duet-select-wrapper select:focus + .duet-select, .duet-select-wrapper select:focus + .duet-select.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-theme-turva .duet-select-wrapper select:focus + .duet-select {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .duet-theme-turva .duet-select-wrapper select:focus + .duet-select .duet-select-icon {
   color: rgb(23, 28, 58);
@@ -163,10 +169,9 @@ duet-tooltip,
   color: rgb(0, 119, 179);
 }
 .has-error .duet-select-wrapper select:focus + .duet-select {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-select-wrapper select:focus + .duet-select {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-select-wrapper select[disabled] {
   cursor: default !important;
@@ -174,9 +179,9 @@ duet-tooltip,
 .duet-select-wrapper select[disabled] + .duet-select {
   color: rgb(8, 42, 77) !important;
   cursor: default !important;
+  outline: none !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
-  box-shadow: none !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
@@ -206,6 +211,7 @@ duet-tooltip,
   padding: 12px 14px !important;
   padding-right: 48px !important;
   overflow: hidden;
+  text-overflow: ellipsis;
   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;
@@ -213,7 +219,6 @@ duet-tooltip,
   line-height: 1.5;
   color: rgb(8, 42, 77);
   text-align: left;
-  text-overflow: ellipsis;
   white-space: nowrap;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(127, 150, 165);
@@ -304,29 +309,29 @@ duet-tooltip,
   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-select-wrapper select:hover + .duet-select {
-  border-color: #7891a4;
+  border-color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select:focus + .duet-select {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select:focus + .duet-select .duet-select-icon {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select[disabled] + .duet-select {
-  color: #172a3b !important;
-  background: #f5f6f7 !important;
-  border-color: #f5f6f7 !important;
-  -webkit-text-fill-color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
+  background: rgb(245, 246, 247) !important;
+  border-color: rgb(245, 246, 247) !important;
+  -webkit-text-fill-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-select {
-  color: #172a3b;
-  border-color: #7891a4;
+  color: rgb(23, 42, 59);
+  border-color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-select svg {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

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

@@ -330,7 +330,7 @@ export class DuetSelect {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "accessibleLiveError": {

package/lib/collection/components/duet-shaped-image/duet-shaped-image.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;
   width: 100%;
   height: 100%;
@@ -62,11 +62,11 @@
 }
 
 :host(.duet-theme-turva) .shaped-image .shaped-image-mask {
-  transform: none;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  transform: none;
 }
 :host(.duet-theme-turva) .shaped-image .shaped-image-mask .shaped-image-img {
   transform: none;

package/lib/collection/components/duet-share-chart/duet-share-chart.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-share-chart-horizontal-bar {
@@ -78,5 +78,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-share-chart-item-list li.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-show-more/duet-show-more.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;
 }
 
@@ -41,17 +41,20 @@
   display: block;
 }
 .duet-show-more .content: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-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva, .duet-theme-turva2 .duet-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-show-more.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-show-more.duet-theme-turva .content:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 
 :host(.duet-theme-turva2) .duet-show-more.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -96,7 +96,7 @@ export class DuetShowMore {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: 'aa3781bcb009ab2f72dce109180c32c29e5a86d5', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '79305d6a5745287d4baeda24e227cd0ee2e6cd28', class: { "slotted-content": true } }, h("slot", { key: 'b75e7fbce1ab1e8e1680bc88cca241d0a8503375' }))), h("duet-button", { key: '103cd44aef5b443ed759a845f684db2e9881b67c', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'c185219d1cbab88f4efb3e254dc3130c432f83f6' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '6afaf121c58138f90038b80120d2078f26c03b0f', ref: ref => (this.contentElement = ref), class: { content: true, "duet-theme-turva": this.theme === "turva" }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'dae368a22e7ccf39355af66f099c03affeb903a8', class: { "slotted-content": true } }, h("slot", { key: '0a343674cab958718bf41cf81fa7f50377ef88a2' }))), h("duet-button", { key: 'b099b8982f27b745619611d11b5d1fad9122c97f', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '3e653ae12786956661bcf4be192514d56ff9fcf3' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,30 +4,30 @@
   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: absolute;
   height: 100%;
 }
 
 ::slotted(*) {
   position: relative;
-  width: 100%;
   visibility: hidden;
+  width: 100%;
   opacity: 0;
   transition: opacity 300ms ease;
   transition-delay: 300ms;
@@ -103,8 +103,14 @@
   cursor: pointer;
 }
 .duet-slideout .dialog .top button: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-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva, .duet-theme-turva2 .duet-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
@@ -135,8 +141,8 @@
 }
 .duet-slideout .dialog.hidden {
   bottom: 100vh;
-  pointer-events: none;
   visibility: hidden;
+  pointer-events: none;
   transition: 300ms ease;
 }
 .duet-slideout .dialog.hidden .items {
@@ -156,9 +162,6 @@
   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-slideout.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-slideout.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }
@@ -172,9 +175,6 @@
   background: rgb(245, 247, 250);
   border-bottom: 1px solid rgb(222, 224, 228);
 }
-.duet-slideout.duet-theme-turva .dialog .top button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 
 slot {
   color: rgb(8, 42, 77);
@@ -184,29 +184,29 @@ slot {
 }
 
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg {
-    background: #172a3b;
+    background: rgb(23, 42, 59);
   }
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
-  background: #fdf7f2;
-  border-bottom-color: #fbe1d1;
+  background: rgb(253, 247, 242);
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) slot {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

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

@@ -264,12 +264,13 @@ export class DuetSlideout {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '2bcc71858b33eb7031d874753e5b56ae08d27232', moveFocusTo: this.closeButton }), h("div", { key: 'e93b3e3e696fed7a15af0b629cdc75d4e6c6a42e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '3264075d1c8a40dd86f3fd0e54f6c0c3fd14042a', class: "top" }, h("button", { key: '65e408749cc6f7ee8c01d1d261cc610df794f3fc', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '2bcc71858b33eb7031d874753e5b56ae08d27232', moveFocusTo: this.closeButton }), h("div", { key: 'e93b3e3e696fed7a15af0b629cdc75d4e6c6a42e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '3264075d1c8a40dd86f3fd0e54f6c0c3fd14042a', class: "top" }, h("button", { key: 'a3f4bdaa53dc0db03844bb7eb22ebf24bf13ca97', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '0e81890e31a7c1935f81687260391f8a4efee1dc', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'a337d39c4c83b1f55addb400087a26a359f46167', class: "sticky-header" }, h("slot", { key: '4a06486e639fac6b9fa5844e8b4bb0ad30ebe50a', name: "sticky-header" }))), h("div", { key: '3f809bf568d2364e7aaf4ffe4974a7a221b8fbb5', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '20b4c13d074068a108d641d35774379c8a0e09c0', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e1b6159ff375a7e954c2a08c7b83012bd0584efd', class: "sticky-header" }, h("slot", { key: '8da80f3f654ad32fc3dbd60f973cfc67a3f05395', name: "sticky-header" }))), h("div", { key: '9b937ee229143cbed731694b1fdaee6f3d901569', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '61358e482b8f13d7facf58c55618bd6c45e044f9' })), h(FocusGuard, { key: 'bb6241de5b1dd23f17300cb51361bb10b4e6bfc6', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '1c039519309719e4a4b71d13355c719af6755a77' })), h(FocusGuard, { key: 'bd10152d30a0ae84320b6dda7cf18833abf1f1dc', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.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-slideout-lang {
@@ -55,5 +55,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva ::slotted(:not(:last-child))::after {
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }