@duetds/components 6.8.3 → 6.8.5

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

@@ -4,7 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetAlert {
   constructor() {
     this.descriptiveId = createID("DuetAlert");
@@ -24,6 +24,7 @@ export class DuetAlert {
     this.theme = "";
     this.isDismissed = false;
     this.timeoutID = undefined;
+    this.language = getLanguage();
     this.accessibleLabelDefaults = {
       fi: "Sulje viesti",
       sv: "Stäng meddelandet",
@@ -38,6 +39,11 @@ export class DuetAlert {
     this.variation = "default";
     this.dismissible = false;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
+      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -49,10 +55,14 @@ export class DuetAlert {
       this.timeoutID = setTimeout(() => this.handleDismiss(), this.autoDismiss);
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
   disconnectedCallback() {
     if (this.timeoutID) {
       clearTimeout(this.timeoutID);
     }
+    disconnectLanguageChangeObserver(this);
   }
   /**
    * Show.
@@ -156,7 +166,7 @@ export class DuetAlert {
       },
       "accessibleLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -325,7 +335,8 @@ export class DuetAlert {
   static get states() {
     return {
       "isDismissed": {},
-      "timeoutID": {}
+      "timeoutID": {},
+      "language": {}
     };
   }
   static get events() {
@@ -345,7 +356,7 @@ export class DuetAlert {
           "references": {
             "DuetAlertEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-alert/duet-alert.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-alert/duet-alert.tsx"
             }
           }
         }
@@ -387,4 +398,10 @@ export class DuetAlert {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }];
+  }
 }

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

@@ -4,7 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
   constructor() {
@@ -65,6 +65,11 @@ export class DuetButton {
     this.iconOnly = false;
     this.url = undefined;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -78,6 +83,7 @@ export class DuetButton {
     this.proxyButton = document.createElement("button");
     this.proxyButton.style.display = "none";
     this.syncToProxyButton();
+    connectLanguageChangeObserver(this);
     if (!this.url && this.element.closest("form")) {
       this.element.insertAdjacentElement("beforebegin", this.proxyButton);
     }
@@ -85,6 +91,7 @@ export class DuetButton {
   disconnectedCallback() {
     this.proxyButton.remove();
     this.proxyButton = null;
+    disconnectLanguageChangeObserver(this);
   }
   syncToProxyButton() {
     this.proxyButton.type = this.getButtonType();
@@ -406,7 +413,7 @@ export class DuetButton {
           "references": {
             "DuetButtonVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -522,7 +529,7 @@ export class DuetButton {
           "references": {
             "DuetButtonTextCentering": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -545,7 +552,7 @@ export class DuetButton {
           "references": {
             "DuetButtonWrapping": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -702,11 +709,16 @@ export class DuetButton {
       },
       "language": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "DuetLanguage",
+          "resolved": "\"en\" | \"fi\" | \"sv\"",
+          "references": {
+            "DuetLanguage": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -721,7 +733,7 @@ export class DuetButton {
           "text": ""
         },
         "attribute": "language",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "getLanguage()"
       },
       "accessibleLabelExternalDefaults": {
@@ -752,7 +764,7 @@ export class DuetButton {
       },
       "accessibleLabelExternal": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -844,7 +856,7 @@ export class DuetButton {
           "references": {
             "DuetButtonIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -867,7 +879,7 @@ export class DuetButton {
           "references": {
             "DuetButtonSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -980,6 +992,9 @@ export class DuetButton {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "disabled",
         "methodName": "syncToProxyButton"
       }, {

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

@@ -116,7 +116,7 @@ export class DuetCaption {
           "references": {
             "DuetCaptionSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-caption/duet-caption.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-caption/duet-caption.tsx"
             }
           }
         },

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

@@ -187,7 +187,7 @@ export class DuetCard {
           "references": {
             "DuetCardVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx"
             }
           }
         },
@@ -353,7 +353,7 @@ export class DuetCard {
           "references": {
             "DuetCardPadding": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx"
             }
           }
         },
@@ -472,7 +472,7 @@ export class DuetCard {
           "references": {
             "DuetCardToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx"
             }
           }
         }

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

@@ -481,7 +481,7 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
             }
           }
         }
@@ -501,7 +501,7 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
             }
           }
         }
@@ -521,7 +521,7 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
             }
           }
         }

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,14 +26,19 @@
 
 :host(.horizontal) .duet-choice-group {
   display: block;
+  margin-bottom: -12px;
 }
 :host(.horizontal) .duet-choice-group.duet-no-stacking {
   display: flex;
 }
+@media (min-width: 48em) {
+  :host(.horizontal) .duet-choice-group {
+    margin-bottom: 0;
+  }
+}
 @media (max-width: 35.9375em) {
   :host(.horizontal) .duet-choice-group {
     display: flex;
-    margin-bottom: 0;
   }
 }
 

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

@@ -204,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"
             }
           }
         },
@@ -227,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"
             }
           }
         },
@@ -324,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"
             }
           }
         },