@duetds/components 6.9.0 → 6.9.1

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

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

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

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

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

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

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

@@ -145,7 +145,7 @@ export class DuetSelect {
     }))), h("div", { class: {
         "duet-select": true,
         "duet-select-variation-tiny": this.variation === "tiny",
-      }, "aria-hidden": "true" }, h("span", { key: this.value }, this.getSelectedItemLabel()), this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" })))), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+      }, "aria-hidden": "true" }, h("span", { key: this.value }, this.getSelectedItemLabel()), this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" }))), h("span", { class: "keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-select"; }
   static get encapsulation() { return "scoped"; }

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

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

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

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

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

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

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

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

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-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.
    */
@@ -287,7 +301,7 @@ export class DuetTooltip {
       },
       "accessibleLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -354,7 +368,7 @@ export class DuetTooltip {
       },
       "accessibleCloseLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -371,7 +385,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 +517,9 @@ export class DuetTooltip {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "active",
         "methodName": "handleActiveChange"
       }];

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

@@ -34,6 +34,10 @@
   margin-top: 16px;
 }
 
+::slotted([slot=uploadfooter]) {
+  margin-top: 28px;
+}
+
 .duet-upload {
   box-sizing: border-box;
   padding: 0;
@@ -109,8 +113,8 @@ duet-editable-table tfoot {
 }
 
 .upload-bottom-caption {
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-top: 12px;
+  margin-bottom: 28px;
 }
 
 .items-header {
@@ -151,47 +155,53 @@ duet-editable-table tfoot {
 }
 .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%;
+  padding-top: 6px;
   text-align: left;
 }
 @media (min-width: 36em) {
   .upload-item-row .item-actions {
     width: 15%;
+    padding-top: 0;
     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", { 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.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-c57eccd3.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-c272c5d5.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-94df5d2c.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;