@duetds/components 9.1.2 → 9.2.1

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'eefe1ccb55e157002c987d984645204ef1180dbe' }, h("nav", { key: '62efd79c042a659c4bbee9f62a61d22218c4e79b', class: {
+        return (h(Host, { key: 'e95670de6988cb19be58405e1a22503cde2b90bd' }, h("nav", { key: 'fc7d9f781f8a67c70f21ebb83468561457454a38', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '45c6853e0ddbbd7d4e108dcd1a953cb3ec56f0e8', class: "container" }, h("div", { key: 'a842d519cb078cba8b4aca675ff55d3b2320e303', class: "list", role: "list" }, h("slot", { key: '7d034eb78a40ca22aeb9a6450d0fb70d418d03d9', name: "left" })), h("div", { key: '94a6e0def0e7d556721247f576605dc2fa0ccf1f', class: "list", role: "list" }, h("slot", { key: '3c7c48e9959fa7fc27577c89723f72d022c0a663', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '98f5defda0a4174974b55128d7e6ab8875191e56', class: "container" }, h("div", { key: '00664089bfde8ff43b913744e098108b4f8a7b38', class: "list", role: "list" }, h("slot", { key: '2e5832a886df8fd2b97b6f3af6eb77ac76ca8fa4', name: "left" })), h("div", { key: '84fcc0c995aadaccea6d64e286d1fd5b112b89a7', class: "list", role: "list" }, h("slot", { key: 'c9bb0646272666f709b96546d3b43221c85bba83', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.css

@@ -39,7 +39,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;
@@ -51,8 +51,8 @@
   justify-content: center;
 }
 .duet-toolbar-dropdown button:hover {
-  color: rgb(0, 41, 77);
-  background: rgb(243, 249, 252);
+  color: rgb(8, 42, 77);
+  background: rgb(240, 247, 250);
 }
 .duet-toolbar-dropdown button.open .caret {
   transform: rotate(180deg);
@@ -62,7 +62,7 @@
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-toolbar-dropdown button.active, .duet-toolbar-dropdown button.open {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-toolbar-dropdown button.active::after, .duet-toolbar-dropdown button.open::after {
   position: absolute;
@@ -89,7 +89,7 @@
   justify-content: center;
   min-width: 175px;
   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);
@@ -107,7 +107,7 @@
 }
 .duet-toolbar-dropdown.duet-theme-turva button:hover {
   color: rgb(23, 28, 58);
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-toolbar-dropdown.duet-theme-turva button:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
@@ -126,19 +126,19 @@
 }
 .duet-toolbar-dropdown.negative button:hover {
   color: rgb(255, 255, 255);
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-dropdown.negative button.active {
   font-weight: 600;
   color: rgb(255, 255, 255);
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-dropdown.negative button.open {
   color: rgb(255, 255, 255);
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-dropdown.negative button duet-icon {
-  color: rgb(205, 229, 241);
+  color: rgb(198, 225, 238);
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button {
   color: rgb(255, 255, 255);
@@ -157,5 +157,5 @@
   background: rgba(23, 28, 58, 0.2);
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon {
-  color: rgb(244, 207, 214);
+  color: rgb(255, 185, 190);
 }

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

@@ -50,18 +50,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'c896db9b3ac2a4d10e400e67b7f31b6ecacb3737', role: "listitem" }, h("div", { key: '7f55d5535230767d71071a62c58f6754e8cafc1f', class: {
+        return (h(Host, { key: 'a87f29715ddfbb33697cebfc796d4591cb191fd0', role: "listitem" }, h("div", { key: '54e757dfaaf70e32127e489812c35fca8e28e419', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: 'ce96d8220ea871a3ab72bf615107174f6c0802e8', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: '99e3e9be8b769b763bcb3efd37545b9d728b8ff5', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '11582ddf116e08da6aa3ba54ccc2db6e4a395abb', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '74d8a298238f17ab10bc16d0073aeb0104699047', class: "label" }, h("slot", { key: '8df1bb703f76b2ef0460055c037bcfc4e842d10b', name: "label" }), h("duet-icon", { key: 'acfa3f2f7862089008f8d8b2eba95bb6dfef3aa0', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '718e2a52bf0c3579a1094991f83f2b9fd6e8491c', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '599a1cd0847b63c55946e5c89f6fc1b4761dcb8a', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'fa9597c1dfb9c171a75b6f235ab433d2d4d86f07', class: "label" }, h("slot", { key: '9a262fb001663204c6aece7bdd7971b3f0d44c9e', name: "label" }), h("duet-icon", { key: '85728bfc749f8b5c9e310196d07a7cc587a17285', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '36d0896d802c6c2507e6a06ef3bc099684fefd64', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'ececcbe7ad87bdc55995ce8db36d464f47fefbf9' })))));
+            } }, h("slot", { key: '7bfbe40de83bf7a95b773592d1c7ef0e15610197' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-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;
 }
@@ -56,14 +56,14 @@
   color: rgb(23, 28, 58);
 }
 .duet-toolbar-dropdown-link.active {
-  background: rgb(243, 249, 252);
+  background: rgb(240, 247, 250);
 }
 .duet-toolbar-dropdown-link.active.duet-theme-turva {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-toolbar-dropdown-link:hover {
-  background: rgb(230, 242, 248);
+  background: rgb(228, 241, 247);
 }
 .duet-toolbar-dropdown-link:hover.duet-theme-turva {
-  background: rgb(228, 228, 230);
+  background: rgb(222, 224, 228);
 }

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js

@@ -31,11 +31,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd363a198149fd9a4c08eb181eaa1056d18c0898a' }, h("a", { key: '99aad91124922259990a94a28be6e94622eea6c5', class: {
+        return (h(Host, { key: 'a33846447e336d9ba1744b64e256fb6144ecf56d' }, h("a", { key: '8613597d4c4e5de513169f87e426effcf7e1ab68', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '8eb9410146ab81b0cf902afb892e67f693a10be3', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '780d2b204def16a761608214698d0486905e7c3f', class: "label" }, h("slot", { key: 'bd1aba77300442cf2d08d04221e8b7a44c93d168' })), this.active && (h("duet-icon", { key: '26f6d4384f221713f8dc3b58945a77cecd2b746d', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'e0dc39be130d8cc14a336595098adfec4e2dd74e', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '1dad6713a1f65d274269cdd3475a5e83b6a4ac18', class: "label" }, h("slot", { key: '017e8fe9eec10b313263ba4007c4d10dcef17e8e' })), this.active && (h("duet-icon", { key: '09386e5b6f037069a71777127c4f1b40bf818791', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.css

@@ -35,7 +35,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;
   white-space: nowrap;
@@ -48,6 +48,18 @@
 .duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-toolbar-item .trailing-icon {
+  width: 16px;
+  height: 16px;
+}
+.duet-toolbar-item .trailing-icon.trailing-icon-arrow {
+  width: 7px;
+  height: 7px;
+}
+.duet-toolbar-item .external-icon {
+  width: 10px;
+  height: 10px;
+}
 .duet-toolbar-item[aria-expanded=true] .trailing-icon.rotate {
   transform: rotate(180deg);
 }
@@ -55,13 +67,13 @@
   color: rgb(255, 255, 255);
 }
 .duet-toolbar-item.primary[aria-expanded=true], .duet-toolbar-item.secondary[aria-expanded=true] {
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-item.primary duet-icon, .duet-toolbar-item.secondary duet-icon {
-  color: rgb(205, 229, 241);
+  color: rgb(198, 225, 238);
 }
 .duet-toolbar-item.primary[aria-expanded=true] {
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-item.secondary[aria-expanded=true] {
   background: rgb(3, 56, 102);
@@ -77,31 +89,31 @@
   background: rgba(23, 28, 58, 0.2);
 }
 .duet-toolbar-item.duet-theme-turva.primary duet-icon {
-  color: rgb(244, 207, 214);
+  color: rgb(255, 185, 190);
 }
 .duet-toolbar-item:hover {
-  color: rgb(0, 41, 77);
-  background: rgb(243, 249, 252);
+  color: rgb(8, 42, 77);
+  background: rgb(240, 247, 250);
 }
 .duet-toolbar-item:hover.primary, .duet-toolbar-item:hover.secondary {
   color: rgb(255, 255, 255);
 }
 .duet-toolbar-item:hover.primary {
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-item:hover.secondary {
   background: rgb(3, 56, 102);
 }
 .duet-toolbar-item:hover.duet-theme-turva {
   color: rgb(23, 28, 58);
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-toolbar-item:hover.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
   background: rgba(23, 28, 58, 0.2);
 }
 .duet-toolbar-item.active {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-toolbar-item.active.primary, .duet-toolbar-item.active.secondary {
   font-weight: 600;
@@ -111,7 +123,7 @@
   display: none;
 }
 .duet-toolbar-item.active.primary {
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-item.active.secondary {
   background: rgb(3, 56, 102);

package/lib/collection/components/duet-toolbar-item/duet-toolbar-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 DuetToolbarItem {
     constructor() {
         this.theme = "";
@@ -14,6 +18,9 @@ export class DuetToolbarItem {
         this.accessibleLabel = undefined;
         this.accessibleExpanded = undefined;
         this.accessiblePopup = "false";
+        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        this.external = false;
     }
     /**
      * Component lifecycle events.
@@ -21,6 +28,15 @@ export class DuetToolbarItem {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, {
+            prop: "accessibleLabelExternal",
+            defaults: "accessibleLabelExternalDefaults",
+        });
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -40,15 +56,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'be0a9608c45623e976d79e193f6f4255fad2812d', role: "listitem" }, h(TagName, { key: 'baeb9d0e203b2fc97983530d798121d4df7e9b7b', ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'c651741671154cd0e5851a6d6600c2eb96185740', role: "listitem" }, h(TagName, { key: 'dfc4397a8bd132f3a56accb84109c1bc5b0edc71', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, 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: 'c77109ca570f1c6da5e3aef5a71a3c708d8962e9', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'e020d036269f7847cbd20c879c4d2267f312f6e3' }), this.trailingIcon && (h("duet-icon", { key: '00d90da73a2063c9990fd93f4aa0c613a7d0f52f', 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: 'd770fb6252e01cfbfdf8c30810dc88f95eb6cc3c', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '4efe99a166b4078028022fbdd23ce8bbf32c6bdc' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '4a7f60fa0e412e2254dea5462de15f80fcdd4494', 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: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : "x-small", 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-toolbar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -240,6 +258,72 @@ export class DuetToolbarItem {
                 "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-toolbar-link/duet-toolbar-link.css

@@ -35,7 +35,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;
   white-space: nowrap;
@@ -51,7 +51,7 @@
   color: rgb(255, 255, 255);
 }
 .duet-toolbar-link.negative duet-icon {
-  color: rgb(205, 229, 241);
+  color: rgb(198, 225, 238);
 }
 .duet-toolbar-link.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";
@@ -61,26 +61,26 @@
   color: rgb(255, 255, 255);
 }
 .duet-toolbar-link.duet-theme-turva.negative duet-icon {
-  color: rgb(244, 207, 214);
+  color: rgb(255, 185, 190);
 }
 .duet-toolbar-link:hover {
-  color: rgb(0, 41, 77);
-  background: rgb(243, 249, 252);
+  color: rgb(8, 42, 77);
+  background: rgb(240, 247, 250);
 }
 .duet-toolbar-link:hover.negative {
   color: rgb(255, 255, 255);
-  background: rgba(0, 41, 77, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-link:hover.duet-theme-turva {
   color: rgb(23, 28, 58);
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-toolbar-link:hover.duet-theme-turva.negative {
   color: rgb(255, 255, 255);
   background: rgba(23, 28, 58, 0.2);
 }
 .duet-toolbar-link.active {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-toolbar-link.active.negative {
   font-weight: 600;

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.js

@@ -24,12 +24,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '258aa71d94e0e3959eef224ab891ceb4db3886ad', role: "listitem" }, h("a", { key: 'e3557495157f9c6212582f47cf027f1f8389d7e9', class: {
+        return (h(Host, { key: '6a66cea74140b5db01202d0f1ca06072b9c3dbd4', role: "listitem" }, h("a", { key: '7d494df416a0720defd5159669b2c85fb8a5f448', class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '28195a63fb2020c70155284152086fa6fd4be0a1', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '85fdc84a09716bf992dbb7325b9677ed74fec706' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'f6a26cd3099dd843e09a2473ecdf99e63b55a80f', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '14f9e21db7f199f4c09fd9838162b44f28c685e4' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tooltip/duet-tooltip-button.css

@@ -42,10 +42,10 @@
   color: rgb(198, 12, 48);
 }
 .duet-tooltip-button:hover {
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
 }
 .duet-tooltip-button:hover.duet-theme-turva {
-  color: rgb(148, 9, 37);
+  color: rgb(126, 2, 35);
 }
 .duet-tooltip-button:focus {
   background: transparent !important;

package/lib/collection/components/duet-tooltip/duet-tooltip-button.js

@@ -38,11 +38,11 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4be97c3001005d18be45efe72c3b80bab321580f' }, h("button", { key: '610f35f05d9c3caac636aa3d32dfda78df0a41be', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, { key: '4a3bc0a7387a6ee9301370fcddd4cbea3d3744d3' }, h("button", { key: '4b215f11753fe4b67089ee0c4719657f9d67e44e', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("svg", { key: 'c8c4071751aaed98f301674b9dd26d5e1ed67033', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'beb7762d011e678668b723c8c362ad6fe09a7e71', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: '2e18209c0945b8bbed7132d7c58e6987d195f936', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '0d2299a6de3f42d32be3268c9efeca24fea9f7b4', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
+            } }, h("svg", { key: 'bb183d86de565800c0b7b406f95ae2fa1ee14d4f', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0d71e87e5bfdefc8464e9a42d8868e24d4c17476', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: '092e34189723e7c5e88f442927af839bc0426d17', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '193b5f7f361c9ae2b1718fc2b5a6f479075b263a', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
     }
     static get is() { return "duet-tooltip-button"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.css

@@ -32,10 +32,10 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   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 2px 10px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
@@ -45,7 +45,7 @@
 .duet-tooltip.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);
-  border-color: rgb(228, 228, 230);
+  border-color: rgb(222, 224, 228);
   box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
 }
 .duet-tooltip .arrow {
@@ -90,10 +90,10 @@
   bottom: -1px;
   left: 1px;
   border: 11px solid transparent;
-  border-top: 11px solid rgb(225, 227, 230);
+  border-top: 11px solid rgb(212, 223, 229);
 }
 .duet-theme-turva .duet-tooltip .arrow-container.top::before, .duet-theme-turva .duet-tooltip .arrow-container.top-start::before, .duet-theme-turva .duet-tooltip .arrow-container.top-end::before {
-  border-top: 11px solid rgb(228, 228, 230);
+  border-top: 11px solid rgb(222, 224, 228);
 }
 .duet-tooltip .arrow-container.bottom::after, .duet-tooltip .arrow-container.bottom-start::after, .duet-tooltip .arrow-container.bottom-end::after {
   bottom: 1px;
@@ -105,10 +105,10 @@
   bottom: 1px;
   left: 1px;
   border: 11px solid transparent;
-  border-bottom: 11px solid rgb(225, 227, 230);
+  border-bottom: 11px solid rgb(212, 223, 229);
 }
 .duet-theme-turva .duet-tooltip .arrow-container.bottom::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-start::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-end::before {
-  border-top: 11px solid rgb(228, 228, 230);
+  border-top: 11px solid rgb(222, 224, 228);
 }
 .duet-tooltip.duet-tooltip-has-label {
   right: auto !important;
@@ -148,11 +148,11 @@
   border-radius: 4px;
 }
 .duet-tooltip-content-area::-webkit-scrollbar-thumb {
-  background: rgb(225, 227, 230);
+  background: rgb(212, 223, 229);
   border-radius: 4px;
 }
 .duet-theme-turva .duet-tooltip-content-area::-webkit-scrollbar-thumb {
-  background: rgb(228, 228, 230);
+  background: rgb(222, 224, 228);
 }
 
 .duet-tooltip-close {
@@ -168,7 +168,7 @@
   padding: 0 !important;
   margin: 0 !important;
   line-height: normal;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   cursor: pointer;
   background: rgb(245, 248, 250);
   border-radius: 50%;

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.js

@@ -53,11 +53,11 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: '5937d404a3288b6afe2b9c8e1d47147e96eef933' }, h("div", { key: 'bc2694a70963dabcaddce627d1abfe51dc36ebac', class: {
+        return (h(Host, { key: 'ac8f27a96fb59b93219859633b8735e75a4794ed' }, h("div", { key: 'b7741f367063c54bb1134f83ed7939980d8c29d7', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '461ee4e709c80fae34d04f2bba0fd60e6305f594', moveFocusTo: this.buttonEl }), h("div", { key: '47e8f609387722060e93fc37558a219c2bad2ed6', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '64350c3d73d2560711890254d8be979f07c27f1b' })), h("div", { key: '0544215577fd0b4e6be97eadcbad8f58114ffb38', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '1076a224b4a4f9d455271245e7bd879689a96bf4', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'bf275bd1c1597e42ab29ce57338a37e8ff534bfc', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'e06529abd6465f5e65f57f85ba2392c1df82d59f', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '43cabf152e52e237b886642e66a30875973fac6f' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '47ef9a81ce996efe8d52d06f36799c5a4f3b26cc', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: 'a04dc03abb6ae1d05fd884de1a39ca071ca77821', moveFocusTo: this.buttonEl }), h("div", { key: '3a035e3a4c49a924e7e269722e1f8831e1539cb8', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '47cf71c973ee05e2f6aac639493932edb87430a0' })), h("div", { key: '538cfc3ac931bf93d3bae72c43667294efff7451', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '7ca7a0576ca1b6e51c71dcffb555cd09be0232d6', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '413c242ac217f365afb66390b80bdbba76417985', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '4c676f3c7b717ba5c885750f1a3695d2f8033efb', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '2491f3bb82311d5e1353690ca70c63a50a447d3d' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'c9d63b7a36d1bdec4efbd032adee2895dd7ae88b', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,10 +38,10 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   visibility: hidden;
-  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);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
   transition: opacity 600ms ease, visibility 600ms ease, transform 600ms ease;
@@ -69,8 +69,8 @@
 .duet-tray.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);
-  background: rgb(245, 245, 247);
-  border-color: rgb(228, 228, 230);
+  background: rgb(245, 247, 250);
+  border-color: rgb(222, 224, 228);
 }
 .duet-tray.duet-tray-is-active {
   visibility: visible;
@@ -124,10 +124,10 @@
 .duet-tray-expandable-content {
   width: 100%;
   margin-top: 16px;
-  border-top: 1px solid rgb(225, 227, 230);
+  border-top: 1px solid rgb(212, 223, 229);
 }
 .duet-theme-turva .duet-tray-expandable-content {
-  border-color: rgb(228, 228, 230);
+  border-color: rgb(222, 224, 228);
 }
 
 .duet-tray-button {
@@ -138,7 +138,7 @@
   top: -2px;
   right: 0;
   z-index: 200;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: center;
   cursor: pointer;
   border-radius: 4px;