npm - @duetds/components - Versions diffs - 7.0.1 → 7.0.3 - Mend

@duetds/components 7.0.1 → 7.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (655) hide show

package/hydrate/index.js CHANGED Viewed

@@ -6035,20 +6035,43 @@ const getLocaleString = (langObject, languageOverride) => {
 /**
  * Language change observer
  *
- * Change component's language property or state when the html lang attribute changes.
+ * Change component's language property or state when the html lang attribute changes. Can also change default labeles to new language.
  * For now the <html> element must have the data-duet-lang-observe attribute set to a truthy value for the
  * language change to happen. At a later point this will be done without requiring the data attribute.
  *
  * Usage:
- * Call connectLanguageChangeObserver(this) in component's connectedCallback and
- * disconnectLanguageChangeObserver(this) in disconnectedCallback.
+ * Call in component's connectedCallback
+ * connectLanguageChangeObserver(this)
+ * or
+ * connectLanguageChangeObserver(this, [{ prop: "labelProp", defaults: "labelPropDefaults" }])
+ *
+ * Call in disconnectedCallback
+ * disconnectLanguageChangeObserver(this)
+ */
+/**
+ * Component instances that have subscribed to language change.
  */
 const languageChangeSubscribers = new Set();
-const connectLanguageChangeObserver = (component) => {
+/**
+ * Label properties that should be changed when language changes.
+ */
+const languageChangeTargets = new WeakMap();
+const connectLanguageChangeObserver = (component, targets) => {
   languageChangeSubscribers.add(component);
+  if (targets) {
+    if (!Array.isArray(targets)) {
+      targets = [targets];
+    }
+    if (targets.some(t => !(t.prop in component) || !(t.defaults in component))) {
+      console.error("connectLanguageChangeObserver: component must have target.prop and target.defaults properties");
+      targets = targets.filter(t => t.prop in component && t.defaults in component);
+    }
+    languageChangeTargets.set(component, targets);
+  }
 };
 const disconnectLanguageChangeObserver = (component) => {
   languageChangeSubscribers.delete(component);
+  languageChangeTargets.delete(component);
 };
 const colorWarning = "rgb(247, 178, 40)";
@@ -6496,7 +6519,6 @@ class DuetActionButton {
       });
     });
     this.numbersStore = "";
-    this.language = getLanguage();
     this.theme = "";
     this.iconName = "action-arrow-left-small";
     this.iconColor = "currentColor";
@@ -6520,11 +6542,6 @@ class DuetActionButton {
     this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults);
     this.accessibleControls = "";
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelsDefaults[oldValue]) {
-      this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults, newValue);
-    }
-  }
   //handle a11y keyboard navigation events
   async onKeyboardDown(e) {
     if (isKeyboardClick(e)) {
@@ -6560,7 +6577,7 @@ class DuetActionButton {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelsDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -6605,9 +6622,6 @@ class DuetActionButton {
       }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, "aria-details": this.accessibleDetails, "aria-controls": this.accessibleControls, title: this.getTitle() }, hAsync("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), hAsync("duet-visually-hidden", null, hAsync("slot", null)))));
   }
   get element() { return getElement(this); }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
   static get style() { return duetActionButtonCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -6632,7 +6646,6 @@ class DuetActionButton {
       "accessibleLabel": [1025, "accessible-label"],
       "accessibleControls": [1, "accessible-controls"],
       "numbersStore": [32],
-      "language": [32],
       "setFocus": [64]
     },
     "$listeners$": undefined,
@@ -6664,7 +6677,6 @@ class DuetAlert {
     this.theme = "";
     this.isDismissed = false;
     this.timeoutID = undefined;
-    this.language = getLanguage();
     this.accessibleLabelDefaults = {
       fi: "Sulje viesti",
       sv: "Stäng meddelandet",
@@ -6680,11 +6692,6 @@ class DuetAlert {
     this.dismissible = false;
     this.focusable = false;
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
-      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -6697,7 +6704,7 @@ class DuetAlert {
     }
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
   }
   disconnectedCallback() {
     if (this.timeoutID) {
@@ -6753,9 +6760,6 @@ class DuetAlert {
         this.alertContainer = element;
       }, tabindex: this.focusable ? "0" : undefined }, this.icon && (hAsync("div", { class: "duet-alert-icon" }, hAsync("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), hAsync("span", { id: this.descriptiveId }, hAsync("slot", null))), this.dismissible && (hAsync("div", { class: "duet-alert-dismiss" }, hAsync("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
   }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
   static get style() { return duetAlertCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -6774,7 +6778,6 @@ class DuetAlert {
       "focusable": [4],
       "isDismissed": [32],
       "timeoutID": [32],
-      "language": [32],
       "show": [64],
       "hide": [64],
       "setFocus": [64]
@@ -7067,11 +7070,6 @@ 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.
    */
@@ -7085,7 +7083,10 @@ class DuetButton {
     this.proxyButton = document.createElement("button");
     this.proxyButton.style.display = "none";
     this.syncToProxyButton();
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, {
+      prop: "accessibleLabelExternal",
+      defaults: "accessibleLabelExternalDefaults",
+    });
     if (!this.url && this.element.closest("form")) {
       this.element.insertAdjacentElement("beforebegin", this.proxyButton);
     }
@@ -7185,7 +7186,6 @@ class DuetButton {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "language": ["watchLanguageStateHandler"],
     "disabled": ["syncToProxyButton"],
     "submit": ["syncToProxyButton"],
     "value": ["syncToProxyButton"],
@@ -7923,7 +7923,6 @@ class DuetChoice {
     this.isHovering = false;
     this.isInfoOpen = false;
     this.isBlurred = false;
-    this.language = getLanguage();
     this.theme = "";
     this.label = "label";
     this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
@@ -7959,14 +7958,6 @@ class DuetChoice {
     };
     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.
    */
@@ -7979,7 +7970,10 @@ class DuetChoice {
     this.hasBeforeText = hasSlot(this.element, "before-text");
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
+      { prop: "infoLabel", defaults: "infoLabelDefaults" },
+    ]);
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -8103,9 +8097,6 @@ class DuetChoice {
       } }, hAsync("span", { id: this.headerId }, hAsync("slot", { name: "header" })), this.hasInfo ? (hAsync("span", null, hAsync("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, hAsync("slot", { name: "info" })), hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)))), this.isInfoOpen && hAsync(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
   }
   get element() { return getElement(this); }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
   static get style() { return duetChoiceCss; }
   static get cmpMeta() { return {
     "$flags$": 6,
@@ -8144,7 +8135,6 @@ class DuetChoice {
       "isHovering": [32],
       "isInfoOpen": [32],
       "isBlurred": [32],
-      "language": [32],
       "setFocus": [64],
       "toggleInfoMethod": [64]
     },
@@ -8982,7 +8972,6 @@ class DuetCombobox {
     this.listOpen = false;
     this.selectedItems = new Set();
     this.activeItem = undefined;
-    this.language = getLanguage();
     this.accessibleLabelDefaults = {
       en: {
         heading: "Select:",
@@ -9000,7 +8989,7 @@ class DuetCombobox {
         itemFiltered: "{name}, ({current} av {total}, {hiddenItems} filtrerade)",
       },
     };
-    this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), getLanguage());
+    this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
     this.theme = "";
     this.force = false;
     this.items = undefined;
@@ -9013,12 +9002,6 @@ class DuetCombobox {
   activeItemHandler(state) {
     this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue &&
-      this.accessibleLabels === getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), oldValue)) {
-      this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), newValue);
-    }
-  }
   handleDocumentClick(e) {
     //we want to remove all user text if they have NOT selected from the dropdown
     const path = e.composedPath();
@@ -9045,6 +9028,11 @@ class DuetCombobox {
       this.updateSelectedItems(selectedItem.id);
     }
   }
+  async processListOpenChange() {
+    if (this.openListOnClick) {
+      this.input.icon = this.listOpen ? "action-arrow-up" : "action-arrow-down";
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -9303,9 +9291,9 @@ class DuetCombobox {
   get element() { return getElement(this); }
   static get watchers() { return {
     "activeItem": ["activeItemHandler"],
-    "language": ["watchLanguageStateHandler"],
     "items": ["processItems"],
-    "value": ["processValue"]
+    "value": ["processValue"],
+    "listOpen": ["processListOpenChange"]
   }; }
   static get style() { return duetComboboxCss; }
   static get cmpMeta() { return {
@@ -9329,7 +9317,6 @@ class DuetCombobox {
       "listOpen": [32],
       "selectedItems": [32],
       "activeItem": [32],
-      "language": [32],
       "formatItem": [64]
     },
     "$listeners$": [[4, "click", "handleDocumentClick"]],
@@ -9990,11 +9977,6 @@ 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));
   }
@@ -10039,7 +10021,7 @@ class DuetDatePicker {
     }
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "placeholder", defaults: "placeholderDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -10185,7 +10167,6 @@ class DuetDatePicker {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "language": ["watchLanguageStateHandler"],
     "min": ["updateValidity"],
     "max": ["updateValidity"],
     "value": ["updateValidity", "updateInternalValue"],
@@ -10674,11 +10655,6 @@ class DuetFooter {
     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.
    */
@@ -10689,7 +10665,10 @@ class DuetFooter {
       ;
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, {
+      prop: "accessibleLabelExternal",
+      defaults: "accessibleLabelExternalDefaults",
+    });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -10729,7 +10708,6 @@ class DuetFooter {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "language": ["watchLanguageStateHandler"],
     "menu": ["refresh"],
     "items": ["refresh"]
   }; }
@@ -11468,17 +11446,6 @@ class DuetHeader {
     this.contactItems = undefined;
     this.languageItems = undefined;
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
-      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
-    }
-    if (newValue !== oldValue && this.accessibleI18nLabels === this.accessibleI18nLabelsDefaults[oldValue]) {
-      this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefaults, newValue);
-    }
-    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
-      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -11495,7 +11462,11 @@ class DuetHeader {
         this.boundMqlFunctions[i] = bound;
       }
     }
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" },
+      { prop: "accessibleI18nLabels", defaults: "accessibleI18nLabelsDefaults" },
+      { prop: "accessibleLabelExternal", defaults: "accessibleLabelExternalDefaults" },
+    ]);
   }
   disconnectedCallback() {
     if (this.navigationEl) {
@@ -11750,7 +11721,6 @@ class DuetHeader {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "language": ["watchLanguageStateHandler"],
     "user": ["refresh"],
     "items": ["refresh"],
     "session": ["refresh"],
@@ -11929,11 +11899,6 @@ class DuetHero {
     this.actions = undefined;
     this.layout = "narrow";
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
-      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -11945,7 +11910,10 @@ class DuetHero {
     this.refresh();
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, {
+      prop: "accessibleLabelExternal",
+      defaults: "accessibleLabelExternalDefaults",
+    });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -12050,7 +12018,6 @@ class DuetHero {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "language": ["watchLanguageStateHandler"],
     "back": ["refresh"],
     "listItems": ["refresh"],
     "actions": ["refresh"]
@@ -12797,11 +12764,6 @@ class DuetLink {
     this.icon = undefined;
     this.padding = "auto";
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
-      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -12809,7 +12771,10 @@ class DuetLink {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, {
+      prop: "accessibleLabelExternal",
+      defaults: "accessibleLabelExternalDefaults",
+    });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -12848,9 +12813,6 @@ class DuetLink {
       }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.variation === "block" ? this.renderGrid() : this.renderContent())));
   }
   static get delegatesFocus() { return true; }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
   static get style() { return duetLinkCss; }
   static get cmpMeta() { return {
     "$flags$": 25,
@@ -13068,11 +13030,6 @@ class DuetLogo {
     this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
     this.language = getLanguage();
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
-      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -13080,7 +13037,7 @@ class DuetLogo {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -13109,9 +13066,6 @@ class DuetLogo {
       } }, this.theme === "turva" ? (hAsync(TurvaLogo, { logoId: this.logoId, inverse: this.inverse })) : (hAsync(DefaultLogo, { logoId: this.logoId, inverse: this.inverse, language: this.language })))));
   }
   get element() { return getElement(this); }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
   static get style() { return duetLogoCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -13821,11 +13775,6 @@ class DuetModal {
       }
     }
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleCloseLabel === this.accessibleCloseLabelDefaults[oldValue]) {
-      this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, newValue);
-    }
-  }
   activeChanged() {
     this.open = this.active;
   }
@@ -13845,7 +13794,7 @@ class DuetModal {
     }
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -13929,7 +13878,6 @@ class DuetModal {
   get element() { return getElement(this); }
   static get watchers() { return {
     "open": ["openChanged"],
-    "language": ["watchLanguageStateHandler"],
     "active": ["activeChanged"]
   }; }
   static get style() { return duetModalCss; }
@@ -14264,11 +14212,6 @@ class DuetNotification {
     this.external = false;
     this.theme = "";
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabelUnread === this.accessibleLabelUnreadDefaults[oldValue]) {
-      this.accessibleLabelUnread = getLocaleString(this.accessibleLabelUnreadDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -14276,7 +14219,7 @@ class DuetNotification {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleLabelUnread", defaults: "accessibleLabelUnreadDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -14297,9 +14240,6 @@ class DuetNotification {
       } }, hAsync("a", { ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, hAsync("div", { class: "duet-notification-container" }, hAsync("div", { class: "duet-notification-badge-container" }, this.highlight && (hAsync("div", { class: "duet-notification-badge" }, hAsync("duet-visually-hidden", null, this.accessibleLabelUnread, ":")))), hAsync("div", { class: "duet-notification-content" }, hAsync("slot", null)), hAsync("div", { class: "duet-notification-date" }, this.date)))));
   }
   get element() { return getElement(this); }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
   static get style() { return duetNotificationCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -14761,6 +14701,17 @@ class DuetNumberInput {
       this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleLive", defaults: "accessibleLiveDefaults" },
+      { prop: "accessibleAdd", defaults: "accessibleAddDefaults" },
+      { prop: "accessibleSubtract", defaults: "accessibleSubtractDefaults" },
+      { prop: "label", defaults: "labelDefaults" },
+    ]);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-number-input`. Use this method instead of the global
    * `input.focus()`.
@@ -14817,19 +14768,19 @@ class DuetNumberInput {
       "accessibleOwns": [1, "accessible-owns"],
       "accessibleDescribedBy": [1, "accessible-described-by"],
       "accessibleLiveDefaults": [1, "accessible-live-default"],
-      "accessibleLive": [1, "accessible-live"],
+      "accessibleLive": [1025, "accessible-live"],
       "accessibleLiveEnabled": [4, "accessible-live-enabled"],
       "accessibleAddDefaults": [1, "accessible-add-default"],
-      "accessibleAdd": [1, "accessible-add"],
+      "accessibleAdd": [1025, "accessible-add"],
       "accessibleSubtractDefaults": [1, "accessible-subtract-defaults"],
-      "accessibleSubtract": [1, "accessible-subtract"],
+      "accessibleSubtract": [1025, "accessible-subtract"],
       "theme": [1025],
       "margin": [1],
       "expand": [4],
       "identifier": [1],
       "min": [2],
       "labelDefaults": [1, "label-default"],
-      "label": [1],
+      "label": [1025],
       "labelHidden": [4, "label-hidden"],
       "max": [2],
       "name": [1],
@@ -14964,7 +14915,6 @@ class DuetPagination {
     this.numbersStore = "";
     this.totalPages = 10;
     this.internalSectionIndex = 0;
-    this.language = getLanguage();
     this.theme = "";
     this.jumpString = "...";
     this.variation = "default";
@@ -15017,11 +14967,6 @@ class DuetPagination {
     this.ariaControls = "";
     this.current = 1;
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabels === this.accessibleLabelsDefaults[oldValue]) {
-      this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults, newValue);
-    }
-  }
   watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
     this.calculatePageTake();
     return true;
@@ -15047,7 +14992,7 @@ class DuetPagination {
     this.setFocus();
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelsDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -15180,7 +15125,6 @@ class DuetPagination {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "language": ["watchLanguageStateHandler"],
     "total": ["watchPropTotalHandler"],
     "current": ["watchStateHandler"]
   }; }
@@ -15205,8 +15149,7 @@ class DuetPagination {
       "current": [1026],
       "numbersStore": [32],
       "totalPages": [32],
-      "internalSectionIndex": [32],
-      "language": [32]
+      "internalSectionIndex": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -16802,6 +16745,12 @@ class DuetProgress {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this, { prop: "accessibleLabelUpload", defaults: "accessibleLabelUploadDefaults" });
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -16829,7 +16778,7 @@ class DuetProgress {
       "accessibleDescription": [1, "accessible-description"],
       "accessibleLabel": [1, "accessible-label"],
       "accessibleLabelUploadDefaults": [1, "accessible-label-upload-defaults"],
-      "accessibleLabelUpload": [1, "accessible-label-upload"],
+      "accessibleLabelUpload": [1025, "accessible-label-upload"],
       "progress": [1538],
       "caption": [1],
       "height": [1],
@@ -17334,7 +17283,6 @@ class DuetRangeStepper {
       this.clampStepIndex();
       this.handleStepClick(e);
     };
-    this.language = getLanguage();
     this.theme = "";
     this.stepIndex = 1;
     this.stepSize = 50;
@@ -17359,11 +17307,6 @@ 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.leftBnRef && this.rightBnRef) {
       if (newValue <= 1) {
@@ -17412,7 +17355,7 @@ class DuetRangeStepper {
     this.watchStepIndexStateHandler(this.stepIndex);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "ariaLabels", defaults: "ariaLabelsDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -17487,7 +17430,6 @@ class DuetRangeStepper {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "language": ["watchLanguageStateHandler"],
     "stepIndex": ["watchStepIndexStateHandler"],
     "stepSize": ["watchStepSizeStateHandler"]
   }; }
@@ -17502,8 +17444,7 @@ class DuetRangeStepper {
       "total": [2],
       "ariaLabelsDefaults": [16],
       "ariaLabels": [1040],
-      "ariaControls": [1, "accessible-controls"],
-      "language": [32]
+      "ariaControls": [1, "accessible-controls"]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -18052,20 +17993,6 @@ class DuetShowMore {
     this.margin = "auto";
     this.open = false;
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.showMoreLabel === this.showMoreLabelDefaults[oldValue]) {
-      this.showMoreLabel = getLocaleString(this.showMoreLabelDefaults, newValue);
-    }
-    if (newValue !== oldValue && this.showLessLabel === this.showLessLabelDefaults[oldValue]) {
-      this.showLessLabel = getLocaleString(this.showLessLabelDefaults, newValue);
-    }
-    if (newValue !== oldValue && this.showMoreAccessibleLabel === this.showMoreAccessibleLabelDefaults[oldValue]) {
-      this.showMoreAccessibleLabel = getLocaleString(this.showMoreAccessibleLabelDefaults, newValue);
-    }
-    if (newValue !== oldValue && this.showLessAccessibleLabel === this.showLessAccessibleLabelDefaults[oldValue]) {
-      this.showLessAccessibleLabel = getLocaleString(this.showLessAccessibleLabelDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -18074,7 +18001,12 @@ class DuetShowMore {
     this.buttonAriaOpen = this.open;
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, [
+      { prop: "showMoreLabel", defaults: "showMoreLabelDefaults" },
+      { prop: "showLessLabel", defaults: "showLessLabelDefaults" },
+      { prop: "showMoreAccessibleLabel", defaults: "showMoreAccessibleLabelDefaults" },
+      { prop: "showLessAccessibleLabel", defaults: "showLessAccessibleLabelDefaults" },
+    ]);
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -18092,9 +18024,6 @@ class DuetShowMore {
       } }, hAsync("div", { ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, hAsync("div", { class: { "slotted-content": true } }, hAsync("slot", null))), hAsync("duet-button", { id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small" }, this.open ? this.showLessLabel : this.showMoreLabel))));
   }
   get element() { return getElement(this); }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
   static get style() { return duetShowMoreCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -19273,10 +19202,20 @@ class DuetTab {
     this.caption = undefined;
     this.selected = undefined;
     this.accessibleDescriptionDefault = null;
-    this.accessibleDescription = this.accessibleDescriptionDefault
+    this.accessibleDescription = this
+      .accessibleDescriptionDefault
       ? getLocaleString(this.accessibleDescriptionDefault)
       : null;
   }
+  /**
+   * Component lifecycle events.
+   */
+  connectedCallback() {
+    connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -19292,7 +19231,7 @@ class DuetTab {
       "caption": [513],
       "selected": [516],
       "accessibleDescriptionDefault": [1, "accessible-description-defaults"],
-      "accessibleDescription": [1, "accessible-description"]
+      "accessibleDescription": [1025, "accessible-description"]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -20296,14 +20235,6 @@ class DuetTooltip {
     this.positionHorizontal = "0";
     this.active = false;
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefault[oldValue]) {
-      this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, newValue);
-    }
-    if (newValue !== oldValue && this.accessibleCloseLabel === this.accessibleCloseLabelDefault[oldValue]) {
-      this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -20334,7 +20265,10 @@ class DuetTooltip {
     this.focusTarget = null;
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleLabel", defaults: "accessibleLabelDefault" },
+      { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefault" },
+    ]);
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -20409,7 +20343,6 @@ class DuetTooltip {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "language": ["watchLanguageStateHandler"],
     "active": ["handleActiveChange"]
   }; }
   static get style() { return duetTooltipCss; }
@@ -20615,6 +20548,15 @@ class DuetTray {
     inheritGlobalTheme(this);
     this.hasAdditionalContent = !!this.element.querySelector("[slot='additional']");
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },
+      { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
+    ]);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Component event handling.
    */
@@ -20651,9 +20593,9 @@ class DuetTray {
     "$members$": {
       "language": [1025],
       "accessibleCloseLabelDefaults": [1, "accessible-close-label-default"],
-      "accessibleCloseLabel": [1, "accessible-close-label"],
+      "accessibleCloseLabel": [1025, "accessible-close-label"],
       "accessibleOpenLabelDefaults": [1, "accessible-open-label-default"],
-      "accessibleOpenLabel": [1, "accessible-open-label"],
+      "accessibleOpenLabel": [1025, "accessible-open-label"],
       "theme": [1025],
       "active": [516],
       "autoHide": [4, "auto-hide"],