@duetds/components 6.6.2 → 6.7.1

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

@@ -258,7 +258,8 @@ export class DuetPagination {
       }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, h("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-first": true,
-      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
+      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages &&
+      this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-last": true,
       }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.current === this.totalPages &&
@@ -327,7 +328,8 @@ export class DuetPagination {
           "resolved": "\"compact\" | \"default\"",
           "references": {
             "DuetPaginationVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx"
             }
           }
         },
@@ -569,7 +571,8 @@ export class DuetPagination {
           "resolved": "{ originalEvent?: Event; component: \"duet-pagination\"; current: number; take: number; from: number; to: number; type: \"page\" | \"jump\"; }",
           "references": {
             "DuetPaginationPageEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx"
             }
           }
         }

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

@@ -37,7 +37,7 @@
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: 1.5;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 .duet-paragraph.duet-p-0 {
   padding: 0 !important;
@@ -47,7 +47,7 @@
 }
 .duet-paragraph.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-paragraph.duet-paragraph-small {
   font-size: 0.875rem;
@@ -85,20 +85,20 @@
   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;
   transition: 300ms ease;
 }
 ::slotted(a).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);
 }
 ::slotted(a):hover {
-  color: #004d80;
+  color: rgb(0, 77, 128);
   text-decoration: none;
 }
 ::slotted(a):hover.duet-theme-turva {
-  color: #940925;
+  color: rgb(148, 9, 37);
 }
 ::slotted(a):active {
   opacity: 0.75;

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

@@ -106,7 +106,8 @@ export class DuetParagraph {
           "resolved": "\"medium\" | \"small\"",
           "references": {
             "DuetParagraphSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },
@@ -128,7 +129,8 @@ export class DuetParagraph {
           "resolved": "\"bold\" | \"semi-bold\"",
           "references": {
             "DuetParagraphWeight": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },
@@ -150,7 +152,8 @@ export class DuetParagraph {
           "resolved": "\"default\" | \"intro\"",
           "references": {
             "DuetParagraphVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },

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

@@ -44,22 +44,22 @@
   width: 100%;
   height: inherit;
   min-height: 1px;
-  background-color: #f3f9fc;
+  background-color: rgb(243, 249, 252);
   border-radius: 0;
   box-shadow: none;
 }
 .duet-theme-turva .duet-progress .progress-bar {
-  background-color: #fcf3f4;
+  background-color: rgb(252, 243, 244);
 }
 .duet-progress .progress-bar > span {
   display: block;
   height: inherit;
   text-indent: -9999px;
-  background-color: #0077b3;
+  background-color: rgb(0, 119, 179);
   border-radius: 0;
 }
 .duet-theme-turva .duet-progress .progress-bar > span {
-  background-color: #c60c30;
+  background-color: rgb(198, 12, 48);
 }
 .duet-progress progress[value] {
   display: flex;
@@ -67,7 +67,7 @@
   height: inherit;
   min-height: 1px;
   /* For IE10 */
-  color: #0077b3;
+  color: rgb(0, 119, 179);
   /* Get rid of default border in Firefox. */
   border: 0 none;
   /* Reset the default appearance */
@@ -76,28 +76,28 @@
   appearance: none;
 }
 .duet-theme-turva .duet-progress progress[value] {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-progress progress[value]::-webkit-progress-bar {
-  background-color: #f3f9fc;
+  background-color: rgb(243, 249, 252);
   border-radius: 0;
 }
 .duet-theme-turva .duet-progress progress[value]::-webkit-progress-bar {
-  background-color: #fcf3f4;
+  background-color: rgb(252, 243, 244);
 }
 .duet-progress progress[value]::-webkit-progress-value {
-  background-color: #0077b3;
+  background-color: rgb(0, 119, 179);
   background-size: 35px 20px, 100% 100%, 100% 100%;
   border-radius: 0;
   -webkit-animation: animate-stripes 5s linear infinite;
   animation: animate-stripes 5s linear infinite;
 }
 .duet-theme-turva .duet-progress progress[value]::-webkit-progress-value {
-  background-color: #c60c30;
+  background-color: rgb(198, 12, 48);
 }
 .duet-progress progress[value] ::-moz-progress-bar {
-  background-color: #f3f9fc;
+  background-color: rgb(243, 249, 252);
 }
 .duet-theme-turva .duet-progress progress[value] ::-moz-progress-bar {
-  background-color: #fcf3f4;
+  background-color: rgb(252, 243, 244);
 }

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

@@ -76,7 +76,7 @@
   font-weight: 400;
   hyphens: auto;
   line-height: 1.5;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   word-break: break-word;
   overflow-wrap: break-word;
   cursor: pointer;
@@ -84,7 +84,7 @@
 }
 .duet-theme-turva .duet-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);
 }
 .duet-label span {
   flex-grow: 1;
@@ -125,18 +125,18 @@
   height: 20px;
   margin: 2px 10px 1px 1px;
   content: "";
-  background: white;
-  border: 1px solid #00294d;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(0, 41, 77);
   border-radius: 50%;
 }
 .duet-theme-turva .duet-radio + label::before {
-  border-color: #171c3a;
+  border-color: rgb(23, 28, 58);
 }
 .duet-radio:focus + label::before {
-  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-radio:focus + label::before {
-  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-radio:checked + label::after {
   position: absolute;
@@ -147,34 +147,34 @@
   width: 12px;
   height: 12px;
   content: "";
-  background: #00294d;
+  background: rgb(0, 41, 77);
   border-radius: 50%;
 }
 .duet-theme-turva .duet-radio:checked + label::after {
-  background: #171c3a;
+  background: rgb(23, 28, 58);
 }
 .duet-radio[disabled] {
   cursor: default;
 }
 .duet-radio[disabled] + label {
-  color: #657787;
+  color: rgb(101, 119, 135);
 }
 .duet-theme-turva .duet-radio[disabled] + label {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .duet-radio[disabled] + label::before {
-  border-color: #cfd2d4;
+  border-color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-radio[disabled] + label::before {
-  border-color: #cfcfd1;
+  border-color: rgb(207, 207, 209);
 }
 .duet-radio[disabled]:checked + label::before {
-  border: 1px solid #657787;
+  border: 1px solid rgb(101, 119, 135);
 }
 .duet-radio[disabled]:checked + label::after {
-  background: #657787;
+  background: rgb(101, 119, 135);
 }
 .duet-theme-turva .duet-radio[disabled]:checked + label::after {
-  background: #747475;
-  border-color: #747475;
+  background: rgb(116, 116, 117);
+  border-color: rgb(116, 116, 117);
 }

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

@@ -533,7 +533,8 @@ export class DuetRadio {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-radio\"; }",
           "references": {
             "DuetRadioEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }
@@ -552,7 +553,8 @@ export class DuetRadio {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-radio\"; }",
           "references": {
             "DuetRadioEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }
@@ -571,7 +573,8 @@ export class DuetRadio {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-radio\"; }",
           "references": {
             "DuetRadioEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }

package/lib/collection/components/duet-range-slider/duet-range-slider.css

@@ -59,18 +59,18 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
-  color: #00294d;
-  background: white;
+  color: rgb(0, 41, 77);
+  background: rgb(255, 255, 255);
 }
 .duet-theme-turva .duet-output {
   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-range-disabled .duet-output {
-  color: #909599;
+  color: rgb(144, 149, 153);
 }
 .duet-range-disabled.duet-theme-turva .duet-output {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 
 .duet-range {
@@ -78,11 +78,11 @@
   z-index: 100;
   width: 100%;
   height: 4px;
-  background: #cfd2d4;
+  background: rgb(207, 210, 212);
   border-radius: 4px;
 }
 .duet-theme-turva .duet-range {
-  background: #cfcfd1;
+  background: rgb(207, 207, 209);
 }
 .duet-ie .duet-range {
   display: block;
@@ -105,10 +105,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-range:focus {
-  box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(0, 119, 179, 0.75);
+  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgba(0, 119, 179, 0.75);
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-range:focus {
-  box-shadow: 0 0 0 1px white, 0 0 0 3px #171c3a;
+  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(23, 28, 58);
 }
 .duet-range::-webkit-slider-runnable-track {
   background: transparent;
@@ -118,14 +118,14 @@
   width: 24px;
   height: 24px;
   cursor: -webkit-grab;
-  background: white;
-  border: 1px solid #909599;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(144, 149, 153);
   border-radius: 50%;
   transition: box-shadow 300ms ease;
   -webkit-appearance: none;
 }
 .duet-theme-turva .duet-range::-webkit-slider-thumb {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-range:active::-webkit-slider-thumb {
   cursor: -webkit-grabbing;
@@ -135,13 +135,13 @@
   width: 24px;
   height: 24px;
   cursor: -moz-grab;
-  background: white;
-  border: 1px solid #909599;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(144, 149, 153);
   border-radius: 50%;
   appearance: none;
 }
 .duet-theme-turva .duet-range::-moz-range-thumb {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-range:active::-moz-range-thumb {
   cursor: -moz-grabbing;
@@ -151,59 +151,59 @@
   width: 24px;
   height: 24px;
   overflow: visible;
-  background: white;
-  border: 1px solid #909599;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(144, 149, 153);
   border-radius: 50%;
 }
 .duet-theme-turva .duet-range::-ms-thumb {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-range:disabled {
-  background: #cfd2d4 !important;
+  background: rgb(207, 210, 212) !important;
 }
 .duet-theme-turva .duet-range:disabled {
-  background: #cfcfd1 !important;
+  background: rgb(207, 207, 209) !important;
 }
 .duet-range:disabled::-webkit-slider-thumb {
   cursor: default;
-  background: #cfd2d4;
+  background: rgb(207, 210, 212);
   border-color: transparent;
 }
 .duet-theme-turva .duet-range:disabled::-webkit-slider-thumb {
-  background: #cfcfd1;
+  background: rgb(207, 207, 209);
   border-color: transparent;
 }
 .duet-range:disabled::-moz-range-thumb {
   cursor: default;
-  background: #cfd2d4;
+  background: rgb(207, 210, 212);
   border-color: transparent;
 }
 .duet-theme-turva .duet-range:disabled::-moz-range-thumb {
-  background: #cfcfd1;
+  background: rgb(207, 207, 209);
   border-color: transparent;
 }
 .duet-range:disabled::-ms-thumb {
   cursor: default;
-  background: #cfd2d4;
+  background: rgb(207, 210, 212);
   border-color: transparent;
 }
 .duet-theme-turva .duet-range:disabled::-ms-thumb {
-  background: #cfcfd1;
+  background: rgb(207, 207, 209);
   border-color: transparent;
 }
 .duet-range::-ms-fill-lower {
   height: 4px;
-  background: #0077b3;
+  background: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-range::-ms-fill-lower {
-  background: #c60c30;
+  background: rgb(198, 12, 48);
 }
 .duet-range::-ms-fill-upper {
   height: 4px;
-  background: #cfd2d4;
+  background: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-range::-ms-fill-upper {
-  background: #cfcfd1;
+  background: rgb(207, 207, 209);
 }
 
 .duet-label-hidden duet-label,

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -511,7 +511,8 @@ export class DuetRangeSlider {
           "resolved": "{ originalEvent?: Event; component: \"duet-range-slider\"; value: number; }",
           "references": {
             "DuetRangeChangeEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
             }
           }
         }
@@ -530,7 +531,8 @@ export class DuetRangeSlider {
           "resolved": "{ originalEvent?: Event; component: \"duet-range-slider\"; value: number; }",
           "references": {
             "DuetRangeChangeEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
             }
           }
         }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.css

@@ -42,7 +42,7 @@
 }
 .duet-range-stepper .duet-range-step-counter {
   font-weight: 600;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 .duet-range-stepper ::part(button) {
   border: 0;

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

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isMinusKey, isPlusKey, } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 /**
  * @part navigation-arrow - this part enables style overrides for the navigation-arrow
  * @part range-numbers - this part enables style overrides for the range-numbers
@@ -20,6 +20,7 @@ export class DuetRangeStepper {
       this.clampStepIndex();
       this.handleStepClick(e);
     };
+    this.language = getLanguage();
     this.theme = "";
     this.stepIndex = 1;
     this.stepSize = 50;
@@ -44,6 +45,11 @@ export class DuetRangeStepper {
     this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
     this.ariaControls = "";
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.ariaLabels === this.ariaLabelsDefaults[oldValue]) {
+      this.ariaLabels = getLocaleString(this.ariaLabelsDefaults, newValue);
+    }
+  }
   watchStepIndexStateHandler(newValue) {
     if (this.element.shadowRoot.childElementCount > 0) {
       if (newValue <= 1) {
@@ -85,6 +91,12 @@ export class DuetRangeStepper {
   componentDidLoad() {
     this.watchStepIndexStateHandler(this.stepIndex);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   clampStepIndex() {
     if (this.stepIndex < 1) {
       this.stepIndex = 1;
@@ -261,7 +273,7 @@ export class DuetRangeStepper {
       },
       "ariaLabels": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "Record<string, string>",
           "resolved": "{ [x: string]: string; }",
@@ -299,6 +311,11 @@ export class DuetRangeStepper {
       }
     };
   }
+  static get states() {
+    return {
+      "language": {}
+    };
+  }
   static get events() {
     return [{
         "method": "duetRangeStepUpdate",
@@ -315,7 +332,8 @@ export class DuetRangeStepper {
           "resolved": "{ originalEvent: KeyboardEvent | MouseEvent; component: \"duet-range-stepper\"; from: number; to: number; index: number; }",
           "references": {
             "DuetRangeStepperUpdateEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
             }
           }
         }
@@ -324,6 +342,9 @@ export class DuetRangeStepper {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "stepIndex",
         "methodName": "watchStepIndexStateHandler"
       }, {