@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/cjs/duet-editable-table_3.cjs.entry.js

@@ -3,18 +3,16 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const jsUtils = require('./js-utils-92e24ba1.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const languageUtils = require('./language-utils-b5940c7b.js');
-const tokens_module = require('./tokens.module-7c947029.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-const createId = require('./create-id-1f8c438f.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
-const errorcodes_utils = require('./errorcodes.utils-4e8a9de4.js');
+var index = require('./index-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var jsUtils = require('./js-utils-hJ4A2edy.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-CYOjMfnd.js');
+var tokens_module = require('./tokens.module-Bhh9B2g8.js');
+var tokenUtils = require('./token-utils-COKjUxmn.js');
+var createId = require('./create-id-DtslnIOq.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
+var errorcodes_utils = require('./errorcodes.utils-HU_3reMl.js');
 
 //simple functional component that renders the data in the table
 const TableData = ({ data, groupId, alignment }, _children) => {
@@ -27,8 +25,7 @@ const TableData = ({ data, groupId, alignment }, _children) => {
     }
 };
 
-const duetEditableTableCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-actions-menu,td.duet-editable-table-actions-menu{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon .duet-icon{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row .duet-text-right{text-align:right}.duet-editable-table-header tr .duet-editable-table-header-hidden{padding:0 !important;font-size:0;border-bottom:0}";
-const DuetEditableTableStyle0 = duetEditableTableCss;
+const duetEditableTableCss = ":host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}.duet-editable-table-actions-menu,td.duet-editable-table-actions-menu{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon .duet-icon{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row .duet-text-right{text-align:right}.duet-editable-table-header tr .duet-editable-table-header-hidden{padding:0 !important;font-size:0;border-bottom:0}";
 
 const DuetEditableTable = class {
     constructor(hostRef) {
@@ -38,6 +35,74 @@ const DuetEditableTable = class {
         this.hasHeadSlotFirst = false;
         this.hasHeadSlotLast = false;
         this.hasFootSlot = false;
+        this.language = languageUtils.getLanguage();
+        /**
+         * Duet-table: margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Duet-table: Style variation of the table.
+         */
+        this.variation = "striped";
+        /**
+         * Duet-table: Controls whether the table has a sticky header.
+         * Sticky headers are not compatible with breakpoint="none-scrollable".
+         */
+        this.sticky = false;
+        /**
+         * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+         * table header becomes sticky.
+         */
+        this.stickyDistance = "with-links";
+        /**
+         * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.
+         * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+         * Set to "none" to disable the responsive functionality.
+         * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+         * this is useful for comparison tables where it's important to maintain column and row layout.
+         */
+        this.breakpoint = "small";
+        /**
+         * Define actions for all items in a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.actions = undefined;
+        /**
+         * Define columns for a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.columns = undefined;
+        /**
+         * Define rows for a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.rows = undefined;
+        /**
+         * Controls whether the table is sortable by headers
+         */
+        this.sortable = false;
+        /**
+         * Optional id that get passed to the table and used to setup ::parts
+         */
+        this.groupId = "";
+        /**
+         * Theme of the table.
+         */
+        this.theme = "";
+        /**
+         * Exposes the aria role for optimizing accessibility.
+         */
+        this.accessibleRole = undefined;
+        /**
+         * Hide a thead section visually. The content is still available to screen readers.
+         */
+        this.hideHeadVisually = false;
         this.sortableDefaultLabel = {
             fi: "Järjestä",
             en: "Click to sort",
@@ -68,20 +133,6 @@ const DuetEditableTable = class {
                 this.toggleColumn(column, e);
             }
         };
-        this.language = languageUtils.getLanguage();
-        this.margin = "auto";
-        this.variation = "striped";
-        this.sticky = false;
-        this.stickyDistance = "with-links";
-        this.breakpoint = "small";
-        this.actions = undefined;
-        this.columns = undefined;
-        this.rows = undefined;
-        this.sortable = false;
-        this.groupId = "";
-        this.theme = "";
-        this.accessibleRole = undefined;
-        this.hideHeadVisually = false;
     }
     /**
      * Component lifecycle events.
@@ -178,7 +229,7 @@ const DuetEditableTable = class {
      * Render Methods
      */
     render() {
-        return (index.h(index.Host, { key: '3d5bf5011822ef87cfa0e0286c8cf91e8496bae2', class: {
+        return (index.h(index.Host, { key: '05720c6ef38164df71b02c23fb45d3d84808c2ac', class: {
                 [`duet-editable-table-${this.variation}`]: true,
                 "duet-editable-table": true,
                 [`duet-editable-table-${this.theme}`]: true,
@@ -188,12 +239,15 @@ const DuetEditableTable = class {
                 "duet-editable-table-actions": !!this.actions,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
-            } }, index.h("duet-table", { key: 'ec986291dd0b4a8210449af3dd0f233e7ea5951b', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, index.h("table", { key: '1ae7b6227d4fb16d38ca46fcd3c164ba625cf18d', role: this.accessibleRole }, index.h("caption", { key: 'a78c14e03fad988f4b985eecb07674d90be9dafc' }, index.h("slot", { key: '3ab4a9d8f4f7a6818c4051e811d222bb31731fca', name: "tcaption" })), index.h("thead", { key: 'aca3450e23a6981df8a9bfefc6d4942914900138' }, this.hasHeadSlotFirst && (index.h("tr", { key: '95caf52351b79194f468e5f1b537e27514e3558e' }, index.h("td", { key: '35bea84e7baa12021a122bf6851d3a6b0a0105b3', class: "duet-editable-table-actions-menu", colSpan: 99 }, index.h("slot", { key: '6969c828d8f6717d2bc16daa2bb4d34225aacdcc', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (index.h("tr", { key: '64dc523c0369648863e076499b0ebb18f8f56ff4' }, index.h("td", { key: '64816f523901cd17e0f4481cb86e1596a0a079c3', class: "duet-editable-table-actions-menu", colSpan: 99 }, index.h("slot", { key: '6d69e2ee753e7dce6d3f47a7e7268cc5c0c10e12', name: "thead-last" }))))), index.h("tbody", { key: 'f5a526b833834a5d3601a479a9be3fd7de341d80' }, this.renderTableBody()), this.hasFootSlot && (index.h("tfoot", { key: '87bb8cfcad29c6033f95205666c0e09ae18f946b' }, index.h("tr", { key: '373cf5a124095988d9917422fd6c63da0bdd11b7' }, index.h("td", { key: 'ac6478d51c42552576d8e4f1708faebbec2d04fb', class: "duet-editable-table-footer-menu", colSpan: 99 }, index.h("slot", { key: 'b1257579708c35c4be3cb8148c63fd9d221ac8b3', name: "tfoot" })))))))));
+            } }, index.h("duet-table", { key: '52033d6f9c4e8ca460bacee6e2b8ea93da3b9eb8', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, index.h("table", { key: '7f0689d1e576d5f0c5324715feaf21ce21c42e97', role: this.accessibleRole }, index.h("caption", { key: '4e18555d5513dde6724a449d12030cc666937367' }, index.h("slot", { key: 'df9bcd3bde75a2669a08eb2ff0c67720750e5450', name: "tcaption" })), index.h("thead", { key: 'efbbe81840f6e9ae9e0cc91fee5653c43181f131' }, this.hasHeadSlotFirst && (index.h("tr", { key: '36d1a860bf16229740501f3b076b02125d1b3d85' }, index.h("td", { key: '24c22fca3cbfef4ab9e2582cf32bf967654b8b43', class: "duet-editable-table-actions-menu", colSpan: 99 }, index.h("slot", { key: 'a02148a1d13dc8c3147b26da2f5aa84e3b359cdf', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (index.h("tr", { key: '7b7ab392f982f5f7ce4caa5e86f7a1062412aad2' }, index.h("td", { key: 'cd739dea8b81f3290bb86d7e977fa83d124fdd03', class: "duet-editable-table-actions-menu", colSpan: 99 }, index.h("slot", { key: '068a9f86388a25ca00944d8e9ecfbed6cf0e2cfe', name: "thead-last" }))))), index.h("tbody", { key: 'f65077b6dee57c962826c459ddb044d4230753c5' }, this.renderTableBody()), this.hasFootSlot && (index.h("tfoot", { key: 'eceeface4ad0a0bbb15dc188a343291cef04ec72' }, index.h("tr", { key: 'aff41dc81c24e09a03db4742bf6d51c17b8ce937' }, index.h("td", { key: '5d332218393462356c02ca19ff9c3398fbeb89a7', class: "duet-editable-table-footer-menu", colSpan: 99 }, index.h("slot", { key: 'b438187cfa67ef90452783e9522d106ecf9ab9d3', name: "tfoot" })))))))));
     }
     get element() { return index.getElement(this); }
 };
-DuetEditableTable.style = DuetEditableTableStyle0;
+DuetEditableTable.style = duetEditableTableCss;
 
+const rgbable = (value) => {
+    return value.replace("rgb(", "").replace(")", "");
+};
 const styles = `
 duet-table {
   box-sizing: border-box;
@@ -359,6 +413,7 @@ duet-table {
 .duet-table-sticky thead th {
   position: sticky;
   top: 0;
+  z-index: $z-index-sticky;
   background: ${tokens_module.colorGrayLightest};
 }
 
@@ -394,7 +449,7 @@ duet-table {
   }
 
   &.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
-    background: rgba(${tokens_module.colorSecondaryTurva}, 0.04);
+    background: rgba(${rgbable(tokens_module.colorSecondaryTurva)}, 0.04);
   }
 
   tbody:not(:only-of-type) tr:nth-of-type(even) {
@@ -402,7 +457,7 @@ duet-table {
   }
 
   &.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
-    background: rgba(${tokens_module.colorSecondaryTurva}, 0.04);
+    background: rgba(${rgbable(tokens_module.colorSecondaryTurva)}, 0.04);
   }
 
   tfoot td {
@@ -603,10 +658,10 @@ duet-table {
 }
 
 .duet-table-selected-column {
-  background: rgba(${tokens_module.colorPrimary}, 0.08);
+  background: rgba(${rgbable(tokens_module.colorPrimary)}, 0.08);
 
   .duet-theme-turva & {
-    background: rgba(${tokens_module.colorGrayDarkerTurva}, 0.08);
+    background: rgba(${rgbable(tokens_module.colorGrayDarkerTurva)}, 0.08);
   }
 }
 
@@ -667,6 +722,66 @@ duet-table {
       grid-column: 2;
     }
   }
+
+  duet-table.duet-theme-turva2 {
+    &.duet-theme-turva td {
+      color: $color-turva2-gray-900;
+    }
+
+    &.duet-theme-turva tbody th {
+      color: $color-turva2-gray-900;
+    }
+
+    &.duet-table-striped.duet-theme-turva.duet-table-sticky thead {
+      th,
+      td {
+        border-bottom-color: $color-turva-nude-100;
+      }
+    }
+
+    &.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
+      background: rgba($color-turva2-gray-900, 0.04);
+    }
+
+    &.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
+      background: rgba($color-turva2-gray-900, 0.04);
+    }
+
+    &.duet-table-striped.duet-theme-turva tfoot td {
+      border-top-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
+      border-top-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-plain.duet-theme-turva tbody {
+      th,
+      td {
+        border-bottom-color: $color-turva-nude-100;
+      }
+    }
+
+    &.duet-table-plain.duet-theme-turva tbody td {
+      border-bottom-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
+      border-bottom-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
+      border-top-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-fixed.duet-theme-turva:not(.duet-table-flattened) tfoot {
+      border-top-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-sortable.duet-theme-turva:not(.duet-table-flattened) tfoot {
+      border-top-color: $color-turva-nude-100;
+    }
+  }
 }
 `.replace(/[\n\r\t]/gm, "");
 function createStyles(element) {
@@ -699,18 +814,47 @@ const DuetTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
-        this.handleMediaQueryChange = (mq) => {
-            this.matchesBreakpoint = tokenUtils.breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
-        };
+        /**
+         * Tracks whether the breakpoint is matched. This is set to true by default so that JavaScript disabled in SSR mode we get accessible table data first.
+         */
         this.matchesBreakpoint = true;
+        /**
+         * While table itself does not use language, the copyHeadingsToCells() method needs to be triggered when language changes.
+         */
         this.language = languageUtils.getLanguage();
-        this.theme = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Style variation of the table.
+         */
         this.variation = "striped";
+        /**
+         * Controls whether the table has a sticky header.
+         * Sticky headers are not compatible with breakpoint="none-scrollable".
+         */
         this.sticky = false;
+        /**
+         * Adjust the distance from top of the viewport (in pixels) when the
+         * table header becomes sticky.
+         */
         this.stickyDistance = "with-links";
+        /**
+         * By default the table is responsive - it will be flattened at narrow viewport widths.
+         * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+         * Set to "none" to disable the responsive functionality.
+         * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+         * this is useful for comparison tables where it's important to maintain column and row layout.
+         */
         this.breakpoint = "small";
+        /**
+         * Hide a thead section visually. The content is still available to screen readers.
+         */
         this.hideHeadVisually = false;
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesBreakpoint = tokenUtils.breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
+        };
     }
     watchLanguageStateHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -781,7 +925,7 @@ const DuetTable = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'a02e59e614dfac870270c7e3d74e04fb2802c527', class: {
+        return (index.h(index.Host, { key: 'f7fa5871fe4bbfc89ec3683ad0d4d9824fb9347a', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -790,7 +934,7 @@ const DuetTable = class {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, index.h("slot", { key: 'd3938a251798e10cd525715687c827fd449272cc' })));
+            } }, index.h("slot", { key: '0bdd203be920ca5f48f82473ce69f63d0ee3aa86' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -798,7 +942,7 @@ const DuetTable = class {
     }; }
 };
 
-const errorCodes = [
+var errorCodes = [
 	{
 		type: "default",
 		system_message: "unknown error",
@@ -1104,8 +1248,7 @@ const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress })
     return xhr;
 };
 
-const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}::slotted([slot=uploadfooter]){margin-top:20px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:rgb(245, 248, 250)}.duet-upload-filelist-empty-label{font-size:1rem;font-weight:400}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:1rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending{position:relative}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-progress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-progress{position:absolute;bottom:0;width:100%}.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-paragraph::part(duet-paragraph){word-break:break-word}duet-editable-table tfoot{display:none}.upload-bottom-caption{margin-top:12px;margin-bottom:16px;line-height:1.4rem}.items-header{display:none;flex-direction:row;margin-bottom:0}@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:16px;align-content:center;align-items:center;padding:16px 0 16px 0;border-bottom:1px solid rgb(212, 223, 229)}@media (min-width: 36em){.upload-item-row{flex-direction:row;gap:10px}}.upload-item-row .item-categories{width:100%}@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%;margin-left:-8px;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;padding-top:0;margin-left:auto;text-align:right}}.upload-item-row .duet-upload-item-name duet-icon{position:relative;top:4px}.upload-item-row .duet-upload-item-name duet-progress{display:block;margin-top:16px}";
-const DuetUploadStyle0 = duetUploadCss;
+const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}::slotted([slot=uploadfooter]){margin-top:20px}.duet-upload{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:rgb(245, 248, 250)}.duet-upload-filelist-empty-label{font-size:1rem;font-weight:400}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:1rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending{position:relative}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-progress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-progress{position:absolute;bottom:0;width:100%}.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-paragraph::part(duet-paragraph){word-break:break-word}duet-editable-table tfoot{display:none}.upload-bottom-caption{margin-top:12px;margin-bottom:16px;line-height:1.4rem}.items-header{display:none;flex-direction:row;margin-bottom:0}@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:16px;align-content:center;align-items:center;padding:16px 0 16px 0;border-bottom:1px solid rgb(212, 223, 229)}@media (min-width: 36em){.upload-item-row{flex-direction:row;gap:10px}}.upload-item-row .item-categories{width:100%}@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%;margin-left:-8px;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;padding-top:0;margin-left:auto;text-align:right}}.upload-item-row .duet-upload-item-name duet-icon{position:relative;top:4px}.upload-item-row .duet-upload-item-name duet-progress{display:block;margin-top:16px}";
 
 const DuetUpload = class {
     constructor(hostRef) {
@@ -1121,6 +1264,330 @@ const DuetUpload = class {
         this.duetProgress = index.createEvent(this, "duetProgress", 3);
         this.duetUpload = index.createEvent(this, "duetUpload", 3);
         this.linkClick = index.createEvent(this, "linkClick", 3);
+        /**
+         * State() variables
+         */
+        this.tick = Date.now();
+        /**
+         * If external is set to true, the upload component will not actually upload the files, but only keep states
+         * it will be up to you to handle the upload and return progress information to the upload-component
+         */
+        this.external = false;
+        /**
+         * If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request
+         */
+        this.middleware = null;
+        /**
+         * If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()
+         */
+        this.deferUpload = false;
+        /**
+         * If set the upload component will not display an upload button, you will have to create one yourself
+         * and call the exposed method startUpload to open the upload dialog
+         */
+        this.hideButton = false;
+        /**
+         * Default actions added to the internally used duet-editable-table
+         */
+        this.actions = [
+            {
+                icon: "action-delete",
+                color: "color-danger",
+                size: "x-small",
+                background: "gray-lightest",
+                name: "delete",
+                map: ["success", "failure"],
+                label: {
+                    fi: "Poista tiedosto",
+                    en: "Delete the file",
+                    sv: "Ta bort filen",
+                },
+            },
+            {
+                icon: "navigation-close",
+                color: "primary",
+                size: "x-small",
+                background: "gray-lightest",
+                name: "cancel",
+                map: ["inprogress", "pending"],
+                label: {
+                    fi: "Keskeytä lähetys",
+                    en: "Cancel the upload",
+                    sv: "Stop överföringen",
+                },
+            },
+        ];
+        /**
+         * 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: {
+         *       inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
+         *       inProgressWithErrors:
+         *         "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
+         *       done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
+         *       doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
+         *       files: "tiedostoa",
+         *       file: "tiedosto",
+         *     },
+         *     sv: {
+         *       inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
+         *       inProgressWithErrors:
+         *         "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+         *       done: "Uppladdningen slutförd, {filesTotal} har lagts till",
+         *       doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+         *       files: "filer",
+         *       file: "fil",
+         *     },
+         *     en: {
+         *       inProgress: "Uploading {filesUploaded} of {filesTotal}",
+         *       inProgressWithErrors:
+         *         "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+         *       done: "Upload completed, {filesTotal} added successfully",
+         *       doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
+         *       files: "files",
+         *       file: "file",
+         *     },
+         *  }
+         */
+        this.statusLabelDefaults = {
+            fi: {
+                inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
+                inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
+                done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
+                doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
+                files: "tiedostoa",
+                file: "tiedosto",
+            },
+            sv: {
+                inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
+                inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+                done: "Uppladdningen slutförd, {filesTotal} har lagts till",
+                doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+                files: "filer",
+                file: "fil",
+            },
+            en: {
+                inProgress: "Uploading {filesUploaded} of {filesTotal}",
+                inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+                done: "Upload completed, {filesTotal} added successfully",
+                doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
+                files: "files",
+                file: "file",
+            },
+        };
+        /**
+         * Strings used for the status aria-label
+         */
+        this.statusMessageLabel = languageUtils.getLocaleString(this.statusLabelDefaults);
+        /**
+         * Property to change button label defaults on the component.
+         * @default {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add an attachment",
+          }
+         */
+        this.buttonLabelDefaults = {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add an attachment",
+        };
+        /**
+         * Label of button
+         * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
+         */
+        this.buttonLabel = languageUtils.getLocaleString(this.buttonLabelDefaults);
+        /**
+         * accessible aria-Label of button
+         */
+        this.accessibleButtonLabel = undefined;
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Makes the input component disabled. This prevents users from being able to
+         * interact with the upload component, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * 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
+         */
+        this.hideGroups = false;
+        /**
+         * Map of string that contain list of uploaded files.
+         */
+        this.files = new Map();
+        /**
+         * Property to read if the internally used editable-table contains errors or not
+         */
+        this.valid = !this.required;
+        /**
+         * Property to change labelDefaults defaults on the component.
+         * normally you would handle these strings on an application level and override label when needed
+         * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+         */
+        this.labelDefaults = {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add attachments",
+        };
+        /**
+         * Label for the input.
+         * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+         */
+        this.label = languageUtils.getLocaleString(this.labelDefaults);
+        /**
+         * Property to change descriptionDefaults defaults on the component.
+         * @default {
+         *     en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
+         *     sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
+         *     fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
+         *   }
+         */
+        this.descriptionDefaults = {
+            en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
+            sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
+            fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
+        };
+        /**
+         * Description for the upload component.
+         * @default {
+         *     en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
+         *     sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
+         *     fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
+         *   }
+         */
+        this.description = languageUtils.getLocaleString(this.descriptionDefaults);
+        /**
+         * Defaults for the filelist's empty state.
+         * @default {
+            fi: "Ei vielä lisättyjä tiedostoja.",
+            sv: "Inga filer har lagts till ännu.",
+            en: "No files added yet.",
+           }
+         */
+        this.fileListEmptyDefaults = {
+            fi: "Ei vielä lisättyjä tiedostoja.",
+            sv: "Inga filer har lagts till ännu.",
+            en: "No files added yet.",
+        };
+        /**
+         * Label for the filelist's empty state.
+         * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."}
+         */
+        this.fileListEmpty = languageUtils.getLocaleString(this.fileListEmptyDefaults);
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Default errorcodes used by the component, modifiable via javascript
+         */
+        this.errorCodes = errorCodes;
+        /**
+         * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
+         */
+        this.maxBytes = 200000000;
+        /**
+         * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded.
+         */
+        this.maxBytesTotal = undefined;
+        /**
+         * Use maxFiles to specify the maximum amount of files that can be uploaded
+         */
+        this.maxFiles = 99;
+        /**
+         * A string of commaseperated file type values that are allowed
+         * @example: .pdf,.doc,.docx
+         */
+        this.allowedExtensions = "all";
+        /**
+         * A string of commaseperated mime type values that are allowed
+         * @example: image/*,application/msword,
+         */
+        this.allowedMimetypes = "";
+        /**
+         * Use multiple to allow the user to select multiple files when uploading
+         */
+        this.multiple = true;
+        /**
+         * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files,
+         * by default this is off, setting this to true will limit the users choices to what has been explicitly set
+         */
+        this.limitSelection = false;
+        /**
+         * Use hideCancelButton to hide cancel button for pending and in progress uploads
+         */
+        this.hideCancelButton = false;
+        /**
+         * If true the input caption will be placed below file list and footer
+         */
+        this.captionOnBottom = false;
+        /**
+         * Use show-uploaded-items-header to show single, generic, header for uploaded items
+         */
+        this.showUploadedItemsHeader = false;
+        /**
+         * Property to change single uploaded items header label
+         * @default {
+         *       fi: "Ladattu tiedosto.",
+         *       sv: "Nedladdad fil.",
+         *       en: "Uploaded file.",
+         *      }
+         */
+        this.uploadedItemsHeaderLabel = {
+            fi: "Ladattu tiedosto",
+            sv: "Lägg till en bilaga",
+            en: "Uploaded file",
+        };
+        /**
+         * Heading level for the label in the legend element. This is only used to give screen readers better logical structure.
+         * This does not affect visual appearance.
+         */
+        this.headerHeadingLevel = "h3";
+        /**
+         * Use hide-header to hide upload component header and caption (if caption is not on bottom)
+         */
+        this.hideHeader = false;
+        /**
+         * If link-click-event is set to true then upload component
+         * will emit an event on uploaded file link click (check linkClick event).
+         */
+        this.emitEvent = false;
+        /**
+         * Map action name to DuetLangObject or boolean. Sets upload item action buttons titles
+         * (show as DOM tooltip when hovering).
+         */
+        this.actionButtonTitles = {
+            cancel: false,
+            delete: false,
+        };
+        /**
+         * Use rename-duplicates to auto rename files with the same name instead of replacing them.
+         */
+        this.renameDuplicates = false;
         /**
          * Own Properties
          */
@@ -1143,6 +1610,45 @@ const DuetUpload = class {
             pending: "pending",
             failure: "failure",
         };
+        /**
+         * Array of group names that you want the editable table to use to display files
+         * @required
+         * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+         */
+        this.groups = [
+            {
+                id: this.DefaultGroups.success,
+                label: {
+                    fi: "Valmiit tiedostot",
+                    sv: "Files success",
+                    en: "Files success",
+                },
+            },
+            {
+                id: this.DefaultGroups.failure,
+                label: {
+                    fi: "Tiedostot, joissa on virheitä",
+                    sv: "Filer med fel",
+                    en: "Files with errors",
+                },
+            },
+            {
+                id: this.DefaultGroups.inprogress,
+                label: {
+                    fi: "Kesken olevat tiedostot",
+                    sv: "Filer inprogress",
+                    en: "Files inprogress",
+                },
+            },
+            {
+                id: this.DefaultGroups.pending,
+                label: {
+                    en: "Files to upload",
+                    sv: "Filer att ladda",
+                    fi: "Ladattavat tiedostot",
+                },
+            },
+        ];
         this.kick = jsUtils.debounce(() => {
             this.tick = Date.now();
         }, 30); // will trigger re-render
@@ -1582,169 +2088,6 @@ const DuetUpload = class {
             });
             return (index.h(index.Fragment, null, this.showUploadedItemsHeader && (index.h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
         };
-        this.tick = Date.now();
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.external = false;
-        this.middleware = null;
-        this.deferUpload = false;
-        this.hideButton = false;
-        this.actions = [
-            {
-                icon: "action-delete",
-                color: "color-danger",
-                size: "x-small",
-                background: "gray-lightest",
-                name: "delete",
-                map: ["success", "failure"],
-                label: {
-                    fi: "Poista tiedosto",
-                    en: "Delete the file",
-                    sv: "Ta bort filen",
-                },
-            },
-            {
-                icon: "navigation-close",
-                color: "primary",
-                size: "x-small",
-                background: "gray-lightest",
-                name: "cancel",
-                map: ["inprogress", "pending"],
-                label: {
-                    fi: "Keskeytä lähetys",
-                    en: "Cancel the upload",
-                    sv: "Stop överföringen",
-                },
-            },
-        ];
-        this.uri = undefined;
-        this.showLinks = false;
-        this.caption = undefined;
-        this.statusLabelDefaults = {
-            fi: {
-                inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
-                inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
-                done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
-                doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
-                files: "tiedostoa",
-                file: "tiedosto",
-            },
-            sv: {
-                inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
-                inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
-                done: "Uppladdningen slutförd, {filesTotal} har lagts till",
-                doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
-                files: "filer",
-                file: "fil",
-            },
-            en: {
-                inProgress: "Uploading {filesUploaded} of {filesTotal}",
-                inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
-                done: "Upload completed, {filesTotal} added successfully",
-                doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
-                files: "files",
-                file: "file",
-            },
-        };
-        this.statusMessageLabel = languageUtils.getLocaleString(this.statusLabelDefaults);
-        this.buttonLabelDefaults = {
-            fi: "Lisää liite",
-            sv: "Lägg till en bilaga",
-            en: "Add an attachment",
-        };
-        this.buttonLabel = languageUtils.getLocaleString(this.buttonLabelDefaults);
-        this.accessibleButtonLabel = undefined;
-        this.theme = "";
-        this.disabled = false;
-        this.identifier = undefined;
-        this.margin = "auto";
-        this.required = false;
-        this.alignment = "middle";
-        this.hideGroups = false;
-        this.files = new Map();
-        this.valid = !this.required;
-        this.labelDefaults = {
-            fi: "Lisää liite",
-            sv: "Lägg till en bilaga",
-            en: "Add attachments",
-        };
-        this.label = languageUtils.getLocaleString(this.labelDefaults);
-        this.descriptionDefaults = {
-            en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
-            sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
-            fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
-        };
-        this.description = languageUtils.getLocaleString(this.descriptionDefaults);
-        this.fileListEmptyDefaults = {
-            fi: "Ei vielä lisättyjä tiedostoja.",
-            sv: "Inga filer har lagts till ännu.",
-            en: "No files added yet.",
-        };
-        this.fileListEmpty = languageUtils.getLocaleString(this.fileListEmptyDefaults);
-        this.error = "";
-        this.errorCodes = errorCodes;
-        this.name = undefined;
-        this.maxBytes = 200000000;
-        this.maxBytesTotal = undefined;
-        this.maxFiles = 99;
-        this.allowedExtensions = "all";
-        this.allowedMimetypes = "";
-        this.multiple = true;
-        this.limitSelection = false;
-        this.hideCancelButton = false;
-        this.value = undefined;
-        this.externalUploadButtonId = undefined;
-        this.captionOnBottom = false;
-        this.showUploadedItemsHeader = false;
-        this.uploadedItemsHeaderLabel = {
-            fi: "Ladattu tiedosto",
-            sv: "Lägg till en bilaga",
-            en: "Uploaded file",
-        };
-        this.headerHeadingLevel = "h3";
-        this.hideHeader = false;
-        this.emitEvent = false;
-        this.actionButtonTitles = {
-            cancel: false,
-            delete: false,
-        };
-        this.renameDuplicates = false;
-        this.groups = [
-            {
-                id: this.DefaultGroups.success,
-                label: {
-                    fi: "Valmiit tiedostot",
-                    sv: "Files success",
-                    en: "Files success",
-                },
-            },
-            {
-                id: this.DefaultGroups.failure,
-                label: {
-                    fi: "Tiedostot, joissa on virheitä",
-                    sv: "Filer med fel",
-                    en: "Files with errors",
-                },
-            },
-            {
-                id: this.DefaultGroups.inprogress,
-                label: {
-                    fi: "Kesken olevat tiedostot",
-                    sv: "Filer inprogress",
-                    en: "Files inprogress",
-                },
-            },
-            {
-                id: this.DefaultGroups.pending,
-                label: {
-                    en: "Files to upload",
-                    sv: "Filer att ladda",
-                    fi: "Ladattavat tiedostot",
-                },
-            },
-        ];
     }
     watchValidHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -1849,10 +2192,10 @@ const DuetUpload = class {
             this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
         }
         // @ts-ignore
-        return (index.h(index.Host, { key: 'f22b72ae72f670b1d3b96699cc22b916e44805bb', class: { "duet-m-0": this.margin === "none" } }, index.h("duet-fieldset", { key: 'd9062ebd9b108b426984ea6336014d707816be6a', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, index.h("slot", { key: 'f05cf1d0a76d07a12e0169d4554344860fe8d5e9', name: "header" }), !this.files.size && (index.h("duet-empty-state", { key: '5f6ea952dccd0579fa97ae6e751c727bb2b72383', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, index.h("duet-paragraph", { key: 'b99e0d6949b2377b83a5b8e3ba4fab263685e427', margin: "none" }, this.fileListEmpty))), !!this.files.size && index.h("slot", { key: '0de37444dc62aac38f4ce95cb488cbd9c6485814', name: "fileheader" }), !!this.files.size && (index.h("duet-upload-aria-status", { key: '0d169ad657e0ae9af98769dd2c7b007899826afe', 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 && index.h("slot", { key: 'a957b0255feb705762d39f4615bd9a49a4569017', name: "filefooter" }), index.h("slot", { key: 'f76b8605d58a7659c2dd0aa29c48a1f34e4a18a9', name: "uploadfooter" }), this.captionOnBottom && (index.h("duet-caption", { key: '3c3b2d1cc4929a960035feb0055c41d435a2cfba', margin: "none", size: "small" }, index.h("div", { key: 'e5f8bd26ec72800dd78794620d3d1dcfb4c55ad8', class: "upload-bottom-caption" }, caption))), index.h("slot", { key: 'c3d1e3f1725fdddfaad3eec7fdc9ed7cb3ef8b5b', name: "afterfooter" }), !this.hideButton && (index.h(index.Fragment, { key: '25b1dfcfeb51ed4dce30e9dc0dfd4bf3e5adb41e' }, index.h("duet-spacer", { key: 'd19f3991e372c617a6b9509adbc062a03f390090', size: "large" }), index.h("duet-button", { key: '8536bf08e8becf2c50e0fff041facbe975f18ad5', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "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 ||
+        return (index.h(index.Host, { key: '855e27e55645747625669bf080e6f65423b9bbf0', class: { "duet-m-0": this.margin === "none" } }, index.h("duet-fieldset", { key: '89d6b1b88260ccb7ffa2f4a3130fdf74d904e048', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, index.h("slot", { key: '10b9cdc44bd94871f538a9299ea6252f4375a864', name: "header" }), !this.files.size && (index.h("duet-empty-state", { key: '924905b1aafa76175b93f12dd6e7d7ac8ac5b5e3', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, index.h("duet-paragraph", { key: 'f744c2afdb520cd0e69a15c0a942f6ecd8e30b75', margin: "none" }, this.fileListEmpty))), !!this.files.size && index.h("slot", { key: 'da55dafcb732e24b895185995040decfe40382c6', name: "fileheader" }), !!this.files.size && (index.h("duet-upload-aria-status", { key: '199e78733f262f857124540bbd055e7c6cbcaf6a', 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 && index.h("slot", { key: 'd6327694548a1ee39188af3935c67d0a6eaead79', name: "filefooter" }), index.h("slot", { key: '718e1e5d1f7041d2d596ada75a717942b74999f6', name: "uploadfooter" }), this.captionOnBottom && (index.h("duet-caption", { key: 'd15f3fd09b07de11dc1f725bc9ee344889b6445f', margin: "none", size: "small" }, index.h("div", { key: '1e4e1c3a29338fa3339cd2de701ba3c776c1166a', class: "upload-bottom-caption" }, caption))), index.h("slot", { key: '90f1e8de4c8359df2b8dded1bf5211857ce48a79', name: "afterfooter" }), !this.hideButton && (index.h(index.Fragment, { key: '431fb04536068eefdf974fc34f89f56e712674c9' }, index.h("duet-spacer", { key: 'c98d3f3e0f06d17b1b86ab40486a663ef8c6a75e', size: "large" }), index.h("duet-button", { key: '1f057848bdacb5e69ef63e2bfdc81e216271f455', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "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 ||
             this.filesToUploadExceedsLimit ||
-            this.filesToUploadTotalSizeIsAboveMax) && (index.h(index.Fragment, { key: '970bfa230702ba75dc8f8ac9e71f4183c4c3c0d7' }, index.h("duet-spacer", { key: '72b8c0c087760db99ce3fdda33e33471b9606d61', size: "medium" }), index.h("duet-alert", { key: '0769bcb8f099a5094dba69584d27909b915a1b18', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && errorcodes_utils.getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && errorcodes_utils.getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && errorcodes_utils.getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && errorcodes_utils.getI18nError("duet-upload-203", this.errorCodes)))), index.h("duet-visually-hidden", { key: 'fba8af1631c5f83e159c7070c9680fb36e5e2d80', "aria-hidden": "true" }, index.h("input", { key: '0c7c75a5a7328dfde2317095e37b363108c6423f', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (index.h(index.Fragment, { key: '8169162805d7ec3a093344e09a4bd9241c1b9c58' }, index.h("duet-spacer", { key: '0f6500a4ada6c4b3c73f6524bf224ee1d79f0ae6', size: "medium" }), index.h("duet-alert", { key: '8bbc63eb777fa98ff0f797d970d66835ac6155a5', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && errorcodes_utils.getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && errorcodes_utils.getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && errorcodes_utils.getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && errorcodes_utils.getI18nError("duet-upload-203", this.errorCodes)))), index.h("duet-visually-hidden", { key: '5fb70459ca757cc24041ce6e01414165ba6497b5', "aria-hidden": "true" }, index.h("input", { key: '808b15c23e12cf691f85e48e1a03106409b81565', 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,
@@ -2037,7 +2380,7 @@ const DuetUpload = class {
         "valid": ["watchValidHandler"]
     }; }
 };
-DuetUpload.style = DuetUploadStyle0;
+DuetUpload.style = duetUploadCss;
 
 exports.duet_editable_table = DuetEditableTable;
 exports.duet_table = DuetTable;