@duetds/components 9.1.2 → 9.2.1

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.css

@@ -54,7 +54,7 @@
   font-size: 1.25rem;
   font-weight: 800;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -122,7 +122,7 @@ slot {
   --active-translate-y: translateY(1px);
   font-size: 1rem;
   font-weight: 400;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-theme-turva slot {
   color: rgb(23, 28, 58);

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -40,16 +40,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4dd2ace190b42dc603842e0a68bede86a0576849' }, h("div", { key: '3bcae1d437eb66927c58c9d6394668f7e89b96c0', class: {
+        return (h(Host, { key: '269982c1cc2a4a4a433c6acff8005ca71c1f41ca' }, h("div", { key: '35079da119a10dd8c58bd6bedd50a1353ec1a0cf', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '0dc6a0b34fe49504c0a3d50e2d3bc5b46f0edf47', 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: '2d941f4112d301e868fa7f4c21a5f8b5c4d3331f', 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: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '0210db38d3f9ddcfb8d06635554d6d59a655fdf9', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '4cd6d589071a450df12bad944193b1cb1ad884ce', class: "label" }, h("slot", { key: '9426c6a0c178440bb061f2beab412bc89aaab672', name: "label" }), h("duet-icon", { key: '1e1c91b9e194bc0e96b46659e469447ea8a189f2', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '05ac5933fa4af767dd52ac778b7a95a9fdf30a1c', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'ab0e7dfe600cab22bdadc3bada64da8507ae4e7d', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '66fcd7227cf50291da174a203abc3b2025297a54', class: "label" }, h("slot", { key: '087567e55bb30d88454e7634825ebcb473f92308', name: "label" }), h("duet-icon", { key: 'e8dd8981dde647a16acb7acf02f3bcd5e960fea9', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '19fb113e440dabfabb0f7aedd54e47bbbd133d1f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '5d9e9507bb4d8ec3ce3dcc4101b9a1ff432af55a' })))));
+            } }, h("slot", { key: 'f0f15a50aa3dcc67468daaa466a504ee5d8954c2' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a1b6a9855c52785dc640ef0687b936220e386943', class: {
+        return (h(Host, { key: '2c46d1a310dd476d040392ebcda6643f1981d624', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",

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

@@ -23,11 +23,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: '6fc0f9fa723de55cc61a5d730b22703c4822e0cd', class: {
+        return (h(Host, { key: '16af92c8d2b1991913980843b6d2a8dcb8646d67', class: {
                 "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
                 "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
                 "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { key: '7a00a397a9d0ef913cb644f458cf5d79d1db49d3', class: {
+            } }, h("div", { key: 'e381215186c28e547272b8692f541cea84e0679f', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));

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

@@ -128,10 +128,10 @@
   background-color: rgb(198, 12, 48);
 }
 .is-incomplete .duet-step-counter {
-  background-color: rgb(101, 119, 135);
+  background-color: rgb(98, 121, 138);
 }
 .duet-theme-turva.is-incomplete .duet-step-counter {
-  background-color: rgb(116, 116, 117);
+  background-color: rgb(143, 147, 158);
 }
 
 .duet-step-icon {
@@ -163,10 +163,10 @@
     min-height: 20px;
     padding-left: 40px;
     margin-left: 19px;
-    border-left: 2px solid rgb(225, 227, 230);
+    border-left: 2px solid rgb(212, 223, 229);
   }
   .duet-theme-turva .duet-step-content-wrapper {
-    border-color: rgb(228, 228, 230);
+    border-color: rgb(222, 224, 228);
   }
   :host(:last-of-type) .duet-step-content-wrapper {
     min-height: 0;

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

@@ -88,7 +88,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd8aa897bf6b424b99b07e4a91b9e8cf7488a7e71', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '26ea48b5571e3fd4c931ce5b257b7fff3dc6dcf9', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'cf606e1120808187c6a670aab837b54b97096af1', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: '74b2e7ac6dd883d11763974c1f0f962c1e2b2cb8' }))));
+        return (h(Host, { key: '9cd2e878ee57bb71fe5fbd410f88af372dc31cde', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'f97a9e7f94f0968bb70ed9def756541279783bc7', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'c6bc42ab6164ea260b6860c4c8350f8fecc83a2f', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'fa2a987f757693d3f287fc0707466d751d7fb8ba' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@
   position: relative;
   top: 0;
   z-index: 1;
-  background: rgb(243, 249, 252);
+  background: rgb(240, 247, 250);
   transition: top 0.4s;
 }
 .duet-submenu-bar.hidden {
@@ -44,7 +44,7 @@
 }
 @media (min-width: 62em) {
   .duet-submenu-bar {
-    border-bottom: 1px solid rgb(205, 229, 241);
+    border-bottom: 1px solid rgb(198, 225, 238);
   }
 }
 .duet-submenu-bar button {
@@ -57,7 +57,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-submenu-bar button.active .caret {
   transform: rotate(180deg);
@@ -102,8 +102,8 @@
   height: 70vh;
   overflow-y: scroll;
   visibility: visible;
-  background: rgb(243, 249, 252);
-  border-bottom: 1px solid rgb(207, 210, 212);
+  background: rgb(240, 247, 250);
+  border-bottom: 1px solid rgb(181, 198, 208);
 }
 .duet-submenu-bar .items ::slotted(*) {
   position: relative;
@@ -112,7 +112,7 @@
   max-height: 0;
   overflow: hidden;
   visibility: hidden;
-  border-bottom: 0 solid rgb(207, 210, 212);
+  border-bottom: 0 solid rgb(181, 198, 208);
 }
 .duet-submenu-bar .items .list-padding {
   padding-bottom: 188px;
@@ -143,14 +143,14 @@
   }
 }
 .duet-submenu-bar.duet-theme-turva {
-  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-submenu-bar.duet-theme-turva button:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-submenu-bar.duet-theme-turva .items {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-submenu-bar.duet-theme-turva .mobile-background {
   background: rgb(23, 28, 58);

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

@@ -122,19 +122,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '46b42aaf1cf7b5948285be8b8fada1fbb895c29c' }, h("nav", { key: '24fb21f0c3223068128475fee9e711c407c6cc42', class: {
+        return (h(Host, { key: 'a14801d4318c2c85ff8624880333f5f710d8a636' }, h("nav", { key: '1c369dfe0426039d7893a3a8a3d24907bfb010d3', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'fdae5917434838629bea146c0fecd71d6eba5a49', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'ffe8648100e5266b9c17eaa8c1bc92bfcc9d4ba8', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: '741ee52c89789d6f29807af0318e7ad3ce387ea2', class: "label" }, h("slot", { key: 'cc032638072e4bf611fa6f90f4e87a06d6d62011', name: "label" }), h("duet-icon", { key: 'e5d275e6378ca608e4770cf01548db63c53fc921', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '4b3528bc077697f379eee779e85cbd8a0ddb407e', class: {
+            }, onClick: this.onClick }, h("span", { key: '8e313c306bf157aa1381cf39c5bd2332924cf8dd', class: "label" }, h("slot", { key: '428a4a04231e099a5128499ef727673d698d56ef', name: "label" }), h("duet-icon", { key: '8e5a89fdc9fc9caa588f51ae317a8c70549ccec2', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '152257b88008c49c15ef2b505787e69c238653e8', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '22d201c917df952f74c4ce0f28786cfca78c6e5c', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: '3f4346fc605692e6d1aae163dfc05d308bb8542c', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'c602c78831309546c9e825b1b7b77fc92dc3f0fa', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '0a329fa6a2e485a50588f108544dfe414480a3b6' }), h("div", { key: 'cbe81c72e9210a0384d82a5a827a54edf890f020', class: "list-padding" }))), h("duet-overlay", { key: 'e802c1912aa5dc34d0dbf0e265190fc7ba27a1d3', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '5b8d26c95ea0bb9ff8297905308596449f1cbf85', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '34d24d206903d7ecb360e9964687a2f844a2be84' }), h("div", { key: '23aa8b69e73f321edf1742d50381ce108d0bb2db', class: "list-padding" }))), h("duet-overlay", { key: '4c80718a582cf05c6b665bed92c9fd0af0764c6b', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }

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: '361b820b8f227befb95bc64b87c761c2d0396a4f', role: "listitem" }, h("div", { key: '53210cb90b3d5e714d1d8e30cca928b9ca22e416', 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: '2df474dfe088be14b042114456474c876f4b61a0', 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: '89d102ebae36a02c887f3824fffaa4271590d92a', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '31866b710f3df48bfb0aa0dcff165e617e8cc327', class: "label" }, h("span", { key: '193d3e662d773b7ce3bc8e67265469fb254d8f1f', class: "label-text" }, h("slot", { key: 'a1c2a3a7d385a99ad697244ea8ff303bc9f62d34', name: "label" })), h("duet-icon", { key: '7190348fc2dd0ea59e407be5b60de9476a349594', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'c0cad51034312dcdb9ff9ca435f9091ae9ecfc55', 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: 'e53f34efca52841432dd37b703f1ffdaa68eb940' })))));
+            } }, 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: '64c7a859f5b865bc0308445b9d0156156837fe49' }, h("a", { key: 'c44943bce8c5a15f3ede97c010eff57f7f7941c7', 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: '83939de1b509ebcfc60714398b51dcaf374d6b30', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'ce3588496af8ffac960897c667027edd97ae5e65', class: "label-container" }, h("span", { key: '752537ca0a31718f20089bb9804ba19b20c0c443', class: "label" }, h("slot", { key: '16331721c331936cb46311d02038526b00b7bcac' })), this.caret && h("duet-icon", { key: 'ac8613eceb672049fc7d6c05c51e2216d93b61df', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'f18ca26aca59468eac301dd11a1f13a0c77aaa31', 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: '0e1724544b134f6de86d56dd739a9635f337e717', role: "listitem" }, h(TagName, { key: '6f04e57ea3e9bf27a1967283e2375a281d675529', 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: 'e1b98f949d70182538731d1d7f07bd961fd79836', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'af220f398f6bdc969c4de91c5bdf03cb814631f0', class: "label" }, h("span", { key: '6b376bcca90ac606bd44f4dc04026d8eda710004', class: "label-text" }, h("slot", { key: 'cec40ee0c2ca47ee02e3b0ede33d41d8a0e6d797' })), this.trailingIcon && (h("duet-icon", { key: '243fd913a9c6d73489e2d1bcfa60566fa72bfcf6', 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: 'ab3dd8345454b3f0c20458f6302dffaaee6cc002', role: "listitem" }, h("a", { key: 'bcc31509ceddcef3f2c3c58e29c5b108eb8b432f', 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: 'f5d87725bdb14e435d6d4b04ef0c84b1de5d1a3e', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'f24d079552fa8ce924d8dd3125afe01bbd331ab5', class: "label" }, h("slot", { key: '669772430086a3f897f68ab40b5703a75e631f3a' })))));
+        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"; }