@duetds/components 9.2.0 → 9.2.1

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

@@ -47,7 +47,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -60,7 +60,7 @@
     justify-content: center;
     width: auto;
     font-size: 0.875rem;
-    color: rgb(0, 77, 128);
+    color: rgb(0, 75, 129);
   }
 }
 .duet-submenu-bar-dropdown button .label {
@@ -71,7 +71,7 @@
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown button.open {
-    background: rgb(230, 242, 248);
+    background: rgb(228, 241, 247);
   }
 }
 .duet-submenu-bar-dropdown button.open .caret {
@@ -107,11 +107,11 @@
     right: 12px;
   }
   .duet-submenu-bar-dropdown button:hover {
-    color: rgb(0, 41, 77);
-    background: rgb(230, 242, 248);
+    color: rgb(8, 42, 77);
+    background: rgb(228, 241, 247);
   }
   .duet-submenu-bar-dropdown button:hover.active {
-    color: rgb(0, 41, 77);
+    color: rgb(8, 42, 77);
   }
   .duet-theme-turva .duet-submenu-bar-dropdown button:hover.active {
     color: rgb(23, 28, 58);
@@ -157,7 +157,7 @@
   max-height: 1000px;
   padding: 4px 0 16px;
   overflow-y: auto;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   visibility: visible;
   transition: max-height 0.3s ease-in, padding 0.3s ease-in;
   -ms-overflow-style: none;
@@ -192,7 +192,7 @@
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva button:hover {
-    background: rgb(228, 228, 230);
+    background: rgb(222, 224, 228);
   }
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button:focus {
@@ -203,15 +203,15 @@
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva button.active, .duet-submenu-bar-dropdown.duet-theme-turva button.open {
-    color: rgb(148, 9, 37);
+    color: rgb(126, 2, 35);
   }
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button.active::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open::after {
-  background: rgb(148, 9, 37);
+  background: rgb(126, 2, 35);
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva button.open {
-    background: rgb(228, 228, 230);
+    background: rgb(222, 224, 228);
   }
 }
 @media (min-width: 62em) {

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

@@ -96,18 +96,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b3ceba0158daeda5a08cdbb24998e6a5621a3703', role: "listitem" }, h("div", { key: '7151474e27716eb431d4e91c40df63183b3a7aa3', class: {
+        return (h(Host, { key: '11e62070b0315cfc4d3e3c4303bc193ca9e17ebb', role: "listitem" }, h("div", { key: '6e24bdc74dcf8087c511f62bbcd1b0637899f950', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '5c52390b4c51542e2f964c334678b69bbd579520', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '7e1ea73475a0055d2494ea0fd1a6251bff54a434', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'b54bb41ddf9a8743c91ca00b851f278ed01be2d3', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '5e48f0afd254dc828b65347ed8b9503a258cf2fa', class: "label" }, h("span", { key: '11e104876c90fb056e2ec497e48a8ab634bcaf90', class: "label-text" }, h("slot", { key: 'a5eba5494cfa87a94cfa0f7a6b9614f5e84127e5', name: "label" })), h("duet-icon", { key: '954b21321b8f10dda0da3e8b049157bd6ac52b49', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'f2cbdcc7f153986c5d76351fb27070eb233cf68c', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'ccfe3bd7792ae0b352b62806cf1c8567f9437456', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '2267d727d323b18c20cdd78b6050c83f0933d373', class: "label" }, h("span", { key: '9eb6d48b698f09636e950cd711928614d492033b', class: "label-text" }, h("slot", { key: '9b6643216f2a390a4ae19fb1d7306a1a10e79f53', name: "label" })), h("duet-icon", { key: 'f0e9935a58890ae53424c99761149c8d913ce74f', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '5634a7f613b5e00c5a3328d47e98e5342eb31ba3', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '4e14b8e2e6c20c4fa8e9e90b34047a6a790ff5e6' })))));
+            } }, h("slot", { key: 'f1ee473aebbe7301e1c6e69f6d539ac26dccf87e' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   text-decoration: none;
 }
@@ -88,7 +88,7 @@
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown-link.active {
-    background: rgb(243, 249, 252);
+    background: rgb(240, 247, 250);
   }
   .duet-submenu-bar-dropdown-link.active .label::after {
     display: none;
@@ -97,18 +97,18 @@
     display: block;
   }
   .duet-submenu-bar-dropdown-link.active.duet-theme-turva {
-    background: rgb(245, 245, 247);
+    background: rgb(245, 247, 250);
   }
   .duet-submenu-bar-dropdown-link:hover {
-    background: rgb(230, 242, 248);
+    background: rgb(228, 241, 247);
   }
   .duet-submenu-bar-dropdown-link:hover.duet-theme-turva {
-    background: rgb(228, 228, 230);
+    background: rgb(222, 224, 228);
   }
 }
 .duet-submenu-bar-dropdown-link.highlight {
   color: rgb(0, 119, 179);
 }
 .duet-submenu-bar-dropdown-link.highlight.duet-theme-turva {
-  color: rgb(148, 9, 37);
+  color: rgb(126, 2, 35);
 }

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

@@ -31,12 +31,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f80ee91cccb915e476e1f572f9656985c2028978' }, h("a", { key: '8a53200290262940ac11346d9d7526afed459893', class: {
+        return (h(Host, { key: '2a0bd0fc1067f2830d35b391f7729501b575945d' }, h("a", { key: '2701050d3eb010669df4262dede28d854ff998db', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '006a4ba73b60083703dbcc084263b8a721c320d7', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '9450f9f49041afd67cd79bf8c9b3ea0094cef6ce', class: "label-container" }, h("span", { key: 'f0e0d4882fd97aeb7c33c29e68be8c4ee40302f8', class: "label" }, h("slot", { key: 'a72b1bcc2fcd65022d09fea90b1c7c957e54ffb5' })), this.caret && h("duet-icon", { key: '795f6f318bde5239cf79fa96a4a915e42032e5d1', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'd79f93df8837c4e201869a960f8f7a53783b7852', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'ed6dc9fdce8a88be4bf115d1be386291cdab6a1e', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'ba024c16864574248221caa8d8654051f6eef26f', class: "label-container" }, h("span", { key: '6b22ce9cd109698aea523ca2ba0edb037d692dbd', class: "label" }, h("slot", { key: '6df015eacde2eff570c818e14ebaa152059fda76' })), this.caret && h("duet-icon", { key: '69b29abde8dae9e41f63ba981a523848ba962c31', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'd2e8fe2ca349dc62978f322d32a82ecfb135f8e7', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
@@ -77,12 +77,16 @@
   width: 7px;
   height: 7px;
 }
+.duet-submenu-bar-item .external-icon {
+  width: 10px;
+  height: 10px;
+}
 .duet-submenu-bar-item .trailing-icon {
   position: absolute;
   right: 12px;
 }
 .duet-submenu-bar-item[aria-expanded=true] {
-  background: rgb(230, 242, 248);
+  background: rgb(228, 241, 247);
 }
 .duet-submenu-bar-item[aria-expanded=true] .trailing-icon.rotate {
   transform: rotate(180deg);
@@ -91,7 +95,7 @@
   color: rgb(0, 119, 179);
 }
 .duet-submenu-bar-item.active.duet-theme-turva {
-  color: rgb(148, 9, 37);
+  color: rgb(126, 2, 35);
 }
 .duet-submenu-bar-item.active::after {
   position: absolute;
@@ -111,19 +115,19 @@
   color: rgb(23, 28, 58);
 }
 .duet-submenu-bar-item.duet-theme-turva.active .label::after {
-  background: rgb(148, 9, 37);
+  background: rgb(126, 2, 35);
 }
 .duet-submenu-bar-item.duet-theme-turva.active::after {
-  background: rgb(148, 9, 37);
+  background: rgb(126, 2, 35);
 }
 .duet-submenu-bar-item:hover {
-  color: rgb(0, 41, 77);
-  background: rgb(230, 242, 248);
+  color: rgb(8, 42, 77);
+  background: rgb(228, 241, 247);
 }
 .duet-submenu-bar-item:hover.duet-theme-turva {
   color: rgb(23, 28, 58);
-  background: rgb(228, 228, 230);
+  background: rgb(222, 224, 228);
 }
 .duet-submenu-bar-item:hover.duet-theme-turva.active {
-  color: rgb(148, 9, 37);
+  color: rgb(126, 2, 35);
 }

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

@@ -1,9 +1,13 @@
 /*!
  * 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 { isEscapeKey } from "../../utils/keyboard-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 export class DuetSubmenuBarItem {
     constructor() {
         this.theme = "";
@@ -14,6 +18,9 @@ export class DuetSubmenuBarItem {
         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 DuetSubmenuBarItem {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, {
+            prop: "accessibleLabelExternal",
+            defaults: "accessibleLabelExternalDefaults",
+        });
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
     handleEscape(e) {
         if (isEscapeKey(e)) {
             const dropdown = this.element.closest("duet-submenu-bar");
@@ -41,11 +57,12 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: '235d62294980430d719692b42954af6eacd305e8', role: "listitem" }, h(TagName, { key: 'e847552fc82cf3ea6c8ca1dd11e2dc3fd8593f3e', ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "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, role: role }, this.leadingIcon && (h("duet-icon", { key: '4a084254a6ee575e72d98fc83203e34d24dfdab3', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '480d23a3ddeab5d0359f95e51ea8ce7f4c893aa4', class: "label" }, h("span", { key: '72936339ba118cad5aaccb094d4c727e2bbf5b4f', class: "label-text" }, h("slot", { key: 'a1009b487801d8be2c9a103f8e7ec4cc8c3f48eb' })), this.trailingIcon && (h("duet-icon", { key: '7c92ee5886afdb53c6c750e27b0a86976f87cbbf', class: {
-                "trailing-icon": true,
+        return (h(Host, { key: '443e50f3d6e0221f9d089617b66ba2d7af05a0d4', role: "listitem" }, h(TagName, { key: 'a49c8360435fdff2934bb611b909880c17df0119', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "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, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '9caf7a841ec4116bec64a846f35bbeef8b377563', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'f24016ad17bd57fdfd5293a8dec47dab126d4441', class: "label" }, h("span", { key: '7a6cb80cc3013a47527285f07dcfe54429d842b9', class: "label-text" }, h("slot", { key: '85c0ca4f6ee110f74118b0a6e17153c787b6d52f' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'df8367bdb82b9fb9207fb6083d3c1c308c388cdf', 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-submenu-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -219,6 +236,72 @@ export class DuetSubmenuBarItem {
                 "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-submenu-bar-link/duet-submenu-bar-link.css

@@ -41,7 +41,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: center;
   text-decoration: none;
 }
@@ -69,7 +69,7 @@
     align-items: center;
     justify-content: center;
     font-size: 0.875rem;
-    color: rgb(0, 77, 128);
+    color: rgb(0, 75, 129);
   }
 }
 @media (min-width: 62em) {
@@ -77,7 +77,7 @@
     color: rgb(0, 119, 179);
   }
   .duet-submenu-bar-link.active.duet-theme-turva {
-    color: rgb(148, 9, 37);
+    color: rgb(126, 2, 35);
   }
 }
 .duet-submenu-bar-link.active .label {
@@ -118,21 +118,21 @@
   color: rgb(23, 28, 58);
 }
 .duet-submenu-bar-link.duet-theme-turva.active .label::after {
-  background: rgb(148, 9, 37);
+  background: rgb(126, 2, 35);
 }
 .duet-submenu-bar-link.duet-theme-turva.active::after {
-  background: rgb(148, 9, 37);
+  background: rgb(126, 2, 35);
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-link:hover {
-    color: rgb(0, 41, 77);
-    background: rgb(230, 242, 248);
+    color: rgb(8, 42, 77);
+    background: rgb(228, 241, 247);
   }
   .duet-submenu-bar-link:hover.duet-theme-turva {
     color: rgb(23, 28, 58);
-    background: rgb(228, 228, 230);
+    background: rgb(222, 224, 228);
   }
   .duet-submenu-bar-link:hover.duet-theme-turva.active {
-    color: rgb(148, 9, 37);
+    color: rgb(126, 2, 35);
   }
 }

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

@@ -29,7 +29,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '51e5c82b88f45b2a32b9007c1cba3c28bebb0f76', role: "listitem" }, h("a", { key: '777ef8ad98f32b4be821e576e7085b767e2c80ac', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'eb80ccc57229a8a448d32e17695c7f573805f967', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '3dc063ad2c8b8fb92d1d292205dcf5ea82889b4f', class: "label" }, h("slot", { key: '2274f12f2198558e45a4b79c828c06cf9bb7f1c0' })))));
+        return (h(Host, { key: 'a6dc9dd339c3e6bff16908b1c8a92d8864620cae', role: "listitem" }, h("a", { key: '5251cb04c87f1c52bd8fdae8a0da3c8c8387b9c3', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: '3c102a611f04bce4287534f8c2492b326cd97546', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '7f743327633be260d9f69659dc392023fb4f1a60', class: "label" }, h("slot", { key: '28503563b656db735aa9635e52e64f7eb296d630' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -45,10 +45,10 @@
   }
 }
 .duet-tab-variation-plain .duet-tab-group-tabs {
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs {
-  border-bottom-color: rgb(228, 228, 230);
+  border-bottom-color: rgb(222, 224, 228);
 }
 
 .duet-tab-variation-checked .duet-tab-group-tabs {
@@ -112,12 +112,12 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.1;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   background: rgb(255, 255, 255);
-  border: 2px solid rgb(225, 227, 230);
+  border: 2px solid rgb(212, 223, 229);
   border-radius: 0;
   transition: 150ms ease;
 }
@@ -152,8 +152,8 @@
   height: 6px;
   content: "";
   border-radius: 50%;
-  background: rgb(222, 35, 98);
-  box-shadow: 0 0 0 1px #c82058;
+  background: rgb(214, 28, 82);
+  box-shadow: 0 0 0 1px #c1194a;
 }
 .duet-tab-variation-plain .duet-tab-button.duet-notification-mark-danger::after {
   top: calc(50% - 0.5rem - 6px);
@@ -162,7 +162,7 @@
 .duet-theme-turva .duet-tab-button {
   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);
 }
 .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
   position: absolute;
@@ -173,8 +173,8 @@
   height: 6px;
   content: "";
   border-radius: 50%;
-  background: rgb(250, 164, 15);
-  box-shadow: 0 0 0 1px #e1940e;
+  background: rgb(247, 178, 40);
+  box-shadow: 0 0 0 1px #dea024;
 }
 .duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
   top: calc(50% - 0.5rem - 6px);
@@ -189,8 +189,8 @@
   height: 6px;
   content: "";
   border-radius: 50%;
-  background: rgb(224, 42, 13);
-  box-shadow: 0 0 0 1px #ca260c;
+  background: rgb(214, 28, 82);
+  box-shadow: 0 0 0 1px #c1194a;
 }
 .duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after {
   top: calc(50% - 0.5rem - 6px);
@@ -204,16 +204,16 @@
     display: inline-block;
     width: auto;
     margin-left: -2px;
-    border-right: 2px solid rgb(225, 227, 230);
+    border-right: 2px solid rgb(212, 223, 229);
     border-radius: 0;
   }
 }
 .duet-tab-button:hover {
   z-index: 200;
-  border-color: rgb(144, 149, 153);
+  border-color: rgb(127, 150, 165);
 }
 .duet-theme-turva .duet-tab-button:hover {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-tab-button:active {
   opacity: 0.75;
@@ -222,8 +222,8 @@
 .duet-tab-button.selected {
   z-index: 201;
   color: rgb(255, 255, 255);
-  background: rgb(0, 41, 77);
-  border-color: rgb(0, 41, 77);
+  background: rgb(8, 42, 77);
+  border-color: rgb(8, 42, 77);
   outline: 0;
   box-shadow: none !important;
 }
@@ -294,14 +294,14 @@
   width: 200px;
   min-width: 200px;
   padding: 8px 4px;
-  border-color: rgb(207, 210, 212);
+  border-color: rgb(181, 198, 208);
   border-bottom-color: rgb(0, 119, 179);
   border-radius: 4px 4px 0 0;
   transition: none;
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button {
-  border-color: rgb(207, 210, 212);
-  border-bottom-color: rgb(68, 68, 69);
+  border-color: rgb(181, 198, 208);
+  border-bottom-color: rgb(113, 118, 132);
 }
 
 @media (min-width: 36em) {
@@ -325,14 +325,14 @@
 }
 .duet-tab-variation-checked .duet-tab-button.selected {
   color: rgb(0, 119, 179);
-  background: linear-gradient(180deg, rgb(243, 249, 252) 0%, rgb(255, 255, 255) 100%);
+  background: linear-gradient(180deg, rgb(240, 247, 250) 0%, rgb(255, 255, 255) 100%);
   border-color: rgb(0, 119, 179);
   border-bottom-color: #fff;
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button.selected {
   color: rgb(23, 28, 58);
-  background: linear-gradient(180deg, rgb(245, 245, 247) 0%, rgb(255, 255, 255) 100%);
-  border-color: rgb(68, 68, 69);
+  background: linear-gradient(180deg, rgb(245, 247, 250) 0%, rgb(255, 255, 255) 100%);
+  border-color: rgb(113, 118, 132);
   border-bottom-color: #fff;
 }
 
@@ -368,7 +368,7 @@
   margin-top: 4px;
   font-size: 0.875rem;
   font-weight: 400;
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
 }
 @media (min-width: 36em) {
   .duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
@@ -377,14 +377,14 @@
   }
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
-  color: rgb(68, 68, 69);
+  color: rgb(113, 118, 132);
 }
 
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected {
   color: rgb(0, 119, 179);
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected {
-  color: rgb(68, 68, 69);
+  color: rgb(113, 118, 132);
 }
 
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark {
@@ -405,7 +405,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
 }
 .duet-tab-group-content:focus {
@@ -432,5 +432,5 @@
   color: rgb(23, 28, 58);
 }
 .duet-theme-turva .duet-tab-group-content.checked-group-content::after {
-  background-color: rgb(68, 68, 69);
+  background-color: rgb(113, 118, 132);
 }