@duetds/components 6.9.0 → 6.9.2

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

@@ -30,6 +30,20 @@ export class DuetTabGroup {
         button.focus();
       }
     };
+    this.onTabSelect = (tabIndex) => {
+      if (this.tabChangeConfirm) {
+        if (tabIndex !== this.selected) {
+          const event = {
+            value: tabIndex,
+            component: "duet-tab-group",
+          };
+          this.duetTabChangeRequested.emit(event);
+        }
+      }
+      else {
+        this.openTab(tabIndex);
+      }
+    };
     this.scrollToActive = () => {
       if (this.variation === "checked" || this.variation === "plain-scrolling") {
         setTimeout(() => {
@@ -47,7 +61,7 @@ export class DuetTabGroup {
             "duet-tab-button": true,
             "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
             selected: element.selected,
-          }, onClick: () => this.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
+          }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
       });
       if (this.scrolls) {
         return (h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
@@ -73,6 +87,7 @@ export class DuetTabGroup {
     this.margin = "auto";
     this.padding = "auto";
     this.setTabIndex = false;
+    this.tabChangeConfirm = false;
   }
   /**
    * Component lifecycle events.
@@ -179,7 +194,7 @@ export class DuetTabGroup {
         "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
         "duet-tab-group-scrolls": this.scrolls,
         "duet-tab-group-collapses": this.collapses,
-      }, "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) => {
+      }, "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.onTabSelect(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",
@@ -483,6 +498,24 @@ export class DuetTabGroup {
         "attribute": "set-tab-index",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "tabChangeConfirm": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If this property is set to true, tab won't change immediately after clicking it.\nComponent will emit \"duetTabChangeRequested\" event, and it needs to be handled manually in order to change tab."
+        },
+        "attribute": "tab-change-confirm",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -536,6 +569,26 @@ export class DuetTabGroup {
             }
           }
         }
+      }, {
+        "method": "duetTabChangeRequested",
+        "name": "duetTabChangeRequested",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event raised when new tab is clicked and \"tabChangeConfirm\" property is set to true"
+        },
+        "complexType": {
+          "original": "DuetTabGroupEvent",
+          "resolved": "{ component: \"duet-tab-group\"; value: number; }",
+          "references": {
+            "DuetTabGroupEvent": {
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -5,6 +5,7 @@ import { sizeHeader, sizeNavigation } from "@duetds/tokens";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { debounce } from "../../utils/js-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 import { breakpointTokensUpTo, breakpointToToken } from "../../utils/token-utils";
 const stickyTopValues = {
   none: 0,
@@ -23,6 +24,7 @@ export class DuetTable {
       this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
     };
     this.matchesBreakpoint = true;
+    this.language = getLanguage();
     this.theme = undefined;
     this.margin = "auto";
     this.variation = "striped";
@@ -31,6 +33,11 @@ export class DuetTable {
     this.breakpoint = "small";
     this.hideHeadVisually = false;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      setTimeout(() => this.copyHeadingsToCells(), 50);
+    }
+  }
   connectedCallback() {
     if (Build.isServer) {
       return;
@@ -65,6 +72,7 @@ export class DuetTable {
     // that way we avoid dealing with any initial changes
     // and only get genuine mutations as rows are added/removed
     this.observer ? this.observer.takeRecords() : null;
+    connectLanguageChangeObserver(this);
   }
   disconnectedCallback() {
     if (Build.isServer) {
@@ -75,6 +83,7 @@ export class DuetTable {
     this.mq.removeListener(this.handleMediaQueryChange);
     this.mq = null;
     this.matchesBreakpoint = true;
+    disconnectLanguageChangeObserver(this);
   }
   /**
    * Local methods.
@@ -270,8 +279,15 @@ export class DuetTable {
   }
   static get states() {
     return {
-      "matchesBreakpoint": {}
+      "matchesBreakpoint": {},
+      "language": {}
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }];
+  }
 }

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

@@ -62,6 +62,19 @@ export class DuetTextarea {
         component: "duet-textarea",
       });
     };
+    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.margin = "auto";
     this.accessibleActiveDescendant = undefined;
     this.accessibleAutocomplete = undefined;
@@ -136,9 +149,7 @@ export class DuetTextarea {
         "duet-label-hidden": this.labelHidden,
         "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 }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy
-        ? `${this.errorId} ${this.labelId} ${this.accessibleLabelledBy}`
-        : `${this.errorId} ${this.labelId} `, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-errormessage": this.error ? this.errorId : null, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
   }
   static get is() { return "duet-textarea"; }
   static get encapsulation() { return "scoped"; }

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

@@ -9,6 +9,7 @@ export class DuetToolbarLink {
     this.active = false;
     this.href = "#";
     this.icon = undefined;
+    this.accessibleLabel = undefined;
   }
   /**
    * Component lifecycle events.
@@ -21,7 +22,7 @@ export class DuetToolbarLink {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("a", { class: { "duet-toolbar-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", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null))));
+    return (h(Host, null, h("a", { class: { "duet-toolbar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-toolbar-link"; }
   static get encapsulation() { return "shadow"; }
@@ -113,6 +114,23 @@ export class DuetToolbarLink {
         "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-tooltip/duet-tooltip.js

@@ -4,7 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetTooltip {
   constructor() {
     /**
@@ -113,6 +113,14 @@ export class DuetTooltip {
     this.positionHorizontal = "0";
     this.active = false;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefault[oldValue]) {
+      this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, newValue);
+    }
+    if (newValue !== oldValue && this.accessibleCloseLabel === this.accessibleCloseLabelDefault[oldValue]) {
+      this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -133,6 +141,12 @@ export class DuetTooltip {
     }
     this.focusTarget = null;
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Component event handling.
    */
@@ -145,6 +159,12 @@ export class DuetTooltip {
       }
     }, 100);
   }
+  handleWindowResize() {
+    clearTimeout(this.resizeTimer);
+    this.resizeTimer = setTimeout(() => {
+      this.handleHorizontalVisibility();
+    }, 100);
+  }
   handleDocumentClick(e) {
     if (!this.active) {
       return;
@@ -287,7 +307,7 @@ export class DuetTooltip {
       },
       "accessibleLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -354,7 +374,7 @@ export class DuetTooltip {
       },
       "accessibleCloseLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -371,7 +391,7 @@ export class DuetTooltip {
         },
         "attribute": "accessible-close-label",
         "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleCloseLabelDefault, this.language)"
+        "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefault,\n    this.language\n  )"
       },
       "label": {
         "type": "string",
@@ -503,6 +523,9 @@ export class DuetTooltip {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "active",
         "methodName": "handleActiveChange"
       }];
@@ -514,6 +537,12 @@ export class DuetTooltip {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "resize",
+        "method": "handleWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
       }, {
         "name": "click",
         "method": "handleDocumentClick",

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

@@ -34,6 +34,10 @@
   margin-top: 16px;
 }
 
+::slotted([slot=uploadfooter]) {
+  margin-top: 20px;
+}
+
 .duet-upload {
   box-sizing: border-box;
   padding: 0;
@@ -109,13 +113,14 @@ duet-editable-table tfoot {
 }
 
 .upload-bottom-caption {
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-top: 12px;
+  margin-bottom: 28px;
 }
 
 .items-header {
   display: none;
   flex-direction: row;
+  margin-bottom: 0;
 }
 @media (min-width: 36em) {
   .items-header {
@@ -138,7 +143,7 @@ duet-editable-table tfoot {
 .upload-item-row {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 16px;
   align-content: center;
   align-items: center;
   padding: 16px 0 16px 0;
@@ -147,51 +152,59 @@ duet-editable-table tfoot {
 @media (min-width: 36em) {
   .upload-item-row {
     flex-direction: row;
+    gap: 10px;
   }
 }
 .upload-item-row .item-categories {
   width: 100%;
-  margin-bottom: 8px;
 }
 @media (min-width: 36em) {
   .upload-item-row .item-categories {
     width: 35%;
   }
 }
-.upload-item-row .item-label {
+.upload-item-row .item-name {
+  position: relative;
+  bottom: 2px;
   width: 100%;
-  margin-bottom: 8px;
   text-align: left;
 }
 @media (min-width: 36em) {
-  .upload-item-row .item-label {
+  .upload-item-row .item-name {
     width: 50%;
   }
-  .upload-item-row .item-label.no-category {
+  .upload-item-row .item-name.no-category {
     width: 85%;
   }
 }
 .upload-item-row .item-categories .heading,
-.upload-item-row .item-label .heading {
+.upload-item-row .item-name .heading {
   display: block;
 }
 @media (min-width: 36em) {
   .upload-item-row .item-categories .heading,
-  .upload-item-row .item-label .heading {
+  .upload-item-row .item-name .heading {
     display: none;
   }
 }
 .upload-item-row .item-actions {
   width: 100%;
+  margin-left: -8px;
   text-align: left;
 }
 @media (min-width: 36em) {
   .upload-item-row .item-actions {
     width: 15%;
+    padding-top: 0;
+    margin-left: auto;
     text-align: right;
   }
 }
 .upload-item-row .duet-upload-item-name duet-icon {
   position: relative;
   top: 4px;
+}
+.upload-item-row .duet-upload-item-name duet-progress {
+  display: block;
+  margin-top: 16px;
 }

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

@@ -696,7 +696,7 @@ export class DuetUpload {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), h("duet-spacer", { size: "large" }), !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes))), h("duet-spacer", { size: "medium" }), h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, h("duet-spacer", { size: "large" }), h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached || this.bytesMaxReached) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
         this.nativeInput = input;
       }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
         "duet-upload": true,

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

@@ -4,5 +4,5 @@
 import { h } from "@stencil/core";
 import { getLocaleString } from "../../utils/language-utils";
 export const UploadItemHeader = ({ label, categoryLabel }) => {
-  return (h("div", { class: "items-header" }, categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, getLocaleString(categoryLabel))), h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, getLocaleString(label))));
+  return (h("div", { class: "items-header" }, categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none" }, getLocaleString(categoryLabel))), h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none" }, getLocaleString(label))));
 };

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

@@ -11,7 +11,7 @@ export const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme,
   const getFileNameLine = () => {
     switch (type) {
       case "inprogress":
-        return (h("span", { class: "duet-upload-item-name" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("br", null), h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+        return (h("span", { class: "duet-upload-item-name" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
       case "pending":
         return (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
       case "failure":
@@ -22,11 +22,11 @@ export const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme,
   };
   const ContentName = (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
   const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } }, "(", formatBytes(size), ")"));
-  const Badges = meta && meta.badges ? (h("span", null, h("duet-spacer", { size: "xx-small" }), meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+  const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
   const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${name}`;
   return (h("div", { class: {
       "upload-item-row": true,
-    } }, showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(categoryLabel)), Badges)), h("div", { class: { "item-label": true, "no-category": !showCategory } }, !!label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(label))), getFileNameLine()), h("div", { class: "item-actions" }, actions.map(actionItem => {
+    } }, showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(categoryLabel)), Badges)), h("div", { class: { "item-name": true, "no-category": !showCategory } }, !!label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(label))), getFileNameLine()), h("div", { class: "item-actions" }, actions.map(actionItem => {
     return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} ` }));
   }))));
 };

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-41ef88f4.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-29b0c53d.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-276e05ab.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-cf8e064c.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-49848110.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-6b75d471.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, d as Host } from './p-0d1b84db.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-d0a476fa.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-d6a4de03.js';
+import { d as defineCustomElement$2 } from './p-fb9ea1e2.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;font-weight:inherit;color:rgb(0, 41, 77);text-decoration:none}.duet-breadcrumb:hover{color:rgb(0, 77, 128)}.duet-breadcrumb.duet-theme-turva{color:rgb(23, 28, 58)}.duet-breadcrumb.duet-theme-turva:hover{color:rgb(148, 9, 37)}.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 rgb(0, 119, 179)}: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 rgb(23, 28, 58)}.duet-breadcrumb.duet-breadcrumb-without-href:hover{color:rgb(0, 41, 77)}.duet-breadcrumb.duet-breadcrumb-without-href.duet-theme-turva:hover{color:rgb(23, 28, 58)}.duet-breadcrumb.duet-breadcrumb-without-href:active{opacity:1}";
 

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, d as Host } from './p-0d1b84db.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-d0a476fa.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { g as getLocaleString } from './p-6c05e879.js';
-import { d as defineCustomElement$2 } from './p-d6a4de03.js';
+import { a as getLocaleString } from './p-076452be.js';
+import { d as defineCustomElement$2 } from './p-fb9ea1e2.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-dde8e436.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-8810d94c.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-29b2c3bb.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-773afd9d.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;