@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -1,16 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-1a6cee61.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as fieldSorter, d as debounce } from './js-utils-9b9e0039.js';
-import { i as isKeyboardClick } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString, s as sanitizeString } from './language-utils-8a9d5323.js';
-import { p as spaceLarge, q as fontFamilyText, r as fontSizeMedium, u as fontFamilyTextTurva, v as colorSecondary, w as colorSecondaryTurva, x as fontWeightSemiBold, y as lineHeightSmall, z as colorGrayDarker, A as colorGrayDarkTurva, B as spaceMedium, C as spaceXxSmall, n as colorGrayLightest, a as mediaQueryXSmall, D as spaceSmall, E as colorGrayLight, F as colorGrayLightTurva, G as colorGrayDarkerTurva, k as colorPrimary, H as sizeNavigation, s as sizeHeader } from './tokens.module-2d02f5ff.js';
-import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-b9ba8c5e.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { p as parsePossibleJSON } from './string-utils-192eb3c8.js';
-import { g as getError, a as getI18nError } from './errorcodes.utils-416994cc.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-EZOAO_vc.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+import { f as fieldSorter, d as debounce } from './js-utils-BlUsLmbQ.js';
+import { i as isKeyboardClick } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString, s as sanitizeString } from './language-utils-COd-eoxb.js';
+import { o as spaceLarge, p as fontFamilyText, q as fontSizeMedium, r as fontFamilyTextTurva, u as colorSecondary, v as colorSecondaryTurva, w as fontWeightSemiBold, x as lineHeightSmall, y as colorGrayDarker, z as colorGrayDarkTurva, A as spaceMedium, B as spaceXxSmall, C as colorGrayLightest, j as mediaQueryXSmall, D as spaceSmall, E as colorGrayLight, F as colorGrayLightTurva, G as colorGrayDarkerTurva, a as colorPrimary, s as sizeHeader, H as sizeNavigation } from './tokens.module-BDAqOMlM.js';
+import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-Dks4GBDa.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
+import { a as getError, g as getI18nError } from './errorcodes.utils-By8gaKwQ.js';
 
 //simple functional component that renders the data in the table
 const TableData = ({ data, groupId, alignment }, _children) => {
@@ -23,8 +23,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) {
@@ -34,6 +33,74 @@ const DuetEditableTable = class {
         this.hasHeadSlotFirst = false;
         this.hasHeadSlotLast = false;
         this.hasFootSlot = false;
+        this.language = 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",
@@ -64,20 +131,6 @@ const DuetEditableTable = class {
                 this.toggleColumn(column, e);
             }
         };
-        this.language = 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.
@@ -174,7 +227,7 @@ const DuetEditableTable = class {
      * Render Methods
      */
     render() {
-        return (h(Host, { key: 'a0c3202194fcc3910b50193f2a4fcb3bd7d3a5d8', class: {
+        return (h(Host, { key: '05720c6ef38164df71b02c23fb45d3d84808c2ac', class: {
                 [`duet-editable-table-${this.variation}`]: true,
                 "duet-editable-table": true,
                 [`duet-editable-table-${this.theme}`]: true,
@@ -184,12 +237,15 @@ const DuetEditableTable = class {
                 "duet-editable-table-actions": !!this.actions,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-table", { key: '6e53631c212527e8702f9e9c8a1b9bc2b390c830', 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 }, h("table", { key: '990481c1affeb11d6a6541a36a8f0118c961915c', role: this.accessibleRole }, h("caption", { key: 'f7b1bc44ab9fef0194485fdd6e49e11a306e365c' }, h("slot", { key: '2caecec6e5c024bdde6fa6bf72917914e2626752', name: "tcaption" })), h("thead", { key: 'c892dcd586814dcecddc46fbaf0319b04b6d9f16' }, this.hasHeadSlotFirst && (h("tr", { key: 'bfbac21dbab8afab7f34e952bd5803954be4991d' }, h("td", { key: '0a491ed1c4855d55b4dbc493a52029d657a08cc5', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '87c033e72a1bd3b87a51a4981b1b4939de66578d', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '2ab66f9b14fe592f7ee7e6293cdd56b3aed0190e' }, h("td", { key: 'edb3ae066371b6f5dc990f10f088246c0d9388d9', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: 'f57ebf07ee01c40cb47469b2fa07a706c4724dae', name: "thead-last" }))))), h("tbody", { key: '538b2de606132fcb272e5af1650cafb947fc5b2a' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '2f1a98dd550705933222f7179bc3ff4d6554d117' }, h("tr", { key: 'ecb9667d57ea85de7efa6fa0035fbfbb16c78a9e' }, h("td", { key: 'c78b25495de0621c55f70cce5131b1d192fc5e0e', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'ed051b0e66c28fdbee565b33c1c394034a817a82', name: "tfoot" })))))))));
+            } }, 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 }, h("table", { key: '7f0689d1e576d5f0c5324715feaf21ce21c42e97', role: this.accessibleRole }, h("caption", { key: '4e18555d5513dde6724a449d12030cc666937367' }, h("slot", { key: 'df9bcd3bde75a2669a08eb2ff0c67720750e5450', name: "tcaption" })), h("thead", { key: 'efbbe81840f6e9ae9e0cc91fee5653c43181f131' }, this.hasHeadSlotFirst && (h("tr", { key: '36d1a860bf16229740501f3b076b02125d1b3d85' }, h("td", { key: '24c22fca3cbfef4ab9e2582cf32bf967654b8b43', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: 'a02148a1d13dc8c3147b26da2f5aa84e3b359cdf', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '7b7ab392f982f5f7ce4caa5e86f7a1062412aad2' }, h("td", { key: 'cd739dea8b81f3290bb86d7e977fa83d124fdd03', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '068a9f86388a25ca00944d8e9ecfbed6cf0e2cfe', name: "thead-last" }))))), h("tbody", { key: 'f65077b6dee57c962826c459ddb044d4230753c5' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: 'eceeface4ad0a0bbb15dc188a343291cef04ec72' }, h("tr", { key: 'aff41dc81c24e09a03db4742bf6d51c17b8ce937' }, h("td", { key: '5d332218393462356c02ca19ff9c3398fbeb89a7', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'b438187cfa67ef90452783e9522d106ecf9ab9d3', name: "tfoot" })))))))));
     }
     get element() { return getElement(this); }
 };
-DuetEditableTable.style = DuetEditableTableStyle0;
+DuetEditableTable.style = duetEditableTableCss;
 
+const rgbable = (value) => {
+    return value.replace("rgb(", "").replace(")", "");
+};
 const styles = `
 duet-table {
   box-sizing: border-box;
@@ -355,6 +411,7 @@ duet-table {
 .duet-table-sticky thead th {
   position: sticky;
   top: 0;
+  z-index: $z-index-sticky;
   background: ${colorGrayLightest};
 }
 
@@ -390,7 +447,7 @@ duet-table {
   }
 
   &.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
-    background: rgba(${colorSecondaryTurva}, 0.04);
+    background: rgba(${rgbable(colorSecondaryTurva)}, 0.04);
   }
 
   tbody:not(:only-of-type) tr:nth-of-type(even) {
@@ -398,7 +455,7 @@ duet-table {
   }
 
   &.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
-    background: rgba(${colorSecondaryTurva}, 0.04);
+    background: rgba(${rgbable(colorSecondaryTurva)}, 0.04);
   }
 
   tfoot td {
@@ -599,10 +656,10 @@ duet-table {
 }
 
 .duet-table-selected-column {
-  background: rgba(${colorPrimary}, 0.08);
+  background: rgba(${rgbable(colorPrimary)}, 0.08);
 
   .duet-theme-turva & {
-    background: rgba(${colorGrayDarkerTurva}, 0.08);
+    background: rgba(${rgbable(colorGrayDarkerTurva)}, 0.08);
   }
 }
 
@@ -663,6 +720,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) {
@@ -695,18 +812,47 @@ const DuetTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
-        this.handleMediaQueryChange = (mq) => {
-            this.matchesBreakpoint = 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 = 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 = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
+        };
     }
     watchLanguageStateHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -756,6 +902,9 @@ const DuetTable = class {
      * Local methods.
      */
     copyHeadingsToCells() {
+        if (["none", "none-scrollable"].includes(this.breakpoint)) {
+            return;
+        }
         const headingElements = this.element.querySelectorAll(this.headingSelector);
         const rowElements = this.element.querySelectorAll("tbody tr");
         const headings = Array.from(headingElements).map(th => th.textContent.trim());
@@ -777,7 +926,7 @@ const DuetTable = class {
         });
     }
     render() {
-        return (h(Host, { key: '06ccaf0fc2d8586bc16b3a6c4c7a7a11de2c10ed', class: {
+        return (h(Host, { key: '02ed0a7f4b3c7504b0f6df2ee9e923f5afbca106', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -786,7 +935,7 @@ const DuetTable = class {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '81e3f8cfbcabec7c35c1d878df37e147112379db' })));
+            } }, h("slot", { key: '946a620f959caf19dc712844d81ebc345870757d' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -794,7 +943,7 @@ const DuetTable = class {
     }; }
 };
 
-const errorCodes = [
+var errorCodes = [
 	{
 		type: "default",
 		system_message: "unknown error",
@@ -1100,8 +1249,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) {
@@ -1117,6 +1265,330 @@ const DuetUpload = class {
         this.duetProgress = createEvent(this, "duetProgress", 3);
         this.duetUpload = createEvent(this, "duetUpload", 3);
         this.linkClick = 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 = 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 = 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 = 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 = 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 = 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
          */
@@ -1139,6 +1611,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 = debounce(() => {
             this.tick = Date.now();
         }, 30); // will trigger re-render
@@ -1578,169 +2089,6 @@ const DuetUpload = class {
             });
             return (h(Fragment, null, this.showUploadedItemsHeader && (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 = getLocaleString(this.statusLabelDefaults);
-        this.buttonLabelDefaults = {
-            fi: "Lisää liite",
-            sv: "Lägg till en bilaga",
-            en: "Add an attachment",
-        };
-        this.buttonLabel = 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 = 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 = 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 = 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) {
@@ -1845,10 +2193,10 @@ const DuetUpload = class {
             this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
         }
         // @ts-ignore
-        return (h(Host, { key: 'af891e8448afa376703a9aaf7c2ea6614cf355b2', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '64ecfbf72004643670c94e10e3c528c453424781', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: 'a86b487196b80ef598a870a65b173668bfb7f28a', name: "header" }), !this.files.size && (h("duet-empty-state", { key: 'a0fff5af7f1b97d9d9755f05a2db3417b726d35b', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '07990782c33bbf197e5b5faa2b09d70ad9234ec7', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '6e64833a85ff33f6cd0c8620853a517d20bbda06', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '4f404613876a98b0b81c11bcdb57cccc3ebf8038', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: '429f15000646c8b490ba930339777f791c378103', name: "filefooter" }), h("slot", { key: '79f6b863efa949079852852740edbdd2be2e3516', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'fc7852edd78f5190203dba3158962366c53a94b7', margin: "none", size: "small" }, h("div", { key: '4d36f87e3da881b5c85f22afca0ebd4dfdca0711', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'b283ac9a11d4108a7a84ab265082ccff8b00e323', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '8bf6f2b2b848a4a7def1a674cb2f156833dd540c' }, h("duet-spacer", { key: 'b2e12ee9f57ffe8189bc06a68ea2c09359b6f9d3', size: "large" }), h("duet-button", { key: '8243c35856bd3ca1871344a5eeaf63384d820ca4', 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 (h(Host, { key: '855e27e55645747625669bf080e6f65423b9bbf0', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '89d6b1b88260ccb7ffa2f4a3130fdf74d904e048', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '10b9cdc44bd94871f538a9299ea6252f4375a864', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '924905b1aafa76175b93f12dd6e7d7ac8ac5b5e3', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'f744c2afdb520cd0e69a15c0a942f6ecd8e30b75', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'da55dafcb732e24b895185995040decfe40382c6', name: "fileheader" }), !!this.files.size && (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 && h("slot", { key: 'd6327694548a1ee39188af3935c67d0a6eaead79', name: "filefooter" }), h("slot", { key: '718e1e5d1f7041d2d596ada75a717942b74999f6', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'd15f3fd09b07de11dc1f725bc9ee344889b6445f', margin: "none", size: "small" }, h("div", { key: '1e4e1c3a29338fa3339cd2de701ba3c776c1166a', class: "upload-bottom-caption" }, caption))), h("slot", { key: '90f1e8de4c8359df2b8dded1bf5211857ce48a79', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '431fb04536068eefdf974fc34f89f56e712674c9' }, h("duet-spacer", { key: 'c98d3f3e0f06d17b1b86ab40486a663ef8c6a75e', size: "large" }), 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) && (h(Fragment, { key: '1ec4342f7ccf20e0d5022a9d84cc64e16372b401' }, h("duet-spacer", { key: 'b1ad3b5c6571bcb737f8ff057e51c8f7bd700458', size: "medium" }), h("duet-alert", { key: '4060aacd761dddcd9e06c3c7df95c6a3306fc9f8', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: 'cb2f66cf8b9b95e160022b5df3c36cb82f892e09', "aria-hidden": "true" }, h("input", { key: 'e07b880670a5bb91660e1ae562dff6d5c2036a1f', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '8169162805d7ec3a093344e09a4bd9241c1b9c58' }, h("duet-spacer", { key: '0f6500a4ada6c4b3c73f6524bf224ee1d79f0ae6', size: "medium" }), h("duet-alert", { key: '8bbc63eb777fa98ff0f797d970d66835ac6155a5', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '5fb70459ca757cc24041ce6e01414165ba6497b5', "aria-hidden": "true" }, 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,
@@ -2033,6 +2381,6 @@ const DuetUpload = class {
         "valid": ["watchValidHandler"]
     }; }
 };
-DuetUpload.style = DuetUploadStyle0;
+DuetUpload.style = duetUploadCss;
 
 export { DuetEditableTable as duet_editable_table, DuetTable as duet_table, DuetUpload as duet_upload };