@duetds/components 4.33.0 → 4.34.1

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
@@ -58,7 +58,7 @@ export class DuetIcon {
     if (this.src && this.icon) {
       console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
     }
-    return this.loadIcon();
+    this.loadIcon();
   }
   async loadIcon() {
     // static icon known at build-time, so we can set it synchronously
@@ -66,6 +66,10 @@ export class DuetIcon {
       this.svgContent = this.icon;
       return;
     }
+    // on server, don't make requests
+    if (!Build.isBrowser) {
+      return;
+    }
     // dynamically load icon from url
     const src = this.src ? this.src : buildIconUrl(this.name);
     try {
@@ -80,11 +84,13 @@ export class DuetIcon {
    * Always the last one in the class.
    */
   render() {
-    const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color) || getColorByName(this.outline);
+    const color = this.color === "currentColor"
+      ? "currentColor"
+      : getColorByName(this.color, this.theme) || getColorByName(this.outline, this.theme);
     const styles = {
       color,
-      background: getColorByName(this.background),
-      "border-color": getColorByName(this.outline),
+      background: getColorByName(this.background, this.theme),
+      "border-color": getColorByName(this.outline, this.theme),
     };
     return (h(Host, { class: {
         "duet-m-0": this.margin === "none",

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

@@ -6,6 +6,9 @@ import { Build, Component, Fragment, h, Host, Method, Prop } from "@stencil/core
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+/**
+ * @part duet-link - piercing selector for styling the link
+ */
 export class DuetLink {
   constructor() {
     /**
@@ -61,7 +64,7 @@ export class DuetLink {
           "duet-link": true,
           "duet-link-is-external": this.external,
           "duet-theme-turva": this.theme === "turva",
-        }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el) },
+        }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link" },
         h("slot", null),
         Build.isBrowser && this.external && (h(Fragment, null,
           h("duet-visually-hidden", null, this.accessibleLabelExternal),

package/lib/collection/components/duet-list-item/duet-list-item.css

@@ -39,12 +39,12 @@
 }
 :host dt,
 :host dd {
+  margin-inline-start: 0;
   -webkit-hyphens: auto;
   hyphens: auto;
   text-align: left;
   word-break: break-all;
   word-break: break-word;
-  margin-inline-start: 0;
 }
 @media (max-width: 35.9375em) {
   :host dt,

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.css

@@ -52,6 +52,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
+  background-color: white;
   border-bottom: 1px solid #e1e3e6;
   border-radius: 0;
   -webkit-appearance: none;
@@ -66,7 +67,6 @@
     overflow: hidden;
     font-size: 0.875rem;
     line-height: 4rem;
-    background-color: white;
     border: 0;
     border-radius: 4px;
     transition: border 300ms ease;
@@ -75,6 +75,7 @@
 .duet-theme-turva .duet-drawer-toggle {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #171c3a;
+  background-color: white;
   border-color: #e4e4e6;
 }
 .duet-drawer-toggle:active {
@@ -200,14 +201,14 @@
 
 .duet-drawer-content {
   display: none;
-  background-color: #f5f8fa;
+  background-color: white;
   border-bottom: 1px solid #e1e3e6;
 }
 .duet-drawer-content:focus {
   outline: 0;
 }
 .duet-theme-turva .duet-drawer-content {
-  background-color: #f5f5f7;
+  background-color: white;
   border-color: #e1e3e6;
 }
 @media (min-width: 62em) {

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

@@ -177,59 +177,60 @@ duet-table.duet-theme-turva tbody th {
   border-top-color: #e4e4e6;
 }
 
-.duet-table-minimal th, .duet-table-plain th {
+.duet-table-fixed th, .duet-table-minimal th, .duet-table-plain th {
   padding: 16px !important;
   border-bottom: 1px solid #657787;
 }
-.duet-table-minimal th:first-child, .duet-table-plain th:first-child {
+.duet-table-fixed th:first-child, .duet-table-minimal th:first-child, .duet-table-plain th:first-child {
   padding-left: 0 !important;
 }
-.duet-table-minimal th:last-child, .duet-table-plain th:last-child {
+.duet-table-fixed th:last-child, .duet-table-minimal th:last-child, .duet-table-plain th:last-child {
   padding-right: 0 !important;
 }
-.duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
+.duet-theme-turva.duet-table-fixed th, .duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
   border-bottom-color: #444445;
 }
-.duet-table-minimal tbody th, .duet-table-plain tbody th {
+.duet-table-fixed tbody th, .duet-table-minimal tbody th, .duet-table-plain tbody th {
   padding-top: 40px !important;
   border-bottom-color: #e1e3e6;
 }
-.duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
+.duet-theme-turva.duet-table-fixed tbody th, .duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
   border-bottom-color: #e4e4e6;
 }
-.duet-table-minimal td, .duet-table-plain td {
+.duet-table-fixed td, .duet-table-minimal td, .duet-table-plain td {
   padding: 16px !important;
 }
-.duet-table-minimal td:first-child, .duet-table-plain td:first-child {
+.duet-table-fixed td:first-child, .duet-table-minimal td:first-child, .duet-table-plain td:first-child {
   padding-left: 0 !important;
 }
-.duet-table-minimal td:last-child, .duet-table-plain td:last-child {
+.duet-table-fixed td:last-child, .duet-table-minimal td:last-child, .duet-table-plain td:last-child {
   padding-right: 0 !important;
 }
-.duet-table-minimal tbody td, .duet-table-plain tbody td {
+.duet-table-fixed tbody td, .duet-table-minimal tbody td, .duet-table-plain tbody td {
   border-bottom: 1px solid #e1e3e6;
 }
-.duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
+.duet-theme-turva.duet-table-fixed tbody td, .duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
   border-bottom-color: #e4e4e6;
 }
-.duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
+.duet-table-flattened.duet-table-fixed tbody:first-of-type th, .duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
   padding-top: 0 !important;
 }
-.duet-table-flattened.duet-table-minimal td, .duet-table-flattened.duet-table-plain td,
+.duet-table-flattened.duet-table-fixed td, .duet-table-flattened.duet-table-minimal td, .duet-table-flattened.duet-table-plain td,
+.duet-table-flattened.duet-table-fixed tbody th,
 .duet-table-flattened.duet-table-minimal tbody th,
 .duet-table-flattened.duet-table-plain tbody th {
   border-bottom: 0;
 }
-.duet-table-flattened.duet-table-minimal tr, .duet-table-flattened.duet-table-plain tr {
+.duet-table-flattened.duet-table-fixed tr, .duet-table-flattened.duet-table-minimal tr, .duet-table-flattened.duet-table-plain tr {
   padding: 20px 0 !important;
 }
-.duet-table-flattened.duet-table-minimal tbody th, .duet-table-flattened.duet-table-plain tbody th {
+.duet-table-flattened.duet-table-fixed tbody th, .duet-table-flattened.duet-table-minimal tbody th, .duet-table-flattened.duet-table-plain tbody th {
   padding-top: 20px !important;
 }
-.duet-table-flattened.duet-table-minimal tfoot td, .duet-table-flattened.duet-table-plain tfoot td {
+.duet-table-flattened.duet-table-fixed tfoot td, .duet-table-flattened.duet-table-minimal tfoot td, .duet-table-flattened.duet-table-plain tfoot td {
   margin-bottom: 4px !important;
 }
-.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child {
+.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child {
   border-bottom: 0;
 }
 
@@ -263,6 +264,30 @@ duet-table.duet-theme-turva tbody th {
   border-top-color: #e4e4e6;
 }
 
+.duet-table-fixed table {
+  table-layout: fixed;
+}
+.duet-table-fixed tbody tr,
+.duet-table-fixed tbody tr td,
+.duet-table-fixed tbody tr td:first-child {
+  padding: 4px !important;
+  vertical-align: text-bottom;
+  border-bottom: 0 none;
+}
+.duet-table-fixed thead {
+  display: none;
+}
+.duet-table-fixed tbody tr,
+.duet-table-fixed tbody tr td {
+  border-bottom: 0 none;
+}
+.duet-table-fixed:not(.duet-table-flattened) tfoot {
+  border-top: 1px solid #e1e3e6;
+}
+.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot {
+  border-top-color: #e4e4e6;
+}
+
 .duet-table-scrollable {
   position: relative;
   width: 100%;

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

@@ -64,7 +64,7 @@ export class DuetTable {
       return;
     }
     this.mq = matchMedia(breakpointToToken[this.breakpoint]);
-    this.mq.addListener(this.handleMediaQueryChange);
+    this.mq.addEventListener("change", this.handleMediaQueryChange);
     this.handleMediaQueryChange(this.mq);
     this.observer = new MutationObserver(() => this.copyHeadingsToCells());
     this.observer.observe(this.element, {
@@ -185,7 +185,7 @@ export class DuetTable {
       "mutable": false,
       "complexType": {
         "original": "DuetTableVariant",
-        "resolved": "\"plain\" | \"striped\"",
+        "resolved": "\"fixed\" | \"plain\" | \"striped\"",
         "references": {
           "DuetTableVariant": {
             "location": "local"

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

@@ -4,18 +4,17 @@
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { getLocaleString, sanitizeString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { ErrorItem } from "./duet-upload-editable-item-error";
-import { ProgressItem } from "./duet-upload-editable-item-inprogres";
-import { SuccessItem } from "./duet-upload-editable-item-success";
-import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./duet-upload-validators";
 import { getError, getI18nError } from "./errorcodes.utils";
+import { ErrorItem } from "./upload-editable-item-error";
+import { ProgressItem } from "./upload-editable-item-inprogres";
+import { SuccessItem } from "./upload-editable-item-success";
+import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./upload-validators";
 import { makeXhrRequest } from "./xhr.helpers";
 /**
  * @slot header  - named slot - to place content after description / caption
  * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
- * @slot filelist - named slot - should always contain a configurable duet-editable-table or a component that exposes the same functionality
  * @slot filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
  */
 export class DuetUpload {
@@ -30,7 +29,7 @@ export class DuetUpload {
     this.filesInProgress = new Map();
     this.fileMaxReached = false;
     this.bytesMaxReached = false;
-    //region Internally exposed properties
+    this.internalStatusMessageLabel = undefined;
     /**
      * Properties
      */
@@ -49,18 +48,18 @@ export class DuetUpload {
      */
     this.external = false;
     /**
-     * If set the upload component will not display an upload button, you will have to create on yourself
-     * and call the exposed methods startUpload
+     * If set the upload component will not display an upload button, you will have to create one yourself
+     * and call the exposed method startUpload
      */
     this.hideButton = false;
     /**
-     * Default actions added to all files
+     * Default actions added to the internally used duet-editable-table
      */
     this.actions = [
       {
         icon: "action-delete",
         color: "color-danger",
-        color_hover: "category-home",
+        color_hover: "primary-dark",
         id: "delete",
         map: ["success", "failure"],
         label: {
@@ -72,7 +71,7 @@ export class DuetUpload {
       {
         icon: "navigation-close",
         color: "primary",
-        color_hover: "category-home",
+        color_hover: "primary-dark",
         id: "cancel",
         map: ["inprogress"],
         label: {
@@ -83,17 +82,43 @@ export class DuetUpload {
       },
     ];
     /**
-     * If enabled the filelist will create links on successfully uploaded items,
+     * If enabled the editable-table will display links on successfully uploaded items,
      * this requires the server can respond with link URIs in the correct format
+     * and that the files are accessible to the user
      */
     this.showLinks = false;
     /**
      * Property to change the aria upload progress text read aloud by screenreaders
      * @default {
-        fi: "Lisää liite",
-        sv: "Lägg till en bilaga",
-        en: "Choose files",
-      }
+     *     fi: {
+     *       inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
+     *       inProgressWithErrors:
+     *         "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+     *       done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+     *       doneWithErrors:
+     *         "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+     *       files: "tiedostot",
+     *       file: "tiedosto",
+     *     },
+     *     sv: {
+     *       inProgress: "Adding {filesUploaded} of {filesTotal}",
+     *       inProgressWithErrors:
+     *         "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+     *       done: "Alla {filesTotal} har lagts till",
+     *       doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+     *       files: "filer",
+     *       file: "fil",
+     *     },
+     *     en: {
+     *       inProgress: "Adding {filesUploaded} of {filesTotal}",
+     *       inProgressWithErrors:
+     *         "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+     *       done: "All {filesTotal} added successfully",
+     *       doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+     *       files: "tiedostoa",
+     *       file: "tiedosto",
+     *     },
+     *   }
      */
     this.statusLabelDefaults = {
       fi: {
@@ -126,8 +151,7 @@ export class DuetUpload {
      */
     this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
     /**
-     * Property to change descriptionDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
+     * Property to change button label defaults on the component.
      * @default {
         fi: "Lisää liite",
         sv: "Lägg till en bilaga",
@@ -145,7 +169,7 @@ export class DuetUpload {
      */
     this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
     /**
-     * accessible Label of button
+     * accessible aria-Label of button
      */
     this.accessibleButtonLabel = undefined;
     /**
@@ -168,6 +192,10 @@ export class DuetUpload {
      * browser from displaying its own validation errors.
      */
     this.required = false;
+    /**
+     * Key used to set vertical alignment of action buttons
+     */
+    this.alignment = "middle";
     /**
      * Visually hides the groups labels in the editable table list used to display the list of files
      */
@@ -177,7 +205,7 @@ export class DuetUpload {
      */
     this.files = new Map();
     /**
-     * Property to read if filelist contains errors or not
+     * Property to read if the internally used editable-table contains errors or not
      */
     this.valid = !this.required;
     /**
@@ -197,7 +225,6 @@ export class DuetUpload {
     this.label = getLocaleString(this.labelDefaults);
     /**
      * Property to change descriptionDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
      * @default {
         fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
         sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
@@ -271,7 +298,6 @@ export class DuetUpload {
      * by default this is off, setting this to true will limit the users choices to what has been explicitly set
      */
     this.limitSelection = false;
-    //region Private functions
     /**
      * Private functions
      */
@@ -370,7 +396,6 @@ export class DuetUpload {
       }
     };
     this.updateProgress = (ev, name) => {
-      console.log(this.filesInProgress.size);
       const updateProgressHelper = percentComplete => {
         this.updateValueInMap(name, "progress", percentComplete);
         this.onProgress(name, percentComplete, ev);
@@ -414,6 +439,10 @@ export class DuetUpload {
        * We reset the form fields to always be able to re-upload files
        * and because we handle all uploads and states internally in the component (not relying on native form elements)
        */
+      /* TODO: it may be a good idea to just update the list so that this always matches what is in the files map,
+       * TODO: this would remove the capability of Re-uploading, unless we can catch and remove the user file from the form filelist before the upload is canceled by the browser
+       * TODO: but for now we'll just reset the form fields
+       */
       this.nativeInput.value = "";
     };
     this.startUpload = async (ev, metaData = undefined) => {
@@ -425,8 +454,6 @@ export class DuetUpload {
       ev.preventDefault();
       return;
     };
-    //endregion
-    //region Eventlisteners for the XHR requests
     /**
      * Eventlisteners for the XHR requests
      */
@@ -555,11 +582,16 @@ export class DuetUpload {
       this.kick();
     }
   }
-  //endregion
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
+    if (typeof this.statusMessageLabel === "string") {
+      this.internalStatusMessageLabel = sanitizeString(this.groups);
+    }
+    else {
+      this.internalStatusMessageLabel = this.statusMessageLabel;
+    }
     inheritGlobalTheme(this);
     this.listenForActionEvents();
   }
@@ -567,8 +599,6 @@ export class DuetUpload {
     // listen to the events from the component
     this.verifyValidity();
   }
-  //endregion
-  //region XHR requests
   /**
    * XHR request utilities
    */
@@ -616,8 +646,6 @@ export class DuetUpload {
       onProgress: this.trackProgress,
     });
   }
-  //endregion
-  //region EventHandlers
   /**
    * Component event handling.
    */
@@ -692,7 +720,6 @@ export class DuetUpload {
       component: "duet-upload",
     });
   }
-  //endregion
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
@@ -722,7 +749,7 @@ export class DuetUpload {
     return this.getFilesAsArray();
   }
   /**
-   * Convenience method for updating a of an item in the files attribute
+   * Convenience method for updating the value of a key:value inside an item in the files attribute
    */
   async updateValue(item, key, value) {
     this.updateValueInMap(item, key, value);
@@ -745,8 +772,8 @@ export class DuetUpload {
             "duet-upload-filelist-filled": this.files.size,
           }, id: this.labelId, for: identifier }, 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.statusMessageLabel })),
-        !!this.files.size && (h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, items: this.convertToDuetEditableTableItems() })),
+        !!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 && (h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })),
         !!this.files.size && h("slot", { name: "filefooter" }),
         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" }, this.buttonLabel)),
@@ -869,7 +896,7 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If set the upload component will not display an upload button, you will have to create on yourself\nand call the exposed methods startUpload"
+        "text": "If set the upload component will not display an upload button, you will have to create one yourself\nand call the exposed method startUpload"
       },
       "attribute": "hide-upload-button",
       "reflect": false,
@@ -892,11 +919,11 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Default actions added to all files"
+        "text": "Default actions added to the internally used duet-editable-table"
       },
       "attribute": "actions",
       "reflect": false,
-      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      color_hover: \"category-home\",\n      id: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      color_hover: \"category-home\",\n      id: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
+      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      color_hover: \"primary-dark\",\n      id: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      color_hover: \"primary-dark\",\n      id: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
     },
     "uri": {
       "type": "string",
@@ -927,7 +954,7 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If enabled the filelist will create links on successfully uploaded items,\nthis requires the server can respond with link URIs in the correct format"
+        "text": "If enabled the editable-table will display links on successfully uploaded items,\nthis requires the server can respond with link URIs in the correct format\nand that the files are accessible to the user"
       },
       "attribute": "show-links",
       "reflect": false,
@@ -968,7 +995,7 @@ export class DuetUpload {
       "docs": {
         "tags": [{
             "name": "default",
-            "text": "{\nfi: \"Lis\u00E4\u00E4 liite\",\nsv: \"L\u00E4gg till en bilaga\",\nen: \"Choose files\",\n}"
+            "text": "{\nfi: {\ninProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\ninProgressWithErrors:\n\"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\ndone: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\ndoneWithErrors:\n\"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\nfiles: \"tiedostot\",\nfile: \"tiedosto\",\n},\nsv: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\ndone: \"Alla {filesTotal} har lagts till\",\ndoneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\nfiles: \"filer\",\nfile: \"fil\",\n},\nen: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\ndone: \"All {filesTotal} added successfully\",\ndoneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\nfiles: \"tiedostoa\",\nfile: \"tiedosto\",\n},\n}"
           }],
         "text": "Property to change the aria upload progress text read aloud by screenreaders"
       },
@@ -977,15 +1004,15 @@ export class DuetUpload {
       "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\n      done: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\n      doneWithErrors:\n        \"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\n      files: \"tiedostot\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Alla {filesTotal} har lagts till\",\n      doneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"All {filesTotal} added successfully\",\n      doneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\n      files: \"tiedostoa\",\n      file: \"tiedosto\",\n    },\n  }"
     },
     "statusMessageLabel": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "StatusMessage",
-        "resolved": "{ inProgress: string; inProgressWithErrors: string; done: string; doneWithErrors: string; file: string; files: string; }",
+        "original": "StatusMessage | string",
+        "resolved": "string | { inProgress: string; inProgressWithErrors: string; done: string; doneWithErrors: string; file: string; files: string; }",
         "references": {
           "StatusMessage": {
             "location": "import",
-            "path": "./duet-upload-aria-status"
+            "path": "../duet-upload-aria-status/duet-upload-aria-status"
           }
         }
       },
@@ -995,7 +1022,9 @@ export class DuetUpload {
         "tags": [],
         "text": "Strings used for the status aria-label"
       },
-      "defaultValue": "getLocaleString(this.statusLabelDefaults)"
+      "attribute": "status-message-label",
+      "reflect": false,
+      "defaultValue": "getLocaleString(\n    this.statusLabelDefaults\n  )"
     },
     "buttonLabelDefaults": {
       "type": "string",
@@ -1017,7 +1046,7 @@ export class DuetUpload {
             "name": "default",
             "text": "{\nfi: \"Lis\u00E4\u00E4 liite\",\nsv: \"L\u00E4gg till en bilaga\",\nen: \"Add an attachment\",\n}"
           }],
-        "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
+        "text": "Property to change button label defaults on the component."
       },
       "attribute": "button-label-default",
       "reflect": false,
@@ -1056,7 +1085,7 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "accessible Label of button"
+        "text": "accessible aria-Label of button"
       },
       "attribute": "accessible-button-label",
       "reflect": false,
@@ -1184,11 +1213,29 @@ export class DuetUpload {
             "name": "example",
             "text": "[{ id: \"success\", label: {fi: \"Onnistunut\", en: \"Success\", sv: \"Alt klart\", }}]"
           }],
-        "text": "Array of group names that you want the editable table used to display files to display"
+        "text": "Array of group names that you want the editable table to use to display files"
       },
       "attribute": "groups",
       "reflect": false
     },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Key used to set vertical alignment of action buttons"
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "\"middle\""
+    },
     "hideGroups": {
       "type": "boolean",
       "mutable": false,
@@ -1239,7 +1286,7 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Property to read if filelist contains errors or not"
+        "text": "Property to read if the internally used editable-table contains errors or not"
       },
       "attribute": "valid",
       "reflect": true,
@@ -1312,7 +1359,7 @@ export class DuetUpload {
             "name": "default",
             "text": "{\nfi: \"Voit liitt\u00E4\u00E4 {filetypes}-muotoisia tiedostoja sek\u00E4 yleisimpi\u00E4 videotiedostoja. Voit l\u00E4hett\u00E4\u00E4 {maxbytes} verran tiedostoja yhdell\u00E4 kertaa, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan.\",\nsv: \"Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer \u00E5t g\u00E5ngen och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen.\",\nen: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.\",\n}"
           }],
-        "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
+        "text": "Property to change descriptionDefaults defaults on the component."
       },
       "attribute": "description-default",
       "reflect": false,
@@ -1825,7 +1872,7 @@ export class DuetUpload {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Convenience method for updating a of an item in the files attribute",
+        "text": "Convenience method for updating the value of a key:value inside an item in the files attribute",
         "tags": []
       }
     }