@duetds/components 8.1.3 → 8.1.5

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

@@ -49,6 +49,9 @@
 .duet-modal-overlay.duet-disable-transitions {
   transition: none;
 }
+.duet-modal-overlay.duet-modal-slide-up {
+  overflow: hidden;
+}
 
 ::slotted(img) {
   width: 100%;
@@ -66,11 +69,47 @@
     padding: 48px 16px;
   }
 }
+.duet-modal-inner.duet-modal-slide-up {
+  align-items: stretch;
+  justify-content: center;
+  height: 100%;
+  padding-top: 48px;
+  padding-bottom: 0;
+  overflow: hidden;
+}
+.duet-modal-inner.duet-modal-slide-up::after {
+  position: absolute;
+  bottom: 0;
+  z-index: 300;
+  display: block;
+  width: 100%;
+  max-width: 686px;
+  height: 48px;
+  margin: auto;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
+}
+.duet-modal-inner.duet-modal-slide-up::after.small {
+  max-width: 545px;
+}
+.duet-modal-inner.duet-modal-slide-up::after.large {
+  max-width: 100%;
+}
+@media (min-width: 36em) {
+  .duet-modal-inner.duet-modal-slide-up::after.large {
+    max-width: 1110px;
+  }
+}
 @media (max-width: 35.9375em) {
-  .duet-modal-inner.duet-modal-large {
+  .duet-modal-inner.large {
     padding-right: 0;
     padding-left: 0;
   }
+  .duet-modal-inner.duet-modal-slide-up {
+    padding: 0;
+    padding-top: 28px;
+  }
 }
 
 .duet-modal {
@@ -100,6 +139,10 @@
   transition-delay: 200ms;
   transform: none;
 }
+.duet-modal-active .duet-modal.slide-up {
+  top: 0;
+  transition: top 600ms ease;
+}
 .duet-disable-transitions .duet-modal {
   transition: none;
 }
@@ -114,63 +157,94 @@
     max-width: 1110px;
   }
 }
+.duet-modal.slide-up {
+  top: 100vh;
+  margin: 0;
+  border-radius: 4px 4px 0 0;
+  opacity: 1;
+  transition: top 600ms ease;
+}
+@media (max-width: 35.9375em) {
+  .duet-modal.slide-up {
+    border-radius: 20px 20px 0 0;
+  }
+}
+.duet-modal.duet-modal-has-sticky-header {
+  height: 100%;
+  overflow: auto;
+}
 .duet-modal:focus {
   outline: 0;
 }
 
-.duet-modal-body {
+.duet-modal-body,
+.duet-modal-sticky-header {
   width: 100%;
   padding: 36px 28px;
 }
-.duet-modal-body.duet-modal-gutter-none {
+.duet-modal-body.duet-modal-gutter-none,
+.duet-modal-sticky-header.duet-modal-gutter-none {
   padding: 0 !important;
 }
-.duet-modal-body.duet-modal-gutter-small {
+.duet-modal-body.duet-modal-gutter-small,
+.duet-modal-sticky-header.duet-modal-gutter-small {
   padding: 36px 20px;
 }
-.duet-modal-body.duet-modal-gutter-large {
+.duet-modal-body.duet-modal-gutter-large,
+.duet-modal-sticky-header.duet-modal-gutter-large {
   padding: 48px 36px;
 }
 @media (max-width: 22.5em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px 20px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 48px 28px;
   }
 }
 @media (max-width: 35.9375em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px 20px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 48px 36px;
   }
 }
 @media (min-width: 36em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 28px 72px;
   }
 }
 @media (min-width: 48em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px 72px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 36px 72px;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px 48px 48px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 48px 94px;
   }
-  .small .duet-modal-body {
+  .small .duet-modal-body,
+  .small .duet-modal-sticky-header {
     padding: 36px 48px;
   }
 }
@@ -179,6 +253,21 @@
   text-align: center;
 }
 
+.duet-modal-sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  display: block;
+  padding-bottom: 12px;
+  text-align: left;
+  background: rgb(243, 249, 252);
+  border-bottom: 1px solid rgb(225, 227, 230);
+}
+.duet-theme-turva .duet-modal-sticky-header {
+  background: rgb(245, 245, 247);
+  border-bottom: 1px solid rgb(228, 228, 230);
+}
+
 .duet-modal-close {
   position: absolute;
   top: 12px;

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.css

@@ -165,10 +165,20 @@
   min-height: 24px;
 }
 .duet-multiselect .duet-multiselect-badge {
-  position: relative;
-  bottom: 2px;
-  height: 20px;
-  margin-left: 4px;
+  padding: 4px 8px 4px;
+  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: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: rgb(0, 41, 77);
+  background: #d9ebf4;
+  border-radius: 20rem;
+}
+.duet-theme-turva .duet-multiselect .duet-multiselect-badge {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: 700;
+  color: rgb(23, 28, 58);
+  background: #e8e8eb;
 }
 .duet-multiselect .duet-multiselect-icon {
   margin-left: 12px;

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("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", 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-popup-menu-item/duet-popup-menu-item.js

@@ -31,6 +31,7 @@ export class DuetPopupMenuItem {
         this.external = false;
         this.value = undefined;
         this.leadingIcon = undefined;
+        this.leadingIconColor = undefined;
         this.trailingIcon = undefined;
         this.trailingText = undefined;
         this.active = false;
@@ -60,7 +61,7 @@ export class DuetPopupMenuItem {
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
         };
-        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: -1, onFocus: this.onFocus, onBlur: this.onBlur, role: "menuitem", "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: -1, onFocus: this.onFocus, onBlur: this.onBlur, role: "menuitem", "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -194,6 +195,30 @@ export class DuetPopupMenuItem {
                 "reflect": false,
                 "defaultValue": "undefined"
             },
+            "leadingIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Left icon color."
+                },
+                "attribute": "leading-icon-color",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
             "trailingIcon": {
                 "type": "string",
                 "mutable": false,

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;
 }