@duetds/components 8.1.4 → 8.1.5

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

@@ -3,7 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
-import { inheritGlobalTheme } from "../../common";
+import { hasSlot, inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
@@ -14,6 +14,7 @@ import { Teleport } from "../../utils/teleport";
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
 const TRANSITION_MS = 600;
 /**
+ * @slot sticky-header - Content will be fixed to the top of the modal when scrolling, typically used with slide-up variation for e.g. a search input
  * @slot top - This is a slot that takes any content and will be displayed as the first thing in the hero area (typically an image)
  */
 export class DuetModal {
@@ -24,6 +25,7 @@ export class DuetModal {
          */
         this.modalId = createID("DuetModal");
         this.slotDefaultId = createID("DuetModal-default-slot");
+        this.hasStickyHeader = false;
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
         this.handleAndroidResizeEvents = () => {
@@ -54,6 +56,7 @@ export class DuetModal {
         this.accessibleLabel = undefined;
         this.accessibleDetails = undefined;
         this.accessibleDescription = undefined;
+        this.variation = "default";
         this.gutterSize = "medium";
         this.theme = "";
         this.heading = "";
@@ -105,6 +108,7 @@ export class DuetModal {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        this.hasStickyHeader = hasSlot(this.element, "sticky-header");
         inheritGlobalTheme(this);
     }
     componentDidLoad() {
@@ -172,6 +176,7 @@ export class DuetModal {
         var _a;
         let iconColor = "primary";
         let closeColor = "secondary";
+        const closingButton = (h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
         if (this.theme === "turva") {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
@@ -180,9 +185,12 @@ export class DuetModal {
                 "duet-modal-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
+                "duet-modal-slide-up": this.variation === "slide-up",
+                "duet-modal-has-sticky-header": this.hasStickyHeader,
             } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
-                "duet-modal-large": this.size === "large",
+                [this.size]: true,
+                "duet-modal-slide-up": this.variation === "slide-up",
             }, onClick: e => {
                 if (this.closeOnBlur) {
                     const source = e.target || e.srcElement;
@@ -190,7 +198,12 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { class: { "duet-modal": true, [this.size]: true } }, this.gutterSize !== "none" && h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
+            } }, h("div", { class: {
+                "duet-modal": true,
+                "duet-modal-has-sticky-header": this.hasStickyHeader,
+                [this.size]: true,
+                [this.variation]: true,
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", null), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
@@ -401,6 +414,30 @@ export class DuetModal {
                 "reflect": false,
                 "defaultValue": "undefined"
             },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetModalVariation",
+                    "resolved": "\"default\" | \"slide-up\"",
+                    "references": {
+                        "DuetModalVariation": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "id": "src/components/duet-modal/duet-modal.tsx::DuetModalVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variation of the modal window."
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
             "gutterSize": {
                 "type": "string",
                 "mutable": false,

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

@@ -148,6 +148,8 @@ export class DuetMultiselect {
         this.items = undefined;
         this.disabled = false;
         this.label = "label";
+        this.labelColor = undefined;
+        this.labelWeight = undefined;
         this.accessibleDescribedBy = undefined;
         this.tooltip = "";
         this.tooltipDirection = "auto";
@@ -201,7 +203,7 @@ export class DuetMultiselect {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", null, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", null, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
             }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems && this.allControls && (h("div", { class: "duet-multiselect-all-control-buttons" }, h("button", { class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
@@ -496,6 +498,46 @@ export class DuetMultiselect {
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
+            "labelColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the label."
+                },
+                "attribute": "label-color",
+                "reflect": false
+            },
+            "labelWeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTextFontWeight",
+                    "resolved": "\"normal\" | \"semi-bold\"",
+                    "references": {
+                        "DuetTextFontWeight": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTextFontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font weight of the label."
+                },
+                "attribute": "label-weight",
+                "reflect": false
+            },
             "accessibleDescribedBy": {
                 "type": "string",
                 "mutable": false,

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

@@ -50,6 +50,10 @@
 .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-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 {
   background: rgb(243, 249, 252);
 }

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

@@ -64,6 +64,8 @@ export class DuetRangeSlider {
         this.accessibleDescribedBy = undefined;
         this.min = 0;
         this.label = "label";
+        this.labelColor = undefined;
+        this.labelWeight = undefined;
         this.labelHidden = false;
         this.unit = "";
         this.max = 100;
@@ -118,7 +120,7 @@ export class DuetRangeSlider {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-ie": isInternetExplorer(),
                 "duet-range-disabled": this.disabled,
-            } }, h("duet-label", { theme: theme, margin: "small", for: identifier }, this.label), h("output", { "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
+            } }, h("duet-label", { theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
     }
     static get is() { return "duet-range-slider"; }
     static get encapsulation() { return "scoped"; }
@@ -374,6 +376,46 @@ export class DuetRangeSlider {
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
+            "labelColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the label."
+                },
+                "attribute": "label-color",
+                "reflect": false
+            },
+            "labelWeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTextFontWeight",
+                    "resolved": "\"normal\" | \"semi-bold\"",
+                    "references": {
+                        "DuetTextFontWeight": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTextFontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font weight of the label."
+                },
+                "attribute": "label-weight",
+                "reflect": false
+            },
             "labelHidden": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -91,6 +91,8 @@ export class DuetSelect {
         this.disabled = false;
         this.required = false;
         this.label = "label";
+        this.labelColor = undefined;
+        this.labelWeight = undefined;
         this.role = undefined;
         this.tooltip = "";
         this.tooltipDirection = "auto";
@@ -157,7 +159,7 @@ export class DuetSelect {
                 [`duet-select-variation-${this.variation}`]: true,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
         }))), h("div", { class: {
                 "duet-select": true,
@@ -571,6 +573,46 @@ export class DuetSelect {
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
+            "labelColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the label."
+                },
+                "attribute": "label-color",
+                "reflect": false
+            },
+            "labelWeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTextFontWeight",
+                    "resolved": "\"normal\" | \"semi-bold\"",
+                    "references": {
+                        "DuetTextFontWeight": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTextFontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font weight of the label."
+                },
+                "attribute": "label-weight",
+                "reflect": false
+            },
             "role": {
                 "type": "string",
                 "mutable": false,

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

@@ -44,6 +44,15 @@
   display: flex;
   align-items: center;
   height: 100%;
+  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;
+  line-height: 1.5;
+  color: rgb(0, 41, 77);
+}
+.duet-slideout.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-slideout .desktop-bg {
   display: none;
@@ -95,6 +104,17 @@
     transition-delay: 0s;
   }
 }
+.duet-slideout .dialog .top-container.has-sticky-header-slot {
+  position: sticky;
+  top: 0;
+  z-index: 200;
+}
+.duet-slideout .dialog .top-container.has-sticky-header-slot .top {
+  background: rgb(243, 249, 252);
+}
+.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header {
+  display: block;
+}
 .duet-slideout .dialog .top {
   position: relative;
   z-index: 1;
@@ -113,6 +133,14 @@
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
 }
+.duet-slideout .dialog .sticky-header {
+  display: none;
+  width: 100%;
+  padding: 0 1.5rem;
+  margin-bottom: 20px;
+  background: rgb(243, 249, 252);
+  border-bottom: 1px solid rgb(225, 227, 230);
+}
 .duet-slideout .dialog .items {
   display: flex;
   flex-direction: column;
@@ -147,6 +175,13 @@
 .duet-slideout.duet-theme-turva button.active::after {
   background: rgb(198, 12, 48);
 }
+.duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
+  background: rgb(245, 245, 247);
+}
+.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
+  background: rgb(245, 245, 247);
+  border-bottom: 1px solid rgb(228, 228, 230);
+}
 .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;
 }