@duetds/components 6.6.2 → 6.7.0

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

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 const icons = {
   search: searchIcon,
   email: emailIcon,
@@ -25,36 +25,36 @@ export class DuetInput {
     this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
     this.errorId = createID("DuetError");
     this.disallowPatternRegex = null;
-    this.clearLabel = getLocaleString({
+    this.clearLabel = {
       en: "Clear",
       fi: "Tyhjennä",
       sv: "Rensa",
-    });
-    this.timeAnnouncement = getLocaleString({
+    };
+    this.timeAnnouncement = {
       en: "Time",
       fi: "Aika",
       sv: "Tid",
-    });
-    this.showPasswordLabel = getLocaleString({
+    };
+    this.showPasswordLabel = {
       en: "Show password",
       fi: "Näytä salasana",
       sv: "Visa lösenord",
-    });
-    this.hidePasswordLabel = getLocaleString({
+    };
+    this.hidePasswordLabel = {
       en: "Hide password",
       fi: "Piilota salasana",
       sv: "Dölj lösenord",
-    });
-    this.passwordShownAriaAnnouncement = getLocaleString({
+    };
+    this.passwordShownAriaAnnouncement = {
       en: "Password is shown",
       fi: "Salasana näytetään",
       sv: "Lösenordet visas",
-    });
-    this.passwordHiddenAriaAnnouncement = getLocaleString({
+    };
+    this.passwordHiddenAriaAnnouncement = {
       en: "Password is hidden",
       fi: "Salasana on piilotettu",
       sv: "Lösenordet är dolt",
-    });
+    };
     /**
      * Component event handling.
      */
@@ -74,7 +74,7 @@ export class DuetInput {
       if (ev.relatedTarget === this.nativeInput || ev.relatedTarget === this.togglePasswordRevealedButton) {
         return;
       }
-      if (this.variation === "revealable") {
+      if (this.variation === "revealable" && this.isPasswordRevealed) {
         this.isPasswordRevealed = false;
       }
       this.isFocused = false;
@@ -146,7 +146,8 @@ export class DuetInput {
       }
       return this.type;
     };
-    this.isPasswordRevealed = false;
+    this.language = getLanguage();
+    this.isPasswordRevealed = undefined;
     this.isFocused = false;
     this.accessibleActiveDescendant = undefined;
     this.accessibleAutocomplete = undefined;
@@ -170,7 +171,7 @@ export class DuetInput {
     this.required = false;
     this.type = "text";
     this.variation = "default";
-    this.label = "label";
+    this.label = "Label";
     this.error = "";
     this.labelHidden = false;
     this.numericKeyboard = false;
@@ -228,6 +229,12 @@ export class DuetInput {
       });
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
@@ -292,7 +299,7 @@ export class DuetInput {
       this.type !== "password" &&
       this.type !== "time" &&
       this.variation !== "button";
-    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { class: {
+    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { class: {
         "duet-input-container": true,
         "duet-theme-turva": this.theme === "turva",
         [`duet-input-variation-${this.variation}`]: true,
@@ -317,7 +324,11 @@ export class DuetInput {
         "duet-input-clear-icon-single": !hasInputIcon,
         "duet-input-clear-icon-double": !!this.icon,
         "duet-input-clear-icon-button": this.variation === "button",
-      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed ? this.hidePasswordLabel : this.showPasswordLabel, margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed ? this.passwordShownAriaAnnouncement : this.passwordHiddenAriaAnnouncement))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
+      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+        ? this.hidePasswordLabel[this.language]
+        : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed
+      ? this.passwordShownAriaAnnouncement[this.language]
+      : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }
@@ -742,7 +753,7 @@ export class DuetInput {
       },
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -756,7 +767,7 @@ export class DuetInput {
         },
         "attribute": "label",
         "reflect": false,
-        "defaultValue": "\"label\""
+        "defaultValue": "\"Label\""
       },
       "error": {
         "type": "string",
@@ -1056,6 +1067,7 @@ export class DuetInput {
   }
   static get states() {
     return {
+      "language": {},
       "isPasswordRevealed": {},
       "isFocused": {}
     };

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

@@ -57,7 +57,10 @@
 }
 
 .duet-link-external {
-  margin-left: 4px;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin-left: -15px;
 }
 
 .duet-tab-to-link {

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

@@ -39,12 +39,14 @@ export class DuetLink {
    * Always the last one in the class.
    */
   render() {
+    // Notice that the external icon needs to be places right after the last word of the link.
+    // This is why we use &nbps; to keep everything on the same line.
     return (h(Host, null, h("a", { href: this.url, class: {
         "duet-link": true,
         "duet-link-is-external": this.external,
         "duet-tab-to-link": this.tabToLink,
         "duet-theme-turva": this.theme === "turva",
-      }, 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 }, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, h("duet-visually-hidden", null, this.accessibleLabelExternal), h("span", { class: "duet-link-external" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
+      }, 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 }, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, "\u00A0\u00A0", h("duet-visually-hidden", null, this.accessibleLabelExternal), "\u00A0", h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
   }
   static get is() { return "duet-link"; }
   static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ import { colorBrandBlue, colorBrandGrayTurva, colorGrayLightest, colorPrimaryTur
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { getLanguage } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 const TurvaLogo = ({ inverse, logoId }) => {
   const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
   const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;
@@ -52,6 +52,12 @@ export class DuetLogo {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-logo`. Use this method instead of the global
    * `logo.focus()`.

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

@@ -26,7 +26,7 @@ export class DuetMenuBar {
       const active = this.element.querySelector("[active]");
       if (active && active.offsetLeft) {
         if (active.offsetLeft > 50) {
-          this.container.scrollLeft = active.offsetLeft;
+          this.container.scrollLeft = active.offsetLeft - this.element.offsetWidth / 2 + active.offsetWidth / 2;
         }
       }
     };

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.css

@@ -40,10 +40,10 @@
 }
 @media (min-width: 62em) {
   .duet-menu-bar-button {
-    padding: 0 20px;
+    padding: 0 16px;
   }
 }
-@media (min-width: 64.0625em) {
+@media (min-width: 76.25em) {
   .duet-menu-bar-button {
     padding: 0 28px;
   }

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

@@ -23,6 +23,17 @@
   height: 100%;
 }
 
+@media (min-width: 62em) {
+  :host(:last-child) .duet-menu-bar-dropdown button {
+    padding: 0 16px 0 16px;
+  }
+}
+@media (min-width: 76.25em) {
+  :host(:last-child) .duet-menu-bar-dropdown button {
+    padding: 0 16px 0 28px;
+  }
+}
+
 .duet-menu-bar-dropdown {
   position: relative;
   height: 100%;
@@ -47,10 +58,10 @@
 }
 @media (min-width: 62em) {
   .duet-menu-bar-dropdown button {
-    padding: 0 20px;
+    padding: 0 16px;
   }
 }
-@media (min-width: 64.0625em) {
+@media (min-width: 76.25em) {
   .duet-menu-bar-dropdown button {
     padding: 0 28px;
   }

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

@@ -35,13 +35,14 @@
   color: inherit;
   text-align: center;
   text-decoration: none;
+  white-space: nowrap;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-link {
-    padding: 0 20px;
+    padding: 0 16px;
   }
 }
-@media (min-width: 64.0625em) {
+@media (min-width: 76.25em) {
   .duet-menu-bar-link {
     padding: 0 28px;
   }
@@ -63,7 +64,7 @@
   transition: 300ms ease;
   transform: translateY(2px);
 }
-@media (min-width: 64.0625em) {
+@media (min-width: 62em) {
   .duet-menu-bar-link.active::after {
     z-index: auto;
     height: 2px;

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

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
  * @slot mobile - Slot for navigation in small viewports (less than 992px wide).
  * @slot desktop - Slot for navigation in large viewports (992px wide or more).
  */
-export class DuetMenuBar {
+export class DuetNav {
   constructor() {
     this.theme = "";
   }

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

@@ -258,7 +258,8 @@ export class DuetPagination {
       }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, h("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-first": true,
-      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
+      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages &&
+      this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-last": true,
       }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.current === this.totalPages &&

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

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

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

@@ -76,7 +76,6 @@
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  background: white;
   box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;
 }
 @media (min-width: 62em) {

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

@@ -10,6 +10,7 @@ export class DuetSlideout {
     this.toggleMenu = (e) => {
       const toggle = !this.open;
       this.open = toggle;
+      this.openButton.setAttribute("aria-expanded", this.open.toString());
       this.duetSlideoutEvent.emit({
         originalEvent: e,
         data: { element: this.element, open: this.open },
@@ -31,7 +32,7 @@ export class DuetSlideout {
     };
     this.theme = "";
     this.open = false;
-    this.background = "";
+    this.backgroundColor = "gray-lightest";
   }
   /**
    * Toggles the slideout.
@@ -74,7 +75,7 @@ export class DuetSlideout {
    */
   render() {
     const styles = {
-      background: getColorByName(this.background, this.theme),
+      background: getColorByName(this.backgroundColor, this.theme),
     };
     return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { name: "toggle" }), h("div", { class: {
         "desktop-bg": true,
@@ -146,9 +147,9 @@ export class DuetSlideout {
         "reflect": true,
         "defaultValue": "false"
       },
-      "background": {
+      "backgroundColor": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "DuetColor",
           "resolved": "string",
@@ -163,11 +164,11 @@ export class DuetSlideout {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Custom color to be used for a circular background, as a design token entered\nin camelCase or kebab-case.."
+          "text": "Background color. Use one of the color tokens."
         },
-        "attribute": "background",
-        "reflect": false,
-        "defaultValue": "\"\""
+        "attribute": "background-color",
+        "reflect": true,
+        "defaultValue": "\"gray-lightest\""
       }
     };
   }

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

@@ -72,6 +72,26 @@
     overflow: visible;
   }
 }
+.duet-tab-plain-scrolling .duet-tab-group-tabs {
+  display: flex;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.duet-tab-plain-scrolling .duet-tab-group-tabs::-webkit-scrollbar {
+  display: none;
+}
+@media (min-width: 36em) {
+  .duet-tab-plain-scrolling .duet-tab-group-tabs {
+    display: block;
+    overflow: auto;
+  }
+}
 
 @media (min-width: 36em) {
   duet-select {

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -31,9 +31,13 @@ export class DuetTabGroup {
       }
     };
     this.scrollToActive = () => {
-      const active = this.tabsContainer.querySelector(".selected");
-      if (active) {
-        active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+      if (this.variation === "checked" || this.variation === "plain-scrolling") {
+        setTimeout(() => {
+          const active = this.tabsContainer.querySelector(".selected");
+          if (active) {
+            active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+          }
+        }, 50);
       }
     };
     this.renderTab = () => {
@@ -98,11 +102,7 @@ export class DuetTabGroup {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
-    if (this.variation === "checked") {
-      setTimeout(() => {
-        this.scrollToActive();
-      }, 50);
-    }
+    this.scrollToActive();
   }
   /**
    * This method allows you to open any of the tabs by calling the method and
@@ -116,11 +116,7 @@ export class DuetTabGroup {
     this.tabs.forEach((tab, i) => {
       tab.selected = i === tabIndex;
     });
-    if (this.variation === "checked") {
-      setTimeout(() => {
-        this.scrollToActive();
-      }, 50);
-    }
+    this.scrollToActive();
     const event = {
       value: tabIndex,
       component: "duet-tab-group",
@@ -174,18 +170,21 @@ export class DuetTabGroup {
    * Always the last one in the class.
    */
   render() {
+    const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
+    const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
     return (h("div", { class: {
         "duet-tab-group": true,
         "duet-theme-turva": this.theme === "turva",
-        [`duet-tab-variation-${this.variation}`]: true,
+        [variationClass]: true,
+        "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
         "duet-tab-group-scrolls": this.scrolls,
         "duet-tab-group-collapses": this.collapses,
-      }, "aria-label": this.accessibleLabel }, this.variation !== "checked" && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+      }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
         return { label: tab.label, value: index.toString() };
       }) })), h("div", { role: "tablist", class: {
         "duet-m-0": this.margin === "none" || this.variation === "checked",
         "duet-tab-group-tabs": true,
-        "duet-tab-group-hidden": this.tabs.length > 3 && this.variation !== "checked",
+        "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
         "duet-tab-group-collapses": this.collapses,
       }, ref: el => {
         this.tabsContainer = el;
@@ -291,7 +290,7 @@ export class DuetTabGroup {
         "mutable": false,
         "complexType": {
           "original": "DuetTabVariation",
-          "resolved": "\"checked\" | \"default\" | \"plain\"",
+          "resolved": "\"checked\" | \"default\" | \"plain\" | \"plain-scrolling\"",
           "references": {
             "DuetTabVariation": {
               "location": "local"

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

@@ -36,9 +36,9 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  max-width: 1440px;
+  max-width: 1384px;
   height: 36px;
-  padding: 0 28px;
+  margin: 0 28px;
   border-bottom: 1px solid #e1e3e6;
 }
 .duet-toolbar ::slotted(*) {

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

@@ -282,14 +282,14 @@ export class DuetUpload {
       }
     };
     this.uploadPendingFiles = () => {
-      for (const [key, value] of this.files.entries()) {
+      for (const [key, value] of Array.from(this.files.entries())) {
         if (value.group === "pending" && value.pending === true) {
           this.uploadFile(value, true, key);
         }
       }
     };
     this.getItemFromUID = (uid) => {
-      for (const [key, value] of this.files.entries()) {
+      for (const [key, value] of Array.from(this.files.entries())) {
         if (value.uid === uid) {
           return { value, key };
         }
@@ -378,7 +378,7 @@ export class DuetUpload {
      * @description This functions return sorted map items byg condition which are:
      */
     this.filterMap = () => {
-      const all = [...this.files.values()];
+      const all = Array.from(this.files.values());
       const inprogress = [];
       const failure = [];
       const pending = [];

package/lib/collection/utils/language-utils.js

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import { Build } from "@stencil/core";
 import { convertHtmlQuotes } from "./string-utils";
 const localeLookUpTable = {
   fi: "fi-FI",
@@ -87,3 +88,37 @@ export const getLocaleString = (langObject, languageOverride) => {
     return obj[getLanguage()];
   }
 };
+/**
+ * Language change observer
+ *
+ * Change component's language property or state when the html lang attribute changes.
+ * 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.
+ */
+const languageChangeSubscribers = new Set();
+const languagaChangeObserverCallback = () => {
+  if (document.documentElement.dataset.duetLangObserve) {
+    languageChangeSubscribers.forEach((component) => {
+      if (component.language) {
+        component.language = getLanguage();
+      }
+      else {
+        console.log("Language change observer: component does not have a language property", component);
+      }
+    });
+  }
+};
+if (!Build.isServer) {
+  const languageChangeObserver = new MutationObserver(languagaChangeObserverCallback);
+  languageChangeObserver.observe(document.documentElement, { attributeFilter: ["lang"] });
+}
+export const connectLanguageChangeObserver = (component) => {
+  languageChangeSubscribers.add(component);
+};
+export const disconnectLanguageChangeObserver = (component) => {
+  languageChangeSubscribers.delete(component);
+};

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-35c42834.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-ad4c031f.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;