@duetds/components 6.6.1 → 6.7.0

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.css

@@ -24,8 +24,6 @@
 }
 
 .duet-menu-bar {
-  position: relative;
-  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

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-page-heading/duet-page-heading.css

@@ -32,7 +32,6 @@
   overflow: hidden;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #00294d;
-  background: white;
 }
 .duet-page-heading.duet-p-0 {
   padding: 0 !important;

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-e9377a6f.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-ad4c031f.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-0f388d82.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-ba2d607e.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

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

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-d2ab6c91.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-e47da081.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-d555c27d.js';
+import { d as defineCustomElement$2 } from './p-2228bf13.js';
 
 const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-d2ab6c91.js';
+import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-e47da081.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$2 } from './p-d555c27d.js';
+import { g as getLocaleString } from './p-6c05e879.js';
+import { d as defineCustomElement$2 } from './p-2228bf13.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-22d5db87.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-c0878e32.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-caption.js

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

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, b as Host } from './p-d2ab6c91.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host } from './p-e47da081.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
 import { g as getColorByName } from './p-535ce3ec.js';
-import { d as defineCustomElement$3 } from './p-d555c27d.js';
-import { d as defineCustomElement$2 } from './p-c40c2037.js';
+import { d as defineCustomElement$3 } from './p-2228bf13.js';
+import { d as defineCustomElement$2 } from './p-504f30a0.js';
 
 var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 17.939a.752.752 0 0 1-.53-1.281L10.94 5.94c.283-.284.659-.44 1.059-.44.401 0 .777.156 1.06.438l10.721 10.72a.752.752 0 0 1-.53 1.281.743.743 0 0 1-.53-.22L12 7 1.28 17.719a.743.743 0 0 1-.53.22z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-ce3c83bd.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-13b6dd90.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-799128c4.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-364cfb78.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-choice-group.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-d2ab6c91.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-e47da081.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
-import { d as defineCustomElement$6 } from './p-cc44f2ef.js';
-import { d as defineCustomElement$5 } from './p-72fd3c82.js';
-import { d as defineCustomElement$4 } from './p-d555c27d.js';
-import { d as defineCustomElement$3 } from './p-641086b9.js';
-import { d as defineCustomElement$2 } from './p-bd9de5b1.js';
+import { d as defineCustomElement$6 } from './p-c91ba42a.js';
+import { d as defineCustomElement$5 } from './p-2b3a8e8c.js';
+import { d as defineCustomElement$4 } from './p-2228bf13.js';
+import { d as defineCustomElement$3 } from './p-4e752d2d.js';
+import { d as defineCustomElement$2 } from './p-4e9d1f9b.js';
 
 const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex;margin-bottom:0}}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";