@duetds/components 6.8.2 → 6.8.4

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

@@ -2,13 +2,13 @@
  * Built with Duet Design System
  */
 import infoIcon from "@duetds/icons/lib/assets/messaging-info";
-import { Build, h, Host } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey, isKeyboardClick, isQuestionKey } from "../../utils/keyboard-utils";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot label - Label content.
@@ -94,6 +94,7 @@ export class DuetChoice {
     this.isHovering = false;
     this.isInfoOpen = false;
     this.isBlurred = false;
+    this.language = getLanguage();
     this.theme = "";
     this.label = "label";
     this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
@@ -122,12 +123,20 @@ export class DuetChoice {
     this.disabled = false;
     this.required = false;
     this.infoLabelDefaults = {
-      fi: "Lisätietoja",
+      fi: "Lisätietoja vaihtoehdosta",
       en: "More information about",
       sv: "Mera information om",
     };
     this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelInfoButton === this.accessibleLabelInfoButtonDefaults[oldValue]) {
+      this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults, newValue);
+    }
+    if (newValue !== oldValue && this.infoLabel === this.infoLabelDefaults[oldValue]) {
+      this.infoLabel = getLocaleString(this.infoLabelDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -143,6 +152,12 @@ export class DuetChoice {
       : !!this.element.querySelector(":scope > [slot='label']");
     this.hasBeforeText = !!this.element.querySelector("[slot='before-text']");
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Component event handling.
    */
@@ -327,7 +342,7 @@ export class DuetChoice {
       },
       "accessibleLabelInfoButton": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -803,11 +818,11 @@ export class DuetChoice {
         },
         "attribute": "accessible-label-info-default",
         "reflect": false,
-        "defaultValue": "{\n    fi: \"Lis\u00E4tietoja\",\n    en: \"More information about\",\n    sv: \"Mera information om\",\n  }"
+        "defaultValue": "{\n    fi: \"Lis\u00E4tietoja vaihtoehdosta\",\n    en: \"More information about\",\n    sv: \"Mera information om\",\n  }"
       },
       "infoLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -818,7 +833,7 @@ export class DuetChoice {
         "docs": {
           "tags": [{
               "name": "default",
-              "text": "{\nfi: \"Lis\u00E4tietoja\",\nen: \"More information about\",\nsv: \"Mera information om\",\n}"
+              "text": "{\nfi: \"Lis\u00E4tietoja vaihtoehdosta\",\nen: \"More information about\",\nsv: \"Mera information om\",\n}"
             }],
           "text": "Hint text to display before the user types into the date picker input."
         },
@@ -832,7 +847,8 @@ export class DuetChoice {
     return {
       "isHovering": {},
       "isInfoOpen": {},
-      "isBlurred": {}
+      "isBlurred": {},
+      "language": {}
     };
   }
   static get events() {
@@ -852,7 +868,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -872,7 +888,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -892,7 +908,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -941,6 +957,12 @@ export class DuetChoice {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "blur",

package/lib/collection/components/duet-choice-group/duet-choice-group.css

@@ -26,6 +26,7 @@
 
 :host(.horizontal) .duet-choice-group {
   display: block;
+  margin-bottom: 0;
 }
 :host(.horizontal) .duet-choice-group.duet-no-stacking {
   display: flex;
@@ -33,7 +34,6 @@
 @media (max-width: 35.9375em) {
   :host(.horizontal) .duet-choice-group {
     display: flex;
-    margin-bottom: 0;
   }
 }
 

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

@@ -78,6 +78,9 @@
   cursor: pointer;
   border-radius: 4px;
 }
+.duet-collapsible-heading.duet-collapsible-heading-centered {
+  margin: auto;
+}
 .duet-collapsible-heading.duet-collapsible-normal-weight {
   font-weight: 400;
 }

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

@@ -65,6 +65,7 @@ export class DuetCollapsible {
     this.theme = "";
     this.accessibleLabel = undefined;
     this.heading = "";
+    this.centerHeading = false;
     this.headingWeight = "semibold";
     this.headingSize = undefined;
     this.headingLevel = undefined;
@@ -98,6 +99,7 @@ export class DuetCollapsible {
     const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, null, h("button", { class: {
         "duet-collapsible-heading": true,
+        "duet-collapsible-heading-centered": this.centerHeading,
         "duet-theme-turva": this.theme === "turva",
         "duet-collapsible-normal-weight": this.headingWeight === "normal",
         "has-after-heading": this.hasAfterHeading,
@@ -175,6 +177,24 @@ export class DuetCollapsible {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "centerHeading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Centers heading inside its container"
+        },
+        "attribute": "center-heading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "headingWeight": {
         "type": "string",
         "mutable": false,
@@ -184,7 +204,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleWeight": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         },
@@ -207,7 +227,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleHeadingFontSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         },
@@ -304,7 +324,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         }

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

@@ -467,7 +467,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         },
@@ -568,7 +568,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         }
@@ -592,7 +592,7 @@ export class DuetCombobox {
             },
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           },
           "return": "Promise<string>"

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -99,7 +99,7 @@ export class DuetCookieConsent {
           "references": {
             "DuetCookieConsentEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
             }
           }
         }

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import i18n from "./date-i18n";
 import { DatePickerInput } from "./date-picker-input";
 import { DatePickerMonth } from "./date-picker-month";
@@ -153,6 +153,11 @@ export class DuetDatePicker {
     this.incrementYears = 10;
     this.validity = undefined;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.placeholder === this.placeholderDefaults[oldValue]) {
+      this.placeholder = getLocaleString(this.placeholderDefaults, newValue);
+    }
+  }
   updateValidity() {
     this.determineValidity(parseISODate(this.value));
   }
@@ -196,6 +201,12 @@ export class DuetDatePicker {
         break;
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
    */
@@ -333,7 +344,7 @@ export class DuetDatePicker {
         left: this.direction === "left",
         error: !!this.error,
         active: this.open,
-      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h(FocusGuard, { moveFocusTo: this.focusedDayNode }), h("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), h("div", { class: "duet-date-dialog-mobile-header" }, h("duet-label", { margin: "none" }, this.label), h("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", null, text.closeLabel))), h("div", { class: "duet-date-dialog-header" }, h("div", { class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", null, h("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", null, h("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { class: "duet-date-dialog-select" }, h("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", null, text.monthLabelsShort[focusedMonth]), h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", null, h("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { class: "duet-date-dialog-select" }, h("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { class: "duet-date-dialog-buttons" }, h("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
+      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h(FocusGuard, { moveFocusTo: this.focusedDayNode }), h("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), h("div", { class: "duet-date-dialog-mobile-header" }, h("duet-label", { margin: "none" }, this.label), h("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", null, text.closeLabel))), h("div", { class: "duet-date-dialog-header" }, h("div", { class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", null, h("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", null, h("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { class: "duet-date-dialog-select" }, h("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", null, text.monthLabelsShort[focusedMonth]), h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", null, h("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { class: "duet-date-dialog-select" }, h("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { class: "duet-date-dialog-buttons" }, h("duet-action-button", { accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
   }
   static get is() { return "duet-date-picker"; }
   static get encapsulation() { return "scoped"; }
@@ -486,7 +497,7 @@ export class DuetDatePicker {
       },
       "language": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "DuetLanguage",
           "resolved": "\"en\" | \"fi\" | \"sv\"",
@@ -510,7 +521,7 @@ export class DuetDatePicker {
           "text": "The currently active language. This setting changes the month/year/day.\nnames and button labels as well as all screen reader labels."
         },
         "attribute": "language",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "getLanguage()"
       },
       "placeholderDefaults": {
@@ -541,7 +552,7 @@ export class DuetDatePicker {
       },
       "placeholder": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -744,7 +755,7 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerDirection": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
             }
           }
         },
@@ -916,7 +927,7 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
             }
           }
         }
@@ -936,7 +947,7 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerFocusEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
             }
           }
         }
@@ -956,7 +967,7 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerFocusEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
             }
           }
         }
@@ -1026,6 +1037,9 @@ export class DuetDatePicker {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "min",
         "methodName": "updateValidity"
       }, {

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

@@ -75,7 +75,7 @@ export class DuetDivider {
           "references": {
             "DuetDividerMargin": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-divider/duet-divider.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-divider/duet-divider.tsx"
             }
           }
         },

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -283,7 +283,7 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableActions": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         },
@@ -307,7 +307,7 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableColumns": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         },
@@ -331,7 +331,7 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableRows": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         },
@@ -442,7 +442,7 @@ export class DuetEditableTable {
           "references": {
             "DuetTableToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         }
@@ -462,7 +462,7 @@ export class DuetEditableTable {
           "references": {
             "DuetTableMenuEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -95,7 +95,7 @@ export class DuetEmptyState {
           "references": {
             "DuetEmptyStateSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-empty-state/duet-empty-state.tsx"
             }
           }
         },

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

@@ -7,7 +7,7 @@ import newWindowIconSmall from "@duetds/icons/lib/assets/action-new-window-small
 import { Fragment, h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 const i18n = {
   fi: { lahi: "© LähiTapiola", turva: "© Turva" },
@@ -70,9 +70,14 @@ export class DuetFooter {
     this.language = getLanguage();
     this.items = undefined;
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
     this.menu = undefined;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -80,6 +85,12 @@ export class DuetFooter {
     inheritGlobalTheme(this);
     this.refresh();
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Local methods
    */
@@ -149,7 +160,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         },
@@ -230,7 +241,7 @@ export class DuetFooter {
           "text": "The currently active language. This setting changes the logo to match the\nchosen language."
         },
         "attribute": "language",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "getLanguage()"
       },
       "items": {
@@ -278,7 +289,7 @@ export class DuetFooter {
       },
       "accessibleLabelExternal": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -295,7 +306,7 @@ export class DuetFooter {
         },
         "attribute": "accessible-label-external",
         "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
+        "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
       },
       "menu": {
         "type": "any",
@@ -343,7 +354,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -363,7 +374,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -383,7 +394,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -403,7 +414,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -423,7 +434,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterAnalyticsEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -443,7 +454,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -452,6 +463,9 @@ export class DuetFooter {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "menu",
         "methodName": "refresh"
       }, {

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

@@ -228,7 +228,7 @@ export class DuetGrid {
           "references": {
             "DuetGridAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },
@@ -251,7 +251,7 @@ export class DuetGrid {
           "references": {
             "DuetGridDistribution": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },
@@ -274,7 +274,7 @@ export class DuetGrid {
           "references": {
             "DuetGridMobileAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },