@duetds/components 9.2.0 → 9.2.2

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: '8f08ece395a4ba1314841a67287af313a8855186', role: "listitem" }, h("div", { key: 'e95acc4335f412ca02f26b8de05ade89164a7527', 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: 'a8d0369c81b9a06c1f124cd48d88306c1ed333dd', 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: '4c0cc2b9677d5e58c2cf4428efa9d62a1e3c8d91', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'bd5c5b92ef9dc39bf26c2553a0f5e053ef5f1c48', class: "label" }, h("span", { key: '7d1aa5919c3e138f7b533d19aed057826f0fa314', class: "label-text" }, h("slot", { key: 'de5d49c359fa794ccf67bb2add1783e26ade578b', name: "label" })), h("duet-icon", { key: '94eba6e2c4541d80a1152018a9ce87138a947030', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '9c101cf1fdaaabeca35e85d8e7fc41adc223dcd7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '4e14b8e2e6c20c4fa8e9e90b34047a6a790ff5e6' })))));
+            } }, h("slot", { key: '4f2254bd20c2b678903b0c0df54fd0f97402faed' })))));
     }
     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: '11e639e57c680a97a0ef21a57328360133227dd1' }, h("a", { key: '919512fb3aa5bf046fa9262710f43fcfd7c9fb39', 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: 'ebf2d185b72200c222f27e355adeff4c079ca4ea', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '0974a4c820f420a579284d59a828f4885c6e29f0', class: "label-container" }, h("span", { key: '56a4127149b845914f81522e8f4d1aee1bb5841d', class: "label" }, h("slot", { key: 'f7b1b3f63774566fde033aaeefc564f4f49e5565' })), this.caret && h("duet-icon", { key: '30ecc9e26ae5fd94776b1b6f36bd33762f857630', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '71a328a1d78b6d1d4c13ca0d07b5918677d93061', 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: 'f69e9add0568dfe72123a03f289215bb29ef1d08', role: "listitem" }, h(TagName, { key: '3ca7353d74a0a8c0d1126d51c6f8e331ecf6917c', 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: 'f20c091590fbe1ecafd15170018c4cc50f0c8aed', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '7b57abaa11e2b7977724e6af6a0e6abaf9fe3d6f', class: "label" }, h("span", { key: 'db4d694d48e0e09771dd7a9bde496ca51b8489c3', class: "label-text" }, h("slot", { key: 'aaac34dd1703e14868ca9dff56f3b8cf3fbc9bb1' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '6d75e989663c2c6bd261207f8b31be886ce508ec', 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: '7b8350533b6fdc1b0fe43e2f526116478c2f4ea2', role: "listitem" }, h("a", { key: '2293f62e3c8a9dd5d7bcbbb340fa61bd705c846e', 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: '2a42ec30e2045854c5d738859fee5d8a974bb7fb', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'ed5e319d3d2831716e2c86765c8e1b359a8f2955', class: "label" }, h("slot", { key: 'c9daddf444637f484b157f9115fdc240814c4947' })))));
     }
     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);
 }

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

@@ -203,27 +203,27 @@ export class DuetTabGroup {
     render() {
         const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
         const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
-        return (h("div", { key: 'ebe04fec966d8b545c6efd5b34b43551fc2ad1d3', class: {
+        return (h("div", { key: 'bc316787b3b80f823ed8faaba277e003e68bb5a2', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": this.scrolls,
                 "duet-tab-group-collapses": this.collapses,
-            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { key: '2f5a55d27e5e0483129fd2bdc8aa0cc7bb641a8f', value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { key: '64c5ec06e21fbde15b29281d5e89273c2d15dcdc', value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
                 return { label: tab.label, value: index.toString() };
-            }) })), h("div", { key: '05b06b0a5fcaa80f09e8d0550e5a9af194d397dc', role: "tablist", class: {
+            }) })), h("div", { key: '1c8d3bbb5202408ce2bdabf98aeef15a64413506', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
                 "duet-tab-group-collapses": this.collapses,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.renderTab()), h("div", { key: '66d70f586ee16b2b6be97013971fdb0a320d34c0', class: {
+            } }, this.renderTab()), h("div", { key: 'ecae4e65fe249bb084917967e40682b80eed1a9f', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'c18fde90ff76c6f71fbeae6a2d04a193cb64917f' }))));
+            } }, h("slot", { key: 'ab023437cb483fb6b9f0a60e7dd83970d98119f8' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }