@duetds/components 4.32.0 → 4.34.0

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

@@ -1,13 +1,20 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
-import { watchForOptions } from "../../utils/watch-options";
+import { media_query_large, media_query_medium, media_query_small } from "@duetds/tokens/lib/tokens.json";
+import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import { watchForElement, watchForOptions } from "../../utils/watch-options";
 function isGridItem(element) {
   return element.tagName.toLowerCase() === "duet-grid-item";
 }
 export class DuetGrid {
   constructor() {
+    this.mql = [
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+      window.matchMedia(media_query_medium.replace(/'/g, "")),
+      window.matchMedia(media_query_small.replace(/'/g, "")),
+    ];
+    this.distributeFormElement = false;
     /**
      * Enable or disable the automatic responsive behaviour of the grid component.
      * Setting this option to "true" makes sure that contents are stacked vertically
@@ -24,7 +31,9 @@ export class DuetGrid {
      */
     this.direction = "horizontal";
     /**
-     * Adjusts the vertical alignment of the grid items.
+     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+     * so that they align even when displaying errors.
      */
     this.alignment = "top";
     /**
@@ -36,14 +45,39 @@ export class DuetGrid {
      */
     this.mobile = "";
   }
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  outerHeight(element) {
+    const height = element.offsetHeight, style = window.getComputedStyle(element);
+    return ["top", "bottom"]
+      .map(side => parseInt(style[`margin-${side}`]))
+      .reduce((total, side) => total + side, height);
+  }
   /**
    * Component lifecycle events.
    */
   async connectedCallback() {
     const el = this.element;
+    this.distributeFormElement = this.alignment === "form_distribute";
     this.mutationO = watchForOptions(el, "duet-grid-item", () => {
       this.updateGridItems();
     });
+    // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
+    if (this.distributeFormElement) {
+      this.mutation1 = watchForElement(el, "duet-input", () => {
+        this.updateGridItemsWithInputFields();
+      });
+      // listen for potential mediaquery changes and reset layout
+      for (let i = 0; i < this.mql.length; i++) {
+        this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+      }
+    }
     this.updateGridItems();
   }
   disconnectedCallback() {
@@ -51,6 +85,14 @@ export class DuetGrid {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
+    if (this.mutation1) {
+      this.mutation1.disconnect();
+      this.mutation1 = undefined;
+    }
+    // listen for potential mediaquery changes and reset layout
+    for (let i = 0; i < this.mql.length; i++) {
+      this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+    }
   }
   /**
    * Local methods
@@ -62,6 +104,29 @@ export class DuetGrid {
       item.breakpoint = this.breakpoint;
     });
   }
+  async updateGridItemsWithInputFields() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    // if layout changes to columns instead of row, remove all padding
+    const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
+    let maxHeight = 0;
+    const sizes = [];
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      sizes.push(height);
+    });
+    maxHeight = Math.max(...sizes);
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      if (height < maxHeight && !hasColumnLayout) {
+        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
+      }
+      else if (height === maxHeight || hasColumnLayout) {
+        item.setAttribute("style", `padding-bottom: 0px;`);
+      }
+    });
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -71,7 +136,7 @@ export class DuetGrid {
         "duet-grid": true,
         "duet-no-stacking": !this.responsive,
         "duet-grid-align-top": this.alignment === "top",
-        "duet-grid-align-bottom": this.alignment === "bottom",
+        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
         "duet-grid-align-center": this.alignment === "center",
         "duet-grid-align-stretch": this.alignment === "stretch",
         "duet-grid-align-baseline": this.alignment === "baseline",
@@ -169,7 +234,7 @@ export class DuetGrid {
       "mutable": false,
       "complexType": {
         "original": "DuetGridAlignment",
-        "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"stretch\" | \"top\"",
+        "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"form_distribute\" | \"stretch\" | \"top\"",
         "references": {
           "DuetGridAlignment": {
             "location": "local"
@@ -180,7 +245,7 @@ export class DuetGrid {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Adjusts the vertical alignment of the grid items."
+        "text": "Adjusts the vertical alignment of the grid items, if set to \"form_distribute\"\nthe grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,\nso that they align even when displaying errors."
       },
       "attribute": "alignment",
       "reflect": false,
@@ -231,6 +296,9 @@ export class DuetGrid {
       "defaultValue": "\"\""
     }
   }; }
+  static get states() { return {
+    "distributeFormElement": {}
+  }; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "responsive",

package/lib/collection/components/duet-header/duet-header-dropdown.js

@@ -0,0 +1,27 @@
+/*!
+ * Built with Duet Design System
+ */
+import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
+import { h } from "@stencil/core";
+import { DuetHeaderIcon } from "./duet-header-icon";
+export const DuetHeaderDropdown = (props, _children) => {
+  const accessibleLabel = props.accessibleText ? props.accessibleText : props.label;
+  return (h("div", { class: { ["duet-header-dropdown"]: true, [props.className]: !!props.className } },
+    h("button", { ref: props.toggleRef, "aria-haspopup": "listbox", "aria-controls": props.id, "aria-expanded": props.isOpen ? "true" : "false", "aria-labelledby": `${props.id}-accessible-label`, id: `${props.id}-button`, type: "button", class: {
+        [props.id]: true,
+        "duet-header-dropdown-toggle": true,
+        "duet-header-button": true,
+        active: props.active,
+      }, onClick: props.onToggle },
+      props.icon && h(DuetHeaderIcon, { icon: props.icon }),
+      h("span", { "aria-hidden": "true", id: `${props.id}-label`, class: "duet-header-dropdown-label" }, props.label),
+      props.badge && h("div", { class: "duet-header-badge" }),
+      h("div", { class: "duet-header-caret", "aria-hidden": "true" },
+        h("duet-icon", { margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" })),
+      h("duet-visually-hidden", { id: `${props.id}-accessible-label` }, accessibleLabel)),
+    h("div", { ref: props.itemsRef, tabindex: "-1", role: "menu", id: props.id, "aria-labelledby": `${props.id}-button`, class: {
+        "duet-header-dropdown-content": true,
+        [`${props.id}-items`]: true,
+        active: props.isOpen,
+      } }, _children)));
+};

package/lib/collection/components/duet-header/duet-header-hamburger.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const DuetHeaderHamburger = () => (h("div", { class: "duet-header-hamburger" },
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" })));

package/lib/collection/components/duet-header/duet-header-icon.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const DuetHeaderIcon = (props, _children) => {
+  const iconSize = props.iconSize ? props.iconSize : "x-small";
+  return (h("span", { class: "duet-header-icon" },
+    h("duet-icon", { margin: "none", size: iconSize, icon: props.icon, color: "currentColor" })));
+};

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

@@ -38,6 +38,17 @@
   }
 }
 
+@supports (position: -webkit-sticky) {
+  :host(.duet-header-multi-level-desktop-variation) {
+    top: 0;
+  }
+}
+@supports (position: sticky) {
+  :host(.duet-header-multi-level-desktop-variation) {
+    top: 0;
+  }
+}
+
 .duet-header-reserved-space {
   height: 4rem;
 }
@@ -161,7 +172,7 @@
   width: 100%;
   overflow-y: auto;
   visibility: hidden;
-  background: #f5f8fa;
+  background: #f3f9fc;
   opacity: 0;
   -webkit-overflow-scrolling: touch;
 }
@@ -242,50 +253,70 @@
     padding-left: 43.6363636364px;
   }
 }
-.duet-header-items a {
+.duet-header-items .duet-header-item-container {
+  border-bottom: 1px solid #e1e3e6;
+  border-radius: 0;
+}
+@media (min-width: 62em) {
+  .duet-header-items .duet-header-item-container {
+    border: 0;
+  }
+}
+.duet-header-items .duet-header-second-level .duet-header-item {
+  padding: 0 40px;
+  border: 0;
+}
+.duet-header-items .duet-header-second-level .duet-header-button {
+  border: 0;
+}
+.duet-header-items .duet-header-second-level .duet-header-dropdown-content {
+  padding: 0;
+  border: 0;
+}
+.duet-header-items .duet-header-third-level .duet-header-item {
+  padding: 0 75px;
+}
+.duet-header-items .duet-header-item {
   position: relative;
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
-  height: 48px;
   padding: 0 20px;
   overflow: hidden;
   font-size: 1rem;
-  font-weight: 600;
   line-height: 48px;
   color: #00294d;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-bottom: 1px solid #e1e3e6;
-  border-radius: 0;
 }
 @media (min-width: 62em) {
-  .duet-header-items a {
+  .duet-header-items .duet-header-item {
     border-radius: 4px;
   }
 }
-.duet-theme-turva .duet-header-items a {
+.duet-theme-turva .duet-header-items .duet-header-item {
   font-weight: 600;
   color: #171c3a;
   border-color: #e1e3e6;
 }
-.duet-header-items a:hover {
+.duet-header-items .duet-header-item:hover {
   color: #004d80;
 }
-.duet-theme-turva .duet-header-items a:hover {
+.duet-theme-turva .duet-header-items .duet-header-item:hover {
   color: #444445;
 }
-.duet-header-items a:focus {
+.duet-header-items .duet-header-item:focus {
   outline: 0;
 }
-:host(.user-is-tabbing) .duet-header-items a:focus {
+:host(.user-is-tabbing) .duet-header-items .duet-header-item:focus {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-header-items a:focus {
+:host(.user-is-tabbing) .duet-theme-turva .duet-header-items .duet-header-item:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 @media (min-width: 62em) {
-  .duet-header-items a {
+  .duet-header-items .duet-header-item {
     width: auto;
     max-width: 300px;
     padding: 0 12px;
@@ -295,21 +326,21 @@
     border: 0;
   }
 }
-.duet-header-items a.active {
+.duet-header-items .duet-header-item.active {
   color: #0077b3;
   -moz-osx-font-smoothing: auto;
   -webkit-font-smoothing: subpixel-antialiased;
 }
-.duet-theme-turva .duet-header-items a.active {
+.duet-theme-turva .duet-header-items .duet-header-item.active {
   color: #c60c30;
 }
-.duet-header-items a.active:hover {
+.duet-header-items .duet-header-item.active:hover {
   color: #0077b3;
 }
-.duet-theme-turva .duet-header-items a.active:hover {
+.duet-theme-turva .duet-header-items .duet-header-item.active:hover {
   color: #c60c30;
 }
-.duet-header-items a.active::after {
+.duet-header-items .duet-header-item.active::after {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -318,17 +349,26 @@
   content: "";
   background: #0077b3;
 }
-.duet-theme-turva .duet-header-items a.active::after {
+.duet-theme-turva .duet-header-items .duet-header-item.active::after {
   background: #c60c30;
 }
 @media (min-width: 62em) {
-  .duet-header-items a.active::after {
+  .duet-header-items .duet-header-item.active::after {
     top: auto;
     left: 12px;
     width: calc(100% - 24px);
     height: 3px;
   }
 }
+.duet-header-third-level-active .duet-header-items .duet-header-first-level.active {
+  color: #00294d;
+}
+.duet-header-third-level-active .duet-header-items .duet-header-first-level.active::after {
+  display: none;
+}
+.duet-header-third-level-active .duet-header-items .duet-header-second-level button {
+  color: #00294d;
+}
 
 .duet-header-toggle {
   display: flex;
@@ -547,6 +587,36 @@ button {
 .duet-theme-turva .duet-header-button.active::after {
   color: #c60c30;
 }
+.duet-header-utils .duet-header-button.duet-header-logout {
+  align-self: center;
+  justify-content: center;
+  width: auto;
+  height: 2.5rem;
+  margin: 2.25rem 0;
+  font-weight: 600;
+  border: 2px solid #00294d;
+  border-radius: 20rem;
+}
+.duet-theme-turva .duet-header-utils .duet-header-button.duet-header-logout {
+  border-color: #171c3a;
+}
+.duet-header-utils .duet-header-button.duet-header-logout .duet-header-icon {
+  margin-right: 0.5rem;
+}
+.duet-header-utils .duet-header-button.duet-header-logout .duet-header-button-label {
+  font-size: 0.875rem;
+}
+@media (min-width: 62em) {
+  .duet-header-utils .duet-header-button.duet-header-logout {
+    height: 4rem;
+    margin: 0;
+    font-weight: 400;
+    border: 0;
+  }
+  .duet-header-utils .duet-header-button.duet-header-logout .duet-header-icon {
+    margin-right: 0.75rem;
+  }
+}
 
 .duet-header-no-action {
   pointer-events: none;
@@ -635,7 +705,7 @@ button {
   display: inline-block;
   width: 6px;
   height: 6px;
-  margin-top: 16px;
+  margin-top: -1rem;
   margin-left: 5px;
   vertical-align: top;
   background: #f7b228;
@@ -703,7 +773,7 @@ button {
 .duet-header-dropdown .duet-header-dropdown-content {
   display: none;
   padding-bottom: 16px;
-  background: #f5f8fa;
+  background: #f3f9fc;
   border-bottom: 1px solid #e1e3e6;
 }
 .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content {
@@ -717,7 +787,7 @@ button {
     left: 0;
     z-index: 600;
     display: block;
-    min-width: 170px;
+    min-width: 150px;
     padding-top: 16px;
     padding-left: 0;
     visibility: hidden;
@@ -731,6 +801,11 @@ button {
     transform: scale(0.85) translateZ(0) translateY(-20px);
   }
 }
+@media (min-width: 64.0625em) {
+  .duet-header-dropdown .duet-header-dropdown-content {
+    min-width: 170px;
+  }
+}
 .duet-header-dropdown .duet-header-dropdown-content.active {
   display: block;
 }
@@ -741,7 +816,7 @@ button {
     transform: translateZ(0) translateY(0);
   }
 }
-.duet-header-dropdown .duet-header-dropdown-content a {
+.duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item) {
   padding: 3px 8px 4px !important;
   position: relative;
   display: block;
@@ -759,46 +834,47 @@ button {
   cursor: pointer;
   transition: 300ms ease;
 }
-.duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a {
+.duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item) {
   color: #171c3a;
 }
 @media (min-width: 62em) {
-  .duet-header-dropdown .duet-header-dropdown-content a {
+  .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item) {
+    padding-right: 20px !important;
     padding-left: 20px !important;
   }
 }
 @media (min-width: 62em) {
-  .duet-header-dropdown .duet-header-dropdown-content a:hover {
+  .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):hover {
     background: #e6f2f8;
   }
-  .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:hover {
+  .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):hover {
     background: #f9e6ea;
   }
 }
-.duet-header-dropdown .duet-header-dropdown-content a:focus {
+.duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus {
   outline: 0;
 }
-:host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:focus {
+:host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:focus {
+:host(.user-is-tabbing) .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
-.duet-header-dropdown .duet-header-dropdown-content a.active {
+.duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
   padding-right: 36px;
   font-weight: 600;
   vertical-align: baseline;
   pointer-events: none;
 }
-.duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a.active {
+.duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
   font-weight: 700;
 }
 @media (min-width: 62em) {
-  .duet-header-dropdown .duet-header-dropdown-content a.active {
+  .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
     color: white;
     background: #0077b3;
   }
-  .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a.active {
+  .duet-theme-turva .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item).active {
     background: #c60c30;
   }
 }
@@ -830,13 +906,13 @@ button {
 }
 
 .duet-header-skip {
-  padding: 8px 16px 9px !important;
+  padding: 15px 28px 16px !important;
   position: absolute;
   top: -100%;
   left: -100%;
   z-index: 200;
   width: 1px;
-  min-width: 160px;
+  min-width: 190px;
   height: 1px;
   overflow: hidden;
   font-weight: 600;
@@ -870,4 +946,161 @@ button {
   height: auto;
   outline: 0;
   opacity: 1;
+}
+
+.duet-header-multi-level-desktop {
+  height: 6rem;
+}
+.duet-header-multi-level-desktop .duet-header-top {
+  justify-content: space-between;
+  height: 6rem;
+}
+.duet-header-multi-level-desktop .duet-header-button {
+  height: 6rem;
+}
+.duet-header-multi-level-desktop .logo-and-segment {
+  display: flex;
+  flex-basis: 0;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-top: 1rem;
+}
+.duet-header-multi-level-desktop .logo-and-segment .duet-header-dropdown {
+  z-index: 400;
+  margin-left: 2rem;
+}
+.duet-header-multi-level-desktop .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+  background: #f3f9fc;
+}
+.duet-header-multi-level-desktop .logo-and-segment button {
+  align-items: flex-start;
+  height: 2rem;
+  font-weight: 600;
+  line-height: 1rem;
+}
+.duet-header-multi-level-desktop .logo-and-segment button::before {
+  display: none;
+}
+.duet-header-multi-level-desktop .logo-and-segment .duet-header-caret {
+  top: 25%;
+}
+.duet-header-multi-level-desktop-nav {
+  display: flex;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown {
+  position: static;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle {
+  z-index: 400;
+  padding-right: 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
+  color: #0077b3;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content {
+  z-index: 399;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 4.5rem;
+  padding: 0;
+  background: #f3f9fc;
+  border-top: 1px solid #e1e3e6;
+  border-bottom: 1px solid #e1e3e6;
+  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
+  transition: none;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-width: 6rem;
+  height: 100%;
+  padding: 0 1rem !important;
+  font-weight: 600;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  display: block !important;
+  width: 100%;
+  height: 3px;
+  content: "";
+  background: #0077b3;
+  transition: 300ms ease;
+  transform: translateY(3px);
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
+  font-weight: 600;
+  color: #0077b3;
+  background: none;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active::after {
+  transform: translateY(0);
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a .duet-header-icon {
+  margin: 0;
+}
+.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content .duet-header-badge {
+  position: absolute;
+  margin-top: -2rem;
+  margin-right: -2.25rem;
+}
+.duet-header-multi-level-desktop-nav button::before {
+  display: none;
+}
+.duet-header-multi-level-desktop-nav .duet-header-caret {
+  display: none;
+}
+.duet-header-multi-level-desktop-utils {
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+.duet-header-multi-level-desktop-utils > :last-child::before {
+  display: none;
+}
+.duet-header-multi-level-desktop-utils .duet-header-dropdown {
+  z-index: 400;
+}
+.duet-header-multi-level-desktop-utils .duet-header-dropdown .duet-header-dropdown-content {
+  background: #f3f9fc;
+}
+.duet-header-multi-level-desktop-utils .duet-header-button-label,
+.duet-header-multi-level-desktop-utils .duet-header-dropdown-label {
+  display: none;
+}
+@media (min-width: 64.0625em) {
+  .duet-header-multi-level-desktop-utils .duet-header-button-label,
+.duet-header-multi-level-desktop-utils .duet-header-dropdown-label {
+    display: initial;
+  }
+}
+.duet-header-multi-level-desktop .duet-theme-turva .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+  background: #fcf3f4;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
+  color: #c60c30;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content {
+  background: #fcf3f4;
+  border-color: #e4e4e6;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
+  background: #c60c30;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
+  color: #c60c30;
+  background: none;
+}
+.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-utils .duet-header-dropdown .duet-header-dropdown-content {
+  background: #fcf3f4;
 }