@duetds/components 6.6.1 → 6.7.0

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

@@ -30,12 +30,12 @@
 }
 
 fieldset {
+  position: relative;
   width: 100%;
   min-width: 0;
   border: 0;
 }
-
-legend {
+fieldset legend {
   position: absolute !important;
   top: 0;
   width: 1px !important;

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

@@ -121,7 +121,7 @@
 }
 .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
   padding: 0;
-  margin: 0 0 72px;
+  margin: 0 0 48px;
   overflow: hidden;
   background: none;
 }
@@ -129,32 +129,58 @@
   position: absolute;
   right: 0;
   left: 0;
-  width: 1000px;
-  min-height: 580px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: 220px;
   margin: 0 auto;
 }
+.duet-hero.duet-hero-campaign .background img, .duet-hero.duet-hero-section .background img {
+  height: 100%;
+}
+@media (min-width: 106.25em) {
+  .duet-hero.duet-hero-campaign .background img, .duet-hero.duet-hero-section .background img {
+    width: 100%;
+    height: auto;
+  }
+}
 @media (min-width: 36em) {
   .duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
-    width: 1200px;
+    height: 300px;
+  }
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
+    height: 450px;
   }
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
-    width: 1440px;
+    height: 500px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
+    height: 580px;
+  }
+}
+@media (min-width: 106.25em) {
+  .duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
+    width: 1600px;
+    overflow: hidden;
   }
 }
 .duet-hero.duet-hero-campaign .background .brand-container, .duet-hero.duet-hero-section .background .brand-container {
   position: relative;
   width: 100%;
   height: 100%;
-  min-height: 580px;
+  min-height: 220px;
   overflow: hidden;
 }
 .duet-hero.duet-hero-campaign .background .brand, .duet-hero.duet-hero-section .background .brand {
   position: absolute;
-  left: -300px;
   width: 100%;
-  height: 540px;
+  height: 220px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
@@ -178,7 +204,7 @@
 }
 .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
   position: absolute;
-  top: 230px;
+  top: 153px;
   right: 0;
   left: -100px;
   width: 712.18px;
@@ -190,17 +216,38 @@
   mix-blend-mode: normal;
   transform: rotate(8deg);
 }
+@media (min-width: 22.5em) {
+  .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
+    top: 185px;
+  }
+}
 @media (min-width: 36em) {
   .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
+    top: 215px;
     left: -50px;
   }
 }
-@media (min-width: 62em) {
+@media (min-width: 48em) {
   .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
-    top: 300px;
+    top: 250px;
     left: 0;
   }
 }
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
+    top: 240px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
+    top: 280px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
+    top: 310px;
+  }
+}
 .duet-hero.duet-hero-campaign .duet-hero-text, .duet-hero.duet-hero-section .duet-hero-text {
   width: 100%;
 }
@@ -226,13 +273,38 @@
 .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
   display: flex;
   align-items: center;
-  height: 15rem;
-  margin-bottom: 2rem;
+  height: 6rem;
+  padding: 0 1rem;
+  margin: 1rem 0 4rem;
+}
+@media (min-width: 22.5em) {
+  .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
+    margin: 2rem 0 7rem;
+  }
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
+    margin: 3rem 0 9rem;
+  }
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
+    margin: 4rem 0 10rem;
+  }
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
-    height: 17.875rem;
-    margin-bottom: 6.25rem;
+    margin: 5rem 0 11rem;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
+    margin: 6rem 0 13rem;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign .duet-hero-heading, .duet-hero.duet-hero-section .duet-hero-heading {
+    margin: 8rem 0 13rem;
   }
 }
 .duet-hero.duet-hero-campaign.duet-theme-turva, .duet-hero.duet-hero-section.duet-theme-turva {
@@ -240,7 +312,8 @@
   background: none;
 }
 .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-  top: 200px;
+  top: 115px;
+  left: -125px;
   background: white;
   transform: none;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
@@ -248,41 +321,63 @@
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
   mask-repeat: no-repeat;
 }
-@media (min-width: 36em) {
+@media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-    left: -50px;
+    top: 150px;
+    left: -75px;
   }
 }
-@media (min-width: 62em) {
+@media (min-width: 36em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-    top: 300px;
+    top: 180px;
     left: 0;
   }
 }
-.duet-hero.duet-hero-section .background {
-  min-height: 520px;
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+    top: 220px;
+  }
 }
-.duet-hero.duet-hero-section .background .brand-container {
-  min-height: 520px;
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+    top: 210px;
+  }
 }
-.duet-hero.duet-hero-section .background .brand {
-  height: 500px;
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+    top: 260px;
+  }
+}
+@media (min-width: 106.25em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
+    top: 290px;
+  }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-section .background .brand {
-    height: 1100px;
+  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+    margin: 5rem 0 10rem;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+    margin: 6rem 0 12rem;
+  }
+}
+@media (min-width: 106.25em) {
+  .duet-hero.duet-hero-campaign.duet-theme-turva .duet-hero-heading, .duet-hero.duet-hero-section.duet-theme-turva .duet-hero-heading {
+    margin: 8rem 0 13rem;
   }
 }
 .duet-hero.duet-hero-product {
   position: relative;
   padding: 0;
+  margin: 0 0 48px;
   overflow: hidden;
   background: white;
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product {
     min-height: 544px;
-    padding: 111.6px 56px;
   }
 }
 .duet-hero.duet-hero-product .background {
@@ -299,7 +394,7 @@
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background {
+  .duet-hero.duet-hero-product .background:not(.narrow) {
     position: absolute;
     top: 0;
     right: 0;
@@ -334,7 +429,7 @@
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-image {
+  .duet-hero.duet-hero-product .background .brand-shaped-image:not(.narrow) {
     top: -353px;
     right: -128.15px;
     width: 520px;
@@ -342,10 +437,15 @@
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-image {
+  .duet-hero.duet-hero-product .background .brand-shaped-image:not(.narrow) {
     width: 736px;
   }
 }
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-image.narrow {
+    right: 30%;
+  }
+}
 .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-wrapper {
   position: relative;
   width: 100%;
@@ -369,7 +469,8 @@
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg {
+  .duet-hero.duet-hero-product .background .brand-shaped-image .brand-shaped-image-bg:not(.narrow) {
+    /* stylelint-disable-line */
     width: 800px;
     height: 470px;
   }
@@ -393,7 +494,7 @@
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shape {
+  .duet-hero.duet-hero-product .background .brand-shape:not(.narrow) {
     top: auto;
     top: 79px;
     right: 200px;
@@ -402,7 +503,7 @@
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product .background .brand-shape {
+  .duet-hero.duet-hero-product .background .brand-shape:not(.narrow) {
     right: 414px;
     width: 400px;
     height: 400px;
@@ -430,7 +531,7 @@
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon:not(.narrow) {
     top: 292px;
     right: 220px;
     width: 150px;
@@ -438,29 +539,76 @@
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-icon {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon:not(.narrow) {
     top: 292px;
     right: 220px;
     width: 186px;
     height: 186px;
   }
 }
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon.narrow {
+    right: 35%;
+  }
+}
 .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon {
   width: 80px;
   height: 80px;
   transform: rotate(-7deg);
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon {
+  .duet-hero.duet-hero-product .background .brand-shaped-icon duet-icon:not(.narrow) {
+    /* stylelint-disable-line */
     width: 120px;
     height: 120px;
   }
 }
+.duet-hero.duet-hero-product .duet-hero-wrapper {
+  max-width: 100%;
+  margin: 0 auto;
+}
+.duet-hero.duet-hero-product .duet-hero-wrapper.fluid, .duet-hero.duet-hero-product .duet-hero-wrapper.narrow {
+  padding: 0 16px;
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.fluid {
+    padding: 0 28px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.fluid {
+    padding: 0 56px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.fluid {
+    max-width: 1110px;
+    padding: 0;
+  }
+}
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product .duet-hero-text {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.fluid .duet-hero-text {
     width: 50%;
   }
 }
+.duet-hero.duet-hero-product .duet-hero-wrapper.narrow {
+  max-width: 888px;
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.narrow {
+    padding: 0 48px;
+  }
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.narrow {
+    padding: 0 72px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper.narrow .duet-hero-text {
+    width: 80%;
+  }
+}
 .duet-hero.duet-hero-product.duet-theme-turva {
   background: white;
 }
@@ -639,13 +787,48 @@
     height: 373px;
   }
 }
+.duet-hero.duet-hero-content .duet-hero-wrapper {
+  max-width: 100%;
+  margin: 0 auto;
+}
+.duet-hero.duet-hero-content .duet-hero-wrapper.fluid, .duet-hero.duet-hero-content .duet-hero-wrapper.narrow {
+  padding: 0 16px;
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-content .duet-hero-wrapper.fluid {
+    padding: 0 28px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-content .duet-hero-wrapper.fluid {
+    padding: 0 56px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-content .duet-hero-wrapper.fluid {
+    max-width: 1110px;
+    padding: 0;
+  }
+}
+.duet-hero.duet-hero-content .duet-hero-wrapper.narrow {
+  max-width: 888px;
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-content .duet-hero-wrapper.narrow {
+    padding: 0 48px;
+  }
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-content .duet-hero-wrapper.narrow {
+    padding: 0 72px;
+  }
+}
 .duet-hero.duet-hero-content .duet-hero-text {
-  width: auto;
-  max-width: 732px;
+  max-width: 100%;
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-content .duet-hero-text {
-    margin-left: auto;
+    width: 80%;
   }
 }
 .duet-hero.duet-hero-content.duet-theme-turva {

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

@@ -58,6 +58,7 @@ export class DuetHero {
     this.back = undefined;
     this.listItems = undefined;
     this.actions = undefined;
+    this.layout = "narrow";
   }
   /**
    * Component lifecycle events.
@@ -150,7 +151,7 @@ export class DuetHero {
         "duet-hero-gray-with-back": !!this.processedBack,
         "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
         "duet-hero-left-align": this.leftAlign && !campaignOrSection,
-      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", null, h("div", { class: "background" }, h("div", { class: "brand-container" }, h("div", { class: "brand", style: styles }))), h("div", { class: "brand-shape" }))), this.variation === "product" && this.image && (h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles }))), this.categoryIcon && (h("div", { class: "brand-shaped-icon" }, h("duet-icon", { background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))), this.variation === "content" && this.image && (h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles }))))), h("div", { class: "duet-hero-wrapper" }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", null, h("div", { class: "background" }, h("img", { src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" }))), this.variation === "product" && this.image && (h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))), this.variation === "content" && this.image && (h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles }))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
       this.processedBack && (h("div", { class: "duet-hero-back" }, h("duet-button", { style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
         label: this.processedBack.label,
         href: this.processedBack.href,
@@ -686,6 +687,24 @@ export class DuetHero {
         },
         "attribute": "actions",
         "reflect": false
+      },
+      "layout": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"narrow\" | \"fluid\"",
+          "resolved": "\"fluid\" | \"narrow\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Layout."
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "\"narrow\""
       }
     };
   }

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

@@ -322,7 +322,7 @@ duet-caption:not(:last-of-type) {
 }
 
 .duet-input-tooltip::after {
-  display: block;
+  display: inline-block;
   height: 49px;
   content: " ";
 }

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

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 const icons = {
   search: searchIcon,
   email: emailIcon,
@@ -25,36 +25,36 @@ export class DuetInput {
     this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
     this.errorId = createID("DuetError");
     this.disallowPatternRegex = null;
-    this.clearLabel = getLocaleString({
+    this.clearLabel = {
       en: "Clear",
       fi: "Tyhjennä",
       sv: "Rensa",
-    });
-    this.timeAnnouncement = getLocaleString({
+    };
+    this.timeAnnouncement = {
       en: "Time",
       fi: "Aika",
       sv: "Tid",
-    });
-    this.showPasswordLabel = getLocaleString({
+    };
+    this.showPasswordLabel = {
       en: "Show password",
       fi: "Näytä salasana",
       sv: "Visa lösenord",
-    });
-    this.hidePasswordLabel = getLocaleString({
+    };
+    this.hidePasswordLabel = {
       en: "Hide password",
       fi: "Piilota salasana",
       sv: "Dölj lösenord",
-    });
-    this.passwordShownAriaAnnouncement = getLocaleString({
+    };
+    this.passwordShownAriaAnnouncement = {
       en: "Password is shown",
       fi: "Salasana näytetään",
       sv: "Lösenordet visas",
-    });
-    this.passwordHiddenAriaAnnouncement = getLocaleString({
+    };
+    this.passwordHiddenAriaAnnouncement = {
       en: "Password is hidden",
       fi: "Salasana on piilotettu",
       sv: "Lösenordet är dolt",
-    });
+    };
     /**
      * Component event handling.
      */
@@ -74,7 +74,7 @@ export class DuetInput {
       if (ev.relatedTarget === this.nativeInput || ev.relatedTarget === this.togglePasswordRevealedButton) {
         return;
       }
-      if (this.variation === "revealable") {
+      if (this.variation === "revealable" && this.isPasswordRevealed) {
         this.isPasswordRevealed = false;
       }
       this.isFocused = false;
@@ -146,7 +146,8 @@ export class DuetInput {
       }
       return this.type;
     };
-    this.isPasswordRevealed = false;
+    this.language = getLanguage();
+    this.isPasswordRevealed = undefined;
     this.isFocused = false;
     this.accessibleActiveDescendant = undefined;
     this.accessibleAutocomplete = undefined;
@@ -170,7 +171,7 @@ export class DuetInput {
     this.required = false;
     this.type = "text";
     this.variation = "default";
-    this.label = "label";
+    this.label = "Label";
     this.error = "";
     this.labelHidden = false;
     this.numericKeyboard = false;
@@ -228,6 +229,12 @@ export class DuetInput {
       });
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
@@ -292,7 +299,7 @@ export class DuetInput {
       this.type !== "password" &&
       this.type !== "time" &&
       this.variation !== "button";
-    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { class: {
+    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { class: {
         "duet-input-container": true,
         "duet-theme-turva": this.theme === "turva",
         [`duet-input-variation-${this.variation}`]: true,
@@ -317,7 +324,11 @@ export class DuetInput {
         "duet-input-clear-icon-single": !hasInputIcon,
         "duet-input-clear-icon-double": !!this.icon,
         "duet-input-clear-icon-button": this.variation === "button",
-      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed ? this.hidePasswordLabel : this.showPasswordLabel, margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed ? this.passwordShownAriaAnnouncement : this.passwordHiddenAriaAnnouncement))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
+      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+        ? this.hidePasswordLabel[this.language]
+        : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed
+      ? this.passwordShownAriaAnnouncement[this.language]
+      : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }
@@ -742,7 +753,7 @@ export class DuetInput {
       },
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -756,7 +767,7 @@ export class DuetInput {
         },
         "attribute": "label",
         "reflect": false,
-        "defaultValue": "\"label\""
+        "defaultValue": "\"Label\""
       },
       "error": {
         "type": "string",
@@ -1056,6 +1067,7 @@ export class DuetInput {
   }
   static get states() {
     return {
+      "language": {},
       "isPasswordRevealed": {},
       "isFocused": {}
     };

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

@@ -57,7 +57,10 @@
 }
 
 .duet-link-external {
-  margin-left: 4px;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin-left: -15px;
 }
 
 .duet-tab-to-link {