@duetds/components 6.8.9 → 6.9.1

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-8512a70b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const jsUtils = require('./js-utils-134e0318.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-44df1d37.js');
-const tokens_module = require('./tokens.module-69170ddd.js');
-const tokenUtils = require('./token-utils-2e10264d.js');
+const tokens_module = require('./tokens.module-d402cfac.js');
+const tokenUtils = require('./token-utils-4bfb15d4.js');
 const createId = require('./create-id-c3b984b1.js');
 const stringUtils = require('./string-utils-5cadd058.js');
 
@@ -65,6 +65,7 @@ const DuetEditableTable = class {
         this.toggleColumn(column, e);
       }
     };
+    this.language = languageUtils.getLanguage();
     this.margin = "auto";
     this.variation = "striped";
     this.sticky = false;
@@ -87,6 +88,12 @@ const DuetEditableTable = class {
     this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
     this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
   }
+  connectedCallback() {
+    languageUtils.connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    languageUtils.disconnectLanguageChangeObserver(this);
+  }
   createLabel(column) {
     const { sort_order, direction, index: index$1, label } = column;
     const i18nLabel = languageUtils.getLocaleString(label);
@@ -105,7 +112,7 @@ const DuetEditableTable = class {
       }
       return "action-subtract-small";
     };
-    return (index.h("span", { class: "duet-table-label", "data-index": index$1 }, index.h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": languageUtils.getLocaleString(this.sortableDefaultLabel), variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
+    return (index.h("span", { class: "duet-table-label", "data-index": index$1 }, index.h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": this.sortableDefaultLabel[this.language], variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
   }
   getSortedColumns() {
     //create a new array from sort instead of mutating original
@@ -134,7 +141,7 @@ const DuetEditableTable = class {
         const label = this.createLabel(column);
         return label !== "" ? index.h("th", { scope: "col" }, label) : index.h("td", null);
       }
-    }), this.actions && (index.h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && index.h("duet-visually-hidden", null, languageUtils.getLocaleString(this.actionColumnLabel))))));
+    }), this.actions && (index.h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && index.h("duet-visually-hidden", null, this.actionColumnLabel[this.language])))));
   }
   renderActions(rowItem, index$1) {
     // escape early
@@ -195,9 +202,10 @@ const DuetTable = class {
     index.registerInstance(this, hostRef);
     this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
     this.handleMediaQueryChange = (mq) => {
-      this.matchesBreakpoint = mq.matches;
+      this.matchesBreakpoint = tokenUtils.breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
     };
     this.matchesBreakpoint = true;
+    this.language = languageUtils.getLanguage();
     this.theme = undefined;
     this.margin = "auto";
     this.variation = "striped";
@@ -206,6 +214,11 @@ const DuetTable = class {
     this.breakpoint = "small";
     this.hideHeadVisually = false;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      setTimeout(() => this.copyHeadingsToCells(), 50);
+    }
+  }
   connectedCallback() {
     const token = this.breakpoint === "none" || this.breakpoint === "none-scrollable" ? "all" : tokenUtils.breakpointToToken[this.breakpoint];
     this.mq = matchMedia(token);
@@ -234,6 +247,7 @@ const DuetTable = class {
     // that way we avoid dealing with any initial changes
     // and only get genuine mutations as rows are added/removed
     this.observer ? this.observer.takeRecords() : null;
+    languageUtils.connectLanguageChangeObserver(this);
   }
   disconnectedCallback() {
     this.observer.disconnect();
@@ -241,6 +255,7 @@ const DuetTable = class {
     this.mq.removeListener(this.handleMediaQueryChange);
     this.mq = null;
     this.matchesBreakpoint = true;
+    languageUtils.disconnectLanguageChangeObserver(this);
   }
   /**
    * Local methods.
@@ -270,6 +285,9 @@ const DuetTable = class {
       } }, index.h("slot", null)));
   }
   get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "language": ["watchLanguageStateHandler"]
+  }; }
 };
 DuetTable.style = duetTableCss;
 
@@ -431,31 +449,6 @@ const getI18nError = (errorCode, errorCodes) => {
   }
 };
 
-const ErrorItem = ({ data, errorCodes }) => {
-  const { item, error } = data;
-  const { name } = item;
-  const { type } = error;
-  return (index.h("span", { class: "duet-upload-item-error", role: "status" },
-    index.h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
-      index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-      index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-      name),
-    index.h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type, errorCodes))));
-};
-
-const ProgressItem = ({ progress, name }) => (index.h("span", { class: "duet-upload-item-name" },
-  index.h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" },
-    index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-    index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    name),
-  index.h("br", null),
-  index.h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
-
-const PendingItem = ({ name }) => (index.h("span", { class: "duet-upload-item-name" },
-  index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-  index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-  name));
-
 const formatBytes = (bytes, decimals = 2) => {
   if (bytes === 0) {
     return "0 Bytes";
@@ -467,9 +460,40 @@ const formatBytes = (bytes, decimals = 2) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
 };
 
-const SuccessItem = ({ data, showLinks }) => {
-  const { item, size, uploaded, url } = data;
+const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme, label, categoryLabel, showCategory, }) => {
+  const { uid, item, size, uploaded, url, meta, progress, error } = data;
   const { name } = item;
+  const getFileNameLine = () => {
+    switch (type) {
+      case "inprogress":
+        return (index.h("span", { class: "duet-upload-item-name" },
+          index.h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" },
+            index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+            index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+            name),
+          index.h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+      case "pending":
+        return (index.h("span", { class: "duet-upload-item-name" },
+          index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          name));
+      case "failure":
+        return (index.h("span", { class: "duet-upload-item-error", role: "status" },
+          index.h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
+            index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+            index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+            name),
+          index.h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(error.type, errorCodes))));
+      default:
+        return uploaded && url && showLinks ? (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+          index.h("duet-link", { url: url, external: true }, ContentName),
+          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          SizeText)) : (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+          ContentName,
+          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          SizeText));
+    }
+  };
   const ContentName = (index.h("span", { class: "duet-upload-item-name" },
     index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
     index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
@@ -478,31 +502,26 @@ const SuccessItem = ({ data, showLinks }) => {
     "(",
     formatBytes(size),
     ")"));
-  const FilenameLine = uploaded && url && showLinks ? (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
-    index.h("duet-link", { url: url, external: true }, ContentName),
-    index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    SizeText)) : (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
-    ContentName,
-    index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    SizeText));
-  // const Badges =
-  //   meta && meta.badges ? (
-  //     <span>
-  //       <duet-spacer size="xx-small"></duet-spacer>
-  //       {meta.badges.map(badgeText => (
-  //         <duet-badge color="primary">{badgeText}</duet-badge>
-  //       ))}
-  //     </span>
-  //   ) : undefined
-  return (index.h("span", { class: "duet-upload-item-success" },
-    index.h("div", null, FilenameLine)));
+  const Badges = meta && meta.badges ? (index.h("span", null, meta.badges.map(badgeText => (index.h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+  const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${name}`;
+  return (index.h("div", { class: {
+      "upload-item-row": true,
+    } },
+    showCategory && (index.h("div", { class: "item-categories" },
+      index.h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, languageUtils.getLocaleString(categoryLabel)),
+      Badges)),
+    index.h("div", { class: { "item-name": true, "no-category": !showCategory } },
+      !!label && (index.h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, languageUtils.getLocaleString(label))),
+      getFileNameLine()),
+    index.h("div", { class: "item-actions" }, actions.map(actionItem => {
+      return (index.h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${languageUtils.getLocaleString(actionItem.label)} ` }));
+    }))));
 };
 
-const UploadCategory = ({ meta }) => {
-  const Badges = meta && meta.badges ? (index.h("span", null,
-    index.h("duet-spacer", { size: "xx-small" }),
-    meta.badges.map(badgeText => (index.h("duet-badge", { color: "primary" }, badgeText))))) : (index.h("span", null));
-  return Badges;
+const UploadItemHeader = ({ label, categoryLabel }) => {
+  return (index.h("div", { class: "items-header" },
+    categoryLabel && (index.h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, languageUtils.getLocaleString(categoryLabel))),
+    index.h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, languageUtils.getLocaleString(label))));
 };
 
 const validateFileExtension = (name, allowedExtensions) => {
@@ -628,7 +647,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}.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-upload-editable-table .duet-upload-item-name duet-icon{position:relative;top:2px}duet-paragraph::part(duet-paragraph){word-break:break-word}duet-editable-table tfoot{display:none}.upload-bottom-caption{margin-bottom:12px}.test{display:flex;flex-direction:row}.test .item-categories{flex-grow:1}.test .item-label{flex-grow:2}.test .item-actions{flex-grow:1}";
+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:28px}.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:28px}.items-header{display:none;flex-direction:row}@media (min-width: 36em){.items-header{display:flex}}.items-header:not(:last-child),.items-header:not(:first-child){margin-top:12px}.items-header .category-header{width:35%}.items-header .filename-header{width:65%}.items-header .filename-header.no-category{width:100%}.upload-item-row{display:flex;flex-direction:column;gap:10px;align-content:center;align-items:center;padding:16px 0 16px 0;border-bottom:1px solid rgb(225, 227, 230)}@media (min-width: 36em){.upload-item-row{flex-direction:row}}.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%;padding-top:6px;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;padding-top:0;text-align:right}}.upload-item-row .duet-upload-item-name duet-icon{position:relative;top:4px}.upload-item-row .duet-upload-item-name duet-progress{display:block;margin-top:16px}";
 
 const DuetUpload = class {
   constructor(hostRef) {
@@ -665,6 +684,11 @@ const DuetUpload = class {
     this.kick = jsUtils.debounce(() => {
       this.tick = Date.now();
     }, 30); // will trigger re-render
+    this.categoryLabel = {
+      en: "Category",
+      sv: "Filtyp",
+      fi: "Tiedostotyyppi",
+    };
     /**
      * Private functions
      */
@@ -717,18 +741,18 @@ const DuetUpload = class {
         return "none";
       }
     };
-    this.getItemHTMLFromItemData = (data, group) => {
+    this.mapFilesToUploadItems = (data, group, showCategory) => {
       if (group === this.DefaultGroups.success) {
-        return index.h(SuccessItem, { data: data, showLinks: this.showLinks });
+        return (index.h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "success", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.inprogress) {
-        return index.h(ProgressItem, { progress: data.progress, name: data.item.name });
+        return (index.h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.pending) {
-        return index.h(PendingItem, { name: data.item.name });
+        return (index.h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.failure) {
-        return index.h(ErrorItem, { data: data, errorCodes: this.errorCodes });
+        return (index.h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (data.group) {
         return data.html;
@@ -1001,60 +1025,43 @@ const DuetUpload = class {
       const failure = [];
       const pending = [];
       const success = [];
+      let hasCategory = false;
       all.forEach(data => {
-        var _a, _b;
         const group = this.getGroupFromItemData(data);
-        const item = this.getItemHTMLFromItemData(data, group);
-        const category = index.h(UploadCategory, { meta: data.meta });
-        const categories = (_b = (_a = data.meta) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.join(",");
+        // const item = mapFn(data, group)
+        // const category = <UploadCategory meta={data.meta} />
+        // const categories = data.meta?.badges?.join(",")
+        if (data.meta && !!data.meta.badges) {
+          hasCategory = true;
+        }
         if (group === this.DefaultGroups.success) {
           success.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `${categories || ""} ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.inprogress) {
           inprogress.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.pending) {
           pending.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.failure) {
           failure.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (data.group) {
           inprogress.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group: data.group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
       });
@@ -1063,46 +1070,23 @@ const DuetUpload = class {
         failure,
         success,
         inprogress,
+        hasCategory,
       };
     };
-    this.getColumns = (group, hasCategory) => {
-      return [
-        {
-          sort_order: 1,
-          direction: -1,
-          index: 0,
-          key: "category",
-          label: {
-            fi: "Kategoria",
-            sv: "Kategori",
-            en: "Category",
-          },
-          display: hasCategory,
-        },
-        {
-          sort_order: 1,
-          direction: -1,
-          index: 1,
-          key: group.id,
-          label: group.label,
-          display: true,
-        },
-      ];
-    };
     this.getActions = (id) => {
       return this.actions.filter(item => item.map.includes(id));
     };
-    this.renderEditableTableGroups = () => {
+    this.renderUploadedItems = () => {
       const filteredItems = this.filterMap();
-      const EditableTables = this.groups.map(group => {
+      const hasCategory = filteredItems.hasCategory;
+      const ItemRows = this.groups.map(group => {
         const currentItems = filteredItems[group.id];
         if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
           return;
         }
-        const hasCategory = currentItems.some(item => item.hasCategory);
-        return (index.h("duet-editable-table", { variation: "plain", groupId: group.id, columns: this.getColumns(group, hasCategory), actions: this.getActions(group.id), margin: "none", rows: currentItems, "hide-head-visually": this.hideGroups || group.id !== this.DefaultGroups.success }));
+        return (index.h(index.Fragment, null, !this.hideGroups && (index.h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory))));
       });
-      return EditableTables;
+      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;
@@ -1218,6 +1202,13 @@ const DuetUpload = class {
     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.hideHeader = false;
     this.groups = [
       {
         id: this.DefaultGroups.success,
@@ -1342,13 +1333,7 @@ const DuetUpload = class {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (index.h(index.Host, { class: { "duet-m-0": this.margin === "none" } }, index.h("duet-fieldset", { label: this.label, caption: !this.captionOnBottom ? caption : undefined }, index.h("slot", { name: "header" }), !this.files.size && (index.h("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
-        "duet-upload-filelist-empty": !this.files.size,
-        "duet-upload-filelist": true,
-        "duet-upload-filelist-filled": this.files.size,
-      }, id: this.labelId, for: identifier }, index.h("span", { class: {
-        "duet-upload-filelist-empty-label": !this.files.size,
-      } }, this.fileListEmpty))), !!this.files.size && index.h("slot", { name: "fileheader" }), !!this.files.size && (index.h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderEditableTableGroups(), !!this.files.size && index.h("slot", { name: "filefooter" }), index.h("slot", { name: "footer" }), this.captionOnBottom && (index.h("duet-caption", { size: "small" }, index.h("div", { class: "upload-bottom-caption" }, caption))), index.h("slot", { name: "afterfooter" }), index.h("duet-spacer", { size: "large" }), !this.hideButton && (index.h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), index.h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (index.h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes))), index.h("duet-spacer", { size: "medium" }), index.h("duet-visually-hidden", { "aria-hidden": "true" }, index.h("input", { ref: input => {
+    return (index.h(index.Host, { class: { "duet-m-0": this.margin === "none" } }, index.h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, index.h("slot", { name: "header" }), !this.files.size && (index.h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, index.h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && index.h("slot", { name: "fileheader" }), !!this.files.size && (index.h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && index.h("slot", { name: "filefooter" }), index.h("slot", { name: "uploadfooter" }), this.captionOnBottom && (index.h("duet-caption", { size: "small" }, index.h("div", { class: "upload-bottom-caption" }, caption))), index.h("slot", { name: "afterfooter" }), !this.hideButton && (index.h(index.Fragment, null, index.h("duet-spacer", { size: "large" }), index.h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached || this.bytesMaxReached) && (index.h(index.Fragment, null, index.h("duet-spacer", { size: "medium" }), index.h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes)))), index.h("duet-visually-hidden", { "aria-hidden": "true" }, index.h("input", { ref: input => {
         this.nativeInput = input;
       }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
         "duet-upload": true,

package/lib/cjs/duet-empty-state.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-8512a70b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
 const duetEmptyStateCss = "*,*::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;display:block;width:100%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:rgb(0, 41, 77);text-align:center;background:rgb(245, 248, 250);border-radius:4px}.duet-empty-state.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}";

package/lib/cjs/duet-fieldset.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-8512a70b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 

package/lib/cjs/duet-footer.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-8512a70b.js');
 const actionArrowRight = require('./action-arrow-right-24fe06be.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');

package/lib/cjs/duet-grid_2.cjs.entry.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-8512a70b.js');
 const tokens = require('./tokens-21b244ee.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
-const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:row !important}@media (max-width: 22.5em){.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 62em){.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}@media (max-width: 35.9375em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 62em){.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}.duet-grid-align-top.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 62em){.duet-grid-align-top.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 62em){.duet-grid-align-bottom.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 62em){.duet-grid-align-center.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 62em){.duet-grid-align-stretch.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 62em){.duet-grid-align-baseline.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}";
+const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-x-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}@media (max-width: 22.5em){.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-medium.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 62em){.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-breakpoint-x-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-no-stacking.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}@media (max-width: 35.9375em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 62em){.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}.duet-grid-align-top.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 62em){.duet-grid-align-top.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 62em){.duet-grid-align-bottom.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 62em){.duet-grid-align-center.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 62em){.duet-grid-align-stretch.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 62em){.duet-grid-align-baseline.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}";
 
 function isGridItem(element) {
   return element.tagName.toLowerCase() === "duet-grid-item";
@@ -27,6 +27,7 @@ const DuetGrid = class {
     this.responsive = false;
     this.breakpoint = "small";
     this.direction = "horizontal";
+    this.rowReverse = false;
     this.alignment = "top";
     this.distribution = "default";
     this.mobile = "";
@@ -94,6 +95,7 @@ const DuetGrid = class {
     items.forEach(item => {
       item.responsive = this.responsive;
       item.breakpoint = this.breakpoint;
+      item.direction = this.direction;
     });
   }
   async updateGridItemsWithInputFields() {
@@ -148,17 +150,19 @@ const DuetGrid = class {
         "duet-grid-breakpoint-medium": this.breakpoint === "medium",
         "duet-grid-breakpoint-large": this.breakpoint === "large",
         "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
+        "duet-grid-row-reverse": this.rowReverse,
       } }));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "responsive": ["updateGridItems"],
-    "breakpoint": ["updateGridItems"]
+    "breakpoint": ["updateGridItems"],
+    "direction": ["updateGridItems"]
   }; }
 };
 DuetGrid.style = duetGridCss;
 
-const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;min-width:0;max-width:100%;flex:0 0 auto;padding-right:8px;padding-left:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.sc-duet-grid-item-h:first-child,.sc-duet-grid-item-h:first-of-type{padding-left:0}.sc-duet-grid-item-h:last-child,.sc-duet-grid-item-h:last-of-type{padding-right:0}@media (max-width: 35.9375em){.duet-grid-item-responsive.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important;padding-right:0;padding-left:0}}@media screen and (max-width: 47.9375em){.duet-grid-item-br-medium.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 47.9375em){.duet-grid-item-responsive.duet-grid-item-br-medium.sc-duet-grid-item-h{padding-right:0;padding-left:0}}@media screen and (max-width: 64em){.duet-grid-item-br-x-large.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 64em){.duet-grid-item-responsive.duet-grid-item-br-x-large.sc-duet-grid-item-h{padding-right:0;padding-left:0}}.duet-grid-item-fill.sc-duet-grid-item-h{flex:1 1 auto;width:100%}.duet-theme-turva.sc-duet-grid-item-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-m-0.sc-duet-grid-item-h{padding:0 !important;margin:0 !important}";
+const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;min-width:0;max-width:100%;flex:0 0 auto;padding-right:8px;padding-left:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-of-type{padding-left:0}.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-of-type{padding-right:0}@media (max-width: 35.9375em){.duet-grid-item-responsive.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important;padding-right:0;padding-left:0}}@media screen and (max-width: 47.9375em){.duet-grid-item-br-medium.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 47.9375em){.duet-grid-item-responsive.duet-grid-item-br-medium.sc-duet-grid-item-h{padding-right:0;padding-left:0}}@media screen and (max-width: 64em){.duet-grid-item-br-x-large.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 64em){.duet-grid-item-responsive.duet-grid-item-br-x-large.sc-duet-grid-item-h{padding-right:0;padding-left:0}}.duet-grid-item-fill.sc-duet-grid-item-h{flex:1 1 auto;width:100%}.duet-theme-turva.sc-duet-grid-item-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-m-0.sc-duet-grid-item-h{padding:0 !important;margin:0 !important}";
 
 const DuetGridItem = class {
   constructor(hostRef) {
@@ -169,6 +173,7 @@ const DuetGridItem = class {
     this.theme = "";
     this.margin = "auto";
     this.responsive = false;
+    this.direction = "horizontal";
     this.breakpoint = "small";
   }
   /**
@@ -191,7 +196,12 @@ const DuetGridItem = class {
         "duet-grid-item": true,
         "duet-grid-item-fill": this.fill,
         "duet-grid-item-responsive": this.responsive,
+        "duet-grid-direction-horizontal": this.direction === "horizontal",
+        "duet-grid-direction-vertical": this.direction === "vertical",
+        "duet-grid-item-br-x-small": this.breakpoint === "x-small",
+        "duet-grid-item-br-small": this.breakpoint === "small",
         "duet-grid-item-br-medium": this.breakpoint === "medium",
+        "duet-grid-item-br-large": this.breakpoint === "large",
         "duet-grid-item-br-x-large": this.breakpoint === "x-large",
       } }));
   }