@duetds/components 6.6.2 → 6.7.1

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

@@ -91,7 +91,8 @@ export class DuetLabel {
           "resolved": "\"auto\" | \"none\" | \"small\"",
           "references": {
             "DuetLabelMargin": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx"
             }
           }
         },
@@ -113,7 +114,8 @@ export class DuetLabel {
           "resolved": "\"medium\" | \"small\"",
           "references": {
             "DuetLabelSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx"
             }
           }
         },

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

@@ -122,7 +122,8 @@ export class DuetLayout {
           "resolved": "\"with-links\" | \"without-links\"",
           "references": {
             "DuetLayoutStickyDistance": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx"
             }
           }
         },

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

@@ -28,28 +28,28 @@
   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: #0077b3;
+  color: rgb(0, 119, 179);
   text-decoration: underline;
   border-radius: 4px;
   transition: 300ms ease;
 }
 .duet-link:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 .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: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-link:hover {
-  color: #004d80;
+  color: rgb(0, 77, 128);
   text-decoration: none;
 }
 .duet-link:hover.duet-theme-turva {
-  color: #940925;
+  color: rgb(148, 9, 37);
 }
 .duet-link:active {
   opacity: 0.75;
@@ -57,7 +57,10 @@
 }
 
 .duet-link-external {
-  margin-left: 4px;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin-left: -15px;
 }
 
 .duet-tab-to-link {
@@ -71,17 +74,17 @@
   height: 1px;
   overflow: hidden;
   font-weight: 600;
-  color: #0077b3;
+  color: rgb(0, 119, 179);
   text-align: center;
   text-decoration: none;
-  background: white;
+  background: rgb(255, 255, 255);
   border-radius: 4px;
   opacity: 0;
   transition: none;
 }
 .duet-tab-to-link.duet-theme-turva {
   min-width: 120px;
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 @media (min-width: 106.25em) {
   .duet-tab-to-link {

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

@@ -39,12 +39,14 @@ export class DuetLink {
    * Always the last one in the class.
    */
   render() {
+    // Notice that the external icon needs to be places right after the last word of the link.
+    // This is why we use &nbps; to keep everything on the same line.
     return (h(Host, null, h("a", { href: this.url, class: {
         "duet-link": true,
         "duet-link-is-external": this.external,
         "duet-tab-to-link": this.tabToLink,
         "duet-theme-turva": this.theme === "turva",
-      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, h("duet-visually-hidden", null, this.accessibleLabelExternal), h("span", { class: "duet-link-external" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
+      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, "\u00A0\u00A0", h("duet-visually-hidden", null, this.accessibleLabelExternal), "\u00A0", h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
   }
   static get is() { return "duet-link"; }
   static get encapsulation() { return "shadow"; }

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

@@ -160,7 +160,8 @@ export class DuetList {
           "resolved": "\"center\" | \"left\"",
           "references": {
             "DuetListMobileAlignment": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -182,7 +183,8 @@ export class DuetList {
           "resolved": "\"large\" | \"small\"",
           "references": {
             "DuetListBreakpoint": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -204,7 +206,8 @@ export class DuetList {
           "resolved": "\"default\" | \"striped\"",
           "references": {
             "DuetListVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -226,7 +229,8 @@ export class DuetList {
           "resolved": "\"30\" | \"50\" | \"70\"",
           "references": {
             "DuetListLabelWidth": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },

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: #00294d;
+  color: rgb(0, 41, 77);
 }
 @media (max-width: 35.9375em) {
   :host {
@@ -48,7 +48,7 @@
 }
 @media (max-width: 35.9375em) {
   :host dt,
-:host dd {
+  :host dd {
     flex: inherit;
     flex-basis: 100% !important;
     width: 100%;
@@ -99,17 +99,17 @@
 
 :host(.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: #171c3a;
+  color: rgb(23, 28, 58);
 }
 
 :host(.duet-list-striped:nth-child(odd)) dt,
 :host(.duet-list-striped:nth-child(odd)) dd {
-  background: #f5f8fa;
+  background: rgb(245, 248, 250);
 }
 
 :host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,
 :host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dd {
-  background: #f5f5f7;
+  background: rgb(245, 245, 247);
 }
 
 :host(.duet-list-width-30) dt {
@@ -141,7 +141,7 @@
 
 @media (max-width: 35.9375em) {
   :host(.duet-list-mobile-center) dt,
-:host(.duet-list-mobile-center) dd {
+  :host(.duet-list-mobile-center) dd {
     text-align: center;
   }
 }
@@ -151,7 +151,7 @@
     flex-wrap: wrap;
   }
   :host(.duet-list-breakpoint-large) dt,
-:host(.duet-list-breakpoint-large) dd {
+  :host(.duet-list-breakpoint-large) dd {
     flex: inherit;
     flex-basis: 100% !important;
     width: 100%;
@@ -168,7 +168,7 @@
 
 @media (max-width: 61.9375em) {
   :host(.duet-list-breakpoint-large.duet-list-mobile-center) dt,
-:host(.duet-list-breakpoint-large.duet-list-mobile-center) dd {
+  :host(.duet-list-breakpoint-large.duet-list-mobile-center) dd {
     text-align: center !important;
   }
 }

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

@@ -43,10 +43,10 @@
 }
 .duet-logo:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 .duet-logo.duet-logo-en {
   width: 166px;

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

@@ -5,7 +5,7 @@ import { colorBrandBlue, colorBrandGrayTurva, colorGrayLightest, colorPrimaryTur
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { getLanguage } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 const TurvaLogo = ({ inverse, logoId }) => {
   const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
   const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;
@@ -52,6 +52,12 @@ export class DuetLogo {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-logo`. Use this method instead of the global
    * `logo.focus()`.
@@ -161,7 +167,8 @@ export class DuetLogo {
           "resolved": "\"large\" | \"medium\"",
           "references": {
             "DuetLogoSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-logo/duet-logo.tsx"
             }
           }
         },

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

@@ -27,7 +27,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: white;
+  background: rgb(255, 255, 255);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
 }
 @media (min-width: 62em) {
@@ -51,7 +51,7 @@
   display: block;
   width: 93%;
   height: 1px;
-  background: #f5f8fa;
+  background: rgb(245, 248, 250);
 }
 .duet-menu-bar.horizontal-nav .bottom {
   position: absolute;
@@ -60,7 +60,7 @@
   display: block;
   width: 100%;
   height: 1px;
-  background: #e1e3e6;
+  background: rgb(225, 227, 230);
 }
 .duet-menu-bar.horizontal-nav .more-left {
   position: absolute;
@@ -146,27 +146,27 @@
   height: 100%;
 }
 .duet-menu-bar.duet-theme-turva {
-  background: white;
+  background: rgb(255, 255, 255);
 }
 
 slot[name=center] {
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 .duet-theme-turva slot[name=center] {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #940925;
+  color: rgb(148, 9, 37);
 }
 
 slot[name=right] {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #004d80;
+  color: rgb(0, 77, 128);
 }
 .duet-theme-turva slot[name=right] {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #940925;
+  color: rgb(148, 9, 37);
 }

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

@@ -26,7 +26,7 @@ export class DuetMenuBar {
       const active = this.element.querySelector("[active]");
       if (active && active.offsetLeft) {
         if (active.offsetLeft > 50) {
-          this.container.scrollLeft = active.offsetLeft;
+          this.container.scrollLeft = active.offsetLeft - this.element.offsetWidth / 2 + active.offsetWidth / 2;
         }
       }
     };
@@ -200,7 +200,8 @@ export class DuetMenuBar {
           "resolved": "{ originalEvent: Event; name: \"logoClick\"; data: { logoHref: string; }; component: \"duet-menu-bar\"; }",
           "references": {
             "DuetMenuBarChangeEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx"
             }
           }
         }

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

@@ -40,19 +40,19 @@
 }
 @media (min-width: 62em) {
   .duet-menu-bar-button {
-    padding: 0 20px;
+    padding: 0 16px;
   }
 }
-@media (min-width: 64.0625em) {
+@media (min-width: 76.25em) {
   .duet-menu-bar-button {
     padding: 0 28px;
   }
 }
 @media (min-width: 62em) {
   .duet-menu-bar-button:hover {
-    color: #0077b3;
+    color: rgb(0, 119, 179);
   }
   .duet-menu-bar-button:hover.duet-theme-turva {
-    color: #c60c30;
+    color: rgb(198, 12, 48);
   }
 }

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

@@ -23,6 +23,17 @@
   height: 100%;
 }
 
+@media (min-width: 62em) {
+  :host(:last-child) .duet-menu-bar-dropdown button {
+    padding: 0 16px 0 16px;
+  }
+}
+@media (min-width: 76.25em) {
+  :host(:last-child) .duet-menu-bar-dropdown button {
+    padding: 0 16px 0 28px;
+  }
+}
+
 .duet-menu-bar-dropdown {
   position: relative;
   height: 100%;
@@ -40,23 +51,23 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #004d80;
+  color: rgb(0, 77, 128);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-dropdown button {
-    padding: 0 20px;
+    padding: 0 16px;
   }
 }
-@media (min-width: 64.0625em) {
+@media (min-width: 76.25em) {
   .duet-menu-bar-dropdown button {
     padding: 0 28px;
   }
 }
 .duet-menu-bar-dropdown button:hover {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-menu-bar-dropdown button .label {
   display: flex;
@@ -65,13 +76,13 @@
   justify-content: center;
 }
 .duet-menu-bar-dropdown button.active {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-menu-bar-dropdown button.active .caret {
   transform: rotate(180deg);
 }
 .duet-theme-turva .duet-menu-bar-dropdown button.active {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown button.active::after {
   position: absolute;
@@ -82,12 +93,12 @@
   width: 100%;
   height: 2px;
   content: "";
-  background: #0077b3;
+  background: rgb(0, 119, 179);
   transition: 300ms ease;
   transform: translateY(2px);
 }
 .duet-theme-turva .duet-menu-bar-dropdown button.active::after {
-  background: #c60c30;
+  background: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown .items {
   position: absolute;
@@ -100,8 +111,8 @@
   justify-content: center;
   min-width: 225px;
   padding: 1rem 0;
-  color: #00294d;
-  background: #f3f9fc;
+  color: rgb(0, 41, 77);
+  background: rgb(243, 249, 252);
   border-radius: 0 0 8px 8px;
   box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
 }
@@ -110,17 +121,17 @@
 }
 .duet-menu-bar-dropdown.duet-theme-turva 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: #940925;
+  color: rgb(148, 9, 37);
 }
 .duet-menu-bar-dropdown.duet-theme-turva button:hover {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown.duet-theme-turva button.active {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown.duet-theme-turva button.active::after {
-  background: #c60c30;
+  background: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown.duet-theme-turva .items {
-  background: #f5f5f7;
+  background: rgb(245, 245, 247);
 }

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

@@ -36,25 +36,25 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: center;
   text-decoration: none;
 }
 .duet-menu-bar-dropdown-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: #171c3a;
+  color: rgb(23, 28, 58);
 }
 .duet-menu-bar-dropdown-link--slot-right:hover {
-  background: #e6f2f8;
+  background: rgb(230, 242, 248);
 }
 .duet-menu-bar-dropdown-link--slot-right:hover.duet-theme-turva {
-  background: #e4e4e6;
+  background: rgb(228, 228, 230);
 }
 .duet-menu-bar-dropdown-link--slot-below:hover {
-  color: #004d80;
-  background: #f3f9fc;
+  color: rgb(0, 77, 128);
+  background: rgb(243, 249, 252);
 }
 .duet-menu-bar-dropdown-link--slot-below:hover.duet-theme-turva {
-  color: #940925;
-  background: #e4e4e6;
+  color: rgb(148, 9, 37);
+  background: rgb(228, 228, 230);
 }

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

@@ -35,19 +35,20 @@
   color: inherit;
   text-align: center;
   text-decoration: none;
+  white-space: nowrap;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-link {
-    padding: 0 20px;
+    padding: 0 16px;
   }
 }
-@media (min-width: 64.0625em) {
+@media (min-width: 76.25em) {
   .duet-menu-bar-link {
     padding: 0 28px;
   }
 }
 .duet-menu-bar-link.active {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-menu-bar-link.active::after {
   position: absolute;
@@ -59,27 +60,27 @@
   width: 100%;
   height: 1px;
   content: "";
-  background: #0077b3;
+  background: rgb(0, 119, 179);
   transition: 300ms ease;
   transform: translateY(2px);
 }
-@media (min-width: 64.0625em) {
+@media (min-width: 62em) {
   .duet-menu-bar-link.active::after {
     z-index: auto;
     height: 2px;
   }
 }
 .duet-menu-bar-link.active.duet-theme-turva {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-menu-bar-link.active.duet-theme-turva::after {
-  background: #c60c30;
+  background: rgb(198, 12, 48);
 }
 @media (min-width: 62em) {
   .duet-menu-bar-link:hover {
-    color: #0077b3;
+    color: rgb(0, 119, 179);
   }
   .duet-menu-bar-link:hover.duet-theme-turva {
-    color: #c60c30;
+    color: rgb(198, 12, 48);
   }
 }

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

@@ -82,8 +82,8 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.5;
-  color: #00294d;
-  background: white;
+  color: rgb(0, 41, 77);
+  background: rgb(255, 255, 255);
   border-radius: 4px;
   opacity: 0;
   transition: 300ms ease;
@@ -92,7 +92,7 @@
 }
 .duet-theme-turva .duet-modal {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 .duet-modal-active .duet-modal {
   opacity: 1;
@@ -192,7 +192,7 @@
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-decoration: none;
   text-overflow: ellipsis;
   letter-spacing: -0.01rem;