@duetds/components 6.8.9 → 6.9.1

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"; }
@@ -170,7 +170,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -465,7 +465,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -614,7 +614,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -634,7 +634,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -654,7 +654,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }

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-slideout/duet-slideout.js

@@ -233,7 +233,7 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx"
             }
           }
         }

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

@@ -49,7 +49,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },
@@ -95,7 +95,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },

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

@@ -95,7 +95,7 @@ export class DuetSpinner {
           "references": {
             "DuetSpinnerSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spinner/duet-spinner.tsx"
             }
           }
         },

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

@@ -193,7 +193,7 @@ export class DuetStep {
           "references": {
             "DuetStepState": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         },
@@ -270,7 +270,7 @@ export class DuetStep {
           "references": {
             "DuetStepClickEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         }

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

@@ -223,7 +223,7 @@ export class DuetStepper {
           "references": {
             "DuetStepChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-stepper/duet-stepper.tsx"
             }
           }
         }

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-tab-group/duet-tab-group.js

@@ -294,7 +294,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         },
@@ -512,7 +512,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -532,7 +532,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -553,7 +553,7 @@ export class DuetTabGroup {
             },
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           },
           "return": "Promise<void>"

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

@@ -5,7 +5,8 @@ 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 { breakpointToToken } from "../../utils/token-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { breakpointTokensUpTo, breakpointToToken } from "../../utils/token-utils";
 const stickyTopValues = {
   none: 0,
   "with-links": parseFloat(sizeNavigation) * 16,
@@ -20,9 +21,10 @@ export class DuetTable {
   constructor() {
     this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
     this.handleMediaQueryChange = (mq) => {
-      this.matchesBreakpoint = mq.matches;
+      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.
@@ -230,7 +239,7 @@ export class DuetTable {
         "mutable": false,
         "complexType": {
           "original": "DuetTableBreakpoint",
-          "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"xx-large\" | \"xxx-large\"",
+          "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
           "references": {
             "DuetTableBreakpoint": {
               "location": "import",
@@ -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

@@ -715,7 +715,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -735,7 +735,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -755,7 +755,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -775,7 +775,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }

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

@@ -432,7 +432,7 @@ export class DuetToggle {
           "references": {
             "DuetToggleChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-toggle/duet-toggle.tsx"
             }
           }
         }

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",
@@ -400,7 +414,7 @@ export class DuetTooltip {
           "references": {
             "DuetTooltipBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
             }
           }
         },
@@ -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;
@@ -99,10 +103,6 @@
 .duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button), .duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-action-button::part(button) {
   border: 0;
 }
-.duet-upload-editable-table .duet-upload-item-name duet-icon {
-  position: relative;
-  top: 2px;
-}
 
 duet-paragraph::part(duet-paragraph) {
   word-break: break-word;
@@ -113,19 +113,95 @@ duet-editable-table tfoot {
 }
 
 .upload-bottom-caption {
-  margin-bottom: 12px;
+  margin-top: 12px;
+  margin-bottom: 28px;
 }
 
-.test {
-  display: flex;
+.items-header {
+  display: none;
   flex-direction: row;
 }
-.test .item-categories {
-  flex-grow: 1;
+@media (min-width: 36em) {
+  .items-header {
+    display: flex;
+  }
+}
+.items-header:not(:last-child), .items-header:not(:first-child) {
+  margin-top: 12px;
+}
+.items-header .category-header {
+  width: 35%;
+}
+.items-header .filename-header {
+  width: 65%;
+}
+.items-header .filename-header.no-category {
+  width: 100%;
+}
+
+.upload-item-row {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-content: center;
+  align-items: center;
+  padding: 16px 0 16px 0;
+  border-bottom: 1px solid rgb(225, 227, 230);
+}
+@media (min-width: 36em) {
+  .upload-item-row {
+    flex-direction: row;
+  }
 }
-.test .item-label {
-  flex-grow: 2;
+.upload-item-row .item-categories {
+  width: 100%;
 }
-.test .item-actions {
-  flex-grow: 1;
+@media (min-width: 36em) {
+  .upload-item-row .item-categories {
+    width: 35%;
+  }
+}
+.upload-item-row .item-name {
+  position: relative;
+  bottom: 2px;
+  width: 100%;
+  text-align: left;
+}
+@media (min-width: 36em) {
+  .upload-item-row .item-name {
+    width: 50%;
+  }
+  .upload-item-row .item-name.no-category {
+    width: 85%;
+  }
+}
+.upload-item-row .item-categories .heading,
+.upload-item-row .item-name .heading {
+  display: block;
+}
+@media (min-width: 36em) {
+  .upload-item-row .item-categories .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;
 }