@duetds/components 9.2.0 → 9.2.2

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.css

@@ -50,7 +50,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -125,7 +125,7 @@
   justify-content: center;
   min-width: 225px;
   padding: 8px;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
   border-radius: 8px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.js

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '159a72c1a2553cb3e60dc3dc0c65b26dbdb5f127', role: "listitem" }, h("div", { key: 'f785855ea709c8c72a24bb21358f0c1d88f64ea9', class: {
+        return (h(Host, { key: 'a98baab0fb21943f681bd83c2040bdb1f5d5e464', role: "listitem" }, h("div", { key: '79f52e00b692d398484940f70bd44de78ee5a2a7', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: '5bd18b653e56b118010f0d4666499248536c8191', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'fb48e17e2995b4f5e057583339d0fc0149b43375', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'ee1a6c98ef2fa2fd6cd8163bb0100679898343a1', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'c2580c2db45875b7aa575780a374d3f4e0d160bc', class: "label" }, h("slot", { key: 'ccb43b624e73ef5787ebd4be857b6c8062542ace', name: "label" }), h("duet-icon", { key: 'a22ff13f9b06f00a83bc8bdcba71e283b6d209b8', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'ef1d06be5ca34c8f4b08abca38c2a8cad73a462e', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '5a91dcf8a6a2e2289b9b63680233bfa6dc4e0529', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4ddf5b0d1fd321a4fa02a73122bd28f88f47f527', class: "label" }, h("slot", { key: 'd79067be6dacc22b8b9e9515d4bb019721b6a2c8', name: "label" }), h("duet-icon", { key: '24396bac267909220e577ed663f8d34468919858', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '514af91b0f0396842a5ede32137ff76a9e31bf40', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'd433708b350f67749fd32d1db41a0e0f24f2a664' })))));
+            } }, h("slot", { key: 'ecd8ef50dbbf9206540a5cb908a8b37e0e60f14a' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.css

@@ -36,7 +36,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: center;
   text-decoration: none;
 }
@@ -52,8 +52,8 @@
   color: rgb(23, 28, 58);
 }
 .duet-menu-bar-dropdown-link:hover {
-  background: rgb(230, 242, 248);
+  background: rgb(228, 241, 247);
 }
 .duet-menu-bar-dropdown-link:hover.duet-theme-turva {
-  background: rgb(228, 228, 230);
+  background: rgb(222, 224, 228);
 }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.js

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd465ea161313c153d8d4d829f94fc48567a9f16b' }, h("a", { key: '77aba96c14938f35bdc65b30a39a1c4798513b8c', class: {
+        return (h(Host, { key: 'dff3e65bfa27e226d174dbf7fdb57c067bcb24f2' }, h("a", { key: 'c90358c20ce27776461c970e68048427cc2503c8', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '760f86354100f4dc150606892788094ab5e393ab', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'd7e78f0c2a70ad6eb71c0929fe4254c48dbd0b2c' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '52930cb9d1151120fa0191844d65f06a8f5f6319', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '616f450950804fb9a72a010436eb1d7ec4ad02c2' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,6 @@
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
-  color: inherit;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
@@ -64,6 +63,10 @@
   width: 7px;
   height: 7px;
 }
+.duet-menu-bar-item .external-icon {
+  width: 10px;
+  height: 10px;
+}
 .duet-menu-bar-item[aria-expanded=true] {
   color: rgb(0, 119, 179);
 }

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.js

@@ -1,8 +1,12 @@
 /*!
  * Built with Duet Design System
  */
+import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { h, Host } from "@stencil/core";
+import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { getAccessibleLinkLabel } from "../../utils/a11y-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 export class DuetMenuBarItem {
     constructor() {
         this.theme = "";
@@ -13,6 +17,9 @@ export class DuetMenuBarItem {
         this.accessibleLabel = undefined;
         this.accessibleExpanded = undefined;
         this.accessiblePopup = "false";
+        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        this.external = false;
     }
     /**
      * Component lifecycle events.
@@ -20,6 +27,15 @@ export class DuetMenuBarItem {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, {
+            prop: "accessibleLabelExternal",
+            defaults: "accessibleLabelExternalDefaults",
+        });
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -32,15 +48,16 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: '61c0988644daa9a5cbd52db81fe2b158347d691c', role: "listitem" }, h(TagName, { key: 'dc943150a89fbd84b002cfc41e5158403aa24dc9', ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '46e23a090bd69731fad23bb7d815fe07949961f1', role: "listitem" }, h(TagName, { key: 'fd2f0cd2b271a5030924b17a318d91ef5f375b26', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: '575cc29397b227cbcf0299c53cb7f2aa5ab535b3', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '53dbb1f8f6348906f6cf5a58b3e4f9670b0294fa' }), this.trailingIcon && (h("duet-icon", { key: '7ee1c4e3032e1fe1f9a27a5b03cf4457a797534c', class: {
-                "trailing-icon": true,
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'c5f65e90e67f40726dbd1ad1fcecc275b792fcea', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'b9846826ebc0c12f36548a00d1e4156507136f91' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '4d20597bf6e7a17b841c08f429ca64820a01198a', class: {
+                "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
+                "external-icon": !!this.external,
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: "auto", color: "currentColor" })))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" })))));
     }
     static get is() { return "duet-menu-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -214,6 +231,72 @@ export class DuetMenuBarItem {
                 "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
+            },
+            "accessibleLabelExternalDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Defaults for accessibleLabelExternal"
+                },
+                "attribute": "accessible-label-external-default",
+                "reflect": false,
+                "defaultValue": "DuetStringsExternalDefaults"
+            },
+            "accessibleLabelExternal": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+                },
+                "attribute": "accessible-label-external",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
+            },
+            "external": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forces URL to open in a new browser tab. Used together with URL prop."
+                },
+                "attribute": "external",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'fcc0c89c9c6e809e8b2bb0a264146d81e8c93c6e', role: "listitem" }, h("a", { key: '1d290fada8ee026de4e189c9f937a2aca26467c8', class: {
+        return (h(Host, { key: 'efb7d0aed76d4f7da05e21e41d92c63465308df6', role: "listitem" }, h("a", { key: 'ed248ea08e7b2be2dafa2617b9b18935ff6aa583', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4cdeef2295998ece7f565164f12ce598a6eaecad', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'f55132877b4b03b3861054f8165e9ae78b3e17df' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'cb0bb182c2620d4dd5d0484731f8f7ecca86d7bc', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '686e67b70d05cadb8fa67ed044524dce04e841ff' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,7 +117,7 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
   border-radius: 4px;
   opacity: 0;
@@ -287,8 +287,8 @@
   display: block;
   padding-bottom: 12px;
   text-align: left;
-  background: rgb(243, 249, 252);
-  border-bottom: 1px solid rgb(225, 227, 230);
+  background: rgb(240, 247, 250);
+  border-bottom: 1px solid rgb(212, 223, 229);
   border-radius: 4px 4px 0 0;
 }
 @media (max-width: 35.9375em) {
@@ -297,8 +297,8 @@
   }
 }
 .duet-theme-turva .duet-modal-sticky-header {
-  background: rgb(245, 245, 247);
-  border-bottom: 1px solid rgb(228, 228, 230);
+  background: rgb(245, 247, 250);
+  border-bottom: 1px solid rgb(222, 224, 228);
 }
 
 .duet-modal-close {
@@ -317,7 +317,7 @@
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-decoration: none;
   text-overflow: ellipsis;
   letter-spacing: -0.01rem;

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

@@ -103,13 +103,13 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   transition: 150ms ease;
 }
@@ -118,11 +118,11 @@
   text-overflow: ellipsis;
 }
 .duet-multiselect:hover {
-  border-color: rgb(144, 149, 153);
+  border-color: rgb(127, 150, 165);
   box-shadow: 0 0 0 1px #909599;
 }
 .duet-theme-turva .duet-multiselect:hover {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
   box-shadow: 0 0 0 1px #747475;
 }
 .has-error .duet-multiselect:hover {
@@ -148,18 +148,18 @@
   box-shadow: 0 0 0 1px #e55039;
 }
 .duet-multiselect[disabled] {
-  color: rgb(0, 41, 77) !important;
+  color: rgb(8, 42, 77) !important;
   cursor: default !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(0, 41, 77) !important;
+  -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
 .duet-theme-turva .duet-multiselect[disabled] {
   color: rgb(23, 28, 58) !important;
-  background: rgb(245, 245, 247) !important;
-  border-color: rgb(245, 245, 247) !important;
+  background: rgb(245, 247, 250) !important;
+  border-color: rgb(245, 247, 250) !important;
   -webkit-text-fill-color: rgb(23, 28, 58) !important;
 }
 .duet-multiselect > :first-child {
@@ -172,7 +172,7 @@
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   background: #d9ebf4;
   border-radius: 20rem;
 }
@@ -186,26 +186,26 @@
   margin-left: 12px;
 }
 .has-error .duet-multiselect {
-  border-color: rgb(222, 35, 98) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 .has-error .duet-multiselect .duet-multiselect-icon {
-  color: rgb(222, 35, 98) !important;
+  color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-multiselect {
-  border-color: rgb(224, 42, 13) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon {
-  color: rgb(224, 42, 13) !important;
+  color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva .duet-multiselect {
   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);
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-multiselect svg {
   width: 20px;
   height: 20px;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   pointer-events: none;
 }
 .duet-theme-turva .duet-multiselect svg {
@@ -223,7 +223,7 @@
   margin: 8px 0 0;
   visibility: hidden;
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(225, 227, 230);
+  border: 1px solid rgb(212, 223, 229);
   border-radius: 4px;
   box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
   opacity: 0;
@@ -233,7 +233,7 @@
 }
 .duet-theme-turva .duet-multiselect-checkboxes {
   background: rgb(255, 255, 255);
-  border-color: rgb(228, 228, 230);
+  border-color: rgb(222, 224, 228);
   box-shadow: 0 4px 10px 0 rgba(23, 28, 58, 0.15);
 }
 .duet-multiselect-checkboxes.duet-multiselect-checkboxes-active {
@@ -246,7 +246,7 @@
   padding: 8px 0;
   margin: -16px;
   margin-bottom: 16px;
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
   padding: 6px 16px;
@@ -266,7 +266,7 @@
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:first-child {
-  border-right: 1px solid rgb(225, 227, 230);
+  border-right: 1px solid rgb(212, 223, 229);
 }
 .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -276,7 +276,7 @@
   color: rgb(23, 28, 58);
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-multiselect-checkboxes fieldset {
   margin-top: 8px;
@@ -297,7 +297,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   border-radius: 4px;
 }
 .duet-multiselect-help span {
@@ -306,13 +306,13 @@
 }
 .duet-theme-turva .duet-multiselect-help {
   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(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .has-error .duet-multiselect-help {
-  color: rgb(222, 35, 98);
+  color: rgb(214, 28, 82);
 }
 .duet-theme-turva.has-error .duet-multiselect-help {
-  color: rgb(224, 42, 13);
+  color: rgb(214, 28, 82);
 }
 
 .duet-label-hidden duet-label {

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

@@ -24,7 +24,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '478d3e1e1531078b464aae5753629362fc516832' }, h("div", { key: 'be95c4c6556145aaa36f8191183fdf8f42e1f67c', class: { container: true, sticky: this.sticky } }, h("slot", { key: '1fbc5c81afb252eee8adaf26e7e77108de0995bb' }), h("slot", { key: 'ef5b3ef2e502f1990980ff8d3b4cc487703a76ca', name: "mobile" }), h("slot", { key: 'b50d92d4f5a7f166f66178bf4cf7b03c6aa48692', name: "desktop" }))));
+        return (h(Host, { key: '97cff27b21fb239339ebc9dc8bc5c267e20ed1f9' }, h("div", { key: '33276844fc09bd3a555ab9e033db7d5c2640da5c', class: { container: true, sticky: this.sticky } }, h("slot", { key: '1f135950c0220a03209aa273bcba83c4477f804a' }), h("slot", { key: '09ac4ab46b3ad110b30ec38907906fe5f16526db', name: "mobile" }), h("slot", { key: '995bc3f699e56d23b8a59df9a84e9a525c970cb3', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,9 +27,9 @@
 .duet-notification {
   display: block;
   padding: 16px;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   cursor: pointer;
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
   transition: 300ms ease;
 }
 :host(:last-of-type) .duet-notification {
@@ -37,21 +37,21 @@
 }
 .duet-notification.duet-theme-turva {
   color: rgb(23, 28, 58);
-  border-bottom-color: rgb(228, 228, 230);
+  border-bottom-color: rgb(222, 224, 228);
 }
 .duet-notification.duet-notification-highlight {
   font-weight: 600;
-  background: rgb(243, 249, 252);
+  background: rgb(240, 247, 250);
 }
 .duet-notification.duet-notification-highlight.duet-theme-turva {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 @media (min-width: 62em) {
   .duet-notification:hover {
-    background: rgb(243, 249, 252);
+    background: rgb(240, 247, 250);
   }
   .duet-notification:hover.duet-theme-turva {
-    background: rgb(245, 245, 247);
+    background: rgb(245, 247, 250);
   }
 }
 .duet-notification a {
@@ -103,7 +103,7 @@
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   text-align: right;
   text-transform: uppercase;
 }
@@ -113,7 +113,7 @@
   }
 }
 .duet-theme-turva .duet-notification-date {
-  color: rgb(68, 68, 69);
+  color: rgb(113, 118, 132);
 }
 
 ::slotted(duet-heading) {

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

@@ -43,11 +43,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '422e04582691291269942900a1279c343aef0fd6', role: "listitem", class: {
+        return (h("div", { key: '95f620022395e56f383b054bdd44e43eef780659', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'ca0b58b6e37c962ed94b50f7ec8984b2213f1156', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'dc7f017341005cc24213cdd7bc205e379b8887eb', class: "duet-notification-container" }, h("div", { key: 'a6b105d9df9c08ab0b3080bf80d65c695fe6acd8', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '9a65564d31555396c437147ff3f69811c358ff8a', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: 'b37d3a8df717072e9a8b1df03966f7f3874f5b57' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'efedb3045f0522eb5350fd987da79b3247470bdf', class: "duet-notification-content" }, h("slot", { key: '8ccf0b0088d6fe2729948d5bca6fd4b35db7b7d1' })), h("div", { key: 'a752d182e944651bf0c5e6531d992a03acb743b0', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'c2b26563af673ed607eda71ac73618a97df4182d', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '3a4d58c959a73f4eb54b7b1f2341b6cf47b3111d', class: "duet-notification-container" }, h("div", { key: 'a98286e2d2c067a14faa839ab3dec3d29ff29014', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: 'fdd7359a0ca2bec377cc7312f1005bb351dc9f81', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '4974d054afafb18ff69c464d722ee606c02a73fc' }, this.accessibleLabelUnread, ":")))), h("div", { key: '5ce2f9c01226ba63cb3d23f1b878d8384040e92b', class: "duet-notification-content" }, h("slot", { key: 'f99affc9adf412fd40861d10bccd092bfb08f2e9' })), h("div", { key: 'de4db79428641035052ede5c208377823828bcab', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.css

@@ -46,14 +46,14 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 48px;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   background-color: rgb(255, 255, 255);
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
   border-radius: 0;
   -webkit-appearance: none;
   appearance: none;
@@ -76,7 +76,7 @@
   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);
   background-color: rgb(255, 255, 255);
-  border-color: rgb(228, 228, 230);
+  border-color: rgb(222, 224, 228);
 }
 .duet-drawer-toggle:active {
   opacity: 0.75;
@@ -91,10 +91,10 @@
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-drawer-toggle:hover {
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
 }
 .duet-theme-turva .duet-drawer-toggle:hover {
-  color: rgb(68, 68, 69);
+  color: rgb(113, 118, 132);
 }
 .duet-drawer-toggle::after {
   display: none !important;
@@ -118,13 +118,13 @@
   }
 }
 .duet-drawer-toggle[aria-expanded=true], .duet-drawer-toggle[aria-expanded=true]:hover {
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
   border-bottom: 1px solid rgb(245, 248, 250);
   border-radius: 0;
 }
 .duet-theme-turva .duet-drawer-toggle[aria-expanded=true], .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
-  color: rgb(68, 68, 69);
-  border-color: rgb(245, 245, 247);
+  color: rgb(113, 118, 132);
+  border-color: rgb(245, 247, 250);
 }
 @media (min-width: 62em) {
   .duet-drawer-toggle[aria-expanded=true], .duet-drawer-toggle[aria-expanded=true]:hover {
@@ -196,20 +196,20 @@
   box-shadow: 0 0 0 1px #c18b1f;
 }
 .duet-theme-turva .duet-drawer-badge {
-  background: rgb(250, 164, 15);
+  background: rgb(247, 178, 40);
 }
 
 .duet-drawer-content {
   display: none;
   background-color: rgb(255, 255, 255);
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-drawer-content:focus {
   outline: 0;
 }
 .duet-theme-turva .duet-drawer-content {
   background-color: rgb(255, 255, 255);
-  border-color: rgb(225, 227, 230);
+  border-color: rgb(212, 223, 229);
 }
 @media (min-width: 62em) {
   .duet-drawer-content {
@@ -223,7 +223,7 @@
     overflow-y: auto;
     visibility: hidden;
     background-color: rgb(255, 255, 255);
-    border: 1px solid rgb(225, 227, 230);
+    border: 1px solid rgb(212, 223, 229);
     border-radius: 4px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;