@duetds/components 6.11.2 → 7.0.0

package/hydrate/index.js

@@ -6678,6 +6678,7 @@ class DuetAlert {
     this.padding = "auto";
     this.variation = "default";
     this.dismissible = false;
+    this.focusable = false;
   }
   watchLanguageStateHandler(newValue, oldValue) {
     if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
@@ -6716,6 +6717,15 @@ class DuetAlert {
   async hide() {
     this.handleHide();
   }
+  /**
+   * Sets focus on the specified `duet-alert`.
+   * Works only when focusable property is set to true.
+   * Use this method instead of the global
+   * `button.focus()`.
+   */
+  async setFocus(options) {
+    this.alertContainer.focus(options);
+  }
   /**
    * There is bug in NVDA screen reader
    * that is causing multiple alert readings
@@ -6739,7 +6749,9 @@ class DuetAlert {
         "duet-m-0": this.margin === "none",
         [this.variation]: true,
         "duet-theme-turva": this.theme === "turva",
-      } }, hAsync("div", { class: "duet-alert-container" }, this.icon && (hAsync("div", { class: "duet-alert-icon" }, hAsync("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), hAsync("span", { id: this.descriptiveId }, hAsync("slot", null))), this.dismissible && (hAsync("div", { class: "duet-alert-dismiss" }, hAsync("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
+      } }, hAsync("div", { class: "duet-alert-container", ref: element => {
+        this.alertContainer = element;
+      }, tabindex: this.focusable ? "0" : undefined }, this.icon && (hAsync("div", { class: "duet-alert-icon" }, hAsync("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), hAsync("span", { id: this.descriptiveId }, hAsync("slot", null))), this.dismissible && (hAsync("div", { class: "duet-alert-dismiss" }, hAsync("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
   }
   static get watchers() { return {
     "language": ["watchLanguageStateHandler"]
@@ -6759,11 +6771,13 @@ class DuetAlert {
       "padding": [1],
       "variation": [1],
       "dismissible": [4],
+      "focusable": [4],
       "isDismissed": [32],
       "timeoutID": [32],
       "language": [32],
       "show": [64],
-      "hide": [64]
+      "hide": [64],
+      "setFocus": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -9688,12 +9702,12 @@ function setYear(date, year) {
  * Check if date is within a min and max
  */
 function inRange(date, min, max) {
-  return clamp$1(date, min, max) === date;
+  return clamp$2(date, min, max) === date;
 }
 /**
  * Ensures date is within range, returns min or max if out of bounds
  */
-function clamp$1(date, min, max) {
+function clamp$2(date, min, max) {
   const time = date.getTime();
   if (min && min instanceof Date && time < min.getTime()) {
     return min;
@@ -10073,16 +10087,16 @@ class DuetDatePicker {
     const min = setMonth(startOfMonth(this.focusedDay), month);
     const max = endOfMonth(min);
     const date = setMonth(this.focusedDay, month);
-    this.setFocusedDay(clamp$1(date, min, max));
+    this.setFocusedDay(clamp$2(date, min, max));
   }
   setYear(year) {
     const min = setYear(startOfMonth(this.focusedDay), year);
     const max = endOfMonth(min);
     const date = setYear(this.focusedDay, year);
-    this.setFocusedDay(clamp$1(date, min, max));
+    this.setFocusedDay(clamp$2(date, min, max));
   }
   setFocusedDay(day) {
-    this.focusedDay = clamp$1(day, parseISODate(this.min), parseISODate(this.max));
+    this.focusedDay = clamp$2(day, parseISODate(this.min), parseISODate(this.max));
   }
   determineValidity(date) {
     var _a, _b;
@@ -10529,6 +10543,7 @@ class DuetFieldset {
     this.label = undefined;
     this.error = undefined;
     this.accessibleLiveError = "polite";
+    this.labelHeadingLevel = "h3";
     this.labelHidden = false;
   }
   /**
@@ -10550,7 +10565,7 @@ class DuetFieldset {
       class: {
         "duet-fieldset": true,
         "duet-theme-turva": this.theme === "turva",
-      } }, hAsync("legend", { id: this.labelId }, hAsync("span", null, this.label), this.caption && hAsync("span", null, this.caption)), hAsync("div", { class: {
+      } }, hAsync("legend", { id: this.labelId }, hAsync(this.labelHeadingLevel, null, this.label), this.caption && hAsync("span", null, this.caption)), hAsync("div", { class: {
         "duet-legend-wrapper": true,
         "duet-legend-has-caption": !!this.caption,
         "duet-legend-has-tooltip": this.hasTooltip,
@@ -10569,6 +10584,7 @@ class DuetFieldset {
       "label": [1],
       "error": [1],
       "accessibleLiveError": [1, "accessible-live-error"],
+      "labelHeadingLevel": [1, "label-heading-level"],
       "labelHidden": [4, "label-hidden"],
       "hasTooltip": [32]
     },
@@ -11240,7 +11256,7 @@ class DuetHeader {
     this.hasLanguageChanged = false;
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
     this.boundMqlFunctions = [];
-    this.handleClick = (event) => {
+    this.handleClick = (event, moveFocusToButton = false) => {
       if (event.data.analyticsId) {
         this.duetAnalytics.emit({
           component: "duet-header",
@@ -11248,8 +11264,8 @@ class DuetHeader {
         });
       }
       this.duetChange.emit(event);
-      this.closeMenus();
-      this.closeMobileNavigation();
+      this.closeMenus(moveFocusToButton);
+      this.closeMobileNavigation(moveFocusToButton);
     };
     this.handleSessionClick = (ev) => {
       const e = createEvent(ev, this.processedSession);
@@ -11501,7 +11517,7 @@ class DuetHeader {
     // When Esc is pressed
     if (isEscapeKey(ev)) {
       this.closeMenus(true);
-      this.closeMobileNavigation();
+      this.closeMobileNavigation(true);
     }
   }
   handleKeyDown(ev) {
@@ -11535,7 +11551,7 @@ class DuetHeader {
     this.language = data.country;
     this.hasLanguageChanged = true;
     const e = createEvent(ev, data);
-    this.handleClick(e);
+    this.handleClick(e, true);
     this.duetLanguageSelect.emit(e);
   }
   handleContactClick(ev, data) {
@@ -11571,10 +11587,15 @@ class DuetHeader {
   /**
    * Closes mobile menu in header when called.
    */
-  async closeMobileNavigation() {
+  async closeMobileNavigation(moveFocusToButton = false) {
     if (this.isSlideOutOpen) {
       this.isSlideOutOpen = false;
       enableBodyScroll(this.navigationEl);
+      if (moveFocusToButton) {
+        this.navigationElButton.focus({
+          preventScroll: true,
+        });
+      }
     }
   }
   /**
@@ -11666,7 +11687,7 @@ class DuetHeader {
       languageDropdown() ||
       contactDropdown() ||
       this.processedSession ||
-      this.processedUser) && (hAsync("button", { class: { "duet-header-toggle": true, active: this.isSlideOutOpen }, onClick: event => this.toggleMenu(event, "mobile"), type: "button" }, hAsync("duet-visually-hidden", null, this.accessibleLabel), hAsync(DuetHeaderHamburger, null)))), hAsync("div", { ref: el => (this.navigationEl = el), class: {
+      this.processedUser) && (hAsync("button", { ref: el => (this.navigationElButton = el), class: { "duet-header-toggle": true, active: this.isSlideOutOpen }, onClick: event => this.toggleMenu(event, "mobile"), type: "button", "aria-controls": "duet-header-bottom", "aria-expanded": this.isSlideOutOpen ? "true" : "false" }, hAsync("duet-visually-hidden", null, this.accessibleLabel), hAsync(DuetHeaderHamburger, null)))), hAsync("div", { ref: el => (this.navigationEl = el), id: "duet-header-bottom", class: {
         "duet-header-bottom": true,
         active: this.isSlideOutOpen,
         inactive: !this.processedItems,
@@ -13623,6 +13644,88 @@ class DuetMenuBarLink {
   }; }
 }
 
+/**
+ * Teleport helps resolving z-index issues of overlapping popup elements.
+ * Initiate it in your component's willLoad or didLoad lifecycle hook.
+ * When you open the popup, call teleport.go() and move focus to the popup.
+ * When you close the popup, call teleport.resume() and move focus to the element that opened the popup.
+ * If your popup has closing animation, use the timeout parameter.
+ */
+class Teleport {
+  constructor(element, target) {
+    this.element = element;
+    this.target = target || document.body;
+    this.teleportId = `${Math.random()}-${Date.now()}`.substring(2);
+  }
+  /**
+   * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
+   */
+  go(makeSiblingsInert = false) {
+    this.stub = document.createElement("div");
+    this.element.insertAdjacentElement("afterend", this.stub);
+    this.target.appendChild(this.element);
+    if (makeSiblingsInert) {
+      this._makeSiblingsInert();
+    }
+    this.deletionObserver = new MutationObserver(this._deletionObserverCallback.bind(this));
+    this.deletionObserver.observe(document.documentElement, { childList: true, subtree: true });
+  }
+  resume(delay = 0) {
+    if (delay) {
+      setTimeout(this._resume.bind(this), delay);
+    }
+    else {
+      this._resume();
+    }
+  }
+  _resume() {
+    this.stub.insertAdjacentElement("beforebegin", this.element);
+    this.stub.remove();
+    this._removeInertFromSiblings();
+    this.deletionObserver.disconnect();
+  }
+  _remove() {
+    var _a, _b;
+    (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
+    (_b = this.stub) === null || _b === void 0 ? void 0 : _b.remove();
+    this._removeInertFromSiblings();
+    this.deletionObserver.disconnect();
+  }
+  _makeSiblingsInert() {
+    const siblings = Array.from(this.target.children);
+    siblings.forEach(sibling => {
+      if (sibling !== this.element) {
+        sibling.dataset.duetTeleportId = (sibling.dataset.duetTeleportId || "") + this.teleportId;
+        sibling.inert = true;
+      }
+    });
+  }
+  _removeInertFromSiblings() {
+    const siblings = Array.from(this.target.children);
+    siblings.forEach(sibling => {
+      var _a;
+      if ((_a = sibling.dataset.duetTeleportId) === null || _a === void 0 ? void 0 : _a.includes(this.teleportId)) {
+        sibling.dataset.duetTeleportId = sibling.dataset.duetTeleportId.replace(this.teleportId, "");
+        if (sibling.dataset.duetTeleportId === "") {
+          delete sibling.dataset.duetTeleportId;
+          sibling.inert = false;
+        }
+      }
+    });
+  }
+  /**
+   * If the teleported element or its component (observed via stub) is removed from DOM, clean up the teleport.
+   */
+  _deletionObserverCallback(mutationList) {
+    mutationList.forEach(mutation => {
+      if (Array.from(mutation.removedNodes).includes(this.element) ||
+        Array.from(mutation.removedNodes).some(n => n.contains(this.stub))) {
+        this._remove();
+      }
+    });
+  }
+}
+
 const duetModalCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-modal,*.sc-duet-modal::after,*.sc-duet-modal::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-modal-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-modal-overlay*/.duet-modal-overlay.sc-duet-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;max-height:100vh;overflow-y:auto;visibility:hidden;background:rgba(0, 41, 77, 0.85);opacity:0;transition:300ms ease;transition-delay:200ms}/*!@.duet-modal-overlay.duet-theme-turva*/.duet-modal-overlay.duet-theme-turva.sc-duet-modal{background:rgba(23, 28, 58, 0.85)}/*!@.duet-modal-overlay.duet-modal-active*/.duet-modal-overlay.duet-modal-active.sc-duet-modal{visibility:visible;opacity:1;transition:300ms ease;transition-delay:0s}/*!@.duet-modal-overlay.duet-disable-transitions*/.duet-modal-overlay.duet-disable-transitions.sc-duet-modal{transition:none}/*!@::slotted(img)*/.sc-duet-modal-s>img{width:100%}/*!@.duet-modal-inner*/.duet-modal-inner.sc-duet-modal{display:flex;align-items:center;width:100%;min-height:100%;padding:20px 16px}@media (min-width: 36em){/*!@.duet-modal-inner*/.duet-modal-inner.sc-duet-modal{padding:48px 16px}}@media (max-width: 35.9375em){/*!@.duet-modal-inner.duet-modal-large*/.duet-modal-inner.duet-modal-large.sc-duet-modal{padding-right:0;padding-left:0}}/*!@.duet-modal*/.duet-modal.sc-duet-modal{position:relative;width:100%;max-width:686px;margin:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:rgb(0, 41, 77);background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:300ms ease;transition-delay:0ms;transform:scale(0.96)}/*!@.duet-theme-turva .duet-modal*/.duet-theme-turva.sc-duet-modal .duet-modal.sc-duet-modal{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-modal-active .duet-modal*/.duet-modal-active.sc-duet-modal .duet-modal.sc-duet-modal{opacity:1;transition:300ms ease;transition-delay:200ms;transform:none}/*!@.duet-disable-transitions .duet-modal*/.duet-disable-transitions.sc-duet-modal .duet-modal.sc-duet-modal{transition:none}/*!@.duet-modal.small*/.duet-modal.small.sc-duet-modal{max-width:545px}/*!@.duet-modal.large*/.duet-modal.large.sc-duet-modal{max-width:100%}@media (min-width: 36em){/*!@.duet-modal.large*/.duet-modal.large.sc-duet-modal{max-width:1110px}}/*!@.duet-modal:focus*/.duet-modal.sc-duet-modal:focus{outline:0}/*!@.duet-modal-body*/.duet-modal-body.sc-duet-modal{width:100%;padding:36px 28px}/*!@.duet-modal-body.duet-modal-gutter-none*/.duet-modal-body.duet-modal-gutter-none.sc-duet-modal{padding:0 !important}/*!@.duet-modal-body.duet-modal-gutter-small*/.duet-modal-body.duet-modal-gutter-small.sc-duet-modal{padding:36px 20px}/*!@.duet-modal-body.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal{padding:48px 36px}@media (max-width: 22.5em){/*!@.duet-modal-body*/.duet-modal-body.sc-duet-modal{padding:36px 20px}/*!@.duet-modal-body.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal{padding:48px 28px}}@media (max-width: 35.9375em){/*!@.duet-modal-body*/.duet-modal-body.sc-duet-modal{padding:36px 20px}/*!@.duet-modal-body.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal{padding:48px 36px}}@media (min-width: 36em){/*!@.duet-modal-body*/.duet-modal-body.sc-duet-modal{padding:36px}/*!@.duet-modal-body.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal{padding:28px 72px}}@media (min-width: 48em){/*!@.duet-modal-body*/.duet-modal-body.sc-duet-modal{padding:36px 72px}/*!@.duet-modal-body.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal{padding:36px 72px}}@media (min-width: 76.25em){/*!@.duet-modal-body*/.duet-modal-body.sc-duet-modal{padding:36px 48px 48px}/*!@.duet-modal-body.duet-modal-gutter-large*/.duet-modal-body.duet-modal-gutter-large.sc-duet-modal{padding:48px 94px}/*!@.small .duet-modal-body*/.small.sc-duet-modal .duet-modal-body.sc-duet-modal{padding:36px 48px}}/*!@.duet-modal-header*/.duet-modal-header.sc-duet-modal{text-align:center}/*!@.duet-modal-close*/.duet-modal-close.sc-duet-modal{position:absolute;top:12px;right:12px}/*!@.duet-modal-heading*/.duet-modal-heading.sc-duet-modal{width:100%;padding-right:60px;overflow:hidden;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:1.25rem;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(0, 41, 77);text-decoration:none;text-overflow:ellipsis;letter-spacing:-0.01rem;white-space:nowrap}/*!@.duet-modal-heading.duet-p-0*/.duet-modal-heading.duet-p-0.sc-duet-modal{padding:0 !important}/*!@.duet-modal-heading.duet-m-0*/.duet-modal-heading.duet-m-0.sc-duet-modal{margin:0 !important}";
 
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
@@ -13691,6 +13794,7 @@ class DuetModal {
       }
       this.focusedElBeforeOpen = document.activeElement;
       disableBodyScroll(this.modalEl, { reserveScrollBarGap: true });
+      this.teleport.go(true);
       setTimeout(() => {
         this.buttonEl.setFocus();
       }, TRANSITION_MS);
@@ -13708,6 +13812,7 @@ class DuetModal {
       this.modalEl.classList.remove("duet-disable-transitions");
       enableBodyScroll(this.modalEl);
       this.duetClose.emit();
+      this.teleport.resume(TRANSITION_MS);
       setTimeout(() => {
         focusElement(this.focusedElBeforeOpen);
       }, TRANSITION_MS);
@@ -13731,6 +13836,7 @@ class DuetModal {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
+    this.teleport = new Teleport(this.element);
     if (this.active) {
       // This specific line below can’t be moved to componentWillLoad()
       // as it breaks body scroll enabling.
@@ -14356,6 +14462,9 @@ var actionSubtract={"title":"action-subtract","tags":"action subtract minus remo
 function SafeParseFloat(value, locale) {
   let results;
   if (typeof value === "string") {
+    if (value === "") {
+      return null;
+    }
     //the minuses are NOT the same characters, they differ in unicode for some languages
     // "‐", "−", "–", and "—"
     let convertedMinus = value.replace("−", "-").replace("‐", "-").replace("−", "-").replace("–", "-").replace("—", "-");
@@ -14418,7 +14527,7 @@ function ConvertToEnUS(value, locale, replaceThousands = false) {
   return replacedValue;
 }
 const roundTo = (val, multiple) => Math.round(val / multiple) * multiple;
-const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+const clamp$1 = (val, min, max) => Math.min(Math.max(val, min), max);
 
 const duetNumberInputCss = "*.sc-duet-number-input,*.sc-duet-number-input::after,*.sc-duet-number-input::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-number-input-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;line-height:1.25;text-align:left;vertical-align:bottom}.sc-duet-number-input-h:last-child,.sc-duet-number-input-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-number-input-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-number-input-h{width:100% !important}.duet-m-0.sc-duet-number-input-h{margin:0 !important}.duet-number-container.sc-duet-number-input{position:relative;width:100%}.duet-number-buttons.sc-duet-number-input{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;width:96px;height:calc(100% - 2px)}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50%;height:100%;text-align:center;cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none}.duet-number-buttons.sc-duet-number-input .duet-number-button[aria-disabled=true].sc-duet-number-input,.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:disabled{pointer-events:none}.duet-number-buttons.sc-duet-number-input .duet-number-button[aria-disabled=true].sc-duet-number-input duet-icon.sc-duet-number-input,.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:disabled duet-icon.sc-duet-number-input{opacity:0.4}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:active duet-icon.sc-duet-number-input{transform:translateY(1px)}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:focus{outline:0}.user-is-tabbing.sc-duet-number-input-h .duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:focus{z-index:2;box-shadow:0 0 0 2px rgb(0, 119, 179)}.duet-theme-turva .user-is-tabbing.sc-duet-number-input-h .duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:focus{box-shadow:0 0 0 2px rgb(23, 28, 58)}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:first-of-type{border-left:1px solid rgb(207, 210, 212)}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:first-of-type::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(207, 210, 212, 0.2) 0%, rgba(207, 210, 212, 0.2) 1px, rgba(207, 210, 212, 0.1) 1px, rgba(207, 210, 212, 0) 100%)}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:last-of-type::before{position:absolute;top:20%;left:0;width:1px;height:60%;content:\"\";background:rgb(225, 227, 230)}.duet-theme-turva.sc-duet-number-input-h .duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:first-of-type::before{background:linear-gradient(to left, rgba(207, 207, 209, 0.2) 0%, rgba(207, 207, 209, 0.2) 1px, rgba(207, 207, 209, 0.1) 1px, rgba(207, 207, 209, 0) 100%)}.duet-theme-turva.sc-duet-number-input-h .duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:last-of-type::before{background:rgb(228, 228, 230)}";
 
@@ -14497,7 +14606,7 @@ class DuetNumberInput {
           if (this.rounding) {
             value = roundTo(value, this.step);
           }
-          value = clamp(value, this.min, this.max);
+          value = clamp$1(value, this.min, this.max);
           if (value !== SafeParseFloat(this.value, this.locale) ||
             value !== SafeParseFloat(this.focusedValue, this.locale)) {
             this.setValue(value);
@@ -14562,7 +14671,7 @@ class DuetNumberInput {
         const adjustment = newValue % this.step;
         newValue -= adjustment;
       }
-      const clampedValue = clamp(newValue, this.min, this.max);
+      const clampedValue = clamp$1(newValue, this.min, this.max);
       this.value = this.localizeValue(clampedValue);
       this.emitChange(ev);
     };
@@ -14585,7 +14694,7 @@ class DuetNumberInput {
         const adjustment = this.step - (newValue % this.step);
         newValue += adjustment;
       }
-      newValue = clamp(newValue, this.min, this.max);
+      newValue = clamp$1(newValue, this.min, this.max);
       this.value = this.localizeValue(newValue);
       this.emitChange(ev);
     };
@@ -15161,20 +15270,118 @@ class DuetParagraph {
   }; }
 }
 
+const min$1 = Math.min;
+const max$1 = Math.max;
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+function clamp(start, value, end) {
+  return max$1(start, min$1(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
 function getAlignment(placement) {
   return placement.split('-')[1];
 }
-
-function getLengthFromAxis(axis) {
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
-
-function getSide(placement) {
-  return placement.split('-')[0];
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
 }
-
-function getMainAxisFromPlacement(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  return {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
 }
 
 function computeCoordsFromPlacement(_ref, placement, rtl) {
@@ -15182,13 +15389,14 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
     reference,
     floating
   } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
   const commonX = reference.x + reference.width / 2 - floating.width / 2;
   const commonY = reference.y + reference.height / 2 - floating.height / 2;
-  const mainAxis = getMainAxisFromPlacement(placement);
-  const length = getLengthFromAxis(mainAxis);
-  const commonAlign = reference[length] / 2 - floating[length] / 2;
-  const side = getSide(placement);
-  const isVertical = mainAxis === 'x';
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
   let coords;
   switch (side) {
     case 'top':
@@ -15223,10 +15431,10 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   switch (getAlignment(placement)) {
     case 'start':
-      coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
       break;
     case 'end':
-      coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
       break;
   }
   return coords;
@@ -15324,35 +15532,6 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
-function expandPaddingObject(padding) {
-  return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...padding
-  };
-}
-
-function getSideObjectFromPadding(padding) {
-  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
-    top: padding,
-    right: padding,
-    bottom: padding,
-    left: padding
-  };
-}
-
-function rectToClientRect(rect) {
-  return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
-  };
-}
-
 /**
  * Resolves with an object of overflow side offsets that determine how much the
  * element is overflowing a given clipping boundary on each side.
@@ -15380,8 +15559,8 @@ async function detectOverflow(state, options) {
     elementContext = 'floating',
     altBoundary = false,
     padding = 0
-  } = options;
-  const paddingObject = getSideObjectFromPadding(padding);
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === 'floating' ? 'reference' : 'floating';
   const element = elements[altBoundary ? altContext : elementContext];
   const clippingClientRect = rectToClientRect(await platform.getClippingRect({
@@ -15416,13 +15595,6 @@ async function detectOverflow(state, options) {
   };
 }
 
-const min$1 = Math.min;
-const max$1 = Math.max;
-
-function within(min$1$1, value, max$1$1) {
-  return max$1(min$1$1, min$1(value, max$1$1));
-}
-
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -15432,11 +15604,6 @@ const arrow = options => ({
   name: 'arrow',
   options,
   async fn(state) {
-    // Since `element` is required, we don't Partial<> the type.
-    const {
-      element,
-      padding = 0
-    } = options || {};
     const {
       x,
       y,
@@ -15445,16 +15612,21 @@ const arrow = options => ({
       platform,
       elements
     } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
     if (element == null) {
       return {};
     }
-    const paddingObject = getSideObjectFromPadding(padding);
+    const paddingObject = getPaddingObject(padding);
     const coords = {
       x,
       y
     };
-    const axis = getMainAxisFromPlacement(placement);
-    const length = getLengthFromAxis(axis);
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
     const arrowDimensions = await platform.getDimensions(element);
     const isYAxis = axis === 'y';
     const minProp = isYAxis ? 'top' : 'left';
@@ -15471,98 +15643,35 @@ const arrow = options => ({
     }
     const centerToReference = endDiff / 2 - startDiff / 2;
 
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min$1(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min$1(paddingObject[maxProp], largestPossiblePadding);
+
     // Make sure the arrow doesn't overflow the floating element if the center
     // point is outside the floating element's bounds.
-    const min = paddingObject[minProp];
-    const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
+    const min$1$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = within(min, center, max);
+    const offset = clamp(min$1$1, center, max);
 
     // If the reference is small enough that the arrow's padding causes it to
     // to point to nothing for an aligned placement, adjust the offset of the
     // floating element itself. This stops `shift()` from taking action, but can
     // be worked around by calling it again after the `arrow()` if desired.
-    const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min ? paddingObject[minProp] : paddingObject[maxProp]) - arrowDimensions[length] / 2 < 0;
-    const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0;
+    const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1$1 ? min$1$1 - center : max - center : 0;
     return {
       [axis]: coords[axis] - alignmentOffset,
       data: {
         [axis]: offset,
-        centerOffset: center - offset
+        centerOffset: center - offset + alignmentOffset
       }
     };
   }
 });
 
-const oppositeSideMap = {
-  left: 'right',
-  right: 'left',
-  bottom: 'top',
-  top: 'bottom'
-};
-function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
-}
-
-function getAlignmentSides(placement, rects, rtl) {
-  if (rtl === void 0) {
-    rtl = false;
-  }
-  const alignment = getAlignment(placement);
-  const mainAxis = getMainAxisFromPlacement(placement);
-  const length = getLengthFromAxis(mainAxis);
-  let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
-  if (rects.reference[length] > rects.floating[length]) {
-    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
-  }
-  return {
-    main: mainAlignmentSide,
-    cross: getOppositePlacement(mainAlignmentSide)
-  };
-}
-
-const oppositeAlignmentMap = {
-  start: 'end',
-  end: 'start'
-};
-function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
-}
-
-function getExpandedPlacements(placement) {
-  const oppositePlacement = getOppositePlacement(placement);
-  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
-}
-
-function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
-  switch (side) {
-    case 'top':
-    case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
-    case 'left':
-    case 'right':
-      return isStart ? tb : bt;
-    default:
-      return [];
-  }
-}
-function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
-  const alignment = getAlignment(placement);
-  let list = getSideList(getSide(placement), direction === 'start', rtl);
-  if (alignment) {
-    list = list.map(side => side + "-" + alignment);
-    if (flipAlignment) {
-      list = list.concat(list.map(getOppositeAlignmentPlacement));
-    }
-  }
-  return list;
-}
-
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -15594,7 +15703,7 @@ const flip = function (options) {
         fallbackAxisSideDirection = 'none',
         flipAlignment = true,
         ...detectOverflowOptions
-      } = options;
+      } = evaluate(options, state);
       const side = getSide(placement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
@@ -15610,11 +15719,8 @@ const flip = function (options) {
         overflows.push(overflow[side]);
       }
       if (checkCrossAxis) {
-        const {
-          main,
-          cross
-        } = getAlignmentSides(placement, rects, rtl);
-        overflows.push(overflow[main], overflow[cross]);
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
       }
       overflowsData = [...overflowsData, {
         placement,
@@ -15673,7 +15779,9 @@ const flip = function (options) {
   };
 };
 
-async function convertValueToCoords(state, value) {
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+async function convertValueToCoords(state, options) {
   const {
     placement,
     platform,
@@ -15682,10 +15790,10 @@ async function convertValueToCoords(state, value) {
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
-  const isVertical = getMainAxisFromPlacement(placement) === 'x';
+  const isVertical = getSideAxis(placement) === 'y';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = typeof value === 'function' ? value(state) : value;
+  const rawValue = evaluate(options, state);
 
   // eslint-disable-next-line prefer-const
   let {
@@ -15721,19 +15829,19 @@ async function convertValueToCoords(state, value) {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = function (value) {
-  if (value === void 0) {
-    value = 0;
+const offset = function (options) {
+  if (options === void 0) {
+    options = 0;
   }
   return {
     name: 'offset',
-    options: value,
+    options,
     async fn(state) {
       const {
         x,
         y
       } = state;
-      const diffCoords = await convertValueToCoords(state, value);
+      const diffCoords = await convertValueToCoords(state, options);
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
@@ -15743,10 +15851,6 @@ const offset = function (value) {
   };
 };
 
-function getCrossAxis(axis) {
-  return axis === 'x' ? 'y' : 'x';
-}
-
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -15781,14 +15885,14 @@ const shift = function (options) {
           }
         },
         ...detectOverflowOptions
-      } = options;
+      } = evaluate(options, state);
       const coords = {
         x,
         y
       };
       const overflow = await detectOverflow(state, detectOverflowOptions);
-      const mainAxis = getMainAxisFromPlacement(getSide(placement));
-      const crossAxis = getCrossAxis(mainAxis);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
       if (checkMainAxis) {
@@ -15796,14 +15900,14 @@ const shift = function (options) {
         const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
         const min = mainAxisCoord + overflow[minSide];
         const max = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = within(min, mainAxisCoord, max);
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === 'y' ? 'top' : 'left';
         const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
         const min = crossAxisCoord + overflow[minSide];
         const max = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = within(min, crossAxisCoord, max);
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -16402,39 +16506,6 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-/**
- * Teleport helps resolving z-index issues of overlapping popup elements.
- * Initiate it in your component's willLoad or didLoad lifecycle hook.
- * When you open the popup, call teleport.go() and move focus to the popup.
- * When you close the popup, call teleport.resume() and move focus to the element that opened the popup.
- * If your popup has closing animation, use the timeout parameter.
- */
-class Teleport {
-  constructor(element, target) {
-    this.element = element;
-    this.target = target || document.body;
-  }
-  go() {
-    this.stub = document.createElement("div");
-    this.element.insertAdjacentElement("afterend", this.stub);
-    this.target.appendChild(this.element);
-    this.element.style.zIndex = zIndexPopup;
-  }
-  resume(timeout = 0) {
-    if (timeout) {
-      setTimeout(this._resume.bind(this), timeout);
-    }
-    else {
-      this._resume();
-    }
-  }
-  _resume() {
-    this.element.style.zIndex = "";
-    this.stub.insertAdjacentElement("beforebegin", this.element);
-    this.stub.remove();
-  }
-}
-
 const duetPopupMenuCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-popup-menu,*.sc-duet-popup-menu::after,*.sc-duet-popup-menu::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-popup-menu-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-popup-menu-list*/.duet-popup-menu-list.sc-duet-popup-menu{position:absolute;top:0;left:0;z-index:950;width:max-content;min-width:175px;padding:0;padding:1rem 0;margin:0;color:rgb(0, 41, 77);list-style:none;visibility:hidden !important;background:rgb(243, 249, 252);border-radius:0 0 8px 8px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1);opacity:0;transition:transform 300ms ease, visibility 300ms ease, opacity 300ms ease;transform:scaleY(0);transform-origin:top center}/*!@.duet-popup-menu-list.open*/.duet-popup-menu-list.open.sc-duet-popup-menu{visibility:visible !important;opacity:1;transform:scaleY(1)}/*!@.duet-popup-menu-list.fixed*/.duet-popup-menu-list.fixed.sc-duet-popup-menu{position:fixed}/*!@.duet-popup-menu-list.duet-theme-turva*/.duet-popup-menu-list.duet-theme-turva.sc-duet-popup-menu{color:rgb(23, 28, 58) !important;background:rgb(245, 245, 247)}";
 
 class DuetPopupMenu {
@@ -20767,10 +20838,15 @@ const getI18nError = (errorCode, errorCodes) => {
   }
 };
 
+const headerAriaLabel = {
+  fi: "Liiteluettelo",
+  sv: "Lista över bilagor",
+  en: "Attachments list",
+};
 const UploadItemHeader = ({ label, categoryLabel }) => {
-  return (hAsync("div", { class: "items-header" },
-    categoryLabel && (hAsync("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none" }, getLocaleString(categoryLabel))),
-    hAsync("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none" }, getLocaleString(label))));
+  return (hAsync("div", { class: "items-header", tabindex: "0", "aria-label": getLocaleString(headerAriaLabel) },
+    categoryLabel && (hAsync("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(categoryLabel))),
+    hAsync("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(label))));
 };
 
 const validateFileExtension = (name, allowedExtensions) => {
@@ -21447,27 +21523,27 @@ class DuetUpload {
     this.caption = undefined;
     this.statusLabelDefaults = {
       fi: {
-        inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
-        inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
-        done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
-        doneWithErrors: "Lataus valmis, {filesUploaded} tiedostoa ladattu onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
-        files: "tiedostot",
+        inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
+        inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
+        done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
+        doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
+        files: "tiedostoa",
         file: "tiedosto",
       },
       sv: {
-        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
         inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
-        done: "Alla {filesTotal} har lagts till",
-        doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+        done: "Uppladdningen slutförd, {filesTotal} har lagts till",
+        doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
         files: "filer",
         file: "fil",
       },
       en: {
-        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgress: "Uploading {filesUploaded} of {filesTotal}",
         inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
-        done: "All {filesTotal} added successfully",
-        doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
-        files: "File",
+        done: "Upload completed, {filesTotal} added successfully",
+        doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
+        files: "files",
         file: "file",
       },
     };
@@ -21525,6 +21601,7 @@ class DuetUpload {
       sv: "Lägg till en bilaga",
       en: "Uploaded file",
     };
+    this.headerHeadingLevel = "h3";
     this.hideHeader = false;
     this.emitEvent = false;
     this.groups = [
@@ -21661,7 +21738,7 @@ class DuetUpload {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (hAsync(Host, { class: { "duet-m-0": this.margin === "none" } }, hAsync("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, hAsync("slot", { name: "header" }), !this.files.size && (hAsync("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, hAsync("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && hAsync("slot", { name: "fileheader" }), !!this.files.size && (hAsync("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 && hAsync("slot", { name: "filefooter" }), hAsync("slot", { name: "uploadfooter" }), this.captionOnBottom && (hAsync("duet-caption", { margin: "none", size: "small" }, hAsync("div", { class: "upload-bottom-caption" }, caption))), hAsync("slot", { name: "afterfooter" }), !this.hideButton && (hAsync(Fragment, null, hAsync("duet-spacer", { size: "large" }), hAsync("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 ||
+    return (hAsync(Host, { class: { "duet-m-0": this.margin === "none" } }, hAsync("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, hAsync("slot", { name: "header" }), !this.files.size && (hAsync("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, hAsync("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && hAsync("slot", { name: "fileheader" }), !!this.files.size && (hAsync("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 && hAsync("slot", { name: "filefooter" }), hAsync("slot", { name: "uploadfooter" }), this.captionOnBottom && (hAsync("duet-caption", { margin: "none", size: "small" }, hAsync("div", { class: "upload-bottom-caption" }, caption))), hAsync("slot", { name: "afterfooter" }), !this.hideButton && (hAsync(Fragment, null, hAsync("duet-spacer", { size: "large" }), hAsync("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 ||
       this.filesToUploadExceedsLimit ||
       this.filesToUploadTotalSizeIsAboveMax) && (hAsync(Fragment, null, hAsync("duet-spacer", { size: "medium" }), hAsync("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), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), hAsync("duet-visually-hidden", { "aria-hidden": "true" }, hAsync("input", { ref: input => {
@@ -21853,6 +21930,7 @@ class DuetUpload {
       "captionOnBottom": [4, "caption-on-bottom"],
       "showUploadedItemsHeader": [4, "show-uploaded-items-header"],
       "uploadedItemsHeaderLabel": [16],
+      "headerHeadingLevel": [1, "header-heading-level"],
       "hideHeader": [4, "hide-header"],
       "emitEvent": [4, "link-click-event"],
       "groups": [16],
@@ -22004,7 +22082,8 @@ class DuetUploadItem {
   }
   async focusActionButton() {
     if (this.actionButton) {
-      await this.actionButton.setFocus();
+      await this.actionButton.setFocus({ preventScroll: true });
+      this.actionButton.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
     }
   }
   getFileNameLine() {
@@ -22024,9 +22103,9 @@ class DuetUploadItem {
     }
   }
   render() {
-    const { uid, meta } = this.data;
+    const { uid, meta, item } = this.data;
     const Badges = meta && meta.badges ? (hAsync("span", null, meta.badges.map(badgeText => (hAsync("duet-badge", { color: "primary" }, badgeText))))) : undefined;
-    const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${name}`;
+    const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${item.name}`;
     return (hAsync("div", { class: {
         "upload-item-row": true,
       } }, this.showCategory && (hAsync("div", { class: "item-categories" }, hAsync("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), hAsync("div", { class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (hAsync("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), hAsync("div", { class: "item-actions" }, this.actions.map(actionItem => {