@duetds/components 6.6.2 → 6.7.1

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

@@ -151,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: 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") &&
+      }, 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,
@@ -334,7 +334,8 @@ export class DuetHero {
           "resolved": "\"large\" | \"medium\"",
           "references": {
             "DuetHeroIconSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         },
@@ -550,7 +551,8 @@ export class DuetHero {
           "resolved": "{ [key: string]: any; analyticsId?: string; }",
           "references": {
             "DuetHeroButtonData": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         },
@@ -623,7 +625,8 @@ export class DuetHero {
           "resolved": "\"campaign\" | \"content\" | \"default\" | \"gray\" | \"image\" | \"light\" | \"minimal\" | \"product\" | \"section\"",
           "references": {
             "DuetHeroVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         },
@@ -731,7 +734,8 @@ export class DuetHero {
           "resolved": "{ originalEvent: Event; component: \"duet-hero\"; data: any; }",
           "references": {
             "DuetHeroClickEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         }
@@ -750,7 +754,8 @@ export class DuetHero {
           "resolved": "{ analyticsId: string; component: \"duet-hero\"; }",
           "references": {
             "DuetHeroAnalyticsEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
             }
           }
         }

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

@@ -69,7 +69,7 @@
 }
 .duet-icon.duet-icon-has-background {
   padding: 16px;
-  color: white;
+  color: rgb(255, 255, 255);
 }
 @media (max-width: 35.9375em) {
   .duet-icon.duet-icon-has-background {
@@ -78,7 +78,7 @@
   }
 }
 .duet-icon.duet-icon-has-background.duet-theme-turva, .duet-icon.duet-icon-has-background.duet-theme-default {
-  color: white;
+  color: rgb(255, 255, 255);
 }
 .duet-icon.duet-icon-shape-circle {
   border-radius: 50%;
@@ -100,10 +100,10 @@
   }
 }
 .duet-icon.duet-theme-default {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-icon.duet-theme-turva {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-icon.auto .duet-icon-svg {
   width: 100%;

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

@@ -266,7 +266,8 @@ export class DuetIcon {
           "resolved": "\"auto\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
           "references": {
             "DuetIconSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-icon/duet-icon.tsx"
             }
           }
         },

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

@@ -79,7 +79,7 @@ duet-caption:not(:last-of-type) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  background: white;
+  background: rgb(255, 255, 255);
 }
 
 .duet-input-icon {
@@ -91,12 +91,12 @@ duet-caption:not(:last-of-type) {
   height: 20px;
   font-size: 0;
   line-height: normal;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   pointer-events: none;
   transform: translateY(-50%);
 }
 .duet-theme-turva .duet-input-icon {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 
 .duet-input-container {
@@ -114,11 +114,11 @@ duet-caption:not(:last-of-type) {
   right: -24px;
   min-width: 48px;
   min-height: 48px;
-  color: #004d80;
+  color: rgb(0, 77, 128);
 }
 .duet-input-container.has-clear .duet-input-clear-icon button: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-input-container.has-clear .duet-input-clear-icon button:active {
   opacity: 0.75;
@@ -141,10 +141,10 @@ duet-caption:not(:last-of-type) {
   right: 24px;
 }
 .duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button {
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 .duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button:focus {
-  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-input {
@@ -163,11 +163,11 @@ duet-caption:not(:last-of-type) {
   font-weight: 400 !important;
   font-variant-numeric: tabular-nums;
   line-height: 1.5 !important;
-  color: #00294d !important;
+  color: rgb(0, 41, 77) !important;
   cursor: initial !important;
-  background: white !important;
+  background: rgb(255, 255, 255) !important;
   background-clip: initial !important;
-  border: 1px solid #909599 !important;
+  border: 1px solid rgb(144, 149, 153) !important;
   border-radius: 4px !important;
   box-shadow: initial !important;
   transition: box-shadow 150ms ease, border 150ms ease !important;
@@ -179,24 +179,24 @@ duet-caption:not(:last-of-type) {
   padding-right: 64px !important;
 }
 .has-error .duet-input {
-  border-color: #de2362 !important;
+  border-color: rgb(222, 35, 98) !important;
 }
 .has-error .duet-input + .duet-input-icon {
-  color: #de2362 !important;
+  color: rgb(222, 35, 98) !important;
 }
 .duet-theme-turva.has-error .duet-input {
-  border-color: #e02a0d !important;
+  border-color: rgb(224, 42, 13) !important;
 }
 .duet-theme-turva.has-error .duet-input + .duet-input-icon {
-  color: #e02a0d !important;
+  color: rgb(224, 42, 13) !important;
 }
 .has-icon .duet-input {
   padding-right: 48px !important;
 }
 .duet-theme-turva .duet-input {
   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 !important;
-  border-color: #747475 !important;
+  color: rgb(23, 28, 58) !important;
+  border-color: rgb(116, 116, 117) !important;
 }
 .duet-input::-ms-clear {
   display: none;
@@ -205,92 +205,92 @@ duet-caption:not(:last-of-type) {
   display: none !important;
 }
 .duet-input::-webkit-input-placeholder {
-  color: #657787;
+  color: rgb(101, 119, 135);
   opacity: 1 !important;
   transition: color 300ms ease;
 }
 .duet-theme-turva .duet-input::-webkit-input-placeholder {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .duet-input:focus::-webkit-input-placeholder {
-  color: #cfd2d4;
+  color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-input:focus::-webkit-input-placeholder {
-  color: #cfcfd1;
+  color: rgb(207, 207, 209);
 }
 .duet-input::-moz-placeholder {
-  color: #657787;
+  color: rgb(101, 119, 135);
   opacity: 1 !important;
 }
 .duet-theme-turva .duet-input::-moz-placeholder {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .duet-input:focus::-moz-placeholder {
-  color: #cfd2d4;
+  color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-input:focus::-moz-placeholder {
-  color: #cfcfd1;
+  color: rgb(207, 207, 209);
 }
 .duet-input:-ms-input-placeholder {
-  color: #657787;
+  color: rgb(101, 119, 135);
 }
 .duet-theme-turva .duet-input:-ms-input-placeholder {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .duet-input:focus:-ms-input-placeholder {
-  color: #cfd2d4;
+  color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-input:focus:-ms-input-placeholder {
-  color: #cfcfd1;
+  color: rgb(207, 207, 209);
 }
 .duet-input[disabled] {
-  color: #00294d !important;
+  color: rgb(0, 41, 77) !important;
   cursor: text !important;
-  background: #f5f8fa !important;
-  border-color: #f5f8fa !important;
+  background: rgb(245, 248, 250) !important;
+  border-color: rgb(245, 248, 250) !important;
   box-shadow: none !important;
   opacity: 1 !important;
-  -webkit-text-fill-color: #00294d !important;
+  -webkit-text-fill-color: rgb(0, 41, 77) !important;
 }
 .duet-theme-turva .duet-input[disabled] {
-  color: #171c3a !important;
-  background: #f5f5f7 !important;
-  border-color: #f5f5f7 !important;
-  -webkit-text-fill-color: #171c3a !important;
+  color: rgb(23, 28, 58) !important;
+  background: rgb(245, 245, 247) !important;
+  border-color: rgb(245, 245, 247) !important;
+  -webkit-text-fill-color: rgb(23, 28, 58) !important;
 }
 .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #909599 !important;
+  box-shadow: 0 0 0 1px rgb(144, 149, 153) !important;
 }
 .duet-theme-turva .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #747475 !important;
+  box-shadow: 0 0 0 1px rgb(116, 116, 117) !important;
 }
 .has-error .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #de2362;
+  box-shadow: 0 0 0 1px rgb(222, 35, 98);
 }
 .duet-theme-turva.has-error .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #e02a0d;
+  box-shadow: 0 0 0 1px rgb(224, 42, 13);
 }
 .duet-input:focus {
-  border-color: #0077b3 !important;
+  border-color: rgb(0, 119, 179) !important;
   outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
+  box-shadow: 0 0 0 1px rgb(0, 119, 179) !important;
   transition: none;
 }
 .duet-theme-turva .duet-input:focus {
-  border-color: #171c3a !important;
-  box-shadow: 0 0 0 1px #171c3a !important;
+  border-color: rgb(23, 28, 58) !important;
+  box-shadow: 0 0 0 1px rgb(23, 28, 58) !important;
 }
 .duet-theme-turva .duet-input:focus + .duet-input-icon {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 .has-error .duet-input:focus {
-  box-shadow: 0 0 0 1px #de2362;
+  box-shadow: 0 0 0 1px rgb(222, 35, 98);
 }
 .duet-theme-turva.has-error .duet-input:focus {
-  box-shadow: 0 0 0 1px #e02a0d;
+  box-shadow: 0 0 0 1px rgb(224, 42, 13);
 }
 .duet-input:focus + .duet-input-icon {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-input[type=search]:not(:placeholder-shown):focus + .duet-input-icon {
   display: none;
@@ -333,7 +333,7 @@ duet-caption:not(:last-of-type) {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #657787;
+  color: rgb(101, 119, 135);
   border-radius: 4px;
 }
 .duet-input-help span {
@@ -342,13 +342,13 @@ duet-caption:not(:last-of-type) {
 }
 .duet-theme-turva .duet-input-help {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .has-error .duet-input-help {
-  color: #de2362;
+  color: rgb(222, 35, 98);
 }
 .duet-theme-turva.has-error .duet-input-help {
-  color: #e02a0d;
+  color: rgb(224, 42, 13);
 }
 
 .duet-label-hidden duet-label {
@@ -405,13 +405,13 @@ duet-caption:not(:last-of-type) {
   align-items: center;
   justify-content: flex-start;
   width: auto;
-  border: 1px solid #909599;
+  border: 1px solid rgb(144, 149, 153);
   border-radius: 4px;
   box-shadow: initial;
   transition: box-shadow 150ms ease, border 150ms ease;
 }
 .duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-input-variation-revealable .duet-input-relative duet-button {
   z-index: 250;
@@ -425,33 +425,33 @@ duet-caption:not(:last-of-type) {
   box-shadow: none !important;
 }
 .duet-input-variation-revealable.disabled .duet-input-relative {
-  background: #f5f8fa;
-  border-color: #e1e3e6;
+  background: rgb(245, 248, 250);
+  border-color: rgb(225, 227, 230);
   box-shadow: none;
 }
 .duet-input-variation-revealable.has-error .duet-input-relative {
-  border-color: #de2362;
+  border-color: rgb(222, 35, 98);
 }
 .duet-input-variation-revealable.duet-theme-turva.has-error .duet-input-relative {
-  border-color: #e02a0d;
+  border-color: rgb(224, 42, 13);
 }
 .duet-input-variation-revealable.has-focus .duet-input-relative {
-  border-color: #0077b3;
-  box-shadow: 0 0 0 1px #0077b3;
+  border-color: rgb(0, 119, 179);
+  box-shadow: 0 0 0 1px rgb(0, 119, 179);
 }
 .duet-input-variation-revealable.duet-theme-turva.has-focus .duet-input-relative {
-  border-color: #171c3a;
-  box-shadow: 0 0 0 1px #171c3a;
+  border-color: rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px rgb(23, 28, 58);
 }
 .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #909599;
+  box-shadow: 0 0 0 1px rgb(144, 149, 153);
 }
 .duet-input-variation-revealable.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #747475;
+  box-shadow: 0 0 0 1px rgb(116, 116, 117);
 }
 .duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #de2362;
+  box-shadow: 0 0 0 1px rgb(222, 35, 98);
 }
 .duet-input-variation-revealable.duet-theme-turva.has-error:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #e02a0d;
+  box-shadow: 0 0 0 1px rgb(224, 42, 13);
 }

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"; }
@@ -704,7 +715,8 @@ export class DuetInput {
           "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\"",
           "references": {
             "DuetInputType": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -726,7 +738,8 @@ export class DuetInput {
           "resolved": "\"button\" | \"default\" | \"revealable\"",
           "references": {
             "DuetVariationType": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -742,7 +755,7 @@ export class DuetInput {
       },
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -756,7 +769,7 @@ export class DuetInput {
         },
         "attribute": "label",
         "reflect": false,
-        "defaultValue": "\"label\""
+        "defaultValue": "\"Label\""
       },
       "error": {
         "type": "string",
@@ -905,7 +918,8 @@ export class DuetInput {
           "resolved": "\"date\" | \"input\" | \"number\"",
           "references": {
             "DuetInputComponentType": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         },
@@ -1056,6 +1070,7 @@ export class DuetInput {
   }
   static get states() {
     return {
+      "language": {},
       "isPasswordRevealed": {},
       "isFocused": {}
     };
@@ -1076,7 +1091,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1095,7 +1111,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1114,7 +1131,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1133,7 +1151,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }
@@ -1152,7 +1171,8 @@ export class DuetInput {
           "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
           "references": {
             "DuetInputEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
             }
           }
         }

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

@@ -60,7 +60,7 @@ label {
   font-size: 1rem;
   font-weight: 600 !important;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: left;
   word-break: break-word;
 }
@@ -79,5 +79,5 @@ label span {
 
 :host(.duet-theme-turva) label {
   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);
 }