@duetds/components 6.9.0 → 6.9.2

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -24,6 +24,7 @@ export class DuetMenuBarLink {
     this.active = false;
     this.href = "#";
     this.icon = undefined;
+    this.accessibleLabel = undefined;
   }
   /**
    * Component lifecycle events.
@@ -60,7 +61,7 @@ export class DuetMenuBarLink {
         "duet-menu-bar-link": true,
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
-      }, href: this.href, "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
+      }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-link"; }
   static get encapsulation() { return "shadow"; }
@@ -152,6 +153,23 @@ export class DuetMenuBarLink {
         "attribute": "icon",
         "reflect": true,
         "defaultValue": "undefined"
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
       }
     };
   }

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

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function toggleInArray(arr, item) {
   return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
@@ -94,9 +94,23 @@ export class DuetMultiselect {
     this.getOptionIdentifier = (key) => {
       return `${this.identifier}-option-${key}`;
     };
+    this.getDescribedBy = () => {
+      const describedBy = [];
+      if (this.isCaptionVisible && this.topCaptionId) {
+        describedBy.push(this.topCaptionId);
+      }
+      if (this.accessibleDescribedBy) {
+        describedBy.push(this.accessibleDescribedBy);
+      }
+      if (this.error) {
+        describedBy.push(this.errorId);
+      }
+      return describedBy.length > 0 ? describedBy.join(" ") : null;
+    };
     this.processedItems = [];
     this.checkboxesVisible = false;
     this.activeDescendant = "";
+    this.language = getLanguage();
     this.margin = "auto";
     this.error = "";
     this.expand = false;
@@ -109,6 +123,7 @@ export class DuetMultiselect {
     this.items = undefined;
     this.disabled = false;
     this.label = "label";
+    this.accessibleDescribedBy = undefined;
     this.tooltip = "";
     this.tooltipDirection = "auto";
   }
@@ -126,6 +141,12 @@ export class DuetMultiselect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-multiselect`. Use this method instead of the global
    * `multiselect.focus()`.
@@ -146,7 +167,6 @@ export class DuetMultiselect {
    * Always the last one in the class.
    */
   render() {
-    const selectedTranslation = getLocaleString(this.selectedLangObject);
     return (h(Host, { class: {
         "duet-m-0": this.margin === "none",
         "duet-expand": this.expand,
@@ -156,7 +176,7 @@ export class DuetMultiselect {
         "duet-theme-turva": this.theme === "turva",
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", selectedTranslation, h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
         "duet-multiselect-checkboxes": true,
         "duet-multiselect-checkboxes-active": this.checkboxesVisible,
       }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems &&
@@ -411,6 +431,23 @@ export class DuetMultiselect {
         "reflect": false,
         "defaultValue": "\"label\""
       },
+      "accessibleDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the input."
+        },
+        "attribute": "accessible-described-by",
+        "reflect": false
+      },
       "tooltip": {
         "type": "string",
         "mutable": false,
@@ -458,7 +495,8 @@ export class DuetMultiselect {
     return {
       "processedItems": {},
       "checkboxesVisible": {},
-      "activeDescendant": {}
+      "activeDescendant": {},
+      "language": {}
     };
   }
   static get events() {

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

@@ -3,7 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetNotification {
   constructor() {
     this.language = getLanguage();
@@ -19,12 +19,23 @@ export 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.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Move focus to the notification's link element.
    * Use this method instead of the native `focus()` method.
@@ -56,7 +67,7 @@ export class DuetNotification {
     return {
       "language": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "DuetLanguage",
           "resolved": "\"en\" | \"fi\" | \"sv\"",
@@ -80,7 +91,7 @@ export class DuetNotification {
           "text": "The currently active language.\nUsed for announcing unread notifications to screen readers."
         },
         "attribute": "language",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "getLanguage()"
       },
       "accessibleLabelUnreadDefaults": {
@@ -106,7 +117,7 @@ export class DuetNotification {
       },
       "accessibleLabelUnread": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -123,7 +134,7 @@ export class DuetNotification {
         },
         "attribute": "accessible-label-unread",
         "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelUnreadDefaults, this.language)"
+        "defaultValue": "getLocaleString(\n    this.accessibleLabelUnreadDefaults,\n    this.language\n  )"
       },
       "url": {
         "type": "string",
@@ -255,4 +266,10 @@ export class DuetNotification {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }];
+  }
 }

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -33,19 +33,29 @@ export class DuetNumberInput {
     this.handleChange = (ev) => {
       const input = ev.target;
       if (input && input.value) {
-        let value = SafeParseFloat(input.value, this.locale);
-        // Make sure that everything works if the user clears the input and
-        // starts typing non-numeric characters.
-        if (isNaN(value) || value == null) {
-          value = this.min || 0;
+        try {
+          let value = SafeParseFloat(input.value, this.locale);
+          // Make sure that everything works if the user clears the input and
+          // starts typing non-numeric characters.
+          if (isNaN(value) || value == null) {
+            value = this.min || 0;
+          }
+          this.setValue(value);
+          this.duetInput.emit({
+            component: "duet-number-input",
+            originalEvent: ev,
+            value: SafeParseFloat(this.value, this.locale).toString(),
+            valueAsNumber: value,
+          });
+        }
+        catch (e) {
+          this.duetInput.emit({
+            component: "duet-number-input",
+            originalEvent: ev,
+            value: null,
+            valueAsNumber: null,
+          });
         }
-        this.setValue(value);
-        this.duetInput.emit({
-          component: "duet-number-input",
-          originalEvent: ev,
-          value: SafeParseFloat(this.value, this.locale).toString(),
-          valueAsNumber: value,
-        });
       }
       else {
         this.duetInput.emit({
@@ -64,23 +74,25 @@ export class DuetNumberInput {
       if (input.value) {
         // On blur we want to make sure that the user input is between the min and max values,
         // and also round it up or down to the nearest step.
-        let value = SafeParseFloat(input.value, this.locale);
-        if (this.rounding) {
-          value = roundTo(value, this.step);
+        try {
+          let value = SafeParseFloat(input.value, this.locale);
+          if (this.rounding) {
+            value = roundTo(value, this.step);
+          }
+          value = clamp(value, this.min, this.max);
+          if (value !== SafeParseFloat(this.value, this.locale) ||
+            value !== SafeParseFloat(this.focusedValue, this.locale)) {
+            this.setValue(value);
+            this.emitChange(ev);
+          }
         }
-        value = clamp(value, this.min, this.max);
-        if (value !== SafeParseFloat(this.value, this.locale) ||
-          value !== SafeParseFloat(this.focusedValue, this.locale)) {
-          this.setValue(value);
-          this.emitChange(ev);
+        catch (e) {
+          this.emitNull(ev);
         }
       }
-      this.duetChange.emit({
-        originalEvent: ev,
-        value: null,
-        valueAsNumber: null,
-        component: "duet-number-input",
-      });
+      else {
+        this.emitNull(ev);
+      }
     };
     /**
      * Local methods.
@@ -94,6 +106,14 @@ export class DuetNumberInput {
         component: "duet-number-input",
       });
     };
+    this.emitNull = (ev) => {
+      this.duetChange.emit({
+        originalEvent: ev,
+        value: null,
+        valueAsNumber: null,
+        component: "duet-number-input",
+      });
+    };
     this.localizeValue = (value) => {
       // Returns a localized string that can be used as input value.
       return value.toLocaleString(this.locale);

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

@@ -6,7 +6,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isNumber, } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { shouldDisplayNavigation } from "./duet-pagination-utils";
 /**
  * @part navigation-arrow - this part enables style overrides for the navigation-arrow
@@ -65,6 +65,7 @@ export class DuetPagination {
     this.numbersStore = "";
     this.totalPages = 10;
     this.internalSectionIndex = 0;
+    this.language = getLanguage();
     this.theme = "";
     this.jumpString = "...";
     this.variation = "default";
@@ -117,6 +118,11 @@ export 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;
@@ -141,6 +147,12 @@ export class DuetPagination {
   componentDidRender() {
     this.setFocus();
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   //get totalpages from visible and total
   calculatePageTake() {
     this.totalPages = Math.ceil(this.total / this.take);
@@ -260,8 +272,8 @@ export class DuetPagination {
       }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, h("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-first": true,
-      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages &&
-      this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
+      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && // eslint-disable-line
+      (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-last": true,
       }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.current === this.totalPages &&
@@ -440,7 +452,7 @@ export class DuetPagination {
       },
       "accessibleLabels": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "Record<string, string>",
           "resolved": "{ [x: string]: string; }",
@@ -554,7 +566,8 @@ export class DuetPagination {
     return {
       "numbersStore": {},
       "totalPages": {},
-      "internalSectionIndex": {}
+      "internalSectionIndex": {},
+      "language": {}
     };
   }
   static get events() {
@@ -583,6 +596,9 @@ export class DuetPagination {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "total",
         "methodName": "watchPropTotalHandler"
       }, {

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 *,
 *::after,
 *::before {
@@ -103,9 +102,6 @@ duet-tooltip {
   width: 81px;
   padding: 0 !important;
 }
-.duet-select-wrapper::after {
-  content: "  ";
-}
 .duet-select-wrapper select {
   position: absolute;
   top: 0;

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

@@ -56,6 +56,19 @@ export class DuetSelect {
         component: "duet-select",
       });
     };
+    this.getDescribedBy = () => {
+      const describedBy = [];
+      if (this.isCaptionVisible && this.topCaptionId) {
+        describedBy.push(this.topCaptionId);
+      }
+      if (this.accessibleDescribedBy) {
+        describedBy.push(this.accessibleDescribedBy);
+      }
+      if (this.error) {
+        describedBy.push(this.errorId);
+      }
+      return describedBy.length > 0 ? describedBy.join(" ") : null;
+    };
     this.processedItems = null;
     this.variation = "default";
     this.accessibleActiveDescendant = undefined;
@@ -140,12 +153,12 @@ export class DuetSelect {
         "duet-select-variation-tiny": this.variation === "tiny",
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-errormessage": this.error ? this.errorId : null, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required, "aria-describedby": this.accessibleDescribedBy }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
       return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
     }))), h("div", { class: {
         "duet-select": true,
         "duet-select-variation-tiny": this.variation === "tiny",
-      }, "aria-hidden": "true" }, h("span", { key: this.value }, this.getSelectedItemLabel()), this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" })))), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+      }, "aria-hidden": "true" }, h("span", { key: this.value }, this.getSelectedItemLabel()), this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" }))), h("span", { class: "keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-select"; }
   static get encapsulation() { return "scoped"; }

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

@@ -79,6 +79,7 @@
   z-index: 400;
   width: 100%;
   height: 100%;
+  padding-bottom: 75px;
   overflow-y: auto;
   box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;
 }
@@ -87,6 +88,7 @@
     right: 0;
     left: auto;
     width: 500px;
+    padding-bottom: 0;
     transition: right 300ms ease;
     transition-delay: 0s;
   }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css

@@ -23,29 +23,15 @@
   width: 100%;
 }
 
-:host slot::slotted(duet-submenu-bar-link),
-:host slot::slotted(duet-submenu-bar-dropdown) {
-  position: relative;
-  top: -0.5rem;
-  opacity: 0;
-  transition: top 0.3s ease-in, opacity 0.3s ease-in;
-}
-
-:host([open]) slot::slotted(duet-submenu-bar-link),
-:host([open]) slot::slotted(duet-submenu-bar-dropdown) {
-  top: 0;
-  opacity: 1;
+:host(:not([open])) ::slotted(duet-submenu-bar-dropdown) {
+  display: none;
 }
-
 @media (min-width: 62em) {
-  :host slot::slotted(duet-submenu-bar-link),
-  :host slot::slotted(duet-submenu-bar-dropdown) {
-    position: relative;
-    top: auto;
-    opacity: 1;
-    transition: none;
+  :host(:not([open])) ::slotted(duet-submenu-bar-dropdown) {
+    display: inherit;
   }
 }
+
 .duet-submenu-bar {
   position: relative;
   background: rgb(243, 249, 252);
@@ -114,7 +100,6 @@
   visibility: visible;
   background: rgb(243, 249, 252);
   border-bottom: 1px solid rgb(207, 210, 212);
-  transition: 300ms ease;
 }
 .duet-submenu-bar .items ::slotted(*) {
   position: relative;
@@ -124,7 +109,6 @@
   overflow: hidden;
   visibility: hidden;
   border-bottom: 0 solid rgb(207, 210, 212);
-  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-submenu-bar .items .list {

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.css

@@ -194,6 +194,7 @@
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva button.active, .duet-submenu-bar-dropdown.duet-theme-turva button.open {
     color: rgb(148, 9, 37);
+    background: rgb(228, 228, 230);
   }
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button.active::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open::after {

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.js

@@ -12,17 +12,32 @@ export class DuetSubmenuBarDropdown {
      */
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
     this.boundMqlFunctions = [];
-    this.changeIconSize = () => {
+    this.checkIsDesktop = () => {
       if (this.mql[0].matches) {
+        this.isDesktop = true;
         this.iconSize = "x-small";
       }
       else {
+        this.isDesktop = false;
         this.iconSize = "small";
       }
     };
     this.onClick = () => {
-      this.open = !this.open;
+      const open = this.open;
+      if (!this.isDesktop) {
+        const dropdowns = Array.from(this.element.parentElement.querySelectorAll("duet-submenu-bar-dropdown"));
+        for (const dropdown of dropdowns) {
+          dropdown.open = false;
+        }
+      }
+      if (open) {
+        this.open = false;
+      }
+      else {
+        this.open = true;
+      }
     };
+    this.isDesktop = false;
     this.iconSize = "small";
     this.theme = "";
     this.active = false;
@@ -31,7 +46,7 @@ export class DuetSubmenuBarDropdown {
   }
   handleFocus(e) {
     const isClickOutside = e.composedPath().every(node => node !== this.element);
-    if (isClickOutside) {
+    if (isClickOutside && this.isDesktop) {
       this.open = false;
     }
   }
@@ -42,11 +57,11 @@ export class DuetSubmenuBarDropdown {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    this.changeIconSize();
+    this.checkIsDesktop();
     for (let i = 0; i < this.mql.length; i++) {
       // addEventListener is not available in Stencil hydrate
       if (this.mql[i].addEventListener) {
-        const bound = this.changeIconSize.bind(this);
+        const bound = this.checkIsDesktop.bind(this);
         this.mql[i].addEventListener("change", bound);
         this.boundMqlFunctions[i] = bound;
       }
@@ -192,6 +207,7 @@ export class DuetSubmenuBarDropdown {
   }
   static get states() {
     return {
+      "isDesktop": {},
       "iconSize": {}
     };
   }