@duetds/components 9.1.2 → 9.2.1

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

@@ -46,7 +46,7 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-style: normal;
   font-weight: 400;
-  color: rgb(0, 98, 154);
+  color: rgb(0, 97, 155);
   text-decoration: underline;
   border-radius: 4px;
   transition: 300ms ease;
@@ -60,14 +60,14 @@
 }
 .duet-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";
-  color: rgb(173, 11, 43);
+  color: rgb(164, 4, 40);
 }
 .duet-link:hover {
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
   text-decoration: none;
 }
 .duet-link:hover.duet-theme-turva {
-  color: rgb(148, 9, 37);
+  color: rgb(126, 2, 35);
 }
 .duet-link:active {
   opacity: 0.75;
@@ -141,7 +141,7 @@ button {
   align-items: start;
   padding: 16px;
   font-weight: 600;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-decoration: none;
 }
 .block.duet-link.duet-link-has-icon {
@@ -177,9 +177,9 @@ button {
   line-height: 1.25;
   text-decoration: none;
   background-color: rgb(255, 255, 255);
-  border: solid 1px rgb(207, 210, 212);
+  border: solid 1px rgb(181, 198, 208);
   border-radius: 12px;
-  outline: 0 solid rgb(207, 210, 212);
+  outline: 0 solid rgb(181, 198, 208);
   outline-offset: -2px;
   transition: all 300ms ease;
 }
@@ -191,7 +191,7 @@ button {
   flex-shrink: 1;
   font-size: 1rem;
   font-weight: 600;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
 }
 .duet-link.button .icon-wrap {
@@ -233,7 +233,7 @@ button {
   }
 }
 .duet-link.button.duet-theme-turva {
-  border-color: rgb(207, 207, 209);
+  border-color: rgb(199, 202, 207);
 }
 .duet-link.button.duet-theme-turva .duet-link-content {
   color: rgb(23, 28, 58);

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

@@ -8,6 +8,7 @@ import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsDownloadLinkDefaults, DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { getAccessibleLinkLabel } from "../../utils/a11y-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { breakpointToToken, getColorByName } from "../../utils/token-utils";
 /**
@@ -95,18 +96,6 @@ export class DuetLink {
     screenTest(event) {
         this.isSmallScreen = event.matches;
     }
-    getAccessibleLabel() {
-        if (this.accessibleLabel) {
-            return this.accessibleLabel;
-        }
-        if ((!!this.download || this.download === "") && this.element.textContent) {
-            return `${this.element.textContent}. ${this.accessibleLabelDownload}.`;
-        }
-        if (this.external && this.element.textContent) {
-            return `${this.element.textContent}. ${this.accessibleLabelExternal}.`;
-        }
-        return null;
-    }
     resolveDownload() {
         if (this.download === "") {
             return this.url.split("/").pop();
@@ -144,10 +133,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: '75eb01922ce99815e41ce9ad2debcd3a7adf0289', class: {
+        return (h(Host, { key: 'ec5433304f9679e5b88eaff914e6bddf9f9b5aa9', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '939df1d20c0a1e9beca877828c2e5aea3b6d6279', href: this.url, class: {
+            } }, h(Tag, { key: '491399aa70b38266a7377c118c8b15281ca2b0ae', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -158,7 +147,7 @@ export class DuetLink {
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
+            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
     }
     static get is() { return "duet-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,7 +72,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '1fe1ac541aeae071f5684e90937cee1a4be689d6', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '166ca55ff1ca8e804357bf991b84ede3eac45d13' })));
+        return (h("dl", { key: 'be789bab546df8b0ac070d09a5f5c47f5f428afe', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '645ee0c7c623eeed042e25ac2ea7aab51ef1a2bc' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 :host dt {
   padding-bottom: 4px;
@@ -117,31 +117,31 @@
 
 :host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,
 :host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dd {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 
 :host(.duet-list-bordered) {
-  border-block-start: 1px solid rgb(225, 227, 230);
+  border-block-start: 1px solid rgb(212, 223, 229);
 }
 
 :host(.duet-list-bordered:last-child) {
-  border-block-end: 1px solid rgb(225, 227, 230);
+  border-block-end: 1px solid rgb(212, 223, 229);
 }
 
 :host(.duet-list-bordered.duet-theme-turva) {
-  border-block-start: 1px solid rgb(228, 228, 230);
+  border-block-start: 1px solid rgb(222, 224, 228);
 }
 
 :host(.duet-list-bordered.duet-theme-turva:last-child) {
-  border-block-end: 1px solid rgb(228, 228, 230);
+  border-block-end: 1px solid rgb(222, 224, 228);
 }
 
 :host(.duet-list-inner-bordered:not(:last-child)) {
-  border-block-end: 1px solid rgb(225, 227, 230);
+  border-block-end: 1px solid rgb(212, 223, 229);
 }
 
 :host(.duet-list-inner-bordered.duet-theme-turva:not(:last-child)) {
-  border-block-end: 1px solid rgb(228, 228, 230);
+  border-block-end: 1px solid rgb(222, 224, 228);
 }
 
 :host(.duet-no-stacking) {

package/lib/collection/components/duet-list-item/duet-list-item.js

@@ -16,14 +16,14 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '51727fd3a93ff7c60c621ac1d7e7cc81f968c64c', class: {
+        return (h(Host, { key: '8ea67eb69ce2d638bdf492eb1980adf5678a70cc', class: {
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
                 "duet-list-item-breakpoint-small": this.breakpoint === "small",
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: 'efa1422d25f7b0b30977b274edd33c65ffbb098a' }, h("slot", { key: '985fb259b41d4167c1b30101a8774672b3f04366', name: "label" })), h("dd", { key: 'b2708677ba4d4b9695f44dea7249243db286552d' }, h("slot", { key: 'fe82ff7e6aa8ba8862700260087dcc1e4cd9a5ed', name: "value" }))));
+            } }, h("dt", { key: '52462aab89bb1aa49a4619fc6dec65f588d68504' }, h("slot", { key: '137c07b54564935aaa3bd0eb568eeac36e2ef9f3', name: "label" })), h("dd", { key: 'bac44b13fab054f32596c5771c990c63a6394d7c' }, h("slot", { key: '95a803389442d0cea6311c60ef2fd4d211f814ec', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,7 +79,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '5d084305a0696301d4a6821758e0689a4c7cb24b', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'bd7ff8798ac2294e92714074abc3a40ac09f84a3', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: 'cd53d85f163bc76250be1e5514b00bf6769e7f54', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '8ec59c6823257e298b0e298a7d6eda2c40725d83', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

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

@@ -71,7 +71,7 @@
   display: block;
   width: 100%;
   height: 1px;
-  background: rgb(225, 227, 230);
+  background: rgb(212, 223, 229);
 }
 .duet-menu-bar.horizontal-nav .more-left {
   position: absolute;
@@ -80,6 +80,7 @@
   z-index: 1;
   width: 56px;
   height: 49px;
+  pointer-events: none;
   background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
 }
 @media (min-width: 62em) {
@@ -94,6 +95,7 @@
   z-index: 1;
   width: 56px;
   height: 49px;
+  pointer-events: none;
   background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
 }
 @media (min-width: 62em) {
@@ -177,7 +179,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-theme-turva .center {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -188,7 +190,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
 }
 .duet-theme-turva .right {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

@@ -143,13 +143,13 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '6772191fb52ef833296d4591848722cdd716fd8a' }, h("nav", { key: 'bbfd138c4487382bf33cd2a27a11abae07c1cd84', class: {
+        return (h(Host, { key: '9a82d643e803955587245cdeab312b2e3cc0daf1' }, h("nav", { key: '8c7c326745b8bc593357acbd1fd629b827f3d6fa', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '0e76aa9cf8e2088809c32ffb889ea7bd0e65f328', class: "top" }), h("div", { key: '3e0e929ab2dabd44122c86b3d89690084d49ee8c', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'daf3d473577d75062dbbdd2f4d277aecffddb806' }, h("duet-logo", { key: 'e560ec5ffbd0ab8c03a2284c6f5c24be44304595', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'f90de1dde38ffad772fd1db9ef1949bd69651a17', class: "list center", role: "list" }, h("div", { key: 'e21ef580e08ebefe3ff5a23da0a6df2d2714c2b0', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'fbfd2e2f6a9d69d0e5f0843d30f723beadde4c1b', name: "center" }), h("div", { key: '6d232d47954eb7590982353aa05a869353cd5103', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '14d79bc82134dd5449172dadccdd94e39508e3ce', class: "list right", role: "list" }, h("slot", { key: '383cc225f16923f7538daf24ef5f5592ace15ece', name: "right" }))), h("div", { key: '5042a82358354e9a77e5f7d022d47bf46e9c6250', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'e24739d56af15972f61b6ab77023cc406065ca18', class: "top" }), h("div", { key: '7417f19867c76f8892ba6afb4186f0f1ac63fe30', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'bb310c770913b93feaa0fa0eb6b7ddb4999a5768' }, h("duet-logo", { key: '98d0d4582de1eae55df9525d27894c879905c9db', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'de2176bb51370d7555b957aaae4ba39f4edac589', class: "list center", role: "list" }, h("div", { key: '754756436eefdf6c3573c140bf82efadfd52230b', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '1b9d20d9511d4e256bf43032f7ca6e8410e92ff8', name: "center" }), h("div", { key: 'b286c85435057052db5a16825e200f19a3362a45', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '9f8c33c495e38d6e4097c09c241021f4dfac2e7c', class: "list right", role: "list" }, h("slot", { key: '60044dd369d475608a15825dc4f4ab37002bb7c4', name: "right" }))), h("div", { key: 'd2867a4033941a35a3c5aab6f513654c6d7ae46b', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,10 +38,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '010c3762832e9c231e6a5854d41fb1c7f4fa28c5', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '6619916a523cc1fec742686d79f04ad770cc4fd9', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '2df6c1b32a0a028fd5a562baa4733c2dfef93af6', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '364c82e9d7ef3b5aed9f7df9608e234f474834cd', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: 'b0d060dca6c2cdca71babf45905f4ef7e4329c57', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '938d21747a7753f9bbfc91e10d39ff0b716fec43' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: 'a143660e0d58efd3eea99181d39e183c2ad2cffe', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '121e0ad7aeb96564c2bbdf6d07c05b4502532eac' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0b4e584af1d151a1e50ec8d9e4b573ceaaccf359', role: "listitem" }, h("div", { key: 'cdd13fd6b2c823bba5df313ba88c5b7d06db4ffb', class: {
+        return (h(Host, { key: '50016c8e96de112a895ab6c1a619cd51db1a1144', role: "listitem" }, h("div", { key: '84f1d55a04eb2ce6da85eaa3a2098709d72f904a', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: '5674f60fef98e6e184f2fcccc764deef331caa12', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '635deadc4d4430289b7b0b9457d621caef017ee8', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '2579445ac0540e1c097ad5af4197743ec84cb1c8', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '3f1783c651ff0c6d9350e4f69d38a029279c9aab', class: "label" }, h("slot", { key: '321d0f11ab687b2324cfdd4320a48cc343ead7bb', name: "label" }), h("duet-icon", { key: 'f3f61be24eec78ead6378f1810ec73f2ec8926e0', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'cb3e00c6342991645136a04cdc2a8075df1cb25a', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '199fc78e9de9a2411dbdcac2a7cf3cdd7741896c', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '47bf8dee8211ea4b73157c3ff6abb4d1765af81d', class: "label" }, h("slot", { key: 'cf7592834315d69ab2606208943b57c814c364df', name: "label" }), h("duet-icon", { key: '59f13d4cd703bb83c454fe4772beaceecff32186', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'ec6ee4c08d94947327d1414068ec363843d4abd7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '8c626d701bb71d84458580a3c17a50ea34c894ed' })))));
+            } }, h("slot", { key: 'e5381a251537978629b818d3771f648122b39968' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '338a7ca1c696467944414aaf0ecdf7628803dc2b' }, h("a", { key: '1160b7ac731c82021899fa8d7c49b9f47517b942', class: {
+        return (h(Host, { key: '586e3ed079d09bf899c1f02c3799e1d46f60bbef' }, h("a", { key: '4480061d9f4de3372052169867f6694c272498ff', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'c82028bea753c8ef4199c146e8d30882284bfb81', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'fb472a9792cb0bcd581fac7ec95c08b5591034d1' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '3dcfc8679e4a1454f6a50efb8aa277ad22faabff', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'c0d05484db5c3de1e32454f3c2025797e240bfcc' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0bd31ec6a4067c93d4aba6cc9f4944071a7941e8', role: "listitem" }, h("a", { key: 'b3457c0d37c58608940f7c4393bf527fd64a3bff', class: {
+        return (h(Host, { key: '5397f75d25382c49004777cc9673b92eb4ebb3c5', role: "listitem" }, h("a", { key: 'd5adf4f588f0108f4bfa82329e5499597e2efbae', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '2c208b3c951b892fb2370804517d0f0ade12c747', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '8153a5aa5771e0337219a845d80e5c5733152594' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '49866f87807a448bec494ece51eac8ba7cb525cf', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'e566b40e827773a58939b25a6f85b69b16aeb59b' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

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