@duetds/components 9.2.0 → 9.2.1

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: '71c0427eecb0676263c35bff4557210701d27e6f', role: "listitem" }, h("div", { key: 'a5038335629483dcf2d049129ebfed49eae6a457', 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: '5be6ce290e94c6e03c8c49336f4ef50e4283a92a', 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: 'e4e5076e21a084d205cb550946f6a7914911a4e9', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '4a79cbc7d59d30c5f763050c44c61c03ae502e74', class: "label" }, h("slot", { key: 'adecb2560eba25c9bdb1872fedc29c6b98c4d343', name: "label" }), h("duet-icon", { key: 'ef92b887f19bd4145ae89b3d6ab05be6c3b2fcd0', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '61bb1eff472548331aab26b636fb4606fbc982f7', 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: 'bdbb39527038baf411f9f4770cf594bdb3e86378' })))));
+            } }, 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: '1c874f9ed81beb0ee19f1675e95dffd0a193e2ce' }, h("a", { key: '8b04559cb61b8c25ecfd1511cc07de5a260f70bf', 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: 'c58dd6c5edc6a41fe20c73876cbe5637b9d389ba', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '93d7b57557f9999e2a790a94407e098a3b43350f', class: "label" }, h("slot", { key: '3ef98fd8e64aebc17df819a375c2e38207ccf3aa' })), this.active && (h("duet-icon", { key: 'a77c71f91778c5e70c0c23decc3ea9e23168422d', 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: '908f975e881c8970ba45c0642b3390dfd7589f19', role: "listitem" }, h(TagName, { key: 'b374d84a34a1219cdd56ab4955cf19ba363540bc', 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: '98e109ae48826ed28f9de9f2318e4498c71ddcaf', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '53104daf6c306c9a09771e266100ded5ac4596fc' }), this.trailingIcon && (h("duet-icon", { key: '5df62f15ed1c718bec00adbfa2be048683446520', 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: '694d29ef22d448dab54882fe7134fbd1ad312807', role: "listitem" }, h("a", { key: '1b15f80ca9ca005e38270486f35d54e24ed9d1d7', 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: '0c59b1eb514f11e97ae11551086d601eda908397', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '0686a4460ff9e29ed306e60e92312e4d26e9749b' }))));
+            }, 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: 'efa80105fab1c39e1494f3bfc1de5296147b2627' }, h("button", { key: 'f9cb29eb9d8de7c648f1352e05646ae6dbbfabfa', 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: 'e8505f0be91fa2bf49fefbdd415a5f42dc7b5212', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '414c12df66406a3ad2b2980b3ae3df69b6824113', 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: '0faf277a23d1d335b7bc294bfd4716c71e2d8e9d', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '3493b88ce899857eac5d99a9d7738d49de377308', 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: 'dd9c74d0d1cc665bc19371525c8f0e34bbf3cf8b' }, h("div", { key: '7267d10766b72402661236f995f5a97d46c23c52', 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: 'dce0d22d8078fa456e02a73b91166a822a3a5c14', moveFocusTo: this.buttonEl }), h("div", { key: 'b00e807866589a3b23d8df3bd0544a6d8174736a', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '87e590edcc68e65af17e5dfcc950395b02397b8a' })), h("div", { key: '15c29c70a6d455c3e72a057bf4c39735b3125f0f', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '24b1ffb0c4e1fc0d13d0767af14bf0489e301384', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'e442b3e6601ea6dd4e3c13aaabfac5bdc19f0700', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '317ce79e24d62bf4fb04818075ac66dded5efe1a', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'ab36a28b7e0e72e77e38d0dfe4a4010e34c7f37a' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '957fd21d8182f67c90212865356b3e8e1f7f2e80', 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-tooltip/duet-tooltip.js

@@ -424,7 +424,7 @@ export class DuetTooltip {
                     "references": {
                         "DuetTooltipBreakpoint": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
                             "id": "src/components/duet-tooltip/duet-tooltip.tsx::DuetTooltipBreakpoint"
                         }
                     }

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;