@duetds/components 5.1.2 → 5.1.5

package/lib/esm/duet-date-picker.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-ff5be49a.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1e15387b.js';
 import { c as createID } from './create-id-981107da.js';
-import { F as FocusGuard } from './focus-utils-8681b5ae.js';
+import { F as FocusGuard } from './focus-utils-b869910b.js';
 import { a as getLanguage, g as getLocaleString } from './language-utils-bf701d37.js';
 import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 import './string-utils-5954f458.js';

package/lib/esm/duet-divider_2.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement, H as Host } from './index-ff5be49a.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-1e15387b.js';
 import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 
 const duetDividerCss = "*,*::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%}.duet-divider{-webkit-user-select:none;user-select:none;display:block;width:100%;height:1px;margin-top:36px !important;margin-bottom:28px;background:#e1e3e6}.duet-divider.duet-p-0{padding:0 !important}.duet-divider.duet-m-0{margin:0 !important}.duet-divider.duet-m-s{margin-bottom:16px !important;margin-top:0 !important}.duet-divider.duet-theme-turva{background:#e4e4e6}";

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-ff5be49a.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1e15387b.js';
 import { f as fieldSorter, d as debounce } from './js-utils-52e0944c.js';
 import { i as isKeyboardClick } from './keyboard-utils-88ea1007.js';
 import { g as getLocaleString, s as sanitizeString } from './language-utils-bf701d37.js';
 import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
-import { m as mediaQueryMedium, h as mediaQueryLarge, i as mediaQueryXLarge, j as mediaQueryXxLarge, k as mediaQueryXxxLarge, l as mediaQuerySmall, n as sizeNavigation, s as sizeHeader } from './tokens.module-49cbf963.js';
+import { m as mediaQueryMedium, h as mediaQueryLarge, i as mediaQueryXLarge, j as mediaQueryXxLarge, k as mediaQueryXxxLarge, l as mediaQuerySmall, n as sizeNavigation, s as sizeHeader } from './tokens.module-f4572ed7.js';
 import { c as createID } from './create-id-981107da.js';
 import './string-utils-5954f458.js';
 
@@ -306,7 +306,7 @@ const DuetTable = class {
     // this clears all pending mutations,
     // that way we avoid dealing with any initial changes
     // and only get genuine mutations as rows are added/removed
-    this.observer.takeRecords();
+    this.observer ? this.observer.takeRecords() : null;
   }
   disconnectedCallback() {
     this.observer.disconnect();
@@ -519,6 +519,10 @@ const ProgressItem = ({ progress, name }) => (h("span", null,
   h("duet-spacer", { size: "xx-small" }),
   h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
 
+const PendingItem = ({ name }) => (h("span", null,
+  h("duet-paragraph", { color: "secondary", margin: "none", size: "small" }, name),
+  h("duet-spacer", { size: "xx-small" })));
+
 const formatBytes = (bytes, decimals = 2) => {
   if (bytes === 0) {
     return "0 Bytes";
@@ -696,9 +700,13 @@ const DuetUpload = class {
      * it will be up to you to handle the upload and return progress information to the upload-component
      */
     this.external = false;
+    /**
+     * 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
+     * and call the exposed method startUpload to open the upload dialog
      */
     this.hideButton = false;
     /**
@@ -711,7 +719,7 @@ const DuetUpload = class {
         size: "x-small",
         background: "gray-lightest",
         name: "delete",
-        map: ["success", "failure"],
+        map: ["success", "failure", "pending"],
         label: {
           fi: "Poista tiedosto",
           en: "Poista tiedosto",
@@ -965,6 +973,7 @@ const DuetUpload = class {
     this.DefaultGroups = {
       inprogress: "inprogress",
       success: "success",
+      pending: "pending",
       failure: "failure",
     };
     /**
@@ -981,6 +990,14 @@ const DuetUpload = class {
           en: "Files inprogress",
         },
       },
+      {
+        id: this.DefaultGroups.pending,
+        label: {
+          en: "Files to upload",
+          sv: "Filer att ladda",
+          fi: "Tiedostot ladattavat",
+        },
+      },
       {
         id: this.DefaultGroups.success,
         label: {
@@ -1008,7 +1025,6 @@ const DuetUpload = class {
       this.element.addEventListener("duetActionEvent", (e) => {
         const detail = e.detail;
         const { action, id, originalEvent } = detail;
-        console.log(e);
         switch (action) {
           case "delete":
             this.onDelete(id, originalEvent);
@@ -1036,9 +1052,6 @@ const DuetUpload = class {
       if (item.valid && item.progress === 100) {
         // if the item has a group, move the file to that group instead
         // of into the standard success group
-        if (item.group) {
-          return item.group;
-        }
         return this.DefaultGroups.success;
       }
       else if (item.progress > 0 && item.progress !== 100) {
@@ -1047,6 +1060,9 @@ const DuetUpload = class {
       else if (!item.valid) {
         return this.DefaultGroups.failure;
       }
+      else if (item.pending) {
+        return this.DefaultGroups.pending;
+      }
       else if (item.group) {
         return item.group;
       }
@@ -1061,6 +1077,9 @@ const DuetUpload = class {
       else if (group === this.DefaultGroups.inprogress) {
         return h(ProgressItem, { progress: data.progress, name: data.item.name });
       }
+      else if (group === this.DefaultGroups.pending) {
+        return h(PendingItem, { name: data.item.name });
+      }
       else if (group === this.DefaultGroups.failure) {
         return h(ErrorItem, { data: data });
       }
@@ -1073,9 +1092,16 @@ const DuetUpload = class {
     };
     this.genHashName = () => Date.now().toString(36) + Math.random();
     this.updateValueInMap = (item, key, value, kick = true) => {
-      const fileItem = this.files.get(item);
-      fileItem[key] = value;
-      this.files.set(item, fileItem);
+      try {
+        const fileItem = this.files.get(item);
+        fileItem[key] = value;
+        this.files.set(item, fileItem);
+      }
+      catch (e) {
+        // if a users tries to update entries on a file that doesn't exist,
+        // this will blow up - so we're swallowing the errors here on purpose
+        // console.warn("operation on missing items")
+      }
       if (kick) {
         this.kick();
       }
@@ -1193,6 +1219,46 @@ const DuetUpload = class {
         fileMaxReached: isTotalFileAmountAboveMax,
       };
     };
+    this.uploadFile = async (fileListItem, force = false, key) => {
+      if (!force && this.deferUpload) {
+        this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+        this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+      }
+      else if (force) {
+        this.updateValueInMap(fileListItem.item.name, "pending", false, false);
+        this.updateValueInMap(fileListItem.item.name, "group", undefined, true);
+      }
+      try {
+        if (!this.deferUpload || force) {
+          // if all is well AND external file upload handling has not been set, start upload
+          const data = new FormData();
+          data.append("file", fileListItem.item);
+          if (key) {
+            data.append("key", key);
+          }
+          data.append("uid", fileListItem.uid);
+          data.append("name", fileListItem.item.name);
+          data.append("metadata", JSON.stringify({
+            uid: fileListItem.uid,
+            url: this.uri,
+            size: fileListItem.item.size,
+            meta: fileListItem.meta,
+          }));
+          fileListItem.xhr = await this.makeXHRPostRequest(data);
+        }
+      }
+      catch (e) {
+        // in case one of the global maxes have been reached, invalidate the file
+        this.updateValueInMap(fileListItem.item.name, "valid", false, false);
+      }
+    };
+    this.uploadPendingFiles = () => {
+      for (const [key, value] of this.files.entries()) {
+        if (value.group === "pending" && value.pending === true) {
+          this.uploadFile(value, true, key);
+        }
+      }
+    };
     this.getItemFromUID = (uid) => {
       for (const [key, value] of this.files.entries()) {
         if (value.uid === uid) {
@@ -1202,7 +1268,8 @@ const DuetUpload = class {
       return null;
     };
     this.onDelete = (key, ev) => {
-      const retrievedKey = this.getItemFromUID(key).key;
+      const item = this.getItemFromUID(key);
+      const retrievedKey = item.key;
       const deletedItem = this.files.get(retrievedKey);
       this.files.delete(retrievedKey);
       this.validateTotals();
@@ -1212,7 +1279,8 @@ const DuetUpload = class {
         data: { deletion: deletedItem },
         component: "duet-upload",
       });
-      if (!this.external) {
+      // don't send a xhr request if the item was pending, just remove it from the list
+      if (!this.external && !deletedItem.pending) {
         this.makeXHRDeleteRequest(deletedItem);
       }
       this.resetFormFields();
@@ -1277,6 +1345,7 @@ const DuetUpload = class {
       const all = [...this.files.values()];
       const inprogress = [];
       const failure = [];
+      const pending = [];
       const success = [];
       all.forEach(data => {
         const group = this.getGroupFromItemData(data);
@@ -1295,6 +1364,13 @@ const DuetUpload = class {
             group,
           });
         }
+        else if (group === this.DefaultGroups.pending) {
+          pending.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
         else if (group === this.DefaultGroups.failure) {
           failure.push({
             uid: data.uid,
@@ -1312,6 +1388,7 @@ const DuetUpload = class {
       });
       return {
         inprogress,
+        pending,
         failure,
         success,
       };
@@ -1385,6 +1462,12 @@ const DuetUpload = class {
     this.nativeInput.click();
     return;
   }
+  /**
+   * Method for uploading pending files
+   */
+  async uploadPending() {
+    this.uploadPendingFiles();
+  }
   /**
    * Method for forcing a render of the upload list, element.files can be changed externally
    * But it will only rerender on a new Map or a top Level change - this can be used to update
@@ -1523,19 +1606,14 @@ const DuetUpload = class {
           this.updateValueInMap(item.name, "valid", false, false);
         }
         else if (valid && !this.external) {
-          // if all is well AND external file upload handling has not been set, start upload
-          const data = new FormData();
-          data.append("file", item);
-          data.append("uid", uid);
-          data.append("name", item.name);
-          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size, meta: fileListItem.meta }));
-          try {
-            fileListItem.xhr = await this.makeXHRPostRequest(data);
-          }
-          catch (e) {
-            // in case one of the global maxes have been reached, invalidate the file
-            this.updateValueInMap(item.name, "valid", false, false);
-          }
+          await this.uploadFile(fileListItem);
+        }
+        else if (valid && this.external) {
+          this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+          this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+        }
+        else if (!valid) {
+          this.updateValueInMap(item.name, "valid", false, true);
         }
         // kick the stat to force update
         this.kick();

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-ff5be49a.js';
+import { r as registerInstance, h, H as Host } from './index-1e15387b.js';
 import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.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:#00294d;text-align:center;background:#f5f8fa;border-radius:4px}.duet-empty-state.duet-theme-turva{color:#171c3a;background:#f5f5f7}";

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-ff5be49a.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-1e15387b.js';
 import { c as createID } from './create-id-981107da.js';
 import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 

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

@@ -1,7 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent$1, h, F as Fragment, g as getElement } from './index-ff5be49a.js';
+import { r as registerInstance, c as createEvent$1, h, F as Fragment, g as getElement } from './index-1e15387b.js';
+import { a as actionArrowDownSmall } from './action-arrow-down-small-82273dc8.js';
+import { a as actionArrowRightSmall } from './action-arrow-right-small-f9d2ba83.js';
 import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
 import { a as getLanguage, g as getLocaleString } from './language-utils-bf701d37.js';
@@ -12,13 +14,18 @@ var actionArrowRight={"title":"action-arrow-right","tags":"action arrow right ca
 
 var actionNewWindow={"title":"action-new-window","tags":"arrow open new window tab external link square box rectangle action","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M10.25 2a.75.75 0 1 1 0 1.5h-6.5A2.252 2.252 0 0 0 1.5 5.75v14.5a2.252 2.252 0 0 0 2.25 2.25h14.5a2.252 2.252 0 0 0 2.25-2.25v-6.5a.75.75 0 0 1 1.5 0v6.5A3.754 3.754 0 0 1 18.25 24H3.75A3.754 3.754 0 0 1 0 20.25V5.75A3.754 3.754 0 0 1 3.75 2zm12.985-2c.1 0 .198.02.29.058l.025.011a.726.726 0 0 1 .15.091l.066.059a.755.755 0 0 1 .109.138l.051.1c.04.092.06.192.06.293l-.001 6.363c0 .2-.078.389-.22.53a.743.743 0 0 1-.53.22.743.743 0 0 1-.53-.22.743.743 0 0 1-.22-.53V2.559L15.28 9.764a.75.75 0 0 1-1.06-1.06l7.204-7.205h-4.553a.744.744 0 0 1-.75-.75c0-.2.078-.388.22-.53A.743.743 0 0 1 16.87 0z\"/></svg>"};
 
-const duetFooterCss = "*,*::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;flex-shrink:0;width:100%}.duet-footer{display:block;width:100%;padding-top:20px;padding-bottom:16px;margin-top:48px;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-weight:400;line-height:1.5;color:white;text-align:left;background:#00294d}.duet-footer.duet-p-0{padding:0 !important}.duet-footer.duet-m-0{margin:0 !important}@media (min-width: 36em){.duet-footer{padding-top:36px}}@media (min-width: 62em){.duet-footer{padding-top:48px;padding-bottom:36px}}.duet-footer.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";background:#c60c30}.duet-footer a{color:white;text-decoration:none}@media (min-width: 62em){.duet-footer a{border-radius:4px}}.duet-footer a:focus{outline:0}:host(.user-is-tabbing) .duet-footer a:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva a:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-footer-wrapper{position:relative;margin:0 auto}@media (min-width: 62em){.duet-footer-wrapper{padding:0 72px 0 48px}}@media (min-width: 76.25em){.duet-footer-wrapper{max-width:1110px;padding:0 20px 0 0}}.duet-footer-top{width:100%}@media (min-width: 62em){.duet-footer-top{display:flex;flex-direction:row;align-items:center;justify-content:space-between}}duet-logo{margin-left:16px !important}@media (min-width: 36em){duet-logo{margin-left:28px !important}}@media (min-width: 62em){duet-logo{margin-left:0 !important}}.duet-footer-link{padding:16px !important;display:flex;flex-direction:row;align-items:center;width:100%;font-weight:600;border-bottom:1px solid rgba(255, 255, 255, 0.2);transition:background-color 300ms ease}@media (min-width: 36em){.duet-footer-link{padding-right:20px !important;padding-left:28px !important}}@media (min-width: 62em){.duet-footer-link{width:auto;min-width:0;padding-right:0 !important;padding-left:0 !important;border:0}}.duet-footer-link:first-of-type{margin-top:20px;border-top:1px solid rgba(255, 255, 255, 0.2)}@media (min-width: 62em){.duet-footer-link:first-of-type{margin:0;border:0}}.duet-footer-link span{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duet-footer-link:hover{background:rgba(0, 0, 0, 0.1)}@media (min-width: 62em){.duet-footer-link:hover{background:transparent}}.duet-footer-icon{display:flex;align-items:center;justify-content:center;padding:12px;margin-right:16px;background:#0077b3;border-radius:50%;transition:300ms ease}.duet-theme-turva .duet-footer-icon{background:transparent;box-shadow:0 0 0 1px white}a:hover .duet-footer-icon{background:#006ba1}.duet-theme-turva a:hover .duet-footer-icon{background:transparent}.duet-footer-arrow{display:flex;align-items:center;justify-content:center;width:20px;min-width:20px;max-width:20px;height:20px;max-height:20px;margin-left:auto;color:white;transition:transform 300ms ease}@media (min-width: 62em){.duet-footer-arrow{width:10px;min-width:10px;margin-top:3px;margin-left:8px}}@media (min-width: 62em){.duet-footer-arrow{margin-right:0}}a:hover .duet-footer-arrow{transform:translateX(4px)}.duet-footer-arrow duet-icon{width:20px;height:20px}@media (min-width: 62em){.duet-footer-arrow duet-icon{width:10px;height:10px}}.duet-footer-menu{padding:20px !important;font-size:0.875rem}@media (min-width: 36em){.duet-footer-menu{padding:28px !important}}@media (min-width: 62em){.duet-footer-menu{padding-left:8px !important}}.duet-footer-menu a{display:inline-block;text-decoration:none;word-break:break-all}.duet-footer-menu a:hover,.duet-footer-menu a:focus{text-decoration:underline}.duet-footer-menu a:hover .duet-footer-divider,.duet-footer-menu a:focus .duet-footer-divider{text-decoration:none}.duet-footer-menu .duet-footer-divider{display:inline-block;margin:0 8px}.duet-footer-menu a:last-of-type .duet-footer-divider{display:none}.duet-footer-copyright{color:white}.duet-footer-simple{padding:0;margin:0;margin-top:16px;color:#00294d;background:transparent !important;border-top:1px solid #e1e3e6}.duet-footer-simple .duet-footer-wrapper{max-width:100%;padding:0 20px;margin:0}@media (min-width: 62em){.duet-footer-simple .duet-footer-wrapper{padding:0 36px}}@media (min-width: 106.25em){.duet-footer-simple .duet-footer-wrapper{padding:0 48px}}.duet-footer-simple .duet-footer-copyright,.duet-footer-simple .duet-footer-menu a{color:#00294d}.duet-footer-simple .duet-footer-menu{padding:20px 0 !important}.duet-footer-simple.duet-theme-turva{color:#171c3a;border-color:#e4e4e6}.duet-footer-simple.duet-theme-turva .duet-footer-copyright,.duet-footer-simple.duet-theme-turva .duet-footer-menu a{color:#171c3a}.duet-footer-external{display:inline-block;margin-left:4px;color:#0077b3}.duet-theme-turva .duet-footer-external{color:white}.duet-footer-simple.duet-theme-turva .duet-footer-external{color:#c60c30}";
+const duetFooterCss = "*,*::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;flex-shrink:0;width:100%}.duet-footer{display:block;width:100%;padding-top:20px;padding-bottom:16px;margin-top:48px;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-weight:400;line-height:1.5;color:white;text-align:left;background:#00294d}.duet-footer.duet-p-0{padding:0 !important}.duet-footer.duet-m-0{margin:0 !important}@media (min-width: 36em){.duet-footer{padding-top:36px}}@media (min-width: 62em){.duet-footer{padding-top:48px;padding-bottom:36px}}.duet-footer.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";background:#c60c30}.duet-footer a{color:white;text-decoration:none}@media (min-width: 62em){.duet-footer a{border-radius:4px}}.duet-footer a:focus{outline:0}:host(.user-is-tabbing) .duet-footer a:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva a:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-footer-wrapper{position:relative;margin:0 auto}@media (min-width: 62em){.duet-footer-wrapper{padding:0 72px 0 48px}}@media (min-width: 76.25em){.duet-footer-wrapper{max-width:1110px;padding:0 20px 0 0}}.duet-footer-top{width:100%}@media (min-width: 62em){.duet-footer-top{display:flex;flex-direction:row;align-items:center;justify-content:space-between}}duet-logo{margin-left:16px !important}@media (min-width: 36em){duet-logo{margin-left:28px !important}}@media (min-width: 62em){duet-logo{margin-left:0 !important}}.duet-footer-link{padding:16px !important;display:flex;flex-direction:row;align-items:center;width:100%;font-weight:600;border-bottom:1px solid rgba(255, 255, 255, 0.2);transition:background-color 300ms ease}@media (min-width: 36em){.duet-footer-link{padding-right:20px !important;padding-left:28px !important}}@media (min-width: 62em){.duet-footer-link{width:auto;min-width:0;padding-right:0 !important;padding-left:0 !important;border:0}}.duet-footer-link:first-of-type{margin-top:20px;border-top:1px solid rgba(255, 255, 255, 0.2)}@media (min-width: 62em){.duet-footer-link:first-of-type{margin:0;border:0}}.duet-footer-link span{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duet-footer-link:hover{background:rgba(0, 0, 0, 0.1)}@media (min-width: 62em){.duet-footer-link:hover{background:transparent}}.duet-footer-icon{display:flex;align-items:center;justify-content:center;padding:12px;margin-right:16px;background:#0077b3;border-radius:50%;transition:300ms ease}.duet-theme-turva .duet-footer-icon{background:transparent;box-shadow:0 0 0 1px white}a:hover .duet-footer-icon{background:#006ba1}.duet-theme-turva a:hover .duet-footer-icon{background:transparent}.duet-footer-arrow{display:flex;align-items:center;justify-content:center;width:20px;min-width:20px;max-width:20px;height:20px;max-height:20px;margin-left:auto;color:white;transition:transform 300ms ease}@media (min-width: 62em){.duet-footer-arrow{width:10px;min-width:10px;margin-top:3px;margin-left:8px}}@media (min-width: 62em){.duet-footer-arrow{margin-right:0}}a:hover .duet-footer-arrow{transform:translateX(4px)}.duet-footer-arrow duet-icon{width:20px;height:20px}@media (min-width: 62em){.duet-footer-arrow duet-icon{width:10px;height:10px}}.duet-footer-menu{padding:20px !important;font-size:0.875rem}@media (min-width: 36em){.duet-footer-menu{padding:28px !important}}@media (min-width: 62em){.duet-footer-menu{padding-left:8px !important}}.duet-footer-menu a{display:inline-block;text-decoration:none;word-break:break-all}.duet-footer-menu a:hover,.duet-footer-menu a:focus{text-decoration:underline}.duet-footer-menu a:hover .duet-footer-divider,.duet-footer-menu a:focus .duet-footer-divider{text-decoration:none}.duet-footer-menu .duet-footer-divider{display:inline-block;margin:0 8px}.duet-footer-menu a:last-of-type .duet-footer-divider{display:none}.duet-footer-copyright{color:white}.duet-footer-simple{padding:0;margin:0;margin-top:16px;color:#00294d;background:transparent !important;border-top:1px solid #e1e3e6}.duet-footer-simple .duet-footer-wrapper{max-width:100%;padding:0 20px;margin:0}@media (min-width: 62em){.duet-footer-simple .duet-footer-wrapper{padding:0 36px}}@media (min-width: 106.25em){.duet-footer-simple .duet-footer-wrapper{padding:0 48px}}.duet-footer-simple .duet-footer-copyright,.duet-footer-simple .duet-footer-menu a{color:#00294d}.duet-footer-simple .duet-footer-menu{padding:20px 0 !important}.duet-footer-simple.duet-theme-turva{color:#171c3a;border-color:#e4e4e6}.duet-footer-simple.duet-theme-turva .duet-footer-copyright,.duet-footer-simple.duet-theme-turva .duet-footer-menu a{color:#171c3a}.duet-footer-multilevel duet-logo{margin-left:0.5rem !important}@media (min-width: 62em){.duet-footer-multilevel duet-logo{margin-left:-0.5rem !important}}.duet-footer-multilevel .duet-footer-link{padding:0.5rem 1.25rem !important;border:0}.duet-footer-multilevel .duet-footer-link:first-of-type{margin:0}.duet-footer-multilevel .duet-footer-link .duet-footer-arrow{margin-left:0.5rem}.duet-footer-multilevel .duet-footer-link .duet-footer-arrow duet-icon{width:0.75rem;height:0.75rem}@media (min-width: 62em){.duet-footer-multilevel .duet-footer-link{padding:0.75rem 0 !important}}.duet-footer-multilevel .duet-footer-top{flex-direction:column;gap:1rem 0;align-items:flex-start}@media (min-width: 62em){.duet-footer-multilevel .multilevel{display:flex;justify-content:space-between;width:100%}}.duet-footer-multilevel .multilevel-main-item{margin-top:1.25rem}@media (min-width: 62em){.duet-footer-multilevel .multilevel-main-item{margin-top:0}}.duet-footer-multilevel .multilevel-main-item .duet-footer-link{padding:0 0.5 1.25rem !important;font-weight:700}@media (min-width: 62em){.duet-footer-multilevel .multilevel-main-item .duet-footer-link{padding:0 0 0.5rem !important}}@media (min-width: 62em){.duet-footer-multilevel .multilevel-primary-items{column-gap:0;width:100%;columns:3}.duet-footer-multilevel .multilevel-primary-items .duet-footer-link{display:inline-flex}}.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link{padding:0.875rem 1.25rem !important;font-weight:700}.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link:first-child{padding:1.25rem 1.25rem 0.875rem !important}@media (min-width: 62em){.duet-footer-multilevel .multilevel-secondary-items{display:grid;grid-template-columns:repeat(3, 1fr);width:100%}.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link,.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link:first-child{display:inline-flex;padding:1rem 0 !important}}.duet-footer-multilevel .multilevel-right .duet-footer-link:first-child{padding-top:0.875rem !important;font-weight:700}@media (min-width: 62em){.duet-footer-multilevel .multilevel-right .duet-footer-link{padding:0.375rem 0 !important;font-size:0.875rem;font-weight:400}.duet-footer-multilevel .multilevel-right .duet-footer-link:first-child{padding-top:0 !important;font-size:1rem;font-weight:600}.duet-footer-multilevel .multilevel-right .tertiary-main-item .duet-footer-arrow{display:none}}.duet-footer-multilevel .duet-footer-menu{padding:1.25rem !important;line-height:2.5}@media (min-width: 62em){.duet-footer-multilevel .duet-footer-menu{padding-right:0 !important;padding-left:0 !important;text-align:right}}.duet-footer-multilevel .duet-footer-copyright{display:none;font-size:0.875rem}@media (min-width: 62em){.duet-footer-multilevel .duet-footer-copyright{position:absolute;left:48px;display:inline}}@media (min-width: 76.25em){.duet-footer-multilevel .duet-footer-copyright{left:0}}.duet-footer-multilevel .duet-footer-copyright.duet-footer-copyright-mobile{display:block;padding-top:0.5rem;padding-bottom:1.25rem;text-align:center}@media (min-width: 62em){.duet-footer-multilevel .duet-footer-copyright.duet-footer-copyright-mobile{display:none}}.duet-footer-multilevel.duet-theme-turva .duet-footer-copyright-mobile{padding-left:1.25rem;text-align:left}.duet-footer-multilevel.duet-theme-turva .duet-footer-icon{color:#171c3a;background:white}.duet-footer-multilevel.duet-theme-turva a:hover .duet-footer-icon{background:#e6e6e6}.duet-footer-external{display:inline-block;margin-left:4px;color:#0077b3}.duet-theme-turva .duet-footer-external{color:white}.duet-footer-simple.duet-theme-turva .duet-footer-external{color:#c60c30}";
 
 const i18n = {
   fi: { lahi: "© LähiTapiola", turva: "© Turva" },
   sv: { lahi: "© LokalTapiola", turva: "© Turva" },
   en: { lahi: "© LocalTapiola", turva: "© Turva" },
 };
+const i18nMultilevel = {
+  fi: { lahi: "© LähiTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
+  sv: { lahi: "© LokalTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
+  en: { lahi: "© LocalTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
+};
 const createEvent = (ev, data) => ({
   component: "duet-footer",
   data,
@@ -36,7 +43,11 @@ const DuetFooter = class {
      * State() variables
      * Inlined decorator, alphabetical order.
      */
+    this.processedMainItem = null;
     this.processedItems = null;
+    this.processedSecondaryItems = null;
+    this.processedTertiaryMainItem = null;
+    this.processedTertiaryItems = null;
     this.processedMenu = null;
     /**
      * Theme of the navigation.
@@ -111,7 +122,11 @@ const DuetFooter = class {
    * Local methods
    */
   async refresh() {
+    this.processedMainItem = parsePossibleJSON(this.mainItem);
     this.processedItems = parsePossibleJSON(this.items);
+    this.processedSecondaryItems = parsePossibleJSON(this.secondaryItems);
+    this.processedTertiaryMainItem = parsePossibleJSON(this.tertiaryMainItem);
+    this.processedTertiaryItems = parsePossibleJSON(this.tertiaryItems);
     this.processedMenu = parsePossibleJSON(this.menu);
   }
   /**
@@ -119,16 +134,20 @@ const DuetFooter = class {
    * Always the last one in the class.
    */
   render() {
-    const text = getLocaleString(i18n);
+    const text = this.variation === "multilevel" ? getLocaleString(i18nMultilevel) : getLocaleString(i18n);
     const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
     return (h("footer", { class: {
         "duet-footer": true,
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
         "duet-footer-simple": this.variation === "simple",
+        "duet-footer-multilevel": this.variation === "multilevel",
       } }, h("div", { class: "duet-footer-wrapper" }, h("div", { class: "duet-footer-top", part: "top" }, this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), this.processedItems &&
       this.variation !== "simple" &&
-      this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) }, h("div", { class: "duet-footer-icon" }, h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: actionNewWindow.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: actionArrowRight.svg, size: "auto", margin: "none", color: "currentColor" }))))))), h("p", { class: "duet-footer-menu", part: "menu" }, h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), this.processedMenu && (h(Fragment, null, h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"), this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-external" }, h("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"))))))))));
+      this.variation !== "multilevel" &&
+      this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) }, h("div", { class: "duet-footer-icon" }, h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: actionNewWindow.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: actionArrowRight.svg, size: "auto", margin: "none", color: "currentColor" })))))), this.processedItems && this.variation === "multilevel" && (h("div", { class: "multilevel" }, h("div", { class: "multilevel-left" }, h("div", { class: "multilevel-main-item" }, this.processedMainItem && (h("a", { class: "duet-footer-link", href: this.processedMainItem.href, id: this.processedMainItem.id, target: this.processedMainItem.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, this.processedMainItem) }, h("span", null, this.processedMainItem.label), this.processedMainItem.external && (h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal)), h("div", { class: "duet-footer-arrow" }, this.processedMainItem.external && (h("duet-icon", { icon: actionNewWindow.svg, size: "xx-small", margin: "none", color: "currentColor" })))))), h("div", { class: "multilevel-primary-items" }, this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) }, h("div", { class: "duet-footer-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor" })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-arrow" }, item.external && (h("duet-icon", { icon: actionNewWindow.svg, size: "xx-small", margin: "none", color: "currentColor" }))))))), h("div", { class: "multilevel-secondary-items" }, this.processedSecondaryItems &&
+      this.processedSecondaryItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) }, h("span", null, item.label), item.external && (h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal)), h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: actionNewWindow.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: actionArrowRightSmall.svg, size: "auto", margin: "none", color: "currentColor" })))))))), h("div", { class: "multilevel-right" }, this.processedTertiaryMainItem && (h("span", { class: "duet-footer-link tertiary-main-item", id: this.processedTertiaryMainItem.id }, h("span", null, this.processedTertiaryMainItem.label), this.processedTertiaryMainItem.external && (h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal)), h("div", { class: "duet-footer-arrow" }, h("duet-icon", { icon: actionArrowDownSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), this.processedTertiaryItems &&
+      this.processedTertiaryItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) }, h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-arrow" }, item.external && (h("duet-icon", { icon: actionNewWindow.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))))), h("slot", { name: "extra" }), h("p", { class: "duet-footer-menu", part: "menu" }, h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), this.processedMenu && (h(Fragment, null, this.variation !== "multilevel" && (h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")), this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("div", { class: "duet-footer-external" }, h("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"))))))), this.variation === "multilevel" && (h("p", { class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`)))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement, H as Host } from './index-ff5be49a.js';
-import { m as media_query_large, a as media_query_medium, b as media_query_small } from './tokens-e110dc89.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-1e15387b.js';
+import { m as media_query_large, a as media_query_medium, b as media_query_small } from './tokens-8ff8c570.js';
 import { w as watchForOptions, a as watchForElement } from './watch-options-dd55bce8.js';
 import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 

package/lib/esm/duet-header_2.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent$1, F as Fragment, H as Host, g as getElement } from './index-ff5be49a.js';
+import { h, r as registerInstance, c as createEvent$1, F as Fragment, H as Host, g as getElement } from './index-1e15387b.js';
 import { f as formSearch } from './form-search-ea8e19ae.js';
-import { m as media_query_large } from './tokens-e110dc89.js';
+import { m as media_query_large } from './tokens-8ff8c570.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.es6-61b5e9a4.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
 import { f as isEscapeKey, g as isSpaceKey, d as isArrowLeftKey, b as isArrowUpKey, a as isArrowRightKey, c as isArrowDownKey } from './keyboard-utils-88ea1007.js';
@@ -11,7 +11,7 @@ import { a as getLanguage, g as getLocaleString } from './language-utils-bf701d3
 import { p as parsePossibleJSON } from './string-utils-5954f458.js';
 import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
 import { a as actionArrowDownSmall } from './action-arrow-down-small-82273dc8.js';
-import { e as colorGrayLightest, f as colorBrandGrayTurva, c as colorPrimaryTurva, g as colorBrandBlue } from './tokens.module-49cbf963.js';
+import { e as colorGrayLightest, f as colorBrandGrayTurva, c as colorPrimaryTurva, g as colorBrandBlue } from './tokens.module-f4572ed7.js';
 import { c as createID } from './create-id-981107da.js';
 
 var navigationContactDropdown={"title":"navigation-contact-dropdown","tags":"navigation contact dropdown speech bubbles","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M20.247 24a.743.743 0 0 1-.53-.22l-4.28-4.28h-.439c-3.308 0-6-2.692-6-6s2.692-6 6-6h3c3.309.001 6 2.692 6 6a5.974 5.974 0 0 1-3 5.179v4.571a.75.75 0 0 1-.751.75zm-5.25-15c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5h.75c.198 0 .391.08.53.22l3.22 3.22v-3.213c0-.289.169-.555.429-.678a4.51 4.51 0 0 0 2.571-4.049 4.504 4.504 0 0 0-4.498-4.499h-3.002z\"/><path d=\"M3.747 16.5a.747.747 0 0 1-.75-.75v-4.57a5.967 5.967 0 0 1-2.65-3.171A5.948 5.948 0 0 1 .57 3.431 6.014 6.014 0 0 1 5.985 0h3.012a6.04 6.04 0 0 1 5.752 4.286.751.751 0 0 1-.718.964.755.755 0 0 1-.719-.536A4.531 4.531 0 0 0 8.997 1.5h-3a4.511 4.511 0 0 0-4.071 2.572c-.512 1.084-.571 2.302-.167 3.431s1.224 2.032 2.308 2.545c.261.123.43.39.43.678v3.214l1.72-1.72a.744.744 0 0 1 1.06 0 .752.752 0 0 1 0 1.061l-3 3a.744.744 0 0 1-.53.219z\"/></svg>"};
@@ -638,7 +638,7 @@ const DuetHeader = class {
             secondLevelItem.items.map(thirdLevelItem => (h("a", { class: {
                 "duet-header-item": true,
                 active: thirdLevelItem.active === true,
-              }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: thirdLevelItem.external ? "_blank" : "_self" }, thirdLevelItem.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))), h("span", null, thirdLevelItem.label), thirdLevelItem.badge && h("div", { class: "duet-header-badge" })))))));
+              }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), target: thirdLevelItem.external ? "_blank" : "_self" }, thirdLevelItem.icon && (h("div", { class: "duet-header-icon" }, h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))), h("span", null, thirdLevelItem.label), thirdLevelItem.badge && h("div", { class: "duet-header-badge" })))))));
         }))))), h("div", { class: "duet-header-bottom-utils" }, h("slot", { name: "utility" })), h("div", { class: "duet-header-utils" }, !itemsHaveSubItems && contactDropdown, languageDropdown, !itemsHaveSubItems && (h(Fragment, null, processedUserWithLink, processedUserWithoutLink)), processedSearch, processedSession))))));
   }
   get element() { return getElement(this); }

package/lib/esm/duet-hero.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ff5be49a.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e15387b.js';
 import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
 import { a as getLanguage, g as getLocaleString } from './language-utils-bf701d37.js';

package/lib/esm/duet-icon.entry.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { E as Env, r as registerInstance, h, H as Host, g as getElement } from './index-ff5be49a.js';
+import { E as Env, r as registerInstance, h, H as Host, g as getElement } from './index-1e15387b.js';
 import { i as inheritGlobalTheme } from './themeable-component-e8fc98bf.js';
-import { g as getColorByName } from './token-utils-e9a69acf.js';
-import './tokens.module-49cbf963.js';
+import { g as getColorByName } from './token-utils-1f9435bc.js';
+import './tokens.module-f4572ed7.js';
 
 const cleanupSvg = (svgContent) => {
   if (typeof document === "undefined" || !svgContent) {